Welcome to the Elementor Pro Basics Webinar. This Webinar will give you a basic breakdown of Elementor Pro and show you how to use it to design, build and publish your own Pro Landing Pages!
we go hi and welcome to this elemental
probe basics webinar my name is Eve and
I’m a web designer and lead educator
here at elemental and I’m really excited
to help you use the Internet’s leading
WordPress drag-and-drop site builder
elemental and what we’re going to be
doing during this webinar it’s I’m going
to be giving you a breakdown of some of
elemental pros abilities by showing you
how we used it to design a landing page
for this very webinar so these skills
they can also be applied to create
attractive landing pages for your own
business help convert potential
customers could be hospitality industry
restaurants software is a service
companies gyms ecommerce and a lot more
so let me just show you what we’re going
to be building I’ll go ahead and share
my page over here there we go okay so
this is the landing page we’re gonna be
building okay so what exactly is a
landing page right so basically a
landing page is a page on your site
where visitors arrive on via some kind
of advertising it could be a Facebook ad
it could be a Google search and the page
itself is designed with a specific
purpose to convert visitors into leads
by taking a specific action with call to
actions and in our example the purpose
of the page is to convince the visitor
to save a seat for this amazing webinar
so as you can see there’s CTA s this
call to actions over here
and when we scroll down and the here is
section a we stretch where you can see
also the next title over here the
takeaways you’ll get from attending the
webinar and you know basically
Elementary is really a great tool to
create landing pages what it is is an
advanced page builder it allows you to
build entire websites page by page with
your own custom design its drag-and-drop
meaning that you work directly on the
page you can see the results in real
time exactly the way that your website
visitors
would there’s also very many advantages
in using elemental Pro such as saving a
lot of time and development costs
because elemental Pro provides provides
you with 50 plus pro widgets 300 plus
pro templates and counting it helps you
design and build faster without using
code there’s also a lot of features you
can use to help boost your landing page
conversions with a lot of marketing and
conversion widgets such as the visual
form builder which we’re going to be
using today during the webinar and also
powerful animations that can bring your
site to life as you can see over here
there’s a subtle there’s a subtle
animation over here this motion effects
going on which we are also use today
there’s also a design oriented pop-up
builder that can be integrated with with
your favorite marketing tools and
there’s a lot more so I’ll stop babbling
and also if you have got any questions
feel free to ask in the chat we’re going
to be trying to answer them and I’m
going to be pausing every now and then
to take some questions to answer some
questions so let’s dive in so to start
work with elemental we need to create
our first page so I’ll just go to our
dashboard over here and in pages I’ll
just go ahead and click add new and what
I’ll do is I’ll give my page a name and
I’ll click edit with elemental okay now
to start with a clean page what we going
to be doing is we’re going to go to the
bottom panel on the left in page
settings and we’re going to be going to
page layout and simply choose elemental
canvas so this is the easiest way to
create a full blank page without a
header and a footer which basically is
exactly what we need for our landing
page okay so let’s get familiar with the
elemental interface so on the right side
is the editing area this is where you
can add and edit elements that form the
layout of the page and on the left side
we have the elemental panel so I’ll
press I’ll press the widgets icon over
here these are creative tools these are
widgets basically the elements that you
to your page like headings paragraphs
images videos and a lot more and you can
always access this area by clicking in
the right top corner over here the
widgets icon and over here we’ve got
global okay so with this feature you can
save a widget as global and then add it
to multiple areas so all the areas there
will be added to both will be editable
from one single place and I’m going to
show you how to use that for the form
widget which we’re going to be creating
in a bit then we can go over to the
hamburger menu on the left and what we
have over here is we’ve got more options
like global default global default
colors and fonts and also you can click
over here to view your page and exit to
dashboard if you want to go back to your
WordPress dashboard at the bottom we
have another panel with more key
features just like we saw before we can
enter the page settings over here you
can choose the layout over here’s the
Navigator to get a clear overview of of
the page which currently is empty
because we haven’t built anything so
I’ll go ahead and close it over here we
have the history with to view the recent
changes and we have the responsive menu
here for switching between screen modes
got mobile tablet and desktop over here
and over here we can preview the page
before we save them and when we’re ready
to publish we’ll just publish and there
are some other save options as well
which we’ll go over we will go over soon
so let’s take a closer look at how pages
are built okay so there’s two ways we
can start I’ll go ahead and start with
entering the library so here you can
preview elementals premades blocks and
pages you can preview like so you can go
back to the library one of the template
kits are here as well
you’ll save templates which we’ll use
later as well there also over here and
here the blocks so I’ll just go ahead
and insert a block so you can see there
we go preview it go ahead and insert it
to our page
and let’s just check out what we have
okay so elemental basically uses three
main building blocks sections columns
and widgets sections they’re the largest
and you can identify them by the blue
border like you see over here inside
sections we have the columns and you can
identify them by the black dashed border
and inside the columns we’ve got the
widgets okay so we got the heading over
here here we’ve got the countdown
widgets and you can control the section
column and widgets with their handle
okay so if you’d like to edit the
section you can just right click over
here
you can duplicate it so now you have two
sections I can just simply delete it as
well I can also go ahead and add a new
column like so and the widgets here I’ll
just simply drag it okay if you want to
position it you can just drag and drop
where the blue line where you see the
blue line that’s where where it’s
indicates where it’s going to be
positioned so I can just really move it
around and that the column of a hack and
drag as well to really play with the
layout so there’s a lot of things I can
do with with the sections the columns
and the widgets with their settings over
here which we’ll be using when we’re
building our landing page so let’s just
check out some settings that we have as
well the sections columns and widgets
have three tabs in the panel on the left
the sections and the columns they have a
layout style and Advanced tab and
widgets they have the content style and
Advanced tab and soon we go soon we’re
going to see exactly how these settings
are used to create our landing page but
first I’m gonna be deleting this and
let’s just go over the other way to add
sections and to create your page is by
simply pressing plus over here and you
can simply choose one of these presets
structures so you can tweak them on the
go as well as you can see we’ve got a
section with two equal columns a section
with three equal columns a section with
two columns where the the right column
is larger than the left column etc okay
so let’s dive in and start building our
landing
okay so first of all before I start
building the section I just want to set
up some page settings over here so I’ll
go to the page settings and I’ll go to
style and give it a background color
okay now the reason why I’m setting this
in the page it’s sad enough to set this
background color at every section
because our design the background is all
the same so I’ll go ahead and choose
background type and I’ll choose color
and I’ll give it this gray background
okay great now another way to speed up
my design process is I’m going to set
default fonts okay so as you can see
here default fonts I’ve set them to
Roberta and soon you’ll see exactly how
that helps me out okay great so first of
all let’s have a look at the first
section that we’re going to be building
as you can see there’s two columns over
here as a logo there’s some text and the
call to action when we press the call to
action we scroll down to the third
section and here’s a nice interaction
with some custom positioned images and
motion effects which we’ll see exactly
how we do it also what we can see over
here is we can already see the title of
the second section which draws the
attention to want to scroll down and
really read what the takeaways are so
I’ll show you exactly how this is built
first of all I’m going to be adding a
section with two columns okay and I’m
going to control the height okay so I’m
gonna go to in layouts I’m gonna go to
height and I’m gonna set min height and
a min height means that no matter the
amount of content inside the section it
will be at least a certain height in
this case the default is 400 pixels and
I can increase that over here but I’m
gonna be using a relative unit
v H which stands for view Heights which
in is in relationship to the viewports
height so 100 VH is basically a hundred
percent of the viewports height as you
can see the top part of the section the
blue line and the bottom at X exactly
hundred percent of the viewport height
if I set it to 50 it takes up exactly
half and what I’m gonna be doing is I’m
gonna be setting it to 80 and the reason
that I’m do
that is the moment that I build the
second section you already start see
there you’ll see the title and that’s
exactly what we’re looking for this is
the title that we’re going to be that’s
going to be viewable basically when you
first land on the page already okay so
let’s let’s go to style so I’m gonna I’m
in this section I’m going to style and
I’m gonna be choosing a background I’ll
set the background to classic and I’ll
choose an image okay so I’ve got an
image and I’ll choose I’ll choose the
white quarter circle let’s see this one
over here and I’ll just simply insert it
and the first thing that I’ll do over
here is I’ll just set it to no-repeat so
just appears once and I’ll position it
in the top center okay that’s great
now what I’ll do is I’ll enter my
widgets my widget settings over here and
what I’ll do is I’ll just drag in an
image widget into the left column okay
so you can see the blue line indicates
where it’s going to be positioned and
I’ll go ahead and choose choose the
image I’m gonna be choosing the the
element or logo so I’ll just go over
here and choose elemental that’s the
logo I’ll just make sure that the image
size is set to full and I’ll align it to
the left I’ll align it to the left as
well now what I’ll do is I’ll go to
style and I’ll change its size so I’ll
basically they’ll do that with the width
I set it to 25% and and a cool trick
basically if you’ve got a color a logo
that you want to change and you know you
don’t want to like create a new logo and
export it and and upload it etc you can
use CSS filters so I want to change this
red logo I want to change it to Doc
wanna change it to black so I simply
just drag the brightness all the way
down so that will save me some time over
here
the next thing that I’ll do is I’ll drag
in the icon list okay I’ll just search
for it in the search bar and icon list
I’ll go ahead and drag it over here and
only going to be needing one item so
I’ll just delete these two items over
here and I’ll just click on it and I’ll
change the text I’ll change the text to
webinar February 20 I care that’s today
there we go cool now what we’re going to
be doing is uploading we’re going to be
using SVG as the icon of a so I’ll go
ahead and press upload SVG I’ve already
uploaded some SVG is over here so I’m
gonna be choosing this live icon and
I’ll just insert it and I’m going to
change the size so I’ll go to style and
icon and I’ll just increase the size
over here increase it to 60 that’s cool
and in the text drop-down out our style
it a bit so I’ll change the color to
black and I’ll increase the indent over
here between the icon and the text I’ll
increase it that’s cool next let’s go to
typography and over here as you can see
the font family is set to default like I
mentioned before in in the default
calories and fonts over here this is the
Roberto right the Roberto that I said
before it’s automatically applied which
means that it will save me some time as
well and then it is selected I’ll just
set the size to 22 pixels and I’ll
change the weight to 500 just a little
bit bolder and the next thing that I’ll
dragging over here is a heading widget
there we go
and I’ll go ahead and add my text over
here this is gonna be the create your
first landing page with elemental pro so
I just go ahead and add that and as you
can see I added brake lines over here
basically I used them too to make sure
that the text will always appear under
each other so that’s why I use that now
let’s start it a bit so I’ll go to style
and I’ll change the text color to black
and in
POG Rafi also the default font family
over here is Roberto I’ll just change
the size to 70 70 pixels and I’ll set
the decoration over here to underline
and I’ll play around with the line
height
okay so I’ll change the unit to pixels
and as you can see I can control the
line height over here and I’m going to
increase it a bit to here and the letter
spacing I can control that as well so
I’ll bring them a little bit closer to
each other I drag that to negative 4
that’s cool okay great so now we’re
ready to drag in our call to action the
baton widget so I’ll go ahead and drag
in the batting widget over here and I’ll
just change the text to save my seat
there we go and over here for the link
what we’re going to be doing is we’re
going to be setting the link to
automatically scroll down to the 3rd
section which contains the form which we
haven’t created yet so I’ll show you
exactly how to do that a little bit
later next let’s star the button so in
style
I’ll go to typography over here I’ll
change it to Montserrat and the size
I’ll change to 16 I change the weight as
well and I’ll set the transform to
uppercase that really stands out so it’s
good to do that for 4 buttons and I’ll
play around with the letter spacing as
well I’ll make it stretch out a little
bit I set it to two
okay that’s cool now let’s change the
background color okay I’m gonna give it
this pink red I’ll give it a pink red
background color so I’ll just go ahead
and choose background color and I’ll
paste my color code over here and I want
to save this colors to use it later on
so in my color picker I’ll just add
picked color which is really cool for
when I get rid of it I can justly drag
and delete it and if I want to
reorganize and reorder my colors I can
do that as well which is really cool
okay so let’s carry on I’m going
be adding a border radius I’m going to
set it to 50 pixels all around so to
become a pill shaped and next what I’ll
do is I’ll give some custom padding
values okay so in order to do that first
of all I’ll unlink all of the defaults
padding values and I’ll set them
individually so I’ll give it 20 pixels
on top and 20 on the bottom and I’ll
give it 35 pixels on the left and on the
right as well so it’s just a little bit
bigger now what I want to do is I want
to set some have a have a color as well
I want I want the button to change to a
green color so on hover I’ll change the
background color I’ll go ahead and paste
that over here as you can see it changes
to green when I hover over it and I’ll
also add a hover animation I’ll set it
to grow which really makes the button
pop out which is that’s really cool okay
great now what I’ll do is I’ll create
some space between this the text over
here and the button in order to do that
I’ll go to advanced okay so this we’re
still in the the button widget I’ll go
to advanced and I’ll give it some
padding so unlink the padding values and
what I’ll do is instead of pixels I’m
gonna be using a relative units I’ll use
percentage and I’ll just add the padding
on top I’ll just give it five percent
like so okay great
so now we’ve done with the left side of
the left column okay
what I’m going to be doing now is I want
the elemental logo I wanted to I wanted
to come out of the column basically to
lift it up as you can see over here it
appears a little bit more above so what
we’re going to be doing over here is
we’re going to be adding a negative
margin okay it’s just something that
I’ll show you how to do we’ll go to
advanced and what I’m going to be doing
is I’ll unlink the margin value and on
top over here I’ll give it a negative a
negative value as you can see it moves
out of the column and I’ll set it to
negative 100 negative 100 pixels okay
great so now we’re ready to move on to
the right column what I’ll do is I’ll
drag in an image widget okay now make
sure that the size is set to full and
I’m going to be adding this cool image
over here go ahead and insert it and
next what I’ll do is I’ll drag in a
heading widget
I’ll drag it in over here and I’ll
change the text to my name there we go
and let’s start it a bit so I got a
style I’ll change the text color to
black and in typography I’ll set this to
montserrat I’ll set it to 20 pixels and
I’ll change the weights as well there we
go and now in order to position it
exactly where we like you know I wanted
to appear closer to the image what I’m
going to be doing is I’m gonna be going
to advanced as well and I’ll unlink the
padding values over here I’ll change the
unit to percentage and what I’ll do is
I’m going to be giving a 25 percentage
on the left over here okay so as you can
see when I increase the left padding it
moves towards the right so all of this
is padding and I set it to 25% so that’s
great
now I’ll go ahead and simply duplicate
the heading and I’ll change the text
there we go and I’m gonna change the
color of you I’m gonna change it to gray
so it blends in there nicely
I’ll choose style go ahead and paste my
color cut over here for gray in
topography I’ll go ahead and change the
weight I want it to be a little bit
thinner like so that’s great
and I wanted to move up a little bit
towards the first heading so again in
order to move it closer I’m gonna be
unlinking the margin value in the
Advanced tab over here and I’ll change
the unit to percentage as well and I’ll
give it a negative 2% as you can see it
move towards the first the first heading
okay great so let’s just check out the
first section what we have so far
or we all you are missing right now is
is the custom position the images over
here which we’re going to be doing right
now okay now for the shapes so let’s
first of all drag in an image widget
I’ll go ahead and drag an image widget
over here and I’ll choose the big black
semicircle there we go
I’ll insert it and I’ll just duplicate
and I’ll choose I’ll choose the red
square with the black semicircle now
insert that one over here and now in
order to position them next to each
other what we can do is we can use the
positioning option in advanced okay so
custom positioning is not considered
best practice for responsive web design
so it shouldn’t be used to frequently
but for this for this design it’s a very
good way to to use this so what we’ll do
is I’ll select the first image over here
and I’ll just go to advanced in
positioning over here we’ve got width so
I’ll just change it to inline and I’ll
select the second one and go to advanced
positioning
and change the width to in line as well
and we can position them even more
accurately by setting the position to
absolute so I’ll go ahead and select
this image over here and as you can see
over here we’ve got position our options
and I’ll set it to absolute and as you
can see the second image jumped to the
left okay so this is because the moment
that I set the black semicircle to
absolute it basically was removed from
the flow of elements on the page so I’ll
go ahead and select the second image and
I’ll set its position to absolute as
well and as you can see now both they’re
all they’re both removed from the flow
of elements on the page so we can play
with them and we can position them so
they look great so I want the the square
semicircle image I wanted to pick to
appear in the top right corner and the
black semi semi circle on the left so
I’ll start with the square and semi
circle so I’ll go ahead and select that
and what I’ll do is I’ll go to the
horizontal orientation okay and I’ll
just set the horizontal orientation to
right okay and I’ll leave the vertical
orientation to top because I wanted to
appear at the top and next I’ll just
play around with the offset over here so
I can position them what I’ll do is I’ll
change the unit to percentage so it’s a
relative unit which is a better way to
design for for mobile responsive it’s
basically it’s a relative to to the
column that it’s in which is going to be
help which will help us make it more
responsive when we make edits for mobile
and tablets so what I’ll do is I’ll go
ahead and drag this as you can see it
moves towards the left I’ll position it
over there like so and I’ll change this
value also to the unit also to
percentage and I’ll go ahead and drag
this up a bit okay that’s great next for
the black for the black shape over here
I’ll just leave it at top left
horizontal and vertical orientation and
I’ll just change the units to percentage
and I’ll go ahead and position them by
dragging this offset sliders over here a
little bit up okay that’s great so
another way to move them around is to
just you can drag them as well as you
can see over here and in order to get it
to the original it back to the original
position you can just simply set the
offset values to zero okay so when
playing around with these advanced
settings you sometimes might get
confused if an image might have
disappeared but most likely its
positioned outside the page simply set
the values to zero again just like I did
and are you good to go there’s also a
great tutorial that I made that explains
how absolute positioning works and how
to use it when you’re designing your
page so you’ll get a link to that
lecture as well okay great so I’ll just
go ahead and set these values back that
I had before this was nine and let’s see
there we go and now let’s bring the the
let’s bring these images to life with
some motion effects so I’ll select the
top left image over here and in advanced
we’ve got a motion effects drop-down
okay and I’ll choose mouse effects so
I’ll switch the mouse effects on and
I’ll choose Mouse track and it by
default it’s set to opposite okay so
basically when I start moving my mouse
basically it moves towards the opposite
direction so I’m moving over here you
can see the image moves against me over
here so I’ll do that but I’ll change the
the motion I’ll change it to a little
bit more subtle by controlling it the
speed so I’ll just drag it down a bit as
you can see it’s it’s more subtle which
is cool now let’s do the same with the
image on the right
I go to motion effects okay and I’ll
switch on the mouse effects Mouse track
and for this for this one I’m going to
be setting the direction to
direct okay and I’ll also make it subtle
I set it to 0.1 okay so now there’s this
playful interaction between the two
which is great now in order to save some
time what I’ll be doing is I’ll simply
duplicate both duplicate duplicate okay
so so we’ve got another two and I’ll
just change this one over here to the to
the white to the white semicircle in the
red circle
okay I’ll insert that and I’ll go to
advanced and now what I’ll do is I’ll go
to positioning and I’m going to position
it to the bottom left okay so I’ve got a
positioning over here and I’ll go ahead
and set the vertical orientation to
bottom and I’ll leave the horizontal
orientation to left and what I’ll do is
I’ll change the units to percentage and
I’ll give them the value that I want for
them to be positioned exactly where I
want now let’s go over to the fourth and
final image over here and we’ll also
change it I’ll change it to the white
triangle and this red quarter circle
I’ll go ahead and insert that and of
course we’re gonna be positioned this
this at the bottom right so I’ll go to
advanced and I’ll go to positioning and
over here I’ll go ahead and set this the
vertical orientation to bottom make sure
that the values are percentage and I’ll
go ahead and set these values to
position it exactly where I want okay so
now that we’ve got this going I’m going
to just make a slight change a slight
adjustment for the motion effects to
just make it even more playful I’ve got
a motion effects and over here I’ll just
choose mouse track I’ll set this to
rekt and the one on the right I got a
motion effects and change this to
opposite so now there’s a really playful
interaction over here so really looks
cool um okay so there’s a lot of things
that you can do with motion effects we
just I just applied a mouse track over
here there’s so much more scrolling
scrolling effects etc so I also send you
a link to another tutorial that really
covers all of the motion effects options
you really get a basic understanding of
how it works and how you can use it to
really liven up your pages for example
you can use it on a restaurant website
you could add some custom position menu
items with some motion effects that
could be an idea okay great so we
finished with our first section let’s
just see if we have some questions over
here let’s have a look okay so Laura
bortles she said is a landing page the
same as the home page okay so now a
landing page that’s got a specific goal
to to convert visitors to convert them
into to actual users and the home page
basically is the hub for a website with
all internal links leading to about page
contact us page and there’s all
different types of websites of course
but the main difference is that a
landing page is geared toward converting
visitors just like our webinar landing
page to make sure that you can join this
really cool webinar okay let’s see
Alejandra Carolina and what size and
format do I have to use before applying
to my website that really depends on
your design sometimes in Photoshop you
can you know slice it and export it in
very specific dimensions to make it fit
your design a better on elemental so it
really depends and there’s a lot of
online tools you can use to as
well to help you out with that Chris
Kettler says I think negative margins
are bad is that correct or not
also is it just part of elemental to get
used to using negative margins first of
all they’re not bad sometimes it’s
better to use them compared to using
absolute position so you might get
confused with absolute using absolute
positions so I I just recommend you to
use it responsibly basically so I hope
that that answers some questions let’s
move on to our second section ok let’s
first check it out
ok so this is the six takeaways you’ll
get from attending a webinar where we
have all of the six takeaways listed
over here with icons and their text ok
so let’s go ahead and I’m just going to
be adding a new section with one column
ok and I’m going to control its height
I’m going to set a min height of 60 VH
this time okay 60 VH so it takes up 60%
of the viewport size and what I’ll do is
I’ll set a background image so in style
I got a background type classic and I’ll
go ahead and choose the image over here
I choose this white circle and I’ll
insert it with all of these shapes first
of all set to repeat you know repeats
that appears once and now position it
okay so I’m going to choose position and
I’ll set it to top center so now it’s
position in the top and in the center
and next what I’ll do is I’ll just drag
in a heading widget like sir and I’ll
change the text this is going to be the
six takeaways text so I’ll go ahead and
add the text over here as you can see I
used a break line as well to make sure
that from attending the webinar will
always appear under six takeaways you’ll
get next what I’ll do is I’ll go ahead
and
to the center and in style I’ll change
the color to black and in typography
I’ll change this to Montserrat
I’ll set the size to 50 pixels and I’ll
control the line height over here I’ll
change the unit to pixels and I’ll
control it set it to 60 okay great and
now what I’m going to be doing is I’m
going to be adding some padding on the
bottom of they have for the next element
that we’re gonna be adding so I’ll just
go to the headings Advanced tab and I’ll
just unlink the padding I’ll change it
to percentage like we did before and in
bottom as you can see it creates some
padding over there I’ll just add like 4%
great so now let’s just check out the
page over here right so we’ve got a
heading and we’ve got another kind of
like part or like section with three
columns basically inside it okay so
we’ve got one main section with a
heading and then we’ve got another like
in a section over here with another
three columns and another three columns
okay so how are we going to be doing
that is we’re going to be using a widget
called the intersection widget okay so
I’ll just go ahead and show you how to
to use it I’ll just drag it in as you
can see it appears inside okay and over
here we’ve got two columns and we need
three columns so I’ll just simply right
click to enter the column settings and
choose add new column okay so now we’ve
got an intersection with three columns
and what are we going to be dragging in
these columns our icon box widgets okay
so icon box which is where we gonna be
adding the icon and the text that’s what
we need so I’ll go to widgets over here
and I’ll go ahead and search for icon
box and I’ll drag in the icon box as you
can see I’ve got an icon with a heading
over here and the description now for
the first icon what I’m going to be
doing is I’m going to be
using when I have her over here and I’m
gonna choose upload SVG I’ve pre-made
some SVG’s over here and I’m gonna be
choosing let’s have a look for the first
one I’ll choose this icon and I’ll
insert it and I’m going to be changing
the text this is going to be the create
your first live page in WordPress with
Elementor and what I’m gonna be doing is
I’m just going to delete the title
because we don’t need the title I just
want some basic text over here so there
we go that’s our text and let’s go style
it a bit I go to style and in the icon
drop-down I’ll just I’ll change the size
she can second control the size over
here I’ll just set this to 60 bring it
down one that’s great and in the content
drop-down what I’ll do is I’ll change
the color of the description okay so I
deleted the title we don’t have to style
that there’s any description left and
what I’ll do is I’ll just change that to
black and in typography I’ll change this
to montserrat and I’ll set its size to
box widget that I like to speed up the
process what I’ll do is I’ll just
right-click the widget copy and paste it
into the right column and I’ll do the
same thing I already copied it so I’ll
just go ahead and paste it again so now
we have it appear in our base appears
three times okay and also because I
wanted to eventually appear six times
what I’ll simply do is I’ll just
right-click the intersection and I’ll
duplicate that as well okay so we’ve got
two intersections each intersection has
three columns and inside each column we
have in icon widgets okay so this really
sped up the process all we need to do
now is change all of the text and the
images so I’ll start with the second one
just choose the second one over here and
I’ll go ahead and change the text and
I’ll also change the icon now let’s go
to the third one find out about how to
use widgets to build pages faster go
ahead and change the icon here as well
for the fourth one learn how to design
stunning landing pages without code as
you can see what we’re doing now there
we go and I’ll change I’ll change this
to this icon now the fifth one go ahead
and change the text change the icon and
the last one preview and publish your
pages to a live website and that’s the
last icon over here okay cool so now in
order to create a little bit of space
between these two intersections I’m
going to be adding some some padding
okay I’m gonna be adding padding to the
first intersection so they’ll create
some space over here so I’ll select the
first intersection to enter it settings
and I’ll go to advanced and in padding
over here what I’ll do is actually now
I’m gonna use a margin okay what I’m
going to be doing is a margin because we
want the space to to occur outside the
section okay the padding is inside the
section of modules outside so I unlink
that and I’ll change it to percentage
and I’ll add it to the bottom as you can
see it creates some space in between
over here that’s the margin and that’s
great okay so now what I’m going to be
doing is I want
I want these the the intersections I
want them all to come a little bit
together so what I’ll do is I’ll go back
to the main section okay I’ll go to the
the main section over here and I’m gonna
add some padding all around so they so
all of the the content inside they move
towards each other just a little bit to
make it position a little bit better so
I’ll go to advanced and I’ll go to
padding and I’ve changed it to
percentage as well and I’ll just give it
three percent all around so that’s
that’s exactly what I was looking for
and that’s that’s the second section
okay so we’re moving along nicely over
here let’s see if there are any other
questions okay okay so we’ve got Robert
Ruth
when you’re duplicating elements with
motion effects settings applied there’s
the duplication take the motion settings
as well yes it does
we just did that I’m sorry if it wasn’t
clear at the moment that you duplicate a
widget all of the settings that you
applied to the widget they’re
automatically duplicated that gets
exactly the same and this is why after I
duplicated it I actually changed the
motion effects as well you could see I
change the direction so yes I hope that
answers the question okay great so let’s
move on to our third and final section
let’s first check it out okay so this is
this is the section where we’ve got a
form widget we’re going to be styling it
using the form builder and we’ve got a
title over here and also the the button
in the first section when you click it
will automatically bring us to this
third section so let’s start building
this third section great so what I’m
going to be doing is I’m going to be
adding a section with two columns okay
and I’m gonna give it a min height
of 70 VH and I’m gonna give it a
background image in style
I’ll choose background type and I’ll
choose image over here and we’ll choose
this little red square go ahead and set
the repeat to no repeats that appears
once and I’m gonna position it to the
center on the right like so now it
appears on the right and just to save
some time what I’m going to be doing is
I’m just going to go up to the first
section I’m gonna be copying with the
big heading and simply pasting it over
here and what I’ll do as well is I’ll
just copy the icon list widget and I’ll
paste it here as well just to save some
time and now change the text the text
over here is going to be the savior seat
so I’ll select the heading and I’ll go
ahead and change the text now we need to
style it a bit so in style and
typography I’ll make it bigger I’ll
change it to 120 pixels let’s remove the
underline in decoration or set it back
to default and in line height we’ll
create a little bit more space over here
so I’ll increase that like so and that’s
great now let’s create some space in
between these two widgets so what I’ll
do is I’ll go to advanced okay so I’m in
the heading widget I’m going to advanced
and I’ll unlink the padding I’ll change
it to percentage and on the bottom I’ll
give it I’ll just increase it like so
just to create some padding over here
great now now what I’ll do is I’ll
basically our position the widgets in
this column on the left a little bit
towards the the left okay so I’ll create
some space on the right by using a
padding in the column okay so in order
to do that I’ll get to go to the column
settings over here and in advanced I’ll
go ahead and unlink the padding I’ll
change it to percentage as well and all
I’ll do is I’ll just give
fifteen percent on the top as you can
see 15 on the top and I’ll give it 15
percent on the right I guess I’ve got 15
percent on the top and 15 on the right
so now all the text is positioned
towards the left which is exactly what I
was looking for and now we are ready now
we are ready to to drag in a form
widgets okay so I’ll go to the widgets
when you start designing the form in the
column on the right so I’ll just go
ahead and search for form and I’ll drag
it in over here okay great
first of all I’m just gonna give this
form a name okay so this is gonna be
create your first LP webinar don’t do
that like sir okay and that’s just the
name for the form right we don’t we
can’t see it and what I’ll do is I’ll
change I’ll enter here we got all of the
form fields right you can see name email
messages that’s what we see here so I’ll
just go to the messages field and I’ll
change the placeholder text okay that’s
the text that you see inside the field
so I’ll just change that to what are
your expectations from the webinar so
I’ll just go ahead and add that’s in the
placeholder as you can see it appears
over here and I can also control the
amounts of rows over here so I’ll just
change that to three so it’s just a
little bit less that was 4 this is 3
great so I’m gonna be keeping the name
field the email field the message field
and we’re gonna be adding a new field a
new item okay and when we do that we can
choose the type so I’m gonna set the
type we’ve got a lot of choices over
here
I want to choose text area just like the
message field and I’ll also I’ll give it
a placeholder text over here how long
have you been using Elemental okay so
you can fill that in over there great
I’ll change it to 3 rows as well and
I’ll change the input size to medium so
it just makes everything just a little
bit bigger
and next I’ll just hide the label as you
can see message email name it all
disappears that’s cool that’s that’s
what I want for my design
and next let’s go over to the submit
button drop down and over here I’m going
to change the button text I wanted to
say save my seat
so in text that’s gonna say save my seat
and I want the button to be aligned to
the left okay great so in the next drop
down we have actions after submit okay
what we can do over here is we can add
for example MailChimp okay and when at
the moment that I do that you’ll see
that there’s a MailChimp drop down and
in the drop down you can choose the API
key and you can choose the audience as
well so I also send you another link
that you’ll get that explains basically
how to use this for email marketing
platforms which you can set up with
forms to integrate with elementals prose
form builder it also includes the
additional options where you can add a
form ID and you can also set up custom
messages okay great
so let’s start a forum I’ll go to style
and in the form drop-down I’m gonna go
to Rose Gap and I’m gonna increase it a
bit that’s the space between the rows
over there I’ll do that and let’s go to
the field drop-down lets style that I’m
just gonna change the text color to a
little bit darker gray I don’t know if
you can see it but it’s just a little
bit darker I’ll also go to typography
over here and I’ll increase the letter
spacing I wanted to spread out a bit as
you can see it spreads out that’s good I
also want to remove the border I don’t
want the border to be there so I’ll just
set it to zero so there’s no border
whatsoever and I wanted to make it
pill-shaped as well so I’ll just give it
a border radius of 25 pixels
and in the baton drop-down we can style
the baton what I’ll do is I’ll set the
background color to red okay so I go to
background color and here’s the red that
that we saved before it’s in our color
picker easier and accessible so I just
quickly select that I’ll set the text
color to white okay
and in typography what I’ll do is I’ll
set this to month surrett 16 pixels set
the weight to 600 a little bit bolder
uppercase that’s great I’ll play around
with the line height okay make it luck
sir that’s great
and the letter spacing as well just play
around with it okay that’s cool and next
let’s make it pill-shaped as well border
radius 50 pixels all around and I want
to give it some custom text padding over
here so I’ll unlink the values I’ll
leave it at pixels and I’ll simply set
bottom and 35 to the right and 35 to the
left okay great so now what we need to
do is we need to position the the form a
little bit better in the column in
relationship to the left column so what
we’re going to be doing is we’re also
going to be going to to add some padding
to the column like we did before so I’ll
go enter the column settings here and in
advanced padding I’ll go ahead and
unlink the values I’ll change the unit
to percentage and I’ll go ahead and give
it 15 percent on top as you can see I’ll
give you I’ll give it 15 percent on the
right and I’ll give it 15 percent on the
bottom and on the left I’ll leave it as
is because we already have the space
over here so now it’s positioned exactly
the way I like
okay so like I mentioned before we can
save widgets as global widgets which
means we can use them all over the site
and we can edit them in one place and
this is going to come in handy when we
use when we create multiple landing
pages in order to do that simply
right-click and say save as global and
here I’ll just call it web in our form
and then save and as you can see over
here in global we’ve got a global widget
and we can just edit it and we can drag
it in on new landing pages that we use
and all the changes that I apply here
you can see there’s this orange border
over here over all the changes that I
apply they’ll be applied everywhere I’ve
inserted this global widgets okay so now
now all that we need we need to do is
set the first set of button in the first
section to scroll down automatically to
the third section okay so we wanted to
scroll to the third section which means
we need to go to the third second of the
third section settings okay and in
advanced what we’re gonna be doing is
we’re gonna give it a CSS ID we’re gonna
be adding that over here this is just a
name it can be any description or you
know any description word that you want
just make sure that there aren’t any
spaces so I’ll go ahead and choose save
seat okay and what I’ll do is I’ll I’ll
copy this and very simply I’ll just go
to my batten settings okay and in
content like I mentioned before in link
just make sure that the pound key is
still over there and just paste the CSS
ID that you added save seat and the
moment that you do that the moment that
you press the button it will
automatically scroll down to the third
section so that’s that’s really cool now
let’s just open up the navigator okay
like I mentioned before the Navigator
was empty because we didn’t build
anything now we’ve almost finished our
page all we need to do is just tweak
a little bit for Responsive in mobile so
I’ll go ahead and open up the navigator
and as you can see all of our content
over here we can we can see everything
okay so we’ve got all of the sections
we’ve got the three sections over here
and inside the sections we’ve got the
columns and inside the columns we’ve got
all of the widgets and very cool you can
just press you can click it and it will
drag you automatically to the column and
you’re in the column settings already
let’s go to second section we’re
automatically in the second section so
this is really really comes in really
handy to get an overview of your page
and another cool thing is you can double
double-click the the section over hand
you can give it a name so I’ll call this
the hero section okay and the second one
I’ll call it takeaways section okay and
the third one I’ll call form and this
will help us out when when we busy
tweaking as well for mobile and tablet
so we really know what we what we’re
doing and what widget we actually are
and what we reading so that’s cool now
another cool thing is that you can see
over here let’s just open app we’ve got
custom positioned images and motion
effects we’ve got them in the first
section in the second column okay so the
first section in the second column as
you can see there’s a blue label over
here indicating that we’ve got custom
positioned images and we’ve got motion
effects as well so this is really cool
we can really get a clear overview of
all of the things that we added to our
page which really comes in handy
okay so potential customers they’ll view
this page on the mobile devices so let’s
see how to make some responsive
adjustments to make your design look
great on mobile as well what I’ll be
doing is tweaking the first section so
you can see exactly how it works what
you need to do is just simply enter the
responsive mode over here and what I’ll
do is I’ll choose tablet um and I just
want to show you a quick tip I don’t
know if you already know I know it or
not but it’s something that I use when
designing for mobile and tablets is
using the column
column width setting okay so what I can
do over here is I can give the left
column for example I can set it to take
up 60% of the entire width and I’ll just
select the second column and I’ll set
that to it needs to be a hundred percent
right so I’ll just set that to forty
okay so now we’ve got 60% and 40% and
this is only applied on tablet so this
is the responsive tablet handle over
here so this is only for tablet right so
I’m not going to be using this I’ll just
go ahead and delete it and I’ll delete
the 60 that I set and what I’ll do is
I’ll go to I go to mobile okay there we
go and I’ll just go ahead and I’ll go to
the first section so I just simply click
here Oh
as you can see I’m already in the hero
section settings over here and I’ll go
to advanced and as you can see there is
a responsive drop-down
okay so there’s there are a couple of
responsive settings that you can use
over here the first one is that I want
to show is reverse columns the first
column here is with the text the webinar
the second column is with the images so
the moment that I choose reverse column
for mobile only anybody that opens this
page on mobile they’ll first see the
image and then they’ll see the text so
this might come in handy we’re trying to
create a specific layout for mobile
that’s different on on desktop so you
can use that and another thing another
powerful tool that you can use is the
visibility so you can also choose to
just hide this whole section if you want
to on mobile so just choose hide and the
the it’s grayed out indicating that it’s
hidden so you can just remember that you
hide the panel over here at you just you
don’t see it anymore
okay so it’s not there on mobile which
is great now I’m not going to be I’m not
going to be doing that okay so first of
all let’s start tweaking this for for
mobile okay I don’t know if you paid
attention but
the Elemental logo over here basically
just disappeared because we gave it a
negative top margin in desktop mode okay
so whatever you define on the desktop
mode it’s automatically applied here by
default so first of all what I can do to
find it is I can just go to here oh
that’s in the first column that I know
and I’ve got an image over here okay I
already know that it’s this image
because there’s only one so but if you
want to check contents over here now I’m
that I was looking for and as I
mentioned before let’s go to advanced
all of the settings over here that I set
in defaults the negative margin they’re
automatically a plant so technically
there’s a negative top margin of 100
pixels in order to remove that simply
unlink the values okay so at the moment
that I unlink the values that the
negative 100 pixels just disappears and
now we can set them individually for
Birbal for this mobile responsive mode
what I’m going to be doing is I’m going
to style and I just want to increase the
size of the of the logo so over here you
can see I’ve got the width as you can
see this is the mobile responsive handle
for mobile I can set it for tablet and
desktop everywhere you see these mobile
handles the responsive handles means
that you can change this value for for
either mobile tablet or desktop and it’s
only going to be applied for that
devices screen size so what I’ll do is
I’ll just drag this I’ll increase the
size a bit 40% and what I’ll do is in
content I’ll align it to the center and
next I’m gonna tweak the icon list
widget I also I go to style and in list
I also align it to the centre and in the
text drop-down I’ll just change the text
size so in typography I’ll just change
the text size to 16 as you can see it
fits a lot better now when it’s smaller
what I’ll do is I will
go to advanced okay and I’ll unlink the
padding over here and I’ll change it to
percentage and I’ll add some padding on
top to create some space okay that’s
cool next I’ll select the heading widget
also over here what I’m gonna be doing
is in content I’ll align it to the
center and in style I’m gonna be
changing the size and needs to be a lot
smaller 36 pixels need to play with the
line height over here as well um I’ll
just set this at 48 pixels there we go
and the letter spacing I’ll play around
with that as well negative 2 okay that
looks that looks cool okay that’s great
now what I’ll do is I’ll go to advanced
and also unlink the padding over here
I’ll change it to percentage and on top
I’ll create some space next I’ll go to
the batten widget I’ll align it to the
center and I’ll just go to advanced over
here and link the padding set it to
percentage and add some padding on top
some padding on the bottom and I’ve
chosen to to not show these custom
positioned images on mobile so basically
I’m going to hide them on mobile
like I saw showed you before simply
select it go to responsive and over here
we can just choose hide on mobile so
it’s grayed out okay I’ll just go ahead
and select I’ll select this one as well
I’ll go to positioning sorry I’ll go to
responsive hat on mobile and on the
bottom left I’ll also go to responsive
hard on mobile and the last one
responsive
on mobile as you can see now we don’t
see the custom position images on mobile
which is great okay now let’s select the
image over here there we go that’s the
image and I’m just gonna I’m gonna make
it a little bit smaller okay so for
width I’ll go ahead and drag this to
just make it smaller 60%
once again responsive handles over here
this is only for mobile it’s gonna be
this size for mobile and that fits a lot
better okay now let’s go back to the
section settings so I’ll go ahead and
scroll up and choose hero and I want to
change the background image that we set
overheads that I don’t like the way that
it looks on mobile so what I’ll do is
I’ll just go to style and I’ll get a
background over here and I’ll just
change the position ok the position is
also mobile responsive I’ll change it to
top right so now it’s positioned over
there and I’ll give it a custom size
okay also mobile responsive I’ll give it
a custom size and I’ll set that I set
that to 250 pixels okay
let’s see I think that’s it that’s good
that’s great for my mobile what I’ll do
it now is I’ll just close the navigator
and I go back to desktop mode over here
okay great so we’re nearing the end of
the webinar are there any questions I’ll
just have a look over here if there any
questions let’s have a look
is there a specific theme in WordPress
that works well with elemental or it
doesn’t matter of the theme ok so
especially if you have elemental Pro
user you should go with elementals hello
theme it’s very lightweight and doesn’t
come with a lot of blood that other
themes do come with and you can really
use all of elemental features basically
to create a lot of things if you’re
creating landing pages if you’re
creating full-fledged websites out go
for hello theme let’s have a look to
explain the difference between padding
and margin okay let’s just quickly have
a look over here
and as you can see we have let’s see
let’s see let’s see we have a section ok
so inside the section all of the space
that we’ve got inside it that’s
basically padding okay so if we go to
advanced um as you can see this is all
three so I’ll just increase it the
moment that I increase it it adds the
padding okay on the bottom over there or
actually this is on the top of the
section so it adds the padding I’ll set
it back to three and if I choose margin
okay let’s say on top and I’ll change it
to percentage as well then it creates
space above it in between the two
sections okay so that’s the basic
explanation I hope that it’s clear okay
cool let’s see are there any other
questions okay so I just want to remind
you that the video is going to be
available on on the channel I’m gonna be
let’s have a look wrapping up the
webinar soon so the last thing that we
need to do basically is we can preview
the website and we can publish okay so
I’ll go ahead and press preview here
we’ve got our page the moment we can
interact with it the moment that I press
save my seat brings us to the forum
directly
and and that’s great so I previewed it
and I’m happy with it
so what I’ll do is I’ll go ahead and
choose publish okay so everybody with
with this link they can cheat and they
can pre they can check out your live
page and they’ll be able to see it and
what you can also do is you can save
this page as a template so basically
what it does is it adds a template of
the entire page to the library so I can
I can call this landing page pro okay so
this is a template or save it and this
way as you can see I’ve got templates a
via landing page pro I can preview and
insert it I’ll go ahead and close this
and this way you can use and reuse pages
very quickly which will save you a lot
of time and you can simply access that
over here you can insert it on a page
you can insert the whole template like
so you can also do this for sections if
I want to use this contact us or the
contact page the form section if I want
to save this as a template I can
right-click the section and choose save
as templates and just call this form
template like so and just save it and
there we go we got the form template
which we can simply insert so I’ll just
go ahead and choose insert on the page
and now it appears twice so I can just
use this I can use this very easily on
the fly to create to create these
landing pages another tool that really
saves a lot of time is the finder okay
to use it you can simply click a click
command or control e depending if you’re
on a Mac or if you’re on a PC so I’ll go
ahead and choose commanding come on e as
you can see we’ve gotta find out over
here and you can search for you know
where you want to go what you want to do
and essentially is a search bar for that
offers easy navigation between different
pages and dashboard settings what we can
use we can also create a new page very
quickly we can switch between pages
preview pages for example if I type in
add new I can vary
easily add a new page etc okay so let’s
let’s just bring myself back into the
frame over here like so there we go okay
so this is this is just the tip of the
iceberg there’s really there’s so much
more that you can learn elemental pro
provides you with a lot of tools to
create highly converting landing pages
also full fledged websites such as the
form widget that we use today motion
effects to really help bring your design
to life pop-ups to keep your visitors
engaged a theme builder to visually
customize your website’s headers footers
archive pages single post pages and a
lot of other areas on your site and a
lot more also you know the more that you
learn the better ural you’ll be able to
design and and really improve the
workflow so I hope that I managed to
bring across my workflow and I hope it
helps you out with your doing it to
improve your your own skills and I
really think that you’re ready to take
your first steps and create your own
landing page and really you know proudly
publish them and make them mug and make
them go live I’d like to invite you to
join our Facebook group they’re really
it’s full of load loads of helpful tips
and tricks’ a big big big community of
like-minded web creators everybody’s
helping each other out to become better
at what they do
also don’t forget to subscribe to our
youtube channel that’s full of all
different types of tutorials to really
help you master Elementor and lastly on
our website also we can check out the
Help Center for easy access to the
knowledge base fa Q’s Doc’s and a lot
more let’s see
okay and also at last I’d just like to
remind you that we’ll send a link with
all of the materials that are needed to
create this specific landing page so you
you know feel free to re-watch it you
can recreate recreate the page step by
step also it’s very important to know
that you can apply these skills to to
create your own attractive and
converting landing pages for different
types of businesses not to say for you
know webinars like I mentioned before
hospitality industry restaurants
software is the service companies Jim
Jim’s ecommerce and and a lot more and
so I wish you good luck and and most
importantly it’s it’s always important
to enjoy being creative so thanks for
tuning in and ciao for now
