I gave a presentation this year at WordCamp Boston, titled “Picking a Page Builder”. You can see the slides here: http://gschoppe.com/wcbos2017
I’ve never really incorporated page builders into my workflow, so in preparation for the talk I decided to do a blind review of 7 of the most common page builders. I recreated the homepage for the site http://www.accessibleweb.com in each builder, without reading any documentation, or taking any tours of the builders.
I chronicled the results in the slideshow above, but I also wanted to share the raw notes i took while building in each one. These notes are not a full review, and you’ll see that some of the ones I rated highly got harsher comments when using… mostly that was because the super obvious issues that i noted in my scorecards sometimes were so bad that I wasn’t as nitpicky with the fine details.
It should also be noted that because I used no documentation and took no tours, these notes may be incorrect about some features of the various builders, and should not be taken as guaranteed facts. My notes speak more to the discoverability of features than their existence. This is simply my live chronicle of how well was I able to figure each builder out, and how far could I get in a couple of hours.
Caution: these notes are unedited, and may contain harsh language
Visual Composer (2 stars)
- Why do they need to put two logos on every edit screen?
- Wow… that grid of available blocks is hard to parse, and the search was easy to miss
- I have to type image size? (while adding an image block)
- wait… where is my image?? (10 minutes later) ah, the thumbnail size was capitalized, so my image just didn’t display
- fairly good responsive controls, but why offer offset and not push/pull or reverse? I don’t think I can re-order columns when they collapse.
- well, equal height screwed everything up (maybe related to flexbox settings in my theme?)
- cluttered interface, hard to grok quickly
- using the default WordPress link-picker is nice
- Why are editing tools obscured by content? (front end editor)
- Why don’t dialogs close when i save (front-end editor)
- Why does the post grid look so Visual-Composer branded… can i customize that? (clicks grid builder)
- backs away slowly… i guess VC branded post grids aren’t that bad, after all… (that is an insane editing interface)
- ninjaforms block just shows pulsating animation… not form or placeholder (it loaded after a refresh)
- full width background was easy, but I get the feeling it uses a nasty javascript hack
Divi / Divi Builder (3 stars)
- it looks like a clown puked on my website, but it kinda works
- can’t tell what’s in any of the columns in the backend. they’re all just text lables
- way too icon-driven.. give me labels!
- buggy live editor. some things were obscured, and some edits had to be done twice
- no vertical align, so i can’t replicate the button in the first set of columns
- very few responsive tools. I want column reordering, dammit!
- Replacing an image in a text area is pretty damn hard
- Why isn’t this the version of TinyMCE that WordPress uses?
- Weird scrolling glitch when the mouse is over the TinyMCE editor… editor doesnt have a scroll bar, but when the mouse is over it, i can’t use the scroll wheel to navigate the box around it
- little bugs with UI not updating as actions are occurring
- adding a new section at the bottom causes weird scrolling up the page
- Blog grid is fine, not as many options as i’d like
- contact form is customizeable, but no options for field types like select?
- no interface for inserting widgets or shortcodes
Avada / Fusion Page Builder (1 star)
- so I need “Fusion Core” and also “Fusion Builder”… hmmmm
- Huh, no live editor. Well, if the back-end is good… oh…
- It’s pretty hard to tell what the settings do without visual feedback
- column controls seem to be scattered everywhere
- minimal responsive options
- holy crap! I can link a whole column… woohoo! (this isn’t a feature in any of the other builders, and actually impacts accessibility of the final resulting page)
- title blocks are confusing… why aren’t they just part of text blocks?
- full-width block requires 100% width template (non-default) even on their own theme.. wtf? totally unintuitive… had to google all over (i know… that’s cheating)
- blog masonry is nice, not very many design options
- No visual for widgets or ninja forms
- drag/drop is iffy
- no basic
<hr>support, just complicated dividers
Beaver Builder (4 stars)
- Huh… no backend editor.. front is nice though
- What is with these default paddings and margins cutting into my theme?
- Pretty flexible responsive options
- Why do I have to keep clicking “add content?” (the add content menu collapses ever time i interact with the site… i want a ‘dock’ option)
- no breakout block… apparently designed for full-width themes only
- I like this one, but I’d need to modify my theme to use it
Site Origin Page Builder (can i give zero stars?)
- Requires additional plugins from moment one
- Clutters the Widgets interface
- Horribly Mystery Meat Navigation
- wait… there is a right click menu? and the options there aren’t duplicated anywhere else??
- all editing is VERY separated from display.. very hard to tell what I’m doing
- Terrible Accessibility
- Freehand Column dragging without snapping… ew
- no vertical controls to match height, etc
- I have to keep adding rows.. why god, why
- ok, I give up… this is just a terrible interface
Elementor (5 stars)
- editing in the sidebar and placing in the content area seems complicated
- no usable keyboard controls
- Difficult to precisely size columns, because of the drag interface
- Responsive controls seem to be limited to show/hide and reverse columns (still better than some)
- Can’t match height in columns or vertically center (I’m ok with not adding flexbox support to a visual builder… too many theme issues)
- buttons don’t respect theme styles (this was only a small annoyance)
- I can go full-width in a theme with a fixed content width! (probably some janky js powering it, though)
- Post Loop/grid options limited to Elementor Pro (which is pretty affordable for single or agency)
- I actually like this one
Live Composer (1 star)
- No back-end editor
- For a plugin that markets the word “free” so hard, that nag bar at the bottom of the screen is pretty offputting
- Why horizontally scrolling control bar?.. this is painful
- It’s really hard to find blocks quickly (and there is no search)
- scrolling behavior is inconsistent between panels… oh god why?
- Another builder where i have to type thumbnail size… you guys do know WordPress can list these options for you, right??
- This one’s text editor is worse than the others.. minimal inline editor with the full editor hidden behind options… Unless the full power of the editor is usable inline, don’t do this
- No vertical center
- can’t do full width in themes with wrappers
- Grid has very few design controls
- Shortcode block makes me refresh before showing
- Doesn’t respect any theme styles, including fonts
- Disable it and your content is literally gone (this isn’t ok, guys)
Chris Haff says:
This is supercalifragilistically hilarious, moar please! Also want to call out your link to http://gschoppe.com/wcbos2017 for more goodness.
You should mention that you’re trying to get these theme builders to work with a Bootstrap 4 theme. As that’s still in beta it isn’t quite fair to expect them to be compatible, through it does do a good job of stressing how well they may work with a random builder.
IMO you want Oxygen. Gutenberg will just be gravy on top.
gschoppe says:
I will admit this was a Bootstrap 4 theme, but the issues were not caused by bootstrap. They appeared to stem primarily from the page builder developers not QAing their components on themes that used flexbox on the post’s container element. They didn’t do an adequate css reset on their own flex components, so inherited styles from mine.
I played with Oxygen very briefly. I agree that it exposes a lot of power, but the UI was too heavy for my tastes. I got lost a few times.
Josh says:
Hi.
Josh from Elementor here.
I appreciate you taking the time to actually test all these builders and do this insightful write-up.
Unfortunately, I am afraid I must be honest and say I believe you might have missed some things and made some wrong judgments when evaluating Elementor.
Please allow me to point them out:
– Elementor has a bunch of keyboard shortcuts alowing the user to Undo/Redo, Delete, Duplicate, Save and more. see our documentation on that:
Elementor Hotkeys
– Elementor provides two methods for resizing columns: Dragging is the most intuitive, but if you need to be precise, you have a control in the panel to type the exact desired width of the column.
Elementor is proud of one of the best innovative and wholistic solutions for mobile editing and responsive capabilities, allowing to responsively easily adjust the design of the elements of the page to the finest details, including typography, margin, padding and much more.
To learn more about our mobile editing options please go to:
https://docs.elementor.com/article/68-mobile-editing
Elementor is actually making extensive use of flexbox, it’s columns height can easily be matched and vertically centered. This claim is simply false.
This JS solution for a full-width section, is officially recommended only as a last-resort and we offer some other non-JS solutions for some situations (like blank canvas template that can be forced on by Elementor), at the same time, this is one of our most stable features. There are virtually no reported issues with it.
I hope You will have the opportunity to give it another go for a couple of days, and I assure you will find that there’s a lot more to this builder than you concluded in this article.
We have a YouTube channel with many tutorials and overviews, and we have a dedicated support team ready to answer all your questions!
Cheers!
gschoppe says:
Hi Josh,
I actually like your builder a lot, which is why I gave it 5 stars!
I should probably be more clear that these notes were the raw impressions I got while using the editors for the first time, with no use of outside documentation. As such, some of the facts may be incorrect, but speak to the experience i had in discovering features on my own, under a time constraint.
My comment about keyboard controls was more oriented at accessibility than power-use. I was trying to figure out controls for placing and reordering elements. While they might exist, I had a heck of a time trying to figure them out on my own. To be fair, all the page builders I tested had major accessibility issues for keyboard-only control.
I did not see the exact sizing control for columns, and I am glad you have it, although I will say that the option to snap to a grid (even as an option) would make this process much faster and more intuitive for me.
My statements about responsiveness mostly came down to positioning, rather than styling. I would love to see push/pull styles, as well as the ability to change column widths at different sizes and control when they collapse. I did not see any of that included, but once again, this review was entirely what I could discover without assistance from documentation. I have now watched through the responsive video, and see that you do offer responsive sizing controls. I’m glad to see that, but they are fairly well hidden.
I’ve got to say, I couldn’t figure out how to set up two columns with text on the left and a vertically centered button on the right, even after about 30 minutes of hunting. This was one of the most confusing things to me, so if you can explain where those settings are hiding, I’d massively appreciate it.
I am glad to hear that you support full-width templates, and forcing a full-width seems like an excellent way to make full-width sections work. I’m glad your JS solution has few reported bugs, but I do stand by the fact that such solutions are, by necessity, a bit of a hack. It is good that you provide other options, though it might be useful to promote those options situationally in the interface.
I swear, this was not a negative review. I’ve been promoting your builder heavily since using it, as I truly believe you are the best current option. It is simply what I ran across as a first-time user.