In this tutorial, we’ll be building a stylish landing page with Elementor.
Made 100% in Elementor, in this A to Z tutorial you’ll learn:
* Creating a page
* Building a WordPress menu
* Using sections and columns
* Adding widgets
* Build a complete landing page!
hi everyone welcome to our guide
this is SAR from element or in this
guide I’m going to show you how to build
and design a landing page in WordPress
using Elementor let’s start with a quick
overview of the landing page we’ll be
building today
the first area takes most of our screen
space it’s made out of a headline some
text and a call-to-action button that
will lead the user to our form just
below the section we see a navigation
menu that helps the site visitor to
quickly navigate to any part of our
landing page next we have in About
section that has some text just below it
see the features area with a big image
on the left I’ve also designed the
gallery with some images text socials
and the video background I’ll talk about
it later in the video in the bottom of
the page we have a form for the site
visitor to fill out and that’s it let’s
start this is the wordpress dashboard
let’s go to pages and click on add new
page
we’ll give the page a name and click on
edit with Elementor this is how the
default page looks like so first thing
we’ll do is go to settings page layout
and choose element or canvas this gives
us a clean page without the header
footer or the sidebar that’s a good
option to go with when building a
landing page just a few things before we
start let’s change the default fonts and
colors of a website we’ll click this
hamburger menu here we have a color
palette default fonts and color picker
settings we’ll set the color like so
primary is white secondary and text
black
fons I’ve set up my primary and
secondary headline fonts to this Adobe
font but you can set your own font as
you wish with the color picker will set
up our colors so we can access them
quickly while building our page the
first area we’ll add will be a section
with one column
we’ll set its height with mean height of
90 VH which means in 90% of the screen
height we’ll head over to the style tab
let’s set the background color to blue
background overlay gives us the option
to set another layer on top this time
we’ll set an image overlay that’s at the
image to the middle position Center
center repeat no-repeat so that the
image will not repeat itself size
contain and opacity
let’s move the slider to 1 blend modes
is a new option in Elementor 2.1 what it
does is mix the overlay with a
background color so let’s choose
multiply or darken and check out how
this affects the image now let’s add our
headline and change the text alignment
Center we’ll head over to style
typography and let’s make our text stand
out a bit we’ll increase the size to 120
pixels and let’s add some text shadow a
really light shadow set the vertical to
minus 10 so the shadow will point
towards the top and let’s add some blur
cool we’ll right-click our headline
duplicate and we have another title
let’s change the text next style
typography will increase the text size a
bunch to two hundred maybe even two
hundred and thirty pixels
letter spacing let’s try minus five now
even minus eight nice we’ll head back to
the top headline advanced and let’s add
a minus margin just to the bottom eighty
pixels now add a text editor widget
style text color white typography will
increase the size to 20 pixels and let’s
change the way to 500 now Advanced tab
and this time with percentage we’ll add
margin 25 right
three to the bottom and 25 to the left
one more thing head back to the style
tab and align the text to the center now
we’ll add a button to our page let’s
change the text alignment center size
medium and we’ll add an icon icon
position after and we’ll add some space
between the icon and the text let’s head
to the style tab text color same as the
background and background color white
typography will make the text bigger 25
that’s too much 20 nice border radius
set 250 to make the button round and box
shadow same values as the titles soft
shadow vertical -10 and blur 50
and now we’re done with the first area
the next area will add to our landing
page will be the navigation area let’s
have a section with one column change
its color under the style tab background
type and we can duplicate the column
right-click duplicate or right click add
new column we get a section with three
columns the first column will add an
image we’ll make the image smaller in
style change it to pixels set it to 120
pixels like in content tab align to left
in the second column we’ll add a nav
menu widget because we don’t have a menu
yet we’ll need to edit so click on go to
menu screen and let’s create our menu
so we’re back in the WordPress dashboard
to create our menu let’s give it a name
and click create menu because we want
the menu to be internal within the page
itself and not to direct to other pages
of website we’ll add a custom link let’s
add a hash tag and now write about link
text also about and click Add to menu
let’s add another one features link text
features and add to menu now last one
gallery and in the link text gallery and
add to menu don’t forget to save your
menu now back in Elementor cli
