Hello to all nice people.
I’m trying to do something that might look like a page builder. Of course I use flexible content.
Has anyone done something similar before, and wants to share with me his experience, or some pages where I can learn a little more, also some advice would be welcome?
I would like to create something like:
Add row> Add Container >
Than you can choose – full width or narrow-width container .. (so I’m using bootstrap..so you can choose ‘container’ class or ‘container-fluid’) also you should be able to choose inside that container ..how many columns you want to add .. 1,2,3 … etc. I hope you get the point of what i want to create, any help is welcome.
All the best, Pavle
I have done this multiple time in different ways.
One thing that you need to be careful of is who you are building it for and how many options you give them. My first attempt at this was to do what you are planning
container => row => columns
allowing clients to create any number of columns. The UI became large and confusing for the client. How many columns, how wide is each column, column alignment, column spacing, etc, etc.
I have found that you need to simplify this, for example a layout with 1 column or 2 or 3 with limited settings for columns settings as well as any other settings that might be needed. Also limit it to only what they need to have.
If you are designing something for yourself or other developers that is different than designing something for non-developers to use. You may think that the concept and all of the settings make sense but in the hands of someone that does not already understand how bootstrap works or the terms used in BS it will be a nightmare to use. And they WILL NOT take the time to learn it and then you will find yourself either abandoning the idea completely or re-teaching people how to use it every time they use it.
That being said, I cannot give you any live examples because none of the themes I’ve built like this are publicly available.
They depend heavily on clone fields. For example I have a field group for “column content” that includes “heading”, “subheading”, “content” and “CTAs” that is cloned into all column fields. the “CTAs” in this group are actually a clone of a “CTAs” field group so that the client can insert predefined CTA buttons into any location where they can add content.
The column field group is then cloned into a “Layout Field Group” for example a “2 column layout” field group.
Each of the layout field groups is then cloned into the flexible content field.
There is another field group for “container layout options” that is cloned into every layout field group that contains things like container width (container/container-fluid) and other options that can be applied to every container.
What you are embarking on is a huge project and you need to think about how you will re-use everything and not duplicate fields. As well has how to keep is simple enough for your users so you don’t confuse them.
I would suggest that you read what other have done
Thank you so much for such a great answer, you helped me a lot, you opened my eyes.
Basically, we work with clients and allow them to change the look, centring, color, etc … without “our” help.
So, you are absolutely right not to overdo it, because it will confuse the client. As I started making, it became confusing for me as well… too many elements in each other. That’s why I posted a message here for someone to explain to me.
I’ve already done something initial that I want, but it’s at some beginner level, without child elements. Mostly one flexible content with a bunch of options,heading,content,heading type ( H1, H2 ) text align ,color text ,image bg ,class(maybe that’s for client is not important but for me it is ).
Thanks for the links, I’ll read them, I have to look at the Clone option, I haven’t used it so far, and I think it will help me not to rewrite all the same fields everywhere.
Thanks again John.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!