Support

Account

Register Login

Home › Forums › Feature Requests › Page Builder with Flexible Content Fields

Solved

Page Builder with Flexible Content Fields

  • Over the past week I’ve been attempting to come up with a page builder experience using ACF flexible content fields.

    I’ve managed to get this working using nested flexible content fields and some custom CSS to position the fields. The experience is decent (for the user anyway).

    Problem is, it’s a bit of a development nightmare as I’m having to build each ‘module’ four times and I think there could be a way to only build each module only once but I’m not seeing it.

    Here’s what I’ve done:

    Created a flexible content field called ‘page builder’:

    Page Builder

    Next, I’ve nested four flexible content fields inside the ‘page builder’ flexible content field. Each of these four flexible content fields is for a single row with different amounts of columns in:

    Columns

    Now, inside each of the four flexible content fields I am building what I’ve called ‘modules’. Icons boxes, buttons, WYSIWYG editor etc etc. These are the builder elements that will be placed inside the columns in the rows.

    Modules

    Problem is, I’m having to build each of these modules four times. Once for each of the flexible content fields and that’s obviously not good. Would be awesome if there was a way to only build these modules once.

    What I have tried is to build the first nested flexible content field ‘1 Column’. Then building all the ‘modules’ inside it. Then, duplicating it three times and re-naming the three flexible content fields to the suitable names.

    This has worked no problem, however, there is going to be times where I have new ‘modules’ that I would like to introduce and duplicating will not then be possible then I’ll be back to the original problem.

    Does anyone have any suggestions? Have I gone about this totally wrong. It’s really just an experiment, but I was so happy with how the user experience was I’d like to try and find a way to make this work without repeating myself.

    Cheers,
    Paul

  • Hi @paulka

    There’s a plugin created by John called Reusable Field Group Field for ACF Pro. Please take a look at this thread to learn more about it: https://support.advancedcustomfields.com/forums/topic/reusable-field-groups/. I’m not sure if it will work with your situation, but I guess there’s no harm in trying it.

    Another method would be registering the fields by using the PHP code. This page should give you more idea about it: https://www.advancedcustomfields.com/resources/register-fields-via-php/. With this method, you can create the required layouts as variables and then add them to the right place programmatically.

    I hope this makes sense 🙂

  • Hi James,

    I appreciate your response and suggestions.

    While the Reusable Field Group looks a really decent option, I am reluctant to go ahead and even experiment with this due to the following issue:

    https://github.com/Hube2/acf-reusable-field-group-field/issues/29

    The above issue is a heads up stating that Elliot has begun work on similar functionality. This sounds great! I completely understand it’s impossible to give any kind of ETA for this work to be ready, but, would you be able to give me an idea of the timescale? Will it be weeks or months?

    Registering fields via php looks the best option for me as the plugin stands now. I understand how this can be done and I appreciate the link providing (the docs are amazing on the page!).

    The only question I have regarding registering fields via php is about naming conventions for field group’s and field keys.

    Do I need to follow the ACF naming convention, or can I use my own just as long the the keys are unique?

    Thanks again,
    Paul

  • Hi @paulka

    I’m afraid I can’t tell you when this new feature will be released either. I’m sorry for the inconvenience.

    Regarding the keys question, one thing you should follow is that a group key should start with ‘group_’ while a field key should start with ‘field_’. You can read more about it in the group settings and the field settings.

    I hope this helps 🙂

  • Let’s imagine I have 4 columns with text/content. After a week I want to delete the last two columns – with this approach I have to delete all colunms and start a new row with 2 columns, right?

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Page Builder with Flexible Content Fields’ is closed to new replies.