Minimizing the scrolling time of a visitor is vital for user-friendly web design. With this in mind, a vertical tab can effectively show a range of content in a shorter area.
There is, of course, a similar interest in Divi users as well. The good thing about Divi is that it offers a Tab module. But the weak point is that its design is simple and plain. So thinking about an intuitive and compelling vertical tab area is near impossible unless you know how to deal with coding difficulties.
Then, how to create vertical tabs on Divi by using the visual area directly? Our tutorial provides an easy solution to this question. Here, we are using the DiviFlash Advanced Tabs module. There was the same Divi building experience with this DiviFlash module.
Ready to get started?
Here is a quick sneak peek of the vertical tab design on our Divi website. You can make the same splendid design after completing this tutorial. Download this demo to learn more about this design.
Prerequisite:
- Install the latest version of the Divi theme.
- The latest version of the DiviFlash Plugin.
How to Create Vertical Tabs in Divi
We designed our vertical tab in an organized manner. So that you can display the tabination with texts, images, buttons, and so forth. Let’s start with taking a section on an existing page or creating a new page by using your Divi builder.
Section Design
Take a regular section. Then, open the settings for the section. Here we will add background color and change the bottom padding.
In the Content Tab,
Under Background Option,
- Background Color: rgba(224,231,239,0.29)
In the Design Tab,
Under Spacing Option,
- Padding: 0px (Bottom)
Row Design
For this design, we are adding two single-column rows. But the convenience is that you don’t have to touch the setting for any row design. So you can move to module design.
Divi Modules
Before inserting the advanced tab module from DiviFlash in the 2nd row, we are adding a Divi Text module in our first row. As simple as that, let’s see how to include them.
Modules Designs
To add a module, click the gray plus icon inside your row. A tab will pop up with modules. Here you can scroll or put the name of the desired module name in the search box.
Text Module
As you know, we will put a text module in the first row. Here, the primary goal is to add some mock content as an introduction to the tab content area. So, let’s include text for heading 2 and paragraph.
In the Content Tab,
Under Text Option,
- Heading 2: Partner with us
- Paragraph: Dummy Text
Now, in the design tab, we will style our texts. To do this, we will set the following updates.
In the Design Tab,
Under Text Option,
- Text Line Height: 2em
- Text Alignment: Center
Under Heading Text Option,
- Heading Text Level: H2
- Heading 2 Font: Poppins
- Heading 2 Text Size: 36px
Under Sizing Option,
- Max Width: 650px
- Module Alignment: Center
That’s all with the text module. Next, move to the Advanced Tab module setting.
Advanced Tabs Module
Now, get started with the Advanced Tab Module in the second row. To include a tab, there is a (+) icon above “Add New Item.” Once you click this icon, you will see a similar setting tab to the default Divi module. Here you can do everything with your tab item.
We are showing the customization of a tab item from top to bottom so that you can know the total breakdown. So let’s get to it.
First, click the (+) icon. Here you have the tab item setting. Add text for the heading, paragraph, and button in the content tab. Also, change the image placement for the desktop only.
In the Content Tab,
Under Content Option,
- Tab Label: StartUp
- Body: Let’s Make your ideas into a reality (Heading 3)
- Paragraph: Dummy Text
Under Image Option,
- Image Source
- Image Placement Desktop: Right
- Image Placement Tablet/Mobile: Default
Under Button Option,
- Button Text: Learn More
- Button URL: As per your need
Now, it’s time to style this tab item. Here you will see text and button customization in the design tab.
In the Design Tab,
Under Image styles Option,
- Max Width: Desktop 350px, Mobile 100%
- Alignment: Desktop- Center, Tablet & Mobile- Left
Afterward, hit the right icon box below. We have successfully added our first tab item. Similarly, there will be three other tab items for our design. Customization will be the same for all these tab items. You need to choose different images and texts for each one.
There is a simple hack as well. First, complete the customization of a tab item, then copy as many as you need. Next, head over to the setting of those tab items and change the image & text.
Once it’s finished, go ahead to the module content tab and change the nav and content container background color.
In the Content Tab,
Under Nav Container Background Option,
- Background Color: rgba(0,0,0,0)
Under Content Container Background Option,
- Background Color: #ffffff
There is no more customization for the content tab. You can start the process for the design tab. Open the setting and update the following changes.
In the Design Tab,
Under Nav Container Setting Option,
- Nav Placement Desktop: Left
- Nav Container Width Desktop: 17%
Under Content Area Settings,
- Content Vertical Align: End
- Content Area Rounded Corners: 7px (Except Top Left)
- Box Shadow Horizontal Position: -12px
- Box Shadow Blur Strength: 32px
- Shadow Color: rgba(0,0,0,0.07)
Under Nav Item Option,
- Background Color: rgba(0,0,0,0) & #ffffff (On Hover)
- Box Shadow Horizontal Position: -12px
- Shadow Color: rgba(0,0,0,0) & rgba(0,0,0,0.06) (On Hover)
Under Nav Item Active Option,
- Background Color: #ffffff
- Box Shadow Horizontal Position: -12px
- Shadow Color: rgba(0,0,0,0.06)
Under Nav Item Text Option, (TItle)
- Title Font: Poppins
- Title Font Weight: Bold
- Title Text Color: #000000
- Title Letter Spacing: 1px
Under Nav Item Text Active Option, (TItle)
- Title Font: Poppins
- Title Text Color: #000000
Under Body Option,
- Text Font: Roboto
- Text Font Weight: Light
- Text Text Size: 15px
- Text Line Height: 1.9em
Under Heading Text Option,
- Heading Text Level: H3
- Heading 3 Font: Poppins
- Heading 3 Text Weight: Semi-Bold
- Heading 3 Text Size: Desktop 33px, Mobile 22px
- Heading 3 Line Height: 1.4em
Under Button Option,
- Background Color: #ffffff & #e09900 (On Hover)
- Button Margin: 7px (Top)
- Button Padding: 12px (Top/Bottom), 42px (Left/Right)
- Button Font: Poppins
- Button Font Weight: Medium
- Button Text Color: #000000 & #ffffff (On Hover)
- Button Text Size: 16px
- Rounded Corners: 54px (All Sides)
- Border Width: 2px
- Border Color: #e09900
Under Custom Spacing Option, (Wrapper)
- Image Wrapper Padding: 66px (Top)
- Content Wrapper Margin: Desktop 42px (Top/Bottom), 50px (Left)
Tablet 0px (Left)
Under Custom Spacing Option, (Content)
- Nav Item Padding: 19px (Top/Bottom), 31px (Left)
Under Border Option,
- Border Width: 0px
Finally, we have done. Click the save button below on the right side of the screen. Then, exit the visual builder. Check out the result. If you click the tab title in the navigational container, it brings out different content. And that is what we were hoping for.
Don’t just stop here. With the extensive features of this module, you can design a fascinating vertical tab. Even you can make horizontal tabs with this module. Let’s see other functionalities it offers.
Why Choose DiviFlash to Create Vertical Tabs in Divi?
DiviFlash Advanced Tab module lets you show vast content in a concise area. Further, you have features for deploying helpful navigation and decorating the content area. What are they? Follow the bullet points below to know more:
- Get animation styles to beautify the content area.
- Provide eight different animation effects to reveal content.
- Has navigation stickiness, different placement, active one customization, etc to embellish the navigation menu.
- Ensures accurate distance through custom spacing.
- Offers beneficial features for responsive design.
Your Turn
So, this was our way of designing a vertical tab. And now, you know how to make one in Divi. Hence, don’t delay in having functional vertical tabs on your website.
But, If you still have questions about creating vertical tabs on the Divi website, let us know in the comment section. We have a fantastic Divi developer team to back your every limitation.
0 Comments