Introducing Inline Editing: The All-New Live Text Editor

With Elementor version 1.8, we've completely changed the way you write in Elementor. From now on, writing is done visually and directly on-screen. Simply click on your page and start typing.

We've just released Elementor 1.8, with the much anticipated Inline Editing feature.

Our new Elementor UI will make you want to stop everything and start writing content. Writing landing pages, blog posts, all is now possible with Elementor while writing directly on the frontend of the page.

I am very excited about this new Elementor version. In fact, I am writing this very post while using the new Inline Editing feature.

Our challenge with this version was to keep the current interface you know and love, and integrate inline editing in a seamless and user friendly way.

When Is Inline Editing Handy?

Writing on the left panel is still available, but there are many situations where you are likely to prefer writing directly on the edit screens. Here are some situations like that:

  • Fixing spelling mistakes or changing phrasing on current content
  • Creating long form blog posts
  • Optimizing landing page copy

This is a huge advancement for Elementor's page design experience, and it's an extremely helpful feature for content writers, marketers, designers and site owners alike.

This feature has been incorporated in most of our widgets with text controls, and we will add it to the entire list in the next release.

Inline Editing Built For Developers

If you develop themes, addons or extensions for Elementor, you are invited to learn more about this cool new feature of inline Editing through the documentation we prepared. This feature has been added in the current version.

As of version 1.8.0, you can define 3 inline editing states for each textual control in the panel:

  1. Inline text editing without any toolbar (just typing text inline)
  2. Inline text editing with a basic toolbar including: bold, italic and underline buttons
  3. Inline text editing with an advanced toolbar, including: adding/removing links, H1-H6 heading, blockquote, preformatting and bulleted or numbered list buttons

Keep in mind that we recommend to use inline editing in the following way: for wysiwyg control use the advanced toolbar, for textarea control use the basic toolbar and for simple text control you should not have toolbars (simple inline editing).

You can see an example widget that uses all the new inline editing features in our Hello World plugin for Elementor.

To define a specific area in the element to be editable inline, use the newly introduced add_inline_editing_attributes() method. More advanced widgets that use repeater fields will be able to use the get_repeater_setting_key() method to add inline editing capabilities for specific items. Both methods are well documented and has code examples.

Better Code Editor

Version 1.8 also introduces a much easier way to write custom CSS and HTML code in Elementor, with an autocomplete code editor built-in.

You start writing 'back'... and Elementor autocompletes it to 'background'. 

This code hinting, or code completion, allows you to add your custom code faster, as well as help you avoid those small spelling mistakes that are easily overlooked and can take forever to pinpoint.

Another UX improvement is Line Wrap. When you write HTML or custom CSS until the end of the line, the text will automatically move to the next line, keeping all of your content visible in the panel. 

The Future Of Inline Editing

With this version, we've seen huge improvements that all have to do with writing content and code in Elementor. 

These are part of UI improvements that we keep making on the core of Elementor, to make sure it keeps getting better and better.

We've recently reached 300K active installs, and we are both proud of this achievement, and aware of the responsibility that comes with it, to keep providing all our users with the most cutting edge page builder on the market.

If you like the new Inline Editing feature, send us a short shout-out in the comments, and feel free to also support us by adding your positive feedback on WordPress.org.

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 when it was only used to blog.

