- What a Dynamic Tag is?
- How to use Dynamic Tags?
- Dynamic Tags full list
- How to use the Dynamic Settings section?
If you use Elementor often, you probably have already noticed that lots of widgets have a little “Dynamic Tags” button with a cylinder-shaped icon. Besides that, some of JetPlugins have a Dynamic Settings section in the menu. This tutorial reveals what those features are for and how you can use them to show the dynamic content on your site’s pages.
What a Dynamic Tag is?
A Dynamic Tag is a special source of content. Instead of typing the text in or uploading media right to the widget, you can pull it dynamically from another source with the help of a dynamic tag. It could be either the info about the post’s author, site name, and post excerpt or data from the custom meta fields. This option becomes available if you have Elementor Pro or installed one of JetPlugins that provides dynamic content, like JetEngine or JetBooking.
How to use Dynamic Tags?
1 Step — Choose the Dynamic Tag type
For example, let’s take a look at the basic Image Elementor widget. When you drop it to the page, you are offered to choose the picture for display on the left-side menu. “Dynamic Tags” is in the right bottom corner of the Choose Image field. Click on it and you will see the list of all tag types that can be used with this widget.
2 Step — Specify the source
After you choose the type of Dynamic Tag, you have to specify the meta field from which to pull the data. To do it, click on the field to open the drop-down menu. Despite this tutorial using the Images widget as an example, the steps are all the same for all Dynamic Tags fields.
When you open the Field drop-down menu, you will see the list of all meta fields of demanded type with the data that has a suitable format. Besides that, there will be some additional features like the Fallback (that is the data that will be shown if something is wrong with the main info).
For all user tags, like User Image or User Field, there will be a Context feature. It allows you to define the user more specifically:
- Current User (global) — that is the user for whom the page was created;
- Current User (for current scope) — that is the user which is currently proceeding. For example, there is a listing of users that shows the posts written by the user after clicking on them. In this case, if you choose the Current User (for current scope) it will display the meta field value of the user you have just clicked on, not the logged-in user;
- Queried User — this is the currently logged-in user or the user mentioned in the URL (the ID of the user is in the URL);
- Current Post Author — it will show the meta field value of the user that is the author of the currently opened post;
- Current CCT Author — shows the data in the meta field of the user that is the author of the currently opened CCT item. It can be used in the Listing Template for CCT to show the information about the CCT item author. To learn more about CCT, proceed to the How to Create a Custom Content Type tutorial;
- Related Items From… — shows the data for the created relation. To learn more, navigate to the Relations Dynamic Output tutorial.
Choose the necessary meta field, define the additional settings, and voila! Your basic Image widget pulls the content dynamically from the chosen source.
Dynamic Tags full list
Let’s take a look at all the dynamic tags that can appear in the list for different widgets with different plugins and modules activated.
- JetEngine tags for Image widget
- JetEngine tags for Fields
- JetEngine tags that appear after Module activation
- Dynamic Function tag
- JetAppointment tag
- JetBooking tag
- JetReviews tags
- JetSmartFilters tag
JetEngine tags for Image widget
These tags will appear for the Image widget by default if you have the JetEngine plugin installed and activated.
- Custom Image — the image from the meta fields added to the Custom Post Type;
- Term Image — the picture from the meta field you created for the Custom Taxonomy;
- Image from options — the image from the meta field, which you have chosen to use like an Options Page;
- User Image — the photo from the meta field added to the User Profile.
JetEngine tags for Fields
This list of tags is shown for widgets that display text information or links (like Text Editor, Button, or Heading).
- Custom Field — the data from one of the meta fields added to the Custom Post Type;
- Term Field — the value of the meta field you created for the Custom Taxonomy;
- Option — the data you put into a particular Options Page;
- User Field — the data from the meta field you added to the User Profile;
- Query Results Count — the number of query results, created with Query Builder;
- Current Object Field — the data from the SQL query
Query Results Count dynamic tag
With the Query Results Count dynamic tag, you could show the total number of query results and the number of currently visible query results on the page. It works with queries created via Query Builder.
In the Settings tab, we have such features:
- Query. Select the query with pagination that is applied to the widget under;
- Returned Count:
- Total query results count — shows the number of total query results of all pagination pages;
- Currently visible query results count (per page) — shows the number of results on the current page.
In the Advanced tab, there are such fields:
- Before and After. Here you could enter text before and after the number. In those two fields, you can use indents to separate the number from the text;
- Fallback. Enter the text that will be shown if data is failed to be displayed.
Current Object Field dynamic tag
The Current Object Field dynamic tag collects the data from the SQL query.
This dynamic tag can be used for such cases:
- You can use specific data called in Query Builder depending on clause conditions;
- You can use that object called data to be displayed on the front end or use it in the Dynamic Visibility Conditions to hide or show an element according to the object data;
- When you want to use two or more tables from the database, e.g., USERMETA and MEMBERSHIP tables, you use the Query Builder and apply the Current Object Field dynamic tag to output the results.
JetEngine tags that appear after Module activation
Here are the tags that will appear in the list when you activate the corresponding module. To do that, open your WordPress Dashboard and go to JetEngine > JetEngine Dashboard > Modules.
REST API Module
After the activation of this module, the REST API Image, and REST API Field dynamic tags will appear in the tags list. Those tags display the information from the meta fields located on another website yet received via REST API functionality. In the case of images, only the image’s ID can be displayed this way so far.
Custom Content Type Module
Adds the Custom Content Type Image and Custom Content Type Field tags to the list. When chosen, these dynamic tags display the value of the meta field that you created for the Custom Content Type.
After enabling this module, you will see the Data Stores: Post Count and Data Stores: Store Count tags in the list. They allow you to add a counter of likes and a counter of items in the store to the page. You can find the detailed guide on those two tags’ usage by following the link.
Also, there will appear a Data Stores: Get Store tag. You can find it in the Query settings section of widgets that display posts (Listing Grid, for example). It allows the widget to show items from the store and thus include or exclude them from the list. For example, this way you can choose not to show the items the user added to the favorites in the general grid.
When the Profile Builder module is active, it adds a Profile Page URL tag that is available only in those features that are supposed to add a URL (for example, a link to the Heading). This tag creates a link to one of the profile pages.
Let’s go through the settings:
- Profile Page. In this drop-down menu, you will see all the pages created in Profile Builder and will be able to choose one of them;
- Context. Here you can specify the page:
- Queried User — the page of the logged-in user or user mentioned in the URL;
- Current Post Author — the profile page of the author of the post;
- Current CCT Item author — the profile page of the current CCT item author;
- Add Query Argument. If this toggle is enabled, you get a chance to build a URL of the profile page.
After the Map Listing module activation, you will see the Open Map Listing Popup tag in the list. This tag is available for features that add a URL to the page (like the Link feature of the Heading widget) and opens a Map Listing pop-up. Be aware that this tag won’t work on the pages that don’t have the Map Listing widget on them.
In the Specific post ID bar, you can add the ID of the post in the Map Listing you would like to open. You can also define the Trigger – whether the pop-up will appear when the user hovers over the link or clicks on it.
This tag is available right after JetEngine plugin activation. However, it can be used only in JetEngine widgets like Listing Grid or Dynamic Link and features that allow dynamic tags usage (for example, in the Posts Query settings section).
This tag makes it easier to use macro codes. You don’t need to type them in, just choose the necessary option in the Macros list.
Dynamic Function tag
It will appear in the tags list after the JetEngine plugin activation but it has a little more complex settings, so it will be described in a separate paragraph.
This tag performs calculations with the field values. The type of calculation is defined by the Function. Let’s go through the settings:
- Function. In this drop-down menu, you can choose the calculations to be performed with the field’s value:
- Summed value — counts the sum of values;
- Average value — counts the average value of the ones placed in the field;
- Count — this function counts the number of posts/terms/users having the mentioned field filled with data;
- Maximum/Minimum value — it checks the values in the field and displays the maximal/minimal one.
- Data Source. Here you can choose where to take the data from — Post, Term, or User meta fields. If you have chosen the Post Meta option, you will be additionally asked to specify the Data Context:
- All posts — data will be taken from all posts;
- Posts from current term — you can set the term in Taxonomy drop-down, and the data will be taken only from the posts of that taxonomy;
- Posts by current user — the values will be taken from the posts of the current user;
- Posts by queried user — you can specify the user in the Set user ID/login/email bar, so the values of that user’s post will be calculated;
- Field Name. You have to put the name of the field into this bar. The values of that field will be used in calculations;
- Decimal Point. Available for all functions except the “Count”. It allows you to set how the decimal point will look like;
- Thousands separator. Available for all functions except the “Count”. It allows you to set how the thousands separator will look like;
- Decimals Count. Available for all functions except the “Count”. Here you can set how many numbers after the decimal point will be shown.
The JetAppointments Booking: add booking to Google calendar tag appears after activation of the JetAppointment plugin. It allows you to create the link that will add the appointments to the Google calendar. The usage of this tag is described in the tutorial that reveals how to add the appointment to the Google calendar.
The JetBooking plugin adds a JetBooking: Price per day/night tag to the list. It helps you to display prices per day/night dynamically. A detailed description of all the tag’s settings can be found in our JetBooking price displaying tutorial.
When you install and activate the JetReviews plugin, it adds two dynamic tags to the list – Average Rating and Reviews Info. They allow you to add an average rating number and the reviews counter to the rating element. You can find a detailed guide to those tags’ usage in this JetReviews rating tutorial.
How to use the Dynamic Settings section?
The Dynamic Settings section is added to all JetPlugins’ widgets where the data from Dynamic Repeater can be used. To learn more about the Dynamic Repeater functionalities, go through this tutorial.
For example, let’s take a look at the Slider widget from JetElements. The appearance of the Dynamic Settings section will be almost similar for different widgets. Unfold it and turn on the Enable dynamic data toggle.
Afterward, you have to place the name of the repeater field in the Repeater field name text area. All the other fields you can see in this section represent the fields of the widget that can be filled with the data, placed to the corresponding repeater meta fields. You just have to put the names of those meta fields to the related bars.
When you are done with that, the widget will show the content pulled from the repeater you previously created.
That’s all about Dynamic tags and Dynamic Settings. Now you can use them to display dynamic data on the pages of your website.