[{"data":1,"prerenderedAt":13},["ShallowReactive",2],{"$f28zxgtzgttqnn":3},{"slug":4,"title":5,"description":6,"published":7,"updated":8,"thumb":9,"html":10,"tag":11,"legacy":12},"how-to-create-vertical-tabs-in-divi","How to create vertical tabs in Divi","This article covers steps to create vertical tabs in Divi using custom CSS. You could also take a look at our Divi Plus plugin that has an advanced tabs...","2018-12-03","2022-11-25","\u002Fwp-content\u002Fuploads\u002F2050\u002F10\u002Fwebsite-1597382-1.png","\u003Cp>\n\u003Cp>\u003Ca target=\"_blank\" rel=\"noopener nofollow\" href=\"https:\u002F\u002Fdiviextended.com\u002Fblack-friday\u002F\">\u003Cspan class=\"et_pb_image_wrap \">\u003Cimg loading=\"lazy\" decoding=\"async\" alt=\"divi extended black friday 40 1920x1080 1\" loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"\u002Fwp-content\u002Fuploads\u002F2022\u002F11\u002Fdivi-extended-black-friday-40-1920x1080-1.jpg\" title=\"divi-extended-black-friday-40-1920x1080\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2022\u002F11\u002Fdivi-extended-black-friday-40-1920x1080-1.jpg 1920w, \u002Fwp-content\u002Fuploads\u002F2022\u002F11\u002Fdivi-extended-black-friday-40-1920x1080-1-1280x720.jpg 1280w, \u002Fwp-content\u002Fuploads\u002F2022\u002F11\u002Fdivi-extended-black-friday-40-1920x1080-1-980x551.jpg 980w, \u002Fwp-content\u002Fuploads\u002F2022\u002F11\u002Fdivi-extended-black-friday-40-1920x1080-1-480x270.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 1920px, 100vw\" class=\"wp-image-197592\" \u002F>\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>This article covers steps to create vertical tabs in Divi using custom CSS. You could also take a look at our Divi Plus plugin that has an advanced tabs module which will let you create vertical tabs with other amazing features. Check out \u003Ca target=\"_blank\" rel=\"noopener nofollow\" href=\"https:\u002F\u002Fdiviplus.io\u002Fdivi-vertical-tabs\u002F\">Divi Verticals Tabs\u003C\u002Fa> demo here.\u003C\u002Fp>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>Are you looking to create a Divi Vertical Tab? Tabs in Divi theme are placed on top by default. Currently there is no option to control the positioning of the tabs and thus if you are looking to move the Divi tabs on the left in vertical position, there is some custom CSS required to achieve this.\u003C\u002Fp>\n\u003Cp>In this post, we look at the scope of moving the Divi tabs vertically with a live implementation. Want vertical tab in both side, then check out this blog post, \u003Cstrong>\u003Ca target=\"_blank\" rel=\"noopener nofollow\" href=\"https:\u002F\u002Fdiviextended.com\u002Fhow-to-create-divi-vertical-tabs\u002F\">How to create Divi vertical tabs (6 examples with CSS)\u003C\u002Fa>.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul class=\"et_pb_tabs_controls clearfix\">\n\u003Cli class=\"et_pb_tab_0 et_pb_tab_active\">\u003Ca href=\"#\">Goal\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli class=\"et_pb_tab_1\">\u003Ca href=\"#\">Assign a CSS Class to Tab\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli class=\"et_pb_tab_2\">\u003Ca href=\"#\">Add CSS to Page\u002FDivi Panel\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli class=\"et_pb_tab_3\">\u003Ca href=\"#\">Goal Accomplished\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4>Goal\u003C\u002Fh4>\n\u003Cp>\u003Cspan style=\"font-size: 16px;\">Our goal is to change the default position of the Divi tabs module and bring it to the left vertically. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-size: 16px;\">We are not making this \u003Cg class=\"gr_ gr_49 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Grammar multiReplace\" id=\"49\" data-gr-id=\"49\">change\u003C\u002Fg> global and it will only apply to the tabs we want.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch4>\u003Ca href=\"\u002F?p=413&et_fb=1#\" class=\"et-fb-editable-element et-fb-editable-element__editing\" data-shortcode-id=\"0.0.0.1.1-1543826176137\" data-quickaccess-id=\"tab-tab\" contenteditable=\"true\">Assign a CSS Class to Tab\u003C\u002Fa>\u003C\u002Fh4>\n\u003Cp>\u003Cspan style=\"font-size: 16px;\">Assign a class to the tab module. We will name it \u003Cstrong>.custom-tabs\u003C\u002Fstrong> in this demo implementation.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" src=\"\u002Fwp-content\u002Fuploads\u002F2018\u002F12\u002Fdivi-tabs-on-left.png\" width=\"385\" height=\"487\" alt=\"Divi Vertical Tabs\" class=\"wp-image-421 alignnone size-full\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2018\u002F12\u002Fdivi-tabs-on-left.png 385w, \u002Fwp-content\u002Fuploads\u002F2018\u002F12\u002Fdivi-tabs-on-left-237x300.png 237w\" sizes=\"(max-width: 385px) 100vw, 385px\" \u002F>\u003C\u002Fp>\n\u003Ch4>\u003Ca href=\"\u002F?p=413&et_fb=1#\" class=\"et-fb-editable-element et-fb-editable-element__editing\" data-shortcode-id=\"0.0.0.1.2-1543826176137\" data-quickaccess-id=\"tab-tab\" contenteditable=\"true\">Add CSS to Page\u002FDivi Theme Pane\u003C\u002Fa>l\u003C\u002Fh4>\n\u003Cp>In the next step, we will paste the following code to our Divi Theme panel.\u003C\u002Fp>\n\u003Cp>It can also be added to the page using Divi Builder but this needs to be repeated on all pages where you want to use the layout.\u003C\u002Fp>\n\u003Cp>If you use the code in Divi theme panel, simply add \u003Cstrong>.custom-tabs\u003C\u002Fstrong> class to the tabs on new pages where you use the module.\u003C\u002Fp>\n\u003Ch4>Goal Accomplished\u003C\u002Fh4>\n\u003Cp>This was a simple and easy implementation for creating vertical Divi tabs which can be applied to an existing tab module in less than 2 minutes. \u003C\u002Fp>\n\u003Cp>See this code in action \u003Ca href=\"https:\u002F\u002Fdiviextended.com\u002Fdocumentation\u002Fdivi-blog-extras-documentation\u002F\" rel=\"noopener noreferrer nofollow\" target=\"_blank\">here\u003C\u002Fa>.\n\u003Ch2>Some examples of tabs created using the \u003Ca target=\"_blank\" rel=\"noopener nofollow\" href=\"https:\u002F\u002Fdiviplus.io\u002Fdivi-vertical-tabs\u002F\">Divi Plus Tabs module\u003C\u002Fa>.\u003C\u002Fh2>\n\u003Cp>The main features include\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Vertical tabs\u003C\u002Fli>\n\u003Cli>Horizontal tabs\u003C\u002Fli>\n\u003Cli>Tab potion on top, bottom, left, right\u003C\u002Fli>\n\u003Cli>On hover\u002Fon click tab trigger\u003C\u002Fli>\n\u003Cli>Use text and icons in tab titles.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Ca href=\"\u002Fhow-to-create-vertical-tabs-in-divi\u002F?et_fb=1&PageSpeed=off\">\u003Cspan class=\"et_pb_image_wrap \">\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"\u002Fhow-to-create-vertical-tabs-in-divi\u002F?et_fb=1&PageSpeed=off\">\u003Cspan class=\"et_pb_image_wrap \">\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"\u002Fhow-to-create-vertical-tabs-in-divi\u002F?et_fb=1&PageSpeed=off\">\u003Cspan class=\"et_pb_image_wrap \">\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"\u002Fhow-to-create-vertical-tabs-in-divi\u002F?et_fb=1&PageSpeed=off\">\u003Cspan class=\"et_pb_image_wrap \">\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fp>\n\u003C\u002Fp>","Archive",true,1793901057416]