Hello, WordPress enthusiasts and web content
creators.
I was testing some Elementor Pro features
for a new video, and I got an idea.
What if I'll show you how to create a hero
section like this, for any WordPress website,
with the free version of Elementor?
Then save it as a section template and re-use
it any time you want.
Are you interested?
Keep watching!
At the end of the video, you will know how
to use the subtle zooming effect for your
background slider and get this immersive visual
experience.
Let me exit to dashboard and go to plugins
to deactivate Elementor Pro, so I can avoid
any confusion.
All these great features are available for
free.
Ok.
Let's go back to the page I built so far.
As you can see, the only missing thing here
is the animated headline, which is a Pro widget
gone once I deactivated the plugin.
I want to replace the word "pro" in the big
title with free and the word "better" below
with "great".
It's so true.
You can design a great looking website with
this free page builder, but you already know
that.
As I mentioned, I am working on a new video,
so click the subscribe button below and ring
the bell to get notified when the next video
will be published.
Do you have something specific you want to
learn about Elementor?
Let's chat about that in the comments section
below.
If you are wondering what theme I recommend
for Elementor, I could say any theme out there.
It doesn't matter.
There are, however, some themes that are specifically
optimized for Elementor, like Hello Elementor,
Astra, OceanWP, Neve, which is our WordPress
theme, and so on.
Check out the recommended video above to see
some excellent WordPress themes to start a
website in 2020.
Now that everything is set up let's add a
new template.
Name it Hero, click publish, then push this
big blue button Edit with Elementor.
It doesn't matter which page layout you are
using here because you can select that later
when importing the template.
However, for a clean visual editing experience,
I would recommend the Elementor Canvas layout.
Now you can go ahead and select the structure
of your section, which is one column in this
case.
The first thing you need to do next is to
set the height of the hero section as 100%
minimum.
To do that, open this drop-down menu, and
choose Min Height, set its value to 100 and
click VH above.
I think you should click VH first and then
adjust the value over here to see the changes.
Ok.
To access these settings anytime, click the
six dots above the section.
Now go to the Style tab, choose the background
type as Slideshow, and upload the images you
want to use.
I've downloaded these images from pixabay.com
so you can go there and download any image
you want, for free.
Once images are uploaded, click the insert
gallery, and move on.
Feel free to play around with these settings
until you get the best look on both mobile
and desktop views.
I think "cover" for the background-size, and
"center center" for the background position,
is perfect, at least in my case.
Now you can go ahead and drag over the heading
element.
Align the text to center, change its color
to white, the font family if you want that,
and so on.
I'll choose this, but you are free to choose
from hundreds of Google fonts in this drop-down.
Set the text weight to 900, type in Elementor,
and that's it.
I will make the text a little bit bigger.
To do that, drag this cursor to the size that
fits perfectly over the background, in the
desktop view.
Duplicate the text element to work faster,
change its content, and some settings in the
style tab and make some adjustments until
everything looks perfect.
For the last line, duplicate the text element
one more time and type in WordPress Website
or whatever you want.
Adjust the settings into the style tab and
then go to the next step, which is to add
the button element.
Drag it over right below the last text line,
choose center alignment over here, replace
the text with "in 2020 and beyond," and move
on.
You can set the link over here, choose the
proper button size in this drop-down, and
add a specific icon to the left or right.
I will use the video icon, but you are free
to choose from hundreds of other icons in
the library.
Click insert once you find the perfect match
and then go-ahead to the Style tab.
Change the text color, make the background
transparent, and set a solid border value
one all around.
The color should be white here too, but the
radius is up to you.
You can make the corners as curved as you
want.
My favorite value here is 3.
Then you can add a slight shadow to the button
and change the hover settings too.
As a finishing touch, add a top margin of
100 pixels to the button element, adjust the
sizes of the text elements and add some margins
here too, then you are done.
That's it.
If I click on preview over here, we can notice
that there is only one thing left to do.
Two, actually.
I need to enable the zooming effect and the
text overlay.
To do that, go back to the style settings
of the section and enable the Ken Burns effect
over here.
Now the image is zooming in slightly for each
slide, as you can see in the preview, and
the Elementor text will blend with the background
nicely once you select the Overlay option
in this dropdown.
Looks fabulous.
Use what you've just learned for a memorable
hero section on your website or for your clients.
Now, it's time to save it as a section template.
To do that, click on the tiny arrow near the
update button and choose save as a template.
This will actually save your work as a page
template.
To save it as a section template, right-click
on the six dots above and choose Save as Template
in the menu.
You can export that template as well and use
it any time you create a new website with
WordPress and Elementor.
Here is how you can use it on a new page,
for example.
Go ahead and exit to the dashboard, then hover
over the New element on your top bar, and
click on Page.
Name it as Landing Page or Home, click Save
Draft or publish it, then push the big blue
button Edit with Elementor.
Once the editor interface is loaded, choose
the page layout as Elementor Canvas or Elementor
Full width, depending on what kind of page
you want to create.
I use and recommend the Elementor Canvas for
any Landing Page and the Elementor Full Width
for pages where you need to display the default
header and footer of WordPress.
For this particular page, I'll choose Elementor
Canvas and insert the saved template over
here, which you can find in the My Templates
tab.
It will be the Hero Section template, so click
on Insert over here, choose Yes to import
document settings as well, and wait for the
results.
It looks like the page template went back
to default, so go ahead and select the proper
layout over here, and you are done.
Tha's it.
