How to use Elementor tabs with nested tabs to show dynamic color switching and rotation effects

pass (a bill or inspection etc) Elementor tab respond in singing nested tabs The dynamic display effect realized by the function is especially suitable for e-commerce websites. When the user clicks on different color options, the product will not only switch colors, but also trigger a rotating animation effect, giving visitors a more immersive and interactive experience. This effect enhances the user experience and the visual appeal of the website, and is especially suitable for displaying products with multiple colors and styles to help users better understand and select products.

application scenario::

E-commerce website (product color display)::
Nested tabs are very useful in e-commerce platforms, especially when selling multi-colored products such as apparel, accessories, footwear and electronic products. Users click on different color options, the product color and style instantly switch, and at the same time, through the dynamic rotation effect, to enhance the interactivity and fun of product display.

Clothing & Accessories Showcase::
For fashion items such as apparel, electric shoes, bags, etc., the image can be quickly switched after clicking on different color options, and different angles of the product can be displayed through dynamic rotation effects. Users can clearly view the details of each color to enhance the shopping experience.

Electronics Showcase::
When displaying electronic products such as cell phones and laptops, multiple colors or styles of the product can be displayed through this interactive effect. Whenever the user selects a different color, the image of the displayed product switches and rotates to show various perspectives of the product, helping the consumer make a more informed choice.

Furniture & Home Furnishings Showcase::
For furniture, home decorations, etc., users can choose different color or material options, and when clicked on, the product not only changes color, but also rotates to show its details. This interactive effect not only improves user engagement, but also helps them understand the product more intuitively.

Cosmetics & Beauty Product Showcase::
Different color (e.g. lipstick, foundation) displays for cosmetics, skin care products and other products can also be presented with this tab and rotation effect. Users are able to see a more dynamic product display when clicking to select a different color, enhancing the fun of purchasing decisions.

Demo Address:https://demo-show.361sale.com/elementor-effects-11

File download address↓

After clicking on Get Download File, you will get a file.

Please ensure thatmountingIt's already installed.Elementor Free Edition and Elementor Pro Edition. OnlyElementor Pro versiononly thenTemplate ImportFunction.

The back end of the site findsweb pageClick to addnew page. As pictured above:

start usingElementor Editor. As pictured above:

Click to add the file next to theicon (computing)That is.stencil. As pictured above:

Click on the upper right corner of theuploadflag, and then click theSelect Fileand then select the local file you've justDownloaded files. As pictured above:

Then go back to My Templates to see the template we just imported and click on thepreviewsView the effect before selecting thestick. As shown above.

View the results after the import is complete, it is possible that thefooterrespond in singingfootersThen it is necessary to choose the correspondingstencilUp.

Click on the template we just imported in theweb pageand then clickcompiler. As pictured above:

Select the template and chooseelementor canvasI chose this one becauseDo not show header and footerThe display will only show theTemplate content. As shown above.

at the same timeEditing pages with elmentorSelectionSite SettingsIn the selection ofopening (chess jargon). As pictured above:

Also make sure that the same isElementorCanvas template. This way there will be no(sth. or sb) elseContent. As above:

Please closeHeaders and footersInside, after clickingharbor (i.e. keep sth hidden)Inside, it's pictured above:

Finally, click Keep and then check if the front-end effect is working.

If it appears that the font color does not match the button color, please just adjust the font color, as it is based on the default main color of the website and the button color.

The first option if there is no other page interference in the whole site, please set the global color of the site settings and buttons can be set. As shown below:

The second option is to just set the color of the corresponding module directly, as shown below: