ACF Item Module

Written by the Divi Engine Documentation Team

Watch This Video

Introduction

Follow these steps to learn how to use the ACF Item module.

Step 1: Create A Custom Field

Make your way to ACF, create a Group and add an ACF Field assigned to an appropriate location.

• Users.
• A Custom Post Type.
• Divi Posts.
• Divi Projects.
• Post Category.
• Post Taxonomy.

Step 2: Build A Post

Head over to your posts linked to the above Post Type and add ACF Field information.

Step 3: Add ACF Item Module

Add the ACF Item module to a CPT layout in the Theme Builder or to the post itself. The ACF Item module displays custom fields. After adding the ACF Item Module you will need to customize it by selecting the ACF Name.  Please view the ACF Item Module settings below.

ACF Item Module Settings

Main Options

Main

• ACF Name: Select the ACF Field to display.
• ACF Field From: Select the type from where the field is found.
• Value HTML Tag: Select the HTML tag for the ACF Field.
• ACF Options Page: Enable ACF Pro options page.

Label

• Show Label: Enable to the Field Label.
• Label Seperator: Add a label seperator.
• Custom Label: Define a Custom Label.

Prefix/Suffix

• Prefix: Define a prefix value (for example "£").
• Suffix: Define a suffix.
• Text Before: Define some text to appear before the ACF value.

Visibility

• Visibility: Select who can see the ACF Field.
• What To Do With Empty Value: Select what to do when the ACF Field is empty.

Image, File, URL, Phone, Email & Link Settings

Shared Settings

• Image/File/Link (Return Format): Select ACF Field return format.
• File/Link/Email/Phone field (Make it a Button): Enable to make a file or link a button.
• Link/URL/image/email/phone (Open in a New Tab): Enable to open link in a new tab.
• Link/URL (Set as another ACF field): Enable to set as another ACF field.
• ACF Name: Select the ACF field.
• File/Link/URL/Email (Custom Text for Button): Set custom text for the button.
• File/Link field (Enable to remove website link name): Enable to remove website link name.

Image Only

• Image: Enable to link the image to an ACF field.
• Image ACF Field: Select the image ACF Field.
• Image (Image Size): Set the image size.

Email Only

• Email Subject: Select email subject if the ACF is an email field. 
• Email Body Text: Define body text if the ACF is an email field.
• Email Body After: Select content for after your body text if the ACF is an email field.
• Email Custom Parameters: Define custom parameters to prepend on the link.

Checkbox/Radio Settings

Shared Settings

• Checkbox/Radio Return Type: Select return type.
• Checkbox/Radio Field Is A URL: Enable to make the file or link a button.
• Checkbox/Radio Field Make  A LInk: Enable to make the Field a link.

Checkbox Only

• Checkbox Style: Select the Checkbox style.

Other Field Settings

Text

• Prettify Your Text: Enable to prettify your text.
• Text Make Image: Enable to turn text URL into an image.

Number

• Number Decimal: Define the number decimal.

Video/Audio

• Is Audio: Enable when the ACF field is audio.
• Is Video: Enable when the ACF field is a video.

True/False

• True/False Text When True: Define text when the ACF field is true.
• True/False Text When False: Define text when the ACF field is false.

Repeater

• Repeater Custom Label: Define the ACF item label.
• Inside Repeater Loop Layout: Enable if using this ACF Item Module inside a Custom Loop Layout of a Repeater Field.

Relational Field Settings

• Relational Field Style: Select how to display your Linked Post.
• Relational Field Loop Layout: Select Linked Post Custom Loop Layout.
• Grid Columns: Select the number of columns on desktop.
• Tablet Grid Columns: Select the number of columns on a tablet.
• Mobile Grid Columns: Select the number of columns on mobile.

Conditional Settings

• Checkbox/Select - Add Value: Enable to add the Checkbox/Select as a CSS class.
• True/False: Enable to hide another element using a True/False Field.

Image & Icon

• Use Icon: Enable to use Icon.
• Icon: Select the Icon.
• Image/Icon Placement: Select the Image/Icon placement.
• Image Mobile Stacking: Select the Mobile Stacking.
• Custom Image Before/After: Select an image to show.
• Image Alt Text: Give your image alt text.
• Custom Image Before/After Max Width: Select the Image Max Width.

More Support?

Please email us at [email protected] if you are unable to get Divi Machine working.