Elementor Dynamic Content: A great way to power-up your website

While writing the last post, I kind of stumbled or noticed there is a word that is going to be kind of like a central theme for a few of the upcoming several post and that word is dynamic, because in this post I’m going to be writing about Elementor dynamic content.

So, in that previous post, which was about conditional logic on Elementor forms (it’s a pretty sweet article with an out of the box approach if you haven’t checked that out), I stated that one of the many reasons I had chosen and rode with Elementor Pro for my web design/development business was the fact that among the varied suite of widgets it comes with, the Form widget is one of them. However, where I really started to grasp more of its power and took things to next level was when I began to use the dynamic tags feature, starting with dynamic content.

And what’s dynamic content, you ask?

Say goodbye to static sites

So, according to the website Omniconvert, this is the definition for dynamic content:

Dynamic content (aka adaptive content) refers to web content that changes based on the behavior, preferences, and interests of the user. It refers to websites as well as e-mail content and is generated at the moment a user requests a page.

Ok, so I feel like this definition doesn’t necessarily agree with most basic level of the Elementor dynamic content feature, because while it is web content that changes, it is not going to change based on like if, for example, a lawyer and a personal trainer visit a page on your website at the same time, they’re not going to get different versions of the same page tailored to each of their specific professions.

Elementor dynamic content is more so that you create something on Elementor once and then you can use it repeatedly throughout the site. They actually have on their page explaining this feature the headline Build It Once. Use It Everywhere. What this feature really does in and of itself, is pull content from the database of your website and display it on the page the user is visiting. That’s where the dynamic part is.

Take for example, your regular WordPress blog posts. You notice that they have the same layout but the title, featured image and all the text changes based on what you input when you’re creating it. All of those parts that change is what’s dynamic content on your site. All of that information is sitting in the database and when the user decides to visit a page, the server retrieves the content the user is requesting and shows it with the corresponding layout.

How can I use this on Elementor?

Well, in Elementor Pro, you have widgets that are already dynamic in nature. Like, for example, the Site Logo and the Featured Image are two that come to mind. Site Logo is going to take the image you’ve set using the Customizer. You can alter its dimensions, margins, paddings, borders and all of that, but still the image itself is going to be that one. The Featured Image widget as well, when you drop it, it’s going to get the image from the current page, post or custom post type you’re creating.

In WordPress, and hence Elementor, dynamic content is used with custom fields. And around 70-80% of the time (I’m kind of making up the number here) you are already using custom fields because when you create a page you usually go the Add New > Edit with Elementor route and then you start working on your design pouring in the content that you already have. It’s not the same with blog posts, because like I said above, there you have the title field, the WYSIWYG editor, the featured image, among others and you fill them up with different information based on the post you’re creating.

The same goes for Custom Post Types. When you create a CPT you add the custom fields you want according to the layout and structure. Or if it’s a theme that comes with a CPT, it already has the custom fields established (think something like those themes that after installed you see something like Clients or Team Members on the left panel in the backend).

Everything in the custom fields is the information that’s going to be in the database and what you’re going to be pulling with the widgets (full circle there). So, let’s take for example my website. I have a custom post type called Projects, which has the following custom fields:

• Brief. Pretty clear, it’s where I describe everything that’s needed to be done in a specific project
• Approach. Again, straightforward, is for how I tackled the project’s needs.
• Image for desktop
• Image for mobile
• Testimonial person
• Testimonial content
• Link to external site. This is for the people seeing the custom post to have the chance of going to the website I created and see it for themselves.

It’s kind of something like this:

Inside the Elementor editor, everything looked like this:

Some of the widgets you’re seeing there are a few of the ones I mentioned were dynamic in nature. They’re usually used in places where dynamic content is expected, like templates for blog posts or custom post types.

The other way to use Elementor dynamic content is with the dynamic tags icon, which a little database icon that the majority of the widgets have. If you look at the following image, you will notice:

By clicking on that button, you will open up all the default dynamic tags you have available (the list grows when certain plugins are installed, like WooCommerce):

According to Elementor, these are all the default tags available:

• Post Custom Field – Choose from any custom fields that are associated with the current post
• Post Excerpt – The short summary of the current post
• Post ID – The WordPress ID of the current post
• Post Terms – The chosen taxonomy for the current post (category, tags, etc.)
• Post Time – The time the current post was published (based on your WordPress time/date settings) *
• Post Title – The title of the current post
• Post URL – The URL of the current post
• Archive Description – The description of the current archive
• Archive Meta – Display any archive info based on meta key
• Archive Title – The title of the current archive
• Archive URL – The URL of the current archive
• Page Title – The title of the current page
• Site Tagline – The tagline of the site
• Site Title – The title of the site
• Current Date Time – The current date and time
• Request Parameter – Uses data that was transferred via GET, POST, or Query Vars Requests
• Shortcode – Use a dynamic shortcode for anything that Elementor doesn’t provide a dynamic tag for
• User Info – Display any of the current user’s information, including ID, Display Name, Username, First Name, Last Name, Bio, Email, Website, or User Meta
• Site URL – The URL of the site
• Internal URL – Display an internal URL for the link, choosing from Content, Taxonomy, Media, or Author
• Lightbox – Set a lightbox to open when element is clicked
• Contact URL – Create a smart link when element is clicked.
• Popup – Trigger a popup to open or close when element is clicked
• Featured Image Data – Display the featured image meta data of the current post, choosing from Title, Alt, Caption, Description, File URL, or Attachment URL
• Author Info –  Display information about the current post’s author, choosing from Bio, Email, or Website
• Author Meta – Display any author info based on meta key, such as the author’s country or date of birth
• Author Name – The name of the current post’s author
• Author URL – The URL of the current post’s author page
• Comments Number – The number of comments for the current post
• Comments URL – The URL for the comments form on the current post

When you install WooCommerce, you have these available as well:

• Product Price – The price of the current product
• Product Rating – The rating of the current product
• Product Sale – The sale status of the current product
• Product Short Description – The short description of the current product
• Product SKU – The SKU of the current product
• Product Stock – The stock number of the current product
• Product Terms – The chosen taxonomy (category, tags, etc.) for the current product
• Product Title – The title of the current product

The cool thing is that you can use this dynamic content/tags feature with plugins that allow you to create custom fields, like JetEngine or Advanced Custom Fields. For instance, this website is currently using Advanced Custom Fields, which is how I was able to build the Projects custom post type I mentioned above. I also have this tag available:

• ACF – A custom field that you have created for that specific post type.

Final Words

Elementor Dynamic Content is a really powerful feature because it allows you to build websites either for you or your clients that go way beyond the standard informational brochure-like website with a pre-selected theme. If you’re building websites for clients, it even gives you the ability to create something that your clients can easily manage without having to learn Elementor (and potentially ruining your creation in the process).

One of the better things is that developers who like to work with Elementor have created plugins that harness this functionality to set display conditions for other elements and that’s where things get really really dynamic. Hope you liked this article, and if there’s any question let me know in the comments.