Blog post

How to create vertical / side Divi tabs module layout with CSS

Date of post

30 January 2020

Post author

Categories

Read time

10 mins

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.

Step by Step Menu

FREE LAYOUT DOWNLOAD
Skip the tutorial and download the vertical Divi Tabs module layout for FREE.

DEMO: Vertically Aligned Divi Tabs Module

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.

How to create vertical / side Divi tabs module layout with CSS,

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

How to create vertical / side Divi tabs module layout with CSS, phones diagonal 1 1

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.

#1 Adding a Divi Tabs module

Create new page with divi tabs module
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.
Divi builder add row
1.2 – Insert a Section using the Blue ‘plus’ icon, then add a Row using the Green ‘plus’ icon.

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.

#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.

Divi tabs main element section

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;

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;

Divi tabs Phone main element settings

2.4 – Our Main Element CSS should be as follows:

display:flex;
border:none;

display:flex;
border:none;

display:block;

#3 Styling the Tabs Controls

Now we are going to change the appearance of the Tabs Controls.

Divi Tabs Controls Desktop CSS
Divi Tabs Controls Tablet CSS

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.

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.

3.4 – Our Tabs Controls CSS should be as follows:

min-width:150px;
display:flex;
flex-wrap:wrap;
background-color:rgba(0,0,0,0);
min-width:150px;
display:block;
flex-wrap:wrap;
background-color:rgba(0,0,0,0);
min-width:150px;
display:block;
flex-wrap:wrap;
background-color:rgba(0,0,0,0);
margin-left:-2px;

FREE LAYOUT DOWNLOAD

Vertical Divi Tabs module layout.

#4 Styling the Individual Tabs

Now we are going to style the individual tabs within the module.

Divi Tab Desktop design CSS

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;

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;

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.

Divi Tab Tablet design CSS

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.

Divi Tab Phone design CSS

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.

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;

4.7 – Our Tab CSS should be as follows:

width:100%;
text-align:center;
margin:auto;
height:calc(100% / 4);
border:none;
border-right:2px solid #D6D6D6;
width:100%;
text-align:center;
min-height:50px;
border:none;
border-right:2px solid #D6D6D6;
border-left:2px solid #D6D6D6;
height:auto !important;

#5 Styling the Active Tab

Next, we are going to style the Active Tab.

Divi Active Tab CSS

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;

Divi Active Tab CSS on Phone

5.2 – Add a left border on Mobile.

Mobile:
border-right:none;

border-left:2px solid #0094D9;

5.3 – Our Active Tab CSS should be as follows:

border-right:2px solid #0094D9;
border-right:2px solid #0094D9;
border-right:none;
border-left:2px solid #0094D9;

FREE LAYOUT DOWNLOAD

Vertical Divi Tabs module layout.

#6 Styling the Tabs Content

Next, we are going to style the Tabs Content.

Divi Tabs Content Desktop CSS

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.

Divi Tabs Content Phone CSS

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;

6.4 – Our Tabs Content CSS should be as follows:

border-left:2px solid #D6D6D6;
margin-left:-2px;
border-left:2px solid #D6D6D6;
margin-left:-2px;
border-left:2px solid #D6D6D6;

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.

Divi Tab settings CSS ID section

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.

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.

Divi page settings Custom CSS section
  • 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!

Tutorial Summary

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. 

Layout Demo: Vertical Divi Tabs 

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.

How to create vertical / side Divi tabs module layout with CSS,

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

How to create vertical / side Divi tabs module layout with CSS, phones diagonal 1 1

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.

Pssst! Did you know we have our very own podcast?

If you’re a business owner or a like-minded marketing professional then this podcast is for you. It’s full of insights, industry news, tips and advice. You’ll learn about search engine optimisation (SEO), pay-per-click (PPC), content marketing, branding and website design.