What is dynamic content and how to use it to create custom websites

July 22, 2020

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.

This is an example of dynamic content on Airbnb.

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.

This section contains static content which makes it harder to manage and edit.

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.

You can download the gym reference site 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.

Creating a gym post takes seconds.

I can now add gyms to this post type.

Click “Add New” to create new gyms posts.

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.

I have added a number of custom fields for my field group.

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.

An example of a gyms post with the fields filled out.

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.

The View block is available 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.

To add dynamic content I need to use 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.

1. Select the Dynamic Heading Test. 2. Choose the source for your dynamic content. 3. See the dynamic content appear.

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 select the Rating field as the source on the right-hand side.

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.

Each post displays different content because the content 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.

  1. Download Toolset 
  2. Check out one of our Toolset courses to learn all about adding dynamic content.
  3. Practice adding dynamic content and other features using one of Toolset’s free reference sites.
  4. When you are ready, install and register Toolset on your own website and get started!

 

Leave a Reply  

Please leave here comments about this page only.
For technical support and feature suggestions, head to our forum. We are waiting there!

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>