Lately we've been doing some pretty advanced shit with ordPress and Advanced Custom Fields, and I wanted to talk about how you can get the benefits of more advanced systems while still leveraging the mature ecosystem of WordPress and WooCommerce.
What is a Page Builder?
A "page builder" is way to let clients or designers build a web page with a simple graphical user interface (instead of raw HTML code, or the basic WordPress content editor).
This is the approach used by services like Squarespace and others. Page Builder by Site Origin is a common one you see in the WordPress community, as is Visual Composer if you're stuck in ThemeForest hell. Divi Builder is one we’ve used a bunch.. and learned a lot from. There’s even a work-in-progress approach coming to WordPress itself, called Gutenberg.
They all have problems
Having used them all, I have frequently run into many of the same issues.
They assume users know how design should work, much like early "desktop publishing" systems. They have to be general-purpose so it’s hard to make something truly unique with them. It’s often almost impossible to make good responsive design using them, so designs based on these technologies often fall apart completely on phones. Their output is really messy and difficult for our designers to work with. Their output can also be buggy and require lots of troubleshooting... trust me on this one.
What is Advanced Custom Fields anyway?
Advanced Custom Fields (or ACF) is a plugin for WordPress that lets you add custom fields to any type of content in WordPress. It works great alongside custom post types, or with existing post types (or even WooCommerce products.) The paid version, ACF Pro, lets you make "repeater" and "flexible content" fields, as well as pages for options, and this is how we accomplish much of the magic I'm going to describe to you. It is a very solid, refined, and well-designed plugin.
How does ACF solve the problems of "Page Builders?"
Your design team can specify what “blocks” of content are needed for the design. They can approach the build the same way they think about using "symbols" or "groups" in their design application.
[caption id="attachment_17168" align="aligncenter" width="631"]
A series of discrete blocks ready to be built[/caption]
You can design “atomically” and think about the building blocks. In terms of actual “atomic design” these blocks are “organisms” and fit between molecules and templates.
[caption id="attachment_17169" align="aligncenter" width="1024"]
Organisms in Atomic Design! Illustration courtesy Brad Frost.[/caption]
This works better with a style guide, as you can essentially define each block one time there. You can view your site as a collection of reusable components, rather than one-off design bits.
[caption id="attachment_17170" align="aligncenter" width="1160"]
Identifying content blocks[/caption]
You can set “limits” on what your clients (or team) are able to do. For example, blocks may allow custom background color, but only allow foreground to be black or white. Always match the style guide!
You can inline instructions and provide better assistance. Page builder UIs don’t really allow for that, and documentation has to be provided separately. Additionally, ACF can document pretty well just by setting intelligent defaults or using placeholder text in fields.
You’re able to manage responsive design much better. Multicolumn layouts can be given consistent classes and handled as you would expect. Images (especially background images) can have their behavior specified robustly—even specify a background color while they load. This all works great with newer technologies like Flexbox and CSS columns.
How about a workflow example?
Sure. I think a series of images with captions should suffice.
