Creating a Hero / Fullscreen Section with Elementor

Creating a Fullscreen or Hero section using Elementor is very easy.

First edit the page using Elementor Editor.

Wait for the Elementor Editor to load.

Next Add a new Section on the page – see this tutorial, for this tutorial we are going to use a 1 Column layout.

In the Edit Section area -> Layout -> Height -> choose Fit to Screen.

This will force the Section to take the entire Height of the Browser Window.

---

Setting a Background Image with Elementor

To set a Background Image for a Section, edit the Section and navigate to the Style tab of that specific Section.

Click the Background Type -> choose Classic -> and set an Image as the background image for the newly created Section – either choose from the Media Library or Upload your own image.

Under Position, we can choose the actual position of the background image. Choose Center Center.

For Size, choose Cover and we are all set.

That’s how a Fullscreen / Hero Section is created using Elementor Page Builder and Creativo.

---

Creating a Background Overlay with Elementor

When setting a Background Image for a Section, it is sometimes needed to set an overlay or mask over the actual image.

To set a Background Overlay, edit the Section and navigate to the Style tab.

Expand the Background Overlay area.

Under Background Type choose the type of overlay to use: a solid color, an actual image or a gradient color.

Experience with all option.

Use the Opacity slider to set the actual opacity of the Overlay Background.