How To Edit WordPress For Mobile

Are you looking to edit your WordPress website for mobile?

If so, we’ve got some great tips for you.

WordPress is one of the most popular content management systems in the world, powering over 28% of all websites. It’s incredibly powerful and easy to use and customize, but sometimes there are things we need done that aren’t included in the default settings. This can be especially true if you’re looking to make changes specific to mobile users.

So let’s get started!

How To Edit WordPress For Mobile

Let’s start with the fact that more than 50% of web traffic globally comes from mobile phones. This literally means that more than half of your customers are checking out your site from their mobiles. Starting from 2018, when Google initiated mobile-first indexing of sites, responsive web design has only become even more important, and focus on the mobile experience of a website logically became a priority for anyone who takes their business seriously. Another important advantage of mobile-friendly websites is that they are simple and intuitive. They offer a smooth user experience, making it easier for potential customers to contact you. Plus, they load quickly and make sharing content easy and natural. One way to think about a responsive site is to see it as a free way to rank better on search engines. Why would you miss that opportunity? The better you rank, the more organic search results you get, which means more leads and more conversions.

It is safe to say that Elementor is by far the best page builder when it comes to editing mobile version of your website. It may happen that you missed to notice this small icon, called the Viewport Icon, in the settings:

Elementor Mobile view

This icon indicates that any value that has it next to it can be edited separately for the desktop and for the mobile site version. Let’s take the Column Width settings for example – you can adjust the value for desktop, mobile and tablet. The value you enter for each device will be valid only for that selected device. Notice that the HTML tag does not have the icon next to it, which means it has the same value for every device.

In case you want to change the value for the mobile device, all that is needed is to choose the mobile layout option and enter the desired values (these values will be implemented only on mobile devices). On the right side of the screen, you have the live preview of all the changes that you make, so that you can see how the new values will look like on the device immediately.

Elementor Mobile view page

To return to the desktop view you need to switch to the desktop layout option. You can do that, as we have mentioned above or by using this small icon in the bottom menu on the page:

Responsive mode

One more important thing to mention related to responsiveness is that the columns and rows can be turned off for individual devices, i.e. we can say that they will not be visible (or will be visible) on some screen sizes.

To access this option follow the path:

  • Right click on the row/column
  • Select Edit Section
  • Click the Advanced tab
  • Select the Responsive dropdown

This option is very important in case we have a section that we know only makes sense to be displayed on the desktop, so we will cancel it on other devices. And to compensate for the lack of it, we can make one section that will be seen on all other devices except the desktop.

Column responsive

When it comes to columns, we can also find the Reverse column option (Tablet / Mobile). It is best to explain this through an example. Let’s say we have a section like this on the desktop where content is split into two columns with images followed by a brief text:

Reverse columns example

Naturally, on mobile devices the content will be rearranged as in the image below, following the original order from the desktop:

Reverse columns example mobile

The reverse column option allows us to switch the order of a certain section for mobile devices or tablet layouts. When we do it for the first section on smaller devices the result is more effectively displayed content:

Reverse columns example mobile view

how to edit mobile version of wordpress site elementor

Many editable features have a MobileTablet, and Desktop settings.  Most common uses include: Text size, Margin and Padding of elements etc.

  1. Look for the Viewport Icon viewport icon next to the individual element you wish to control. 
  2. Click the specific device icon for which you want to edit its settings.
device

Controlling Responsive Background Images and Borders

Background images in Elementor are automatically device-responsive, but you also have control over more options for each device.

  1. Background Image: You can choose a different background image for each device if needed, whether it is a size-appropriate version of the same image, or a completely different image altogether.
  2. Background Image Display Options: You can select a different image position, attachment, repeat, and size for each device. In this way, you have more control over which area of the image is displayed on different device sizes.

Visibility 

You can choose to Show Hide a Section according to the device.

  1. Go to Section Setting > Advanced > Responsive
  2. Set your visibility preferences, choosing from Hide on DesktopHide on Tablet, or Hide on Mobile.
visibility preferences

When hiding an element, and switching to the view it’s hidden on, you will see that this element is “muted”. This gives you a clear indication that this element will be hidden on the live site, but still enables you to edit it as needed. 

You can edit that specific area in the responsive mode in which it is not hidden. For example, if the element is visible on mobile but hidden on desktop and tablet, you will be able to edit the element in the mobile view.

Leave a Comment