Mobile Editing – Create a Responsive Website Visually with Elementor Page Builder

Mobile Editing – Create a Responsive Website Visually with Elementor Page Builder

By  |  January 16, 2018  |  Website Designing  |  Comments

One of the biggest challenges in web design is getting your design to look perfect across all devices.

We are thrilled to introduce Mobile Editing, a set of features that will give you full responsive control, down to the last pixel, so you can create an astonishing and truly responsive mobile version of your website.

Download Elementor, now with Mobile Editing: https://elementor.com

Heading to big? Set a different size that will only apply to mobile. You can also customize the line height and letter spacing according to device, or change the alignment of any elements to get a better page layout.

And what about spacing issues? With Mobile Editing, you can set margin and padding to get a better fit for smaller screens.

In many cases, columns that are positioned side by side on desktop, appear disordered on mobile. To help you keep the right order, reverse the columns so everything is aligned correctly.

Now, for the first time, you can make your site truly responsive.
Download Elementor today and start designing beautiful mobile websites.

Hi, This is Noa from Elementor, today I’ll give you an overview of our new Mobile Editing options. One of the biggest challenges in web design is getting your design to look perfect across all devices. Which is why we bring you a feature that will give you full responsive control, down to the last pixel, this way beautifying the mobile version of your website.

With the Mobile Editing feature, you can easily change style parameters according to device, Such as font size, line height, padding, margin etc.
Note that whenever you see a small desktop icon displayed by a certain setting – this means you’ve got full control over its responsiveness. If you click on this icon, 2 more icons will appear – the tablet and mobile icons. And if you click on one of them, notice how the web page preview adjusts itself accordingly.
Same goes for the button you already know down here. If you click on a tablet or mobile display, the tablet and mobile icons will automatically appear.
Not only that, but when you switch between the devices, notice how the page scrolls to the exact spot which you’re editing.

Here I’ll add an eye catching heading.
It looks great on desktop, but when I go to the mobile view it’s too big. We can fix this easily by clicking on the mobile icon and in the mobile settings, reducing the font size. Now the heading has different sizes for mobile and desktop. This ability to control mobile size is available for all text elements in Elementor

Here I have a homepage with a 3 section feature area. The image position interchanges, at first appearing in the right, then left, then right again. Watch what happens when I switch to mobile view. Because of the order of the columns, the image appears on top for the first and third sections, and at the bottom for the second section.

To fix this, I go to section – advanced – Column Order, and reverse the order for the second section.

So this is the first addition we have added, reverse column order. As you can see all images are now on top of the text.

While we are on mobile view, notice that we’ve also added the ability to edit the content in the sections and columns, in addition to changing the widget settings.

Let’s make a small change and align the images to the left, and the text to the right. Now, when I go to mobile, because each image and text widget take are divided to different sections, the alignment doesn’t look that great. That is why we’ve added the ability to change the alignment for mobile. I go to the widget setting, and for the image and text go to mobile, and align to center.

Now let’s add a large eye catching heading to the page. This looks great on desktop, but when I go to mobile view the heading breaks and is too big. We can fix this easily by pressing the desktop icon, going to mobile settings and reducing the font size. Now the heading has different sizes for mobile and desktop. This ability to control mobile size is available for all text elements in Elementor.

Now let’s take a look at this eye catching heading. It looks great on desktop, but when I go to the mobile view it’s too big. We can fix this easily by clicking on the mobile icon and in the mobile settings, reducing the font size. Now the heading has different sizes for mobile and desktop. This ability to control mobile size is available for all text elements in Elementor.)

The line height and letter spacing can also be set to different sizes for mobile.

Another feature we’ve added is the ability to set different margin and padding sizes just for mobile. If we add a side padding to the heading here, again, it takes too much space on mobile view. I go to advanced, and set the padding as 0 for the mobile.

That’s it, I hope you’ve enjoyed this tutorial, and that we’ve made it easier for you to create mobile and tablet responsive websites. For more information go to docs.elementor.com or subscribe to our newsletter.
Video Rating: / 5

About the Author:

12 Comments

  1. Muhammad Umer

    on January 16, 2018 at 8:05 am -

    this is not working on my website theme i am using betheme, please help me
  2. pelle makarna

    on January 16, 2018 at 8:09 am -

    But I want to learn how to do it myself :) I want to follow the great video:)
  3. pelle makarna

    on January 16, 2018 at 8:22 am -

    Very great video ! Can I download this template somewhere and follow your steps?
  4. Tinku Ghosh

    on January 16, 2018 at 9:13 am -

    how to change background of mobile version plzz tell me
  5. Edison Kertawijaya

    on January 16, 2018 at 10:06 am -

    Thanks so much.
    I have a problem when I deactivate image size for tablet and desktop, my images become stretch,
    but it is ok when I activate Tablet and mobile. Do you have solution if I want to make it visible only for mobile.
  6. Eloísa Alves

    on January 16, 2018 at 10:29 am -

    Thank you ^^
  7. pelle makarna

    on January 16, 2018 at 10:58 am -

    When I example delete som text on a button in mobile mode it also deleted on the desktop version ( I edit first the button in desktop mode and saved it) Is there any bug?
  8. ManuAlvarado22

    on January 16, 2018 at 11:23 am -

    Thank you so much <3
  9. Qu entin

    on January 16, 2018 at 11:57 am -

    I am currently building my website with Elementor and I love it. But I face a problem and no idea how to solve it. I use many background pictures (Style/Background/Image) with 1600 x 1100 around and attachment set to "fixed". On Desktop as well as mobile it looks very good but the pictures on tablet does not... in the tablet preview the pics looks very good as well and even the fixed setting seems to work for tablets but on my ipad it does not look even close to the preview. Actually the picture quality looks really poor but as desktop and mobile are fine, why is there a problem just with tablet? Any ideas?
  10. Nick Stephens

    on January 16, 2018 at 12:33 pm -

    Any ideas when this functionality will be available with the text editor? At the moment if i change the position of text to middle on mobile, it changes across the whole site which is not what i want.
  11. Vietnam Tour Pedia

    on January 16, 2018 at 1:25 pm -

    Great one :) Two question, is this plugin effect SEO of my website if im going to use it? Also, what if i use visual composer? Do i have to delete it to use elementor?

    thanks
  12. siddhant pandey

    on January 16, 2018 at 2:16 pm -

    Hey its not working when I visit the site in real mobile

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.