Hi and welcome to the Elementor Basics Webinar. This Webinar will give you a basic breakdown of Elementor and show you how to use it to design, build, and publish your own Landing Pages!
hi and welcome to this elemental free
basics webinar my name is Eve and I’m a
web designer and elementals lead
educator I’m really excited to introduce
you to the Internet’s leading wordpress
drag-and-drop site builder and a mentor
especially during these challenging
times and I really hope that everybody
is healthy and staying safe okay so this
webinar will give you a basic breakdown
of elemental and show you how to use it
to design build and publish your own
landing pages just like the one that
we’re going to be building together and
these skills that can be applied to
create attractive landing pages for your
own businesses in all different types of
industries to help convert potential
customers it could be the hospitality
industry restaurants gyms ecommerce and
a lot more so let me just share the
screen so you can see what we’re going
to be building we’re gonna be building
this landing page as you can see it’s
one online courses website it’s a
communication course over here we can
read more about it you can join it at
the bottom there’s a button to download
a free sample so in general what exactly
is a landing page okay so first of all a
landing page is a page on your site that
visitors arrive on via some kind of
advertising it could be a Facebook ad or
Google search could be a link in via
email and the page is designed with a
specific purpose to convert visitors
into leads the visitors they need to
take a specific action for this to
happen and in our example an online
courses website just like I showed you
they wanted a landing page to direct the
visitors to one of their online courses
okay so this is the communications
course and that can do that by just
clicking join now and that will lead
them to the courses page visitors can
also click the read more button that
will take them to the next section on
the page they’re provided with
information over here what the course
has to offer and they can also join over
here and when we scroll down there’s
another button where they can download a
free sample of the course okay so
basically alimentar is the perfect tool
to help you create landing pages it’s an
advanced page builder that allows you to
build entire websites page by page with
your own custom design it’s a
drag-and-drop builder meaning that you
work directly on the page and you can
see the results in real time exactly the
way that your website visitors would see
there are so many advantages with using
Elementor such as saving a lot of time
and development costs because with
elemental you can design and implement
the design without using code and it
also gives you full design options for
page layouts there’s a huge selection of
widgets that you can use ranging from
basic such as text image battens icon
lists widgets which is what we’re going
to be using today and pro widgets such
as call to action countdown form widgets
and a lot more so I’m going to stop
babbling and I just want to let you know
that you know feel free to ask questions
in the chat we’ll try on to all of them
and I’ll be pausing every now and then
to answer some questions okay so to
start working with elemental you need to
create your first page so what we’re
going to be doing is I’ll just go to our
dashboard over here and under pages
we’ll go ahead and click add new and
we’ll just give it a name and we’ll
click edit with elemental now to start
with a clean page you need to go to the
bottom panel okay and you can click the
Settings icon over here and in page
layout we’ll just choose canvas okay so
this is the easiest way to create a full
blank page without a header and a footer
which is exactly what we need for our
landing page okay so let’s get familiar
with the elemental interface on the
right side is the editing area of the
page okay so this is where you can add
and edit all the elements that form the
layout of your page and on the left side
is the elemental panel as you can see
over here there’s a creative tools
they’re called widgets and you can use
these widgets to add elements to your
page just like headings paragraphs
images videos and you can always access
this area by clicking on the
we just icon over here on the top right
and in the top left we’ve got some more
settings over here we’ve got setting
settings such as the default colors
fonts theme style we can also click here
to view the page to preview the page and
we can click exit to dashboard to go
back to our WordPress dashboard let’s
move on to the bottom panel there’s more
features over here as well just like we
saw before we’ve got the page settings
where we can change the page name we can
change the page layout and a lot more
next to that we have the navigator and
right now the Navigator is is empty
because we haven’t created any content
so basically what the Navigator does it
helps us get an organized view of all
the content on our page all the elements
all the the things that we build so
we’re going to be coming back back back
to that later so we can see exactly how
that will help us out so I’ll go ahead
and close that
next to that we’ve got the history the
history helps us to see the recent
changes that we made and we can go back
to them we’ve got powerful revisions as
well and there’s no need to be afraid
while you’re working everything’s
automatically saved so that’s really
cool next to that we’ve got the preview
changes option where we can preview the
page while we busy creating it and
lastly when we’re done creating we can
publish the page and we’ve got some
other save options as well that we’ll
delve into later as well okay so let’s
take a closer look at how pages are
built there’s two ways that you can
start as you can see over here what I’m
going to be doing is I’m going to start
off in the library so this is this icon
brings us to the library and here we can
preview elementals pre-made blocks and
pages okay
the pages are also known as the template
kits these are just a lot of pages that
we created and you can just preview them
like so and if we want to insert it we
can simply insert it we can go back to
the library I’ll go to blocks and I’ll
insert this block for example and now
what a block is it’s not a page it’s
just part of a page so it’s actually you
know sections you can just add certain
blocks all together you can create
page very quickly on the fly so let’s
just insert this block and see exactly
what it’s made out of okay so
Elementor uses three main building
blocks sections columns and widgets
sections they’re the largest ones and
they can be identified by the blue
border just like you see over here and
inside of them we’ve got the columns and
they can be identified by the black
dashed border and inside them are the
widgets as you can see there’s a title
there’s some text there’s a button and
they’re inside the column now to edit
them you can simply right-click the
handle so let’s say we want to edit this
section you can right click and there’s
a lot of settings over here we can
duplicate delete let’s go ahead and
duplicate as you can see just duplicated
all of the content we can delete let’s
duplicate the column now I’ve got two
columns with identical content now you
can really play around with it what we
can also do is we can move sections
columns and widgets around by simply
dragging and dropping as you can see
here I can just drag this widget the
blue line indicates where it’s going to
be positioned when you let go so now
it’s inside the same column just above
the text widget I can also bring it over
to another column so it’s a positioned
over here and I can also switch between
the two columns by just dragging and
dropping and play around with that I can
also drag the column width like that and
really control what my layout is and
what what we’ve got going
okay so sections columns and widgets as
you can see also they’ve got three tabs
in the panel on the Left I’ll just click
on the section over here the section in
the columns they have the layout style
and advanced tabs and widgets there we
go
widgets they have the content style and
advanced tabs and soon we’ll see exactly
how we use these settings to create our
landing page first what I’m going to do
is I’ll just delete this section and
because we’re gonna be creating our page
from scratch so I’ll just show you
another way to add sections is by
pressing the plus icon over here we can
simply choose one of the preset
structures
for example one column two identical
columns three identical columns two
columns where the right column is larger
than the left column and we can just
simply insert that and start building
and we can tweak that on the go as well
so I’ll go ahead and close this and
let’s just start building our page
okay so first let’s just check out the
page again and just see what we have
over here so this is the first section
and actually it’s made out of two
sections where the upper section and the
the bottom section they have the same
blue background color and as you can see
here the content is just a little bit
longer and the content in the second
sections is just a little bit shorter
the width and in the second part you can
see that there’s two columns here with
the text the buttons and another column
with the image so let’s just dive in and
see exactly how we can build this okay
so let’s just add a section with one
column and let’s control the width of
the content okay so as you can see the
width of the content the content is in
the column so that’s the column column
width so over here if I drag this you
can see I don’t if you can actually see
really clearly but now it’s getting
smaller 700 and that’s increasing over
here okay so I’ll just set this to 1,200
so I can control the the width of my
content and what I also want to controls
I want to control the height of the
section itself okay so what I’m going to
be doing is I choose the height and I’ll
set min Heights min height means that no
matter the amount of content we put in
the section it will at least be a
certain height now the default is 400
pixels we can increase that there we go
going to be using pixels I’m gonna be
using a relative unit which is I’m going
to use V H stands for viewport height
which is in relation to the viewports
height okay which is your browser height
over here so a hundred VH simply means
that it takes up a hundred percent of
your viewport height as you can see by
the blue lines in the section and if I
set it to 50 V edge for example it takes
up exact
going to be doing is I’m going to be
setting that 220v edge like so and now
I’m going to style the background okay
so in this section settings I’ll go to
style and what I’m gonna be doing is I’m
gonna give it a blue background okay so
I’ll just go to background type there’s
a couple of background types but I mean
she’s classic I’ll choose the color and
over here I’m just gonna add this blue
color okay there we go and we can very
easily save this color as well by
pressing the plus icon over there I
already saved it before so it’s already
over there so I’ll just go and select
that that’s great um now what we’ll go
and do is we’ll go back to our widgets
over here and I’ll search for an icon
list widget okay so can very easily
search icon list and drag and drop it
into the column as you can see we’ve got
the content style advanced tabs and in
the content tab I’m just gonna delete
two items so we just left with with one
item and I’m gonna be changing the text
in the first item okay this one is going
to just click it over here and I’ll
change the text it’s gonna say online
courses now the color is a little bit
dark so it’s hard to see so we’re gonna
fix that soon but let’s just go back to
the page over here so you can see it’s
going to be white and the icons gonna be
yellow orangish so let’s just do that
let’s first change the icon I’m gonna go
to the icon library so I click on that
and I can simply search for graduation
I’ll insert that so great now we’ve got
all of our content going now we need to
style it so I’ll go to style and over
here in style I’ll go ahead and select
icon and I’ll give it this orange yellow
color okay so once again I pre save this
color before you can add your color
codes on the bottom of it here press the
plus it’s let’s add it to your palette
and you can organize your palette very
easily you can just drag and you can
drop it into the bin over here to delete
can reorganize them so it’s it’s very
handy and very helpful for your workflow
okay so that’s the the icon now I want
to I want to increase the size because
it’s a little bit small so I’ll increase
the size over here 20 is good let’s go
to the text drop-down and let’s change
the text color to white okay and now
what we need to do is just style it a
bit so I go to the the font family I’ll
go to typography and I’ll set the font
family to Montserrat
that’s good umm let’s have a look
increase the size 20 pixels I’ll make it
bolder so I’ll go to weights I’ll set
the boldness here 700 so it’s nice and
bold and I’ll set the transform I’ll set
it to capitalized so the first letter of
each word is capitalized and and that’s
that’s good for now so that’s that’s the
first section okay so that’s this
section over here now let’s move on to
the second section it’s actually the
second part of the hearers section right
so what we’ll do is we’ll add a section
with two columns over here this time
we’re going to be adding a content width
of just a little bit shorter okay so not
so we can really control the layout so
this is 950 pixels and let’s go to
height and also set min Heights change
it to the relative VH units and set it
to 80 so it takes up 80% of the
viewports height which is great now
another thing that we can do over here
in layout is we can control the column
position so right now the column as you
can see it’s position in the middle we
can also position the column at the top
okay so this is cool and what we can
also do is we can set the column
position to stretch so it takes up a
hundred percent of the sections height
which is also really cool but I’ll go
ahead and set it to top like so
and let’s just style it now as well so
I’ll go to style like before I’ll go to
background and you know you’ve got
classic you’ve got gradient background
that you can play around with you’ve got
a video background you got a slideshow
background you can play around with and
which are really really cool settings
I’m just gonna go ahead and set it back
to also to the blue color and what I
also do is I’ll go ahead and set a shape
divider now shape divide is a really
cool way to play around with your
section I’ll go ahead and set a shape
divide on the bottom I’ll set the type
as you can see there’s a lot of types
I’m gonna set it to waves so now there’s
waves on the bottom of the section and
we can play around with that as well
let’s have a look you can play around
with the width okay as you can see I’ll
go ahead and set that to you can get
really really accurate over here set the
height like that 215 we can also flip it
we can invert it and there’s some other
settings as well so I’ll just leave it
like this that’s cool and next what
we’re going to be doing is we’ll just go
back to the widgets and we’ll drag a
heading widget into the Left column okay
and this is going to say the the the
title is the your success in
communication so let’s just do that
let’s just have a look over here what’s
going on so here we’ve got your success
in communication which is one heading
and we’ve got another heading over here
that says start here with with a
different color okay so let’s just go
back this is going to be the your
success in communication so I’ll just go
ahead and add the text here in content
and let’s style it so I’ll go to style
change the text color to white what
we’ll do is we’ll go to typography and
I’ll set the font family to Google
Google’s play fair play fair display
that’s great or set it to 50 pixels and
also set the transform
I’ll make it bold as well like before
and I’ll set the transform to capitalize
okay great now in order to save time to
create the second heading I’ll just
simply right-click the widget the
heading widget and I’ll hit duplicate so
I just saved all the settings over with
the styling already that we did and what
I’ll just do is I’ll just change the
content I’ll go ahead and change the
text like so and in style it needs to be
yellow so I got a text color I’ll just
set it to the yellow where before and I
wanted to I want to bring it up a little
bit okay so it seems part of the first
heading what I’ll do is I’ll play around
with the line height in typography okay
so I can play around with that as you
can see I can really control its how
close it is to the first heading over
here so that looks great let’s move on
to dragging in a text editor widget
below that there we go um I’ll go ahead
and change the text there we go that’s
the text and let’s style it I’ll change
the color also I’ll change that to white
and I’ll go to typography and I’ll set
the family to Poppins also a Google font
that looks cool I’ll make it less bold
so I’ll set it to set its way to 200 and
also set this one to capitalize okay
that’s great now what I want to do is I
want to add some space between the
heading widgets and this text editor
widget so what I’m going to be doing is
I’m going to be adding some padding okay
so what I’ll do is in the text editor
widget I’ll go to advanced and I’ll
unlink the padding values so I can set
them individually so I want to set
individually I want to set them only at
the top so I’ll go ahead and add 30
pixels of padding over here which is
exactly what I wanted
okay so next let’s move on to the button
let’s drag in a button widget over here
and I’ll
go ahead and change the text this is the
first button that’s gonna say join now
so I changed the text over here join now
and in the link over here this is where
you can add the link to the course of
sign up page so I’ll just go ahead and
add that link over here and you know it
can also be an external link if you’re
using a third party events platform for
example for courses and other stuff you
can go ahead and add that as well
let’s just change the size of the baton
to medium and let’s style it so I’ll get
a style and in typography I’ll change
the font family to Poppins as well
that’s great I’ll change the weight to
well that’s great now as you can see the
button itself has a normal state and a
have a state normal state is what we see
now however of course it means when we
have over the button you know we can
change certain styling aspects so for
the normal button states let’s just go
to the text color and set it to the blue
that we saved before and for the
background color let’s change it to the
yellow okay that’s great
and let’s go to the heavy state and I’m
just gonna leave the text color as it is
it will inherit the text color as is and
I’ll change the background color I’ll
change that to a darker yellow orange so
I’ll go ahead and add that over here
it’s a darker yellow orange so when we
hover over it it’s a darker orange and I
can also add a hover animation I was a
couple of average animations we can
choose from I’m gonna go ahead and
choose floats so it floats up nicely
which is really cool next let’s also
play around with the border-radius I
want to control the border I want to
make it look like a pill pill shaped
button so I’ll go ahead and increase the
border radius as you can see I’ll just
go ahead
set it 250 pixels like that okay great
now in order to save some time we’ll
simply duplicate the button okay like
that and let’s just go back and check to
see exactly what we have so we’ve got
two buttons next to each other right so
let’s just carry on with a button and
style the second button and then we’ll
see exactly how we get them next to each
other okay great so let’s change the
text this one’s gonna say read more so
I’ll go ahead and change the text over
there and this button okay we’re going
to set the link to automatically scroll
down to the middle section which
contains the course information we
haven’t created that yet so I’ll show
you exactly how to do that later but
that’s a link that we’re going to be
adding here that will automatically
scroll down to that section as you can
see when I duplicated the button that
automatically copied the link that we
added in the first one I’ll just go
ahead and delete that as well okay great
so let’s style it I’ll go to style and
for the normal state let’s just change
the text color I’m going to change the
text color to the yellow orange right
now we can’t see it because the
backgrounds got the same color so let’s
change the background color and for this
what I’m actually gonna do is I’m gonna
change the background I’m gonna remove
the background color so I’ll just drag
down the opacity slider so there’s no
background color whatsoever and instead
of a background color what I’m gonna be
doing is I’m gonna be adding a border
okay so I’ll go and choose the border
type I’ll set it to solid and I’ll
change I’ll change it to a subtle 0.5
pixel like that so it’s nice and subtle
as you can see when we have wherever it
still has the same darker orange yellow
color that we said before so let’s just
go to the harvest state and I’ll change
the background color to that blue okay
so now when we hover over it
that looks great okay so now let’s
position them next to each other so what
I’ll do is I’ll go back to the first
button and as you can see the widget
itself okay it takes up a hundred
percent of the columns width you can see
that with
the blue border over there right it’s
all the way to the end of the column
over there it takes up a hundred percent
of that width and what we’re going to be
doing now is we’re going to be creating
more space so we can actually put them
next to each other so what we’re going
to be doing is we’re going to go to
advanced and we’re gonna go to
positioning and here we’ll choose width
and in width
we’ll choose in line and now as you can
see it doesn’t take app a hundred
percent of the width anymore it only
takes app the amounts of that the object
itself or the element itself takes app
so we’ve got more space to add more more
objects so what we’ll do we’ll do that
exactly the same thing with the second
button go to advanced we’ll go to
positioning will go to width and we’ll
set it to inline as well and
automatically it appears next to it so
that’s really cool now we need to add
some space in between them so I’ll just
go to the first button and I’ll go to
advanced over here
I’ll just unlink the mod margin values
and I’ll just add some let’s have a look
to the right or just increase the margin
over here so there’s some space in
between and that looks great okay so we
can move on to the second column on the
right over here what we’re going to be
doing is we can drag in an image widget
there we go and we can just click over
here to choose an image and we need an
upload an image so I’ll go ahead and
choose that um and I’ll go ahead and
upload the image I’ll insert it there we
go okay great so I also just want to let
you know that there’s a lot of online
sites that you can check out where you
can download free vector illustrations
just like the one that I’ve had in here
I use for this one I used icons 8 that
comes less out there’s really a lot of
stuff that you can check out here and
there’s a lot of other pages online as
well okay so let’s just position the
image a bit I’m just going to position
it very easily I’m just going to go to
advanced I’ll play around with with the
margins just to move it around a bit so
I’ll only
the margin values and I’ll use negative
margins okay so this might be a little
bit intimidating it might be a little
bit you know new to you whatever not but
you can just play around with it and
you’ll see exactly how it effects the
positioning of of your objects and of
the image in this case so I’ll add
negative margin as you can see adding a
negative margin on the top brings the
image app so I’ll go ahead and bring it
up over here on the right I’ll also add
a negative margin as you can see it
moves out to the right over there so I
can play around with that that’s cool
I’ll leave the bottom as is and the left
I’ll give it a positive margin yeah
that’s that’s that’s about right that’s
that’s what I was going for so that’s
great okay so now we created the first
section and let’s check to see if there
are any questions I am
can it al 1971 asks will these sections
automatically adjust for the different
views I mobile tablet and desktop okay
so we’re gonna be tweaking these screens
for mobile later as well in depth for
the first section all of the settings at
your area automatically inherited for
the tablet and mobile responsive modes
and you can really control you can
really tweak them and you can position
them and create a even a different
layout for your for your mobile devices
so yes they’re not automatically
adjusted you can really tweak them to
your lacking and control exactly what
what’s going on it might be a little bit
tricky in the beginning but I’ll show
you exactly soon how that’s done let’s
see McNab which asks does the link
include the hashtag symbol or should I
delete it I deleted that I’ll show you
later on when we do use the hashtag but
I just added a link to to the website
course page definitely if you’re adding
a link don’t add the hashtag before that
if it’s a link that doesn’t include the
hashtag okay cool so let’s carry on
let’s move on and check to see and check
out the next section okay so this next
section we get that by clicking on the
read more button okay so let’s check it
out
also there’s two columns as you can see
here and in the right column we’ve got
to icon list widgets that actually
appear next to each other so I’ll show
you exactly how you can position them
next to each other as well and another
thing that you might see over here is a
heading widget where part of the text is
one color and the other part of the text
is another color so we’ll see exactly
how that’s done over here all right so
let’s scroll down and let’s make a start
in order to save time what we’re going
to be doing
is I’m just going to be duplicating the
entire section okay don’t worry we’re
gonna fix it we’re gonna tweak it it
saves us a lot of time
um I’ll simply drag the right column
over here so the image appears on the
left then what I’ll do is I go to the
section settings and I’ll go to column
position I’ll change it to middle
because this the top setting was copied
over when we duplicated that so now it’s
back in the middle um and then what I’ll
do is I’ll just go to style and I’ll
remove the shape divider okay we won’t
be needing that so that’s on the bottom
over there
I set the type back to none okay also
the this section is background color
we’re gonna change it to white but first
I’m gonna change some content before we
do that so let’s just select this image
and as you can see also it’s the margin
that we just added before it also got
copied over so what we’re going to be
doing is we’re gonna be we’re gonna be
removing that so I’ll go to advanced and
instead of just removing them manually
I’ll just link all of the values
together again and I’ll just delete one
and they’re all deleted instantaneously
so that’s great
next let’s just select a different image
so I’ll just click over here I’ll go to
content I’ll go to the library and I’ll
go ahead and upload a file and I’ll go
ahead and choose this image I’ll go
ahead and insert that and now what I’m
gonna be doing is I’ll position it as
well okay so this one’s going to be
positioned a little more a bit more to
the left so I just gotta advanced like
before I’ll just go ahead and unlink the
margin and I’ll add negative 50 on the
top 50 on the right 0 on the bottom and
negative 150 like that that’s great now
let’s go back to the section settings
and change the background color to white
and the moment we do that the headings
and the text over here they you can’t
see them because the
the same color so let’s just change
those colors as well I’ll go ahead and
select the heading I’ll set that to the
blue that we saved before that’s great
now let’s also go to topography and
change it make a little bit smaller
forty pixels then let’s change the text
I’ll go back to content there we go now
let’s select the text editor widget
go-to style I’ll just change the text
color over here to black okay like that
and I’ll just leave the text as is but
you know it can be different that’s no
problem okay
what I’m gonna be doing is what I’m
gonna be increasing this padding above
here so I’ll just go to advanced I’ll
just increase increase that to 40 which
is great okay so far so good
let’s go back to see what we have okay
so here we’re going to be adding in
between the buttons and the text edit
we’re going to be adding the icon list
widgets over here and they appear next
to each other but before that we’ve got
the starts here okay that’s one heading
it’s gonna say transform your life in
two different colors okay so this is
just like we did before with with the
button we’re gonna be using the in line
method and we’re going to have two
headings appear next to each other two
with different colors so let’s go ahead
and do that we’ll go ahead and position
them I’ll go ahead and select the starts
here heading this is gonna say transform
like that let’s go to style change it to
the blue and change it to 40 pixels as
well then we’ll just simply
duplicate that and in style I’ll change
it to the yellow orange and this is
gonna say transform this is gonna say
your life so we got a content there we
go okay just like before let’s select
the first heading in advanced
positioning width will set it to inline
I will do that to the second one as well
advanced positioning with inline boom
great so they appear next to each other
now let’s just delete this read more
button okay and let’s just start this
join Now button let’s go to style and
change the text color to white and we’ll
go ahead and change the background color
to blue and as you can see the margin
that we added before over here got
copied over as well okay so we’ll go
ahead and delete that
like that and what we’ll do is we’ll add
some margin on top to create some space
I’ll go ahead and add 30 CD pixels and
it’s still set to inline width right
because that got copied over as well so
in advanced positioning I’ll go ahead
and change that I’ll set that back to
default so now it takes up a hundred
percent of the column width and let’s
just check out over here now we’re gonna
be adding the icon list widgets they’re
going to appear next to each other so
let’s see how that’s done there’s a
different way to add two elements next
to each other and that’s by using a
widget that’s called intersection we’re
going to be using this for the icon list
widgets
let’s show exactly what the course has
to offer so let’s just go ahead and drag
in
as you can see there’s the intersection
we’ll drag it in between the baton and
the text editor and right now as you can
see hold on there we go we’ve got a
section with two columns inside a column
inside another section so that’s why
it’s called an intersection so it really
helps us create the layout that we’re
looking for okay
so let’s just start off with the icon
list widgets let’s search for it and
drag it into the left column okay so
here we’ve got all of the list items
over here and they include an icon and
they include text okay
so what I’m going to be doing is first
of all just delete – so we just left
with one and when we go back here you
can see that there’s some text okay so
basically what I did is I just created a
list item without an icon and just the
text and then the rest is all with icons
so for the first one I’ll just change
the text this is the you will learn and
go over here you will learn
and let’s just remove the icon like that
great then let’s add an item okay and
this one’s going to be saying win a job
interview go to the text win a job
interview okay so let’s just duplicate
this a couple of times so we’ve got five
in total like that and then change the
text okay win a job interview get a pay
raise as you can see it’s very easy to
create a lot of content very quickly go
ahead and paste the last one okay great
so now we got all the content that we
want now it’s time to style them so we
go we’ll go to style and what I’m gonna
be doing is as you can see there’s an
icon and text and list drop-down
dropdowns over here I’ll go to icon and
I’ll change the color I’ll change that
to the blue and we saved before and
let’s go to text let’s have a look let’s
go to text and let’s just change the
color to black and I’ll go to typography
and I change the family I said that the
poppins give it a light weight like that
I also set the transform to capitalize
and I’ll play around with the line
height that looks good
and I’ll also play around with the
letter spacing that’s great
and now simply what we can do is we can
just right-click the widget and we can
hit copy and we can right click in the
column next to it and click paste and it
will be copied over very very easily now
all you just need to do is change all of
the text so I’ll just go ahead and
delete the first one and I’ll just leave
the text as is but you just change the
text now we just need to align the map
so let’s just go to the the widget and
in advanced we’ll add some padding on
top okay so I’ll go ahead and unlink the
padding over here and I’ll just add some
padding on top till it’s aligned that’s
cool okay great now let’s just hide the
panel over here so we can check it out
as you can see the header the header and
the text editor widgets they’re not
really aligned over here with the the
icon list widget that we just added it’s
because we used an an intersection
widget with columns and the columns they
have padding over here as you can see
the blue line of the widgets indicates
that there’s space between the black
dashed line of the bow of the column and
the widget itself this is default
padding that comes with with elemental
in the in the column settings so we’ll
just simply go to the column settings
and we’ll go to advanced and what we can
do is we can remove them very easily by
unlinking the values okay so now they’re
just disappeared now there’s no values
we can add padding if we want but I’m
just going to leave it the way as is and
I’ll do the same with with the other
widget like that
okay now let’s set the now that we
actually finished okay
let’s set the read more button in the
first section to scroll down to this to
this section okay so in order to do that
what you need to do is you need to go to
the section that you wanted to scroll
down to okay and entered settings like
that and then you go to advanced and
over here you add the CSS ID it can be
any description word that you want just
make sure that there aren’t any spaces
so I’ve gone ahead and set it to
read more which is the same as the
battle text ok so then all you need to
do is simply copy that and you go back
to the button settings over here and go
to content and go to link and make sure
that there’s a hash ok in front of the
CSS ID we simply paste the the ID that
we just gave we paste it over there
oopsie we just paste it over there and
we make sure that the hash is before
before it so now when we click on the
button it will automatically scroll down
to that section which is really really
cool ok so let’s move on to let’s just
first check if there are any questions
let’s have a look okay let’s just click
let’s just carry on to the last section
then we’ll take some questions after
that this is a small section this is the
last one ok as you can see this is going
to be the download the free sample one
so let’s get started with that we’re
going to just go ahead and add a section
with two columns will control the
content width got a question let’s just
take the question Chris Milty moros
what’s the difference between padding
and margin generally speaking the
difference is that let’s say you got a
widget so the margin is the space
outside of the widgets and the padding
is inside the widget that’s just a very
general explanation I hope that helped
and and let’s carry on okay right so
let’s control the content width I’ll go
ahead and set this to 1200 as well and
I’ll control its Heights or set a min
height of 40 VH okay
and I’m gonna go ahead and change the
background-color go ahead and set it’s a
classic I’ll choose the yellow orange
that we had before and this time I’m
gonna add a divider I’m gonna add it on
the top so this is gonna be waves waves
on top I’ll also set it to invert and
I’m just gonna save some time by copying
this heading here and pasting it over
here and I’ll go ahead and change the
text now as you can see over here I
added a break line okay and this is very
handy when you want certain text to
always appear below other text so
download the free lesson in this case
will always appear under ready to get a
pay raise so that’s why I use the break
line next I’ll just go ahead and copy
the button I’ll go ahead and paste that
over here and I’ll change the text this
is gonna be the download free sample so
I’ll go ahead and change that and what
we’re going to be doing now is we
basically when you click the button you
want the PDF to automatically download
okay so what we need to do is when they
upload a PDF file to the library so
let’s just quickly enter the library by
clicking any image that we created
before and just go to the library over
here we can go to upload files and I’ll
very easily upload the PDF that I want
to use it’s uploaded and I’ll simply
copy the link okay copy link I’ll close
this and I’ll go back to the button and
I’ll go ahead and paste that link over
here okay now what we need to do is we
need to add another setting that will
automatically download the PDF when you
click on it okay so we’ll go to link
options and what we’ve got a couple of
settings over here but we’re going to be
using custom attributes okay it might
sound a little bit
in a little bit technical or whatever
not but this is there a lot of
attributes custom attributes that you
can add and you can learn them and
there’s a lot of resources online but
this one that we’re going to be using is
download is equal to true which
basically automatically when you click
the button will download the PDF so
that’s really cool I’ll show you in a
bit
let’s first add an icon from the library
I’ll go ahead and search for download
and insert us
let’s also star that a bit let’s just
add some spacing over here that’s great
because we copied the button over from
from here there’s still the margin that
we added before so let’s just remove
that ok remove that and over here as you
can see the button itself is in the
right column and what we can do is the
widget itself takes up a hundred percent
of the columns width but we can go to
content and we can go and set the
alignment of the button so I’ll go ahead
and set the alignment to Center so
that’s great and the hover it over here
it’s yellow on yellow which is it’s not
right so we’ll go to style and I’ll just
change the background color to to a
darker blue okay so go to background
color just add the color here so now
when we have Roberts it’s a darker blue
Oh what did I do
it’s just clear that when you clear it
it gets the default colors from that you
set in your default colors over here
just so you know let’s just fix this I
wasn’t in the hava state so what I’ll do
is I set the background color to the
blue and then I’ll go to the have a
state okay this is where I was supposed
to be and I’ll go ahead and paste the
darker color over here so now when I
hover over it
there we go it’s a little bit dark if
you can see okay great so now what we
need to do is I want to align
I’ll go to the column settings over here
I want to align this baton to the middle
it’s on the top over here so I’ll go to
the column settings over here and I’ll
go to a vertical align and I’ll set it
to middle so now all the content in the
column they’re all aligned to the middle
there’s a lot of options that you got
over here I’m just using middle so you
can really play around with it and check
that out next let’s go to the section
settings and in advanced I’ll click
advanced over here I’ll go ahead and
unlink the padding values and I’ll just
add some padding on top as you can see
that’s the space between the column and
the section over here so I’m increasing
that I’ll go ahead and set that to 90
okay so that’s great also for this
specific section over here it’s nice to
have a button that automatically
downloads a form but also it would be
regret to use a contact form over here
especially for conversion elemental Pro
has a contact form widget the dets you
visually design all of your contact
forms so there’s no need for third-party
plugins and really empowers you to work
faster and really design a lot better
so let’s now it be done let’s just check
out the page I’ll go ahead and hit
preview and let’s just click read more
yeah works joy now we’ll bring us to the
course page scroll down a bit more
download the free sample great
automatically downloads so everything’s
working nicely that’s really really
great and like I said before
um ah you know what let’s take some
questions
let’s see if we have some questions over
here Brayden w’s our asks how did you
get the wave between the sections okay
so it’s called the shape divider you
just need to go to section settings and
in layout sorry in style you’ve got a
shape divided drop-down okay so here we
can set
the top and for the bottom and you
simply choose the type you can choose a
lot of different things I chose the wave
the waves so I hope that helps Helle
Peterson asks in the icon lists why did
you copy rather than duplicate the the
checklist in the two columns you can
duplicate it as well when you duplicate
it it will automatically paste it under
it so then you just need to drag it to
where you want I copied and pasted there
just to avoid that that from happening
sometimes it’s more accurate for me to
position my mouse and really work more
clearly so I hope that that helps okay
so let’s just carry on how it good
another question a Bui visvanatha is it
a paid tool or a free tool if paid means
how much ok so right now we’re using
elemental call write this elemental free
so everything that we’re using is is
elemental free and there’s a lot of a
lot more features that elemental Pro has
which I’ll talk a little bit later as
well
ok ok great so let’s carry on ok so
right now we created all of this content
and like I mentioned before it’s time to
open up the navigator ok so there we go
the navigate is not empty anymore it’s
full of the sections it’s full of the
columns it’s full of all of the widgets
so I’ll just minimize that and when we
click on it it will automatically bring
us to it ok so it’s we already have a
clear overview of what’s going on on the
page when we click over here we can see
it’s got one column the second section
has two columns in the first second in
the first column
we’ve got heading widgets and we can
click on them and it will automatically
be selected so it can automatically
start editing it straight away and it
really helps us get a clear overview of
what’s going on on the page another cool
thing is that we can name the sections
ok so we can just double click and I’ll
go ahead and call this here
one I’ll double-click this and I’ll go
ahead and call that here are two there
we go this is the third section which
was the info section about the course
and the last section was the download
free sample PDF so I’ll call that
download so now the clear overview of
what’s going on and soon we’ll see
exactly how that’s going to help us
specifically for our mobile and tablet
devices so like I mentioned before also
you know we’ve got a responsive mobile
mode a lot of potential customers
they’re going to be viewing this page on
the mobile devices so let’s see exactly
how you can make responsive adjustments
to make your design look great on mobile
as well what I’m going to be doing is
I’m going to be tweaking the first
section to show you exactly how it works
so you can apply it yourself first of
all let’s just go to the responsive mode
and I’ll go ahead and choose tablets
I’ll just move the navigator to the side
a bit okay and let’s just check out this
section over here so as you can see
automatically it takes up 50% of the
width writes the column there’s two
columns and there’s 50 50 so I just want
to show you a cool trick that I use when
I’m busy organizing my styling my pages
for a tablet and for mobile I use the
column width settings over here so I can
really control the layout for example as
you can see here in layout i’ve got the
column width and because we’re in the
mobile responsive mode we’re in tablets
you can see over here they’ve got these
handles these handles indicate that all
of the settings that we all the values
that we give for these for these
specific features the column width
they’re only applied for the screen for
the screens that we’re in so for tablets
so not applied for desktop they’re not
applied for mobile ok so here I can
change this to 60% so now this column
takes up 60% and I can select the second
column and I can set that to 40% I guess
I’m already controlling what’s going on
now let’s just delete that because I’m
not going to be using that
and let’s just go to the mobile
responsive mode and tweak this these two
sections okay so here a section one hero
section two let’s just tweak that so you
can see exactly how that’s done okay so
first of all I’m just gonna use the
navigator I’m gonna click on hero one
automatically brings me to its settings
and what I’ll do is I’ll just go to
layout and I’ll go to min height okay as
you can see here the min height and it
also has a responsive handle so all the
all the values I give now they’re only
applied for mobile and I’ll change that
to 5vh so it takes up 5% of the
viewports height okay so that’s one
fifth of the viewport side so that’s
exactly what I need and I’ll just go to
here a section number two and I’ll go to
the Advanced Settings over here and as
you can see there’s a drop-down called
responsive where there’s a lot of
settings that we can play around with
let’s just have a look what we have here
we’ve got in the first column we have
our text and our buttons and in the
second column we have the image what we
can do is we can we can choose to
reverse the columns when we reverse them
on mobile now the image will appear
first and only then the text so we’ll
leave that as is what we can also do is
we can play around with the visibility
we can hide this whole section on mobile
so now it’s grayed out indicating that
it’s hidden on mobile so when I hide the
panel it just disappears okay I’m not
going to be doing that
but it’s something that you can do as
well for example you can create a one
section that you only see on mobile that
you don’t see on desktop and tablet and
another section that you only see on
desktop so you can really control that
watch what you see what you view is your
visitors actually see okay great so
let’s just fix the sizes so all of this
looks great on mobile as well I’ll go
ahead and click on the image there we go
edit image I’ll go to style and as you
can see the width also has a responsive
handle so I’ll go ahead and play around
with that I’ll set that to
advanced okay as you can see the space
here right
the space is bugging me and basically
what happened is it inherited the margin
that we added on desktop okay so it
inherits the settings that you set on
desktop but we can easily get rid of
that by simply and linking them the the
margins okay so now that just
disappeared
they’re not inherited from the desktop
settings anymore which is really great
and next let’s just go back to content
and align this image to the left that’s
great
okay so let’s just go to the column
settings over here and as you can see
there’s also some space here that’s
inherited so I’ll go to the column
settings and I’ll go to advanced and
also unlink the padding values as you
can see just jumped up adjust the
padding just disappeared okay so now I
don’t have anything from the desktop
anymore so that’s great and I can just
leave that as is next let’s go to the
heading widget okay we’ll just change
the size over here in typography you can
see the size says a responsive handle
over here all of these changes are only
applied on mobile I said 30 to 35 pixels
that’s great and I’ll do the same over
here I’ll set that to 35 next let’s
click on the text editor widgets as you
can see it’s highlighted in navigator as
well
so it’s really helpful and I’ll just go
to style typography and I’ll set its
size to 15 pixels so just a little bit
smaller also it inherited the padding
that we have over here so what I’ll do
is I’ll go to advanced and I’ll just go
ahead and unlink that so now it moves up
a bit okay so we need to fix this what’s
going on over here right so the shape
divider and everything so let’s have a
look
let’s just add some space here as well
on top I’ll just add sorry this is just
what we removed now let’s go back to the
section setting so I click on here or –
now we um in back in the section okay so
I’m gonna just fix the mess that’s going
on over here what I’ll do is I’ll go to
layout and I’ll just change the min
height okay what I’m gonna do is I’m
gonna change it to a hundred VH okay I
wanted to take up a hundred percent of
the viewport height and what we’ll do is
we’ll go to style and fix the shape
divider so I’ll go to shape divider go
to bottom and over here the width and
the height they also have mobile
responsive handles okay I’ll just go
ahead and set that – there we go
let’s have a look hold on a second
let’s just go back to desktop mode
because something doesn’t look right to
me let’s check out the final result
right
so the shape divider on the bottom it
needs to be inverted okay great so we
just changed that as you can see it’s
inverted something was bugging me let’s
go back to to our ball mode and there we
go automatically as applied here as well
as you can see there we go it just is
inverted as well and it’s selected here
okay so it’s inherited from the desktop
setting great let’s just bring the
buttons up a bit as well
okay because they’re really on the
bottom over here so in order to do that
I’ll just select the text editor again
and what I’ll just do is I’ll go to
advanced okay and I’ll add a negative a
negative margin I’ll just unlink
and link the values and I’ll just add on
the bottom either negative margin as you
can see what also creates the space so
you can really play around with it and
control what’s what’s going on over
there
so I think that looks great
okay cool so let’s close the navigator
and let’s just hide the panel and check
it out okay great
so I think that looks nice and as you
can see mobile editing it’s very easy
and it’s a lot of fun I’ll just go ahead
and go back to the desktop mode and what
we can also do is we can add an entrance
animation so I’ll just quickly show that
to you because we’re running out of time
we can go to the section we can go to
motion effects okay and we can add an
entrance animation so we can go ahead
and set that to fade in and we can go
set that to slow normal fast so when you
scroll down it automatically fades in
and we can also set that over here in
advanced motion effects entrance
animation fade in normal slow fast so
when we preview that then if you can see
it but there we go that was a slight
fade I showed that to you because you
can really bring your pages to life that
way and also just so you know elemental
Pro is even more motion effects that you
can use to really make your design stand
out such as scrolling and Mouse
animations including really
sophisticated parallax effects so that’s
really cool let’s see if there’s any
questions let’s see
and now we Pukalani asked what kind of
pictures did you put in P&G and what
size and you can add pap and G’s JPEGs
gifts there’s a lot of stuff you can
upload to the media library can just
play around with that sizes as well you
can control the sizes let’s just go to
one of the images over here over here we
can you can choose you can control the
image size at loads foster and it takes
up less resources so that’s really cool
so I hope that helped okay great so now
that we’re nearing the end of the
webinar we finished creating our page so
what we can do is we can go ahead and
hit publish okay and what we can do is
we can preview our live page now
everybody with this link they can they
can see this page it’s live and and
everybody can interact with it okay so
there we go Scrolls down joy now the
download button that’s great like I
mentioned before there’s a couple of
other save options here we can go ahead
and save this whole page as a template
simply give it a name template let’s
just call call it landing page templates
you can go ahead and save it as you can
see it’s in your my templates over here
automatically and you can insert it into
any page and another cool thing is you
can also just select a section right
click the section and save the section
as a template so you can really reuse
them give it a name servers and insert
it into two other pages and really saves
a lot of time
another cool that I used to save a lot
of time is the finder you can just
simply click command or control e to
open that up basically you can simply
search for where you want to go what you
want to do it’s a search bar that offers
easy navigation between different pages
and dashboard settings I can create a
new page add new page very easily on the
fly and I can preview existing pages so
I use it a lot so it really helps me out
and you know this is just the tip of the
iceberg there’s a lot of a lot
or that you can learn elemental really
is a powerful web design tool meant to
help you grow your business and your
career
elemental pro provides you with even
more tools to create highly converting
landing pages and fully fledged websites
such as the forum widgets I mentioned
before motion effects to help bring your
designs to life there’s pop-ups a pop-up
builder to keep your visitors engaged a
theme builder I create a full-fledged
website and a lot more well that’s it
and I think that you’re ready now to
take your first steps with Elementor
create your own stunning landing pages
I’d like to invite you to join our
Facebook group if you haven’t done it
already
there’s loads of helpful tips and tricks
over there a lot of people helping each
other out can become part of our huge
elemental community full of like-minded
web creators everybody helping each
other out becoming better at what they
do don’t forget to subscribe to our You
Tube channel that’s full of interesting
tutorials to help you master Elementor
also check out the website and you know
we’ve got a Help Center easy access to
the knowledgebase
FAQ use Docs and a lot more and lastly
we’ll send you a link to the materials
needed to create this landing page so
feel free to re-watch the webinar and
recreate the page step-by-step also you
can apply these skills to create your
unattractive and converting landing
pages for all types of businesses like I
mentioned the hospitality industry
restaurants software as a service
companies gyms ecommerce and a lot more
and will also send you a link to a
survey to give some feedback on this
specific webinar so we can improve them
and keep making relevant and
to-the-point webinars also feel free to
share your creations inspired from this
webinar in the comments below
and I wish you good luck and most of all
enjoy being creative especially during
these hard times
so thanks for tuning in ciao for now
