This is something I’ve seen people occasionally ask in various groups.
Can we use flexible fields in a page builder?
Currently, no. There’s no page builder out there that will allow us to do this aside from just allowing us to write the whole page in php. Which, personally, I don’t have a problem with, but I’d rather make Gutenberg blocks (which works great with ACF) to allow even more custom theme-level integration.
Using Gutenberg blocks is a great way to allow clients to manage the page content easily, but it involves quite a bit of code, so that’s for a whole different level of work. If you’re really interested in making a fully custom theme with ACF, I have a course on that.
A lot of developers who enjoy writing php use flexible fields because it provides a very custom builder-like experience. It’s a little more limited, but that can be an advantage because it keeps the layouts contained within the code, and it’s quite a bit more difficult to tinker with. The downside is that those flexible fields have to be assigned to the pages and when built without scalability in mind, it can quickly become unruly, and hard to hand off to others for modifications.
Which is why people enjoy page builders. However, that comes with the caveat of not allowing flexible fields. So most page builder users use templates and global blocks. This method is great, but it also means that the content manager, such as the client, will have to use the page builder, and this can cause issues where they are not familiar enough with the builder and things can easily look mismatched.
So here’s a great solution that I’ve had in mind for a while that I’ve been planning on exploring deeper in my Advanced Breakdance Course that I’ve been working on, but since this one was simple enough, I’ve decided to make this tutorial public.
Prerequisites
To start with, you’ll need ACF Pro, because it has the repeater field. You’ll also need Breakdance, because that’s my builder of choice. I’m fairly sure this also works in Bricks and Oxygen, but I’ll be using Breakdance solely for this tutorial.
Which brings us to…
Some great use cases!
This method can be used for things like making a series of templated sub-pages that will stick to a certain set of layouts. Pages such as individual services pages, staff member pages, and even case study pages can all be great to use this method since they usually have a set of layouts often reused for those types of pages.
Let’s get into it!
The Video
Timestamps
00:10 Introduction
02:11 Step 1. Setting up ACF
13:40 Step 2. Setting up global blocks
22:36 Step 3. Setting up the template
The CSS
Here’s the CSS used to make the wrapping section/div invisible with 0 padding, while knocking out the padding only from itself, and not the sections inside. The sections inside will be retaining the section container widths.
%%SELECTOR% > .section-container {
width: 100%;
max-width: 100%;
padding: 0;
}
%%SELECTOR% > .section-container .ee-post {
padding; 0;
}
NOTE: I can’t use the %% SELECTOR %% in the code module because this site is also in breakdance and it picks up the selector of this text element, so please edit the css above to have the proper selector when you paste it into your site. There should be an extra % at the end of ‘selector’ in the CSS above.
Other than that, it’s actually surprisingly easy to set this up. maybe just a couple of things to sort out like padding, but the CSS above is all you need, so that’s pretty nifty.
Lastly, some courses
Learn (pretty much) EVERYTHING you need to use breakdance at a professional agency level (5 course bundle)
https://almostinevitable.com/product/the-full-breakdance-agency-bundle/
Learn to use Breakdance for agency work
https://almostinevitable.com/product/breakdance-for-professional-agency-work/
Hope you liked this one, please like, subscribe, and sign up for my newsletter for special offers!
