If you’re familiar with e-commerce websites, you’re undoubtedly familiar with product categories as well. Product categories can be some of the most powerful pages on your website. That’s why it’s important to make them easy to find and highlight them in a straightforward and elegant way. With Divi’s built-in options, you can take your design in many directions. In this tutorial, we’re going to show you how to highlight product categories in your hero section. We’ll create the design example from scratch and hopefully, it will inspire you to highlight product categories in your own creative way as well!

Let’s get to it.

Preview

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

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Let’s Start Creating!

Add New Section

Gradient Background

Start by adding a new section to your page. Open the settings of this section and add a gradient background to it.

  • Color 1: #ffffff
  • Color 2: #757f1e
  • Gradient Type: Linear
  • Gradient Direction: 90deg
  • Start Position: 50%
  • End Position: 50%

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Spacing

Then, go to the design tab and add some custom top and bottom padding to the section.

  • Top Padding: 130px
  • Bottom Padding: 130px

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Add Row #1

Column Structure

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

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Column 1 Background Color

Without adding any modules yet, open the row settings and add a background color to the first column.

  • Column 1 Background Color: rgba(0,0,0,0.19)

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Column 1 Background Image

Add a background image to the first column as well along with a blend mode.

  • Column 1 Background Image Position: Bottom Center
  • Column 1 Background Image Repeat: No Repeat
  • Column 1 Background Image Blend: Multiply

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Column 2 Background Color

The second column will only need a white background color.

  • Column 2 Background Color: #ffffff

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Sizing

Continue by going to the design tab of the row settings and change the sizing settings.

  • Use Custom Width: Yes
  • Unit: PX
  • Custom Width: 2000px
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Spacing

Remove all the default custom padding of the row as well.

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

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Box Shadow

And add a subtle box shadow.

  • Box Shadow Blur Strength: 80px

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Add Text Module to Column 2

Add Content

Time to start adding modules! The first module we’ll need in the second column is a title Text Module. Add some content of choice.

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Heading Text Settings

Next, go to the heading text settings and make some changes.

  • Heading Font Weight: Ultra Bold
  • Heading Text Size: 60px (Desktop & Tablet), 50px (Phone)
  • Heading Letter Spacing: -4px
  • Heading Line Height: 0.8em

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Spacing

Add some custom margin and padding values as well.

  • Top Margin: 17vw
  • Left Padding: 2vw (Desktop), 4vw (Tablet), 5vw (Phone)

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Add Divider Module to Column 2

Visibility

The second and last module needed in the second column is a Divider Module. Make sure the Show Divider option is enabled.

  • Show Divider: Yes

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Color

Change the color of the divider next.

  • Color: #757f1e

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Styles

Modify the divider style in the styles settings too.

  • Divider Style: Double

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Sizing

And increase the Divider Weight in the sizing settings of the module.

  • Divider Weight: 6px

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Spacing

Lastly, add some custom top and bottom margin to the Divider Module.

  • Top Margin: 2vw
  • Bottom Margin: 15vw

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Add Row #2

Column Structure

On to the second row! Choose the following column structure for it:

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Column 1 Background Color

Open the row settings and add a background color to the first column.

  • Column 1 Background Color: #212121

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Sizing

Next, go to the design tab and play around with the sizing of the row.

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

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Spacing

Remove all the custom padding of the row as well by adding ‘0px’ to the top and bottom padding.

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

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Box Shadow

Last but not least, give the row a subtle box shadow.

  • Box Shadow Blur Strength: 80px

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Add Text Module #1 to Column 1

Add Content

The first module we’ll need is a Text Module. Add one to the first column with some content of choice.

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Text Settings

Continue by going to the design tab and changing the text settings.

  • Text Font Weight: Light
  • Text color: #ffffff
  • Text Size: 18px (Desktop), 15px (Tablet), 12px (Phone)
  • Text Line Height: 1em
  • Text Orientation: Left
  • Text Color: Light

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Heading Text Settings

Modify the heading text settings as well.

  • Heading 3 Text color: #ffffff
  • Heading 3 Text Size: 25px (Desktop), 20px (Tablet), 18px (Phone)
  • Heading 3 Letter Spacing: -1px

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Spacing

Add some custom padding values in the spacing settings too.

  • Top Padding: 30px
  • Bottom Padding: 30px
  • Left Padding: 50px
  • Right Padding: 50px

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Add Text Module #2 to Column 2

Add Content

Continue by adding another Text Module to the second column. Add some content of choice and link the product category page in the link settings as well.

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Default Background Color

Then, go to the background settings and add a background color.

  • Background Color: #eaeaea

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Hover Background Color

Change this background color on hover.

  • Background Color: #ffbb00

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Default Text Settings

Change around the text settings in the design tab next.

  • Text Font Weight: Ultra Bold
  • Text Font Style: Uppercase
  • Text Color: #333333
  • Text Size: 16px
  • Text Letter Spacing: -1px
  • Text Orientation: Center

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Hover Text Settings

And modify these settings on hover.

  • Text Color: #ffffff
  • Text Size: 20px

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Default Spacing

We’re also applying some default spacing values.

  • Top Padding: 45px
  • Bottom Padding: 45px
  • Left Padding: 5px
  • Right Padding: 5px

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Hover Spacing

Which we’ll change on hover.

  • Top Margin: -50px
  • Left Margin: -20px
  • Top Padding: 70px
  • Bottom Padding: 70px
  • Left Padding: 5px
  • Right Padding: 5px

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Default Box Shadow

Continue by opening the box shadow settings and add a completely transparent box shadow.

  • Box Shadow Blur Strength: 80px
  • Shadow Color: rgba(255,255,255,0)

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Hover Box Shadow

Change the completely transparent box shadow color on hover for it to show up.

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

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Clone Text Module #2 Twice & Place in Remaining Columns

Once you’ve finished modifying the Text Module in column 2, you can go ahead and clone the module twice and place the duplicates in the two remaining columns of the row.

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Change First Duplicate

Change Content

Open the first duplicate in the third column and change the content and link of the product category.

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Change Background Color

Change the background color of this module as well.

  • Background Color: #dddddd

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Change Second Duplicate

Change Content

Change the content of the second duplicate in column 4 too.

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Change Background Color

Along with the background color.

  • Background Color: #c6c6c6

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Add Image Module for Smaller Screen Sizes to Column 2 of Row #1

Upload Image

Last but not least, we’re also going to add an Image Module to the second column of the first row to optimize everything for smaller screen sizes.

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Visibility

Make sure this module only appears on smaller screen sizes by hiding it on desktop in the advanced tab of the module.

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Preview

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

How to Highlight Product Categories in a Stunning Divi Website Hero Section-ThemesReviewCentral

Final Thoughts

In this post, we’ve recreated a stunning design example that puts the main product categories of your website in the spotlight. We hope this tutorial inspires you to create your own kinds of designs as well. If you have any questions or suggestions, make sure you leave a comment in the comment section below!