Introducing Mobile Editing: The Only Way to Create Truly Responsive Sites

There are many things that can go wrong when you switch to view a website on mobile: columns arranged on the wrong order, headlines get too big, padding and margin not of the right size... The list goes on. With our free Elementor Page Builder, we've spent months coming up with the ultimate mobile editing solution for WordPress.

mobileeditnew

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

This is a challenge not only for designers, but for the simple WordPress user as well. It can be SO frustrating. You buy a theme that promises to be mobile responsive, only to find out the design breaks on mobile!

Most professional web designers will object to the mere notion of pre-built responsiveness, saying you have to manually define how the layout behaves on mobile using CSS.

Eventually, when we think of making a site mobile responsive, we get stuck between the failed promise of the responsive theme and the long, laborious mobile customization process of the designer.

Luckily for you, we came up with the perfect (and free, mind you) solution:

Solving Responsive Once and For All

We in the Elementor team, like getting things sorted.

Now, We are continuing with our tradition, and sorting responsive design, with the most extensive mobile customization toolset ever seen on WordPress. We call it – Mobile Editing.

These are a set of features that let you create pixel perfect responsive websites in a whole new, visual way.

I want to delve deeper and see exactly what we’ve added.

Beautify Your Mobile Typography

Mobile typography was a request that we got from many Elementor users. To illustrate the problem, let’s take a common occurrence: you need a bold and prominent heading for one of your page designs. You set it to 89PX, which looks fine on desktop, but takes the entire screen on mobile.

Mobile Editing lets you set different font sizes for any text element, on tablet and mobile devices. This means you can set a separate size for the mobile heading, so it no longer takes the whole screen, and fits the mobile screen better.

Similarly, you can also set different line-height and letter-spacing for tablet or mobile devices.

padding-mobile-editing

Set Padding and Margin for Mobile

A tip I learned a while back from Elementor’s CEO Yoni, was to generously add spacing between page elements, in order to let the whole design breathe.

The problem arises on mobile, when I don’t really have the real estate to allow for such ample spacing. That’s why I’m sure you’ll appreciate the ability to set different padding and margin settings for widgets, columns and sections.

Set Different Mobile Alignments

Alignment issues can also arise on mobile. For example, if you have a two column section, with a heading aligned to the left, and beside it an image aligned to the right. When you switch to mobile view, the two columns will switch to appear one below the other. 

Because they are positioned one below the other, there is no reason to keep the left and right alignment. It is much more reasonable to center them.

This is why we have made it possible to set different alignments for desktop, tablet and mobile for the various widgets on Elementor.

reverse-columns

Columns Ordering on Mobile

Let’s take the same example of the two columns, with the heading positions on the left, and beside it the image on the right. When you go to mobile view, the two columns separate, and appear one below the other. Because of the order of the columns, the text appears above the image. How can you get the image on top?

With Mobile Editing, we have solved this, by letting you choose a reverse order of columns.

‘Columns ordering on mobile’ allows you to reverse the order of the columns, letting you have control over the new layout that appears on mobile.

Change Section & Column Settings While on Tablet or Mobile Mode

We are broadening the ability to edit while you are on tablet and mobile mode, so now you can make changes in the section, column and widget settings while on one of these modes.

This makes it easier to design for mobile, because in order to change something on the page, you no longer have to switch back to desktop in order to make the change.

Actionable advice

Unfortunately, it’s highly plausible that your website currently suffers from one mobile issue or another. The good news is you can now easily fix them, in a visual way and without a single line of code.

Here’s an actionable list you can quickly check your site with. Edit your page with Elementor, change the preview mode to mobile and check the following points:

  • Are there any headlines that are too large for mobile?
  • Is there too much spacing between elements, or to the sides?
  • Do the page columns align to the right, left and center correctly?
  • Do columns, moved one below the other, appear in the right order?
Much like with Elementor, and with our Template Library, Mobile Editing is released for free, as part of our open source page builder. We hope you enjoy this feature, and that it provides you with an effective way to cater to your mobile audience.

… It’s absolutely FREE!

This is just the beginning for Mobile Editing, and we would really appreciate any feedback or feature requests you can send us.

About the Author

Ben Pines

Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

