How to Display ACF Fields in Elementor with Sky Addons
The ACF Elementor dynamic tags in Sky Addons pull values straight out of your Advanced Custom Fields and drop them into ordinary Elementor controls. Five tags cover the field types people actually build layouts from: text, images, links, galleries and date-time values. Each one reads the current post by default, so a single template can render a whole custom post type, and each can also be pointed at a specific post, term, user or options page instead. The field itself is chosen from a dropdown grouped by your ACF field groups, so you pick “Client Name” by its label rather than typing a meta key. This documentation covers all five tags, the Meta Source pattern behind them, the two behaviours that surprise people, and a step-by-step example that binds two real fields to two widgets.
Features:
- Five Field Tags: Text, URL, Image, Gallery and Date Time, each matched to the Elementor controls that accept them.
- Field Picker, Not Meta Keys: The Key dropdown lists your fields by label, grouped under the field group they belong to.
- Five Meta Sources: Read a field from a post, a taxonomy term, a user, a comment or an ACF options page.
- Current Context by Default: Leave the picker blank and the tag reads whatever post, term or user is being rendered.
- Type-Aware Output: The Image tag normalises ACF’s different return formats, and the Date Time tag re-reads the field’s own format before printing.
- Fallback Values: Every tag can supply something to show when the field is empty.
Requirements
- Advanced Custom Fields must be active. Sky Addons looks for ACF’s own class before registering anything, so with the plugin inactive the Sky Addons – ACF group and all five tags are absent from Elementor’s tag picker. The free and Pro editions of ACF both satisfy this.
- Secure Custom Fields, the WordPress fork of ACF, keeps the same class and function names, so the group generally appears there too. ACF is what the integration is built around.
- At least one field group. The Key dropdown is built from your existing field groups. With none defined, there is nothing to select.
- A context to read from. Left blank, the tags read the current post, term or user, which means a template or a loop. On a page with no such context, choose the record explicitly in the tag settings.
The Five ACF Dynamic Tags
All five live under the Sky Addons – ACF heading in the tag picker, and each appears only on controls it can fill. An Image widget will offer the Image tag, a Button’s link field will offer the URL tag, and a Heading will offer the Text tag.
| Tag | Fills | Supported ACF field types |
|---|---|---|
| Text | Text controls and post meta fields | Text, Textarea, Number, Email, Password, WYSIWYG, Select, Checkbox, Radio, True/False, oEmbed, Google Map, Date Picker, Time Picker, Date Time Picker, Colour Picker |
| URL | Link and URL controls | Text, Email, Image, File, Page Link, Post Object, Relationship, Taxonomy, URL |
| Image | Image controls | Image |
| Gallery | Gallery controls | Gallery |
| Date Time | Date-time controls | Date Time Picker |
- Text is the workhorse. Values that ACF returns as arrays, such as a multi-select or a checkbox field, are joined with a comma and a space. HTML stored in a WYSIWYG field is preserved rather than escaped, so a formatted paragraph renders as formatting.
- URL outputs the field value as an address. It accepts several field types, but it treats the value as a plain string, so for Image, File, Post Object, Relationship and Taxonomy fields you must set that field’s Return Format in ACF to a URL or a plain value. A field returning an array or an object will not produce a usable link.
- Image handles all three ACF return formats — image array, image ID and image URL — and normalises them for Elementor, so you do not have to change how the field is configured.
- Gallery returns every image in the field, in order, for controls that accept a set of images.
- Date Time looks up the field’s own return format before parsing the stored value, which is why an unusual display format still resolves correctly.
The Meta Source Pattern
Every ACF tag opens with the same control, Meta Source, which decides what the field is attached to. Choosing a source reveals its own picker, and each picker carries the same instruction: leave it blank to use the current record.
| Meta Source | Reveals | Use it when |
|---|---|---|
| Post | Search & Select Post | The field is on a post, page or custom post type. This is the default and covers most work. |
| Taxonomy | Search & Select Term | The field is attached to a category, tag or custom taxonomy term. |
| User | Search & Select User | The field lives on a user profile, such as an author bio or a job title. |
| Comment | Search & Select Comment | The field is on a comment. See the gotcha below before relying on the picker. |
| Options Page | Nothing extra | The field is on an ACF options page. Those fields appear in the Key dropdown with an “Options:” prefix. |
Below Meta Source sits the Key dropdown. It is built from your field groups, labelled by group title, and filtered to the field types the tag you picked can actually handle. That is why the Image tag’s Key list is short: it only offers image fields. Options page fields are read from the site options table rather than through the usual field lookup, which works well for simple values and less well for exotic return formats.
Two Behaviours to Know Before You Build
- The comment picker does not search comments. Setting Meta Source to Comment reveals a Search & Select Comment field, but the search behind it returns posts, not comments. There is no working way to pick one specific comment. The reliable approach is to leave that field blank and place the widget inside a comment loop, where the tag reads the comment currently being rendered.
- Date Time only supports Date Time Picker fields. Its Key dropdown is filtered to that one ACF field type, so a plain Date Picker or Time Picker field never appears as an option. If you need those, use the Text tag, which lists Date Picker and Time Picker fields among its supported types and prints them as stored.
Insert an ACF Elementor Dynamic Tag
- Open the page or template in the Elementor editor. A template that renders the post type carrying your fields is the ideal place to work, as covered in Single Post.
- Hover the control you want to fill and click the database icon beside its label. The full workflow is described in Inserting a Dynamic Tag.
- Choose a tag under Sky Addons – ACF. Only the tags that suit that control are listed.
- Set Meta Source, leaving the record picker blank for current-context reading.
- Pick the field from the Key dropdown, then open the Advanced panel to set a Fallback if an empty field would leave a hole in the layout.
Example: Bind a Text Field and an Image Field to a Template
This example builds a case study layout. Every case study gets a client name and a hero image stored in ACF, and one template renders them all. Start in ACF, finish in Elementor.
- Create the post type. Register a custom post type called Case Study with the slug
case_study, using whichever tool your site already uses for post types. - Create the field group. In WordPress Dashboard → ACF → Field Groups, add a group named Case Study Details and set its location rule to Post Type is equal to Case Study.
- Add the text field. Field Label Client Name, Field Name
client_name, Field Type Text. - Add the image field. Field Label Hero Shot, Field Name
hero_shot, Field Type Image. Any Return Format works, because the Image tag normalises all three. - Fill in one case study. Publish a case study with a client name and a hero image so you have something to preview against.
- Create the template. Go to WordPress Dashboard → Sky Addons → Theme Builder, add a single template, and set its display condition to the Case Study post type.
- Bind the heading. Add a Heading widget, click the database icon on its Title control, and choose Text under Sky Addons – ACF. Leave Meta Source on Post and the post picker blank, then pick Client Name from the Key dropdown — it is listed under the Case Study Details group.
- Give the heading a fallback. In the tag’s Advanced panel, set Fallback to “Confidential client” so a case study published without a client name still reads as a finished page.
- Bind the image. Add an Image widget, click the database icon on its image control, and choose Image under Sky Addons – ACF. Set the Key to Hero Shot and choose a house placeholder as the Fallback image.
- Preview. Open two case studies on the front end. Each shows its own client name and hero image from one template, and a case study missing either value shows your fallback rather than an empty block.
The same pattern extends easily. A Date Time Picker field called project_date can feed a date control through the Date Time tag, and a Text field holding a URL can feed a Button’s link through the URL tag, all from the same template.
Full Settings Reference
Use this table when you know the tag but not the setting. It lists every option each tag in this group exposes, the exact wording you will see in the panel, the value it starts on, and the setting that has to be chosen before a dependent option appears. The Used on column says which kind of Elementor control the tag can be dropped onto. Alongside the settings below, the tags in this group offer the Advanced panel — Word Limit, Before, After and Fallback — on the text tags.
| Tag | Used on | Setting | Options | Default | Shown when |
|---|---|---|---|---|---|
| Date Time | Date/Time | Meta Source | Post · Taxonomy · User · Comment · Options Page | Post | — |
| Search & Select Post | Search field | — | Meta Source is Post | ||
| Search & Select Term | Search field | — | Meta Source is Taxonomy | ||
| Search & Select User | Search field | — | Meta Source is User | ||
| Search & Select Comment | Search field | — | Meta Source is Comment | ||
| Key | List built from your site | — | Meta Source is Post or Taxonomy or User or Comment or Options Page | ||
| Gallery | Gallery | Meta Source | Post · Taxonomy · User · Comment · Options Page | Post | — |
| Search & Select Post | Search field | — | Meta Source is Post | ||
| Search & Select Term | Search field | — | Meta Source is Taxonomy | ||
| Search & Select User | Search field | — | Meta Source is User | ||
| Search & Select Comment | Search field | — | Meta Source is Comment | ||
| Key | List built from your site | — | Meta Source is Post or Taxonomy or User or Comment or Options Page | ||
| Image | Image | Meta Source | Post · Taxonomy · User · Comment · Options Page | Post | — |
| Search & Select Post | Search field | — | Meta Source is Post | ||
| Search & Select Term | Search field | — | Meta Source is Taxonomy | ||
| Search & Select User | Search field | — | Meta Source is User | ||
| Search & Select Comment | Search field | — | Meta Source is Comment | ||
| Key | List built from your site | — | Meta Source is Post or Taxonomy or User or Comment or Options Page | ||
| Text | Text, Post meta | Meta Source | Post · Taxonomy · User · Comment · Options Page | Post | — |
| Search & Select Post | Search field | — | Meta Source is Post | ||
| Search & Select Term | Search field | — | Meta Source is Taxonomy | ||
| Search & Select User | Search field | — | Meta Source is User | ||
| Search & Select Comment | Search field | — | Meta Source is Comment | ||
| Key | List built from your site | — | Meta Source is Post or Taxonomy or User or Comment or Options Page | ||
| URL | URL | Meta Source | Post · Taxonomy · User · Comment · Options Page | Post | — |
| Search & Select Post | Search field | — | Meta Source is Post | ||
| Search & Select Term | Search field | — | Meta Source is Taxonomy | ||
| Search & Select User | Search field | — | Meta Source is User | ||
| Search & Select Comment | Search field | — | Meta Source is Comment | ||
| Key | List built from your site | — | Meta Source is Post or Taxonomy or User or Comment or Options Page |
Best Practices
- Set the Return Format before you build. This matters most for the URL tag: an Image or Post Object field set to return an array will not produce a working link.
- Leave the record picker blank in templates. Selecting a specific post pins the tag to that record on every page the template renders.
- Name field groups clearly. The Key dropdown groups fields by field group title, so tidy group names make long field lists navigable.
- Add a fallback to anything optional. Fields that authors sometimes skip should never leave a blank line or an empty image frame in a published layout.
- Use the Text tag’s Word Limit for long fields. A textarea or WYSIWYG field in a card layout is much better trimmed than left to run.
Troubleshooting
- The Sky Addons – ACF group is missing. ACF is not active on the site. Activate it and reload the Elementor editor.
- The Key dropdown is empty or missing my field. The tag filters the list to the field types it supports. An image field will not appear under the Text tag, and a Date Picker field will not appear under Date Time. Check you are on the right tag for that field type.
- A URL tag outputs nothing usable. The field’s Return Format is returning an array or an object. Set it to a URL or a plain value in ACF, then re-save the field group.
- The field is blank on the front end but fine in the editor. The page has no post, term or user in context. Either move the layout into a template that provides one, or select the record explicitly in the tag settings.
Frequently Asked Questions
Do I need Elementor Pro to display ACF fields in Elementor?
No. The ACF Elementor dynamic tags in Sky Addons work with the free Elementor plugin. You need Advanced Custom Fields active for the group to appear, and somewhere to use the tags, such as a Sky Addons Theme Builder template.
Can I show an ACF field from a category or a user profile?
Yes. Set Meta Source to Taxonomy or User, then either leave the picker blank to read the term or user currently in context, or search for a specific one. Post-related tags for titles, excerpts and the rest are covered in Post Dynamic Tags.
Why can I not select a specific comment?
The Search & Select Comment field returns posts rather than comments, so there is no working comment picker. Leave the field blank and put the widget inside a comment loop, where the tag reads the comment being rendered.
Which ACF field types can I use for an image?
The Image tag supports ACF’s Image field, in any of its return formats. Gallery fields go through the Gallery tag instead. How image controls behave once bound, including image sizes and fallbacks, is covered in Media and Image Dynamic Tags.
Can I use ACF options page fields?
Yes. Set Meta Source to Options Page and pick the field from the Key dropdown, where options fields carry an “Options:” prefix. They are read from the site options table, which suits straightforward values such as a phone number or a tagline.
Conclusion
ACF Elementor dynamic tags close the gap between the fields your editors fill in and the layout your visitors see, without a shortcode or a line of PHP. Pick the tag that matches the control, set Meta Source, choose the field by name, and add a fallback for anything optional. For the wider set of tags, see the Dynamic Content overview, and for stubborn cases the troubleshooting guide. Our team is happy to help at https://wowdevs.com/support/.
