How to make a full screen section in Elementor including header and footer height

Are you looking to create a visually impressive and professional-looking website? One design technique that can help is using full screen sections. Full screen sections allow you to fill the entire screen with a single element or group of elements, creating a visually striking layout.

Elementor, a popular WordPress plugin, makes it easy to create full screen sections on your website. In this article, we’ll provide a step-by-step guide on how to create a full screen section in Elementor for free, including the header and footer height.

To achieve this you’ll need Elementor Pro If you don’t have it and you are looking for a free alternative, you can download our plugin UnlockElementor to get Elementor Pro for free!

Step 1: Install the Elementor Pro for free

To install the UnlockElementor plugin, first download it from here. After saving the zip file on your computer log in to your WordPress dashboard and navigate to the “Plugins” menu. From there, click on “Add New” and then on “Upload Plugin“. Upload the zip file you previously downloaded and click “Install Now” and then “Activate” to finish the installation process. Done, you have now unlocked Elementor Pro premium features for free!

Step 2: Create a new page

Next, you’ll need to create a new page or post where you can design your full screen section. To do this, go to the “Pages” or “Posts” menu in your WordPress dashboard and click on “Add New“.

Give your page or post a title and then click on the “Edit with Elementor” button to launch the Elementor editor. This is where you’ll be able to design and customize your full screen section.

Step 3: Add a section

To create a full screen section in Elementor, you’ll need to use the “Section” element. This element allows you to create a container for your content and customize its layout and appearance.

To add a section to your page or post, simply click on the red plus button on the page you are editing with Elementor. This will add a section to your layout.

Step 4: Customize the section settings

Now it’s time to make you section full height. To do so, you’ll need to customize the section settings. To do this, click on the section in the layout and then go to the “Layout” tab in the left-hand panel.

Here, first click on the “Layout” dropdown menu and select “Fit to Screen” from the “Height” dropdown menu. This will make the section fit the full height of the screen.

You will now notice that the section has a fixed height, matching the height of the user’s screen. However, this does not include your site header and footer so you’ll need to scroll a bit to be able to see the whole section. Let’s solve this in the next step.

Step 5: Add custom CSS to remove your header and footer height from the section height

Select your Section, then in the left-side panel navigate to “Advanced” and click on “Custom CSS“.

Now here you can paste in the following code snippet:

selector {
    height: calc(100vh - 120px);
}

To achieve the desired result, you need to find out what is the height of your header + the height of your footer. The code above will remove that from the full height of your section, leaving you with a section that perfectly fit between your header and footer.

In the example, the height of the header + footer = 120px. You need to replace that number with yours.

One simple way to find out the height of your header and footer is through your browser inspect tool, follow these steps:

1. Open your website in a web browser and right-click on the header or footer element that you want to find out the height of.
2. From the context menu, select the “Inspect” option. This will open the browser’s developer tools.
3. In the developer tools, you’ll see some code, now don’t panic, we don’t need to look at that.
4. To find the height of that specific element you selected you need to go to the “Styles” panel and scroll all the way to the bottom.
5. There you can see all the measurements of the element in pixels.

So now that you have the height of your header and your footer, you can add them up and replace the default 120px in the code snippet above.

Conclusions

In conclusion, using full screen sections in Elementor can greatly enhance the visual appeal of your website. By following the simple steps outlined in this article, you can easily create a full screen section that spans the entire height of the screen, including the header and footer height.

To make your section full screen, you’ll need to use the “Section” element and customize the layout and height settings. You can then add and customize widgets, such as images and text boxes, to your layout to create the desired content and appearance.

If you want to remove the header and footer height from the section height, you can use custom CSS.

Overall, Elementor is a user-friendly plugin that makes it easy for anyone to create professional-looking full screen sections for their website, even without any coding experience. By using full screen sections, you can improve the user experience and SEO of your website.