You don’t have to be particularly internet savvy to know that a mobile website is a necessity. More users view websites on mobile devices than on desktop computers, which has been the case since 2016.
Mobile Websites and WordPress Pagebuilders
Fortunately, most modern WordPress themes are responsive and some work better than others on smaller screens. Page builders Divi and Elementor provide the same ease of use for mobile page design as for desktop.
Today I’ll talk about two of the most popular page builders for WordPress and how to use them to build mobile websites that work.
If you want to build your design mobile first, open the mobile view in either page builder when you start and design from there. Once you have your mobile design, adapt it to larger screen sizes.
As a reminder, even though your page looks great in the preview, always check it on an actual phone or tablet.
How to Edit Mobile Styles with Divi
For sitewide mobile settings such as section and row height and text size, go to Appearance > Customize > Mobile Styles. You’ll see settings for tablet, phone, and mobile menu.
The Divi Theme makes it easy to create a site that works on mobile devices. As you’re building your page, keep an eye on what it looks like in the built-in mobile simulator. Though there’s no substitute for an actual device, Divi does give you a pretty good preview of your mobile website.
In the Visual Builder, click the purple button at the bottom of the page with the three dots. This will open up a box with the three screen icons at the right. Click the tablet and phone icons to see views on those devices.
You’ll be able to edit text size and layout features independently of other views. For example, you may want less padding, or smaller text on mobile. No problem. Go through all settings for each mobile device to be sure you’ve got the layout you want.
When you click on an element, you’ll get a popup. Hover over the area just to the right of the title; here I’ve selected Text Size. You’ll see the icons for phones and tablets. Make you adjustments there and click the green checkmark to save your settings.
How to Edit Mobile Styles in Elementor
With Elementor, you can set your mobile breakpoints before you start working on pages as Site Settings > Layout > Breakpoints.
As you are working on your pages, find the mobile icons in the dark box at bottom left. Edit your settings just as you would for desktop size.
To edit my heading, below, I’ll select the element, then click the Mobile icon. Now I can see what my page will look like on a mobile phone.
Under Advanced, scroll down and click on Responsive to choose which any views on which you’d like to disable this section.
Scroll a little farther down and open the Custom CSS tab to add your own media queries if you like, though it’s better to do this globally using CSS classes.