Source: https://divicake.com/blog/divi-vertical-tabs-tutorial/ [Blog](https://divicake.com/blog/)/[Blogging](https://divicake.com/category/blogging/) # How to Create Stunning Divi Vertical Tabs for Your Website By Divi Cake·19 May 2025·Updated 19 August 2026·8 min read How to Create Stunning Divi Vertical Tabs for Your Website We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Step 1: How to Add a Vertical Tab Module in Divi Theme](https://divicake.com#step-1-how-to-add-a-vertical-tab-module-in-divi-theme) - [Step 2: Customize Content of the Divi Vertical Tab Module](https://divicake.com#step-2-customize-content-of-the-divi-vertical-tab-module) - [Step 3: Update Tab Content Body in Divi Tabs Module](https://divicake.com#step-3-update-tab-content-body-in-divi-tabs-module) - [Step 4: Customize Body Text](https://divicake.com#step-4-customize-body-text) - [Step 5: Customize Tab Text in the Divi Vertical Tabs](https://divicake.com#step-5-customize-tab-text-in-the-divi-vertical-tabs) - [Complete Tab Text Styling for Divi Vertical Tabs](https://divicake.com#complete-tab-text-styling-for-divi-vertical-tabs) - [Step 6: How to Turn Horizontal Tabs into Vertical Tabs in Divi Using CSS](https://divicake.com#step-6-how-to-turn-horizontal-tabs-into-vertical-tabs-in-divi-using-css) - [Step 7: Adding More Custom CSS to Perfect Your Vertical Tab](https://divicake.com#step-7-adding-more-custom-css-to-perfect-your-vertical-tab) - [Final Result](https://divicake.com#final-result) - [Conclusion](https://divicake.com#conclusion) Want to add sleek and professional vertical tabs in [Divi](https://divicake.com/go/divi/)? You’re in the right place! Divi vertical tabs are a great way to organize content, enhance navigation, and give your website a clean, modern design. Whether you’re just starting with [Divi theme](https://divicake.com/blog/what-is-divi-wordpress/) or you’re an experienced user, this guide will walk you through the process step by step. You’ll learn how to use Divi’s built-in Tabs Module to create vertical tabs, no third-party plugins required. We’ll begin by inserting the default [Divi Tabs Module](https://divicake.com/go/divi-tabs-module-by-elegant-themes/) and designing it to suit your needs. Then, using a simple [custom CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/) snippet, we’ll convert the standard horizontal tabs into fully functional vertical tabs. You’ll also discover how to customize colors, fonts, and layouts to ensure your vertical tabs blend perfectly with your site’s style. Let’s dive in and create beautiful, responsive Divi vertical tabs that work flawlessly! ## Step 1: How to Add a Vertical Tab Module in Divi Theme If you want to add vertical tabs in your [Divi website](https://divicake.com/blog/how-to-determine-if-a-website-is-built-with-divi/), the first step is to pick the right spot for your Divi vertical tabs. Here’s how you can easily do it: - First, select the section where you want your vertical tab in Divi to appear. For example, you can start with a blank section, just like the screenshot shows. - Next, click the Plus Icon button to add a new section. - Choose a Single Row with one column - but you can pick any layout you like. - Now, in the new module search bar, type Tab. - Finally, click the Tab Module to insert it into your layout. Divi interface showing how to insert the Tab Module into a selected section with a single-column row for creating vertical tabs in a clean website layout. ## Step 2: Customize Content of the Divi Vertical Tab Module Once you insert the Divi tab module, the settings panel will pop up automatically. This is where you begin customizing each tab to suit your content. To make your [Divi theme](https://divicake.com/blog/divi-purchase-installation-and-setup/) vertical tabs look professional and organized, you’ll need to set the title and description for every individual tab. Here’s how to do it step-by-step for one tab (you can repeat the steps for as many tabs as you need): - In the Tab Module settings, click on the Content tab. - Look for the specific tab you want to edit and click on the Gear Icon next to it (as shown in the screenshot). - Under the content settings for that tab, switch to the Text option. - Now, enter your custom Title text that matches your content purpose. Divi Tabs Module settings panel with gear icon selected, showing how to edit tab titles and descriptions for personalized and organized vertical tab content. ## Step 3: Update Tab Content Body in Divi Tabs Module After setting the title for your Divi vertical tab, the next step is to add content inside the body area of that tab. This is where you’ll place the main information you want your visitors to see and yes, it’s super easy to do! Just follow these steps: - Scroll down a little inside the Tab Settings panel. - Find the Body option - this is where your main content goes. - Click on it and replace the existing text with content that fits your website’s needs. - Once you’ve updated the text, click the Tick Mark (✓) save button to apply the changes. Divi Tab Module body content area showing how to add and save custom text inside vertical tabs for a more informative and engaging user experience. ## Step 4: Customize Body Text In this step, we’ll focus on customizing the body text within the Divi Tabs Module. To do this, navigate to the Design tab and locate the Body Text settings. Here, you’ll find various options to adjust the text color, font size, line height, spacing, and more. These settings allow you to style the tab content to match your site’s overall design and enhance readability. Here’s what to do next: - Click on the Design tab in the Tab Module settings. - Select Body Text to start customizing your content’s look and feel. Divi Tab Module Design tab with Body Text settings open, allowing customization of font size, color, line height, and spacing to match the site’s design and improve readability. Now the customization option is open. It totally depends on your website which colors, text size, spacing, or active tab color you want b all the options are right here in the settings! - Make sure you are in the Design tab. - In the Body Text, the very first options include Tab Alignment, Links, and Comma settings — select these based on your needs. - Set Body Text Alignment as per your website’s layout. - Set Body Text Color to match your site’s theme. - Set Body Text Size for easy readability. - Set Body Text Letter Spacing for a clean and stylish look. - Set Body Line Height for perfect vertical spacing. Divi Tab Module customization panel showing design settings for tab alignment, text color, size, spacing, and line height to match the website’s layout and branding. Continuing in the same Body Text in the Design tab options, there are even more settings available to make your Divi vertical tabs look perfect according to your site’s style. - Set Body Line Height to control the vertical spacing between lines of text. - Set Text Shadow if you want to add a bit of depth and visual focus to your tab content. Divi Design tab with Body Text settings highlighting line height and text shadow options for better vertical spacing and enhanced visual appearance in vertical tabs. ## Step 5: Customize Tab Text in the Divi Vertical Tabs After applying all the Body Text customization, now it’s time to set up the Tab Text styling and we’ll continue working inside the Design tab of the [Divi Tab Module](https://divicake.com/blog/divi-tab-modules/). - Click on the Tab Text option under the Design tab. - Set Active Tab Background Color to highlight the selected tab. - Set Inactive Tab Background Color to make non-active tabs blend in. - Set Active Tab Text Color to match your website’s theme and enhance visibility. Divi Tab Module design settings showing how to customize active and inactive tab background colors and tab text colors for a visually appealing vertical tab layout. ### Complete Tab Text Styling for Divi Vertical Tabs Still inside the Tab Text settings under the Design tab, you can now fully style the text of each tab to match your website’s overall look and feel. These options help you bring consistency and polish to your Divi vertical tabs. - Set Tab Text Color to match your site’s color palette. - Set Tab Font to maintain branding across your design. - Set Tab Font Weight (light, regular, bold) for better emphasis. - Set Tab Font Style (italic, uppercase, underline, etc.) as needed. - Set Text Size for ideal readability. - Set Tab Letter Spacing to adjust the space between letters. - Set Tab Line Height for a balanced vertical layout. - Set Tab Text Shadow if you want to add a soft, elegant effect. Divi Tab Text styling settings under the Design tab showing options for font color, weight, style, size, letter spacing, line height, and shadow to create a consistent and elegant vertical tab design. Learn More: [A Look at Divi’s New Global Color System](https://divicake.com/blog/a-look-at-divis-new-global-color-system/) ## Step 6: How to Turn Horizontal Tabs into Vertical Tabs in Divi Using CSS Now, let’s move to the [Advanced tab](https://divicake.com/blog/getting-started-with-divi-advanced-settings/) of the same Divi Tab Module settings. Don’t worry this is still the Divi’s own tab module! Adding a small bit of CSS code here will change your default horizontal tabs into sleek vertical tabs Divi style. display:flex; flex-direction:row; - Click on the Advanced tab in your Tab Module settings. - Click on the Custom CSS option. - Paste the CSS code into the Main Element box**.** Divi Tab Module Advanced settings showing where to paste custom CSS code to change default horizontal tabs into vertical tabs with flexbox styling. ## Step 7: Adding More Custom CSS to Perfect Your Vertical Tab Next, scroll down inside the Custom CSS section in the Advanced tab of your Divi Tab Module settings. Here, you’ll find the Tab Code box, this is where you’ll paste a few more lines of CSS to fine-tune your vertical tabs. Copy the CSS Code: width:100%; border: 1px solid rgb(33,82,202) !important; padding: 10px 15px; /* 10px top/bottom, 15px left/right */ margin-right: 5px; /* Space between tabs */ background-color: #ffffff; /* Default (inactive) tab color */ - Paste the CSS code in the Tab box inside the Custom CSS section of the Advanced tab. Divi Tab Module interface with Tab Code box in the Custom CSS section showing additional CSS for full width, border color, padding, spacing, and background to enhance vertical tabs layout. Learn More: [Getting Started with Divi: Theme Options – General Tab](https://divicake.com/blog/getting-started-with-divi-theme-options-general-tab/) ## Final Result The GIF below shows the stunning final outcome after successfully converting the default Divi horizontal tab module into a clean, stylish vertical tabs [Divi module](https://divicake.com/blog/divi-modules/) using just a few lines of custom CSS code. See how smoothly the tabs now display vertically, improving navigation and giving your website a fresh, modern look! Divi Tab Module Advanced Custom CSS section showing CSS code for tab width, border, padding, margin, and background color to refine vertical tab appearance. ## Conclusion And that’s it a quick and effective way to create Divi vertical tabs using the built-in Tabs Module and a touch of custom CSS. Without needing any third-party plugins, you can transform standard horizontal tabs into clean, modern vertical layouts that improve both design and usability. This approach is perfect for organizing content in a stylish, user-friendly way while keeping your site lightweight and efficient. Whether you’re aiming for better navigation or simply want to match your tabs with your brand’s look, the [Divi theme builder](https://divicake.com/blog/divi-theme-builder-best-practices/) vertical tabs module gives you the flexibility to do it all. Now that you know how to make tabs vertical in Divi, go ahead and apply it to your website and experience the difference it makes for your visitors. If you have any questions or want to share your results, feel free to reach out. I’m here to help you create stunning, functional Divi layouts your audience will love! Read More: [Make a Horizontal or Vertical Scroll Section/Page in Divi](https://divicake.com/blog/divi-horizontal-vertical-scroll/) About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Blogging [ Selling Divi websites and child themes Blogging10 min read ### How to Make Money Selling Divi Websites and Child Themes How to earn from Divi three ways: building sites for clients, selling finished websites through a brokerage or marketplace, and packaging child themes for sale. 29 September 2026](https://divicake.com/blog/selling-divi-websites-and-child-themes/) [ Top reasons to choose a pre-built theme for your website Blogging10 min read ### Top Reasons to Choose a Pre Built Theme for Your Website Why a pre-built theme is often the faster and cheaper way to launch a site, compared with a custom build on cost, responsiveness, customization, SEO and support. 21 September 2026](https://divicake.com/blog/reasons-to-choose-a-pre-built-theme-for-your-website/) [ Why Web Designers Use Divi Theme to Build Better Websites Blogging7 min read ### Why Web Designers Use Divi Theme to Build Better Websites Design agencies pick Divi for its visual builder, reusable layout packs, and faster client handoff. Here is what Divi for web designers changes day to day. 14 April 2026](https://divicake.com/blog/why-web-designers-use-divi/)