Get fresh WordPress Content delivered in your inbox with warpspeed!

learn wordpress wplift wordpress rocket

If you’ve read my Elementor review here at WPLift (or one of the many other Elementor reviews out there), you know that one of the few criticisms I, and others, had for Elementor was its lack of inline editing (that is – the ability to type text directly on the live preview of your page, rather than in a sidebar text box).

Today, I’m happy to say that that criticism is no longer valid:

As of Elementor 1.8 (released on November 7, 2017), Elementor officially has inline text editing built into both Elementor free and Elementor Pro.

Because it’s a major shift in how you can build content with Elementor, I’m going to spend this post taking a look at the new Elementor inline editing feature, as well as some of the other recent changes and updates in the Elementor world.

If you’re a website designer or implementer, you should be pretty happy because, in addition to inline editing, you’ll also get an improved code editing experience. And even if you’re a more casual user, these changes should still improve your Elementor experience.

How The New Elementor Inline Editing Feature Works

Before I dive into the new inline editing feature, let me give you a quick reminder about how Elementor used to work when it comes to text editing.

In the past, you’d drag over an element and then edit that element’s text in the Elementor sidebar:

old elementor text interface

The most recent version of Elementor gives you a completely new way to edit text. Now, you can edit text like this (in addition to the old method you’re already familiar with):

Elementor Inline Editing

 

Instead of being required to use the sidebar text editor, you can now type directly on your page.

You’ll also be able to add basic formatting via the inline formatting options (you can see these at the end of the GIF above). The formatting options let you add:

  • Bold
  • Underline
  • Italics
  • Hyperlinks
  • Header/paragraph styles
  • Ordered and unordered lists

What Elements Does Inline Editing Work For?

While I used a basic text widget in the example GIF above, inline editing is by no means limited to just text widgets. While I haven’t seen an official list of supported elements, in playing around with the plugin, it seems like inline editing makes an appearance pretty much everywhere there’s text to edit.

That means you can use inline editing for elements like:

  • Text Editor
  • Heading
  • Testimonial
  • Alert
  • Etc.

And Elementor has also made it easy for third-party developers to incorporate inline editing into their own projects, which is great for the many third-party Elementor add-ons out there.

Is Elementor Going To Force You To Use Inline Editing?

Nope! While inline editing is a popular feature, I know that not everyone likes it (especially more dev-oriented users). That’s why I’m happy that Elementor does not force you to use inline editing.

If you like the current method of using the sidebar to add your text – nothing has changed. The inline editing functionality is purely an addition, not a replacement for the existing system. In the GIF above, you can see how using inline editing automatically updates the sidebar interface at the same time (which means that the two interfaces are always in sync).

This approach is fairly similar to Divi Builder, where you also have the flexibility to add text via either inline editing or the normal popup (more on Elementor vs Divi Builder here). Most other page builders limit you to one or the other. For example, Beaver Builder doesn’t have any inline editing, while Thrive Architect forces you to exclusively use inline editing.

How Smooth Is The Elementor New Inline Editing Feature?

One of the draws of Elementor has always been its smooth, glitch-free interface.

So does the new inline editing feature match the rest of the interface?

I would say yes. I clicked around like a maniac on my test site to try to cause a glitch and wasn’t able to break anything.

The only situation where I could find any delay is if you:

  • Type something using inline editing
  • Click out of the text element on a blank part of the page

When you do that, there’s a small delay while Elementor saves your text. Honestly, you’re unlikely to notice it unless you’re intentionally clicking around (like I was).

For all other situations, especially when actively typing in the box, I didn’t experience any lag or glitches.

Elementor 1.8 Offers Smoother Code Editing As Well

While Elementor’s new inline editing feature should make both casual users and developers/implementers happy, Elementor 1.8 also has a new feature aimed more towards the developer/implementer crowd:

Autocomplete code editing.

Now, when you go to use the HTML element or add custom CSS to any of the other elements, Elementor will help save you time by offering autocomplete code suggestions:

elementor code autosuggestions

As far as I know, Elementor is the only WordPress page builder to offer this functionality. And while it may seem like a small addition, being able to shave a few seconds off styling each element quickly adds up.

As I mentioned, the autocomplete code editing shows up in two spots right now:

  • The HTML element – this element is available in both the free and Pro versions of Elementor.
  • The Custom CSS option for each widget – this option is only available as part of Elementor Pro.

elementor code autosuggestions

Even if you’re not a developer, the code autosuggestions are pretty dang helpful because they can help you find the right code snippet, even if you aren’t an expert (that’s my situation!).

Elementor Hits 300,000+ Active Installations At WordPress.org

Finally, in addition to the new features, Elementor recently hit another neat milestone:

300,000+ active installations at WordPress.org.

Previously, Elementor had been sitting at the 200,000+ mark, so it’s nice to see the effort that the Elementor team has put into adding new features like inline editing (and the maintenance mode feature that we discussed previously) pay off in the form of increasing users.

Ready To Get Started With Elementor?

If you pay attention to WPLift, you know that our recent redesign is powered, in part, by Elementor Pro. For that reason, and the fact that the Elementor team regularly pushes out significant feature updates like this one, we feel confident in recommending Elementor to our readers.

The new inline editing and code autosuggestion features are available in both the free version of Elementor and Elementor Pro, so no matter what your budget is, you can try the features out and see how they make it easier for you to build websites with WordPress.

Get Elementor Free Get Elementor Pro

Published:

Last updated on:

Colin Newcomer is a freelance writer and long-time Internet marketer. He specializes in digital marketing, WordPress and B2B writing. He lives a life of danger, riding a scooter through the chaos of Hanoi. You can also follow his travel blog.

2 thoughts on “Elementor Gets Inline Text Editing, Code Autosuggestions + More.

  1. Thanks for the input.

    Can the inline editor also resize images and text without having to use the side bar input much like divi or powerpoint?

    How do you find the inline editing vs divi or thrive? Which inline editor do you prefer and why? Any missing features on elementor that you like to use on divi or thrive? Can an add on address those lacking features?

    Hope to hear from you. Cheers!

    • Hey Rich,

      Thrive Architect still has my personal favorite inline editing experience – it feels more natural to me, perhaps because the plugin was built from the ground up to focus specifically on inline editing only. But I’m confident Elementor will continue to improve their inline editing based on how often they seem to push new stuff. And I already prefer Elementor’s inline editing to Divi’s, personally.

      As far as I can tell, you can’t resize images with inline editing, though. I think it just applies to text for now.

Join the conversation!

Join 40,000 WordPress Astronauts
AND GET OUR LATEST CONTENT IN YOUR INBOX WITH WARPSPEED

We will never spam you.
close-link
siteground coupon
Get 60% Off the No. 1 WordPress Hosting!