Full Height Divi Hero Section
Making A Good First Impression
We all know how important first impressions are, and that saying is true for our websites and landing pages as well. The first section on a home or landing page is known as the “hero section,” and this is the section many users want to make full height to create an immerseve experience. This is easy to do in Divi with a quick little tip, and I’m going to show you how to make your Divi hero section full height.
▶️ Please watch the video above to get all the exciting details! 👆
You can create a full height section two ways in Divi. In the past, the only method was with a simple CSS snippet, but now there is also a way to do this directly in the Divi Builder. This tutorial will show you both method in case you need one or the other depending ont he situation.
Make A Divi Section Full Height With The Sizing Settings
Go to any Divi Builder section settings to the Design tab. Go to the Sizing toggle and find Min Height setting. Set the min height value to “100vh” and save the change.
That was easy! Now your hero section will be the same height as any device that your website visitors are using, whether that be desktop, tablet, or phone.
Make A Divi Section Full Height With CSS
The althernative option involes just one line of code which needs to be added to the section that you want to be full height.
Go to the section settings to the Advanced tab. Go to the Custom CSS toggle and find the Main Element. Copy and paste the following code snippet below into that input area.
min-height: 100vh;
There you go, that is two methods to create a full height hero section in Divi. I hope you enjoyed that and can put it to good use on your Divi websites!
Hey Nelson, I used the 100vh on my hero slider module and it looks great on desktop, but when I went to mobile, the slider is elongated and super tall.
I then found this code and put it in
@media screen and (max-width:900px)
{
.et_pb_fullwidth_slider_0 .et_pb_slide {
background-size: contain!important;
height: 250px !important;
}
}
@media screen and (max-width:479px)
{
.et_pb_fullwidth_slider_0 .et_pb_slide {
background-size: contain!important;
height: 110px !important;
}
}
And the slider looks great now on mobile BUT it still has the 100vh attached to it so there’s black above and below the slider on mobile.
Here is the screenshot https://snipboard.io/ptNvxf.jpg
Hi Dan!
Please avoid using 100vh height and the above code when used fullwidth modules already. The fullwidth modules adjust the height itself to fullscreen on desktop and mobile.