Build a Landing Page With Elementor Course

hi-oh I’m zve a web designer and lead
educator here at elemental today we’ll
create a professional landing page from
start to finish without touching a
single line of code it will be easy to
follow and most importantly we’ll do it
all with elemental this tutorial will
give you a basic breakdown of elemental
and show you how to design build and
publish landing pages for your own
business or customers just like the one
you see here a landing page is a page on
your site visitors arrive on via some
kind of advertising such as a Facebook
ad or Google search the page is designed
with a specific purpose to convert
visitors into leads by taking a specific
action so let’s see how that translates
to our design the visitor will see the
hero section first so here we need to
grab their attention from the get-go
there’s a video running in the
background and a bold title presenting
the product the button is a clear
call-to-action that is set to scroll
down to the second section when visitors
click on it here they see a selection of
flowers with prices and can directly
call the flower shop to inquire and
place an order by clicking on the button
mostly we have a contact as section with
some texts and social icons to find out
more about the flower shop okay great so
now that we know what we’re going to
build let’s jump in and make a start

to start working with elemental you need
to create your first page so from the
wordpress dashboard and the pages click
add new
and give it an M then click Edit with
elemental to start with a clean page go
to the bottom panel and click the page
Settings icon
and a page layout choose canvas this is
the easiest way to create a full blank
page without a header and a footer
exactly what we need for our landing
page
let’s get familiar with the elemental
interface on the right side is the
editing area of the page this is where
you can add and edit elements that form
the layout of your page on the left side
is the elemental panel here are creative
tools called widgets you use widgets to
add elements to your page like headings
or a text editor images and videos and
much more you can always access this
area by clicking on the widgets icon
here on the top right
on the top left you have a hamburger
menu where you have more options like
setting default colors and fonts which
saves a lot of time when designing your
page I’ve gone ahead and set the
headlines index in text to sindelle with
the weight of 200
the body text asset to Montserrat
with the weight of 300
just don’t forget to apply your changes
back in the hamburger menu you can also
click view page to see your live website
or exit to dashboard to go back to your
WordPress dashboard
at the bottom is another panel with more
key features such as page settings where
you can give the pager name
and choose a page layout like we did
before here is the Navigator which helps
you get a clear and organized view of
your page currently it’s empty because
we haven’t added any content yet we’ll
use it later here we can see our edit
history to view recent changes
and next to it is the responsive menu
for switching between screen modes
we can preview our changes and when
ready to go live simply hit the publish
button
there are others save options as well
which I’ll talk about later okay great
now let’s take a closer look at how
pages are built there are two ways you
can start let’s begin with the library
here you can preview elementals pre-made
blocks and pages as well as your own
templates
and insert them into your page I’ll go
ahead and insert this block so you can
see
elemento uses three main building blocks
sections columns and widgets sections
are the largest and can be identified by
their blue border like you see here
inside them are columns in this case
there’s one you can identify them by the
black dashed border these columns house
widgets such as the texts and batten you
see her you control the section column
and widgets with the handle to edit them
simply right-click the handle where you
can edit duplicate delete and much more
the blue line indicates where it will be
positioned when you let go you can move
them around by simply dragging and
dropping them sections columns and
widgets have three tabs in the panel on
the Left
sections and columns have layout style
and advanced tabs
whereas widgets have content style and
advanced tabs soon we’ll see how these
settings are used to create a landing
page but first I’ll go ahead and delete
this section because we will create our
landing page from scratch
another way to add sections is by
pressing the plus icon over here then
simply choose one of these preset
structures which we can tweak to our
liking on the go so let’s dive in and
start building a landing page
you

