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.
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.
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?
Before anything else, let’s just clarify one thing – you can adjust every element marked with the icon shown below. For these elements we can independently adjust values for each element separately for desktop, tablet and mobile formats.
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:
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.
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.
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:
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.
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.
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.
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.
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.
Creating columns can cause display problems when not optimized for different devices. Your preferred settings will depend on the number of columns and their content.
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.
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.
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.
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!