[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.22″ background_color=”#efefef” custom_padding=”50px|0px|30px|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row _builder_version=”3.25″ background_color=”#ffffff” custom_padding=”25px|15px|25px|15px|false|false” border_radii=”on|5px|5px|5px|5px” border_width_all=”2px” border_color_all=”#7b9100″ border_style_all=”dashed” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”||||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
By default, the Divi Tabs module layout is boring! Without custom CSS code, it can only display content tabs horizontally (or on the top)…this makes every website that uses Divi Tabs look the exact same…but not anymore!
This detailed how-to guide will help you transform your Divi Tabs module into a thing of beauty or as we like to call it, into a ‘Fancy Tabs’ module. Using custom CSS with no steps skipped, transform your Divi Tabs module to display content boxes vertically / on the side.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.3.1″ background_color=”#efefef” custom_padding=”32px||64px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row column_structure=”1_3,2_3″ make_equal=”on” _builder_version=”3.25″ custom_padding=”5px|0px|0|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_3″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”3.27.4″ global_colors_info=”{}” theme_builder_area=”post_content”]
Step by Step Menu
[/et_pb_text][et_pb_text _builder_version=”4.3.1″ text_font_size=”18px” custom_margin=”||50px|” global_colors_info=”{}” theme_builder_area=”post_content”]#1 Adding a Tabs module
#2 Styling the Tabs module
#3 Styling the Tabs Controls
#4 Styling the Individual Tabs
#5 Styling the Active Tab
#6 Styling the Tabs Content
#7 Removing the Bottom Border[/et_pb_text][et_pb_text _builder_version=”4.3.1″ text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
FREE LAYOUT DOWNLOAD
Skip the tutorial and download the vertical Divi Tabs module layout for FREE.
[/et_pb_text][et_pb_button button_url=”#download-layout” button_text=”Download Layout” button_alignment=”left” _builder_version=”4.3.1″ button_text_color=”#ffffff” button_bg_color=”#13BF04″ button_border_radius=”0px” button_font=”|700||on|||||” custom_css_main_element=”width:100%;||max-width:250px;||border-radius:10px !important;” box_shadow_style=”preset1″ button_border_radius_hover=”5px” global_colors_info=”{}” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”on” button_border_radius__hover=”5px” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”off” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off” theme_builder_area=”post_content”][/et_pb_button][/et_pb_column][et_pb_column type=”2_3″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”3.27.4″ global_colors_info=”{}” theme_builder_area=”post_content”]
DEMO: Vertically Aligned Divi Tabs Module
[/et_pb_text][et_pb_code _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]
[/et_pb_code][et_pb_tabs module_id=”fancy-tabs” _builder_version=”4.3.1″ custom_css_main_element=”Display:flex;||border:none;” custom_css_tabs_controls=”min-width:200px;||width:200px;||display:flex;||flex-wrap:wrap;||background-color:rgba(0,0,0,0);” custom_css_tab=”width:100%;||text-align:center;||margin:auto;||height:calc(100% / 4) !important;||border:none;||border-right:2px solid #D6D6D6 !important;;||background-color:#ffffff;” custom_css_active_tab=”border-right:2px solid #0094D9 !important;;” custom_css_tabs_content=”border-left:2px solid #D6D6D6;||margin-left:-2px;” border_radii=”on|10px|10px|10px|10px” box_shadow_style=”preset1″ global_colors_info=”{}” custom_css_main_element_last_edited=”on|desktop” custom_css_main_element_phone=”display:block;” custom_css_main_element_tablet=”Display:flex;||border:none;” custom_css_tab_last_edited=”on|phone” custom_css_tab_tablet=”width:100%;||text-align:center;||min-height:50px;||border:none;||border-right:2px solid #D6D6D6;” custom_css_tabs_controls_last_edited=”on|tablet” custom_css_tabs_controls_tablet=”min-width:150px;||display:block;||flex-wrap:wrap;||background-color:rgba(0,0,0,0);” custom_css_tabs_controls_phone=”min-width:150px;||display:block;||flex-wrap:wrap;||background-color:rgba(0,0,0,0);” custom_css_tab_phone=”border-left:2px solid #D6D6D6;||height:auto !important;” custom_css_active_tab_last_edited=”on|desktop” custom_css_active_tab_phone=”border-left:2px solid #0094D9;” custom_css_tabs_content_last_edited=”on|desktop” custom_css_tabs_content_phone=”border-left:2px solid #D6D6D6;” theme_builder_area=”post_content” custom_css_active_tab_tablet=”border-right:2px solid #0094D9 !important;;” custom_css_tabs_content_tablet=”border-left:2px solid #D6D6D6;||margin-left:-2px;”][et_pb_tab title=”Vertical Tab 1″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
At consectetur lorem donec massa sapien faucibus. Vel turpis nunc eget lorem dolor sed viverra ipsum. Non sodales neque sodales ut etiam. Orci nulla pellentesque dignissim enim sit amet venenatis. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet.
Dolor morbi non arcu risus quis. Libero volutpat sed cras ornare arcu dui vivamus arcu felis.
[/et_pb_tab][et_pb_tab title=”Vertical Tab 2″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/et_pb_tab][et_pb_tab title=”Vertical Tab 3″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
[/et_pb_tab][et_pb_tab title=”Vertical Tab 4″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
At consectetur lorem donec massa sapien faucibus. Vel turpis nunc eget lorem dolor sed viverra ipsum. Non sodales neque sodales ut etiam. Orci nulla pellentesque dignissim enim sit amet venenatis. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet.
Dolor morbi non arcu risus quis. Libero volutpat sed cras ornare arcu dui vivamus arcu felis.
[/et_pb_tab][/et_pb_tabs][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”3.22″ custom_margin=”|||” custom_padding=”38px|30px|38px|30px|false|true” custom_css_main_element=”border-radius:10px;” border_radii=”on|10px|10px|10px|10px” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row module_id=”adding-a-tabs-module” _builder_version=”4.3.1″ custom_padding=”16px|0px|14px|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ header_font=”||||||||” header_4_font=”||||||||” header_4_font_size=”30px” global_colors_info=”{}” theme_builder_area=”post_content”]
#1 Adding a Divi Tabs module
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_3,1_3″ _builder_version=”3.25″ custom_padding=”0|0px|27.2969px|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”2_3″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-091056-1.jpg” alt=”Create new page with divi tabs module” show_in_lightbox=”on” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]1.1 – Either open or create a new page that you would like your Divi Tabs module to be added to – we will transform this into a ‘Fancy Tabs’ module.[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_3,1_3″ _builder_version=”3.25″ custom_padding=”0|0px|27.2969px|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”2_3″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-091149.png” alt=”Divi builder add row” show_in_lightbox=”on” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]1.2 – Insert a Section using the Blue ‘plus’ icon, then add a Row using the Green ‘plus’ icon.[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_3,1_3″ _builder_version=”3.25″ custom_padding=”0|0px|27.2969px|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”2_3″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_gallery gallery_ids=”42077,42078″ fullwidth=”on” _builder_version=”4.3.1″ auto=”on” auto_speed=”3000″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_gallery][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
1.3 – Add a Tabs module by clicking the Grey ‘plus’ icon and search for ‘Tabs’
** For this tutorial, the tabs have been prefilled with lorem ipsum (dummy text) – we recommend you do this too so you can see what your tabs will look like when you add content to them.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row module_id=”styling-the-tabs-module” _builder_version=”4.3.1″ custom_padding=”53px|0px|27.2969px|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” header_4_line_height=”1.4em” global_colors_info=”{}” theme_builder_area=”post_content”]
#2 Styling the Divi Tabs module
For the rest of this Divi tutorial, all the CSS module styling will be taking place in ‘Tab Settings > Advanced > Custom CSS‘ section. To find this section, hover over your Tabs module, click the settings icon, click on “Advanced” at the top of the settings and finally click on ‘Custom CSS’ section dropdown.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_3,1_3″ _builder_version=”3.25″ custom_padding=”0|0px|38.3px|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”2_3″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-102400.jpg” alt=”Divi tabs main element section” show_in_lightbox=”on” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
2.1 – We want to change the ‘Display’ property of the Main Element to ‘Flex’. This can be done using the following CSS:
display:flex
2.2 – We also don’t want our module to have a border. To remove the border we can simply write:
border:none;
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.25″ custom_padding=”0|0px|27.2969px|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
2.3 – Now our Tab Controls should be displayed to the left of our Tabs Content. However, we don’t want this to be the case on Mobile View. To change this, we need to apply one set of styles to the Main Element on Desktop, and a different set of styles to the Main Element on Mobile.
This can be done by hovering over the Main Element Custom CSS box title (where it says ‘Main Element’). This will cause some new icons to appear. We want to click the Phone icon. This will give us the option to set Custom CSS styles based on screen size. Our ‘Desktop’ & ‘Tablet’ styles should already be filled in, so click on the ‘Phone’ tab and add the following CSS:
display:block;
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.3.1″ custom_padding=”9px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_2″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-102353.jpg” alt=”Divi tabs Phone main element settings” show_in_lightbox=”on” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
2.4 – Our Main Element CSS should be as follows:
[/et_pb_text][et_pb_tabs _builder_version=”4.3.1″ body_font=”|600|||||||” body_font_size=”18px” background_color=”#d1d1d1″ custom_margin=”|||” custom_css_tab=”width:33.33%;” global_colors_info=”{}” body_text_color__hover_enabled=”off|desktop” theme_builder_area=”post_content”][et_pb_tab title=”Desktop” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]display:flex;
border:none;[/et_pb_tab][et_pb_tab title=”Tablet” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]
display:flex;
border:none;
[/et_pb_tab][et_pb_tab title=”Mobile” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]display:block;[/et_pb_tab][/et_pb_tabs][/et_pb_column][/et_pb_row][et_pb_row module_id=”styling-tabs-control” _builder_version=”4.3.1″ custom_padding=”54px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” header_4_line_height=”1.4em” global_colors_info=”{}” theme_builder_area=”post_content”]
#3 Styling the Tabs Controls
Now we are going to change the appearance of the Tabs Controls.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ module_id=”styling-the-tabs-module” _builder_version=”4.3.1″ custom_padding=”2px||3px|||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_2″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-102350.jpg” alt=”Divi Tabs Controls Desktop CSS” show_in_lightbox=”on” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-102347.jpg” alt=”Divi Tabs Controls Tablet CSS” show_in_lightbox=”on” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.3.1″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” header_4_line_height=”1.4em” custom_margin=”||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”]
3.1 – First off, we need to set a width for our Tabs Controls. For this demo, a ‘min-width’ of 150px was enough. However, depending on how long your Tabs Title is you may wish to adjust this number accordingly.
min-width:150px;
3.2 – We’re also going to change the ‘Display’ property of the Tabs Controls to ‘Flex’ and the ‘Flex-Wrap’ property to ‘Wrap’ using the following CSS code:
display:flex;
flex-wrap:wrap;
This will force the Tab Controls to sit on top of each other.
3.3 – Finally, we are going to remove the default background colour of the Tabs Controls by using:
background-color:rgba(0,0,0,0);
This sets the colour of the background to black with an opacity of 0.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.3.1″ custom_padding=”26px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_2″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
Don’t forget to also set the ‘Display’ property back to ‘Block’ on Tablet & Mobile. To do this, just copy the styles we have in the ‘Tabs Controls’ box so far, hover over the title of the box, click the phone icon, click the ‘Tablet’ tab and paste the CSS code into this box.
Finally, just change ‘display:flex;’ to ‘display:block;’. Don’t worry about the ‘Phone’ tab. It should adopt the styles of the ‘Tablet’ tab by default.
[/et_pb_text][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
3.4 – Our Tabs Controls CSS should be as follows:
[/et_pb_text][et_pb_tabs _builder_version=”4.3.1″ body_font=”|600|||||||” body_font_size=”18px” background_color=”#d1d1d1″ custom_css_tab=”width:33.33%;” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_tab title=”Desktop” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]min-width:150px;
display:flex;
flex-wrap:wrap;
background-color:rgba(0,0,0,0);[/et_pb_tab][et_pb_tab title=”Tablet” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]min-width:150px;
display:block;
flex-wrap:wrap;
background-color:rgba(0,0,0,0);[/et_pb_tab][et_pb_tab title=”Mobile” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]min-width:150px;
display:block;
flex-wrap:wrap;
background-color:rgba(0,0,0,0);
margin-left:-2px;[/et_pb_tab][/et_pb_tabs][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.3.1″ background_color=”#00f2b9″ custom_margin=”37px|auto|24px|auto||” custom_padding=”25px|25px|25px|25px|false|false” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
FREE LAYOUT DOWNLOAD
Vertical Divi Tabs module layout.
[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_button button_url=”#download-layout” button_text=”Download Layout” button_alignment=”left” _builder_version=”4.9.3″ button_text_color=”#ffffff” button_bg_color=”#13BF04″ button_border_radius=”0px” button_font=”|700||on|||||” custom_css_main_element=”width:100%;||max-width:250px;||border-radius:10px !important;” box_shadow_style=”preset1″ button_border_radius_hover=”5px” global_colors_info=”{}” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”on” button_border_radius__hover=”5px” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”off” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off” theme_builder_area=”post_content”][/et_pb_button][/et_pb_column][/et_pb_row][et_pb_row module_id=”styling-individual-tabs-module” _builder_version=”4.3.1″ custom_margin=”|||” custom_padding=”53px||19px|||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” global_colors_info=”{}” theme_builder_area=”post_content”]
#4 Styling the Individual Tabs
Now we are going to style the individual tabs within the module.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.3.1″ custom_padding=”4px||1px|||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-102342.jpg” alt=”Divi Tab Desktop design CSS” show_in_lightbox=”on” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
4.1 – First of all, we need to set the width to 100% and align the text to the centre. We’re also going to change the margin to auto.
width:100%;
text-align:center;margin:auto;
[/et_pb_text][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
4.2 – If you want the Tabs to all to be the same size, use the following code: (this step is optional)
height:calc(100% / 4) !important;
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.3.1″ custom_padding=”2px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” custom_padding=”25px||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”]
NOTE: You will need to change the ‘4’ to match the number of tabs you have in your Tabs module. You could always set the height using a percentage… say 25%, but doing it this way could make it slightly easier to change in the future if you add or remove any tabs.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.3.1″ custom_padding=”4px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-102338.jpg” alt=”Divi Tab Tablet design CSS” show_in_lightbox=”on” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
4.3 – We also want to style the border of the Tabs. First off add the following CSS code:
border:none;
4.4 – Then underneath this, add this CSS:
border-right:2px solid #d6d6d6;
This will first remove all borders, then add a border just to the right of the Tabs.
NOTE: You can set the width of the border to whatever you like. This example uses 2px but you can go more or less. Just remember the size that you use for later in this guide.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.3.1″ custom_padding=”12px||4px|||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-102334.jpg” alt=”Divi Tab Phone design CSS” show_in_lightbox=”on” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
4.5 – Now, we’re going to change the styles for ‘Tablet’ and ‘Mobile’. Copy the Desktop styles into the ‘Tablet’ tab as we have before. Then. remove the line for margin and the line for height. Instead of using ‘Height’, we are going to use ‘Min-Height’.min-height:50px
NOTE: The reason we are changing ‘Height’ for ‘Min-Height’ is to stop the tabs from spacing out too much when the ‘Tabs Content’ becomes longer.[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ make_equal=”on” _builder_version=”4.3.1″ custom_css_main_element=”margin:auto auto 0 auto;” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_2″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” global_colors_info=”{}” theme_builder_area=”post_content”]
4.6 – We also want to set the height back to auto and change the border to a left border on Mobile. So, just click the ‘Phone’ tab and write:
border-left:2px solid #D6D6D6;
height:auto !important;
[/et_pb_text][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”3.25″ custom_padding=”|||” custom_css_main_element=”margin: auto auto 0 auto;” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
4.7 – Our Tab CSS should be as follows:
[/et_pb_text][et_pb_tabs _builder_version=”4.3.1″ body_font=”|600|||||||” body_font_size=”18px” background_color=”#d1d1d1″ custom_css_tab=”width:33.33%;” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_tab title=”Desktop” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]width:100%;
text-align:center;
margin:auto;
height:calc(100% / 4);
border:none;
border-right:2px solid #D6D6D6;[/et_pb_tab][et_pb_tab title=”Tablet” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]width:100%;
text-align:center;
min-height:50px;
border:none;
border-right:2px solid #D6D6D6;[/et_pb_tab][et_pb_tab title=”Mobile” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]border-left:2px solid #D6D6D6;
height:auto !important;[/et_pb_tab][/et_pb_tabs][/et_pb_column][/et_pb_row][et_pb_row module_id=”styling-active-tabs-module” _builder_version=”4.3.1″ custom_margin=”|||” custom_padding=”53px||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” global_colors_info=”{}” theme_builder_area=”post_content”]
#5 Styling the Active Tab
Next, we are going to style the Active Tab.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_3,1_3″ _builder_version=”4.3.1″ custom_padding=”0px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”2_3″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-102329.jpg” alt=”Divi Active Tab CSS” show_in_lightbox=”on” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” global_colors_info=”{}” theme_builder_area=”post_content”]
5.1 – This is pretty simple, just add a right border on Desktop & Tablet, and add a left border on Mobile. You can use any colour you like for the border but be sure to set the size to the same size used earlier (2px in this demo).
Desktop & Tablet:
border-right:2px solid #0094D9;
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_3,1_3″ _builder_version=”4.3.1″ custom_padding=”0px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”2_3″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-102325.jpg” alt=”Divi Active Tab CSS on Phone” show_in_lightbox=”on” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” global_colors_info=”{}” theme_builder_area=”post_content”]
5.2 – Add a left border on Mobile.
Mobile:
border-right:none;
border-left:2px solid #0094D9;
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
5.3 – Our Active Tab CSS should be as follows:
[/et_pb_text][et_pb_tabs _builder_version=”4.3.1″ body_font=”|600|||||||” body_font_size=”18px” background_color=”#d1d1d1″ custom_css_tab=”width:33.33%;” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_tab title=”Desktop” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]border-right:2px solid #0094D9;[/et_pb_tab][et_pb_tab title=”Tablet” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]border-right:2px solid #0094D9;[/et_pb_tab][et_pb_tab title=”Mobile” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]border-right:none;
border-left:2px solid #0094D9;[/et_pb_tab][/et_pb_tabs][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.3.1″ background_color=”#00f2b9″ custom_margin=”37px|auto|24px|auto||” custom_padding=”25px|25px|25px|25px|false|false” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
FREE LAYOUT DOWNLOAD
Vertical Divi Tabs module layout.
[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_button button_url=”#download-layout” button_text=”Download Layout” button_alignment=”left” _builder_version=”4.3.1″ button_text_color=”#ffffff” button_bg_color=”#13BF04″ button_border_radius=”0px” button_font=”|700||on|||||” custom_css_main_element=”width:100%;||max-width:250px;||border-radius:10px !important;” box_shadow_style=”preset1″ button_border_radius_hover=”5px” global_colors_info=”{}” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”on” button_border_radius__hover=”5px” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”off” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off” theme_builder_area=”post_content”][/et_pb_button][/et_pb_column][/et_pb_row][et_pb_row module_id=”styling-the-tabs-content” _builder_version=”4.3.1″ custom_margin=”|||” custom_padding=”53px||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” global_colors_info=”{}” theme_builder_area=”post_content”]
#6 Styling the Tabs Content
Next, we are going to style the Tabs Content.[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_3,1_3″ _builder_version=”4.3.1″ custom_padding=”0px||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”2_3″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-102321.jpg” alt=”Divi Tabs Content Desktop CSS” show_in_lightbox=”on” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
6.1 – We’re going to add a left border using the same size & colour as all the inactive tabs:
border-left:2px solid #D6D6D6;
6.2 – And finally, line both the borders up using:
margin-left:-2px;
NOTE: If you are using a different width for your border, you will need to change this value to match the width you are using.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_3,1_3″ _builder_version=”4.3.1″ custom_padding=”0px||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”2_3″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-102316.jpg” alt=”Divi Tabs Content Phone CSS” show_in_lightbox=”on” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
6.3 – We don’t need to change the margin on Mobile, but we do need to add a border. So, hover over the box title, click the phone icon, Click the ‘Phone’ tab and add:
border-left:2px solid #D6D6D6;
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
6.4 – Our Tabs Content CSS should be as follows:
[/et_pb_text][et_pb_tabs _builder_version=”4.3.1″ body_font=”|600|||||||” body_font_size=”18px” background_color=”#d1d1d1″ custom_css_tab=”width:33.33%;” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_tab title=”Desktop” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]border-left:2px solid #D6D6D6;
margin-left:-2px;[/et_pb_tab][et_pb_tab title=”Tablet” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]border-left:2px solid #D6D6D6;
margin-left:-2px;[/et_pb_tab][et_pb_tab title=”Mobile” _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]border-left:2px solid #D6D6D6;[/et_pb_tab][/et_pb_tabs][/et_pb_column][/et_pb_row][et_pb_row module_id=”remove-tabs-control-border-tablet” _builder_version=”4.3.1″ custom_margin=”|||” custom_padding=”53px||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” global_colors_info=”{}” theme_builder_area=”post_content”]
Removing the Tabs Controls bottom border on Tablet:
The keen-eyed amongst you may have noticed there is a bottom border on the bottom of the last tab on Tablet view. The only way to remove this is to add some ‘On-Page CSS’ within the advanced page settings.[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.3.1″ custom_padding=”0px||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-102313.jpg” alt=”Divi Tab settings CSS ID section” show_in_lightbox=”on” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” global_colors_info=”{}” theme_builder_area=”post_content”]
7.1 – First, we need to add an ‘CSS ID’ to our Tabs Module. To do this, scroll to the top of the Advanced Tab in the module settings and click on ‘CSS ID & Classes’.
- Add a Unique ID to ‘CSS ID’ – for this demo we’ve used “fancy-tabs”.
- Next, click the Green Tick at the bottom of the Tabs Module Settings Menu to save our changes and close the dialogue box.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.3.1″ custom_padding=”0px||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” global_colors_info=”{}” theme_builder_area=”post_content”]
7.2 – Then, click the three dots in the purple circle at the bottom of the page and click the settings cog icon. This is the Settings for the entire page. We want to add some custom CSS to the page that is only going to affect our ‘fancy-tabs’ module.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_3,1_3″ _builder_version=”4.3.1″ custom_padding=”0px||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”2_3″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/01/Annotation-2020-01-30-102258.jpg” alt=”Divi page settings Custom CSS section” show_in_lightbox=”on” _builder_version=”4.3.1″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
- Go to ‘Advanced > Custom CSS‘ and add the following code:
#fancy-tabs ul.et_pb_tabs_controls:after{ border:none;}
-
NOTE: If you used a different CSS ID in step 7.1, make sure you swap “fancy-tabs” for “your-id”.
- Once you have added your code, click the green tick at the bottom of the popup to save and return to your page design.
This tutorial is now complete![/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_3,2_3″ make_equal=”on” _builder_version=”4.3.1″ custom_padding=”53px||||false|false” custom_css_main_element=”margin:auto auto 0 auto;” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_3″ _builder_version=”3.25″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ header_4_font_size=”30px” global_colors_info=”{}” theme_builder_area=”post_content”]
Tutorial Summary
[/et_pb_text][et_pb_text _builder_version=”4.3.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
Congratulations! Hopefully, you should have created a vertically aligned Divi Tabs module and learnt some new CSS along the way.
Don’t forget, you can download our ‘Fancy Tabs Divi module’ below to use on your own site for FREE.
NOTE: We use a CODE module within the layout download that includes the ‘On-Page CSS’ – so you don’t need to follow item 7.2 in our guide.
[/et_pb_text][/et_pb_column][et_pb_column type=”2_3″ _builder_version=”3.25″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]
Layout Demo: Vertical Divi Tabs
[/et_pb_text][et_pb_tabs module_id=”fancy-tabs” _builder_version=”4.3.1″ custom_css_main_element=”Display:flex;||border:none;” custom_css_tabs_controls=”min-width:200px;||width:200px;||display:flex;||flex-wrap:wrap;||background-color:rgba(0,0,0,0);” custom_css_tab=”width:100%;||text-align:center;||margin:auto;||height:calc(100% / 4) !important;||border:none;||border-right:2px solid #D6D6D6 !important;;||background-color:#ffffff;” custom_css_active_tab=”border-right:2px solid #0094D9 !important;;” custom_css_tabs_content=”border-left:2px solid #D6D6D6;||margin-left:-2px;” border_radii=”on|10px|10px|10px|10px” box_shadow_style=”preset1″ global_colors_info=”{}” custom_css_main_element_last_edited=”on|desktop” custom_css_main_element_phone=”display:block;” custom_css_main_element_tablet=”Display:flex;||border:none;” custom_css_tab_last_edited=”on|phone” custom_css_tab_tablet=”width:100%;||text-align:center;||min-height:50px;||border:none;||border-right:2px solid #D6D6D6;” custom_css_tabs_controls_last_edited=”on|tablet” custom_css_tabs_controls_tablet=”min-width:150px;||display:block;||flex-wrap:wrap;||background-color:rgba(0,0,0,0);” custom_css_tabs_controls_phone=”min-width:150px;||display:block;||flex-wrap:wrap;||background-color:rgba(0,0,0,0);” custom_css_tab_phone=”border-left:2px solid #D6D6D6;||height:auto !important;” custom_css_active_tab_last_edited=”on|desktop” custom_css_active_tab_phone=”border-left:2px solid #0094D9;” custom_css_tabs_content_last_edited=”on|desktop” custom_css_tabs_content_phone=”border-left:2px solid #D6D6D6;” theme_builder_area=”post_content” custom_css_active_tab_tablet=”border-right:2px solid #0094D9 !important;;” custom_css_tabs_content_tablet=”border-left:2px solid #D6D6D6;||margin-left:-2px;”][et_pb_tab title=”Vertical Tab 1″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
At consectetur lorem donec massa sapien faucibus. Vel turpis nunc eget lorem dolor sed viverra ipsum. Non sodales neque sodales ut etiam. Orci nulla pellentesque dignissim enim sit amet venenatis. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet.
Dolor morbi non arcu risus quis. Libero volutpat sed cras ornare arcu dui vivamus arcu felis.
[/et_pb_tab][et_pb_tab title=”Vertical Tab 2″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/et_pb_tab][et_pb_tab title=”Vertical Tab 3″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
[/et_pb_tab][et_pb_tab title=”Vertical Tab 4″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
At consectetur lorem donec massa sapien faucibus. Vel turpis nunc eget lorem dolor sed viverra ipsum. Non sodales neque sodales ut etiam. Orci nulla pellentesque dignissim enim sit amet venenatis. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet.
Dolor morbi non arcu risus quis. Libero volutpat sed cras ornare arcu dui vivamus arcu felis.
[/et_pb_tab][/et_pb_tabs][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.3.1″ background_color=”#a5a5a5″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row _builder_version=”4.9.3″ _module_preset=”default” max_width=”720px” custom_padding=”0px||0px||true|false” locked=”off” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.9.3″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text module_id=”download-layout” _builder_version=”4.14.7″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” theme_builder_area=”post_content” text_orientation=”center” sticky_enabled=”0″]
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
