Are you looking for new and creative ways to showcase features and/or products on your web pages? If so, keep reading because in this post, we’ll show you how to display features in hover tabs using Divi’s built-in options only. The possibilities you have with this approach are endless and they will surely allow you to understand Divi on a deeper level. The tab hover effect will only occur on hover-friendly desktop environments. When the hover tabs are being viewed from smaller screen sizes, the features will be listed in their original form.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a look at the outcome on different screen sizes.

Desktop

how-to-showcase-features-in-hover-tabs-with-divi How to Showcase Features in Hover Tabs with Divi

Mobile

how-to-showcase-features-in-hover-tabs-with-divi How to Showcase Features in Hover Tabs with Divi

Let’s Start Creating!

Add New Section

Gradient Background

Add a new page or open an existing one and add a new section. Open the section settings and add a gradient background to the section. We’ll use the gradient background to cover the left part of the hover tabs as you can notice in the print screens above.

  • Color 1: #f2f2f2
  • Color 2: #ffffff
  • Gradient Direction: 87deg
  • Start Position: 20%
  • End Position: 20%

how-to-showcase-features-in-hover-tabs-with-divi How to Showcase Features in Hover Tabs with Divi

Spacing

Then, remove the section’s custom top and bottom padding by adding ‘0px’ to both options.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-showcase-features-in-hover-tabs-with-divi-1 How to Showcase Features in Hover Tabs with Divi

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

how-to-showcase-features-in-hover-tabs-with-divi-2 How to Showcase Features in Hover Tabs with Divi

Background Color

Without adding any modules yet, open the row settings and change the background color.

  • Background Color: #ffffff

how-to-showcase-features-in-hover-tabs-with-divi-3 How to Showcase Features in Hover Tabs with Divi

Row Alignment

Modify the row alignment as well.

  • Row Alignment: Left

how-to-showcase-features-in-hover-tabs-with-divi-4 How to Showcase Features in Hover Tabs with Divi

Default Sizing

And change the sizing settings too.

  • Use Custom Width: Yes
  • Unit: PX
  • Custom Width: 400px
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

how-to-showcase-features-in-hover-tabs-with-divi-5 How to Showcase Features in Hover Tabs with Divi

Hover Sizing

Modify the Custom Width option in the Sizing settings on hover. This will allow the row to expand when being hovered.

  • Custom Width: 2000px

how-to-showcase-features-in-hover-tabs-with-divi-6 How to Showcase Features in Hover Tabs with Divi

Spacing

Then, go to the spacing settings and remove the default top and bottom padding values.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-showcase-features-in-hover-tabs-with-divi-7 How to Showcase Features in Hover Tabs with Divi

Default Border

Add ’20px’ to the top right corner of the row and add a left border to the row as well.

  • Left Border Width: 20px
  • Left Border Color: #6d44ff

how-to-showcase-features-in-hover-tabs-with-divi-8 How to Showcase Features in Hover Tabs with Divi

Hover Border

Remove the ’20px’ top right rounded corner on hover by adding ‘0px’ instead.

how-to-showcase-features-in-hover-tabs-with-divi-9 How to Showcase Features in Hover Tabs with Divi

Default Box Shadow

Last but not least, add a subtle box shadow.

  • Box Shadow Blur Strength: 80px
  • Box Shadow Spread Strength: -10px
  • Shadow Color: rgba(0,0,0,0.11)

how-to-showcase-features-in-hover-tabs-with-divi-10 How to Showcase Features in Hover Tabs with Divi

Hover Box Shadow

And modify the shadow color into a completely transparent color on hover.

  • Shadow Color: rgba(255,255,255,0)

how-to-showcase-features-in-hover-tabs-with-divi-11 How to Showcase Features in Hover Tabs with Divi

Add Blurb Module to Row

Add Content

Now that we’re finished modifying all the row settings, we can go ahead and add a Blurb Module to the column. Feel free to use any other module of your choice. Once you’ve added the module, add some content of choice.

how-to-showcase-features-in-hover-tabs-with-divi-12 How to Showcase Features in Hover Tabs with Divi

Select Icon

Select an icon of your choice next.

how-to-showcase-features-in-hover-tabs-with-divi-13 How to Showcase Features in Hover Tabs with Divi

Icon Settings

And change the appearance of the icon in the icon settings.

  • Icon Color: #5323ff
  • Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 54px

how-to-showcase-features-in-hover-tabs-with-divi-14 How to Showcase Features in Hover Tabs with Divi

Default Title Text Settings

Modify the title text settings next.

  • Title Font: Poppins
  • Title Text Alignment: Center
  • Title Text Color: #5323ff
  • Title Text Size: 25px
  • Title Letter Spacing: -1px
  • Title Line Height: 1em

how-to-showcase-features-in-hover-tabs-with-divi-15 How to Showcase Features in Hover Tabs with Divi

Hover Title Text Settings

And modify the title line height on hover.

  • Title Line Height: 1.5em

how-to-showcase-features-in-hover-tabs-with-divi-16 How to Showcase Features in Hover Tabs with Divi

Default Body Text Settings

Then, go to the body text settings and make some changes. This includes changing the text size to ‘0px’. This will help us make the body text appear on hover only.

  • Body Font: Poppins
  • Body Font Weight: Light
  • Body Text Alignment: Center
  • Body Text Color: #000000
  • Body Text Size: 0px (Desktop), 15px (Tablet & Phone)
  • Body Line Height: 2.2em

