Divi: How to create a Fluid Hero section

Would you like to create a Hero section in Divi which is fluid instead of the traditional responsive?

The Hero section of a Website is one of the best candidates for fluid design. Unlike traditional responsive design that adjusts to different breakpoints, fluid design seamlessly adapts to the browser viewport and keeps the design consistent across any device. After all, the Hero section is the first thing users see on a Website.

In this tutorial, we are going to show you how to create a whole fluid hero section in Divi. The key to creating this fluid design is to add a fluid root font size to each of the modules used and then incorporate the length unit em (who is relative to root body font size ) in the module settings.

Let's start!

Preview

Here's a quick look at the design we'll be creating in this tutorial.

Notice how the fluid design smoothly adapts to the width of the browser window.

Create a new page with Divi Builder

To get started, you will need to do the following:

From the WordPress dashboard, go to Pages > Add New to create a new page.

Give it a title that makes sense to you and click Use Divi Builder

Then click Start Building (Build From Scratch)

After that you will have a blank canvas to start designing in Divi.

Read also: Divi: How to create a Hero section with the Fullwidth Header module

How to Design a Fluid Hero Section in Divi

Section settings

To start, let's update the existing design settings for the section. Open section settings and update the following:

• Gradient Stops:
  • 30%: #ff2000
  • 30%: #121212
• Gradient Direction: 45deg

Under the tab Design, update the padding:

• Padding: 0px top, 0px bottom

Create a line

Next, add a one-column row to the section.

Line settings

Open line settings and update the following under the tab Design :

• Gutter Width: 1
• Width: 100%
• Max Width: 1px
• Min Height: 100 vh (Desktop), none (Tablet and Phone)
• Padding: 0px(Top and Bottom)

Create flowing header text with border

Now that the section and line are complete, we can add the flowing header text to the Hero section. We'll also add a fluid border to the Text module for a creative design element.

Add a Text module

To create the title text and border, add a new Text module to the column.

Text settings

Under the tab Content, update it contents of the body with the following HTML code:

<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>

To make the design elements fluid, we first need to add a fluid root font size to the module using the CSS Clamp() function. 

Under the tab Advanced, paste the following CSS snippet:

font-size: clamp(32px, 4.1vw, 70px);

Under the tab Design, update the following header text design settings:

• Heading text:
  • Type: H1
  • Font: Montserrat
  • Font Weight: Heavy
  • Color: #ffffff
  • Size: 1em
  • Letter Spacing: 0,1em
  • Line Height: 1,2 em

Also update the mod padding as follows:

• Padding: 1st (Top, Bottom, Left and Right)

To create the fluid border design, update the following:

• Border Width: 1em
• Border Color: #ffffff
• Bottom Border Color: clear
• Left Border Color: clear

Creating the Accent Border

To create the accent border, we can duplicate the existing Text module.

Delete it contents of the existing body and update the design parameters as follows:

• Max Width: 6,5cm
• Height: 3,25 em
• Border Width: 0,5em
• Border Color: #ff2000

To position the accent border, add an absolute position with an offset equal to the width of the border in the Heading Text (1em) module. 

Under the tab Advanced, update the following Position options:

• Position: Absolute
• Location: top right
• Vertical Offset: 1em
• Horizontal Offset: 1em

Create subtitle text

Below the title text, we will add the flowing subtitle text. Since this text is smaller, we'll add a smaller fluid root font size.

Add a new Text module

To create the caption text, add a new Text module below the existing Header Text module.

You can add some filler text sentences as follows:

• Content: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Add fluid root font size

Next, we need to add a new fluid font size that works better for small text. Under the Advanced tab, paste the following CSS snippet below the main element:

font-size: clamp(14px, 1.4vw, 24px);

Text design settings

Under the tab Design, update the following:

• Text:
  • Font Weight: Semi Bold
  • Color: #ffffff
  • Size: 1em
  • Height: 1,6 em

Then update the size and spacing as follows:

• Max Width: 19cm
• Margin: 2 em (Bottom), auto (Left), 5 em (Right)

Create the fluid button

To create the fluid button, add a new Button module below the Subtitle Text module.

Next, update the button text to read "7 Day Free Tral".

Add fluid root font size

Next, we need to add a new fluid font size suitable for a button. 

Under the tab Advanced, paste the following CSS snippet below the main element:

font-size: clamp(20px, 2.35vw, 40px);

Button design settings

Under the tab Design, update the following:

• Button Alignment: Right

• Use Custom Size For Button: YES
• Button Text Color: #ff2000
• Gradient Stops:
  • Color 1 25%: clear
  • Color 2 25%: #ffffff
• Gradient Direction: 45 degrees

• Button:
• Border Width: 0 pixels
• Border Radius: 0 pixels
• Font: Montserrat
• Font Weight: thick
• Style: italic
• Show Button Icon: YES
• Icon: triangle-shaped arrow to the right (see screenshot)
• Icon Placement: Right

• Margin: 8em (Right)
• Padding: 0,2em (Top and Bottom), 1,5em (Left), 1em (Right)

Create an image for the Hero section

With all the contents of the Hero section to the correct size of the page, we are ready to add the Hero section image on the left side. To do this, first add an Image module below the button.

Open image settings and upload an image.

Image design settings

Under the tab Design, update the following settings:

• Image Alignment: left (Desktop and Tablet), center (Phone)
• Max Width: 48% (Desktop and Tablet), 70% (Phone)
• Padding: 4% (Left)

Finally, give the image an absolute position with an offset using the vmin length unit as follows:

• Position: Absolute (Desktop and Tablet), Relative (Phone)
• Location: top left (Desktop and Tablet)
• Vertical Offset: 30vmin (Desktop and Tablet), 0px (Phone)

Final result

Here is the end result on a live page.

See also: Divi: How to Use Masks and Background Patterns for a Hero Section

This is how the fluid design smoothly adapts to the width of the browser window.

Download DIVI now!!!

Conclusion

Adding a fluid design to a Hero section can be a handy way to ensure that the top of the fold is beautifully consistent across all browser sizes, without having to update the design at points. specific stops or to use media queries.

Hopefully this technique will add another useful design skill for future projects.

We also hope that this tutorial will inspire you for your next Divi projects. If you have any concerns or suggestions, find us in the comments section to talk about it.

You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites.

Do not hesitate to also consult our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...