Live Webinar: How to Create a Landing Page Faster Using Blocks

Join us as we show the exciting new process of creating landing pages using Blocks.

first I want to welcome you all
elementors
to our first live webinar and I’m Ben
CMO of Elementor today I’m joined by one
of our lead designers Bogdan Fishbein
now you might have seen some of his
awesome speed art videos where he
magically combines Photoshop and
Elementor to create truly one-of-a-kind
pages hi Bogdan so sadly we have only
one microphone so I’ll be doing most of
the talking but that’s that’s actually
good because that will allow the magical
hands of Bogdan to work today we’re
gonna go step by step through a new
faster process of creating a page using
blocks blocks is a new feature of
alimentar 2.0 that is currently in beta
what blocks are are pre-designed section
templates that introduce a flexible page
building process so if you think about
it a full working with templates is
great you get a full page but sometimes
it doesn’t match the exact need that you
want and to do all the customization for
a well-developed and well-established
template is somewhat difficult blocks
are much more simple more independent
and allow for a flexible and dynamic
process that you can drag and you as
you’ll see you can start with a
prototype of basic design and then
customize it and make it unique so I see
there was a our first technical issue so
you should be forgiving because it’s our
first webinar so we’ll be posting to
Facebook the updated live address
momentarily and then we might be seeing
I see people are starting to stack up
here and yeah so we’ll give it one more
minute or two so actually this blocks
feature is pretty cool with start we’re
starting out with about two hundred and
variety of categories so we categorized
about 15 of the most popular sections
people need from call to action if fa
Q’s services hero headers everything you
need to create any kind of page and
that’s of course just the start we’ll be
adding more Mora blocks as we go along
so it’s really easy for beginners
instead of trying to tinker with a
template and understanding how to drag
it and sometimes it’s done it doesn’t
fit they can choose any block add it to
the page
and mix and match any type of blocks
blocks come now as light or dark colored
so pick one that fits your website and
start designing and customizing it for
professional designers it’s also very
helpful because it can it can improve
their workflow instead of starting from
scratch they quickly prototype create a
page within minutes and then customize
make them make it their own and reuse
them again and again in their projects
so I think it’s a good time to start
right now Bogdan will be showing you how
to create this page and I will follow
along and try to explain what it does so
we will start by just second Bogdan what
you are seeing now is a the new blocks
menu so you see what Bogdan did is click
on add template then chose the blocks
tab and here you have a wide range of
categories if you go to hero it filters
through all the hero blocks we can see
what we think is best
browse around and insert it
and you see all the elements of the
block then we can change things but
first let’s add all the other blocks as
well so we have a hero at the top a
services section below that so this was
the services that we wanted hello world
press zone and our final section is call
to action so you see here there’s a huge
variety for you to choose from now you
see that without any problem all of
these sections are standalone and they
work well with each other because
they’re so simple and easy to use
now we’re going to start doing the
customization baktun already removed the
background image and now we’ll be
tinkering with the gradient background
and this is the background that we
created in advanced Moglen is changing
the opacity to get it to mix with the
background color so the the business
that we’ve we’ve invented is called the
beard trimmer and this is a business for
hairstyle
and I think it’s so much easier that the
topography is set and the layout is said
you don’t have to hassle with everything
just to make it look decent you can go
on and customize it to more unique font
family and setting of course all the
padding and margins are also done the
only thing that we sometimes do in the
process of designing the blocks is
changing maybe the ratio increasing
margin or pairing but we will usually
stick to the same initial ratio so we
see that the hero had heard of the first
hero which is the most important part of
the page because it what it’s what
people see the most that it’s a two
column layout that we chose now walden
is creating the link with a an
underlined link effect that will change
on hover
instead of the video we still don’t have
a video for this business so we’ll use
an image and we’ll we will do a sort of
cool effect here which is the use of
z-index so if you’re not familiar
I invite you to go to the documentation
because we won’t have time to explain it
but basically it sets which layer is on
the front and which is on the back and
using minus margin we can actually get a
nice effect where the title is in the
front of the makeup is that makeup or
wax beard wax let’s call it that hey so
this gives it a nice nice effect out of
the box yeah header is finished look how
much time was that can someone did
someone time it that it was fast so
welcome to everyone joining us I see
already a hundred people are watching
which is nice so hi everyone also from
Bogdan here next services of course
because we are starting with blocks
which are very simple and black and
white light and dark so we are
customizing them and using adding colors
and it’s really easy that we start off
with something very simple and then do
the customization according to our
website colors
yeah so now we are setting the
black-and-white image and now we’re
going to show a nice effect where the
image is on the background and we add a
background overlay which is a gradient
of white but the top of which is with an
overlay so yeah you can see that you
don’t have the the image is visible only
on the top and it gives it a nice
shining effect which is very unique in
this for this page now we’re going to
continue to customize this section and I
see people started posting questions and
that’s fine we will have a Q&A session
later we just want to finish this
tutorial so people can start using the
blocks feature of Elementor once it’s
out currently it’s in beta so everyone
can go and test it on your dev sites and
you see that the block the services
section already comes with a nice shadow
and a nice feature for the hover shadow
of each of the columns and this just
states that it’s not blocks are not like
super simple to simplistic not to be
beautiful but we are taking what is
initially in the blocks and taking it to
the next step and customize it
customizing it to fit this page
so Bogdan is now adding editing the
column and adding some yeah a hover
effect of a sin a sin line a thin red
line that appears on hover also
accentuating a bit the drop shadow and
yeah now he duplicated the the column so
they get the same effect without having
to recreate it now we need to yeah play
around a bit with the space using blocks
you’re still going to do some
customization and changes but having
that initial setup really helps working
fast as you can see this is a great tool
for professional designers to scale up
their work and move faster and more
efficient of course
so I see the same theme of red repeats
in the title yeah and you know colors is
also always important I mean we start
off with simple black and white blocks
and this is for prototyping and getting
you the right start but I do recommend
you use bold colors and interesting
colors on your designs because you see
the effect that it gives to the whole
page second section done it looks great
okay so the third section of our
hairstyling landing page is the call to
action section now this is going to
you’re going to do total transformation
to this to this part right so most of
the blocks do have a light and dark
versions but not all of the blocks in
this case we don’t have a light version
so what Bogdan is going to do is reverse
all the colors so so the white title
will be dark and vice-versa
and we’re going to show a really cool
double hover effect here which is nice
so you see the image already has a hover
grow and effect
so now we’re fixing the titles and if
you’re using typography usually a good
rule of thumb is to repeat the same
families throughout the titles and text
elements or at least fonts that are
aligned well together
we see the same red repeating in the
button border
yeah now we did a nice hover effect for
the button so what we will do in this
section is combine the image animation
Gro animation with a background
animation to separate animations that
will work together to create a really
nice effect
so now Bogdan is going to the section
settings and under background type use
this image right here of all the
barbershop tools we yeah we start with
the position of center center and this
aligns the image to the center of the
section yeah
on top of this we put a background
overlay to sort of add a get a haze
effect to the image of the background
this also puts the image on the front of
course in focus so we are adding an an
on hover we were adding another image
which is actually the same image and
this will allow us to do the this effect
the position now is center-right and
this means when Bogdan will hover over
this section two things will occur they
grow the growth of the image will be
present and the background itself will
move to the left so yeah we’ll add
another effect on hover which is another
background overlay effect which will add
another haze you see it goes now to
hover and add another white effect now
with a different opacity so on hover you
see three things happening then three
animations happening at the same time
the main image pops out and grows the
background moves two sways to the left
and all the image on the background
kind of Hayes’s so when we hover over it
it really looks like something is
happening and that into that small
interaction that took us two minutes to
make that’s all the difference between
something that looks nice too so so tell
us users how long did it take us to
create a complete full page using blocks
I think now we’re about 15 minutes in
our short tutorial and it really
emphasizes the effects we’ll be doing a
lot of more tutorials and guides how to
use blocks because we believe it’s a
great tool it’s a new feature of
Elementor 2.0 beta and I think now it’s
a good time that you can ask us any
questions and we’ll go over the question
that you posed us and let’s look okay so
Mik Casilla I hope I am pronouncing it
right says hi guys
when will you start supporting landscape
view on tablets or provide proper
instruction how to implement that there
are a lot of us who are not so talented
with coding well it’s true now that for
tablet landscape you need you can use
custom CSS and we have currently we
offer three breakpoints in our editor we
might be changing it in the future but
currently we think this is enough for
most of the screens so keep updated we
might change it or add in the future I
don’t have any information on that
upload too much different so this is
Lois Lara Lara says upload too much
differences fonts could be a problem for
load time what do you think guys well I
would
that the Google Fonts that you get
initially inside Elementor should be
enough for most of your projects because
I think now it’s over 800 different
fonts and as you’ve seen in in this
tutorial we used only a group yeah if
you have I would recommend if you have
specific fonts that you like use them
they shouldn’t
I mean adding a new font doesn’t
influence the page speed we got that
question and it’s just it doesn’t
influence page really small the smallest
file that is uploaded and a small
request another request to the server so
it’s really not substantial and you
shouldn’t worry about it
it’s really fine hi guys
with animator is it possible to create a
magazine website
this is moisés we have people from all
over the world so it makes me proud but
I’m sorry I can’t pronounce possibly the
names yeah magazine websites that’s
definitely possible we even created a
tutorial explaining explain just how to
use how to create a magazine website
with a theme called collar mag so check
that tutorial out and yeah hello will
you demo the header/footer
we will not demo it yet but it’s coming
soon that’s bad cat design okay alright
let’s see
when we have a pop up in the element
this will also come up in the future I
don’t have an ETA how to integrate
Elementor with Gutenberg well Gutenberg
is not out inside the core once it’s out
we have will have more clear ideas but
we’re already preparing and blocks a
Gutenberg will also have blocks this has
all been created to enable in the future
compatibility maximum compatibility for
the user will it be possible to not load
the images with the blocks and actually
no when you upload the blocks it comes
with the image but you’ve seen in this
tutorial how easy it is to quickly
customize it so I don’t know that the
images are have all been tiny then made
small so it shouldn’t affect on it
shouldn’t have any effect and we didn’t
show it but maybe now is a good time
that all the blocks are also mobile
responsive so yeah
let’s check out few more comments in
them in the meantime what is the
transition speed you used for the smooth
feel I think what they mean is the
transition that you did for the Gro
effect I think it was – if I’m not
mistaken the transition that you set for
the movement of the it was – can we have
a copy of this template once you’ve
finished guys well before we release a
template that’s important for you to
know there are a lot of tests and
reassurances that we have to run to make
sure that everything is aligned and
there are no issues so it takes a little
time but usually we do release them
eventually what’s this little dynamic
button on image corner top right okay
that’s a good question and I’m glad that
people are very they have a good eye for
details so this is a feature of
Elementor pro 2.0 but it’s still we’re
going to release a post about it and
we’re going to talk about and there’s
going to be a better soon so I think
it’s too soon to talk about that but I
have to tell you it’s it’s a great new
feature and it will wow you and we might
even have some sort of sneak coming up
for it and you can of course imagine
what what it might be I would love to
hear your your guesses
in the in yeah if you finished okay well
while I’m talking if you know this then
Bogdan moved to mobile view and started
customizing everything you can create a
totally different alignment and style
for mobile devices yeah and it looks
perfect and all the blocks themselves
once you insert them they are pre-built
mobile responsive so you can start using
them and customize them and they will
look great I see a lot of new questions
so let’s see when its version 2 coming
well I don’t have an ETA yet but we’re
very advanced into going to release
elemental Pro beta so good things are
coming so please be patient
will we okay that’s an important
question that someone asked will we be
able to create our own blocks on a new
tab this will not be I mean there might
be changes for this in the future but
currently what you do after you maybe
you can show it back then after you
create your section you can actually
save the section now this save the
section that you create you can save it
as a section to the library okay you
give it a name and you save it then you
can reuse it on any project yeah it’s
the same as blocks then it will appear
when you go when you go to a template
and you go to my templates you will see
and you’ll be able to to use them if you
if you use the template it’s the second
if you use the template widget then
you’ll add you will actually be able to
choose that template that you just saved
and
use it wherever you want on your website
what’s great about that if you change
your template at one time at one place
it will change the entire area of the
entire sections throughout your site so
if you put like a banner and you place
it throughout your entire site you
change it in one area and it changes
throughout your site which is cool
in the upcoming Elementor 2.0 in regards
to custom post and custom fields
integration can we expect to be able to
dynamically load data into most of the
elements yes that’s the question that’s
the answer to that it will take time I
mean all the integrations to ACF and
other features it will take time so the
better that we will release will be a
long beta where we will take your
feedback and improve it and do all these
changes that are needed but it’s going
to be awesome why did you choose not to
have the alt on image carousel widget I
mean I I don’t have an answer to that
the only answer is for the newer widget
that we’ve introduced media carousel
that actually can serve as an image
carousel we do have the alt the alt that
can appear on top of the image will
Elementor be using CSS grid in the
future I don’t have an answer to that I
can check and return in the future will
you put an apply to all section columns
when you add a single animation it is so
tedious to edit in each every column or
section and regarding animation I’m not
sure in any case I wouldn’t I wouldn’t
recommend like using animation on each
and every section in column I’ve seen
some of those websites and they’re kind
of hideous
animation should be used thoughtfully
and with with regards to with planning
and not overuse it where can I get one
of those sickest Elementor shirts yeah
we we might have a competition in the
future I don’t
currently only employees have them and a
few few others and but maybe in inward
camps that we will be present at we will
share them will my templates get a
preview I know that’s an issue and I
know many people want a preview but
there are some technical issues with
that but we might add it in the future
we are aware of that hello Ben say
something about the theme builder what
can we expect well I think it’s it’s too
early to share right now exactly what
what is planned but I can tell you that
there’s a lot of functionality waiting
to happen and it will solve a lot of the
issues that users face today with
WordPress will you have a better way to
organize our own saved section that
we’ve created in the library in the
future like in organized folders well we
keep improving the way you filter and
search through templates we recently
added the filters and search so we’re
constantly thinking about how to improve
it we are aware that it’s it’s an issue
so you should expect improvements
already with blocks you can see the the
drop-down that we’ve added and yeah
there will be improvements there what is
the ETA for blocks again I don’t have a
specific ETA but the blocks will be kind
of soon it will be sooner a lot sooner
than the the the pro 2.0 release can we
also have images for templates like
theme images I’m not sure if I
understand what that question means but
if
if that if you mean like featured image
then yes this will be in Elementor 2.0
will you add a video portfolio widget in
the future right now you have to post a
portfolio but I don’t see an option to
showcase my video per category that’s an
interesting idea yeah we might have that
I think yeah I think we’re about 35
minutes into this webinar and Bogdan do
you want to say something thanks for
watching guys I hope you liked it and in
future we can do more and more yeah
thank you we’d love to get your feedback
after this webinar I hope you’ve enjoyed
it for us it’s very important to keep
this community growing and keep the
communication lines open with you
so now Elementor has 600,000 active
installs we’re not even two years in the
market so we’re thrilled about this
growth and will thrilled that people
enjoy a product we can promise that
we’re going to do our best to help you
and give you tutorials and I see people
are asking if you have a portfolio site
so yeah we might post it if you want his
is dribble so thank you very much
everyone for joining in until next time
this is Ben from Elementor bye everyone
bye bye