Overview
Responsive Web Design means making your website look good on all devices (desktops, tablets, and mobile phones).
Get Elementor, free forever, including mobile editing: https://elementor.com
In this video, we show five ways in which you can use the Free Elementor Page Builder for WordPress to edit any site and make it 100% mobile responsive.
The methods we cover include:
– Mobile font size
– Reverse columns
– Responsive column width
– Padding and margin
– Hide and show elements
These 5 methods are enough to make any page look amazing on mobile screens.
Transcript
hey everyone it’s Cassie from Elementor
today we’ll go over how to create a
mobile responsive website with Elementor
Elementor includes five main mobile
editing tools mobile font size reverse
columns responsive column width padding
and margin and hide and show elements
follow these simple steps and you’ll
know how to make a 100% mobile
responsive website sometimes headlines
and text elements that look great on the
desktop
need to be tweaked for mobile so this
headline looks great here but when I
switch to mobile it’s just too big
luckily you can easily reduce the
headline size on mobile by going to
style typography and reduce the size
under the content tab you also have the
option to adjust the alignment looks
great now note that after changing your
mobile design the changes will not be
visible when you switch back to desktop
mode each mode will reflect the specific
settings you choose for each device when
you create a page with Elementor it’s
automatically mobile responsive this is
achieved by stacking the columns in a
vertical order but when you view your
site on mobile the order of your columns
may look different than you intended so
a two column image and text section like
this may have the text on top of the
image to fix this use the reverse column
switch click the section handle go to
advanced responsive and turn on reverse
columns now you see the content is
displayed in the right order
as we said on mobile columns are stacked
in a vertical order but you can always
customize your column layout for mobile
look at this four column Services
section on mobile they’re stacked to
avoid this reduce the width click the
column enter 50% and do the same with
the other columns now the mobile layout
shows two columns side-by-side
while the desktop still displays for
columns side-by-side sometimes giving
ample space on the desktop can result in
a website being smushed together on
mobile when we go to mobile view you see
that there’s too much space between the
logo and the headline fix this by
setting the margin to 0 here too much
padding causes the column to become too
condensed on mobile change the padding
to 32 adjust this one of the easiest
ways to make your site more responsive
is by creating two separate elements one
visible only on mobile and the other
only on desktop when I go to button
advanced responsive I can hide the
widget from the desktop devices when I
preview the page on desktop its hidden
now I’ll do the same for the other
button this time hide it from mobile so
again advanced responsive hide on mobile
when I preview the mobile page it’s gone
by the way you can use this same method
to hide sections in this video we’ve
seen 5 tools to help you customize your
website and make it 100% mobile
responsive here’s an important best
practice when you finish creating a page
always switch to mobile view and go
through the sections use the tools you
learned in this video to fix any issues
you notice I invite you to go over your
site and make it responsive the easy
Elementor way
