ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
How To: ACF Flexible Content Fields & WordPress Bricks Builder
ฝัง
- เผยแพร่เมื่อ 16 ส.ค. 2024
- The video provides a detailed tutorial on using the Flexible Content Field feature within Advanced Custom Fields (ACF) Pro to create custom meta fields in WordPress. The tutorial walks you through setting up these flexible fields to display different types of content, like project overviews and client feedback. The video also showcases integrating these fields with Bricks Builder for custom page layouts.
I'll start by demonstrating how a flexible content field appears in a real-world example using an advertising executive listing. I'll then proceed to create these fields from scratch. I'll show how to name them, associate them with a custom post type, and populate them with elements like text, rich-text editor (WYSIWYG), and image galleries.
After setting up the ACF fields, I'll navigate to the job section in WordPress to show how easy it is to add these flexible fields to a post. Following that, we'll go to Bricks Builder to create a layout that accommodates these flexible fields and explain how to populate the fields dynamically.
The tutorial also addresses the use of conditional logic to show or hide these fields based on certain conditions. For instance, the related flexible field will remain hidden if a particular job listing doesn't have any project details.
🔑 Key Points:
- What is the Flexible Content Field in ACF Pro
- How to set up custom fields and associate them with custom post types
- Integrate ACF fields with Bricks Builder for custom layouts
- Add conditional logic to display or hide fields based on specific conditions
✅ What You Will Learn:
- Create unique layouts for different content types like project overviews and client feedback
- Populate these layouts dynamically using ACF and Bricks Builder
- Apply styling and conditions to make your layout more interactive
Do you have questions or feedback? Leave a comment below, and I'll get back to you!
Advanced Custom Fields Pro: jo.my/acfpro
Bricks Builder: jo.my/bricks
ACF & Bricks For Beginners: • Advanced Custom Fields...
Bricks & ACF Repeater Fields Tutorial: • Advanced Custom Fields...
Take your WordPress website and skills to the next level!
► The Essential Web Designer's Documents Pack
Looking to take your web design business to the next level? The Essential Web Designers Documents collection has got you covered! With handcrafted, professionally designed documents that have generated tens of thousands in revenue, you'll have everything you need to impress clients, streamline your workflow, and boost your bottom line.
► Buy the Essential Web Designer's Documents Pack Now: links.wptuts.c...
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► EXCLUSIVE WPTUTS DISCOUNTS ◄
✅ WPVivid Backup Pro: jo.my/vividpro (use WPTUTS20 for 20% off)
✅ Project Huddle: jo.my/etafyp (WPTUTS for 20% off - Exclusive)
► MY PREFERRED HOSTING PROVIDERS ◄
✅ CloudWays: jo.my/1feeng8
✅ SiteGround: jo.my/sgwptuts
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ Brizy Pro: bit.ly/2Ji97r8
✅ GenerateBlocks: jo.my/xotgcy
✅ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
✅ GeneratePress Premium: bit.ly/2Ydn1SE
✅ Blocksy: jo.my/y67ten
✅ DIVI Theme: bit.ly/2G8JMiA
✅ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
✅ SMART SLIDER 3: bit.ly/2G0G1vB
✅ CSSHERO: bit.ly/2qbrRl6
► WORDPRESS PLUGINS ◄
✅ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
👉 Twitter: / wptutz
👉 Facebook Group: wptuts.co.uk/f...
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk
I Don't Know Why Every Search I Made I Found Your Channel With Perfect Video. You Deserve Millions Of Subs. ❤❤❤
Awesome tutorial Paul. Precise to the point. Keep it up. 😍👍
@wptuts Paul you have been one of my top TH-cam Creators for a long while now! I'm sooooo looking forward to you doing more with Bricks instead of that other builder 🤮
Your tutorials just have that easy to learn flow!
Hi Paul, I love your videos they are clear and informative. In fact, they have encouraged me to purchase ACF Pro, but unfortunately they don't accept Paypal, and keep declining my card (which I use on Paypal all the time with no issues.) I know Paypal can be a pain, but so can international transactions when you have never made them outside of Paypal before. Very keen to try, but unable to buy. Never had so much trouble purchasing a product in my life!
Thank you, Paul. This is super helpful. Have a great day!
Great tutorial - although I'm not clear as to why you would use Flexible Content for this at all? Why not just make 2 Group fields for example - one for the project details and one for the client feedback? What's the reasoning behind, or benefit of, using flexible content here? Is it just that the fields are 'hidden' in the add/edit post page until a flexible content row is added?
Flexible content allows the website editor to create not only 1x Project Overview and 1x Client Feedback (as "Group Field" would do), but as much as he wants (for example 5x Project Overview and then 3x Client Feedback, ALL in the same page). He can even reorder them (2x Project then 3x Feedback then 1x Project then 2x Feedback, etc.).
When you think Flexible content, think "Super Repeater". Repeater can only create "one kind of component" (here, Project Overview OR Client Feedback). With Flexible content, you can create both types of elements in the same page, in AS MUCH OCCURENCE as you like (and you can reorder them).
@@jybedesign Thank you, I was wondering the same think and your answer is crystal clear :p
Fantastic info as always...my mind is running in top gear thinking of scenarios where I could apply this.
So many ways to use this and Bricks makes it so easy.
@@WPTuts - Indeed…I’m making the switch from Elementor this week.
Thanks for great tutorial!
Everything works as you explained, a part from using a repeater inside a flexible content. For some reason, it seems that bricks doesn’t recognize the repeater fields when they are nested inside flexible content. Did you ran into this issue as well? Any solution?
I think you need a double loop.a loop in a loop. One loop to get the flexible content, and in there a loop for the repeater. But not 100% sure. Sometimes bricks just does not want to play nice
Great!
Flexible content is the way to go! What is the mouse/tablet you’re using in this video?
It’s the Apple Magic Trackpad.
ACF flexible content is currently best way to make sites in bricks. Now we need to make our voices hears and hopefully they add native support for ACF blocks in bricks!
Kinda doubt it.. atleast until wordpress irons out all of the bad semantic issues with Gutenberg.
Streamlining the workflow would be a giant leap forward. Imagine ACF fields being automatically generated and mapped to a WP page based on the elements used in Bricks layout. 😮 Sections are rows, query loops are repeaters etc.
GRREEEEATTTTT!!!
A great feature of ACF Flexible Content is that it allows the end user to insert blocks in any order. Does Bricks support this functionality as well?
Yes. The Order is respected in the loop
It seems like this style of page development is all-or-nothing. For example, if this were for a blog, then how would you combine the flexible content rows with the Gutenberg blocks? Can you mix and match back and forth between Gutenberg blocks and flexible content rows? So you'd have to pick one method and disable the other.
But if it's not for Gutenberg content, then it's only for page content, but now you have the same question of mixing directly Bricks builder content with the flexible content. In your example, you have standard Bricks output in the upper part of the page and then only output flexible content in a certain spot. This is not very flexible if the user wants to insert their flexible row higher up on the page, or mix flexible content with other custom Bricks content on the page. So you kind of just have to pick one style or the other.
Based on how Bricks itself works, if this is only for page content and not templated/blog style content, then we can accomplish users adding pre-made styled blocks in Bricks just by having saved templates they can insert.
Yes there is a small learning curve if the end user wants to use the page builder and learn how to add/remove templates, but I've never had a client complain. In fact once I tell them a little about Bricks and encourage them to watch a beginner video or two, they quite enjoy using it.
So unless a person has a demand that end users never enter Bricks mode, using flexible content seems like extra unnecessary steps. Especially over time maintaining it. What if you don't need a block any more, or have to change it, or the user asks for more types of blocks. It's a ton of custom fields and logic and templating to manage. But if they know how to use Bricks, they can just edit the mast template or adjust styles or simply delete blocks right out of Bricks as normal.
To each their own, but flexible content seems like an old methodology to me. Why not skip all the ACF field creation, looping, logic, dynamic stuff, and stick to either Gutenberg posts or Bricks builder pages/templates? I don't see an actual need to inject using flexible content strategy unless, again, the dev demands nobody ever use Bricks. But why? Bricks (and others) are "page builders", that's their exact job, building pages. It's a learning curve but the curve isn't that hard when doing high level basic stuff.
Can you have more than one of the repeater block types on the same page?
I haven’t tested it, but I believe it should work.
Yes, you can. You can have as many as you want.
This tutorial was a huge prompt for me moving to Bricks from Elementor. I have so many use cases for flexible content and to be able to create it directly in the builder without any additional templates is a much better workflow. Thank you for this in depth tut!! @@WPTuts
Have you noticed that Bricks wraps the "loop" child elements in an html tag and class of whatever tag and class the looping parent element has?? I don' think this is great for SEO, have no idea why they do this, and it bloats the DOM for no apparent reason. I haver tried for hours to work around this. I would love your thoughts @WPTuts
What are alternative for elementor to check the existence of flexible content field and then display? 8:42 How i can do that?
just a bit confused... can you only use the flexible content sections once on a page? what happens if you use them twice? or is that where the conditional logic with acf_get_row_layout is for?
No, you can stack them as needed on a page.
@@WPTuts so if i understand correctly; i put multiples on the page on forehand? And hide if empty? My brain has having a 404😂
I will just test. Lol.
thank you for this - how does ACF handle map listings?
Wonderfully
Great Tutorial. thank you so much 🙏🏻. Does it works also with ACPT flexible Content field?
I believe so, yes. I’m still testing ACPT with Bricks. So far, everything seems to be working the same as ACF.
@@WPTuts Update: I have just tried it out. Unfortunately it doesn't work - when I select Use query loop in the block, I can't select the flexible element itself, only the blocks it contains.So instead of "[Page] - Inhalt flexibelContent" it shows "[Page] - Inhalt flexibelContent heading" (heading is one of the contenttype). I can loop the content, but only on this single content type. Also, adding image galleries doesn't seem to work for a single content type either. But maybe I am doing something wrong?
@@thomasbauer4801 hmm, that’s a shame. I’ll have to have a play around with it and see what’s going on.
It’s probably worth reaching out to the developer to see if it’s supported or will be in the near future.
I know v2 is due for release soon. Maybe that’s updated the flexible content functions.
I'm 100% sure I'm missing something but after eleven minutes I still have no clue why I would ever use this.
Elementor is way behind on this point for a long time. dynamic groups, conditional... etc...
I agree. Bricks is focusing on making a solid platform for dynamic data as opposed to relying on additional plugins.
Adding the Dynamic Content for Elementor plugin lets you easily do everything shown here and much more. But yes it does mean adding a plugin to Elementor.
@@emailjough exactly. It’s another plugin to do what should be basic functionality.
Can you do absolutely everything you can do with Elementor in Bricks? Somoene please tell me!
If so, I'm switching because Elementor's so full of bugs lately...
Bricks is much more powerful than Elementor.
@@Gearyco is it though?
In many important ways, yes it is. To do what’s covered in this and the previous video about Repeater Regions would require extra plugins in Elementor Pro.
Global styling and class based design is way more powerful in Bricks and dynamic data is way more powerful and flexible natively in Bricks.
Plus, you have more control over WooCommerce and more than offered by Elementor.
@@WPTuts Interesting. I will definitely start using it then. What about Bricks compared to Oxygen? Who has the edge? I'm just trying to find a builder that I'll be able to rely on for years to come. Is perhaps Webflow the answer? idk.
@@BrantK147 I wouldn’t opt for Oxygen tbh. It’s a good tool but the framework it’s built in is older and is coming to the end of its life. Oxygen will still be supported, but I personally wouldn’t want that fact potentially limiting what I can do.
Webflow is good but can get expensive quickly for larger sites.
It really comes down to the types of sites you’ll be developing and how you want to handle supporting them into the future.
Bricks is a good candidate, but you should also look into some of the block based tools like Cwicly, Greenshift, etc.
how to do it in elementor?
You can’t without additional plugins.
@@WPTuts Thank you for replying to my comment. Yes, I have installed ACF Pro, Elementor Pro, and Jet Engine. If I don't use Bricks Builder and only use Elementor Pro and Jet Engine, can I still do the same things?
Why not just to learn how to do it yourself with code?
Carry on.. but not everyone has the inclination or need to learn coding when there are viable no-code tools available that make the process way easier.