Advanced custom fields

Starting with version 2.7.0 Zion builder has native integration with ACF. This integration includes both ACF fields and built-in support for creating Zion Builder repeaters using ACF repeater fields.

ACF fields

If you have ACF installed, a new option called “ACF field” will appear inside the “Dynamic data” option that appears for various field types.

How to use ACF fields

1. Create a new page or open an existing page
2. Enable the “Zion Builder” and edit the page with Zion
3. Add an element that supports dynamic data ( for example, the heading element )
4. Press the “Use dynamic data” button
5. Scroll down until you see the ACF fields category
6. Select the “ACF field” option
7. Edit the field options
8. From the “Field to display” option, select your desired field.

Please note that the Field to display option is populated differently based on the Element it is used and its parents:

• If the element is a text element, only the ACF fields ( from both the page/post and options pages ) that generate text will be available
• If the element is a part of a repeater consumer, in addition to the existing fields, you will see ACF fields related to that repeated item
• If the element is part of an ACF repeater, new options will be added so you can select the fields that are part of the repeater fields

Supported ACF fields:

Fields for dynamic data text:

• text
• textarea
• wysiwyg
• number
• range
• email
• password
• true_false
• file
• date_picker
• date_time_picker
• time_picker
• color_picker
• oembed
• select
• button_group
• checkbox
• radio
• taxonomy
• user

Fields for dynamic data link:

• url
• text
• link
• page_link

Fields for dynamic data image:

• image

ACF repeaters as a Zion Builder Repeater Provider

With the help of ACF, you can now create repeatable items using ACF repeaters and Zion Builder Repeatable system.

How to use ACF as a repeater provider:

1. Create a new page or open an existing page
2. Enable the “Zion Builder” and edit the page with Zion
3. Add a section component
4. Edit the section and go to “Advanced tab”
5. Enable the “Repeater Provider” toggle
6. Inside the “Query type” dropdown select “ACF repeater”
7. Inside the “Repeater field” dropdown, select your ACF repeater field you want to use
8. Inside the section, add a column element
9. Edit the column element and go to Advanced tab
10. From the repeater options, enable the “Repeater consumer” option
11. Inside the column, add your content that you want to be built with repeater fields

Please note that when creating a repeated element based on ACF, the dynamic data ACF field option will be populated with the fields available in the ACF repeater. Additionally, you can nest multiple ACF repeaters.