Skip to main content

Better "Page Building" with Advanced Custom Fields

By Raymond Brigleb

in Website & Brand Insights

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"]
acf1 Image loaded
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"]
atomic-design-organisms Image loaded
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"]
acf2 Image loaded
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!
acf3 Image loaded
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.
acf4 Image loaded
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.
acf5 Image loaded
acf6 Image loaded
acf7 Image loaded

You may also enjoy...

The Patagonia Principle: Building Websites That Last a Decade (or More)

Ten years ago, we promised clients websites that would last a decade. Here's how we delivered on that promise, and the valuable lessons we learned about digital sustainability along the way.
By Raymond Brigleb

Moving Our Website to Craft CMS

After two decades on WordPress, we rebuilt our website from scratch with Craft CMS. The result? Lightning-fast pages, perfect Google scores, streamlined content management, and the joy of storytelling.
By Raymond Brigleb

A Fresh Look for Swiss Water® Process at SCA Expo Houston

Needmore Designs unveils a vibrant, refreshed brand identity for Swiss Water® at the SCA Expo Houston, showcasing bold booth design and playful storytelling.
By Kandace Brigleb