In this lesson, you’ll learn how to build an attention-getting hero header for your home page using Elementor.
At this point, we’ve almost built the entire home page. But we have one more section to complete: the hero header. So, in this video, we’ll build a visually striking hero header section.
It’s a section that — like all sections — stretches the full width of the page. Here it’s much clearer to see, though, because there’s a background image covering the entire section.
We’ll also overlay some text content over the top that needs to remain readable.
Then, we’ll add a new section, using a trick to create the particular single column layout we need.
We’ll create a couple of new global font styles on the fly.
You’ll discover the two main ways we can set the height of a section.
You’ll learn how to properly apply and position background images for the design effect we need.
And finally, you’ll apply a semi-transparent background overlay, to ensure that visitors can easily read the text in the header.