{"id":570,"date":"2021-10-08T11:05:43","date_gmt":"2021-10-08T11:05:43","guid":{"rendered":"https:\/\/spyrowptheme.com\/documentation\/?page_id=570"},"modified":"2021-10-08T11:06:08","modified_gmt":"2021-10-08T11:06:08","slug":"spyro-advanced-tabs","status":"publish","type":"page","link":"https:\/\/spyrowptheme.com\/documentation\/spyro-advanced-tabs\/","title":{"rendered":"Spyro Advanced Tabs"},"content":{"rendered":"<div  class=\"tatsu-HJ-HFNjTVK tatsu-section  tatsu-bg-overlay   tatsu-clearfix\" data-title=\"\"  data-headerscheme=\"background--dark\"><div class='tatsu-section-pad clearfix' data-padding='{\"d\":\"90px 0px 90px 0px\"}' data-padding-top='90px'><div class=\"tatsu-row-wrap  tatsu-wrap tatsu-row-has-two-cols tatsu-medium-gutter tatsu-reg-cols  tatsu-clearfix tatsu-BJxrKEoaEY\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-bg-overlay tatsu-one-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-HkutNjTEY\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-sidebar tatsu-Hy1cNsa4Y   \"  ><div class=\"widget_nav_menu widget\"><h6>Related Articles<\/h6><div class=\"menu-others-container\"><ul id=\"menu-others\" class=\"menu\"><li id=\"menu-item-594\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-594\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/404-error-after-demo-import\/\" title=\"404 Error after Demo Import\">404 Error after Demo Import<\/a><\/li>\n<li id=\"menu-item-538\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-538\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/site-performance\/\" title=\"Site Performance\">Site Performance<\/a><\/li>\n<li id=\"menu-item-536\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-536\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/multi-language-support\/\" title=\"Multi Language Support\">Multi Language Support<\/a><\/li>\n<li id=\"menu-item-537\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-537\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/site-translation\/\" title=\"Site Translation\">Site Translation<\/a><\/li>\n<li id=\"menu-item-540\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-540\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/set-up-single-page-site\/\" title=\"Set up Single Page Site\">Set up Single Page Site<\/a><\/li>\n<li id=\"menu-item-534\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-534\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/update-theme\/\" title=\"Update Theme\">Update Theme<\/a><\/li>\n<li id=\"menu-item-535\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-535\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/update-plugins\/\" title=\"Update Plugins\">Update Plugins<\/a><\/li>\n<li id=\"menu-item-550\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-550\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/change-log\/\" title=\"Change Log\">Change Log<\/a><\/li>\n<li id=\"menu-item-542\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-542\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/typehub\/\" title=\"Typehub\">Typehub<\/a><\/li>\n<li id=\"menu-item-541\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-541\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/colorhub\/\" title=\"Colorhub\">Colorhub<\/a><\/li>\n<\/ul><\/div><\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-column-overlay tatsu-animate-none\" ><\/div><\/div><style>.tatsu-row > .tatsu-HkutNjTEY.tatsu-column{width: 25%;}.tatsu-HkutNjTEY.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-HkutNjTEY > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-HkutNjTEY > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-HkutNjTEY > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-HkutNjTEY > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-HkutNjTEY.tatsu-column{width: 25%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-HkutNjTEY.tatsu-column{width: 25%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-HkutNjTEY.tatsu-column{width: 100%;}}<\/style><\/div><div  class=\"tatsu-column  tatsu-bg-overlay tatsu-three-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-H1lOt4j6EY\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-H1E5Ns6NY   \" ><style>.tatsu-H1E5Ns6NY .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-H1E5Ns6NY .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p><a href=\"spyro-modules\/\" target=\"_blank\" rel=\"noopener\"><span class=\"tatsu-inline-link-style2\">CATEGORY &gt; SPYRO MODULES<\/span><\/a><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SJB34o6VF   \" ><style>.tatsu-SJB34o6VF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SJB34o6VF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h3>Spyro Advanced Tabs<\/h3>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-H1hpEi6EF   \" ><style>.tatsu-H1hpEi6EF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-H1hpEi6EF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">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 &lsquo;Title&rsquo; Text with Icon, Content Title, Description, and Image, Lists with Icons, and a Button.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">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.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">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.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-Bkz1HiT4F   \" ><style>.tatsu-Bkz1HiT4F .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-Bkz1HiT4F .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Advanced Tabs<\/h4>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-B1bgSs6NY  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 1398px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 49.785407725322%;\" ><\/div><a class = \"mfp-image\" href = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/10\/Spyro-Advanced-Tabs-Advanced-Tabs.png\" ><img class = \"tatsu-gradient-border\" alt = \"Spyro Advanced Tabs - Advanced Tabs\" title = \"Spyro Advanced Tabs &#8211; Advanced Tabs\" data-src = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/10\/Spyro-Advanced-Tabs-Advanced-Tabs.png\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/a><\/div><style>.tatsu-B1bgSs6NY .tatsu-single-image-inner{border-style: solid;max-width: 100%;}.tatsu-B1bgSs6NY.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SyJuHsT4K   \" ><style>.tatsu-SyJuHsT4K .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SyJuHsT4K .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">When editing each tab you first need to Enter a Suitable \u2018Title\u2019, Choose \u2018Icon Type\u2019 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.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ByqdrjpNt   \" ><style>.tatsu-ByqdrjpNt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ByqdrjpNt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Give a \u2018Content Title\u2019 and the description in \u2018Content\u2019. 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. <\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">\u00a0<\/span><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">The same configuration applies to all the tabs you want to show in the Section.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BkXFBiaNK   \" ><style>.tatsu-BkXFBiaNK .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BkXFBiaNK .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Advanced Tabs &#8211; Styling<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SkI5Hs6Vt   \" ><style>.tatsu-SkI5Hs6Vt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SkI5Hs6Vt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">You can style the advanced tabs by first configuring the \u2018Tab Navigation\u2019 that includes Alignment, TItle Color, Icon Color, Background Color, Typography using TypeHub or Custom Fonts, Title Font Style, &amp; Box Shadow.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Similarly, you can style the \u2018Tab Content Color\u2019 using Title Color, Content Color, List Color &amp; List Icon Color. In \u2018Tab Content Typography\u2019 you can alter the Overall Typography, Title Style, Content Style, &amp; Feature Style.<\/span><\/p>\n<p><span lang=\"EN-GB\" style=\"font-size: 11.0pt;line-height: 115%;font-family: 'Segoe UI',sans-serif\">Using the \u2018Button Style\u2019 Option you could Shape and Size of the button and with \u2018Button Colors\u2019 set what colors should the user see when the button is inactive and when the user hovers over it.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-rJ-ABopNK   \" ><style>.tatsu-rJ-ABopNK .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-rJ-ABopNK .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Advanced Tabs &#8211; Advanced Options<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-rJGkLoaEF   \" ><style>.tatsu-rJGkLoaEF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-rJGkLoaEF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">You can also modify the working and behavior of the service with advanced options like <strong>Spacing<\/strong>, <strong>Border<\/strong>, <strong>Box Shadow<\/strong>, <strong>Animation<\/strong>, <strong>CSS Identifiers<\/strong>, and its <strong>Visibility<\/strong>. \u00a0<\/span><\/p>\n<\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-column-overlay tatsu-animate-none\" ><\/div><\/div><style>.tatsu-row > .tatsu-H1lOt4j6EY.tatsu-column{width: 75%;}.tatsu-H1lOt4j6EY.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-H1lOt4j6EY > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-H1lOt4j6EY > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-H1lOt4j6EY > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-H1lOt4j6EY > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-H1lOt4j6EY.tatsu-column{width: 75%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-H1lOt4j6EY.tatsu-column{width: 75%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-H1lOt4j6EY.tatsu-column{width: 100%;}}<\/style><\/div><\/div><\/div><\/div><div class=\"tatsu-section-background-wrap\"><div class = \"tatsu-section-background\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-section-overlay\"><\/div><style>.tatsu-HJ-HFNjTVK .tatsu-section-pad{padding: 90px 0px 90px 0px;}.tatsu-HJ-HFNjTVK .tatsu-section-offset-wrap{transform: translateY(-0px);}.tatsu-HJ-HFNjTVK > .tatsu-bottom-divider{z-index: 9999;}.tatsu-HJ-HFNjTVK > .tatsu-top-divider{z-index: 9999;}.tatsu-HJ-HFNjTVK .tatsu-section-overlay{mix-blend-mode: normal;}<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<div><a href=\"https:\/\/spyrowptheme.com\/documentation\/spyro-advanced-tabs\/\" class=\"exp-read-more exp-read-more-underlined\">Read More<\/a><\/div>\n","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-570","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=570"}],"version-history":[{"count":0,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/570\/revisions"}],"wp:attachment":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}