Pop Up Image

Get the Full PDF guide to creating an online store with WooCommerce (88 pages) for FREE

A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How To Build a Responsive Elementor WordPress Website

How To Easily Build a Responsive Elementor WordPress Website

With most users accessing the internet using mobile devices, can your website really afford not to be responsive?

What Is Responsive Design, Really?

So, in the context of a website, responsive means that the site reacts to various aspect ratios, that is, doesn’t look the same on different device but instead adapts to the visitor’s device. In 2019, more users have been accessing the internet using their mobile devices than desktop computers, but mobile-first design – the practice of building websites primarily with mobile users in mind – has been here for a lot longer.

With a responsive Elementor design, you are basically resizing and rearranging all the components of your website to fit a differently laid out screen – desktop, tablet (768px), and mobile (360px) – and not lose any of the quality. And what with WordPress being the most popular content management system around, it’s no wonder that so many developers are going out of their way to make responsive WordPress themes, though this, too is no guarantee.

How Do I Access Different Layouts in Elementor?

You will find the screen icon in the bottom left-hand corner. Selecting it will open the preview sub-menu. There you will find the options for previews for tablet and mobile layouts.

Different devices

The desktop view is the default, but you can change that easily. You should notice that when you change your preview changes to suit a smaller and differently laid out device, with a different aspect ratio, so you can get a feeling for how your website layout appears on every device.

Mobile device view

The important thing you need to remember is that whichever way you change your cosmetic design options in tablet or mobile mode, your desktop mode and layout remains unaffected. This way, none of your work on any layout is ever lost.

Which Elements Can I Adjust?

Fonts

The way your visitors see your text elements is very important. If your fonts are not mobile-friendly, your visitors may find the website unreadable, which will in turn affect your SEO (search engine optimization). With the amount of information your visitors glean simply through text, this is something you cannot ignore. A legible website looks neat, tidy, and professional.

Take a look at this confessional, for instance:

Section with text

This looks perfectly fine in a desktop layout, especially with a wide screen. But on a smaller device, especially when viewed in portrait orientation, all text sections favouring the horizontal will look smooshed up and illegible.

You can fix that by selecting the device you want to change the layout for. If you are satisfied with the default (desktop) option, you still have some tweaks to administer for tablets and mobiles.

Like any element, a textual element has attributes. The first thing to keep in mind is the HTML tag. Do not change the HTML tag. These are very important for SEO, and, once set up well, should not be modified. In order to change text size, you want to look at the Style tab.

Text responsive settings

Locate the Typography settings. There you can change font, its size, weight, line height, and letter spacing. If you wish to change the alignment of your text, you can find that option by selecting the Content tab.

Typography responsive settings

Bear in mind that some changes – such as Transform Uppercase – will be reflected on other devices, too. Typography options are device-specific. An important consideration to bear in mind is also that text elements should be adjusted in proportion. What you want to look out for is the dimension ratio of all the text elements.

This is what a proportionately modified section looks like:

New text look

Row Height

Elementor constructs the basic structure for your content using sections, or rows. Row height, therefore, is very important. Once set, row height can be adjusted for each device. What you want to be on the lookout for is the distance between the content of your element and row edge.

Section padding

What may look good on a desktop device takes up a lot of vertical space on mobile and tablet. To adjust row height, select the row, and then select the edit option.

Edit section

Then select the Layout tab and adjust the Minimum Height slider however you like it. You can have different heights for different display layouts. This is especially important if you are also adjusting your font sizes.

Minimum height

Margins and Padding

What you also need to have in mind are margins and padding. A margin is the space between elements, while padding is the space between the edges of an element and its content. Regardless of whether you have built your website up from scratch or whether you’re working on a ready-made template for Elementor, you shouldn’t have any trouble navigating the elements. Each element in a selected section displays an on-hover blue border – simply move your mouse over an element and you will see its border. This is a good way to get a feel for the structure of a section.

Text responsive

Select an element, and then select the Advanced tab. For padding and margins, you will find four options: top, right, bottom, and left. This is where you input your padding and margin values. The link icon on the right-hand side of the sub-menu locks them in relation to each other: you may choose for all of them to have the same value, or have a different value for each margin or padding.

Padding and Margin options

Columns

Columns can cause display problems when not optimized for different devices. Your preferred settings will depend on the number of columns and their content.

Responsive columns Elementor

By default, Elementor stacks columns one below the other on mobile devices. This means that the columns will not be squidged together, and that their contents will remain legible.

Mobile responsive column

To make the columns easier on the eye for mobile users, you can reverse the order of columns in any row – simply select the section, then the Advanced tab, the Responsive sub-menu, and toggle the Reverse Columns toggles for tablet and mobile layout as desired.

Edit column responsive

If you select an element in the desktop view, for instance, and then select the Advanced tab, select the Responsive sub-menu, you will see three show/hide toggles: for mobile, tablet, and desktop devices. These you can use to show or hide elements or sections depending on the type of device they are viewed on. This options is only practical for some elements or sections your visitors might find uninteresting or extraneous depending on the device they are using, though you can use it to lay out three completely different pages if you want to.

To Conclude

There you have it: adapting your web page design for mobile and tablets – and the other way around – has never been easier. And bear in mind responsive Elementor website-building is just one of Elementor‘s many features. We‘re here to help you explore them.

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply