How To Edit the Mobile Version of Your WordPress Site (3 Simple Steps)

Siteefy content is free. Purchasing through our links, may earn us an affiliate commission.

Siteefy content is free. Purchasing through our links, may earn us an affiliate commission.

Mobile now accounts for over 60% of website traffic, which means the mobile version of your WordPress site must be as flawless as possible.

As you polish your WordPress site, you’ll need to edit your mobile version so that it’s tailored for the mobile user experience.

Achieving an excellent mobile site is especially important because 67% of users are more likely to buy on a site that’s mobile-friendly. 

Let’s take a closer look at how to edit the mobile version of your WordPress site in order to capture more potential customers.

1. Review Your Mobile Version in the Customizer

To get started, you should check what your mobile site looks like. You can do this by leveraging WordPress Theme Customizer.

Here you can change the preview to mobile in order to see what your site is like and decide on powerful changes. 

📝 Note

To boost your chances of having a high-performing mobile site, be sure to choose a responsive WordPress theme. You should also compress images and media before uploading them to ensure that large files don’t slow down the user experience. 

Responsive themes we recommend: Divi, Hello Theme and Avada.

To check your mobile preview, login into your WordPress site. Then click WordPress Theme Customizer by going to Appearance → Customize. 

Access to WP Theme Customizer
Access to WordPress Theme Customizer

Once you’re in the Customizer, you can click on the mobile icon in the lower right-hand corner of the sidebar. Take a good look at your WordPress site and start brainstorming potential changes.

Mobile Preview in the WordPress Customizer
Mobile Preview in the WordPress Customizer

💡 Tip: Remember that there are lots of different systems, sizes, and browsers for mobile devices, so you’ll never get a 100% accurate mobile preview. You still need to check your website on your smartphone (or mobile device) for better accuracy. 

2. Decide on Key Areas of Your Mobile Version To Edit

Now that you have seen the mobile version of your website, it’s time to make a list of areas you want to edit in WordPress. 

Start by clicking around and noting parts of the site that look wonky. In addition, you can use Google’s Mobile-Friendly Test to discover areas for improvement.

Just type your URL into the bar and click “Test URL” to get results.  

Testing Siteefy with Google Mobile-Friendly Test Tool
Testing Siteefy with Google Mobile-Friendly Test Tool

For example, when we typed in, we got a positive mobile-friendly result (hooray!).

Our mobile-friendly result
Siteefy’s Test Result

However, you may be given some areas for improvement. Errors you may discover with the Google test (or on your own) typically involve design elements. 

For example, the content may be wider than the screen, text may be too small to read or clickable elements may be too close together.

You may also find mistakes in your viewport, resulting in your page not scaling to the screen size or device width.

Overall, you can edit many of these features straight from your page builder.

💡 Tip: Google also reports mobile usability issues in Search Console, so make sure you connect your website to this free tool by Google.

⚡ Check also ➡️ How to Edit WordPress Site? (For Beginners)

3. Edit Your Mobile Version Through Your Page Builder

Now you’re ready to make essential changes to your mobile version. The best way to do this is straight from your page builder.

At Siteefy, we highly recommend Elementor and Divi, both make it easy to update mobile version of your WordPress site.

➡️ Related:

We’ll go through some key areas to update via Elementor below.

To get started, click on Pages → The page you want to edit → Edit with Elementor. This will take you directly to the Elementor page builder screen.

Edit your mobile preview with Elementor
“Edit with Elementor” Button

Once here, click on the mobile icon on the upper bar. Once you do, you’ll get a mobile preview of the page. Now click on the section you want to edit.

Check your mobile preview with Elementor

💡 Tip There are lots of features you can edit for your mobile version! Whenever you see a screen icon beside a feature, it indicates that you can specify mobile, tablet, and desktop parameters. 

For Updating Text Size

Let’s say your mobile text is appearing too small or large on your mobile version. To update this, go to Style → Typography → Size. Click on the screen icon and change it to mobile.

Update text size

From here, you can update the values in the box for different font sizes on mobile. Easy-peasy! 

For Updating Padding

If your mobile text and images run right to the edge of the screen, you may want to add some padding. This can be done by going to Advanced → Layout → Padding.

Update padding

Make sure the screen icon is set to mobile and then add the padding numbers for the top, right, bottom, and left as you desire.

Don’t forget that in this same section, you can also adjust margins.

For Updating Image Width/Height

You can adjust images so that they fit better on mobile, too. Simply click on the image element and go to Style → Image → Width or Height. 

Update images

From here, check that the screen icon is set to mobile and add new values to the boxes.

Remember that the mobile preview will show you what this looks like, so keep doing trial-and-error until it looks great.

For Hiding Elements

If you want to hide an element on mobile, no problem! Head to Advanced → Responsive → Hide on Mobile.

Hide elements

Simply click on the slider button for mobile and your element won’t appear on mobile devices.

For Saving Changes

Ultimately, you can update other mobile features in the Elementor Text Editor, including columns, motion effects, attributes, and more.

Go ahead and click around to find even more editable parameters.

Once you’re ready, be sure to save all changes in your page builder by clicking on the Update button in the lower right-hand corner of your Editor.

If you don’t, you’ll risk losing the changes you made.

Save changes

Of course, if you’re not ready for the changes to go live, you can click on the arrow icon beside “Update” and choose between two other options: Save Draft and Save as Template. Simply click on your preferred option. 

Boost the Mobile Version of Your WordPress Site Today

With these three simple steps, you can edit the mobile version of your WordPress site and attract new mobile users.

Given mobile’s popularity in browsing and purchasing online today, it’s essential to maintain your mobile site and make constant adjustments to improve UI. 

Remember that you can get even more tips for your WordPress site on our Siteefy blog! Check out our latest guides for achieving a high-performing website.

⬇️Further Reading:

Photo of author

Article by:

Nick Huss

Nick is a HubSpot Certified digital marketer and website enthusiast with years of experience. He loves creating new sites, testing novel concepts, discovering amazing tools, and sharing all his findings with the World.

Leave a Comment