in the previous lesson we learned how to
get up and running with elemental in
this lesson we’ll start building our
page I’ll add a section with one column
of 100 VH
this way the section will always take up
at least a hundred percent of the
viewports heart no matter the amount of
content in it I’ll set the content width
to 800 pixels over here and in style we
can give our section a background there
are a couple of types you can open the
media library by clicking on the plus
over here as you can see it’s empty we
can drag in an image file as well as
other media I want a video to play in
the background so I’ll go ahead and drag
in a video file and then I’ll copy this
link over here
now close the library and change the
background type to video we can either
add a YouTube or Vimeo link or simply
paste the link to the video file we just
uploaded to a media library
I’ll go ahead and set it to play on
mobile as well
next I’ll give it a classic background
overlay
you can either use the color picker
or piss the color-code over here I’ll go
for this nice purple color if you want
to reuse this color simply click the
plus icon and it will be added to your
color palette automatically next I’ll
set the opacity to zero point seven and
I’ll darken it a bit by using the blend
mode option okay great
next I’ll drag in a text editor widgets
and change the text
in style our line into the center and
change the color to white
in typography the default font family
montserrat we set before is
automatically applied here I’ll change
the size to 15 pixels weight to 200
and set transform to uppercase I also
set the letter spacing to 7 so it
spreads out nicely
then drag in a heading widgets and
change the text
align it to the sensor as well
and InStyle set the color to white
in topography the fun family’s in zoo we
said before as default is automatically
applied here as well I set the size to
70 pixels and transformed to uppercase
next drag in another text editor widgets
and change the text
before align it to the center and change
the color to white
then set the line height to 2 a.m.
in advanced and link the padding values
so you can set them individually and
change the unit to percentage and give a
20% padding to the left and right okay
great
looking good we’re almost done with our
first section time to drag in the baton
widget
I’ll change the text and align to the
center
here I’ll add a link that sets it to
scroll down to the second section on
this page which we need to build first
so I’ll show you how to do that soon
I’ll set its size to large
and in style topography I’ll set the
transform to uppercase
next I’ll give it this dog text color
and change the background color to white
on hover I’ll change the text color to
white
crank color to this pink red
I’ll save this color so I can reuse it
later let’s add a hover animation as
well I’ll set it to flood
lastly I’ll set the border-radius to
zero so the button becomes a rectangle
let’s check out what we have so far I’ll
go ahead and press preview over here as
you can see the page opens in a new tab
cool
okay gret let’s move on to the second
section I’ll add a section with one
column
and give it a minimum height of 100 VH
in style
I’ll give it this dog background-color
and save it as well now in order to
speed up our design process let’s go
back to our first section and copy this
text editor widget
paste it in the column
and change the text
next I’ll do the same for the heading
back in the first section
I’ll copy it
and paste it over here
then change the text
getting the hang of it let’s do it one
last time with the text editor widget
okay let’s move on
this time I’ll drag in an intersection
widget it comes with two columns by
default
a right-click on the column and select
add new column so there’s three in total
dragon imagebox widgets into the first
column I’ll click here to enter the
media library
and simply drag my flower images onto it
to upload them
I’ll choose this image first
next I’ll change the title and
description
and in style our set the spacing to zero
and with to a hundred percent
in the content drop-down align the text
to left
for the title set the spacing to 2
to white
in typography change the font family to
Montserrat
size to 18 pixels and set it to
transform to uppercase as well
for the description set the color to
white
and drag down the opacity of it
set the size to 16 pixels
and give it a weight of 200
now let’s duplicate this widget and drag
it into the other columns
I’ll go ahead and change their images
texts and descriptions
so we end up with three types of flowers
with price tags
okay great now let’s copy this text
editor widget
then paste it under the flowers
and in advanced add 10% padding on the
top to create some space
next copy the button from the first
section
paste it and change the text in the link
field I’ll add a tell scheme like sir
this will trigger a phone call when
clicking on the button in a webpage and
on a mobile phone
back in the section settings
in advanced
I’ll unlink the padding and add 200
pixels to the top and bottom
now it’s time to set the button in the
first section to scroll to this section
I’ll go ahead and type a CSS ID over
here for the section and copy it then
back in the buttons link field in the
first column
paste the ID after the panky
and that’s it now when your visitors
the button they’ll be taken to the
second section automatically cool
okay great let’s move on to the third
and final section I’ll go ahead and copy
the first section
and paste it at the bottom of the page
I’ll change the min height 250 VH
and set the background type to classic
for now I’ll leave the purple background
overlay so we can see the texts I’ll
remove it later so we end up with a
clean white background
but first I’ll delete these widgets so
we’re left with the text editor widget
over here
then I’ll change the text
and set its color
now let’s duplicate the widget and
change the text as well
in style I changed the size to sixty
pixels and give it a bold weight of 600
then remove the letter spacing and drag
the line heights all the way down
next duplicate the first text again and
drag it under the phone number
here I’ll add the flower shops address
and Dragon as social icons widget over
here
add an item
and choose the Instagram icon from the
library
then add all of the social links
accordingly
I’ll go ahead and change the shape to
square and in style give it a custom
color
and set its size to 25 padding to 0.7
and spacing to 12 an icon haver I’ll set
the color to change to the pink red we
set before
I’ll add the float haver animation here
as well
and in advanced I’ll unlink the padding
and add 40 pixels padding to the top
okay great now back in the section
settings in style let’s remove the
purple background overlay so we end up
with a clean white background cool we’re
almost ready
you

