ACF Field Divi Module

The DF – ACF Field Divi Module enables to insert ACF (Advanced Custom Fields) plugin using various pre-defined field formatters.

We also provide a way to insert custom field formatter. This enables anyone to pass a non-ACF field as well.

DF ACF Field is shown for this Module in the Module Listing
DF ACF Field is shown for this Module in the Module Listing

Divi Module Options

This module provides the following options

  • Select field from dropdown: When selected, a conditional dropdown field ACF Field Name with list of probable ACF fields is show. Otherwise, a plain text field of the same name, ACF Field Name shows where one can type the field name.
  • Field Formatter: A field formatter with format the selected ACF field in a custom HTML markup. A user defined field formatter can be using a filter. Details here along with set of pre-defined formatters forms the dropdown options. Following are the pre-defined options
    • raw – The raw field formatter displays the ACF Field value as is.
    • unordered_list – The unordered list displays ACF field value in an OL tag. Used for ACF array values.
    • image_slider – Display image slider.
    • image_grid – Display an image grid.
    • button – Displays a button.
    • image – Displays an image.
  • Additional Shortcode Attributes: Here one can pass additional attributes to the field formatter function. For the pre-defined field formatters following are the attributes
    • raw – none.
    • unordered_list – title=”List Title” class_name=”css-class-name”
    • image_slider – show_arrows=”on” show_pagination=”on” auto=”on” auto_ignore_hover=”off” parallax=”off” parallax_method=”off” remove_inner_shadow=”off” background_position=”default” background_size=”default” hide_content_on_mobile=”off” hide_cta_on_mobile=”off” show_image_video_mobile=”off” custom_button=”off” button_letter_spacing=”0″ button_use_icon=”default” button_icon_placement=”right” button_on_hover=”on” button_letter_spacing_hover=”0″ class_name=”css-class-name”
    • image_grid – animation=”off” use_border_color=”off” border_color=”#ffffff” show_in_lightbox=”on” items_per_row=3 use_size=”off” size=” class_name=”css-class-name”
    • button – title=”List Title” class_name=”css-class-name” button_target=”” button_label=”Label”
    • image – animation=”off” use_border_color=”off” border_color=”#ffffff” show_in_lightbox=”off” class_name=”” url=””
The Dropdown is enabled and ACF Fields are populated
The Dropdown is enabled and ACF Fields are populated
With the Dropdown Disable ACF Fields are a text field.
With the Dropdown Disable ACF Fields are a text field.

Custom Formats for ACF Fields

Sometimes we need to custom format the post meta field in Custom Post Builder Plugin’s template.

For example, formatting a website url post meta to an anchor tag or formatting a phone number post meta value to a clickable phone anchor tag.

The ACF Field Divi Module outputs a WordPress post meta field on the page. This module ships with inbuilt formatters.

The Custom Post Builder plugin provides a WordPress filter – df_acf_formatter_callbacks to register formatter callbacks

Creating Formatter Filter

Custom Post Builder provides a filter hook df_acf_formatter_callbacks. This hook registers the custom field formatter callbacks.

A field formatter callback is a php function that takes two input arguments

  • fieldValue : This is the value of the post meta choosen in the ACF Field Divi Module
  • attrs : This is an array of attributes using data from Additional Shortcode Attributes in the ACF Field Divi Module.

Below is sample filter code for formatting a website url to html link and phone number text to clickable html link. It is highly recommended that you write this filter in a child theme.

Setting Custom Formatter in ACF Field Module

It’s time to link your field formatter to a post meta in the ACF Field Divi Module

We are going to link the phone post meta field to the phone_number field formatter callback.

The screenshot depicts the choice below.

Custom Field Formatter Selection
Custom Field Formatter Selection

ACF Gallery Module

ACF Gallery Divi Module displays a collection of images in a grid or slide format. Sharing images is a great way to engage users.

The module uses image data from an Advanced Custom Field’s gallery post meta field.

Use it directly on a post page via Divi Builder or with the Custom Post Builder Plugin.

Content Tab – Module Fields

ACF Gallery Divi Module
ACF Gallery Divi Module

Images section in the content tab allows to set the gallery post meta field and the size of the gallery image.

  • ACF Field : Select the gallery post meta field in this dropdown.
  • Thumbnail Size: Select the image size for the gallery.

Design Tab – Layout

Gallery Field Layout Selection
Gallery Field Layout Selection

Select either the grid or the slider option from the Layout dropbox.

  • Grid option all displays the images in a grid. Each grid item has an overlay on hover. Module provides stype options for the hover elements
  • Slider option display one image at a time. It uses the slide effect. Pagination options like next and previous are available. We provide dot navigation.

There are other standard design options like

  • Text Styles
  • Overlay Styles
  • Image Border
  • Image Box Shadow
  • Image Text
  • Image Sizing
  • Spacing
  • Container Border
  • Filters, and
  • Animation
Custom Post Builder Plugin for Divi

Custom Post Builder Plugin

Use the power of Divi with Advanced Custom Fields (ACF) to create single page templates. 
Learn More