how-to-showcase-features-in-hover-tabs-with-divi-17 How to Showcase Features in Hover Tabs with Divi

Hover Body Text Settings

To make sure the body text appears on hover, change the text size on hover.

  • Body Text Size: 15px

how-to-showcase-features-in-hover-tabs-with-divi-18 How to Showcase Features in Hover Tabs with Divi

Default Spacing

To give the module some space to breathe, we’re adding some custom top and bottom padding to the module.

  • Top Padding: 80px
  • Bottom Padding: 80px

how-to-showcase-features-in-hover-tabs-with-divi-19 How to Showcase Features in Hover Tabs with Divi

Hover Spacing

We’ll modify the spacing settings on hover. You won’t be able to see the end result before exiting the Visual Builder because we’re applying hover options to both the row and Blurb Module.

  • Top Padding: 80px
  • Bottom Padding: 80px
  • Left Padding: 20vw
  • Right Padding: 20vw

how-to-showcase-features-in-hover-tabs-with-divi-20 How to Showcase Features in Hover Tabs with Divi

Clone Row 3 Times

Once you’re done modifying the first row and its Blurb Module, you can go ahead and clone the row up to as many times as you want.

how-to-showcase-features-in-hover-tabs-with-divi-21 How to Showcase Features in Hover Tabs with Divi

Change Row & Blurb Module #2

Change Row Spacing

Open the first duplicate and add some custom left margin. This will allow us to create the staircase effect which you can notice in the preview of this post.

  • Left Margin: 6vw

how-to-showcase-features-in-hover-tabs-with-divi-22 How to Showcase Features in Hover Tabs with Divi

Change Row Border Color

Change the left border color of the row as well.

  • Left Border Color: #00ffcc

how-to-showcase-features-in-hover-tabs-with-divi-23 How to Showcase Features in Hover Tabs with Divi

Change Blurb Content & Icon

Then, open the Blurb Module and change the icon.

how-to-showcase-features-in-hover-tabs-with-divi-24 How to Showcase Features in Hover Tabs with Divi

Change Blurb Module Icon Color

Along with the icon color.

  • Icon Color: #00eda6

how-to-showcase-features-in-hover-tabs-with-divi-25 How to Showcase Features in Hover Tabs with Divi

Change Title Text Color

And the title text color.

  • Title Text Color: #00eda6

how-to-showcase-features-in-hover-tabs-with-divi-26 How to Showcase Features in Hover Tabs with Divi

Change Row & Blurb Module #3

Change Row Spacing

Add some custom left margin to the second duplicate as well.

  • Left Margin: 12vw

how-to-showcase-features-in-hover-tabs-with-divi-27 How to Showcase Features in Hover Tabs with Divi

Change Row Border Color

Change the left row border color.

  • Left Border Color:#afebff

how-to-showcase-features-in-hover-tabs-with-divi-28 How to Showcase Features in Hover Tabs with Divi

Change Blurb Content & Icon

Along with the blurb icon and content.

how-to-showcase-features-in-hover-tabs-with-divi-29 How to Showcase Features in Hover Tabs with Divi

Change Blurb Module Icon Color

Modify the icon color as well.

  • Icon Color: #68d9ff

how-to-showcase-features-in-hover-tabs-with-divi-30 How to Showcase Features in Hover Tabs with Divi

Change Title Text Color

And the title text color too.

  • Title Text Color: #68d9ff

how-to-showcase-features-in-hover-tabs-with-divi-31 How to Showcase Features in Hover Tabs with Divi

Change Row & Blurb Module #4

Change Row Spacing

On to the next and last duplicate! Add some custom left margin to the row.

  • Left Margin: 18vw

how-to-showcase-features-in-hover-tabs-with-divi-32 How to Showcase Features in Hover Tabs with Divi

Change Row Border Color

Change the left border color of the row as well.

  • Left Border Color: #dd87cf

how-to-showcase-features-in-hover-tabs-with-divi-33 How to Showcase Features in Hover Tabs with Divi

Change Blurb Content & Icon

Open the Blurb Module in the row and change the icon and content of the module.

how-to-showcase-features-in-hover-tabs-with-divi-34 How to Showcase Features in Hover Tabs with Divi

Change Blurb Module Icon Color

Along with the icon color.

  • Icon Color: #dd6aca

how-to-showcase-features-in-hover-tabs-with-divi-35 How to Showcase Features in Hover Tabs with Divi

Change Title Text Color

And the title text color as well.

  • Title Text Color: #dd6aca

how-to-showcase-features-in-hover-tabs-with-divi-36 How to Showcase Features in Hover Tabs with Divi

Preview

Now that we’ve gone through the tutorial, let’s take a final look at the outcome on different screen sizes.

Desktop

how-to-showcase-features-in-hover-tabs-with-divi How to Showcase Features in Hover Tabs with Divi

Mobile

how-to-showcase-features-in-hover-tabs-with-divi How to Showcase Features in Hover Tabs with Divi

Final Thoughts

In this post, we’ve shown you how to use Divi’s built-in options only to create hover tabs. This approach will help you share content about features or products in an interactive way. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

By Donjete Vuniqi

Donjetë is a freelance content writer who is fascinated by content marketing, design, and technology. She helps clients bring the right content to the right people. If you’re looking for someone to help you tell your company’s story, she’ll know how to handle it.

SEO News and More

SEO News and More

Share This