How to Design Unique Multi-Column Hero Sections with Divi’s Specialty Section

Posted on July 3, 2019 by in Divi Resources | 5 comments

How to Design Unique Multi-Column Hero Sections with Divi’s Specialty Section

Throughout all the design trends, the way you design your hero sections remains extremely important. With Divi, you can take on different approaches and create a hero section that stands out and encourages people to extend their stay on your website. To help you get inspired for your upcoming Divi projects, we’re going to show you how to design unique multi-column hero sections using Divi’s built-in options only. Not only do multi-column hero sections look great, but they also help you strategically place more content in the hero section without overwhelming your visitors.

Let’s get to it!

Preview

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

Download The Multi-Column Hero Section Layout for FREE

To lay your hands on the multi-column hero section layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Let’s Start Recreating!

Add New Specialty Section

Column Structure

To create a seamless multi-column hero section, we’re going to use one of the Divi specialty sections that you have access to inside the Visual Builder. Going for a specialty section allows you to have a better grip on the grid structure you go for when you’re designing a multi-column hero section. For this particular example, we’re selecting the following column structure:

multi-column

Background Color

Open the section settings and add a white background color.

  • Background Color: #ffffff

multi-column

Sizing

We’re making sure that there’s no gap between the section columns by changing the sizing settings.

  • Equalize Column Heights: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%
  • Inner Width: 100%
  • Inner Max Width: 100%

multi-column

Spacing

We’re also removing all default top and bottom padding of the row and columns.

  • Top Padding: 0px
  • Bottom Padding: 0px
  • Column 1 Top Padding: 0px
  • Column 1 Bottom Padding: 0px
  • Column 2 Top Padding: 0px
  • Column 2 Bottom Padding: 0px
  • Column 3 Top Padding: 0px
  • Column 3 Bottom Padding: 0px

multi-column

Add Row #1

Column Structure

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

multi-column

Spacing

Without adding any modules yet, open the row settings and remove all default top and bottom padding.

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

multi-column

Add Text Module to Column

Add Paragraph & H1 Content

Time to start adding modules! Add a new Text Module with some paragraph and H1 content of your choice.

multi-column

Text Settings

Move on to the design tab and change the text settings.

  • Text Font: Open Sans
  • Text Size: 0.9vw (Desktop), 1.6vw (Tablet), 2.2vw (Phone)

multi-column

H1 Text Settings

Modify the H1 text settings as well.

  • Heading Font: Open Sans
  • Heading Font Weight: Semi Bold
  • Heading Font Style: Uppercase
  • Heading Text Color: #000000
  • Heading Text Size: 4vw
  • Heading Line Height: 1.1em

multi-column

Spacing

Add some custom padding values too.

  • Top Padding: 10.8vw
  • Left Padding: 4vw
  • Right Padding: 4vw

multi-column

Add Row #2

Column Structure

The second row we need in the first section column uses the following column structure:

multi-column

Spacing

Without adding any modules yet, open the row settings and modify the padding values.

  • Top Padding: 3vw
  • Left Padding: 4vw
  • Right Padding: 4vw

multi-column

Add Text Module #1 to Column 1

Add H3 Content

Once you’re done with the row settings, you can go ahead and add a new Text Module to the first column. Enter some H3 content of your choice.

multi-column

H3 Text Settings

Move on to the design tab and change the H3 text settings accordingly:

  • Heading 3 Font: Open Sans
  • Heading 3 Font Weight: Semi Bold
  • Heading 3 Font Style: Uppercase
  • Heading 3 Text Color: #000000
  • Heading 3 Text Size: 1.5vw (Desktop), 2vw (Tablet), 2.5vw (Phone)

multi-column

Spacing

Continue by adding some top margin on phone.

  • Top Margin: 2vw (Phone Only)

multi-column

Add Divider Module to Column 1

Visibility

The second module we need in the first column is a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

multi-column

Line

