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.


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.


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.


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
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Liked This Article?

We have a lot more where that came from! Join 1,353,229 subscribers who stay ahead of the pack.

By entering your email, you agree to our Terms of Service and Privacy Policy.


114 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.

    1. Hallo, for me miss two essential breakpoint in responsive elementor’s design.
      1.Mobile landscape
      2.Tablet landscape (or small desktop)
      Like in Slider Revolution plugin for example.

      I tested elementor with some website and i found many problem with this two breakpoint specially if you put for example negative margin.

  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

  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 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:

    Can this be done?


  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.

  24. hi there. i’ve used an elementor free theme. looks fabulous on desktop. i’ve changed wordress landing page from blog posts to static page featuring elementor theme. BUT it’s not loading the new static page on mobile – just reverts back to original ‘latest posts’ landing page. ! i’ve no idea how to adjust this.. please help! thanks

  25. i’ve had a go at adjusting things its still not working though sadly. also worthy to note.. i did use an elementor theme for another page on the website and that works fine.. the one on my landing page features a youtube video background.and largish text .. i’m not sure if these things could be the issue. anyway.. help much appreciated. thanks

  26. Is there a way to edit things in the mobile mode but in a way that doesn’t effect the desktop mode? Every time I change something in mobile it effects the desktop version too — which I don’t want.

  27. Hi. How can I disable the responsiveness so it simply fits the screen of whatever device its viewed on? Attempting to redo every page on my site twice for mobile & tablet is waay too much work, and very difficult to do on elementor. Thank you

  28. Hi, how do you disable a menu link on the mobile view? On the desktop view I was able to disable the link from wordpress because I created a drop down menu with 3 to 4 additional page links. For example, I have a “Statement of Faith” page, but everytime I click the “about” menu link, it goes directly to that page in the mobile view. I already have a drop down link under the about link to go to that page. I hope this makes sense.

  29. How do you have more than one column on mobile view? I am trying to have two images placed next to one another but they only appear on top of one another? This makes the formatting look rather odd. Any help would be greatly appreciated! Thank you.

  30. I’ve added Elementor to approximately 70% of my site pages. Other than the extra time navigating through “edit in elementor” and waiting for it to load, the addition has been positive. However, I can no longer upload materials to my pages on mobile devices through the wordpress app. It is a considerable hindrace to my business and I’m hoping there is a solution as I did not find what I was looking for here searching “mobile editing” If there’s an article, please let me know. I really don’t want to have to take it down off all of those pages I built…Thank you.

  31. Thank you but there is a problem. if i choose mobile responsive mode on the left bottom of elementor editing mode, and change e title size and image size it effects the other dektop and tablet mode. It s the same when i change something like font size not the place of columns it also changes the mobile and tablet. I use OceanWP theme. Please help.

  32. I am also looking for a solution the landscape view of my iPad is not the same as I see on the responsive mode tablet view in elementor that is only the portrait view. How can I solve this? Weer can I find how to do this? Is there anyone who knows a solution? I have elementor pro but if this is not possible I wish I had not buy it.

  33. Hi there, could you please tell me why the backgrounds and headings etc. on the mobile version of my site are all different colours to those which I have set them too. For example, I have set my background to light grey and the heading to dark grey but if I preview the website on my phone, the background is very dark grey (almost black) and the heading is light grey.

  34. Loving this website builder. I actually cannot believe that I am so late to the Elementor party. Just redesigning my site using Elementor and can I say I am sorry I never tried it before? Seems like going pro is a must for me now.

    One question though, I am interested in shifting columns, but what do you do when there are more than 2 columns? I have 4 columns and need to switch the bottom two. How do I do that?

  35. Hi, Thanks for a great article. Our site is looking so good and I use the preview modes to preview each mobile and tablet.

    THe only one I am having trouble with is making the site look good on a tablet tilted horizontally.

    Can you provide some insight on to how to preview this view and ensure that the site works for this purpose..

    Thanks a lot.

  36. Hi, I created website pages with Elementor.
    Everything is fine and ok , the pages look great in firefox and opera in desktop and mobile . But the content of pages do not load in Google Chrome in Mobile!!??
    I’ve checked the style for mobile , tablet and desktop each time i’m adding a new content. Everything looks fine but in google chrome mobile.
    And if there is no way to fix this issue it would be a big problem because the most used smart phone default web browser is google chrom !! :((


  37. Hello sir, I created pages of my website using Elementor. I want to open all pages and posts which I have done with Elementor view desktop view on a mobile device also. please tell me what to do…? Please reply this is the main page which I created using Elementor Can I open desktop view on mobile with the same design

  38. Hello sir, I have created pages of my other website using Elementor. I want to open all pages and posts which I have done with Elementor view desktop view on a mobile device also. please tell me what to do…? Please reply this is the main page which I created using Elementor Can I open desktop view on mobile with the same design

  39. Hello sir, I have created pages of my website using Elementor. I want to open all pages and posts which I have done with Elementor view desktop view on a mobile device also. please tell me what to do…? Please reply this is the main page which I created using Elementor Can I open desktop view on mobile with the same design

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 1,353,229 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.