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!
Is it also possible to make a 100vh of 2 sections? I would like to use the header image and a nav-menu-bar underneath, to display this 100vh/fullscreen
Hi Gabriele,
I think you could put all of that in one section, correct? I don’t see why not.
This is great – thank you. My section has a margin of 20px (could be a white border) which is fine apart from the bottom margin. This always shows beneath the bottom of the screen. Would there be a way to show the bottom margin on the screen? Thanks 🙂
Hi Joe,
I’m not quit sure what you are asking. Are you saying you don’t want the margin, but don’t want it to be part of the screen?
Hi Nelson, it’s a little hard to explain – apologies. I have attached a screenshot of the issue. The margin exists on all sides of the section, however it doesn’t show on screen at the bottom – you have to scroll down to see it. I would like it so the bottom margin shows on screen – so the page has a nice border effect on all sides. I hope that makes sense!
Hi Joe,
I had to get the url from the screenshot. Links are always the best way to help. So just use this code and you will be all set: min-height: calc(100vh – 40px);
Hi Nelson, thanks for the tip! I have just one question: is there a way to dynamically subtract the header height to the 100vh so that the hero section considers the menu? I made a couple of different global headers for the website which differ in height and I’d like to use an hero section with video with both menus.
Thanks for any suggestion,
Dan
Hi Dan,
It sounds like this will help: https://www.peeayecreative.com/how-to-automatically-stop-your-fixed-divi-header-from-overlapping-the-page-and-push-it-down-instead/
Thank you again dear Nelson to provide a solution to my problem! AGAIN 🙂
You’re quite welcome!
what is the image size that you used? can this section be turned into a slider as well, or will this work with the full width slider section? thanks for the great tips
Hi Sean, I would recommend 1920px wide for the hero section background image. And yes, you could use the slider module if you want make it full height.
Thank you for your reply!.
what about image height?
i have been using 1920×1230
for some reason my images are fitting perfect on widescreen pc (using 100vh), but are slighlty longer on some devices like my macbook and samsung phone. (eg i have to scroll down a tiny bit to make it fit the screen perfect)
Hi Sean,
Typically the aspect ratio is 16:9, so 1920×1080 would be that. But remember, there is no perfect size or aspect ratio as every device is different.
Do you have any idea why when I make it 100vh it makes my section bigger than my current window?
I would have to guess it is related to a fixed header or something.
I added a standard section, added a image to the background of that section. In that section I added a text module and a button module. I followed your tutorial and made the section hero section full height. Now the text module and button module has been pushed up. How can I make the modules inside that section centered? It also happens in your video as well.
Please go to the Section Settings > Advanced > Custom CSS > Main Element and place the code given below:
display: flex;
justify-content: center;
flex-direction: column !important;
Let us know how it goes. 🙂
This tip changed everything. Thanks a bunch!
You’re welcome Jess!
This worked perfectly for me! Thanks!
We are glad that the problem is resolved now. 🙂
Hi – Thanks for the fix. But…only works first time! I refresh the page and it shrinks back! Could you help?
That is weird. You can try adding 100vh in the section Design settings in the Sizing toggle instead.
Hi Nelson,
Thank you. I’ve tried this but the image always ends up way bigger than the size of the screen. Is there a way to make the section the exact same size of each screen size or is that totally impossible?
Thanks!
Tania
Hey Tania,
It is not impossible to make the section the exact size of the screen. Could you please share the URL so that I can check where you are facing the issue?
Hi,
In my section I have a full width title followed by a menu module at the end that always ends up on underneath my page view. I seems it can not fit the view height perfectly. What am I doing wrong
I am not clear on what you mean.
When I put this code it does make the hero section height of the browser…. but it starts after the menu so it is like Menu 96px + 100vh
I see you write this earlier which I think would solve it
min-height: calc(100vh – 40px); in my case
min-height: calc(100vh – 96px);
But where to put that code. I tried in the section custom CSS -> Main-> but it didn’t do anything
Can you explain where to put this code… and should there also be min-height 100vh in the size section?
Hey Soren,
You can place the min-height code in Custom CSS > Main but I guess it’s not working for you because the subtraction sign is not right. Could you please copy and paste the code given below and see if that helps?
min-height: calc(100vh - 96px) !important
Hi,
Is there a way to have my hero section cover my top WP navigation area? I’m wanting to use the full height section to cover the whole website so the user will have to make a selection before continuing the the website and accessing the content.
Thanks!
Not sure, but you can try changing the z-index with CSS or in the advanced tab.
Hi Nelson,
i use the Hero Section of Divi to get a full screen section. On mobile devices i discovered a bug, that i’m not aware of repair by myself. The hero section on mobiles seems to be to big for the actual screen. I tried the methods you guys recommended, but unfortunately couldn’t get it fixed.
https://plastischechirurgie-hamburg.com/leistungen/gesicht/facelift/
This is example page. We got the problem on all our pages.
Thanks in advance
Hi Sebastian!
Please add the following code for the tablet and mobile view using Divi responsive design option:
min-height: auto !important;
height: 80vh !important;
Let me know how it goes.
How can I get my content to center vertically when I use this code?
https://hyperspectral-intelligence.calibrateconsulting.ca/
Thanks!
There are lots of ways to center content vertically and a lot of other tutorials out there for it, so I won’t get into that here since there are many scenarios, but you can check the Elegant Themes blog.
Hi Nelson,
Creating this site where I’ve made a custom post type with a Gallery field (ACF Pro).
Since Divi cannot do custom post type for the gallery slider .. do you have any idea on how to sort this out?
This site I’m building is a site where I don’t want the customer what so ever to work in the builder in which I’ve got custom post types for every text field on the site connected to specific locations. But, this one with a gallery slider seem to be tricky.. any ideas?
Thanks
Hi Martin,
It sounds like you need our plugin Divi Dynamic Helper: https://www.peeayecreative.com/product/divi-dynamic-helper/
Hey Nelson,
Working find on desktop.. but on mobile my arrow at the bottom of the section is a little bit further down. Don’t get why…
Any idea?
Thanks!
From what I can see on your link it is looking great, so I couldn’t understand the issue.
Hello! Great post!
I had a funny thing happening.
i made a whole section, where 42% of it was an own section to the left (full page header)
Made it a nice overlapping view.
When adding 100vh to the “bottom” section in min height, it added a spacing below my page header BUT when i took 100vh in both min height and Height, it all worked.
And another funny thing
The same problem happend in the mobile device/ipad section, but here the problem switched to the full page header instead making me add 100vh to both min height and also Height.
Hi Christofer!
It seems some extra margin or padding were involved in the section. Please try adding min-height 100vh without any extra spacing value. If the issue still happens, can you please share the URL of the page to check further?
Hi,
How can i increase (with CSS) the high of a footer section
There is no section-menu ( i use DIVI).
Thanks for your reply.
Hans
Hi Hans!
It seems you’re using the default footer for the site. If yes, then add the following code in Theme options > Custom CSS:
#main-footer{
height: 50vh;
}
You can also create a custom header in theme builder.
Let me know how it goes!
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.