Raw First Impressions of WordPress page builders (NSFW Language)

ADVERTISEMENT:

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.

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)

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>