Dynamic content is one of the features offered by Elementor Pro. It is a key feature if you want to create your own WordPress theme using the theme builder feature offered by Elementor Pro. The feature allows you to add dynamic content to your theme templates. Wait. What is dynamic content actually? Read on to learn more.
Simply put, dynamic content is the type of content that changes based on the data on your website. Let’s take an example: your site title. When designing a page using Elementor, say the homepage, you can definitely manually type the title of your site if you want to add your site title. But think about this. What if you change your site title in the future? Correct! You have to change the site title on your homepage manually. If you only added the site title on the homepage, this might not a serious problem. What if you added the site title on other pages as well? This will be misery for you. This is how dynamic content comes into play.
Elementor offers a widget called Site Title, which will automatically pull your site title on the area you add it to. In this case, site title is an example of dynamic content. Other examples of dynamic content are site logo, post title, post meta, featured image, post content, and so on. Elementor allows you to add all those dynamic content types to your design. Be it a page or template.
Why is dynamic content so important?
The theme builder feature of Elementor allows you to create custom templates for all theme parts, including the single product page if you use WooCommerce. Now, say you want to design the single product page on your WooCommerce-powered store. Without dynamic content, you would have to manually create the layout of every single product you have, which takes very, very long.
With dynamic content, you can create a custom single product page template to replace the default single product page template of your theme, which you can design yourself. WordPress will then display every single product on your WooCommerce-powered store according to the layout on your custom template. When creating a custom single product page template, you can add the following elements/widgets:
- Product title
- Product images
- Product price
- Product rating
- Product stock
- Product meta
- Product description
- And so on
Another example. Say you want to create a custom header template for your website. Naturally, you want to add your site logo. For such a case, you have two options. First, you can simply upload your site logo (you can use the Image widget to do so). Second, you can use the Site Logo widget. The first option requires you to edit the header every time you change your site logo. The second option doesn’t require you to edit the header if you change your logo as the Site Logo widget will automatically pull the site logo you set from the theme customizer (Appearance -> Customize). With the exactly same format.
Dynamic content types you can add to Elementor
In general, there are three types of dynamic content you can add to Elementor: image, text, and link. Dynamic image can be featured image of blog posts, site logo, author profile picture, WooCommerce product images, and so on. While for the dynamic text, it can be site title, post title, post meta, product title, product price, and so on.
In addition to the default dynamic content types of WordPress as mentioned above, you can also add dynamic content from custom fields you created with plugins like ACF and Pods. Elementor supports the following custom field plugins:
- Advanced Custom Fields (ACF)
You can read this article to learn more about how to add custom fields in Elementor.
How to add dynamic content in Elementor
Depending on the dynamic image type you want to add. You can use the available widgets to add a dynamic image to your design. Here are widgets you can use to add a dynamic image:
- Site Logo: To add site logo
- Featured Image: To add featured image of blog posts
- Image: You can use this widget to add all dynamic image types supported by WordPress. From site logo, author profile picture, feature post, WooCommerce product, and so on.
To add site logo, you can simply drag the Site Logo widget from the left panel to the canvas area. The widget will automatically load your site logo.
Ideally, featured image is added to single post template but you can add it anywhere in case you want to add a dynamic image from the featured image of blog posts. Same as site logo, you can simply drag the Featured Image widget to the canvas area to add it. In most cases, you might see a blank image instead of the actual featured image in the Elementor canvas (the actual featured image will appear on the live page).
To make it easy for you to style up the featured image, you can add a fallback image (the default image to replace the featured image if the featured image is not set). To do so, you can click the wrench icon on the Featured Image field on the left panel.
Author profile picture, user profile picture
To add author profile picture, user profile picture, and other dynamic image types, you can use the Image widget. So, drag the Image widget to the canvas area. Once added, hover your mouse over the image selector and click the database icon (Dynamic Tags). You can select the type of dynamic image you want to add.
You can also use dynamic image as a column background or section background if you want it. To do so, you can set the background type to Classic and then select the dynamic image type you want to use by clicking the database icon.
Elementor comes with some widgets dedicated specifically to adding text-based dynamic content. Some widgets that you can use to add text-based dynamic content are:
- Site Title: To add site logo
- Page Title: To add page title
- Post Title: To add post title
- Post Excerpt: To add post excerpt
- Post Info: To add post info
To add a certain text-based dynamic content using the widgets above, you can simply drag it to the canvas area.
Alternatively, you can also use the Text widget or the Heading widget. Simply drag the Text/Heading widget to the canvas area. On the content editor field on the left panel, you can click the database icon (Dynamic Tags) and then select the dynamic content type you want to add from the available options.
You can also add dynamic link to your Elementor design if you want. The dynamic link types you can add are post URL, archive URL, site URL, author URL, contact URL, and so on. One of the interesting things is that you can also link to a popup you created with Elementor.
You can use the Button widget or any widget that has an option to add a link to add a dynamic link. On the link Link field, click the database icon and select the dynamic link type you want to add from the available options.
We have talked much about WordPress custom fields in this post. You can read it to learn more. Understanding how custom fields work is crucial if you work for a web agency that develops websites for clients. You will be able to add certain features or functionalities to the websites you are working on by creating custom fields according to the needs of websites. It could save cost production as you don’t need to buy too many plugins to add the necessary features or functionalities.
You can, for instance, create custom fields — as well as custom post types — for:
- Property listings
- Job listings
As mentioned earlier above, Elementor supports popular custom field plugins like JetEngine, ACF, Pods, to Toolset. You can read our article here to learn how to add custom fields in Elementor.
The bottom line
As you might have known, Elementor comes with a theme builder feature which you can use to create custom templates to replace the default templates of your theme. In order to use this feature, you need to understand the concept of dynamic content, which is crucial to unleashing WordPress power as an open CMS. Understanding the concept of dynamic content — custom fields in particular — is even more crucial if you work for a web agency as it will cut off the production cost. While the default dynamic content types offered by WordPress are limited, you can create new ones according to your need. The combination of Elementor and custom field plugin could be great ammunition to create any type of website at a lower cost.