Elementor Pro Homepage Hero Tutorial
hello, I’m Kaycinho, The Digital Alchemist, and today, I’m going to show you how to create a gorgeous homepage hero section with a video grid background, with Elementor Pro.
Elementor Pro Homepage Design Video Grid Tutorial
This tutorial is video based (check above), but below you will find the code needed to complete it.
CSS Code (for website padding)
- click on the hamburger icon (top left corner)
- click on Site Settings
- click on the Advanced tab
- then inside the Custom Css filed, paste the following code:
/* MEDIA QUERIES */
@media (max-width: 767px) {
selector {margin: 10px;}
}
@media screen and (min-width: 768px) and (max-width: 1400px) {
selector {margin: 20px 40px 40px;}
}
@media screen and (min-width: 1401px) and (max-width: 1440px) {
selector {margin: 20px 40px 40px;}
}
@media (min-width: 1441px) {
selector {margin: 20px 60px 60px;}
}
CSS Code (for the hero video background grid)
- select the hero section
- click on the Advanced tab
- then inside the Custom Css filed, paste the following code:
@media screen and (max-width: 1024px) {
.my-main {
height:40vh!important;
}
.my-alternate {
height:14vh;
}
.my-secondary {
height:14vh;
}
}
@media screen and (min-width: 1025px) {
.my-secondary {
height:40vh;
}
}
Your turn!
I hope this tutorial will help you make gorgeous homepage designs with Elementor Pro!
If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help, and it doesn’t cost you anything!
Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here.
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!
| 
