Wednesday, May 18th, 2022

How to Build Dynamic WordPress Sites with Toolset and Elementor Pro?

Looking for a way to build a dynamic website with WordPress but Without need custom code?

WordPress makes it easy to add custom content to your site on the backend. But if you want to display that information in a standardized template on the frontend, you’ll usually have to edit your theme’s template files directly, which isn’t possible if you’re not a developer.

Thankfully, there are WordPress plugins that can completely eliminate code out of the equation and let you build dynamic WordPress sites, no matter what level of technical knowledge you have.

Toolset and Elementor Pro is one of the best combinations that we are going to focus on in this post.

You’ll learn how to build a code-free dynamic website using Elementor and the toolset – zero code required.

Below, you can see an example of two different posts using the same Elementor template, but pulling dynamic information from the toolset so that the content of each post is unique:

While we chose a specific example for this tutorial (a directory of tennis coaches), you can apply the concepts from this guide to literally any type of dynamic WordPress website.

What you need to build dynamic sites without code

Toolset and Elementor Pro make a perfect pair if you want to build a dynamic WordPress site without code.

In short, the toolset sets up everything on the backend of your site and then Elementor Pro handles everything on the frontend.

With the toolset, you can create custom post types and custom fields to make it easier to input and store your site’s dynamic information on the backend.

Adding information to the backend

Then, Elementor Pro’s Dynamic Tags feature lets you use Elementor’s visual, drag-and-drop editor to take all that custom data and create a template for it.

Instead of creating a static design with Elementor, you can ask Elementor to dynamically pull in information from custom fields added with the toolset.

select custom field

The best part is that both tools require zero code or coding knowledge, so anyone can set it up.

If you’re still a little confused don’t worry – I’ll go into more detail about how this pairing works in the tutorial.

Elementor Pro and Toolset are both premium plugins, but we have deal pages that can help you save some money:

Now, let’s take a look at the actual step-by-step guide on how you can set up your dynamic site.

The strategy in this section will work for virtually any type of dynamic content, but we’re going to focus on a specific example for the sake of clarity.

Let’s say you want to create a directory of local tennis coaches in your area. For each tennis coach, you want to display some specific information such as the coach’s…

  • Name
  • Picture
  • Biography / Experience
  • phone number
  • Email address
  • personal website
  • coaching place
  • hourly fee

To display this information in a standardized format, you will be able to create a single template that will dynamically pull the details of each coach.

To get started, make sure you have installed and activated the following plugins:

Let’s go through it…

1. Create a Custom Post Type (Optional)

This first step is optional, but it will be important for many dynamic sites.

Before you start adding content, you must choose where to store that content. One option is to use the default post and page system that WordPress makes. For example, you can add each tennis coach as a new post.

However, it can be confusing if you Too You’ll want to have a blog, because then you’ll be mixing your regular blog posts with your tennis coach listings.

To fix this, you can create a custom post type for tennis coaches only (or whatever content you want to store) A custom post type works exactly like Post and Page, but it is different from those default content types.

For example, if you created a Tennis Coach custom post type, you would go to Tennis Coach → Add New to add a new coach instead Post → Add New.

so – while you can do Just use the default posts and pages, I think most dynamic wordpress sites would be better off creating a separate custom post type.

If you want to create a custom post type, Toolset Types makes it very easy. go for Toolset → Post Type → Add New.

Then, enter the four basic information at the top. You can explore other settings, but you only need to enter four details at the top:

add custom post type

Once you’ve saved your custom post type, you’ll see a new option in your admin sidebar:

custom post type example

And all! Now, all of your tennis coach listings will be separate from your regular blog posts.

2. Create Your Custom Fields with the Toolset

Next, you need to create your custom fields with the toolset. These are the new input fields in the backend editor that you can use to collect each coach’s name, contact details, etc.

Why create custom fields instead of adding all these details in WordPress editor? Well, not only is it more convenient on the backend to standardize input this way, but storing this information in custom fields also allows you to build your own dynamic template with Elementor.

You can simply plug the description into a custom field and then Elementor will automatically insert that information into the frontend design for each coach.

To create a new set of custom fields, go to Toolset → Custom Field → Add New. In the popup, select post field:

add post field

Then, enter a name for this field group and select save field group:

area group details

Next, use appears on A setting to control where you want these fields to appear in the editor. For this example, you would choose tennis coach Type post as you want to see these fields only when you’re adding a new tennis coach:

