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;
}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
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.
Select the right dynamic tag
As the single field each entry is prefixed with ‘ACF/ACF Group‘ and the related field type.
Each field is prefixed with ‘Group label::Field group label::Field label‘
ACF layout Group Image and ACF layout Group URL
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?
Hello,
We agree for on developers don’t produce good documentation
– Free of charge: consult the bottom of the home page ‘Cost’
– WordPress repository: because we have to decide so and to avoid the questions you ask us
– EAC unlock Dynamic Tags: follow this link => https://elementor-addon-components.com/elementor-dynamic-tags/
Rgds