WordPress Hero Section Tutorial With Elementor Pro

WordPress Hero Section Tutorial With Elementor Pro

WordPress Hero Section Tutorial With Elementor Pro

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.

DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).

WordPress Hero Section Tutorial: What You Need

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

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!

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

WordPress Hero Section Tutorial With Elementor Pro

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!

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email
>

We use cookies to give you the best online experience. By agreeing you accept the use of cookies in accordance with our cookie policy.

Privacy Settings saved!
Privacy Settings

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here.

Cookies essentials to the navigation on this website.

Cookies used to remember your choices regarding privacy.

Decline all Services
Accept all Services

Join me on YouTube

subscribe & get exclusive tips to be your own boss

Free branding guidelines template! Download your free copy!

Brand, market

& grow online

​By subscribing you accept to receive my newsletter and occasional marketing offers. Unsubscribe anytime.

close
Scroll to Top

Featured

Check out my favorite resources:

Subscribe to my newsletter

Menu