We are always looking for ways to make our sites “less Divi” and more customized.  Sometimes the client pushes for something interesting, and more often than not, as designers, we  want to keep ourselves at the top of our game. One feature I don’t often use is Tabs.  I am always afraid that site visitors will have to hunt for content, which can be an argument for not using tabs, but on the other hand, the endless scroll can become tiresome and presenting content that is horizontal in orientation rather than vertical is a nice touch. As always, you make the decision that is right for you and your client. As an FYI, before we get into the post you can buy a plugin that will deliver this same look, it is $6.99 in the shop. BUT if you are looking to spice up the tabs a bit and are a DIYer, I’ve got your back.  In this example, we are using icons to trigger the display of text.  Your icons can be images, found over on iconfinder.com, Font Awesome or Creative Marketplace (that is where I bought the icons for this demo). First, you need to organize your content and figure out which icons or images you are going to use.  In my example, my pretend client is a gym.  I popped into Canva (yes, I know you uber talented PhotoShop people laugh at Canva, but it serves a purpose).  I made sure all of my icons and larger images were the exact same size.  Took me two minutes. Then copy all of the CSS below and navigate to your WordPress Dashboard:

  • under Divi click on Theme Options
  • scroll down the page and paste the Code into the Custom CSS box.  (YES, of course you may post the code in your child theme CSS Files, that is fine, but don’t post it into the regular core Divi Theme CSS files or next time you update this groovy little display is going to get cleared out and you will be annoyed, read What Happens If I Don’t Use a Child Theme).

Here is all of the CSS you need, but before you go – NOTE – you are going to need to change the url to the images you are using.  I highlighted it on this image. toggle example for elegant marketplace

* === Tab Icons Starts Here ===
*/
.et_pb_tabs.icon-tabs {
 border: none;
}
.icon-tabs ul {
 margin-bottom: 30px;
}

.icon-tabs .et_pb_tabs_controls li {
 border-right: none;
}

.icon-tabs ul.et_pb_tabs_controls {
 background-color: transparent;
}
.icon-tabs img.alignleft {
 margin-right: 70px;
}
.icon-tabs .et_pb_all_tabs {
 border-top: none;
}

.icon-tabs .et_pb_tabs_controls {
 padding: 0 20% !important;
}
.icon-tabs .et_pb_tabs_controls li {
 width: 33.333% !important;
}
.icon-tabs .et_pb_tabs_controls li a {
 width: 100% !important;
 text-align:center;
 color: #a3a3a3;
 text-transform: uppercase;
 letter-spacing:2px;
 font-weight: 300 !important;
}
.icon-tabs .et_pb_tab_active a {
 color: #0b83a1 !important;
}
.icon-tabs .et_pb_tab h2 {
 line-height: 1.5em;
 color: #0b83a1;
 font-weight: 300 !important;
font-size: 24px;
}
.icon-tabs .et_pb_tab p {
 font-weight: 300 !important;
}
.icon-tabs .et_pb_tabs_controls li a:before {
 font-family: 'FontAwesome';
 display:block;
 font-size:40px;
 color: #a3a3a3;
 margin-bottom: 15px;
 font-weight: 300 !important;
}

.icon-tabs .et_pb_tabs_controls li.et_pb_tab_active a:before {
 color: #0b83a1;
}

ul.et_pb_tabs_controls::after { 
border-top: none !important;
} 

.et_pb_tabs .et_pb_all_tabs .et_pb_tab {
padding-top: 1em; 
}


/*
* === Change Icons Here ===
*/

.icon-tabs .et_pb_tab_0 a:before {
 content: url(http://www.eileenlonergan.com/test/wp-content/uploads/2017/03/small-scale.png);
}
.icon-tabs .et_pb_tab_1 a:before {
 content: url(http://www.eileenlonergan.com/test/wp-content/uploads/2017/03/small-weights.png);
}
.icon-tabs .et_pb_tab_2 a:before {
 content: url(http://www.eileenlonergan.com/test/wp-content/uploads/2017/03/small-yoga-mat.png);
}

/*
* === Mobile Styles ===
*/
@media (max-width: 768px) {

.icon-tabs .et_pb_tabs_controls li {
 width: 100% !important;
}

.icon-tabs .et_pb_tabs_controls {
 padding: 0 !important;
}

.icon-tabs .et_pb_tabs_controls li {
 margin-bottom: 35px;
}
}
/*
* === Tab Icons Ends Here ===
*/

Now that you have pasted the CSS, add the icons (or images) to your media files, and then copy and replace my urls with yours. Then navigate to the page where you are adding this section. You will need a Divider module.  I am not showing the divider and the height is 50px.  You need to allow some space for the icons.  (Note, I am hiding this module on mobile). Next add the tabs module.  Navigate to Custom CSS and put icon-tabs in the CSS CLASS box. css class Navigate back to General Settings in your Tabs Module and add your tabs, give each tab a title and add content with an image (if you want an image of course, but I like that look). tabs module settings And Voila! Tabs Module in Divi PS In case you are wondering, here is how your Tabs Module would look before the styling. tabs module BEFORE styling I think you will agree this functions beautifully and is a really nice way to present your content.  Some of the steps may seem super simple, but I am a super simple girl and like things broken down for me, so I am assuming you will also.

Blog Admin
EMP Author is our generic name for contributors on this blog that are no longer associated with the company but have added content in the past and the content is seen as valuable.

Get the latest news!

Join our mailing list to receive the latest news and updates from our team and a 15% discount code on all products you can add to your cart as a thankyou gift. 

Thanks, we appreciate your support

Pin It on Pinterest

Share This