Many members of our community love using Elementor in new projects, but still keep their old & static theme layout / page builder shortcodes (yikes!) for past projects.
In this tutorial, we will take one of the most popular marketing blogs, JonLoomer.com, and recreate it using Elementor. This way, you can learn the step-by-step process of recreating any site in Elementor.
Users don’t realize how easy it is to recreate any current site design using Elementor:
– It doesn’t require import / export
– It doesn’t require code
– There’s absolutely no down-time
Join me and Elementor designer Bohdan Fishbein for a webinar that will give you the boost you need to redesign your old site with Elementor, using the Archive template
earlier or a bit late but that’s what
you can do and you have a global
solution like Elemento so I think we can
start I said get smaller you know we can
start yeah so I first wanted to give you
an intro to what we’re doing and why
we’re doing it so I’ve seen a lot of
comments in the elemental community
about people loving our tool they know
it’s the best page builder but yet they
still have their website in the hold
platform I won’t name names but it can
be in an old theme a different CMS all
together outside WordPress and they are
a bit afraid to go through the process
of recreating their site because and I
understand that because it sounds
daunting you think you’re gonna have to
recreate the site with Photoshop and you
know encode and go to the functions.php
they seem to take a lot of time but for
real it’s take yeah they have to contact
their developer their designer so we’ll
show you that it doesn’t take any of
that that time it just takes less than
an hour and you can you can create a
beautiful site using Elementor and do it
visually it’s really fun
so which shows the website Jon Loomer
which is a nice looking website Jon
Loomer is one of the most prominent
figures in Facebook marketing so I
recommend you check out the site and he
has a blog on the home page and that’s
what will recreate I’ll show you with
booked on how step-by-step we redesign
it and also give it a new modern touch
so you can use the same process that
we’ll show you today to recreate your
own site it’s fast it’s fun it’s easy
and without further ado we can start
yeah go let’s do it guys so yeah I’ll
try to be quiet most of the time man so
I don’t interrupt and give you the focus
so if it’s a bit too quiet that’s how it
is and after the after we start we’ll
also have
a quick Q&A where you can post their
questions so Bogdan you just maybe you
can retrace and show again what you did
show well first sure we need to create
our header so let’s let’s go to Jon
Loomer and see what kind of header day
they have they have a dark header mr.
gray it’s simple
yeah they have a menu double menu logo
yeah just do it with white background
yeah do a little bit different my
template header and new header sure we
have it so we going through it and
you’re actually going to use the blog to
create it and yeah I just changed block
whoa how I want it’s more easy and fast
okay in the menu you created earlier
yeah yeah yeah it’s take time you know
it’s a lot of menu here yeah a lot of
links
yeah yeah sure
so as I said we’re going to give it a
bit of a twist so we’re gonna change the
header to a lighter color and the logo
automatically comes from the customizer
right
while Bogdan is doing it I’ll greet
Martin from Ireland and Illya from she
didn’t write where she’s from and Lisa
while we’re working with background and
text mmm we change form to change
background color the background of the
drop-down yeah yeah yeah changing the
font there are you actually following
the font of the website of Jon Loomer or
no it’s it’s I choose a new font so
you’re sticking with the colors that
they have now is important oh yeah it’s
a great power
yeah reflect so it will be known as the
core so what have the logo and the hello
David from the UK and alia from Miami
Florida
well I think that was fast
well we are we already had a webinar
about headers so I think we can move on
to the main course which is the whole
the whole archive page the blue assume
you can’t so save and publish of the Jon
Loomer site it’s a it’s a blog so the
home page features all the recent posts
so that’s what will we create now you’re
back in the dashboard yes now we’re
going back to my templates we’re going
to archive and create a new archive yeah
now I have to say that archive is a bit
more complex than the header because it
features dynamic content now you know
this is something that is takes a while
to to grasp but you see it’s very easy
to control and well you see we have her
here what we create from two seconds ago
it’s already published yeah it’s a very
much
now you’re actually creating the two
columns that are on the left the where
the blog posts and on the right the
sidebar yes we have been join like you
see on his side’s we have right side yes
bar training some podcast Facebook we
not so on the on the right side it’s
more things that they want to promote
the site and on the left side is the
recent posts that’s the only page
exactly now we start to build stuff the
left cone yeah left column so it’s so
easy don’t have to deal with sidebar
widgets short codes you can determine
what what your sidebar will look like
and drag the the column to get it just
the right size here we put after that’s
the metadata yeah it’s important here
for real it’s we have after who creates
a post date when create this post and
short comments will they have we should
probably change the username to two Jon
Loomer but glitches are normal we’re not
using create more so we take off here
so you’re actually editing the archived
posts yeah exactly we change the forms
we change some play with images here we
I want to do you know this and if you’re
familiar with Elementor before we we
released the thing builder you probably
know the posts widget now the post also
the post widget also allowed you to put
your featured posts on the page but it’s
not the same as an archive an archive
this is actually you’re adding editing
your blog page so all the content is
dynamically put so every time you create
a new post it will automatically be
added to your blog page just like you
you would edit your archive web page P
on WordPress
I see already 40 people are here so the
people that just joined us and hey guys
welcome Bogdan is recreating the Jon
Loomer site using elementor’s archive
template so is actually editing right
now the the home page which shows the
archive page the the blog so it’s so
easy to edit and and design and
customize your blog and we have a nice
surprise for you at the end of the
webinar we’re going to add something
that will give it a nice twist to the
whole page something that is not in the
original site like you see we left now
we can start right side so you have your
featured image yeah the title some
metadata and a search
yeah so what’s nice about this when we
publish this page it will actually
change the sidebar of the blog page
which in this case is also the home page
so maybe show them the end result that
you’re trying to achieve yeah we
finished the header header finish left
column we supposed or have post we
finished ooh now we start rebuild right
side so you’re doing it one by one here
yeah I think we not build it all stuff
you know we build it search training
maybe yeah we don’t have enough time to
do we will do the search
we take pose or social icons so we take
training search bar yeah
[Music]
our design so Jabbar take new colors so
you put the head a headline in the
search bar yes Barbara done we work
increased phones and try to find the
best way
however
so if you have any questions about the
process that you’re seeing right now you
can write it and at the Q&A session
we’ll try to the end of this webinar
will try to answer now this is the
training which is the the image the
banner yeah it’s single partner so for
your site if you’re thinking about ideas
placing a banner on your block and
really help your conversions and it’s
really easy to do plus you can you can
customize like Bachmann is doing and
change it anytime so if you have a
seasonal sale you can place it and then
remove it after it’s gone yeah it’s very
easy now we’re going to do the social
icons someone asked what about the
search icon in front of the text the
search icon in front of the text you
mean the search bar we’re not going
one-on-one exactly no we’re not we’ll
give the copy we try to find the new way
more clean you know maybe murder you can
you can experiment and try to create
exactly but usually if you’re doing a
redesign the mission here is showing how
fast you can tour design your site
implementer so now you’re adding all the
social yeah social what’s they using
Thank You site we’ve have LinkedIn
Instagram YouTube
Thank You Mohammed best page builder
ever seen you guys are genius sunshine
has what effect can we add to the
training ad they’re like a flashing
thing you can do yeah you can if you use
the call to action widget you can
actually do some amazing effects
we have a bit of a time constraint here
in this webinar but yeah experiment and
and the call to action is very cool yeah
but I wouldn’t do too much flashing
because then it’ll look like a 90s
website so again you’re sticking with
the blues and the oranges so yeah I play
you these colors we in this site we use
dark blue and orange color well it’s a
an expert for Facebook so you know if
the blue is is a given okay so someone
asked how to make the sidebar dynamic so
actually if you think about it what is a
sidebar if you are editing the archive
the archive page dynamically meaning
this is what you’re seeing here is is a
preview of the posts then the sidebar is
just another column so you can move the
the it’s no longer thing as I want to
change make thick my sidebar a bit
bigger so I need to go to the code and
change the width no you just grab it and
drag it so I know it’s a bit of a change
of like concept of how you’re working
but here adding the recent posts is also
as simple so you can put in sidebar
whatever you like
of course we also have Facebook widget
so it’s easy to add the Facebook links
and Facebook box and whatever
someone asked is there a way to set a
fixed size for the column so the size
sidebar size wouldn’t change well it
shouldn’t change if you if you’re
setting it and publishing it that’s the
side word that you’ll have look at guys
what we have so we have recent posts we
have the social icons what’s left our
have fun not surprised
sure now we create a little bit
different stuff what not having on the
side it’s how we see you can redesign
something fresh you know yeah sometimes
the top of the of the website of your
homepage is always the best place to put
areas that are important to you so in
this case we’ll show you how to put a
featured post so if you have a feature
post that you want to promote you can
place it and design it really nicely
like Bogdan will show right now
you can also put in promo box or a
banner or whatever you need text some
from maybe I subscribe for yeah just
take it
so Marvin asked how come I cannot access
the section icon bar for section on the
topmost I don’t know if you’re a pro
user but we have a different webinar
about editing headers so you might check
it out and that might give you an answer
so you place the image now yeah now I
create on column a ground white and I
wanted to create shadow too later you’ll
see why it’s not finished
and this is a section that really can’t
be missed some your visitors if you want
to direct them to a specific place
that’s a great message to do it you’re
actually going to play around with the
alignment right so so they overlap yeah
now I wanted to put category here should
probably might have copied some HTML
you can go to text and then you can
paste it under tips so it’s the best way
after tricks tricks a little digs
so all these overlapping effects are
something that you see a lot of in
well-designed website since a really
cool way to go outside of the realm of
you know grid the basic read that looks
like a table so it kind of breaks the
blend design so now you’re using –
margins yeah to create that overlap
effect as this column would have on
front they index tree mm-hmm
so this image we going come back like
background
are we going on English like you see we
have here space it’s a bet
so go change it
was good mm-hmm you made the image
larger by reducing the the margin
because the the image always fits the
full column now little prick okay you
created a gradient that moves from white
yes but I don’t want it to be like no so
like our yet not my plan
like if you have here all right cuts the
image in the middle so you have a
transition of color in the middle of the
featured post so here we do the ground –
yes a and now this is okay now I got a
perfect question by frog Oggy they asked
will there be a feature in Elementor to
make for example a header menu stick to
the top so actually the Jon Loomer if
you visited it it has a sticky menu yeah
menu we can do also I will not not not
great when we do header but we can do it
for a second it’s not so hard for you
which is going to dashboard my templates
header
edit with lammeter you’re going back to
the Hadean you create what I create if
we talk about stickyman mm-hmm and here
is calling the favorites yeah save it
update
but easy very easy too much easy
I think this page we can publish it for
ya so when you publish you see the
conditions this determines where the
archive will be published so we want we
want the archive to actually be the
posts archive and this way when I go to
the home page also yeah in their portal
settings yeah you can set your homepage
to show your latest posts just like we
have it but if you’re not happy you can
click music and now that’s the home page
that we just migration guys sticky menu
that’s quick that’s easy and I think it
shows all the viewers that I think it’s
cool yeah and very fast you can recreate
the site
it took us how much time 25 minutes plus
talking so I really implore you to go
and test it out for yourself there’s no
downtime you can create the template and
just when you’re ready to publish it
click publish choose the conditions and
set it off on your site and yeah that’s
that’s the webinar so now we can take
questions
one more I think will be cool to show
guys new stuff yeah certainly so we have
some new things to show you that we are
about to send a release about so if you
go to the dashboard
you’ll see that if I create a single and
add new single I can actually choose
here we’ll have select post type so I
can usually choose the 404 page and if
you like you know there are many
examples of funny 404 pages creative so
here it’s really easy to do and I
encourage you to do it on your site and
if you click on create template you’ll
see new templates that we have for 404
pages look at guys we have new blocks
that’s a third that’s a cool thing and
I’m sure our users can enjoy it and we
have a complete post about it hopefully
later today so let’s take a few
questions
can there be several different layouts
so that’s a great question Risa
definitely once if you remember we just
were in the conditions tab so you can
set it to a certain category and then
the archive page will only affect a
certain category let’s say you have a
travel blog and you have in the same
site you have a car blog so you can
designate different templates for each
one you hit publish
choose the condition according to
category tag or any other taxonomy and
and you have your differentiated the
custom template for the archive page
will also have a tutorial about it
hopefully soon
someone asked if we are going to offer
Jon Loomer
a new template for them to change in the
site maybe oh maybe so you’re just I
just you know believe is for for page
you can do so many things to you amazing
so thank you everyone for joining this
webinar I hope you’ve enjoyed it and
that you learned something new and we’re
always in in contact with our community
to hear more ideas for webinars so
you’re welcome to suggest your own and
until next time this is Ben this Bogdan
for you next time bye bye guys
[Music]
