If cutting down the time it takes to build a page is your number one priority, you might not need every feature out there in your page builder. You're going to want the page builder that's the most user friendly and organized the most efficiently. You need the page builder that will help you get your new pages online fast.
Brizy’s UI is Clean and Uncluttered
The first thing that you see when you load the Brizy editing screen is a gorgeous blank canvas. Right away after loading the editing interface for Brizy I knew that I was in for something special. I wasn’t dissapointed. The UI options are simply laid out and beautiful. It’s just about the best looking interface in a WordPress page builder that I’ve seen!
The Brizy interface is simply beautiful. (I know I keep saying this but it really is!) Using Brizy is also a treat. Elements drag smoothly from the panel. Brizy brags about using the high performing React.js library for their UI. That was a good choice.
Activating an element’s settings option brings up a well laid out panel that’s easy to navigate. From the options panel, you can find options to adjust everything from entrance animations to colors, add custom CSS and element IDs and a whole lot more.
A super useful addition to the UI that Brizy adds is displaying a row’s padding when hovering over it. Little touches like this that help the user save time are highly appreciated.
I did come across a minor problem when I added a the blog post element. The live editor showed the posts but instead of the post’s featured image and content, there was only a placeholder. I started over and repeated these steps but still couldn’t see the featured images.
The posts were displayed normally on the preview for the page. They’re just not visible in the live editor. This isn’t glitchy behavior. I discovered an article on the Brizy site that indicated that this unfortunately is the planned approach.
Beaver Builder’s UI is very well organized and easy to navigate
The Beaver Builder layout is crisp and clean. Updates over the past year have dramatically improved the user interface. Even the smaller (annoying but acceptable) quirks in the UI have been fixed.
Sections are broken up in a logical way which makes everything fairly easy to find. I was a little confused about editing rows that are already on the page but I was able to figure it out pretty quickly. As a bonus it also offers a light and dark UI.
The interface is well organized into modules, rows, and templates. After a module is customized, it can be saved for later use.
Modules can also be saved as global modules. This means that when they are updated, every instance where they’ve been used will also be updated. This feature is a huge time saver.
Beaver Builder includes live editing and it is really (I mean really) fast. If you’ve used other page builders that keep you waiting to see your changes take effect, then using Beaver Builder will be a treat.
It’s not all perfect though
Beaver Builder’s UI does have one annoying thing worth mentioning. While inline editing a large body of text, the module options are anchored to the top of the section. Basically, they’re nowhere near where you’re working. They fixed a similar problem that could happen while editing very tall rows by relocating the options to the bottom but haven’t yet addressed it for the text module.
This is in no way a deal breaker but it can lead you to wonder why they haven’t fixed it yet.
The bottom line is that once you familiarize yourself with Beaver Builder, I think you’ll find it pretty easy to use.
Live page editing all the time
Elementor uses a live editing interface all the time. Elements can be dragged from the editing side bar into the live editor. This automatically brings up the element’s options panel. From there, the sky’s the limit. Every option you’re likely to need is in there.
Elementor is a 100% live editing page builder. That’s great but there is one advantage to the back end editing that less modern page builders rely on. The one thing that a back end editor gives you is a 30,000 foot view of your page layout.
Does one section seem out of place? Do all the sections make sense organized the way they are? A back end editor lets you see your page layout without any distractions.
Instead of taking a step backward to include a back end editor, Elementor does one better with it’s Navigator. Navigator shows you an overview of the page structure. Each section is draggable for easy rearranging and can be expanded to edit individual elements. You can easily get to Navigator by right clicking on any element in your page design.
Elements could be better organized
Elementor Pro has seen regular improvements in the user interface since its initial release. The interface which started off as pretty cramped now has much more room to breathe than its earlier versions.
There are still some aspects could still be improved. Specifically, I’m not a big fan of the persistent settings sidebar. It takes up a good amount of screen space and gets in the way of a more immersive live editing experience. Allowing the option to have a floating settings section would be helpful.
Until you learn to recognize the element icons, get ready for a lot of scrolling and searching around. Most of the elements are not grouped in any helpful way. Some of them are collected into Pro, Theme, and General groups but that really wouldn’t be of much help to anyone.
The way elements are categorized looks more like it’s for the convenience of the developers than the user. Groupings like “Basic”, “Pro”, and “General” are not helpful to anyone but the development team. Various image elements such as “image”, “image gallery”, “image box”, “image carousel”, and “featured image” are spread out through 3 different categories.
The only grouping that makes any sense is the collection under WordPress. That group includes all the widgets usually available for sidebar and footer sections.