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