Advanced Tabs are quite similar to the Spyro Accordion Module. However, the most noticeable difference is how these elements are displayed and presented. Advanced Tabs come with items like ‘Title’ Text with Icon, Content Title, Description, and Image, Lists with Icons, and a Button.
Spyro Advanced Tabs is also a multilevel module consisting of multiple tabs of the same type where each tab is an Individual Sub Module, which will have the controls necessary for setting the service, while the parent module will have settings that affect the entire service or all individual service such as Tab Navigation, Tab Content Typography, Button Style, Button Colors, etc.
To add the Spyro Advanced Tabs Module to your page first, edit the page using Tatsu and add a section with a column/row and then add the Spyro Advanced Tabs module in it.
When editing each tab you first need to Enter a Suitable ‘Title’, Choose ‘Icon Type’ to display an Icon, SVG or an image from Icon(Tatsu Icons), SVG(SVG Icons), or an Image in the Title if you go for the image then you need to set the Image Background Size.
Give a ‘Content Title’ and the description in ‘Content’. Add the text you want to display in the form of lists with the relevant list icon. Next, you have to select any image to display in the tab supporting the content. Lastly, add the button text and the link to the URL.
The same configuration applies to all the tabs you want to show in the Section.
You can style the advanced tabs by first configuring the ‘Tab Navigation’ that includes Alignment, TItle Color, Icon Color, Background Color, Typography using TypeHub or Custom Fonts, Title Font Style, & Box Shadow.
Similarly, you can style the ‘Tab Content Color’ using Title Color, Content Color, List Color & List Icon Color. In ‘Tab Content Typography’ you can alter the Overall Typography, Title Style, Content Style, & Feature Style.
Using the ‘Button Style’ Option you could Shape and Size of the button and with ‘Button Colors’ set what colors should the user see when the button is inactive and when the user hovers over it.
You can also modify the working and behavior of the service with advanced options like Spacing, Border, Box Shadow, Animation, CSS Identifiers, and its Visibility.