Spyro Documentation

Spyro Advanced Tabs

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.

Advanced Tabs

Spyro Advanced Tabs - Advanced Tabs

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.

Advanced Tabs – Styling

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.

Advanced Tabs – Advanced Options

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.  

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google
Spotify
Consent to display content from Spotify
Sound Cloud
Consent to display content from Sound