How to design a beautiful homepage using Elementor for WordPress? Even with Social Media, your website is the cornerstone of your personal brand and you should treat it with love.
So today I’m going to show you how to create a beautiful hero section for your homepage, with the Elementor page builder.
So how do we do that? Let’s find out!
How to design a beautiful homepage hero section
hello, I’m your host Kaycinho, I’m a digital alchemist, and today I’m going to show you how to create a beautiful hero section for the homepage of your website.
Now in case you don’t know what a hero section is, Wikipedia tells us that :
“In web design, a hero image is a large web banner image, prominently placed on a web page, generally in the front and center. The hero image is often the first visual element a visitor encounters on the site; it presents an overview of the site’s most important content.”
In today’s tutorial we’ll look at how to design a beautiful homepage building a slightly different hero section than what we see on most websites. But enough talk, let’s dive in!
How to design a beautiful homepage hero section: instructions
For best results, please watch the video above, but in case you need a quick written reference, here it goes :
- In this tutorial we only cover the “hero” section creation. For transparent headers with Astra Pro tutorial, click here
- In WordPress Admin > Pages, click Add New and create the home page
- In WordPress Admin > Settings > Reading, assign the page you created in the previous step as homepage
- In WordPress Admin > Pages, hover over the name of your page, then click on Edit with Elementor
- In the Elementor page builder: add a fullscreen section with 4 columns, make sure the column position is set to Stretch
- Add a button to column 1 and style it
- Add a background overlay (normal state) to column 1, for example a 30% black overlay
- Add a background overlay (hover state) to column 1 : for example a 30% blue overlay
- Repeat the process for columns 2, 3 and 4. Better yet : copy the styles from column n°1 and paste it to the other columns
- In Tablet mode, give 100% width to each column
- In Tablet mode, add a bottom border of 1px with to the bottom of columns 1, 2 and 3
- In Tablet mode, customize the background image position using Elementor’s custom background position feature
- Check the Mobile mode, it should work fine if the Tablet Mode has been set correctly, but depending on your image / text and color palette you may have to tweak the setting further
How to design a beautiful homepage hero section: Your turn
So, I hope that you now feel confident to create a beautiful hero section for the homepage of your website!
If there are other Elementor tutorials you’d like me to cover, 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 episode, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!
| 
