Making Your Sites Tablet and Mobile Friendly With Elementor

hi
and welcome to this elementor responsive
basics webinar
my name is ev and i’m a web designer and
elementals lead educator
and i’m really excited to help you use
the internet’s leading wordpress drag
and drop
site builder elementor this webinar will
give you a basic breakdown of
elementor’s responsive editing abilities
and show you how to use them creatively
to make sure that your sites look great
on tablet
and on mobile as well making sure that
your sites are mobile responsive is an
important part
of the build process and very important
if you want your sites to be successful
according to google responsive websites
perform better in search rankings
because they provide a better user
experience than sites that aren’t mobile
friendly
and they also like that mobile
responsive elemental sites
use single urls as opposed to different
urls for separate mobile versions of
websites
during the webinar we will work on this
pre-built spa service page
on a high-end hotel website it has only
been built for desktop
and it’s up to us to make sure it looks
great on tablets and mobile as well
we’ll do it step by step and along the
way i’ll introduce you to all of
elementor’s responsive settings
so you’ll get a practical understanding
of how to use them
and know what to look out for the next
time you work on your site it’s
important to know that the features and
settings we will go over in this webinar
can be applied to all types of websites
in different industries such as the
hospitality industry
restaurants software as a service
companies gyms
e-commerce and a lot more having a fully
responsive website
will help convert more potential
customers by reducing bounce rates and
improving brand perception
so what are we waiting for let’s dive in
and make a start
okay so this is the page that we’re
going to be working on
and what i’ve done is i’ve pre-built it
only for desktop
so you’ll see exactly what the tablets
and the mobile modes uh what they look
like
and you’ll see the same things that you
might come across when building your own
sites
what i’ll do is i’ll make mobile edits
section by section
and we’ll do it step by step and this
way you can
really see how you can control what your
visitors see
when viewing your sites on all of the
mobile devices
so let’s first check out the tablet
okay so elementor is very smart and it
makes sure that
it’s widgets they’re mobile friendly in
the header you can
see that the navigation turned into a
hamburger icon
and the button and the logo they already
resized a little bit
of course we can tweak it a lot more and
we can make it a lot better as well
which is what we’ll do
the headings and the call to action
widgets they also resize nicely
and also when we scroll down you can see
that the motion effects that are set
on the desktop they also work for the
mobile devices
and what we’ll do is we’ll also go
through all of these sections and i’ll
show you how to
uh to personalize and to make custom
layouts for each device
the same goes for mobile the tablet
screen is bigger than mobile
so you know by default they look a
little bit better
and you know as you can see the mobile
needs more tension so we’re going to be
looking at that
also in depth
all right so let’s make a start
go ahead and click here to edit the
header first
and for for the desktop the nav menu
displays all of the pages on the site
but when we want to go to the tablet
you can see that it changes to the
hamburger menu
and when you click on it you can see the
pages but
out of the box it doesn’t it doesn’t
look good you can see that the font’s
too big and
things just don’t seem right
so the first thing that i’ll do is in
the editor i’ll open up
the hamburger menu so you can actually
see the changes that will make
so in the panel on the left what i’ll do
is i’ll go to the mobile drop down
section
and i’ll just set it to take up the full
width so
this way it basically stretches all the
way and
what we can do then is we can we can
align all of the menu items to the
center
so now all of the items they appear in
the middle
next what i’ll do is i’ll go to the
style tab and in drop down
because we’re busy working with the drop
down we can style it a bit
so you can see that by default the
topography is set to primary
and that is a global font a global font
is a predefined global typography style
that you can assign to text elements
anywhere throughout your site
and it’s very good to use them for fonts
that
you know you use on multiple parts of
your site because it saves time and it
allows you to work in a more structured
way i’m going to be delving into it very
soon
and when we actually go over the page
and you’ll also see how to make the
mobile responsive
so for now what i’m going to do is i’ll
change it to accent
and let’s move on to styling it some
more
i’ll scroll down and i’ll adjust the
vertical padding
which allows you to control the space
between the nav items
25 looks good and let’s also add
a subtle divider between them i’ll set
the border type to solid
and then give a subtle color
as a very subtle color just to
distinguish between the background color
and the divider
and i’ll just play around with the width
just a little bit
okay great now let’s preview this
okay i’m happy with this now let’s move
on to the toggle button
i’ll style it a bit so i’ll just give
the lines a color
and for the background color i’ll drag
the opacity all the way down
so it’s transparent next i’ll just
adjust the size a little bit
and that’s it
okay great so now we can move on to the
mobile
let’s check it out
the nav menu looks great too but the
mobile devices they are smaller in width
and in height
and you can see that the elements they
they aren’t aligned
so let’s go over some elemental settings
that you can use to create custom
layouts
that fix this so first of all for the
logo
what we can do is we can adjust the
width
and as you can see next to the width
there is a mobile device icon
and this means that the value that we
set for the width that will only be
applied to
mobile devices and we can do that for
the desktop and we can do that for the
tablet as well
there are many settings that have these
device icons
which we’re going to be tweaking
together during this webinar
but it’s very important to remember that
when you change
settings that don’t have these device
icons it will basically affect
the layout and the design of all of the
devices
so also the desktop and also the tablet
just keep that in mind
and also keep a lookout for these device
icons
okay now let’s align the logo
i’ll align it to the center again this
change is only going to be affected on
mobile devices because it has a device
icon next to it
let’s move on to the second column
by default it appears under the first
one because
and not next to it because on mobile
devices there’s not enough space
another cool responsive feature that you
can use to adjust
your layouts is the horizontal and the
vertical align
they allow you to align all of the
content in a column so there’s no need
to add
you know redundant padding if you use
these settings
for this design i’ll just set it to
center
also i’ll link a video in the
description below about all of these
options
okay let’s check it out
great now the header looks great on
mobiles as well
let’s go back to desktop
and we’ll make a start editing the page
also don’t forget to save the changes
when you’re moving on to
editing another side part
okay so let’s start off with the first
section
i’ll check it out on tablet
which looks good so i’ll just leave it
as is
next i’ll go ahead and preview the
mobile view
which looks good too and soon i’ll show
you
exactly how to adjust texts for your
designs we’ll delve into that
so you’ll see exactly how to fine-tune
your designs for these devices
first i want to have a look at these
call to action widgets
and explain the column width concept
which is a powerful setting that
allows you to create custom layouts for
all of the devices
and as you can see over here on the
tablet it looks good
but having three of them next to each
other it does seem a little bit
cramped so we’re going to be fixing that
and
also on mobile it automatically
positions the column
under each other and we’ll fix that as
well because having three of them
might just be a little bit too much for
your mobile design
let’s go back to tablet
and instead of having three call to
action widgets next to each other
i’ll i’ll set to only show two
you can do that in the column settings
right now all three they take up one
third of the section’s width
and i’ll set the first column to take up
50 percent of the width
you can see that the second column still
takes up a third
i’ll set the second column to 50 as well
also
notice that there are device icons for
this setting as well
so these values they are only applied on
tablet devices
okay so now the question is what are we
going to do with the third one
another great feature that you can use
to control your designs
is responsive visibility and it allows
you to hide certain elements on specific
devices
i’m going to be doing this for the third
call to action widget
and of course you know this depends on
your site and its needs
for me all three call to action widgets
they have the same link
so it doesn’t affect it i’ll go to the
column settings because i want to hide
the entire column on tablet devices
and in the advanced tab i’ll go to the
responsive dropdown
i’ll hide this column on tablet and
mobile
as you can see it’s grayed out now
indicating that it’s set to hide
i’ll go ahead and hide the panel so you
can see
cool that looks a lot better for tablet
devices
okay now let’s check out the mobile mode
the third column is greyed out as well
for mobile i think having one call to
action widget is better
so what i’ll do is i’ll hide this column
on mobile devices only
great now let’s move on to the rotating
logo
which looks good on tablet
it also looks good on mobile and you can
always tweak your images just like we
did with the logo
in in the header just to fit your design
all right time to talk about texts
like i mentioned before we can control
what they look like on tablets and
mobile devices as well
you can see that the typography over
here is set to primary
which is a global font and we can click
here
to either give it a custom style and
also make sure it’s mobile responsive
by adjusting the settings that have the
device icons
but what i’m going to be doing is just
leave the global primary fund
because i use it for the majority of the
headings
on the site and this way
by making sure that the global primary
font is mobile responsive
i will only have to set it up once and
my texts they will be responsive
without having to go over them one by
one and set them up for tablet
and mobile which will save me a lot of
time
so i’ll go ahead and click to manage my
global funds
by the way if this concept is new to you
i recommend watching the global color
and fonts webinar
where i delve into all of the details
and show you how to create a design
system with them
i’ll also link it in the description
i’ll go ahead
and click on primary and let’s check out
the typography settings
as you can see the font over here is
empty and this
indicates that the current tablet size
is inherited from the desktop and this
is an important concept
if i click on desktop you can see that
it’s set to 60 pixels
so in tablet it’s still set to 60 pixels
and the same goes for mobile
this is the default behavior and
if we want we can change it i’ll just
make it a little bit smaller for tablet
and let’s check out the mobile now
you can see that on mobile it’s also
gotten smaller
this is because the mobile inherits the
tablet’s changes
that we just made and what i’ll do is
i’ll just
increase it again so it fits nicely on
mobile devices
it’s important to keep this hierarchy in
mind when you’re busy adjusting your
settings
and also to keep an eye out for these
empty values with settings that have
device icons
so you know where the default values
come from
now another cool thing to do instead of
manually adjusting these sizes for
tablets and for mobile
you can use a more responsive unit i’ll
go ahead and delete these values so you
can see
now let’s go back to desktop
and instead of pixels which is an
absolute unit i’ll change the font size
unit to em
which isn’t an absolute unit it’s a
relative unit
and they scale better between device
sizes
i’ll go ahead and set it to 3.6 to fit
my design
now let’s just see what happens in
tablet mode
and mobile
great it reduces the need to tweak them
all right i’ll go ahead and update to
save my changes
and go back to the editor
let’s continue with the section with the
video playing in the background
on tablets it looks good
but on mobile although it does play in
the editor
when i when i hide the panel you can see
that by default
it doesn’t play on mobile devices but we
can change that
the video itself is set to play in the
sections background
so i’ll just go to style and
over here we have the option to play it
on mobile
now playing videos on mobile devices
might not be ideal
because it does take up data to load it
and some visitors there might be limited
so in this case what we can do is we can
set the fullback image
to show instead of the video i’ll just
go ahead and choose this image
okay great now let’s go back to the
desktop
and continue with the following section
it has cool motion effects on both
columns
in tablet you can see that it works very
nicely as well
on mobile though it needs just a little
bit of adjusting which is what we’ll do
soon first let’s build another section
exactly like this
so you can see how i did it and
afterwards we’ll go
over some responsive options to make
sure that it stands out on mobile
devices as well
i’ll go ahead and drag an inner section
under it
and in the left column i’ll drag an
image widget
then i’ll go ahead and choose the image
and in the column settings and what i’ll
do is i’ll set the padding to zero
so the image fills up all of the space
and i’ll click on the image widget and
in the advanced settings
i’ll go to motion effect
now the scrolling effect works well here
and
what i’ll do is i’ll add a vertical
scroll
and set the direction to down
and reduce the speed a bit just so it’s
a
subtle animation what also do is set the
viewport between 20 and 60 percent of
the viewport’s height
so the animation starts and ends in that
range
if you are new to motion effects i’ll
link a tutorial covering all of the
basics
i’ll link that in the description there
really are
are many cool things that you can do
with motion effects to make your site
stand out
so be sure to check that out next
what i’ll do is drag a heading widget in
the right column
and i’ll change the text
and align it
i’ll also drag an icon list widget under
it
and just change the content
then i’ll just duplicate them and change
the texts as well
just to save some time
okay now let’s style it a bit
these options they also have device
icons so you can really get creative
when building custom layouts
now just like you saw with the image
widget we can also apply
these motion effects on entire columns
so
it applies to all of the content inside
it
and that’s what i’m going to be doing
over here
i’ll apply the same effect but in the
opposite direction
and for the viewport i’ll set it to
between
zero and fifty percent
okay now let’s just see the result
cool and let’s check it out on tablet
looks good
and on mobile
okay so there’s a lot going on as you
can see the image
and text they overlap because mobile
devices they have less space
in this case it would be best to just
disable the motion effects on mobile
and there is an option for that so i’ll
click on the image widget
and here i’ll just remove the mobile
so the effect is only applied on desktop
and tablet devices
i’ll do the same for the other image
pay attention that the motion effects on
the columns they’re still active on
mobile
and they don’t interfere with the user
experience so
you know if you want you can remove them
but i’m just going to leave them
also as you can see by default the
images they appear one after each other
on mobile
and sometimes you know this is not what
we want
and we can change this as well in the
section settings
what we can do is we can just go to
advanced
and then under responsive what i’ll do
is i’ll reverse the columns over here
it’s a simple fix that really comes in
handy when controlling the layout
which you can also apply to tablets
now let’s move on to the next section
with the texts
as you can see they look great on a
tablet and also on mobile
because earlier we already made sure
that the global primary font
is responsive okay next i want to just
show you how to style
your buttons and make sure that they
look exactly how we want on tablets
and on mobile devices
in the style tab you can see that the
padding
has device icons as well
now i’ll go ahead and i’ll just give the
button some custom padding for the
tablet mode
pay attention that only the settings
that have responsive handles can be
tweaked per device size
so for example if you change the border
radius
over here while you’re in tablet mode it
will also apply this change to desktop
and mobile devices because it doesn’t
have a responsive handle
in mobile mode you can see that the
padding has changed as well
it inherited the changes that are made
for tablet just like we saw earlier
and as you can see the padding values
they’re empty
it’s always good to pay attention to
this
okay let’s move on to the last section
of this page before we have a look at
at the footer over here what i want to
do is just talk about pixels and
percents
as you can see i added 20 padding to the
column
so the heading and the form widgets they
are positioned
nicely
but what i can also do is i can use
pixels
but i prefer to use the percent for the
same reason we saw
with the font size percentages are
relative units as well
and in this case it’s relative to the
column it’s in
so if i go to the tablet mode you can
see that it scales very nicely
and you know of course i can change this
to let’s say 25
and now if i go uh check out the mobile
you can see that the 25 is inherited
from the tablet mode
which in this case is a two match it
makes the form feels too small
which is uh which actually is bad for
user experience
so what i’ll do is i’ll just go ahead
and reduce it a bit
and this way there’s more clickable
space in the fields for
mobile users
of course you can play around with it
until you get exactly what you want
all right we are nearing the end of this
webinar all that’s left to do now is
just check out the footer
so let’s go ahead and do that
don’t forget to save the changes
first i’ll just go ahead and see what
the background video
what it looks like on tablets
and i think it looks good so there’s no
tweaking needed
okay so now let’s move on to the second
section which also looks good
but you might want a different layout
for tablet
so let’s just see how to make custom
designs for specific viewports
first what i’ll do is i’ll add another
section
above over here with one column
then i’ll duplicate this logo
and i’ll drag it here and what i’m
basically doing is creating an
additional section
uh with the logo that will be set to
only show on tablets and on mobile
devices
so this way they will have their own
layout and it won’t seem
too busy with all of the content on
smaller devices
the logo is a little bit too big because
it takes up all of the section space
so i’ll just reduce the width a bit
okay that’s good
and the next thing that i’ll do is i’ll
go to the section settings and in
advanced i’ll just go to responsive
and i’ll hide this new section on
desktop
so that the desktop still stays the same
now let’s go to the column with the logo
in the middle
and because we don’t want to see it on
tablets and mobiles
i’ll just set it to be hidden on them
okay so let’s preview and see what we
have so far
the new logo looks good but because the
middle column with the logo
is set to hide the other two columns in
the section they fill up that space
and they still get the one-third width
just like we saw earlier
so what we need to do to fix it is just
control the width
i’ll click on the first one and i’ll set
it to 50
and i’ll do the same for the other one
as well
okay let’s check it out again okay so
this looks
better but what we also should do is
just add some padding
on the sides just to make it fit a
little bit better
i’ll go to the section settings because
i want the padding to affect all of the
content in it
so in advance i’ll just unlink the
padding to set them individually
so this way i can add just padding to
the right and the left sides
okay that looks good now for the credit
sections
uh what i’ll simply do is just copy the
section that we just added the padding
to
and i’ll paste the style onto the credit
section
as you can see it automatically pastes
the same padding
which will save some time this works
well
but do keep in mind that it will also
paste all of the style
in the section so if you’ve added a
background color for example
it will copy that over as well which
might be something that you don’t want
i also just want to remind you that all
of the changes that i’m making over here
the changes that have the device icons
they will now be the default for the
mobile
because it inherits the changes that we
make in the device above it
the padding for example will now also be
the same for the mobile view
which i’ll show you soon now i’ll also
just add some margin to this section
just so there’s some space between them
great okay
now lastly let’s just move on to the
mobile
there are a couple of things that we
need to fix over here as you can see the
padding that we added to the sides
early in the tablet it’s applied here as
well
and it affects the content a bit and
makes it look a little bit
squished which we’ll fix soon
first what i’ll do is i’ll just increase
the logo so it takes up all of the space
moving on to the content i’ll align all
of it to the center
this will only be applied to the content
when it’s being viewed on mobile devices
i’ll go ahead and do that to all of the
widgets
okay let’s preview
so like i mentioned before the padding
on the sides it’s a little bit too much
and because this text over here is
longer than the rest
it breaks onto the next line so all we
need to do actually to fix this
is just adjust the section’s padding to
give it some more space
also i should add some space above the
contact details heading
okay so first let’s just go to the
section settings
and for the padding i’ll just set it to
zero so it’s all removed
then finally for the contact details
column
what i’ll do is i’ll unlink the margin
and only give it a little bit at the top
okay let’s check it out one last time
awesome everything looks great on mobile
as well
all right well that’s about it i hope
you learned a lot during this webinar
and have a better idea on how to
approach your website projects with
responsive settings in mind
this is just the tip of the iceberg
though and there’s so much more that you
can learn
elementor pro provides you with so many
tools to create highly converting
landing pages
and fully fledged websites such as the
form widget
motion effects that help bring your
pages to life just like we saw today
pop apps to keep your visitors engaged
and a theme builder
to visually customize your website’s
headers footers archive pages
single post pages and other areas of
your site and there’s a lot
more and the cool thing is that all of
these tools and features
can be tweaked to look great on mobile
and tablet devices really making your
site stand out
well that’s it be sure to join our
facebook groups for loads of helpful
tips and tricks and become part of a
huge elemental community full of
like-minded web creators
all helping each other become better at
what they do also
don’t forget to subscribe to our youtube
channel full of helpful tutorials and
inspirational videos
to help you master elemental and on our
website
check out the help center for easy
access to the knowledge base
faqs docs and a lot more lastly we will
send you a link to a survey
to give some feedback on this webinar so
we can improve them
and keep making relevant and to the
point webinars
feel free to share your creations
inspired from this webinar in the
comments below
so i’d like to wish you good luck and
most of all enjoy being creative
thanks for tuning in ciao for now