74 Responses

  1. Thanks Ben! Another screaming fast update on what is already proving to be an extremely powerful set of WordPress construction features! I’m glued to your blog, looking for the next breaking release.

    As the sharp corners get knocked off with Elementor, I’ll be looking forward to campaigning this plugin to my clients.

  2. Hello. I see in prewiewing mode exacly the same order of columns and so on, BUT when I open the same page in my mobile phone (android) the second column dissapear!!! What is the problem?
    Will be very grateful for you respond ))

  3. Great page builder! Please try to include Email Octopus (emailoctopus dot com) as one of the providers that will tie into your email/lead capture forms. Mail Chimp and the other big name email marketing providers are too expensive. Email Octopus is a much more affordable option for most people. Thanks for your great plugin.

  4. Great stuff here, can’t wait to see it become available for other settings such as section height when using fixed height option. Any plans to allow for adding additional custom breakpoints?

  5. Love the page builder. However for some reason the when trying to edit the heading (Typography) the brilliant font size slider doesn’t resize the font. The slide works but nothing changes. Before i i order it need to check if i can get it to work. Using tempera theme
    Many thanks
    Paul

  6. How is the header tweaked for mobile? The address (test widget on right side of header) cannot be adjusted for mobile and appears above out logo.

  7. my site does not preview well with opera mini version24.0225 in techno adroid.am using songwriter theme and elementor plugin.but it does with other browser.what could be the solution.thanks

  8. I try to change the size of the the text in mobile mode, but it looks the same big when testing it on my phone and on my friend’s phone as well (I am using the typography ofc). Please help me, what I am doing wrong. 🙁 Many thanks in advance.

  9. I find it impossible to start building with Elementor on mobile device such as tablet. Are you rolling this update soon? I can have less weight while travelling and not have to bring my laptop around.

    Thanks! Keep up the great work. It’s the best editor so far.

  10. I really like the look of this but I built my website using Beaver Builder. I’m presuming I’d have to do all the design again if I swapped editors?

  11. Very exciting! One question: How about using Elementor ON a mobile device to edit websites? I’d love to be able to update client sites via my iPad – does Elementor support it?

  12. Hi !, I would like to know how I do when I want to order 3 columns ie on desktop I have A B C but on mobile I want it to look:
    B
    A
    C

    Can this be done?

    Thanks!

  13. I find the responsive code is missing something. there are only three.. desktop, tablet and mobile. Each mobile device can be turned horizontally or vertically changing the aspec ratio.. shouldn’t there be at least two option for both tablet and mobile… not to mention the different browsers for desktop.. which all look different.. chrome, Firefox, apple. Seems impossible with Elementor

    1. We deliberated on this and decided the three options were sufficient for most uses. Otherwise you can use Custom CSS available in Elementor Pro to add other breakpoints.

  14. Ben Pines do you have any other information , links on this I can look at to make sure Elementor is going to be able to do before I purchase it…. ? My site needs to be responsive to chrome, Firefox, safari and mobile devices both vertically and horizontally

  15. And for some reason the layout in the Elementor builder is sometime not a direct reflection of what I’m seeing online. Like things will be off centered in the builder but centered online.. is that normal or did I mess all the margins up.?

  16. Hi,

    I have problem with saving differrent layout of mobile and desktop page.
    The one I set and saved is used for both. Cant save the different styles of a same page.
    I guess I am not saving changes properly?

  17. Is there a plugin that gives additional orientation views for phone/tablet for when it is horizontal? It always looks great in portrait, but there seems to be no way to fix a tablet when it is turned landscape. Please advise. Thanks. (don’t know CSS that well)

  18. Just recently started using Elementor and it’s seriously a fabulous plugin! It’s a great tool for showcasing favorite products with the button widget, too. The only confusion I have is switching from desktop to mobile. Is there a way (using the example in the video) to have the text and image line up side-by-side in mobile mode like it does on the desktop mode?

    Again, absolutely love using this plugin!

  19. Hi Ben, im working with elevator for the first time to build a website. Somehow when im make changes to the tablet settings they will adapt to the mobile view and vice versa. Means i can’t make individual settings for mobile or tablet view. This comes with padding, margins and also with responsive behaviour. Is this a bug?

  20. I am using elementor for my home page. I would like to display different content for phone screens. In other wordpress sites I have done this with divs and style selectors, to show a different div for phones. Can the elementor page block be wrapped in a div so that a different div can be shown for the phone?

  21. Please add a mobile landscape and tablet landscape option. My site is looking way out of whack on landscape with no way to fix it.

  22. @Matan – I like that feature, but it’s really only good for previewing landscape size, unless you want to give up your portrait breakpoint. If you adjust the breakpoint size to landscape, you lose the portrait breakpoint size. I mean we need two more breakpoints (landscape tablet and landcape mobile).

    1. We are aware it is a request by some users and are currently considering adding it. Thanks for the suggestion.

      1. Great! I love how you guys are always adding new features. You’re already the best damned page builder on the planet!

  23. My only issue is Slides — The widget does not resize well even at tablet mode. The problem seems more profound when it’s placed inside a section that is inside a main section. It has to be in its own, full width, stretched section.

Leave a Reply