How to integrate and use ACF fields with Elementor

Use Advanced Custom Fields with the free version of Elementor. You will learn and see the power of the Dynamic Tags implementing the features of the free version of ACF.
Pay attention: ACF Dynamic Tags are disabled if Elementor Pro is installed and active.

Overview of ACF features for Elementor

You of course know the Custom Fields that are implemented as standard with WordPress, but you also know that they are seriously limited because they are not typed and are only saved as string.

We quickly realize that we can not achieve modern layouts and fortunately there are tools and techniques that will allow us to remove all obstacles, such as ACF…

EAC implements many ACF fields that you will access with Elementor’s Dynamic Tags.
We will therefore show you how to access them and their conditions of implementation.

You should be familiar with the Dynamic Tags features of Elementor and the Advanced Custom Fields plugin (ACF).

If it’s not the case follow this link.


Elementor 3.1.4 and ACF 5.9.5 Free version for both.

Supported ACF text field types

All fields you created support returned formats ‘Value, Label or Both).

Fields with multiples selections are also supported.

The special ‘relationship‘ field is treated differently.

Consult the next sections to understand its behaviors.

TEXT:
[
	'text',
	'textarea',
	'wysiwyg',
	'select',
	'checkbox',
	'radio',
	'true_false',
	'date_picker',
	'oembed',
	'button_group',
	'relationship',
]

How to display the ACF relationship field

The Relationship field allows the editor to manually choose a list of publications and their display order.

But in this particular context (Field TEXT), it returns the list of posts by their title and the related link for each post.

You can also include a CSS class (acf-relationship) to format the rendering with the Custom CSS control. Under Advanced tab/EAC custom CSS

selector .elementor-widget-container {
    text-align: left;
}
selector .acf-relationship {
    line-height: 1.3em;
}
selector .acf-relationship::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f152';
    margin: 0 5px 0 10px;
    color: blue;
}

How to display the ACF relationship field as related posts

Use the ‘Text Editor’ widget and select the upper right wrench icon to open the Dynamic Tags list, then ‘ACF Relational’ entry and the required field.

This feature works equally well with Post Object fields.

Constraints

Because it is not a widget but a feature, there are some contraints.

  • Only the first three items are displayed
  • Image size is fixed at 150×150 (Thumbnail)
  • The level of the title is ‘H3’
  • 30 words are displayed
ACF relationship select tags
Select the Dynamic Tag 'ACF Relational'
Select the related ACF field

Use ACF relationship field as related posts

Customize the render with the feature Custom CSS

As it is not a component but a feature, you must use CSS to display the related posts at your convenience.

For that open ‘Advanced’ tab and fill the control ‘EAC custom CSS’.

Some examples that will inspire you, especially for the name of the classes to use.

/* Display in columns */
selector .acf-relational_post article {
    flex-direction: column;
    align-items: center;
}
/* Modify the Image */
selector .acf-relational_post article .acf-relational_img {
    
}
/* Modify the Title */
selector .acf-relational_post article .acf-relational_title {
    font-size: 1em;
}
/* Modify the Excerpt */
selector .acf-relational_post article .acf-relational_excerpt {
    color: lightgrey;
}
/* Modify the Date */
selector .acf-relational_post article .acf-relational_date {
    display: none;
}

Supported ACF url field types

For fields that can return multiple values ​​like ‘page_link’, ‘post_object’, only the first URL is retained.

URL:
[
	'email',
	'link',
	'page_link',
	'url',
	'file',
	'post_object',
	'relationship',
]

Other ACF fields supported

NUMBER: ['number', 'range']

IMAGE: ['image']

COLOR: ['color_picker']

Display ACF fields data under layout Group

EAC supports ACF fields inside an ACF group by expanding each of the fields as a single field.

Each type of field is assigned to the right widget.

ACF group editor
ACF editor

Select the right dynamic tag

As the single field each entry is prefixed with ‘ACF/ACF Group‘ and the related field type.

ACF Group Text

Each field is prefixed with ‘Group label::Field group label::Field label

ACF group text select
Two different layout groups within the same fields Group

ACF layout Group Image and ACF layout Group URL

ACF Group Image
ACF Group URL

2 thoughts on “How to integrate and use ACF fields with Elementor”

  1. I am not able to fully comprehend this how-to tutorial, it is not appear to me to be coherent. This is a common problem among software coders who attempt to be writters of non-computer language.
    Is this EAC plugin free of charge? Why is it not on the Worpdress repository?
    The Dynamic Tag list on Elementor is not avaliable in the free version, does EAC unlock that feature?

    Reply

Leave a Comment