In this Monday MasterClass, we examine the advantages of the Elementor Theme Builder and ways that we use it to design and build websites far beyond the limitations of themes in WordPress. This episode covers a lot of valuable web-building information for all levels looking to learn: The difference between Themes and Templates in WordPress How to create headers, single pages and other website elements with Theme Builder How designs built using Theme Builder are unaffected when changing or updating a theme How to create multiple variations of website elements (e.g. single pages), and assigning dynamic attributes (e.g. page type, category, author) to these variations How to add sharing buttons, social links, etc. to a website elements without using code
welcome to Monday master class where
this week I’ll be showing you three
reasons why you should be using theme
builder instead of relying on themes to
customize your website what we have here
is a page that I put together for this
master class I thought it might be a
good excuse to try out our latest
template kit for travel agencies and
travel booking sites right now I’d like
to take a moment to briefly show what
happens to the template when we change
the theme now as we explained the theme
is what we call the structure that
defines where certain parts of content
always appear while the template defines
the way it might look so here is our
site’s blog page the only thing we’ve
done so far is insert the blog template
from the travel and target using
elemental as you can see we’re still
missing the site header so what I’d like
to do right now is create our header by
using the theme builder feature to our
advantage
to do that we’ll open the element or
finder using command or control e on our
keyboard will search for the theme
builder and select it now as you can see
we’re basically back in the wordpress
dashboard and in the templates tab we
are in the theme builder feature now
this is what we’ll use to create and
customize all of our theme elements and
you’ll soon see why we’ll begin with our
header we’ll click on the add new button
we’ll select the type of element that we
want a header we’ll give it a name and
click on create template we’ll select
the header template that comes with the
kit that we’re currently using and
insert it and we’re back in the warm
familiar elements or editor where we can
customize our header the same way that
we would anything else in elemental once
we’re happy with our unique header we’ll
come down the page and click here to
publish it now notice that we get this
conditions window that gives us even
more control over the elements
appearance and functionality and we’ll
use it now to add a condition
to be include the entire site which I
suppose is self-explanatory and then
click on save will go to the blog page
that I’ve left open in a separate tab
and see how our header appears exactly
the way that we wanted it to but if we
go back to the WordPress dashboard in
the appearance tab we can see that the
hello theme is currently active and I
prefer to use this theme not because
it’s published by Elementor but because
it was designed to be exactly what the
designer needs a blank unrestricted
canvas now let’s see an example of what
happens to our page when we change the
theme – let’s say storefront that we get
with the WooCommerce plug-in now notice
how the theme forces the text and images
into predefined boxes which is fine if
that’s what you want and even if it is
the moment there’s an update these
definitions might change however
slightly they will affect our site let’s
try another example and change the theme
to office press again the sections are
moved around and reorganized and if we
activate WordPress is 2016 theme we see
that our design is almost unrecognizable
WordPress sites and blogs must use a
theme as with most things there are pros
and cons to using themes and that’s what
inspired creating the Hello theme all
the pros without the cons it carries no
definitions that can skew or cram our
content into spaces it acts as a fresh
blank canvas for any templates and
designs that we want to place on it and
as for the elements such as headers
footers pop-ups etc we use the theme
builder to customize them any way that
we want without the worry of them
changing as a result of the changes to a
theme
a second great advantage of building
elements in theme builder is that we can
create several variations of elements
and assign them to specific attributes
such as categories let’s suppose that on
my travel site most of my business comes
from customers looking for family trips
or customers looking to book romantic
getaways to help draw visitors I publish
a blog where the posts are categorized
by relevance to either family or
romantic vacations as such I’d like the
appearance of each type of blog post to
have a distinct feel which is I suppose
reasonable we have two types of clients
searching for different types of product
and the last thing most couples on
romantic escapes want is to be joined by
a foray of over excited families this is
what the blog post page looks like now
with a couple of fake posts that we
created earlier back in the theme
builder feature we can see all of the
elements that we’ve created for our
website we can use this menu to edit
export etc just the same as everything
else that we’re used to doing with
Elementor and WordPress for now we’ll
click on the add new button and go down
here to the drop down menu where we can
really appreciate the list of elements
that we can create in theme builder we
can use this to create a footer in the
exact same way as we did a header but
instead let’s do something a little
different and create a single page
notice that as soon as I select this
option another drop down menu appears
and here we’ll select the post option
we’ll give it a name and click on create
template we don’t have to choose a
template here we could build our single
page completely from scratch but this
way we can save some time and we’ll
select a template to work off of and
insert it again everything in this
single page element is customizable we’d
like to have a single page for each
category but we still want to maintain
some aesthetic consistency throughout
our site so just some
minor changes will give each category a
more appropriate slogan or title
and we’ll change the color of some of
the layout elements
and we’ll save when we publish this here
in Elementor will see this conditions
page again which offers us loads of
options for example we could select the
option to assign this design to all
posts or just to posts written by a
certain author but we’ll set this
template to appear on pages with posts
from a certain category and then select
the relevant category and save once
we’ve created a second similar single
page and assigned it to our second
category we’ll just take a look at the
distinctions however slight they are
quite effective notice we didn’t use a
single line of code creating elements in
theme builder is just the same as the
way that we build pages in Elementor
it’s all a matter of positioning widgets
and assigning the conditions using
drop-down menus
another area that we’ve noticed
WordPress users having difficulty is
adding buttons and other dynamic
properties to theme elements again the
best way to customize things like popups
and footers etc without getting bogged
down with code is by using the theme
builder to prove my point let’s edit our
header using the theme builder now in
the editor panel will locate the social
button widget and drag it over to the
heading the theme builder was purposely
designed based on the elements or
builder to keep it both simple and
familiar and make life easier for users
will just quickly customize it so it
looks like parts of the original design
will update it and now we’ll check it
out on the preview mode and it looks
great all that’s left to do if we
haven’t done so already in the Elementor
settings is to connect the links to the
buttons
however essential these elements are to
our website they are just a few of the
list of elements that we can create and
customize in theme builder making them
completely independent of the theme that
we chose for our page and with all the
flexibility and ease of the elemental
builder my colleagues and myself are
forever using theme builder because we
find that it saves us so much time by
keeping us focused on the build rather
than spending time looking for themes
and templates and this way we also get
things exactly the way that we wanted
and there are no surprises later on if
you use theme builder and have your own
bag of tips and tricks and advice that
could help other users then by all means
please share them in the comments below
after all our goal is to be the best at
helping others excel at their craft and
if you’ve enjoyed this masterclass and
you’d like to join our community to see
and learn more on subjects like design
marketing and web building for WordPress
make sure that you click on the
subscribe button and tap that bell so
that you don’t miss out on our next
master class thanks for watching Cheers