Change the line color next.

  • Line Color: #000000

multi-column

Spacing

Add some custom margin values to create space around the divider.

  • Top Margin: 2vw
  • Bottom Margin: 2vw
  • Right Margin: 2vw

multi-column

Add Text Module #2 to Column 1

Add Content

The next and last module we need in this column is another Text Module. Enter some paragraph content of your choice.

multi-column

Text Settings

Move on to the design tab and change the text settings accordingly:

  • Text Font: Open Sans
  • Text Size: 0.6vw (Desktop), 1.1vw (Tablet), 2vw (Phone)
  • Text Line Height: 2em

multi-column

Spacing

Add some bottom and right padding as well.

  • Bottom Margin: 5vw (Phone Only)
  • Right Margin: 2vw

multi-column

Clone All Modules in Column 1 Twice & Place Duplicates in Remaining Columns

Once you’ve completed all modules in column 1, you can go ahead and clone each one of them twice. Place the duplicates in the two remaining columns of the row.

multi-column

Change Content

Make sure that you change all the content in the Text Modules.

multi-column

Add Row #3

Column Structure

The next and last row we need in the first section column uses the following column structure:

multi-column

Spacing

Open the row settings and modify the spacing values.

  • Top Margin: 2vw
  • Top Padding: 0px
  • Bottom Padding: 0px

multi-column

Add Text Module to Column 1

Add Content

Continue by adding a Text Module to the first column with some CTA copy of your choice.

multi-column

Add Link

Add a link to the entire module as well.

multi-column

Background Color

We’re also changing the background color of the Text Module.

  • Background Color: #000000

multi-column

Text Settings

Move on to the design tab and change the text settings accordingly:

  • Text Font: Open Sans
  • Text Font Weight: Ultra Bold
  • Text Font Style: Uppercase
  • Text Alignment: Center
  • Text Color: #ffffff
  • Text Size: 1vw (Desktop), 1.7vw (Tablet), 2.5vw (Phone)

multi-column

Spacing

And create space around the module using some custom margin and padding values.

  • Top Margin: 4vw (Desktop), 11vw (Tablet), 0vw (Phone)
  • Top Padding: 4vw
  • Bottom Padding: 4vw

multi-column

Clone Text Module & Place Duplicate in Column 2

Once you’ve completed the Text Module in column 1, you can clone it and place the duplicate in the second column.

multi-column

Change Content

Make sure you change the content and the link.

multi-column

Change Background Color

As well as the background color.

  • Background Color: #e5e5e5

multi-column

Change Text Color

Then, move on to the design tab and change the text color.

  • Text Color: #000000

multi-column

Change Spacing

Last but not least, make sure the spacing settings only contain the following values:

  • Top Padding: 4vw
  • Bottom Padding: 4vw

multi-column

Add Image Module to Section Column 2

Upload Image

On to the next section column! Here, the first module we’ll need is an Image Module. Upload an image of your choice or use one you can find in the zipped folder that was shared at the beginning of this post.

multi-column

Sizing

Go to the sizing settings and make sure the ‘Force Fullwidth’ option is enabled. This will make sure the image will keep its size across all screen sizes.

  • Force Fullwidth: Yes

multi-column

Filters

Modify the filters settings next.

  • Saturation: 0%
  • Brightness: 50%

multi-column

Add Text Module to Section Column 2

Add Paragraph & H3 Content

The second module we need in this column is a Text Module. Enter some paragraph and H3 content of your choice.

multi-column

Background Color

Add a background color to the module.

  • Background Color: #000000

multi-column

Text Settings

Move on to the design tab and change the text settings accordingly:

  • Text Font: Open Sans
  • Text Color: #ffffff
  • Text Size: 0.9vw (Desktop), 1.6vw (Tablet), 2.2vw (Phone)

multi-column

H3 Text Settings

