Welcome to the Elementor 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!
hi and welcome to elemental probe basic
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
this webinar will give you a basic
breakdown of some of elemental pros
abilities by showing you how we used it
to design the landing page for this
specific webinar okay so these skills
can also be applied to create attractive
landing pages for your own businesses to
help convert potential customers such as
the hospitality industry restaurants
software as a service companies gyms
ecommerce and a lot more so I’ll go
ahead and share my screen with you so
you can see the landing page that we’ll
be creating today there we go okay so
this is the landing page that we’re
going to be creating today I’ll just
scroll down back up so what exactly is a
landing page first of all a landing page
is a page on your site that visitors
arrive on via some kind of advertising
it could be via Facebook it could be a
Google search it could be a link in an
email and the page this has got a
specific purpose okay so the purpose is
to convert visitors into leads by taking
a specific action and in our example
over here the purpose of the page is to
convince the visitor
youõll everywhere around the world to
save a seat for this amazing webinar so
as you can see over here we’ve got CTS
call to actions to save the seat when we
click on it you automatically scroll
down to the last section here to fill in
the form and to save the seat here we
have some interesting custom positioned
images with some motion effects to grab
the attention and in the middle over
here we have six takeaways that you’ll
get from attending the webinar to
convince you that it’s great to join
this webinar so and a mentor is the
perfect tool to help you create
adding pages if you don’t know I’ll just
give you a brief overview of what
Elementor is if you know it will take
about two minutes it’s an advanced page
builder it allows you to build entire
websites page by page with your own
custom design let’s drag and drop
meaning that you work directly on the
page you see the result in real time
exactly the way that the website wizard
visitors would see it there are many
advantages in using elemental Pro such
as saving time and development costs
with access to over 50 plus pro widgets
and Counting 300 Pro templates that are
also we creating more and more template
kits full websites that help you design
and build faster without using code also
to help boost your landing page
conversions with elemental pros
marketing and conversion widgets we’ve
got a visual form builder with built in
integrations which we’re going to be
using for this webinar and powerful
animations that bring your site to life
we also have a design design oriented
pop-up builder for pro users that you
can also integrate with your favorite
marketing tools and there’s so much more
so I’ll stop babbling and I’ll just let
you know that feel free to ask questions
in the chat we’ll try to answer them and
I’m gonna be pausing every now and then
to to answer some questions ok so to
start working with elemental you need to
create your first page so what I’ll do
over here I’ll go to pages in the
dashboard and click add new and I’ll
give it a name I’ll call it landing page
Pro webinar
so and then I’ll go ahead and hit edit
with elemental and in order to start
with a clean page I’ll go to the page
settings in the left on the bottom and
I’ll choose page layouts and I’ll set
that to canvas okay so this is the
easiest way to create a full blank page
without a header in the footer
exactly what we need for our landing
page so let’s just have a quick overview
of our elemental and the interface on
the right side over here is the editing
area this is where we’re going to be
adding and editing the elements that
form the page the layout of the page and
on the left side over here is the
elemental panel if we click over here on
the widgets icon we have the creative
tools these are the widgets you can use
them to add them to your page you can
add headings paragraphs images and
videos and a lot more and you can always
access this area by clicking on the
right on the icon widget icon on the
right over here and another thing that
we have is global widgets a carries for
pro users and with this feature you can
save the widgets as a global widget and
then you can add it to multiple areas on
your site and you can all the areas will
be editable from that single space I’m
going to be showing you exactly how to
do that when we’re going to be creating
our last section with the form widget
and so I’ll show you that later on if we
look over here we have the hamburger
menu on the left and there are a lot of
options over here like setting your
default colors go back over here and
default fonts which are set later as
well and we can also view the page and
we can exit back to our dashboard at the
bottom over here we have some other
settings we’ve already spoke about the
page settings over here we also have the
Navigator okay which will help us get a
clear understanding of the page and the
layouts and everything that’s in it it’s
empty right now because we haven’t
created anything so we’re going to come
back to this and we’ll see exactly how
it’s going to help us create our page
okay let’s have a look let’s carry on to
the history over here we can see all of
the actions that we made all the edits
and everything we can go back to them we
can also check out the revisions over
here we have the responsive mode here we
can switch between the screen modes and
we can for example go to mobile and make
verbal edits tablet and make tablets
tablet edits we’ll go we’ll do that soon
as well and over here we can preview the
page and we can of course publish and
there are other same options as well
which we’ll go over soon okay so let’s
take a closer look at how pages are
built there are two ways that we can
start we can I’m going to start off with
the library so we’ll just click over
here and as you can see over here we can
preview we just click on the magnifying
glass so we can preview pre-made blocks
and pages over here and also our own
templates and we can just simply insert
them into the page okay so I’ll go ahead
and choose let’s have a look I’ll choose
the get in touch I’ll choose this pro
block our power in numbers I’ll go ahead
and just insert that and as you can see
we straight away we’ve got a block with
some content in it with some widgets so
let’s just have a look exactly what we
have our way okay so Elementor uses
three main building blocks we have the
sections we have the columns and we have
the widgets you can identify the columns
sorry we can identify the section by the
blue line okay and they are the biggest
there are the biggest building blocks
then we have the columns you can
identify them by the black dashed border
over here there’s one over here and
inside them we have with the widgets
okay as a heading widget over here is a
countdown widgets and we can control all
of these columns and sections and
widgets with their handle for example we
can right click and duplicate the
section and we can just delete it like
so we can also duplicate the column so
now we have two columns with the same
content in it and
I’ll go ahead and just delete this and
what we can also do is we can move the
columns and the widgets and the sections
around so by simply dragging and
dropping so I’ll just drag this column
over here and if I’d like to duplicate
the section and remove this I can drag
this section down over here let’s see
below the blue line indicates where it’s
going to be positioned right okay so
let’s have a closer look at the section
columns in the widgets they have three
tabs I’ll go ahead and click section
they have three tabs in the panel on the
left the section and the columns they
have layout style and advanced tabs and
widgets they have content style in
advanced tabs so soon we’ll see exactly
how these settings are used to create
our landing page but first I’ll go ahead
and delete the section because we’re
going to be building it from scratch
okay so another way to add a section is
by pressing the plus icon so I’ll go
ahead and press the plus icon and then
you can simply choose one of the preset
structures so you can choose them and
you can later on you can tweak them as
well so I think it’s time to start
building our landing page so let’s just
have a look this is our landing page
that’s what we’re going to be building
and I’ll start off in this page settings
okay
and what I’ll do over here is I’m gonna
give it a background color the whole
page okay so go to style and I’ll choose
background type classic and I’ll give it
a color I’ll just paste my code over
here
I’ll give it a gray gray background
color okay so now I can add sections and
I can start building but I don’t need to
give them a background color the
sections because I gave the page
settings a background color so that will
save me some time okay great
the next thing that I’ll do also to
speed up my process is I go to the
hamburger menu over here and I’ll go to
the default fonts remember I mentioned
it before over here I set the all the
fonts I set them to Roberto
okay this will save meiosis some time
when I add heading widgets and stuff
like that there’ll be set as default
which we’ll see soon okay great so for
the first section let’s have a look over
here this is the first section as you
can see we have two columns over here
and we can already see a little bit of
the this the second section over here
giving us some interest to read about
two takeaways okay so how exactly can we
create that layout and set that up so
for the first section I’m going to
create a section with two columns and
I’m going to control the heights okay so
I’m going to control the height of the
section and I’m gonna give it a minimum
height meaning that the section will be
at least this height no matter the
amount of content in it will be at least
this height the default setting is 400
so I can increase it’s in pixels but I’m
going to use a different units I’m gonna
use a relative unit called VH view
height which is in relationship to the
viewports heights so 100 percent 100 VH
means that it takes up a hundred percent
of the viewports Heights which you can
see over here 50 VH would mean it would
take up half of the viewports height and
I’m going to be setting it to 80 so that
when my second section starts you
already see it above the fold which will
be come in handy for our landing page
okay so let’s move on what I’m gonna be
doing is I’ll go to style and I’ll give
it a background image okay so I got a
background type and I’ll I’ll use this
white quarter circle okay
so I’ll use this circle over here and
I’ll go ahead and insert it and I’m
gonna fix this first of all I’m gonna
set it to no repeat no repeat so we only
see it once and then I’ll set it
position I’ll set it to top center okay
great that’s where I want to have it
next what I’m gonna be doing is I’ll
drag an image widget so I’ll go to the
widgets air drag an image widget into
the left column and I’m gonna be
choosing the elemental logo so I’ll go
here and just choose the elemental logo
like so
and I’ll align it to the left and in
style I’m gonna control the width I just
make it a little bit smaller 25% that’s
great and I’ll use a CSS filter so I
want this color now I wanted to be dark
I want it to be black but I don’t want
to create a new logo and in Photoshop
and then upload it and whatever not so
I’ll just use a CSS filter over here to
save some time and I’ll just bring the
brightness all the way down so now it’s
dark okay so that’s great and the next
thing that I’ll do is I’ll drag I’ll go
ahead to the widgets and I’ll search for
the icon list the icon list widget and
I’ll drop it here under the elemental
logo and I’ll go ahead and delete to
list items so I’m left with one and what
I’ll do is I’ll click on it and I’ll
change the text I’ll change the text
over here to the webinar and the dates
and the time so in text I’ll go ahead
and change that that’s great
and now I’ll hover over the over the
icon and I’ll choose upload SVG I’ve
uploaded some SVG’s so what I’ll go and
do is choose this live as SVG icon over
here and insert it and now we need to
style style it a bit so I’ll go to style
and I’m gonna increase the icon okay so
go to icon drop-down excuse me I’ll go
to icon drop-down and um I’ll go ahead
and change the size to I’ll go ahead and
set it to 60
okay that’s great now I’ll star the text
so I’ll go to the text drop-down I’ll
change the text color to black and the
text indent I’ll set to 16 to create
some space there between and over here
remember when I set the default font
family Roberta so the family here set to
default so it automatically said to
Roberta that will save me some time what
I’ll do is I’ll just change it to 22
pixels and I’ll set the weight to 500 so
it’s a little bit bolder okay great
next what I’ll do is I’ll drag in a
heading widgets I’ll drag a heading
widgets under under this text and what
I’ll do is I’ll I’ll just change the
text over here okay this is my text
create your first landing page with
elemental Pro and as you can see I added
brake lines over here so landing page
will always appear under create your
first and with elemental Pro will always
appear and the landing page so it’s
something that you can use next I’ll
style it so I’ll get a style and I’ll
change the color to black and over here
I’ve got it’s a photography and I’ll
choose the font family
also here’s Roberto’s apply it
automatically this will be 70 and I’ll
add a decoration of the he’ll set it to
underline and I’ll play around with the
line height I’ll change the line I to
pixels and I’ll set it at 80 and the
letter spacing here I’ll drop down a bit
to bring it together
I’ll do it negative 4
okay that’s great so now we can move on
to our button this is our CTA okay so
I’ll go ahead and drop this button over
here and I’ll change the text and in
text I’ll go ahead and she saved my seat
and what we’re gonna be doing is we’ll
set the link to automatically scroll
down to the third section which contains
the form and we haven’t created it yet
so I’ll show you exactly how to do that
later on but first let’s style the
button so I go to style and interpret
Apocrypha I’ll go and set the family to
Montserrat I’ll set the size to 16 and
the weight to bold
uppercase on buttons it’s always good to
have the uppercase going
let’s have a look I’ll play around with
the letter spacing a bit
I’ll space it out just a little bit like
sir that’s cool and next what I’ll do is
I’ll change the background color okay so
I’ll go ahead and set a pink red
background color so I get a background
color over here and I’ll change that
like so and now I’m gonna change I’m
going to change the shape to pill shape
so I’ll add I’ll add some border radius
I’m gonna go for fifty pixels all around
as you can see over here and what I want
to do is I’m going to unlink the padding
values because I want to set custom
padding over here so when I remove it
it’s there’s no padding whatsoever and
what I’ll do is I’ll set it to 20 on the
top and 20 on the bottom and 35 on the
right and 35 on the left okay so that’s
exactly what I what I like which is
great and now the only thing that I want
to do with the button still is on havre
when you hover over the button I want to
change the background color to to this
nice green so I’ll go ahead and choose
background color there we go so now when
I hover over the changes and to grab the
attention also I want to add a hover
animation so I’ll go ahead and choose
grow so this is nice it pops up nicely
okay that’s great
and now I want to create some space
between the text and the button so what
I’ll do is I’ll go to advanced in the
button and I’ll unlink the padding
values okay and I’m gonna change the
units from pixels I’m gonna change it to
percentage because this is a relative
unit and it’s better for responsive
design it’s better for tablet and mobile
so what I’ll do over here is I’ll add
five percent five percent padding on the
top and that’s it um now let’s have a
look at our page so you can see the
elemental leg over here pops a little
bit out the way that I did that is I’m
gonna select I’m gonna select the logo
okay and what I’m gonna be doing is I’m
going to go to advanced
I’m going to play around with the margin
I’m gonna give it a negative margin okay
so I can unlink the margin and I’m gonna
give it a negative margin on top
the moment that you give it a negative
margin you can see it comes up and then
it comes out of the the column itself
okay so you need to pay attention to
this nuts out of the column will soon
see also in mobile how that affects the
mobile but that’s that’s how I got it
out so that’s great now let’s move on to
the column on the right okay so what I’m
gonna be doing is I’m gonna be dragging
I’m going to be dragging an image
widgets into the right over here okay
and I’m gonna be choosing a very special
picture there we go and I’ll go ahead
and insert that and I’ll just go ahead
and make sure that the size is set to
full and what I’ll do next is I’ll drag
an image widget
sorry I’ll drag a heading widget under
it there we go
and I’ll change the text okay I’ll
change the text there we go and what
I’ll do is I’ll style it so I’ll go to
style and I’ll change the color to black
and in typography I’ll go ahead and set
it to search for and set it to one
surrett I’ll set it to 20 pixels and
I’ll make it a little bit I’ll change
the weight to 500 and now in order to
position it exactly where we like okay
I’m gonna be I’m going to be going to
add the Advanced Settings here as well
and I’ll unlink the padding like before
change the unit to percentage and I’ll
just add a little bit let’s see I just
move it over here 25% is nice that’s
great okay next I’m gonna be duplicating
this and I’ll change the text
okay great and I’ll change the text
color I’ll change it to gray so I’ll get
a style and I’ll change the text color
over here change it to gray and I’ll
make it a little bit lighter so I’ll go
to wait and I’ll set it to 300 so it’s a
little bit lighter and in order to move
it closer to the first heading what I’ll
do here is also go to advanced and
unlink this time I’ll unlink the margin
okay which is above it’s outside the the
widgets unlink that and I’ll change it
to the value at the unit to percentage
and I’ll give it a negative margin of
two percent negative top margin of 2%
okay that’s great okay now for the
shapes okay as you can see here we have
the shapes we used cast and positioning
and we used motion effects okay so let’s
see exactly how how we do that okay
so first of all I’m gonna be dragging in
an image widgets so I’ll drag an image
widget over here and I’ll go ahead and
change it to the big black semicircle
okay so this one and I’ll insert it like
so and next what I’ll do is I’ll go
ahead and duplicate the image and the
second image I’ll choose the red square
and the black semicircle okay so that’s
these two and in order to position them
next to each other what we can use we
can use the positioning option in
advanced so I’ll go ahead and select
this image and in advanced as you can
see we have a positioning option okay
I’d like to in advanced warn you that
custom position itself it’s not
considered a best practice for
responsive web design and also shouldn’t
be used to frequently but for this for
landing pages to create the interaction
and to really position things the way
that you like it’s it’s a very good
solution so what we do is what we will
do now is go to a width and basically
we’ll set it to inline okay and I’ll go
ahead and do it
the second one is well could have
advanced I’ll go to positioning and I’ve
got a width and I’ll set it to inline
and now they’re next to each other okay
and we can position them even more
accurately by setting the position
itself to absolute okay so I’ll go ahead
and select this first image and I’ll set
the position to absolute and the moment
that I set the position to absolute you
can see that the second image a jump to
the left this is because the moment that
I set the black semicircle to absolute
it essentially was removed from the flow
of the elements on the page so I’ll go
ahead and select the second image okay
and I’ll go to positioning sorry there’s
the second image there we go and I’ll
change the position to absolute as well
so now that both they’re both removed
from the flow of the of the elements on
the page and we can play around with
them we can play around with the
position so what I want to do is I want
to have the square semicircle so I
selected over here I wanted to have it
in the top right corner of the image and
the black semicircle sorry I want the
the square semicircle in the top right
and I want to black semi cooper circle
in the top left and so I’ll select the
square semi circle first over here and
I’ll go I’ll go to the horizontal
orientation and I’ll set it to right
okay and I’ll leave the vertical
orientation at the top because that’s
where I want to have it now I can
position it accurately with the offset
okay what I’ll do is I’ll change the
units to percentage because it’s a
relative unit and it’s relative to the
column that it’s in which will help us
later on if we creating full tablet and
we’re creating for mobiles it’s a better
way to design and so what I’ll do you
have me here as you can see the moment
that I move it we can we can place it
over here so I want to place it on a
place that’s over here so I can replace
it quite accurately and for the vertical
orientation I wanted to go up a bit
there we go so that’s great um now let’s
go to the black semicircle okay so what
I want to do is I want to I wanted to
remain at the top left and all I need to
do over here is I’ll just change the
units to percentage as well and I’ll
slide over here I’ll slide this a little
bit to the right that’s great and the
offsets I wanted to bring it up a bit so
I’ll go over here and I think that looks
great
also if you want them to come back to
their original position all you need to
do is just set the offsets to zero okay
so if you get lost if you’re playing
around something happens you might get
confused if the image suddenly just
disappeared I always just use this the
offset set them back to zero and you’re
good to go so I’ll just go ahead and set
this back to what I had before okay so
this was nine and this was delete this
was negative nine okay that’s great and
also there’s a great tutorial that I
made that explains exactly how to use
customer’s absolute positioning custom
positioning when you’re designing your
page so I’ll send a link in the
description as well so you can check
that out okay great
so now that we’ve got these perimeters
let’s bring them to life with motion
effects okay so we’ll select the top
left image and I’ll go ahead and go in
advanced are good emotion effects okay
and here I’ll choose mouse effects and
I’ll choose mouse track okay so that
basically as you can see when I interact
with it with my mouse it moves around so
the direction is set to opposite meaning
that when I move in a certain direction
you can see that the image itself moves
against me in the opposite direction and
I’ll control the speed over here I’ll
bring it down a bit because I wanted to
be a subtle I want it to be a subtle
interaction so that’s great and for the
top right image I’ll go ahead and select
it and go to motion effects
and I’ll switch on Mass Effect’s Mouse
track and I’ll change the direction I’ll
change it to direct direct means that it
follows me within the direction that I’m
going that’s where the image also moves
towards and I’ll make it subtle as well
so I’ll bring this down so as you can
see now they there’s a subtle there’s a
nice playful interaction between the two
elements over here okay great so now
let’s create the other two on the bottom
over there and we’ll just simply
duplicate we’ll duplicate these and drag
them down okay so you can see them and
the black semicircle I’m gonna change it
to the the white semicircle and the red
circle and this one okay and and what
I’ll do is I’ll go to advanced and in
positioning I’ll set the vertical
orientation to bottom because that’s
where I want to position it and I’ll
make sure that the percentages are set
to that the units are set to percentage
and over here I’ll I’ll set this to
seven and I’ll set this to 18 great and
I’ll select the next image and here as
well I’ll change this image to the white
triangle and the red this red a quarter
circle now go ahead and insert that and
in advanced I’ll go ahead and I’ll go to
positioning and I’ll change the vertical
orientation to bottom as well now make
sure that it’s set a percentage and I’ll
go ahead and set my values in offset
values so that’s exactly where I want it
to be positioned and to change the
interaction a bit I’m gonna go to the
left image on the bottom over here and
change motion effects Mouse track to
direct and I’ll do the opposite over
here for the right the image on the
right on the bottom and I’ll change the
mouse track I change it to opposite okay
so this really gives us this playful
subtle interaction
that you that really it’s nice for the
visitor to to see and also I’ll link
another tutorial in the description that
covers all of the motion effects options
ok because there are so many more and so
many more motion effects options so you
can really get a basic understanding of
how it works and how you can use it to
liven up your own pages for example you
know you could use this on a restaurant
website you can add custom positioned
menu items with motion effects you know
to grab the attention so that’s that
could be a creative way to to apply it
okay great so we finished with the first
section let’s see if we have some
questions around ok so I’ve got a
question from Corey when editing on
different devices do the changes only
apply to that device or does it make
changes for also it’s the mobile
responsive modes which we’re going to be
doing soon as well you can you can
basically create you can make mobile
edits for specific devices so you can
make a different font size for mobile
and on tablet will be a bigger font size
and there’s a lot of things that you can
change for all of the mobile devices
I’ll show to you I’ll show you exactly
how we can make some mobile edits to
make this page look great on mobile as
well I hope that answers the question ok
so we’ve got a question from Kela others
elements SVG or PNG okay so it’s PNG but
it doesn’t matter because you can work
with with both file types in elemental
so that’s great okay great so let’s
carry on with the second section right
let’s have a look at our second section
over here as you can see that’s the six
takeaways that you’ll get from attending
the webinar okay so let’s make a start
so first of all what I’ll do is I’ll add
a section with one column
okay and I’ll give it a mean height of
style background type I’ll go ahead and
choose an image I’ll choose the this
circle and some other shapes background
image and what I’ll do is I set it to
like before no-repeat so it appears only
once and I’ll position it in the top
center like so and next what I’ll do is
I’ll drag in the heading widgets okay so
I’ll go ahead and drag in the heading
widget and I’ll change the text this is
going to be the text the six takeaways
so I’ll go ahead and add that here as
you can see I added a break line as well
so that’s from attending the webinar
will always appear under the six
takeaways you’ll get what I’ll do is
I’ll align it to the center and in style
I’ll change the color to black okay
great now typography I’m going to change
this to Montserrat and I’ll change the
size to 50 so it’s bigger and I’ll play
around with the line height okay I’ll
set it to pixels and I’ll just space it
a bit over here that looks great and the
next thing that I’ll do is I’ll add some
some padding on the bottom over here so
that when we add our other elements
there will be some space between them so
I’ll go to advanced and what I’ll do is
I’ll unlink the padding over here change
it to percentage because it’s better for
Responsive and on the bottom I’ll go
ahead and add as you can see here I’ll
add 4% that’s great
okay next next I’ll drag in an inner
section okay so I’m dragging in the
inner section over here as you can see
we have got the main section and we’ve
got an inner section the default comes
with two columns okay
and I’m gonna add another column so I’ll
right click here and I’ll go ahead and
choose add new column so I’ve got three
in total and what I’ll do is I’ll search
for
the icon the icon box widget okay icon
box there we go okay so I’ll drag it in
and what I’ll be doing over here is I’m
going to be uploading the s and SVG for
this okay so I’ll go ahead and choose
this and I’ll choose this SVG and I’ll
go ahead and insert that like so and I’m
gonna be deleting the title and I’ll
only add a description okay so let’s
just do this I won’t need I won’t need
the title I’ll just use the description
so that’s great and now now we can style
it so I’ll go to style and I’ll change
the icon size I’ll change the size I’ll
increase it a bit it’s too big let’s
bring it down a bit
drop-down in description because we
deleted the title we’re not using it in
the description I’m gonna go and set the
color to black and in typography I’ll go
ahead and choose montserrat and I’ll set
it to 18 and that’s great okay so now I
want I want I’ll copy our copy and
outpaced the icon box widget I’ll just
go ahead and paste this so we’ve got
three in a row and I want to have six in
total right as you can see over here we
want to have six in total so what I’ll
do is I’ll just duplicate the
intersection so I’ve got two
intersections and all we need to do now
is change the texts and the images so
the first one we already set so I’ll go
to the second one and I’ll go ahead and
just add this text and I’ll select the
SVG over here
and let’s move on to the third one as
you can see it’s very easy it’s copy
paste that’s great now we choose the SVG
that’s cool well the fourth one learn to
design stunning landing pages with that
code and we’ll change we’ll change this
to this cool
SVG icon and we’ll change this one over
here discover how to make your page 100%
responsive which will do soon and I’ll
go ahead and choose the responsive
mobile tablet icon and for our last one
preview and publish pages your pages to
a live website segrete and I’ll change
this SVG icon over here to this nice
preview icon cool and now what I want to
do is I want to create some space
between these inner sections so what
I’ll do is in the first inner section
I’ll go to advanced and our unlink the
margin because I want to add space under
the intersection okay so what I’ll do is
I’ll change this to percentage like
before there we go and on the bottom I
just add two percent okay that’s cool
now I want to bring all of this content
I want to bring it a little bit together
okay inside the main section over here
so what I’ll do is I’ll just select the
section and in advanced I’ll unlink the
padding and I’ll change it to percentage
and I’ll just give it now I went and
linked out I’ll just give it three
percent all around okay so as you can
see over here if I increase it that
increases like so I’ll just leave it at
three percent so that’s great and that’s
our second section
okay so let’s see if we’ve got any
questions let’s see okay so from Suzanne
where can I find those icons and images
to use are they somewhere in elemental
or do I have to search at stock photo
websites okay so we’re going to be
sharing all of the materials that we
used in this webinar we’re going to be
sending it to you so you can re-watch
the webinar and recreate the website and
use the skills to apply it to your to
your own designs
let’s see any other questions yeah it’s
from San Sandhya how do I add Elemental
navigation and not have the WordPress
navigation is the primary navigation
okay in order to do this you use
elementals team builder we have a
tutorial about it so I’ll also send a
link in the description when the video
is on on the channel okay great so let’s
move on to our third and final section
okay so let’s have a look at it this is
going to be our forum our forum section
so let’s just build it I’ll go ahead and
hit the plus over here like before I’ll
add a section with two columns controls
hi to set a min height of 70 VH okay and
I’m gonna choose a background image so
in style to the background type and I’ll
choose image I’ll choose this little red
square I’ll go ahead and insert it and
now like before no-repeat there we go we
got the little red square back and in
position I’ll go ahead and set it to
center right
so it appears over there in the center
on the right and so that’s great
now what I’ll do is I’ll go ahead and
copy the main heading in the first
section and I’ll simply paste it over
here and what I’ll do is I also copy
this icon list widget and I’ll paste it
here as well
okay now the heading widgets I’ll go
ahead and change the text this is gonna
be the same you’ll see text the big sale
you’ll see text so go ahead and change
that and in style I’ll go ahead and
change the topography I’ll increase it a
lot I’ll make it a hundred and twenty
pixels and I’ll remove this underline in
decoration I’ll set it back to default
and I’ll play around with the line
height here to bring some space 90
pixels is good and the next thing that
I’ll do is I’ll create some space
between these two widgets so in the
heading widgets I’ll go to advanced and
I’ll unlink the padding and I set it to
percentage and on the bottom at 8% okay
great so now what I want to do is I want
to I want to create some white space on
the right side of of the column okay so
in order to do that what I’ll do over
here is I’ll go to the column settings
okay and in advanced I’ll and Link the
padding and I’ll change it to percentage
and what I’ll do is I’ll add 15% on the
top
I’ll leave the bottom as is and I’ll add
moment that I do that the text the the
letters they’re all up there numbers the
the words they all appear below each
other and we’ve got this nice white
space over here so that’s great so now
we can move on to the form widgets in
the right column so I’ll go ahead and
search for form widgets there we go and
this is our awesome form widget that we
can style to our liking as as you can
see we’ve got the name email a message
I’m gonna keep the name I’m gonna keep
the email first of all I’m gonna just
give this form a name so I know what
form this is okay so I’ll give the form
name create your first a landing page
webinar and next what I’ll do is I’ll go
to messages and I’ll change the
placeholder text
okay so in placeholder as you can see
what are your expectations from the
webinar
that’s the placeholder text and I’ll
change the default four rows or change
it to three so that was four but this is
free three so it’s a little bit less and
I’ll go ahead and add an item and I’ll
change the type I’ll change it to text
area so you where you can fill in your
answers and I’ll go ahead and change
this this placeholder text how long have
you been using Elemental okay and I’ll
change this to three as well and I’ll
just increase the size the input size
I’ll just make it medium so it’s a
little bit bigger everything and I’ll
hide the label I don’t want to see the
label I’m gonna hide the labels I’ll do
that over there and next let’s go to the
submit button okay so I’ll go to the
submit button drop-down and I’ll change
the text I wanted to say save my seat so
I’ll go ahead and paste this save my
seat and that’s great and I’ll align it
to the left
okay I’ll align the button to the left
and we have actions after submit okay so
after you after you or your visitors
press the button you can add some
actions what we going to be doing is
adding MailChimp over here the moment
that you add MailChimp you get a
MailChimp drop-down where you can choose
your API key and your audience I’ll link
another video in the description as well
that basically goes over how you can use
these email marketing platforms together
with elements of pros integration
settings and you understand also how
that works with in the additional
options are the form ID and you can
switch on a custom message as well so
there will be a link about that as well
so let’s go ahead and style the form
okay so I’ll go to style and I’ll just
increase the row gap a little bit like
so and I’ll go to the field drop-down
now and I’ll change I’ll change the text
color to just a little bit more gray
a little bit darker than if you can see
it but I just make it a little bit
darker okay let’s just change that okay
that didn’t work field text color okay
[Music]
there we go
okay so change the color and in
typography what I’ll do over here is
I’ll I’ll get a letter spacing and I’ll
increase it a little bit to stretch it
out okay I want it to be stretched out
just a little bit not too much so one
point two and what I’ll do now is I will
remove the border so I’ll just set the
border to zero so there’s no border and
I’ll create a pill shape I’ll just add a
border radius of 25 pixels creating this
pill shape so that’s that and now what
I’ll do is I’ll go to the button drop
down and I’ll change the button
background color I’ll change it to the
red the pink red okay and next what I’ll
do is I’ll go to the topography and I’ll
select set it to monster rats set the
size to 16 I’ll set the weight to 600
it’s a little bit bolder and transform
to uppercase next I’ll play around a
little bit with the line height okay so
I’ll go ahead and set it to that’s about
right and a letter spacing or space it
out as well not too much
that’s great and the next thing what
we’ll do is we’ll turn the baton also
into this pill chef so I’ll go to the
the border-radius
and I’ll give it 50 pixels all around
and next what I want to do is I want to
create some custom padding over here so
the text padding what I’ll do is I’ll
just unlink or all of the values and
I’ll go ahead and set I set it to 15 on
the top 15 on the bottom 35 on the right
and 35 on the left and now what I’ll do
is I’ll go to the right column settings
over here and in advanced what I’ll do
is I’ll I’ll I’ll unlink the padding and
I’ll set it to percentage and what I’ll
do is I’m gonna be just like we did it
with the second the the column in the
left we had created some white space
I’ll be creating some white space here
as well and so what I’ll do over here is
I’ll set 215 on top 15 on the right 15
on the bottom and on the right side of
sorry and on the left side I’ll just
leave it at 0 because I wanted to stay
close to the columns edge okay great so
as I told you before we can save widgets
as global widgets so what I’m gonna be
doing is I’m gonna save this form widget
as a global widget so I’ll just go ahead
and right-click the form widget and I’ll
choose save as global and I’ll just I’ll
just say form widgets like so and I’ll
just save it and now as you can see it
appears in a global it’s appears in the
global part of your widgets which means
that you can easily use it when you’re
creating different landing pages okay
great so now that we finish that
and what we need to do of course is we
need to set the baton in the first
section to scroll down all the way to
the third section okay so what we’re
going to be doing is we’ll go to the
third section settings because we wanted
to scroll to the third section and what
we will do is we’ll go to advanced in
advanced over here we’re going to be
adding a CSS ID okay now go ahead and
copy this and I’ll simply go back to the
button and that’s in the first section
in content link make sure that you paste
this the CSS ID after the pound key
make sure that there’s a pound key over
there and the moment you do that when
you press it it will automatically
scroll down to that section so that’s
really cool now that we’ve created we’ve
created so much stuff on our page I’ll
just pour some water alright now that we
have created a lot of content a lot of
sections a lot of columns a lot of
widgets it’s time to open up our
navigator so I’ll go ahead and press the
navigate and as you can see it’s full of
stuff right now I’ll go ahead and
minimize the sections that columns the
widgets as you can see there are three
sections okay so I can use the navigator
to really get in a quick overview of
what’s going on over here and I can
really organize it as well I can give it
a name okay so I can actually call this
hero by double clicking I can call this
this was the takeaways right and the
third one was formed to the form section
and when I press on it it automatically
Scrolls to that section that’s great and
I can go ahead and select a column and
will automatically bring it to that
column in the column settings so that’s
really really awesome also we added some
custom positioned images and some ocean
effects and in the pro navigator what
you can see is you can see these blue
lines are they are indicating that there
are motion effects and custom positioned
images so you can get a real clear
overview of things that you’ve created
and things that you
and to work with that accordingly so
I’ll go ahead and close that and right
now let’s move on to the responsive
responsive modes for the mobile on
tablet because a lot of potential
customers they they will view this page
on their mobile devices so sure let’s
have a look exactly how how we can make
responsive adjustments to make your
design look great on mobile as well so
for this webinar I’m going to be
tweaking the first section to show you
exactly how it works so first of all I’m
going to be starting with the responsive
mode I’ll go to tablet so this might be
something that you have already done or
might not have used but something that I
like to use a lot for creating layouts
and organizing the composition for
tablet and mobile modes is using the
column width percentage so I’ll go ahead
and choose the column width the column
setting over here as you can see there’s
the column width and over here I can
simply change this I can change it to 60
such a little bit flexible space and of
course it needs to be 100% to take up
the full width so I’ll just change this
to 40 and as you can see you can very
quickly just change the layout over here
to suit your mobile device so I’ll go
ahead and delete these because I’m not
gonna be using it let’s have a look
there we go
and let’s open up the mobile mode now
and I’ll open up the Navigator as well
so it will help us I’ll go ahead and
select the hero section so I’m
straightaway in the section settings and
I’ll just show you some advanced
responsive settings over here so I’ll go
to advanced responsive and one of the
things that we can do is we can reverse
the columns so reverse on mobile as you
can see the first column has got the
text the second column AV has got the
image so the moment that I reverse it
the second column and then and the first
column is switched
okay so I’ll switch it back because I
won’t be using that and what we can also
do is we can hide the whole section the
entire section can hide it on mobile by
click by simple
visibility hard on mobile as you can see
it’s grayed out at the moment that I
hide the panel over here you can see
that the first section doesn’t show on
where about which is could come in handy
when you’re creating specific sections
that you want to have visible on only
desktop and in tablet only mobile so you
can really create that experience for
your visitors and I’ll go ahead and and
not not use that because we’ll just
carry on over here making some tweaks
for mobile first of all if you have
noticed the elemental layer is out of
sight it’s because we gave it a negative
top margin in desktop mode remember
before so what you set in desktop mode
it’s automatically applied here by
default so in order to bring it back
what we’ll do is it’s in the first
column that’s what I know and it is an
image okay so I know that it’s over here
and what I’ll do is I’ll just go to
content just to confirm but I know that
this is the logo the elements or logo so
I go to advanced and the moment that I
unlink the margin because I set a
negative margin in the desktop mode the
moment that I unlink it it won’t get
that negative 100 margin and yet will
come back to its its original place over
here so as you can see we’ve got the the
logos back and let’s go ahead and start
it a bit so in style and I’m gonna make
a little bit bigger okay so I’m gonna
change the width as you can see they’re
responsive handles over here so they
indicate that these settings can be used
for responsive editing okay you can see
tablet desktop so these are specific
only four only four four for the mobile
right now so I’ll go ahead and increase
that I’ll set that to 40 and I’ll align
it to the centre I’ve got a content and
align it to the centre over here and
next I’ll select the icon list widget
and in lists are also align it to the
centre and in style in list
align it to the centre yes and then text
I’ll go ahead and increase it a bit okay
so I’ll go ahead to typography and I’ll
decrease it I’ll make it smaller okay
great
the next thing that I’ll do is I’ll
create some space between them so I got
it advanced and I’ll add some padding on
the top so unlink the padding I’ll
change it to percentage and on top I
just add at 5% next I’ll go to the
heading widget that’s too big okay so
what I’ll do is I’ll first of all in
content I’ll align it to the center and
in style I’ll just go ahead and change
the size to 36 pixels and I’ll change
the line height as well I’ll change it
change it to pixels and I’ll change it
to 48 that’s cool and the letter spacing
I’ll bring down a bit to bring it
together there we go
negative two okay cool
and what I’ll do here is also I’ll add
some spacing so I’ll go to advanced and
I’ll unlink the padding set it to
percentage and on top
I’ll give it two percent great now let’s
move on to the baton widget and what
I’ll do is I’ll align it to the center
and in advanced I’ll and link the
padding as well a lot of unlinking let’s
have a look I’ll change it to five
change it to percent and I’ll give it
five percent on the top and I’ll give it
five percent on the bottom as well okay
great so now let’s have a look at the
custom position images okay so I
actually I don’t want them to show on on
the mobile mode okay so what I’m gonna
be doing is I’ll select them and I’ll
just go to advanced and I’ll go to
positioning sorry I’ll go to responsive
and I’ll simply select hard on mobile
and out
ran out so I’ll go and do that over here
let’s have a look hard on mobile I’ll
select this one as well
responsive hard on mobile and the last
one hard on mobile so the moment that I
hide the panel you can see that these
custom positioned images they they don’t
show up okay okay so that’s great now
let’s have a look at let’s move on to
the image okay so I’ll use the Navigator
to to find my image over here let’s have
a look there we go okay we can see
that’s the image I can also give it a
name you know and then navigate this I
can find it back easily so that’s really
cool and let’s let’s change some things
for the image of the app so I’ll go
ahead in style
I’ll change the width I’ll change it to
over here go back to the section
settings and I’ll go to a style and I’ll
go to background and I’ll just change
the position over here I’ll change it to
top right okay and I’ll change the size
of the background image as well because
the white that’s there the the the
quarter circle is a little bit too big
so I’ll just I’ll go ahead in size I’ll
choose custom I can pay attention that
these are all mobile specific rights
this is what we only see on mobile so
I’ll choose custom and over here I’ll
simply I’ll set it I set it to 50
okay 50 is cool okay great so now we
almost done
I just want to add some space on top
over here so I go to the section
settings and I’ll go to advanced and
I’ll for the last time unlink the
padding over here and I’ll change it to
percentage and on top I’ll just give it
five percent and that’s great okay so
let’s take some questions over here yes
I’d like to remind you that the webinar
will be available on the channel so you
can read you can watch it again so no
worries if you missed something you can
check it out again go back and scroll
along why okay so Kemp spot printer Nell
ornate Lance it’s got a question why do
you put the margin and padding two
percentages a set of pixels this is for
mobile responsive design the percentages
are relative units relative to the
column that it’s in so the moment that
the screen size changes the the padding
itself will will be red will will change
relative to the column size which is a
very good for responsive responsive
editing so the responsive behavior is is
you don’t you don’t have to tweak that
too much and so that’s why I use the
percentage
let’s have a look Leo Leo August with
all the changes that you made does it
make sense to save publish every now and
then in cash of a crash or a similar
event so it’s your work is automatically
been saved sorry I didn’t mention it
it’s automatically been saved and you
can also save as draft every now and
then if you want to but as I mentioned
before we’ve got the history over here
with as you can see I’ve been working
now for I think about an hour maybe we
can see all of the edits that are made
you can see I edited the label on the
form I I am used this section around I
change the background all of these
things I can go back to them and so I
can really control exactly what what
happened so you don’t have to be afraid
that something would got lost because of
a crash ok great so let’s go back I’ll
go ahead and close the Navigator I’ll go
ahead and close and navigate and I’ll go
back to the desktop mode and now that we
finished creating our page I’ll go ahead
and hit publish and we can preview we
can see our live page over here and as
you can see it works we can just drop
down like so here we’ve got all the
sections that we made and everything
looks great so that’s really cool um
another thing that we can do in the save
options is we can save this entire page
as a template in our library so I can
call this a landing page landing page
template okay and then it’s in my
library so I can quickly reuse it and
create other pages over here and I can
just insert that on the fly so I can
really create a lot of pages that will
save you a lot of time setting that up
from from from from the girl also
another thing you can do is you can save
sections as templates so I can go just
right-click a section I want to save
this contact as
foom section I want to save it as a
template so I’ll just right-click that
and say I’ll just save it as a form
template and I can just reuse it as well
as you can see it shows over here and if
I want to add a new section on a new
page somewhere else you know I can just
I can go ahead and select my library and
my templates and I’ll just go ahead and
insert it and the moment that I insert
it that’s what we’ll just show so that’s
really great I’ll go ahead and delete
this another cool tool that you can use
by the way is the finder okay I don’t if
you a lot of you know about it well if
you use it or not
I use a lot too in improve my workflow
you can use it with command E or control
if you’re a PC user and you know use it
to search for for things that I want to
do or places I want to go essentially as
a search bar that offers very easy
navigation between different pages and a
lot of different dashboard settings so I
don’t have to go back to the dashboard
and search for things for example I can
go ahead and and and type add new and
very easily I can go ahead and create a
new page and and there are a lot of
other things that that you can do okay
so we’re nearing the end of the webinar
I’ll go ahead and bring myself back like
sir there we go okay so this is just the
tip of the iceberg there really is so
much more that we can learn an elemental
Pro are really provides you with a lot
of tools to create highly converting
landing pages as well as fully fledged
websites such as the form widget that I
mentioned before motion effects to
really help bring your design to life
pop-ups to keep your visitors engaged a
theme builder to visually customize your
websites headers footers archive pages
single posts and a lot of other areas on
your site and a lot more so I think I
think you’re ready to take your first
steps with with Elementor and you know
create your own stunning landing pages
and proudly publish them
like to invite you to join our Facebook
group with loads of helpful tips and
tricks also become a part of our huge
elemental community full of like-minded
web creators everybody’s helping each
other out becoming better at what they
do also don’t forget to subscribe to our
YouTube channel full of all types of
tutorials to really help you master your
your elemental skills and lastly also
check out our website check out the Help
Center for easy access the knowledgebase
F accuse Docs and a lot more lastly I
like to remind you that you can re-watch
this webinar it’s going to be a video
it’s going to be on our channel we’ll
send you a link to the materials to
create this landing page so feel free to
re-watch it and recreate the page
step-by-step and then you can also apply
these skills to create your own
attractive converting landing pages for
all types of business if it’s a
hospitality industry restaurants
software companies gyms ecommerce a lot
more so I wish you good luck and most of
all enjoy being creative very important
thanks for tuning in and ciao for now
[Music]
