By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

Hero Element breakdown

R

ReliantMind

New Member
Just realized this is the help and support forum haha.. Wanted to ask if any of you could shed some light on something.

Wondering how the hero element for this web site was built: tensorflow.org

If you select any of the tabs they trigger Lottie Animations on the right. I also really like how the animations sit behind the tabs when the viewport adapts to mobile sizes.

Through the inspector I can see that the background is an svg & Creating the animations are my specialty, but how do I go about triggering them with tabbed links like this? Secondly, how do I build a similar hero element wherein the Lottie Animations on the right would sit "behind" the tabbed interface in smaller viewports?

One other thing that hurts my head to think about is how regardless of the width, the text inside of the the tabbed content doesn't change its width. In fact if you keep shrinking it down it eventually turns into a full-width element. With the tabbed widget in elementorpro the width seems to change with the viewport size and has an ugly effect on the title and text inside. Attached a few screen shots to give you an idea.

Any help or even being pointed in the right direction to a tutorial would be most appreciated.
 
elementor official

Attachments

  • tensorflow-hero.png
    tensorflow-hero.png
    385.9 KB · Views: 9
  • TENSOR2.png
    TENSOR2.png
    502.3 KB · Views: 12
  • TENSOR3.png
    TENSOR3.png
    453.7 KB · Views: 12

Latest posts

Latest Products

Other Elementor Resources

elementor official
elementor official
Top