#1 Adding a Divi Tabs module

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.

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;

2.4 – Our Main Element CSS should be as follows:

#3 Styling the Tabs Controls

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

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.

3.4 – Our Tabs Controls CSS should be as follows:

#4 Styling the Individual Tabs

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

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.

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.

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.

#5 Styling the Active Tab

Next, we are going to style the Active Tab.

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;

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:

#6 Styling the Tabs Content

Next, we are going to style the Tabs 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.

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:

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.

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.

• 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!