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

Posted on January 19, 2019 by in Divi Resources | 6 comments

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

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.

highlight product categories

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%

highlight product categories

Spacing

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

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

highlight product categories

Add Row #1

Column Structure

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

highlight product categories

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)

highlight product categories

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

highlight product categories

Column 2 Background Color

The second column will only need a white background color.

  • Column 2 Background Color: #ffffff

highlight product categories

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

highlight product categories

Spacing

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

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

highlight product categories

Box Shadow

And add a subtle box shadow.

  • Box Shadow Blur Strength: 80px

highlight product categories

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.

highlight product categories

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

highlight product categories

Spacing

Add some custom margin and padding values as well.

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

highlight product categories

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

highlight product categories

Color

Change the color of the divider next.

  • Color: #757f1e

highlight product categories

Styles

Modify the divider style in the styles settings too.

  • Divider Style: Double

highlight product categories

Sizing

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

  • Divider Weight: 6px

highlight product categories

Spacing

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

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

highlight product categories

Add Row #2

Column Structure

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

highlight product categories

Column 1 Background Color

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

  • Column 1 Background Color: #212121

highlight product categories

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

highlight product categories

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

highlight product categories

Box Shadow

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

  • Box Shadow Blur Strength: 80px

highlight product categories

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.

highlight product categories

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

highlight product categories

highlight product categories

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

highlight product categories

Spacing

Add some custom padding values in the spacing settings too.

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

highlight product categories

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.

highlight product categories

Default Background Color

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

  • Background Color: #eaeaea

highlight product categories

Hover Background Color

Change this background color on hover.

  • Background Color: #ffbb00

highlight product categories

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

highlight product categories

highlight product categories

Hover Text Settings

And modify these settings on hover.

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

highlight product categories

Default Spacing

We’re also applying some default spacing values.

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

highlight product categories

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

highlight product categories

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)

highlight product categories

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)

highlight product categories

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.

highlight product categories

Change First Duplicate

Change Content

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

highlight product categories

Change Background Color

Change the background color of this module as well.

  • Background Color: #dddddd

highlight product categories

Change Second Duplicate

Change Content

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

highlight product categories

Change Background Color

Along with the background color.

  • Background Color: #c6c6c6

highlight product categories

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.

highlight product categories

Visibility

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

highlight product categories

Preview

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

highlight product categories

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!

6 Comments

  1. Very nice. Thank you.

  2. Thank you Donjete for another great tutorial and beautifully crafted idea. I love the colours you used together. The whole thing looks modern and uniquely fresh 🙂

  3. Very Cool Tutorial! Thanks

  4. I learned something new today – thank you so much for sharing!

Leave a Reply

Comments are reviewed and must adhere to our comments policy.

554,210 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest