What is dynamic content and how to use it to create custom websites
As a web designer, you are always looking for ways to add more tools to your website building arsenal. Indeed, one of the best ways to win more lucrative projects is to prove that you can add important advanced features that will make websites look professional.
One of these is dynamic content. Previously, it was too complicated and time-consuming to add dynamic content unless you were a coding expert.
Fortunately, with the WordPress editor, Gutenberg, and extensions such as Toolset Blocks that has changed. You can now use Toolset alongside WordPress to easily add dynamic content to your designs in seconds and without any coding. Not only that but unlike any other Gutenberg plugin Toolset offers a number of ways to add and style your dynamic content without coding.
What is dynamic content?
Dynamic content is defined as any web content which changes based on the user or data. For example, if you are booking a vacation on a travel website you might see recommended trips based on previous purchases. The content you are seeing is dynamic.
For web designers, dynamic content is especially important because you can create dynamic fields for the following:
And much more.
Dynamic fields can be drawn from your custom fields. An example of a dynamic field is the price of a product when displayed on a template for each of your products. You only use the field once but when you display it on the front-end you will see the correct price for each product.
What is an example of dynamic content that a designer might use?
Let’s look at how a designer could use dynamic content to make their custom website stand out.
For example, I am designing a gym website for a client. They might ask me to showcase three of their featured gyms on the homepage.
One way to do it would be to use coding to build a list of posts and display the three gyms. But what if I’m not the most confident programmer? Perhaps you could insert the information in a static way by entering the information about each of the gyms individually? Not only will this take time but it will be impossible to edit all of your content in one go.
WordPress’s Gutenberg blocks are a great way to add content, however, they lack dynamic capabilities. To illustrate, I used its blocks to create this section.
I had to use create the three parts individually which obviously took more time than I would have wanted. The other problem is if I want to style any of the sections. For example, if I want to change the color for the three figures at the top. I would have to change each of them individually.
The alternative way would be to use Toolset’s own View block which allows you to add dynamic sources to your blocks.
Below you can see the steps to adding dynamic content in this way but if you want to see the in-depth tutorial check out our video guide to creating a View.
How to add dynamic content elements to your designs
Let’s go through how easy it is to add dynamic content elements when you use Toolset Blocks.
I’ll recreate the list of gyms that we just looked at. If you want to check out this list for yourself you can download the gym reference site provided by Toolset for free.
1. Create the custom post type
The first step is to actually create the gyms that you want to showcase. First, you will need to create a custom post type for your gyms.
Toolset allows you to create a custom post type instantly and without coding. Below you can see how I created a “Gym” post type.
I can now add gyms to this post type.
2. Create the custom fields
Now that we have the custom post type for the gyms we need to add the content itself. To ensure we can add dynamic fields we will need to create custom fields.
Custom fields will provide the structure for each of our gyms posts. Below you can see that I have added custom fields for the content including a rating, images of the gyms and the address.
We also have some of the default fields that WordPress provides including the post title and post body which we can draw from when adding dynamic content to our section.
Find out more about how you can create custom fields.
3. Insert the View
Once we have prepared the content we need to create the section which will hold our dynamic content. To do this we insert a View block.
We can add the View block just like other regular Gutenberg blocks but this time we need to look under the Toolset section.
You will then be taken to the wizard for customizing your View block which you can learn more about in the video tutorial on creating a View.
4. Add the blocks for your content
Now that we have our base in place for our section we can start adding the blocks which will serve as the structure for our content.
For example, I will add a heading to start. Now instead of using the default Heading block provided by Gutenberg, I will insert Toolset’s own Heading block.
I need this type of Heading block because it allows me to add a dynamic source.
5. Adding a dynamic source
Finally, now that we have created our block we need to add the dynamic content to it.
With Toolset, all you need to do is select the Dynamic Heading Text toggle and then choose the source for my dynamic content. This could be any of the custom fields I’ve created or one of the WordPress default fields. For example, below I selected the post title. You can now see each of the post titles for my gyms appearing.
I can do the same for my other fields as well. For example, I’ve used the Star Rating block to add a rating of my gyms. For the “Source” I select the custom field group for my gyms. Finally, I select the Rating field which belongs to the set of custom fields.
You can do the same for each of the fields so that they display dynamic content. Below you can see I’ve added a number of fields. Notice how for each gym post the content is different because it is dynamic.
Your View is now ready. Each time you add a new gym the View will automatically update to display it so that you always see the three most recent gyms.
Start adding dynamic content today!
Here are the steps to take so that you can start adding dynamic content today.
- Download Toolset
- Check out one of our Toolset courses to learn all about adding dynamic content.
- Practice adding dynamic content and other features using one of Toolset’s free reference sites.
- When you are ready, install and register Toolset on your own website and get started!
