WordPress Hero Section anyone? Today I will show you how to create a very specific stacked layout for the “hero” section of your homepage,. And to do that we’ll use WordPress and the Elementor Pro theme builder.
WordPress Hero Section Tutorial: What You Need
hello, I’m your host Kaycinho, I’m a digital alchemist, today, I’m going to show you how to create a delicious stacked layout for your homepage.
This type of layout is particularly interesting when you have several target customers for different services, and you want to be able to guide them, right from the very first glimpse at your home page.
To follow this tutorial, you will need Elementor Pro.
I will be using the WordPress Astra theme, but feel free to try out with your theme.
However, if you want to follow along with the very same tools I’m using, you might as well install Astra. It’s free and lightweight.
The only premium plugin we’ll use for this tutorial is Elementor Pro.
If you are interested in purchasing Elementor Pro, here is a handy link:
WordPress Hero Section Tutorial: Step By Step
For the best experience, I invite you to check the video tutorial on top of this page, but in case you need a quick reference, here are the steps outlined:
WordPress Hero Section : Step 1
In this step, we first need to setup our WordPress install :
- set the permalinks
- create the home page (don’t edit it yet)
- add your images in the media library (16:9 ratio)
- in WordPress Admin > Reading: set the homepage with the page we’ve just created
WordPress Hero Section: Step 2
Now, time to edit and style our Homepage with Elementor Pro.
- create a section with 2 columns
- make the section fullwidth
- min height = 100vh
- column position: stretch
In the left column:
- set margin and padding to 0
- add an Inner Section widget
- set the inner section margin to 0
- by default 2 columns will be added, remove one of the columns
- in the column settings > advanced > CSS, add the following code: selector {min-height:100vh;}
- set the content vertical position of the column to middle
- Add a slideshow background and enable the KenBurns effect option
- Add & style an h1 title + a button
In the right column:
- set margin and padding to 0
- add an Inner Section widget
- set the inner section margin to 0
- by default 2 columns will be added, remove one of the columns
- in the column settings > advanced > CSS, add the following code: selector {min-height:50vh;}
- set the content vertical position of the column to middle
- Add a background image
- Under the background image settings, enable the Mouse track effect, with a setting of 0.1
- Add & style an h2 title + a button
- Once you are happy with the result, duplicate the inner section and change the content (image / title / button)
WordPress Hero Section: Step 3
In this step, we will make sure our hero section works great on tablets and smartphones.
Tablet:
- change the font size of the h1 and h2’s if needed
Mobile:
- change the font size of the h1 and h2’s if needed
- make the buttons fullwidth
WordPress Hero Section: Step 4
Enjoy!
WordPress Hero Section With Elementor Pro: Get Elementor Pro!
If you are interested in purchasing Elementor Pro, here is a handy link:
WordPress Hero Section With Elementor Pro: Your Turn
So, I hope you now feel confident to create this type of layout with Elementor Pro.
If there are other WordPress and Elementor reviews you’d like me to cover, please let me know in the comments.
If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the channel and if you know someone that could benefit from it, I’m going to ask you if you’d like to share it now.
Because let’s face it, there are so many things to do in a day that if you don’t do it now you’ll probably forget.
Now if you want to brand, market and grow your business it in the Digital Age make sure you subscribe to my email newsletter so that you never miss your share of digital alchemy and tips, tools, services and case studies that can help you grow your business online.
So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!
| 
