aksamit
Olga Aksamitnaya
Columnist
Updated on
Tutorials

JetElements Dynamic Data Addon. The Key to Adding Dynamic Content to JetElements Widgets

Once you’re using JetElements, you’re able to add different kinds of content with +40 versatile widgets. Combined with JetThemeCore plugin and “Magic Button” functionality, JetElements becomes an even more powerful tool.

You can find hundreds of pre-designed sections, which include JetElements widgets, on nearly any topic inside the “Magic Button” library.

Yet, up until now, it was all about the static content and how it’s supposed to look.

With JetEngine plugin, now everything has changed, and Crocoblock team has finally introduced the idea of using dynamic content not only in Elementor, but also in JetElements widgets.

Right at the moment, there are 7 basic JetElements widgets that support dynamic content provided by JetEngine:

Each of these widgets can output the dynamic content added with JetEngine.

Use Cases

This functionality is much needed when it comes to displaying testimonials, price lists, timelines for your projects or events.

Just imagine, how convenient becomes managing your client’s testimonials, when all one has to do to make changes or add a new testimonial, is just input the content inside the already set meta fields (or, say, repeater fields) from WordPress Dashboard.

There is no longer any need to open Elementor editor and manually add the changes or paste the content everytime you want to add some new items.
The changes you’re making from WordPress Dashboard are automatically pulled to JetElements widgets.

And this is only one example of how this functionality can make your life so much easier. Actually, all the JetElements Crocoblock widgets mentioned above possess the ability to pull the dynamic content. As you can see, now you’re able to create carousels and sliders with dynamic content, create dynamic portfolios, that will always show the recently added items, etc.

How It Works?

So, what should we do to set the things into motion and use the dynamic content instead of the static one?

JetElements Dynamic Data Addon Installation

  1. First, let’s download and install JetElements Dynamic Data Addon on your site. This addon is separated from JetElements, and you won’t find it in Crocoblock Dashboard because it’s not actually a separate plugin. It’s rather an addon for JetElements that you might need, or might refuse from using in case you don’t want to work with this functionality.To download it you should navigate to your personal account at CrocoBlock and here open Downloads tab. Here locate JetElements Dynamic Data Addon plugin in the Misc block and click Download option to actually download it.
  2. Then install it on your site the way you always install new plugins (you can either use WordPress Dashboard or FTP).
  3. When JetElements Dynamic Data Addon plugin is installed and active you can start creating your dynamic content with JetEngine.

Creating Dynamic Meta Fields with JetEngine

We have to prepare the dynamic fields with the necessary content beforehand in order to assign them to JetElements widgets.

E.g., we might need to create the dynamic fields to add the testimonials.

  1. In order to do this just navigate to JetEngine > Meta Boxes and here create a new meta box.
  2. Fill in the meta box name and assign it for the specific post type (e.g., we might need the dynamic testimonials for the Services post type, to showcase the reviews from our clients who were using our services).
  3. In Meta Fields block define the title and ID for the meta field which will hold all the needed information for the testimonials (or any other dynamic content needed). Please, copy the value you’ve added into the Name/ID field somewhere safe where you’d be able to easily access it when needed.
  4. Select Repeater in the Meta Field Type dropdown. Click +New Field to add the fields to the repeater.E.g., for the testimonials, you might need a field with an image where you’d place the photo of your customer, the field for the customer’s name, and the field where you’d add the actual review text. So we’re adding 3 repeater fields:
    • Image – with the Media field type;
    • Name – with the Text field type;
    • Comment – with the Text field type.

    Also, please, copy the Name/ID of each of the repeater fields somewhere where’d you be able to access this information.

  5. Click Update Meta Box to save all the changes. Now we need to fill in the needed information in the repeater fields. Navigate to the post type where you’ve added the meta box (in my case it’s Services post type), and open each of the services.
  6. Add the testimonials for each of the services using the meta box and the repeater fields. Here you can add multiple testimonials, and each of them will have the image with the customer’s photo, the customer’s name, and his comment. After everything is done just save the changes.

Assigning the Meta Fields to JetElements Widgets

There are two ways to use the specific meta field with the repeater for one of the JetElements widgets you’re using. The first one, and, perhaps, the most simple, is to add the widget (e.g., Testimonials) directly to the page where you want it to show up.

However, you can as well use JetThemeCore plugin to create the Single custom post page template and here add one of JetElements widgets that supports dynamic fields (in our example we’ll be adding JetElements Testimonials widget).

  1. Once you’re on the Single post page template, just drag and drop the widget to the page (we’re adding Testimonials widget, but you can add any JetElements widget that supports dynamic content from the list posted above).
    You can as well use the pre-designed sections with JetElements widget available in Magic Button library. E.g., you can select one of the pre-designed sections with testimonials, and add it to the page template.
  2. In Content block click Dynamic Settings tab and here turn on Enable dynamic data option. This option replaces the default content with the one you’ve added in the meta box.
  3. Fill in the Name/ID of the repeater meta field you’ve created (you’ve copied it so you’d have access to it now).
  4. The fields below represent the content that can be added to the widget. Input the repeater field ID for the field where you’ve added the photo of the customer in the Image block. Don’t forget to enable Is Image Control option to let JetElements widget display the image correctly.
    Add the Title and Comment field ID in the corresponding fields. Now in case you’re working with testimonials and have several of them added to the specific post, you’ll be able to view them all.
  5. Also, in case you’d be adding any new testimonials from the Dashboard, they will be automatically added to this template and shown on the Elementor-built page.

In this example, we were showing how to create the Testimonials block using dynamic content and JetElements Testimonials widget. Yet, you can use dynamic meta fields with repeaters to add dynamic content to any JetElements widget that supports this functionality.

The way you can add dynamic meta fields and use them in JetElements widget makes working on content really much easier. And with “Magic Button” section templates you can get awesome results practically in no time.

Hoping this post has uncovered the basic aspects of using meta fields to add dynamic content to JetElements widgets. It’s easier than you ever thought possible, right?

5 Comments

  1. Dicas no Instagram para Negocios

    Thanks in favor of sharing succh a pleasant thinking, post is
    pleasant, thats why i have read it completely

  2. Станислав

    We are waiting for the addition of Jet Tabs widgets to this list.

    1. Anastasiia Mykytiuk

      Hi, Станислав!
      Thank you for your comment. If you have any suggestions, please leave them here https://github.com/CrocoBlock/suggestions so that our developers take them into consideration!

        1. Olga Aksamitnaya

          Hello, Станислав! Thank you for getting back! Our devs process featured requests on Github in the order of priority. Thank you for your patience!

Comments are closed.