In this article, we’ll go through the steps you need to take to edit the Mobile Version of your WordPress Website using the three most popular page builder plugins (Elementor, WPBakery, and Gutenberg Block Editor).
WordPress has evolved over the years, most themes that are newly released are now very responsive and Mobile Friendly so you don’t have to go through the hassle of editing the mobile version of your site.
If you’re looking for the best Responsive WordPress Themes ← Click the Link to be directed to the list, so you can make your choice.
So, Without Further ado, let’s get into the content of the day which is editing the mobile version of your website easily.
Why do you need to Edit The Mobile Version of your Website?
Most WordPress Users wish to edit the Mobile Version of their website simply because the elements aren’t displayed correctly and don’t look good at all on mobile despite looking stunning on Desktop.
This usually happens when you use a Pagebuilder Plugin to design a Landing Page from Scratch, it happened to me while building my Homepage with Elementor.
How to Edit the Mobile Version of your WordPress Website without Affecting Desktop
Let’s now take a look at the steps you need to take to edit the Mobile Version of your website and fix responsiveness issues.
#1 – Using Elementor
If you created your Landing Page with Elementor and it doesn’t display correctly on mobile, you should edit the Mobile Version while not making changes to the desktop or Tablet versions.
To do this, load the URL of your Elementor Landing Page in your Browser and then click on Edit with Elementor on the Admin Bar.
Once the Elementor Editor is fully loaded, you can find a sort of desktop icon at the bottom of the left editing sidebar, click on it and a top bar will popup, you should now click on the mobile icon.
The Live Editing Interface should now change to a Mobile Screen and you can see the same issues appear, you have to click on the element that’s loading outside the viewport that doesn’t look good and then resize it.
If the element appears to not be resizeable, then the only option you have is to disable the elements from showing up on the mobile version of your site, you can click on Advanced Tab from the left side panel and look for the Responsiveness option, then disable on mobile.
#2 – Using Gutenberg Block Editor
If your landing page was created using the Gutenberg Block Editor, just head over to your dashboard and then click on the pages tab from the left side panel and then click on the landing page’s title.
Once the Block Editor Page is fully loaded, you can use the preview button which is usually located on the same line as the Publish button at the top right-hand corner of the Editor.
Click on Preview, then select Mobile and the Block Editor Interface should change to mobile and you’ll be able to see the Elements causing the Mobile Version of your site to display incorrectly.
Click on the Element and then Adjust it to fit the Mobile Screen Size, if it’s not adjustable then you’ll have to disable the element from displaying on the Mobile Version of your site, and you’ll see the Responsiveness option present.
#3 – Using WPBakery
If you created your Landing Page with WPBakery Page Builder, it is most likely that a row or column is displaying out of place.
What you should do is identify the row or column, then head over to Pages and click on the Landing Page’s Title, then click on the Edit with WPBakery blue button.
The page may reload and you should now find the Column or Row Element that is causing the Mobile Version of your WordPress Website to display incorrectly, then hide it on mobile.
Click on the Pencil Icon above the column with your row element, and a popup will appear you can then click on the Responsive Options Tab and tick the box on the same size as the Mobile Icon.
Update your Landing Page and the Mobile Issues should be fixed.
Final Thoughts
I explained how you can use these Pagebuilder Plugins to edit the Mobile Version of your WordPress Website because they are the ones that I’ve used.
As for other Pagebuilder Plugins, refer to their documentation if they have one, or better still, get in contact with the Plugin’s developer.
Check out a list of content that you should be interested in reading:
- The Best WordPress Pagebuilder Plugins
- Can I use Elementor for Free?
- The Best Free Themes for WordPress Blogs
- The Best Form Builder Plugins for WordPress
If this article helped you, give back by sharing it with others, and don’t forget to share your thoughts in the comments section below.