104 Responses

  1. I love the continued development and improvements being made each month. Elementor is by far the best editor, and Ive tried many.
    Just one note about this latest one though… the thing that made me flee from Divi was the chaotic inline editor. It was madness, stuff flying all over the place.

  2. Fantastic! This is amazing Ben!
    Great work guys! Congratulations on your achieving new heights and high number of installs. This was a much awaited feature! THANKS!!!

  3. Hi, i love how you guys are working on this revolutionary page builder, i wonder if you have in your road map to integrate INLINE spacing for margin and padding? thats the only thing i found necesary to speed up the web design.

  4. This is a huge improvement and most welcome addition to Elementor. Just last week, I was wondering when you guys will be adding this to make Elementor even better. Great to see all the continuous improvement and new features being added. This is awesome and a big thank you!

  5. This is simply another great *New feature, that streamlines the process, but equally as important, helps those that never learned HTML or CSS to physically see the code, thus enabling them to learn visually! So smart!

  6. Like it or not, Gutenberg is coming ¯\_(ツ)_/¯ I’m interested to see how Elementor will integrate with it once the WP.org team has it working. Otherwise what might be good is an Elementor preference for disabling Gutenberg until it’s solid.

  7. I love it! This is a great time saver, and much more intuitive than editing the text you can see in front of you by editing it in a small box to the left of the screen! Makes Elementor even better! Long may it continue!

  8. I’m happy to see this added! Haven’t worked with Elementor too much yet, but am in the process of finding the best 1, maybe 2 page builders to install for client sites. So far Elementor is still in the lineup and looking better to be one for keeps! Looking forward to getting to know Elementor better.

  9. The only thing you’re missing now is easy navigation from one page to another! It’s a pain to have to go back to WordPress in between page edits.

  10. This is a great addition. Much easier for the end user to edit a page. I’ve heard you’re working on the ability to edit headers and footers with Elementor. I’d love to see the features in B Themer incorporated into Elementor Pro. That would be a game changer.

  11. This is off the hook! You have no idea how many times I’ve tried to click and edit right in the preview area. Thanks for the addition!

  12. Of all the improvements and new features you’ve added, this is one of the biggest for me. Inline text editing is the one feature that has tempted me to use an inferior pagebuilder. I’m so glad I don’t have choose anymore!!!

  13. I second this. I usually end up dragging the header logo or menu’s home link up to the address bar as a quicker way. A simple ‘exit editor’ icon at the top of the Elementor panel would work well, simply loading the current page without the editor. Most other builders do this 👍

  14. Just signed up for Pro, only to see yet another free update–and I haven’t even installed Pro. Awesome roadmap, btw, inline editing is a useful time saver.

  15. Once again— you have out done yourselves — You would not know the amount of times I have automatically tried typing in the row myself only to have to remember to go to the tiny box on the side — you have now fixed that problem for me !!! yahhhhhhhhhhhhh

  16. Woo hoo! A big big thank you.

    I would like you guys to enable us to customize the Archive and Category pages. Currently Elementor cannot customize these important pages in WordPress.

  17. The big D’s inline editor is/was (haven’t checked in the last few weeks!) a nightmare and the reason I stopped using their platform. Elementor is by far the best out there at the moment and the reason I converted my whole site over to it a little while back. I am so impressed with Elementor, that I now use it for all client and personal websites and this new inline text editor is just what I was waiting for. The side bar is great but this will speed things up no end. Thank you.

  18. Nice new features they’ll come in handy!

    One thing we sometimes find tricky is when you have overlaying sections with a negative margin on one. Its tricky to select the section that has overlayed underneath the other in the editor.

    Otherwise, best page builder we have found.

  19. Just updated it on all my wordpress sites, really appreciate the inline editing thank you! I’m sure this will make editing more painless for me and my clients!

  20. Dear Ben : works great on pages but I can’t figure out how I can use it on wp posts. I have Elementor Pro, Elementor –btw should I have both plug -ins ?–Generate Pro + Anywhere Elementor. I’d very much like to have Drop Caps, Block Quotes etc in my posts and to be able to edit on the front end would be delicious . Is it possible ? Or do I need coding ? My site is still in staging/testing phase . Thank you Bill Huber

  21. This is pretty cool, especially for blog posts. I am wondering, will this eventually effect all widgets? I know the extended headlines currently doesn’t work and the flip boxes don’t work. Also how is this going to work in the future with Gutenberg? Is that going to be something that is going to need to be readdressed once it happens or is this future proof?

  22. I know that everyone is filled with excitement about it – but I have to express my frustration here.

    There are so many things that need to be ‘clicked’ for editing in sections there, including things with negative margins, tightly made columns with no padding (etc) – that I think that this is completely unnecessary.

    Editing the text on the left is great, and there don’t need to be MORE things to be ‘clickable’ in the WYSIWYG interface… I think that this is really NOT fantastic, functionally.

    I would vote to provide a way to DISABLE this kind of inline editing.

    Not to mention that now there’s “yet another way” to edit things. It should all be done on the left, and not in the main area.

    I will be staying on an older version of Elementor and Elementor Pro for all of my websites until watching this play out in the forums and Facebook groups.

  23. Greetings!

    Is there any future plans for user defined custom breakpoints? It seems it’s been long discussed and requested on Github https://github.com/pojome/elementor/issues/78 and is really a necessity to be a tool for developing as 2 preset breakpoints based on existing devices just can’t cut it really. Love the product, keep up the amazing work!

  24. Thanks so much for the new Inline Editing feature, which works really fine, but in my case the text I type into my layout does not correspond with the content of the text editor and does not get saved as well. Any ideas what could be the problem?

  25. I’ve been using the new text editor for a couple of weeks and have found it to be an excellent improvement. Text editing was the only feature of the interface that I found irritating in the previous incarnation of Elementor. Now I have no problems. Elementor is an excellent product made even better.

    Well done, and thank you.

    Derek Smith

Leave a Reply