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