Modify the H3 text settings as well.

  • Heading 3 Font: Open Sans
  • Heading 3 Font Weight: Semi Bold
  • Heading 3 Font Style: Uppercase
  • Heading 3 Text Color: #ffffff
  • Heading 3 Text Size: 1.5vw (Desktop), 2.5vw (Tablet), 3vw (Phone)

multi-column

Spacing

And add some custom padding values in the spacing settings.

  • Top Padding: 3vw
  • Bottom Padding: 3vw
  • Left Padding: 2vw
  • Right Padding: 2vw

multi-column

Clone Both Modules & Place Duplicates in Section Column 3 (Reversed Order)

Once you’ve completed both modules, you can go ahead and clone them. Place the duplicates in the remaining section column in reversed order.

multi-column

Change Text Module

Change Background Color

Open the duplicate Text Module in the third section column and change the background color.

  • Background Color: #ffffff

multi-column

Change Text Color

Change the text color next.

  • Text Color: #000000

multi-column

Change H3 Text Color

Along with the H3 text color.

  • Heading 3 Text Color: #000000

multi-column

Change Image Module

Change Image

Upload a different image to the duplicate Image Module next.

multi-column

Change Filters

And change the filters settings.

  • Saturation: 0%
  • Brightness: 147%

multi-column

Add Divider Module to Section Column 2

Position

We’re also adding some transformed dividers to add detail to our design. Place the first Divider Module right here:

multi-column

Visibility

Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

multi-column

Line

Add a line color next.

  • Line Color: #ffffff

multi-column

Transform Rotate

And transform the horizontal divider into a vertical one by modifying the left transform rotate value.

  • Left: 270deg

multi-column

Transform Translate

Reposition the Divider Module using the viewport width unit in the transform translate settings.

  • Right: -19vw (Desktop)
  • Bottom: -11vw (Desktop), -24vw (Tablet)

multi-column

Visibility

And hide the entire module on phone.

multi-column

Add Divider Module to Section Column 3

Position

The next and last Divider Module needs to be added right here:

multi-column

Visibility

Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

multi-column

Line

Move on to the design tab and change the line color.

  • Line Color: #000000

multi-column

Transform Rotate

Transform the horizontal divider into a vertical one next.

  • Left: 270deg

multi-column

Transform Translate

And reposition the divider using the transform translate settings.

  • Right: 2vw
  • Bottom: -11vw (Desktop), -24vw (Tablet)

multi-column

Visibility

To make sure the divider appears on top of the Image Module below it, we’re going to increase the Z Index in the visibility settings. We’ll also hide the entire module on phone.

  • Z Index: 2

multi-column

Preview

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

Final Thoughts

In this post, we’ve shown you how to create beautiful and unique multi-column hero sections with Divi’s built-in options only. This is a great technique that can be used for different kind of websites. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

Premade Layouts

Check Out These Related Posts

9 Divi Child Themes for Events and Meetups

9 Divi Child Themes for Events and Meetups

Posted on September 21, 2019 by in Divi Resources

Divi is a great choice to create websites for events and meetups. There are lots of ways to create your design and you can add the specific features your website needs. There are even several Divi child themes for events and meetups to help you get started. In this article, we’ll take a look at 9...

View Full Post

5 Comments

  1. Awesome layout! Thank you, Donjete!

    • The rules don’t work well on this layout. I was disappointed after implementing the layout to find that even on the desktop version, these vertical rules move around and really ruin the layout when resizing the window. They could be a nice touch, but are not a practical implementation at all.

  2. Thanks for the tutorial. Multi column layouts are a must for displaying content effectively. I was wondering what is the recommended number of columns?

  3. i really thankful to you for this tutorial. Multi section designs are an unquestionable requirement for showing content adequately. thanks you for sharing this great information

  4. thank you for your sharing.
    These are very popular layouts. I will collect and try to use it in the design.
    In addition, this tutorial is indeed very detailed. thank you.

Join To Download Today

Pin It on Pinterest