Overview
Transcript
Overview
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!
Transcript
in the comments I hear there’s so many
people from all different places that’s
really it’s really amazing okay so
welcome to elemental free basics webinar
my name is Eve and I’m a web designer
and lead educator at elemental and I’m
really excited to introduce you to the
Internet’s leading WordPress drag and
drop site builder elemental and this
webinar is going to give you a basic
breakdown of 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
two together so I’m gonna go ahead and
share my screen there we go so this is
the landing page we’re going to be
creating today so what exactly is a
landing page and what is its purpose
okay so a landing page is a page on your
site that visitors arrive on via some
kind of advertising such as a Facebook
ad a Google search could be a link in an
email and the page is designed with a
specific purpose to convert the visitors
into leads by taking a specific action
just like you see on our page over here
there’s a button in our example this is
a marina art gallery and it has a
special winter discount the purpose of
the page
as you can see here the purpose of the
page is to convince the visitors to
contact the art gallery and inquire
about the prices so they can cool
directly over here they can press and
they’ll automatically call if they press
that button in the mobile they’ll
automatically trigger the phone app
they’ll make a call and elemental
basically 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 and it’s a
drag-and-drop builder meaning that you
work directly on the page you can see
the results in real time exactly the way
that your website visitors would see it
and there are many advantages with using
Elementor such as saving a lot of
and development costs because elemental
allows you to design and implement
designs without using code and it also
gives you full design options for page
layouts it has a huge selection of
widgets that you can use ranging from
basic such as text just like you see
over here image button image carousel
widgets which we’re going to be using
today and we also have pro widgets such
as the call to action a countdown and
forum widgets and there’s a lot more so
also I’d like you to know that you’re
free to ask any questions in the chat
we’re going to be trying to answer them
we wouldn’t be trying to answer all the
questions and I’m going to be pausing
every now and then to answer some
questions okay so to start working with
Elementor you need to create your first
page so let’s just go to our dashboard
okay and under pages we’ll go ahead and
click add new and I’m gonna give it a
name or gallery and I’ll click edit with
elemental now to start off with a clean
page you go to the bottom panel and
click settings and under page layout you
choose elemental canvas so this is the
easiest way to create a full blank page
without a header a no-footer exactly
what we need for our landing page so
let’s just go over the the editing area
and an elemental and see what we have so
this is the elemental interface on the
right side is the editing area this is
where you’re going to be adding and
editing elements that form the layouts
of your page and on the left side over
here is the panel here are creative
tools called widgets and you use these
widgets to add elements to the page like
the headings the paragraphs images and
videos and you can always access this
area by clicking the widget icon
on the top right and on the top left we
have the hamburger menu this is where
you have more options like setting
default colors and default fonts so I’ve
gone ahead and set my primary my
secondary my body text and accent text
to Montserrat and soon you’ll see
exactly how this helps speed up my
design process so I’ll go back and
there’s other settings over here as well
you can view your page you can also exit
back to your dashboard and on the bottom
we have the bottom panel here there are
some other features such as the page
settings where we were before
where we can change the title of the
page here we have the Navigator okay so
we’re gonna get back to the navigator
right now it’s empty because there’s no
content we haven’t created the page yet
so but the Navigator will help us get a
clear and organized view of our page
okay so I’ll go ahead and close that and
over here we have the history the
history you can see view so you can see
recent changes and you can go back to
them and over here is the responsive
mode as you can see we can make some
mobile adjustments for a tablet in
Mobile and we can preview the page and
lastly we can publish and there are
others some others save options as well
which I’ll go over soon
so let’s take a close look at how pages
are actually built okay so there’s two
ways you can start I’ll go and start off
with the library okay so this is where
we can preview elementals pre-made
blocks and pages the template kits as
well as well as your own templates and
you can just insert them into your page
so what you can do is you can just
preview it I’ll go ahead and preview
this just make sure that that’s what I
want and then I’ll go ahead and insert
it into the page as you can see it’s
inserted and so let’s just check out
what what we have over here okay so
elemental uses three main building
blocks sections columns and widgets
okay so sections they are the largest
and they can be identified by the blue
border over here
you can see that’s the section and and
the widgets sorry and the column can be
identified by the black the black dashed
border and inside them we have the
widgets okay and you can control the
section column and widgets with their
handle over here you can just simply
right-click it and you can you can edit
you can duplicate you can delete let’s
go ahead and duplicate now we have two
sections can delete can go to the column
I can duplicate the column now I’ve got
two columns with the same content inside
and what you can do as well is you can
move sections and columns and widgets
you can move them around by simply
dragging and dropping them okay so let’s
say I want to move this title over here
the blue line indicates where it will be
positioned so I just can do that like
that and if I want to move this text to
the other column here I’ll go ahead and
do that I can delete I can delete this
and I can delete this so I can really
play around with it and get the layout
that I want and section columns and
widgets they have three tabs on the
panel on the Left
layout style and advanced so sections
and columns they have layout style in
advance and widgets they have content
style and advanced and soon we’ll see
exactly how these settings are used to
create our landing page but first I’ll
go ahead and delete this section because
we’re going to be creating our page from
scratch okay so another way to add
sections is by pressing the plus icon
and then you can simply choose one of
the preset structures so this is two
columns this is three columns this is
four equal columns this is two columns
with the smaller column on the left etc
and
and afterwards you know you can choose
it you can still tweak it to your liking
on the go so let’s dive in and start
building our page so I’m gonna build I’m
gonna start with section 1 I’m gonna
choose two columns okay and I’m gonna
control its height as you can see this
is the section over here with two
columns and I’m going to control the
height in the Layout tab and I am going
to give it a minimum height okay this
means that I’m going to set the section
to be a minimum height so no matter the
amount of content in it it will always
be at least that Heights and I’m not
going to go for pixels I’m gonna change
the units I’m going to change it to VH
okay which is view height which is a
relative unit and basically a hundred VH
means a hundred percent of the viewports
height and the viewport is the top of
the of the window over here till the
bottom you can see at the blue line
indicating a section it takes up a
hundred percent of the viewports height
and for example sake if I do fifty you
can see that it takes up 50% of the
viewports height okay so we’re going to
be using this during this webinar and
I’m gonna go ahead and set it to hundred
and in style I’m gonna give it a
background color so I go to style and
under background background type will
set it to classic as you can see there
are a couple of options I’m gonna go set
it to classic and in the color picker
I’ll go and paste I’ll paste my color
code and I want to save this color
because I’m going to be reusing it so
press plus okay as you can see it’s
added over here and I can drag them
around and replace them you can delete
them so I’ve got that in my color picker
that’s great and let’s go back to the
widgets and drag an image widgets as you
can see here we’ve got the widgets I’ll
drag an image widget into the left
column you can see the blue line
indicating where it’s going to be
positioned and I’ll click here to enter
the library which currently is empty
and I’ll go ahead and choose select
files and in my downloads
I have images and I’ll choose this dog
further not uploading okay then
uploading insert the media okay great
that’s a dog a dog painting over here
and now what we’re going to be doing is
we’re gonna be dragging in a heading
widget I got a question let’s have a
look okay sea otter is there a way to
turn a page you’ve already built into a
template not just a section but the
whole page is there going to be a replay
it goes so fast okay so yes and you can
turn the page into a template you can
change you can save a section as a
template as well I’ll show to you at the
end it’s part of the webinar as well but
definitely yes you can do that okay so
let’s move on
I’ve got another question George Madden
do we even need to select a theme if
we’re using elements or don’t see the
need am I missing something can we get a
few words on how the theme ties into
elemental patch okay right now we’re
creating a landing page or landing page
we don’t need a header we don’t need a
foot we don’t need for a full page we
don’t need you know other theme related
stuff so we’re using the holo theme the
lightweight elemental hello theme which
basically you can create landing pages
very very quickly and it’s a very
lightweight theme and yes if you’re
creating a full-fledged website you need
a theme you know to be able to access
the header and the footer and to-to-to
to be able to design that as well so for
this webinar we’re focusing specifically
on landing page so I hope that answered
your question a little bit and I’m gonna
go move on let’s have a look
we’ll go ahead and drag in a heading
widgets okay so the heading widgets drag
it into the column on the right and I’m
gonna go ahead and change the text over
here in content title paste my text
Maryna art gallery and I’m gonna go to
style and I’ll change the text color to
white okay and the typography as you can
see the font family is set to default
remember the monsterettes that we set
for the headings so it’s automatically
applied here so we don’t have to set it
up all the time and it will save us a
lot of time in while we busy trick I’m
sorry creating the page so I’m going to
change this to 16 pixels and I’ll change
the weight to 300 so it’s a little bit
thin and I’ll change the transform to
uppercase and then I’ll go ahead and set
the letter spacing to 4 so it’s
stretched out okay great now what we’re
going to be doing to speed up the
process I’m just going to go ahead and
right click and duplicate the heading
okay and I’m gonna go ahead and change
the text this is going to be the 40% off
it’s gonna be the big bold 40% off text
so I’ll go to style and I’ll change the
typography I change the size to big 125
pixels I’ll go ahead and set the weight
I’ll give it a bold it’s 800 weight I’ll
play around with the line Heights a bit
okay 0.9 and I’ll drag the letter
spacing all the way down to negative 5
okay great now I’m gonna go ahead and
drag in a text editor widget and what
I’m gonna do here is I’m gonna set this
in star I’m gonna give it a white text
color and in typography we’re gonna go
to transform and I’m gonna go to kappa
capitalized so now every first letter of
the word is
gonna be capitalized okay great now
let’s move on to our CTA this is gonna
be our baton right it’s going to be the
call to action so this baton over here
I’ll first I’ll change the text see the
work so when the user presses on this
button they’ll automatically be scroll
down to the second section which we
haven’t built yet and the way that we’re
going to be doing that is I’m going to
add a link that’s going to set it to
scroll automatically to the second
section which I’m going to show you how
to do that soon let’s have a look I’ll
change the size to large so it’s a big
button and here I’m gonna add an icon
and I’m gonna choose an hour fun –
awesome five font or some five library
I’m going to be choosing angle down
there we go so that’s going to be
indicating the movement down towards the
second section I’m going to position the
icon after the text and I’m going to be
adding some spacing let’s see 15 that’s
great
okay now let’s go to style and good is
typography over here and I’ll change the
weight up to 700 so it’s bold and I’ll
choose uppercase and I’m gonna change
the background color I’m gonna give it a
pink red background color so I’ll go
ahead and choose background color and
I’ll paste my color code and I’m gonna
save this as well so now I’ve got the
blue and the pink red saved over here
that’s great and as you can see the
button isn’t a full rectangle so I’m
going to be giving the border area so
we’ll set it to zero so now it’s a full
rectangle so that’s great okay I see
that we’ve got a question over here
a new slab is this presentation
utilizing the free version or the pro
this is free this is the free version
not the provision the free vision okay
so let’s carry on now I went on Heather
I want I want to change some settings as
well on however I wanted to add an
animation so I’m going to add an
animation I’m gonna add the sync
animation so on however it sinks down
okay so that’s great
now as you can see the text here and the
image that doesn’t look all too all too
great I’m going to create some spacing
over here to make it the layout to make
it look a little bit better so enter the
column settings
okay so I’ll press on column and in
advanced over here I’m gonna give it
some padding okay so I’ll give it a
hundred pixel padding so there’s a
hundred pixels on top 100 pixels on the
rights the hundred pixels on the Left
100 pixels on the bottom positioning
that the content in in the middle of the
column which is really great that’s what
I want and the image over here need to
needs to be aligned as well little bit
at the top of economy and so I’ll go to
the left column settings and in vertical
align I’ll choose middle okay so now the
image is positioned in relationship to
the texts over here so that’s great
and that’s it for the first section now
let’s see if there are any questions I
have a look over here if there are any
questions a t-shirt from Nick Eric from
Holland right how do you move text
around you can simply drag and drop like
a shot before you can drag and drop the
blue line indicates where it will be
positioned will you be covering a be
split testing and I won’t this is going
to be focusing on creating the landing
page Adrian
exactly what’s the point of paid
WordPress themes and
okay so I’m not going to delve into that
now I’m going to be focusing on this
landing page but a paid WordPress theme
really gives you access to a lot of
options to create a full-fledged website
and things come in all different types
of all different forms and shapes but
maybe we can answer in the comments by
typing okay so let’s carry on with the
second section so to speed things up
what I’m gonna be doing is I’m simply
going to duplicate the first section in
a duplicate right-click duplicate the
first section and now I have two
sections two of the same sections okay
and what I’m gonna do is I’m gonna drag
the left column to the right column to
the left so now the images on the right
size and I’m gonna enter the section
setting so I press here on the handle
and in style I am going to change the
background color to the pink red which
are saved in the color picker over here
automatically okay and I’m going to
change the text in the first heading I’m
gonna change it to the winter collection
so I’ll go ahead and enter the first
heading and then I’ll change the text
and in the second heading I’m also going
to change the text so I’ll go to the
second heading and paste the text over
here which is a little bit too big
as you can see shall just go to style
and I’ll change the size and typography
I’ll change it to a hundred pixels so
now it fits nicely and I’ll go to the
button as you can see the background
color with a button and the background
color of the section they’re the same so
it’s hard to see the button earlier but
let’s just change the background color
to the blue we said before so in style
the background color I’ll click on blue
okay that’s great
and I’m gonna change the text I’m gonna
change the text to inquire now I’ll go
back to content and I’ll paste inquire
now and what I’m going to be doing for
the link is I when they use it when the
visitor clicks on the link
I wanted to automatically trigger a
phone call
okay so I’ll drill it by using a tell
scheme so I’ll show you how that looks
like in the link I’ll just paste that
that’s the number okay and so basically
when the user clicks on it then it will
automatically trigger a phone call in
your in a web page and also on a mobile
phone
okay so I’ll change the icon I’ll change
it to phone so I’ll just go ahead and
choose the phone okay great so now let’s
move on to the right column I’ll go
ahead and delete the image and I’m going
to be dragging in an image carousel
widget okay it’s gonna be image I’ll
just use the search bar image carousel
widgets and I’ll drag it into the right
column okay and I’ll press over here to
upload my images so I go to upload files
and I’ll just select all of these except
for the dog painting and I’ll go ahead
and upload them okay it seems to be
taking some time is the uploading maybe
we have some questions in the meantime
[Music]
yes you can you can do that when should
I use an inner section versus a regular
column layout and Josh when should I use
an inner section so if you’d like to
have one section okay with let’s say
you’ve got a title on top and then under
that you want to have on the left side
you want an image and on the right side
you want some other text okay so then
you would use an inner section to get
that done but there also other ways to
get the same result
you can use inline and there’s some
other stuff to build the page the way
you’d like okay so our images are
uploaded okay great so let’s carry on so
what I’ll do is I’ll click create a new
gallery okay and as you can see over
here we can enter a caption so these are
all of the paintings basically that are
on sale so what I’ll do is I’ll give
them a sell price over here so I just
copy paste copy paste copy paste you can
change the prices of course insert the
gallery and the right bottom you press
insert the gallery okay great so what
I’m going to be doing is I’m going to
set the image size to fool and I’m going
to set to show only one slide and for
the navigation errors I’m going to set
only errors and for the link I’ll choose
the media file so that when you press on
it will automatically open up the image
so you can see the painting which is
great
let’s go back to its settings let’s have
a look I’ll go to style now and in
navigational city a position of the
errors to be outside the image and I’ll
set the size to 20 and I’ll change the
color to white so the errors are white
and I forgot something over here back in
contents remember the captions that we
set the text with the prices so as you
can see over here the caption over here
we can we can link them with the text ok
so we can set it to title I’m going to
set it to caption caption is the text
that we put in before and we can also
link it to a description etc but I’m
going to set the caption to caption and
with the moment that you do that in
style there’s another drop-down called
caption and then you can style it to
your liking as well okay so let’s style
this I’ll set the alignment to left I’ll
change the color to white and in
typography I’ll change the size to 20
and I’ll set the weight to a thin a thin
hundred okay that’s great now let’s set
the button in the first section to
scroll to this section okay so in order
to do that what we need to do is we need
to enter this section settings okay and
in advanced okay we’re going to be
adding a CSS ID over here I’m gonna call
it C works okay
copy this copy this CSS ID and go to the
button settings over here okay and in
the link and contents simply paste the
CSS ID after the pound key okay the
moment you do that when you click on the
button that will automatically scroll to
the the second section
okay so that’s that’s cool now let’s go
to section number three I’ll scroll down
I’ll press plus like before if I choose
a section with one column and like
before I’ll give it a mean height of a
hundred VH like before okay and what I’m
going to be doing now is I’m going to
control the content width okay so this
is the column over here this is where we
put the content and I’m going to control
the content width as you can see it’s
smaller it’s getting bigger and bigger
and bigger and bigger so I’m going to
set this content with to 700 okay and
what I’m going to be doing for this
section is I’m going to set a background
video okay it’s going to be really cool
I’ll go to style and I’ll select
background tab or select video and as
you can see there’s a video link we need
to put a video link it could be a
youtube link Vimeo link or a link to a
video file that we that we need to
upload to our media library which I’m
going to be doing what I’ll do is I’ll
use elementals finder so either press
command or control e so I’ll go and do
that and I’ll type dashboard okay and
I’ll press down command and press
dashboard so it opens up in a new tab
I’ll just move it to the left over here
and I’ll go to media okay like before
add new and I’m gonna upload the video
mp4 file okay
I’ll just upload that and I see we got a
question over here let’s see
the images you using a very big what is
the best size in kilobytes and the
smaller is the better the smaller the
better
let’s see I also want to remind you that
the video is going to be available after
the last livestream right so just so you
know now I’m going to mention it
afterwards as well you can re-watch the
webinar you can recreate the page I will
also send you a link with the material
that I use here the images in the video
so it’s it’s available after the launch
live stream another question is it
important to add an inner section to
start with also can it be added after
yes you can add it after that it really
depends on if you playing around if you
you know if you got a wireframe you need
to create it then you need to think
about the best way to to create your
layouts but yes it’s not about
importance just you know you there’s
different ways you can create the same
layout it really depends but if you
realize afterwards what you can use you
can duplicate your section and you can
play around with it and add an inner
section and you know you have two
section and after it’s deleted so you so
you you can play around and really see
what so what’s the best way to to create
your design okay great so the video is
uploaded so I’ll go ahead and press the
video and over here I’ll copy the link
okay and I’ll go back to my page I’ll
close the finder and I’ll go ahead and
paste the video link and there we go
as you can see there’s a video playing
in the background which is really cool
and what I’m going to be doing is I’m
going to be setting a background overlay
okay so I’ll go to background overlay
drop-down and the blue that we said
before I’m going to be choosing the
background type here classic and I’ll
set the color to the blue that we chose
before which is cool and I’m gonna make
it a little bit darker so in opacity
just choose opacity I set it to 75
and for the blend mode I’m gonna choose
multiply it’s a little bit darker which
also looks quite cool and what I’m gonna
do now to speed up the process is I’m
going to copy this special winter prices
the big bold text I’m gonna press copy
and then click paste over here and I’ll
change the text this is going to be the
contact ass right so go ahead and I’ll
go ahead and paste this contact ass and
then I’ll also copy and paste the text
editor widget and in style I’ll align it
to the center next I’ll drag in our
search for and drag in social social
icons widget like so and as you can see
we’ve got Facebook Twitter and YouTube
I’ll go ahead and choose YouTube let’s
have a look I’ll go ahead and change
Twitter I’ll change it to Pinterest just
so you can see can search for Pinterest
and you can insert that and I’ll change
the shape to square and in style I won’t
go for the official color I want to add
a custom color so I’ll choose the pink
that we set before and it’ll add some
padding and I’ll also add some space
between them and by the way over here
because this is the contact as a section
right so over here yeah this is where
we’d add your links you contact your
Facebook page or your links that you had
over here but an another great way to
design your Contact Us section is by
using a contact form and elements who
Pro has a contact form widget that
basically lets you visually
design your contact forms so you can
work faster and you can design a lot
better okay so let’s move on are there
any questions I’ll just check over here
and let’s have a look
Sydney why is elemental only available
for business plan in WordPress we don’t
earlier will serve a personal plan very
wide how about adding in an opt-in form
let’s see I think we’ve got the form
widget with a lot of advanced settings
over there as well and that’s for the
pro final mentor pro there’s a lot of
widgets that will basically help you
really create a highly converting
landing pages we shall delve into a
little bit afterwards as well okay so
let’s carry on what I’m going to be
doing now is because we created all of
this content I’m going to open up the
navigator and now it’s full of all the
stuff that we created and I’ll go and
minimize three sections right so I can
press the second section and
automatically be taken to the second
section I can click here and I’ll see
that I’ve got these two columns these
are the two columns that we added so
it’s very clear to see I can see the
widgets that are in them and to be even
more clear what I can do is I can rename
the sections okay so I can cool this
hero section and this one I can call the
gallery okay and the third one just
double click I can call it contact and
this will really help us work faster and
really understand and
really create the pages in a more visual
way more organized and structured way so
I’ll go ahead and close this and the
next part we’re going to be moving on to
the responsive mode for mobile for
mobile and tablet because a lot of
potential customers they’re going to be
viewing this page on their mobile
devices so let’s just make some
[Music]
responsive adjustments so that your
design also looks good on mobile so I’m
going to be tweaking the first section
to show you to show you exactly how that
works so what I’ll do first is I’ll go
to the responsive tablet mode okay and a
nice trick a nice way to organize your
layout is by going to the column
settings and we have a column width okay
in percentage and I’ll go ahead and show
you if I change this to 40 and this to
60 it needs to be a hundred right and
turtle so I’ll just go to the right
column and I’ll change this to 60 so I
can really control that for for the
mobile devices I’ll go ahead and delete
it so we won’t be using that and now
let’s just go to the mobile responsive
mode like so and I’ll go to advanced
hold on I’m gonna go to the section
settings now in order to understand
what’s going on again to make it clear
for myself what I’ll do is I’ll just
open up the navigator okay and I’ll just
simply click on the first section so I’m
already automatically in the sections
settings and then I’ll click on advanced
and under responsive okay there’s a
couple of things that we can play around
with first of all what we can do is we
can reverse columns as you can see the
image the image column the image column
is above over here and the moment that I
press reversed columns the image column
is below okay so that’s a cool way to
play around with that and visibility I
can also decide to hide this whole
section on mobile so as you can see it’s
grayed out indicator
that that it’s not visible on mobile so
when I hide the panel you can see that
we stretch away see the second section
so that’s hidden on mobile so that’s
also something that you can you can use
to to control what you see on your own
on your mobile and desktop and tablet
modes now what we’re going to be doing
is I’m going to select the right let’s
have a look I’m going to select the
second the second column over here and
in advanced I am going to unlink the
padding so I can set individual values
okay
and I’m going to set forty pixels on the
top forty pixels over here okay and I’m
going to set 30 pixels on the right on
the bottom I’m going to set 60 pixels
okay I’ve created the space over here
let me just do that again on the bottom
creates 60 pixels okay and of course on
the left the same as on the right 30 and
you can see that the content is
straightened out and looks a lot better
already
now what we’re going to be doing is
we’ll go to the heading widget and by
the way these settings over here these
are only applied for mobile okay you can
see that by by the mobile icon over here
so we’ve got the mobile tablet and
desktop these are mobile specific okay
for the same way we’re going to be
control controlling the heading I can’t
really change the size so in typography
as you can see here there’s the mobile
icon over here as well so they’ll only
be applied for mobile I’ll go ahead and
change this to 70 so it’s not that big
and so this is this is basically the the
the the page that you see when that when
they land on it right so you can’t see
the button and the button is very
important because it’s it’s the call to
action it’s the CTA so in order to to
make that fit in properly I’ve decided
to make the image a little bit smaller
so in style as you can see we’ve got the
image width we
is also responsive okay and I’ve chosen
to set that to 80% and now the button is
it’s visible
straight straight away um and what I’ll
do is I’ll go to content and I’ll choose
alignment and set the image to center
and and I’ll do the same for the heading
I’ll go ahead and set the to the center
this heading as well in content I’ll
align it to the center again these are
all mobile specific settings okay and
the text editor alignment Center and the
button alignment Center and in style the
batter now change I’ll make it a little
just a little bit smaller
change it to 16 16 pixels okay great
so as you can see mobile editing is it’s
easy and fun um and I’ll go ahead and go
back to the desktop mode and I’ll close
the Navigator cool let’s just go for
another round of questions maybe with
some questions over here
shouldn’t you save your work okay good
question so the work is saved
automatically also you’ve got the
history over here okay so we’ve got all
the things that we changed the column
padding the the section everything we
can we can go back and do that you can
also if you want you can also let’s just
go and you can also choose save draft
okay every now and then you can just
press the save draft okay and that will
work like that and of course now that we
done and what we’re going to be doing is
we can preview it okay and we can
publish it so we want to go live I’ll go
ahead and press publish and just before
I carry on over there let’s see if
there’s another question
okay so I’ll just carry on okay so what
we’ll do now is we can do we finished
creating the page so we hit publish and
we can preview the live page so I’ll go
ahead and press preview and let’s check
it out so see the works automatically
brings us to the second section with the
special winter prices the images with
the price with the sales price we can
inquire now we can press that and we’ll
make an automatic call on the phone if
we press it as well and on the bottom we
have a nice contact as section with an
image running in the background and some
social icons so visitors can contact you
as well um I’ll go ahead and go back
over here and what you can also do as I
showed before we can save the draft we
can also save as template there was a
question before save as template so we
can reuse it and and creates a lot of
pages on the fly so I’ll call this
landing page okay and I’ll just press
save and then here in my templates we
can preview it and simply create a new
page and insert it and so we don’t have
to work that hard and what we can do
with sections we can do exactly the same
will save you a lot of time save as
template and we’ll just call this hero
hero template okay and hit save and it’s
automatically it’s in your my templates
ready to preview a ready to insert in
the page ready to to create your next
landing page so I’ll go ahead and close
this and like I showed you before you
can use the finder as well to save you a
lot of time so ctrl command e and and
you know basically this is it’s
essentially a search bar that offers you
easy navigation between different pages
and the desk dashboard settings so I can
type here I can say create and then you
can automatically create a new page
if I want to go and check out what I
published now the landing page so I got
a landing page landing page as you can
see here I can preview it so that’s it
really helps you create new pages and
preview existing ones on the fly okay so
now we’re nearing the end of the webinar
and this is just the tip of the iceberg
and and there’s so much more that you
can learn Elementary is a powerful web
design tool meant to help you grow in
your business and your career an
elemental pro provides you with even
more tools to create highly converting
landing pages and full fledged websites
such as the full widgets that I
mentioned before emotion effects to help
you bring your designs to life pop-ups
to keep your visitors engaged a theme
builder and this there’s a lot more okay
well that’s it now you’ve be ready to
take your first steps with elements oh
and create your own landing pages I’d
like you two to join our Facebook group
if you haven’t already there’s a lot of
helpful tips and tricks’ be part of our
huge elemental community full of
like-minded people all creating things
on the web everybody’s helping each
other you know becoming better at what
they do of course also don’t forget to
subscribe to our YouTube channel which
is full of interesting tutorials to help
you master elemental and one last tip
before I go also on our website and you
can check out the Help Center for easy
access to our knowledgebase there’s
really a lot over there a fake Hughes
Docs and a lot more and like I said
before we’re going to be sending you a
link with the materials needed to create
this landing page the images and the
video and you know I feel free to
re-watch the webinar and recreate the
page you can do it step-by-step and I
hope that I hope you enjoyed the webinar
and I wish you good luck and most of all
enjoy being creative so thanks for
tuning in
ciao Munna