appears on

then, use add new field button to add a custom field for each piece of information you want to collect. For each custom field, be sure to choose the appropriate input type.

For example, if you create a field for the coach’s phone number, you would choose phone Like area:

add field

You will then be able to configure some basic details for that field:

configuring the field

Repeat the process to add fields for each piece of information. By the end, it might look something like this:

multiple custom fields

I did not create a custom field for Koch’s biography as we can use the regular WordPress editor for that.

Be sure to save your region group when you’re done.

3. Add Your Content

Once you’ve added your custom fields, you’ll want to add content for each coach.

For this example, you would go Tennis Coach → Add New And enter the information in the custom field:

Adding information to the backend

Repeat the process to add more content – i.e. each tennis coach in this example.

4. Create a New Elementor Template

At this point, you have successfully configured everything. backend of your site. However, if you open a piece of content on the frontend of your site, you won’t see information about your custom fields.

In past tense, you just have to use custom code. But with Elementor Pro, you can use drag and drop to create a template that includes your dynamic information.

To get started, go here Template → Add New To create a new element template. For Template type, select single post. Then, give it a name to help you remember it and click create template:

create element template

This will launch you into the Elements editor. Go ahead and port the Elementor template library as you will be designing your template from scratch.

5. Design Your Elementor Template

Now, it’s time to start construction.

For this tutorial, I’ll assume you’re familiar with the basics of using Elementor, such as creating layouts and styling your elements. If you’re not, you can check out the Elementor Getting Started Guide.

To get started, design your template using static text. If the text doesn’t make sense yet, don’t worry, we’ll convert all this static text to dynamic content in a second.

For example, here’s a basic layout that includes placeholders for all the information from our custom fields:

Element template w/ placeholders

6. Make Your Elementor Template Dynamic

Now, it’s time to use Elementor’s Dynamic Tags feature to make everything dynamic.

To get started, choose the content you want to preview in your design. To do this, click the gear icon in the lower-left corner of the Elementor interface. then, open preview settings And:

  1. Select the post type of your template (such as Tennis Coach).
  2. Choose a specific post (the Roger Federer listing, for example).
setting preview content

Now, choose one of your static placeholder widgets – such as the name of the coach. Then, click dynamic tag In the widget’s settings, select More toolset field From drop-down:

add dynamic tag

Then, click Get icon and use key Drop-down to select specific custom fields – such as coach name:

select custom field

Elementor will now dynamically populate that widget with information from that custom field instead of placeholder text.

Repeat the process to add more information. A useful feature here is that you can also add text before or after the dynamic information.

For example, when you’re adding a phone number, you can add “phone:” before the dynamic information:

Add content before dynamic data

You can use the dynamic information in a variety of ways instead of displaying it directly on the frontend.

For example, to add a profile picture of a coach, you would edit the image widget. then choose dynamic tag as the image source and select the profile image custom field that you created with the toolset:

add dynamic image

Elementor will then dynamically populate the widget with that image:

dynamic image

You can also insert links dynamically. For example, to automatically link the button widget to each coach’s website, you can dynamically populate its link with website custom fields:

add dynamic link

Lastly, you will remember that we added the biography of Koch using the regular WordPress editor. You don’t need to use dynamic tag to display that content. Instead, just add Post Content widget where you want it to appear.

And there you have it! You just created your dynamic template:

post content widget

To test dynamic functionality, you can preview a different material (a different coach, for example). The template should remain exactly the same, but all content will be updated to that coach’s information:

changing dynamic content preview

7. Publish Your Template

To end things, click To publish button to bring your template to life. You can then use conditions to control where your template is displayed.

For this example, you’ll want to display templates for all posts in the Tennis Coach custom post type:

publish your template

then press save close.

Start building dynamic WordPress sites today

If you want to unlock the full power of WordPress as a content management system, you need to be able to use dynamic content. However, As a defaultDynamic content is out of reach for most WordPress users because it requires editing the code in your theme’s template files directly.

With Toolset and Elementor Pro, you can change that – you’ll be able to build simple or advanced dynamic sites without even looking at a single line of code.

Now that you have the knowledge, you are ready to build your first dynamic WordPress site today.

Do you still have any questions on how to build a code-free dynamic WordPress site with the toolset and Elementor? Tell us in the comments!

Source link