{"id":702,"date":"2017-03-29T10:10:07","date_gmt":"2017-03-29T09:10:07","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=702"},"modified":"2024-01-18T12:39:30","modified_gmt":"2024-01-18T12:39:30","slug":"tab-sections","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/tab-sections\/","title":{"rendered":"Tab Sections"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-7xmwye-e203bb062f8f0639885308ad3b21cff5\">\n.flex_column.av-7xmwye-e203bb062f8f0639885308ad3b21cff5{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-7xmwye-e203bb062f8f0639885308ad3b21cff5 av_one_full  avia-builder-el-0  avia-builder-el-no-sibling  first flex_column_div av-zero-column-padding  '     ><p>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-1c88ee-5faa70d6fe5603bcb7890603c4eabc8a\">\n#top .av-special-heading.av-1c88ee-5faa70d6fe5603bcb7890603c4eabc8a{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-1c88ee-5faa70d6fe5603bcb7890603c4eabc8a .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-1c88ee-5faa70d6fe5603bcb7890603c4eabc8a .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-1c88ee-5faa70d6fe5603bcb7890603c4eabc8a av-special-heading-h1 blockquote modern-quote  avia-builder-el-1  el_before_av_hr  avia-builder-el-first '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Tab Section<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div><br \/>\n<div  class='hr av-7gv4ue-62c957889c09e83efbd444a4627dcc8b hr-default  avia-builder-el-2  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-7en92m-e829b74eab142d902335c8a647df6768 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview<\/h2>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-75jrpy-6cc43fb9dde1cef96d179e34754537ed '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Tab section element is easy to setup from the advanced layout editor and displays the content and tabs in various styles (like text only, with the image, with an icon, above or below the tab section, etc). Tab element is a full-width section and hence if a sidebar exists on the page it will be pushed below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7169\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tab-Section-\u2013-Enfold-2017.png\" alt=\"\" width=\"1268\" height=\"739\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tab-Section-\u2013-Enfold-2017.png 1268w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tab-Section-\u2013-Enfold-2017-300x175.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tab-Section-\u2013-Enfold-2017-768x448.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tab-Section-\u2013-Enfold-2017-1030x600.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tab-Section-\u2013-Enfold-2017-705x411.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tab-Section-\u2013-Enfold-2017-450x262.png 450w\" sizes=\"auto, (max-width: 1268px) 100vw, 1268px\" \/><\/p>\n<p><a href=\"http:\/\/www.kriesi.at\/themes\/enfold-2017\/elements\/tab-section\/\" target=\"_blank\" rel=\"noopener\">Click here for more examples of Tab section.<\/a><\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-728gyu-8085d7336fc3190af5646426e2ceed8a hr-default  avia-builder-el-5  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-6w47ye-b8349b6ca2fa3e5cccf05fe876dd74fd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Code Snippets<\/h2>\n<\/div><\/section><br \/>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-7  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div><br \/>\n<div  class='hr av-nreiu-ebfe4dc18f5431af2adbdf21a9315c10 hr-default  avia-builder-el-8  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-6c1p5i-d262d5d0a50d253d22c8564cd5da6136 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-jkuozbv2-e79cba63cf13fdea0ca93ad3f1c678d7 av-minimal-toggle  avia-builder-el-10  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-4ci12-af92369b8726fcfe31e93a1283ce427c'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"Shortcode\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Shortcode\" data-aria_expanded=\"Click to collapse: Shortcode\">Shortcode<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" >\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<div  class='hr av-5fvua6-e94e6cbfc68869969209dc20b03ba259 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-574c9a-1db807f19320bbbfd138e41c862a9a89 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section><br \/>\n<div  class='hr av-i5oy6-a9c7716cf6105c0d0fdfb0ce46a10fc7 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-4uitva-63fae55610c68a593e7ad0bfad55d4df '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Tab Icons<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-4sikse-6eacdde0779cf49db46539e1bed20507 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Tab icon size:<br \/>\n<code><\/code><\/p>\n<p><code><code><\/code><\/code><\/p>\n<pre>\/* CSS - Tab icon size*\/\r\nspan.av-tab-section-icon:before {\r\nfont-size: 76px!important;\r\n}<\/pre>\n<p><code><\/code><\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-4hmy0u-462a88cbf4c238ccf7e2df0fd7c54ef8 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-4dpc12-b7a2d3d91a4bb8ef5516d48ea42a65a8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Tab Styles<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-4a2reu-22c137ac998d299082f0839b7f38a437 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Tab font slyles:<code><\/code><\/p>\n<p><code><code><\/code><\/code><\/p>\n<pre>\/* CSS - Tab font slyles *\/\r\n.av-inner-tab-title {\r\n    font-size: 13px;\r\n    font-weight: 900;\r\n    letter-spacing: .5em;\r\n    line-height: 24px;\r\n}<\/pre>\n<p><code><\/code><\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-43fkau-d0084b72ffb33d6444885357340acfa3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Tab font slyle on hover:<code><\/code><\/p>\n<p><code><code><\/code><\/code><\/p>\n<pre>\/* CSS - Tab font slyle on hover *\/\r\n.av-inner-tab-title:hover {\r\n    color: black;\r\n}<\/pre>\n<p><code><\/code><\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-3xly06-7fb945ed5613bc02e42523cdf4e2579e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Active tab font slyle:<code><\/code><\/p>\n<p><code><code><\/code><\/code><\/p>\n<pre>\/* CSS - Active tab font slyle *\/\r\n.av-active-tab-title {\r\nbackground:gold;\r\n}\r\n<\/pre>\n<p><code><\/code><\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-3s0j8e-91ab773027ab6426b9293abfdf643bd8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Tabs with equal space: Tabs are spread out across the width and share equal space between them.<code><\/code><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7168\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tab-Equal-Space.png\" alt=\"\" width=\"1302\" height=\"240\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tab-Equal-Space.png 1302w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tab-Equal-Space-300x55.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tab-Equal-Space-768x142.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tab-Equal-Space-1030x190.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tab-Equal-Space-705x130.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tab-Equal-Space-450x83.png 450w\" sizes=\"auto, (max-width: 1302px) 100vw, 1302px\" \/><\/p>\n<p><code><code><\/code><\/code><\/p>\n<pre>\/* CSS - Tabs with equal space*\/\r\n.js_active .av-tab-section-tab-title-container { \r\n    display: flex!important;\r\n    justify-content: space-around;\r\n}<\/pre>\n<p><code><\/code><\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-3lpeja-5e076aeb9a1e1a7525cbde560855a0a1 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-3djumu-45f35a572b12f09a6779f2c77254856b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Tab Shapes<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-38n7u6-a754ef3ffe32f6a491a38d038a89cb1d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To create pill shape tabs, give your tabs section element a custom CSS class name &#8220;av-pill-tabs&#8221; and add the below CSS to your site.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7170\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tabs-pill.png\" alt=\"\" width=\"567\" height=\"76\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tabs-pill.png 567w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tabs-pill-300x40.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tabs-pill-450x60.png 450w\" sizes=\"auto, (max-width: 567px) 100vw, 567px\" \/><\/p>\n<pre>\/*----------------------------------------\r\n\/\/ CSS - Tabs pill shape\r\n\/\/--------------------------------------*\/\r\n\r\n    .av-pill-tabs .av-tab-section-tab-title-container a {\r\n        background: #1869ff;\r\n        border-radius: 50px;\r\n        padding: 0!important;\r\n        margin-top: -10px;\r\n        overflow: hidden;\r\n    }\r\n\r\n    #top .av-pill-tabs .av-section-tab-title {\r\n        margin-right: 60px!important;\r\n        padding: 0!important;\r\n    }\r\n\r\n    .av-pill-tabs .av-outer-tab-title {\r\n        padding: 0px!important;\r\n        margin: 0 !important;\r\n    }\r\n\r\n    \/* Tab Title *\/\r\n    .av-pill-tabs .av-inner-tab-title {\r\n        color: #FFF;\r\n        margin-bottom: 0px!important;\r\n        line-height: .2em;\r\n        padding: 15px 0 5px 0!important;\r\n    }\r\n\r\n    \/* Tab arrow *\/\r\n    .av-pill-tabs .av-tab-arrow-container {\r\n        top: 5px;\r\n    }\r\n    #top .av-pill-tabs .av-tab-arrow-container span {\r\n        background: gold;\r\n    }<\/pre>\n<p><code><\/code><\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-33dtxq-c48c08655368d73d39cd2667a84fa200 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To change the tabs shape to circle or round, please give your tab section element a custom CSS class name &#8220;av-round-tabs&#8221; and add the below CSS code in your site:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7171\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tabs-round.png\" alt=\"\" width=\"585\" height=\"120\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tabs-round.png 585w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tabs-round-300x62.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Tabs-round-450x92.png 450w\" sizes=\"auto, (max-width: 585px) 100vw, 585px\" \/><\/p>\n<pre>    \/*----------------------------------------\r\n\/\/ CSS - Tabs round shape\r\n\/\/--------------------------------------*\/\r\n.av-round-tabs .av-tab-section-tab-title-container a {\r\n\tbackground:#1869ff;\r\n\tborder-radius:90px;\r\n\tpadding:0!important;\r\n\tmargin-top:-10px;\r\n\toverflow: hidden;\r\n\twidth: 90px;\r\n\theight: 90px;\r\n}\r\n\r\n#top .av-round-tabs .av-section-tab-title {\r\n\tmargin-right:60px!important;\r\n\tpadding:10px 0!important;\r\n} \r\n\r\n\/* Tab Title *\/\r\n.av-round-tabs .av-inner-tab-title {\r\n    color: #FFF;\r\n    line-height: 1em;\r\n}\r\n\r\n\/* Tab arrow *\/\r\n.av-round-tabs .av-tab-arrow-container {\r\n    top: 10px;\r\n}\r\n#top .av-round-tabs .av-tab-arrow-container span {\r\n    background: gold;\r\n}<\/pre>\n<\/div><\/section><br \/>\n<div  class='hr av-2xafse-7e4a50651e5906abcf17e28d193aeef0 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-2rxbmm-ed5f359314eed15506ffcb028ec67518 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Tab Animation<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-2juj9i-53e4f11e782e74e364f1c7f6010393c4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Add custom animation to tab text or icons:<\/p>\n<p><code><\/code><\/p>\n<p><code><code><\/code><\/code><\/p>\n<pre>\/*----------------------------------------\r\n\/\/ CSS - Tab Animation\r\n\/\/--------------------------------------*\/\r\n.av-section-tab-title.av-active-tab-title {\r\nanimation: shakeMe 0.250s linear 1;\r\n-webkit-animation: shakeMe 0.250s linear 1;\r\n-moz-animation: shakeMe 0.250s linear 1;\r\n-o-animation: shakeMe 0.250s linear 1;\r\n-ms-animation: shakeMe 0.250s linear 1;\r\n}\r\n\r\n\/* Animation Effect *\/\r\n\r\n@keyframes shakeMe {\r\n25% {\r\ntransform: rotateZ(15deg);\r\n-webkit-transform: rotateZ(15deg);\r\n-moz-transform: rotateZ(15deg);\r\n-o-transform: rotateZ(15deg);\r\n-ms-transform: rotateZ(15deg);\r\n}\r\n50% {\r\ntransform: rotateZ(-15deg);\r\n-webkit-transform: rotateZ(-15deg);\r\n-moz-transform: rotateZ(-15deg);\r\n-o-transform: rotateZ(-15deg);\r\n-ms-transform: rotateZ(-15deg);\r\n}\r\n100% {\r\ntransform: rotateZ(15deg);\r\n-webkit-transform: rotateZ(15deg);\r\n-moz-transform: rotateZ(15deg);\r\n-o-transform: rotateZ(15deg);\r\n-ms-transform: rotateZ(15deg);\r\n}}<\/pre>\n<p><code><\/code><\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-8klc6-2dc388fb83f3ba4c6550c6156c29100b hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-2alrbq-33f9dae780003e98e1c4ca5407dd3766 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Remove the Grayscale from the inactive tab<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-214ory-2d4b7d26819e0532b33f036b87f1db79 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Remove greyscale effect from inactive tab icons\/images.<\/p>\n<p><code><\/code><\/p>\n<pre>\/*-------------------------------------------------------------\r\n\/\/ CSS - Remove greyscale from inactive tabs\r\n\/\/------------------------------------------------------------*\/\r\n.av-tab-section-image {\r\n    filter: none!important;\r\n}<\/pre>\n<\/div><\/section><br \/>\n<div  class='hr av-1umcti-2f1bfe7ab3ddb319c5e3aede8bc4ea7f hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-6hyly-dc25e2a080064cf8c5a44d9cbc825737 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Increase the tab spacing<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1jryt2-d8cc577a800383f2900b273192dc2d24 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Increase the space between tabs<code><\/code><\/p>\n<pre>\/*------------------------------\r\n\/\/ CSS - Increase tab spacing\r\n\/\/------------------------------*\/\r\n#top .av-section-tab-title {\r\n    padding-right:60px!important;\r\n}<\/pre>\n<\/div><\/section><br \/>\n<div  class='hr av-1declq-e7b880cb2d1aeab7b1f6f8f103db3b99 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-16qsdi-a8cf37a6fb7e58804c757753fd7ecdb8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Link to a specific tab on the tab section<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-150o9i-00c20fd466d5a4ec8b33c56210321a58 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>When a link is clicked if you like to direct the user to a specific tab section it is possible by using a tab section ID in the URL as shown below:<\/p>\n<p><code><\/code><\/p>\n<pre>http:\/\/domain.com\/mypage\/#tab-id-2<\/pre>\n<\/div><\/section><br \/>\n<div  class='hr av-ylpg6-71e2f6b6400466ef9f7e6fe564069aae hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-oz4li-32668d7d5ac2bb57eafd05deedbe85f6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Limitations<\/h2>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-9r5qu-21c81774e05771c677f8a2d7119c3e5d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Scrolling to the Tab Section using a direct link isn&#8217;t possible. This is a known limitation of the Tab Section element.<\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-av_hr-24d9b57a56e73600b2072fcf54ff5ead hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-av_textblock-9892ca9d6e5bdc8fa1d7ffcac136d11b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section><br \/>\n<div  class='hr av-ilczq-0cff021464c5dafadec049a1cfe5e834 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-dczcu-16dc2d605cfbab511e505d1a160715c5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Contributed video:<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-av_textblock-9892ca9d6e5bdc8fa1d7ffcac136d11b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><a href=\"https:\/\/www.youtube.com\/watch?v=t_RvzrrktFs\" target=\"_blank\" rel=\"noopener\">Tab section tutorial<\/a><\/p>\n<\/div><\/section><\/p><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,5],"tags":[],"class_list":["post-702","post","type-post","status-publish","format-standard","hentry","category-documentation","category-layout-elements","documentation","layout-elements"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=702"}],"version-history":[{"count":4,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/702\/revisions"}],"predecessor-version":[{"id":13628,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/702\/revisions\/13628"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}