6. Mobile Editing

Created by Fred Guina, Modified on Mon, 10 Aug 2020 at 01:00 PM by Fred Guina


How To Adjust Settings For Mobile, Tablet, and Desktop

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  next to the individual element you wish to control. 
  2. Click the specific device icon for which you want to edit its settings.


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 / HideSection according to the device.

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

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.

Change Mobile & Tablet Breakpoints

You can set the mobile and tablet breakpoint values.

  1. Go to Elementor > Settings > Style Tab, and set the breakpoint value for mobile and tablet
  2. Save your changes
  3. Go to ElementorTools > General Tab > Regenerate CSS, click Regenerate Files

Columns Ordering

This feature reverses the ordering of columns.

To use Columns Ordering go to Section SettingAdvanced Responsive Reverse Columns and set it to Yes.

Device Preview

Switch between Desktop, Mobile or Tablet views by clicking on the corresponding icons on the bottom of the panel.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article