we are done creating our page but many
potential customers will land on it via
their smartphones or tablets so let’s
see how we can tweak it for mobile
hadn’t entered the mobile responsive
mode and tweak it a bit
I’ll open the navigator as well so we
get a clear overview of all our sections
I’ll double-click the first section in
the navigator and name it here a section
when clicking on the error we can see
that it contains one column and clicking
again reveals all the widgets in it I’ll
select the heading
and change the size to 45 pixels as you
can see there are responsive handles
indicating the screen sizes you’re
editing for the 45 pixels will be
applied to mobiles only
next I’ll select the text editor widgets
and in advanced and link the padding
values and change the left and right to
ten percent each
again these values are mobile-specific
let’s move on to the second section
I’ll limit flower section
in the advanced tab our first unlink the
padding values and then give it some top
and bottom padding to create some space
next
select the our flowers heading
and change its size 245 pixels then
click the text editor widgets
in advanced and link the padding values
and change the left and right to ten
percent each
I also add 10% padding to the top of the
text editor widget above the button over
here
okay great lastly let’s tweak the third
section for mobile as well in the
navigator I’ll name it contact section
I’ll change the phone number size to 35
pixels
and in the section settings under
advanced
unlink the padding and add 80 pixels to
the top and bottom
there are some other responsive settings
you can try out here as well such as
reversing columns for mobile and tablet
I’ll go ahead and add a new column so
you can see how it works
I’ll drag an image widget into it
and choose this nice flower
now back in the sections Advanced
Settings
and a responsive if I reverse the
columns for mobile the image will show
first
we can also hide entire sections as well
as columns
and this can be done for all responsive
modes like you see here
I’ll go ahead and delete this column
since we won’t be needing it for our
landing page
another cool way to tweak your designs
for mobile is by using the column width
feature I’ll go back to the flowers
section
and click on the first column in the
intersection
then and the layout set a custom column
width I’ll go for 50% so it takes up
half of the width I’ll do the same for
the second column
as you can see we can fully control this
for mobile tablets and desktop I’ll go
ahead and delete the values so they’re
back to what I had before
you

we are done let’s publish and check out
a final result
cool
we can also save this page as a template
and reuse it to easily create multiple
landing pages on the fly
simply give the template a name and next
time when you create a new page and
enter the library you’ll see it under my
templates
and if you’d like to save this contact
section for example you can do that too
simply right-click on the handle and
choose save as template like before
well that’s it now you know how to
create a professional landing page from
start to finish without touching a
single line of code I hope you enjoyed
this tutorial and feel confident in
using Elementor to design build and
publish landing pages for your own
business or customers ciao for now