How to Display Custom Fields and Post Data with Elementor Dynamic Tags
Imagine you are building a blog template in Elementor. You design a beautiful hero with the post title, the author's name, the publish date, and the featured image. Then you realize you will need the same design for two hundred posts. Typing each title by hand is obviously not the plan.
This is the job of Dynamic Tags. Instead of static text, you tell Elementor where to fetch the content from, and it fills in the right data for every page automatically. In this tutorial you will learn how Dynamic Tags work, which tags are the most useful, and how to display custom field data in your designs without writing PHP.
What Dynamic Tags Do
Most Elementor fields accept a fixed value: a heading text, an image, a link. Dynamic Tags replace that fixed value with a live reference. A heading can show "the current post's title", a button can link to "the current author's archive", and an image can show "the featured image of this product".
Dynamic Tags are part of Elementor Pro. You will see a small stacked-disk icon, often called the dynamic icon, next to every field that supports them. If the icon is missing, either the field does not support dynamic content or Elementor Pro is not active.
Where Dynamic Tags Make the Biggest Difference
You can use dynamic content on any page, but it really pays off in templates built with the Theme Builder:
- Single post templates that show the title, date, author, categories, and featured image for every article.
- Archive templates that show the current category name and description.
- Header and footer templates that pull the site logo, site title, and the current year.
- Loop Item templates for Loop Grid and Loop Carousel, where each card shows data from a different post or product.
How to Add a Dynamic Tag
Let us start with the most common example: showing the post title in a single post template.
- Open or create a Single Post template in the Theme Builder.
- Add a Heading to the canvas.
- In the Content tab, click the dynamic icon next to the title field.
- Choose Post Title from the list.
- Use Preview Settings to pick a real post, so the editor shows actual data instead of placeholder text.
The heading now displays the title of whichever post the template is applied to. Style it once and every post benefits.
The Tags You Will Use Most
The list of Dynamic Tags is long, but a handful covers most real projects:
| Group | Tag | Typical use |
|---|---|---|
| Post | Post Title, Post Excerpt | Headings and intro text in post templates |
| Post | Featured Image | Hero backgrounds and card images |
| Post | Post Date, Post Terms | Meta lines such as "June 3 in Tutorials" |
| Post | Custom Field | Any value stored as post meta |
| Archive | Archive Title, Archive Description | Category and tag page headers |
| Author | Author Name, Author Info | Author boxes |
| Site | Site Logo, Site Title, Current Date Time | Headers and "© 2026" footer lines |
| Action | Popup, Lightbox | Opening a popup from any button link |
Fine-Tuning Output with Before, After and Fallback
After choosing a tag, click the small wrench icon to open its settings. Three options deserve your attention:
- Before adds text in front of the value, for example "Written by ".
- After adds text behind the value, for example " min read".
- Fallback shows a default value when the field is empty, so you never end up with a half-finished line on the page.
Some tags have extra options too. Post Date lets you choose the date format, Post Terms lets you choose the taxonomy and separator, and Excerpt lets you control the length.
Displaying Custom Fields
Custom fields are where Dynamic Tags turn Elementor into a real content system. Say you run a recipe blog and each post has fields for cooking time, difficulty, and servings. You want them to appear in a neat info box on every recipe.
There are two common ways to store such data:
- Native WordPress custom fields, which you add from the post editor's Custom Fields panel.
- A custom fields plugin such as Advanced Custom Fields (ACF), Pods, Toolset, or Meta Box. Elementor Pro has built-in support for several of these, so their fields show up in their own Dynamic Tag groups.
To display a field:
- Add a Text Editor or Heading where the value should appear.
- Click the dynamic icon and pick Custom Field for native meta, or the ACF tag that matches your field type, such as ACF Field, ACF Image, or ACF URL.
- Open the tag settings and select the field key, for example cooking_time.
- Use Before to add a label like "Cooking time: " and After to add " minutes".
- Set a Fallback so posts without the field still look tidy.
Matching Field Types to the Right Elements
A common source of confusion is choosing a text tag for something that is not text. A few rules of thumb:
- Use image tags in Image fields and background image controls.
- Use URL or file tags in Link fields of buttons and icons.
- Use number fields in elements that accept numbers, such as the Counter or Progress Bar.
- Use color fields, when your plugin offers them, in color controls to change accents per post.
If a tag does not appear in the list for a particular control, it is usually because its type does not match. Elementor deliberately hides incompatible tags.
Hiding Elements When a Field Is Empty
Fallback text helps, but sometimes you want an element to disappear completely when there is no data, for example a "Download PDF" button on posts that have no PDF. Elementor Pro's Display Conditions for elements let you show or hide an element based on rules, including dynamic values. Check whether the field is empty and hide the button when it is. This keeps templates clean without needing a separate design for every case.
Performance and Maintenance Tips
- Keep field names consistent. Use lowercase with underscores, such as event_date, and never rename a field that is already used in templates.
- Prefer templates over copying. Dynamic Tags work best inside Theme Builder templates and Loop Items, so a single design serves the whole site.
- Test with odd content. Preview the template with a post that has a very long title, a missing image, and empty fields. Fix the layout before your visitors find the problem.
- Do not overdo it. Dozens of dynamic lookups on one page rarely cause trouble, but a heavy loop with many custom fields per item is worth testing with a caching plugin turned on.
Common Problems and Quick Fixes
- The editor shows "This is a placeholder". Set Preview Settings in the template to a real post.
- A custom field shows nothing. Double-check the field key and make sure the post actually has a value saved.
- The ACF group is missing. Make sure the field group's location rules match the post type you are previewing.
- Dates look wrong. Choose a custom format in the tag settings, or update the date format in WordPress Settings > General.
Wrapping Up
Dynamic Tags are the bridge between your design and your content. Once you start using them, you stop designing pages one by one and start designing systems that fill themselves. Begin with the basics, Post Title, Featured Image, and Post Date, then add custom fields as your content grows.
Next on Dindin Design, we will put this into practice by building a portfolio with the Loop Grid, where every card is powered entirely by Dynamic Tags.
Comments
Post a Comment
Post a Comment