One way to make a great first impression is to set your hero section to fill the entire initial screen. In this tutorial, I’ll guide you through the process of setting this up in WordPress using the Divi Builder.
Why a Full-Screen Hero Section?
A full-screen Hero Section immediately captures your prospect’s attention, as it’s the first thing they see when they land on your site. It creates a visually dramatic experience that sets the tone for your brand and message. By filling the viewport with your Hero Section, you ensure that your content is presented beautifully, regardless of the device your prospects are using to view your site.
The term “viewport” refers to the visible area of a web page that a user can see without scrolling. It’s the part of the page that fits within the screen of your device, whether you’re using a desktop computer, tablet, or smartphone.
Adjust Your Hero Section to Full-Screen Mode
Step 1: Access Your Hero Section Settings
You’ll need to adjust the viewport settings at the Section level in Divi so that the particular section’s height is affected.
1. Click on Enable the Visual Builder at the top of your screen and click once on the hero section to display the blue Section borders.
2. Click on the Section Settings (the gear symbol) on the upper left of the section.
3. Click on the Advanced tab, then on Custom CSS.
Step 2: Add CSS code to Section settings
Now, we’ll add a very simple line of CSS code to adjust the viewport settings to 100%. In the Custom CSS, Main Element area, enter the code displayed below and accept the changes.
Step 3: Save and Publish
Once you are satisfied with your Hero Section, click the Save button, and then exit the Divi Builder.