Last Updated on September 8, 2019
Custom Side / Vertical Tabs Section Layout for Divi
I had this side/vertical tabs section I made for a Divi project and thought it might be useful for others. Would be great to feature different services or small chunks of info, I’ve used wedding photography session types as an example.
Some basic CSS knowledge is required, like colors and font-size. I’ve added comments in the code to help.
If you plan to use the gallery
- Enable the Divi gallery in Divi theme options if you want the default WP gallery to behave like Divi’s (like in the demo).

Import the layout into your Divi library
- Download the zip file using the Download button above.
- Unzip the file you downloaded and import the included .json file into your Divi library. After that it will be available for you to add as a section to any page/post using the Divi builder.
- If you’re new to Divi here are instructions on how to import a layout into your library.
You might not need to import the layout…
- I’m not using any module settings in this layout, it’s just CSS changing the look, so if you’re comfortable with basic HTML and are familiar with the text editor you can just add a tabs module, your own WP gallery (if you want one), and your own button (if you want one):
- The gallery is the standard WP gallery you insert through the text editor.
- I’m using ET’s button class et_pb_button to create the button.


css code
The CSS can go in your child stylesheet OR appearance > customize > additional CSS OR Divi theme options > custom CSS box.
/****************************/ /***** CUSTOM SIDE TABS *****/ /****************************/ /*** MAIN CONTENT BOX ***/ .et_pb_tab { background: #D6DAD7; /* main background color */ padding: 50px; border-top-right-radius: 12px; /* these three make the rounded edges */ border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; min-height: 560px; /* adjust if necessary */ } /*** TABS ON LEFT ***/ .et_pb_tabs { border: 0; } /*** ACTIVE TAB ***/ .et_pb_tabs_controls li.et_pb_tab_active, .et_pb_tabs_controls li.et_pb_tab_active:hover { background: #D6DAD7 !important; /* background color of active tab on left */ } .et_pb_tabs_controls li a { /* most of these can be set in the module instead if you prefer */ width: 100%; font-family: Georgia, "Times New Roman", serif; /* I changed this to match my header font, you can edit or delete */ font-size: 28px !important; font-weight: normal; line-height: 1.3em !important; padding: 15px 25px; } /*** NON ACTIVE TABS ***/ .et_pb_all_tabs, ul.et_pb_tabs_controls { background: transparent; } ul.et_pb_tabs_controls:after { display: none; /* removes a weird line */ } .et_pb_tabs_controls li { background: #C7C8C7 !important; /* background color of non-active tabs */ margin-bottom: 10px; border-top-left-radius: 8px; /* rounded edges */ border-bottom-left-radius: 8px; /* rounded edges */ } .et_pb_tabs_controls li:hover { background: #D6DAD7 !important; /* background color of tab on hover */ } /*** REMOVE GALLERY IMAGE TITLE ***/ .mfp-title { display: none; /* please know this will remove the title from all your Divi galleries, not just these */ } /*** MEDIA QUERIES FOR MOBILE / TABLET ***/ @media only screen and (max-width: 480px) { .et_overlay:before { font-size: 20px; /* makes hover icon smaller */ margin: -10px 0 0 -10px; } } @media only screen and (max-width: 980px) { ul.et_pb_tabs_controls { display: flex; flex-direction: column; } .et_pb_tabs_controls li { display: flex; width: 100%; border-radius: 8px; } .et_pb_tab { border-radius: 8px; padding: 40px 25px; } } @media only screen and (min-width: 981px) { ul.et_pb_tabs_controls { border: none; float: left; width: 30%; background: transparent; } ul.et_pb_tabs_controls li { border: none; bottom: 0 !important; padding-bottom: 10px; padding-top: 10px; width: 100%; } .et_pb_tabs_controls li.et_pb_tab_active { padding-bottom: 10px; padding-top: 10px; } .et_pb_all_tabs { border: none; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; float: left; padding: 0; width: 70%; background: #D6DAD7; /* this should match the main background color */ margin-left: -1px; z-index: 99; position: relative; } }
Notes:
- If you use the WP gallery the icon color will be your theme color from customizer settings.
- I’m using ET’s button class so your customizer button settings will be used for button styling.
- Images are from Pexels and Unsplash, it’s up to you to check their terms for usage. When I tested this sometimes the images would be imported and sometimes they wouldn’t, I don’t really know why. The gallery function itself IS always imported.
Hello, I love this side tab you created and I thank you for sharing it. I have a question because I am new to all of this. I noticed that by putting it in the Divi Theme Options/ Custom CSS it only controls all of the tab sections you create. So my question is if I wanted to put say one tab section with the tabs on the left, and then maybe another tab section that the tabs would be on the right. How would I do this? Also, what if I want to put another couple of tab sections on a different page. I guess how can I control what each tab section will do by itself for each section and or page. I figure you are more advanced than me so I figure I would ask you. Thank you again.
Hi Tony! You can definitely control how each tab section looks on its own, you would need to apply a class (or ID) to the entire section and then target each different section with your CSS. It’s a bit in depth to explain here, but if you google “target section using class” articles should come up. This may help also https://divi.space/divi-tutorials/5-ways-to-add-css-to-divi/
Hello! So glad I found this, you’re a lifesaver, I’ve been racking my brain behind this. So I have everything running pretty smoothly. However, I have an instance where when I click on a tab, it changes color, and then a dotted rectangle hangs around the outer edges of the text but still inside the tab. When I click on anything else on my webpage but keeping the tab still active, the dotted lines disappear. How can I figure out how to make sure those dotted lines do not appear?
Hi Reggie! Is this happening on your entire site or just on the layout? If I’m understanding correctly this is the outline of the element, which is a browser behavior that helps with accessibility (so you might want to research whether removing it is the best option for you).
You can try this wherever you add your custom CSS
:focus {
outline: 0;
}
Let me know if that works or if I’m misunderstanding 🙂
Awesome! I’m migrating a custom themed WP site into Divi and they are using a side tab navigation and I couldn’t figure it out! The code works great, thanks.
Thanks Logan!
Thanks for your kindness is sharing this code – lifesaver for me 🙂
thanks
Tracey
Glad it helped, thanks Tracey!
Thank You!
Hi
I love this and your site.Thanks so much for sharing.
I am new to Divi so this is probably a very basic question, but how do you get the photos to appear?
Thanks so much
Hi Stacey! Sorry for the delayed response, a lot of comments seem to be going to my spam folder. If you mean the images inside the tabs I’m just using a standard WordPress gallery. If you’re inside a tab and click “add media” you’ll have the option to create a gallery, and I’ve just added 6 images. Hope that helps 🙂