Back to contents

Using the pre-designed section templates to display dynamic content

Pull out dynamic content using pre-made templates from Magic Button library. With JetEngine and JetElements Dynamic Data Addon you hold the keys to the success.

While using JetThemeCore plugin, in Magic Button library you can find a lot of pre-made section templates. Thus, importing one of them to your page, you add static content with some default styling settings. Moreover, after you choose a suitable template and style it, you can add dynamic content using JetEngine and JetElements Dynamic Data Addon.

In this tutorial, we’ll figure out how to use pre-designed templates for displaying dynamic content.

Inserting templates from Magic Button library

Step 1 — First, you need to open the page to which you want to add a template, in Elementor, and click the Magic Button.

Magic Button in Elementor

Step 2 — Then, navigate to the Sections block in the top bar, scroll down and choose the template you consider the best fitted for your purpose and click the Insert button.

Note, that in the left-hand menu you can choose the needed topic for the section and narrow down your choice.

Sections tab in Magic Button

Step 3 — After this, you can style up the section, add additional static content, etc.

Adding Dynamic Content to the Section’s template

Most of the JetElements widgets support displaying dynamic content, yet usually not all the meta field types are supported (e.g., you can display the text from the Text meta field type as a title of one of the widget).

To add a simple textual content or an image use Dynamic option that shows up above the content field every time the dynamic content is available for being set. Here you’d need to specify the source of the dynamic data (JetEngine) and select the meta field from which the data should be pulled.

Custom Image by Dynamic option in Image widget

There are some JetElements widgets that support a dynamic repeater, among which are Advanced Carousel, Images Layout, Portfolio, Price List, Slider, Testimonials, and Timeline.

Step 1 — For instance, we need to pull out the repeater field with several subfields to add dynamic testimonials.

Repeater meta fields

Step 2 — What we need to do next is to fill in the repeater fields with all the necessary information we’d be then displaying (it will be dynamically pulled).

Filling in repeater fields inside each post

Step 3 — Now let’s open the Single post template with Elementor.

We have explained how to add a section template from the Magic Button before. Let’s find Testimonials in the left menu of the Sections block in Magic Button library and insert the needed template.

Sections tab in Magic Button

Step 4 — Then, navigate to the Dynamic Settings block of the Testimonials widget and toggle to yes Enable dynamic data option. As a result, a lot of repeater fields will appear.

Dynamic Settings in Testimonial widget

Step 5 — Paste the name of the repeater from the meta box and type in IDs of the repeater items. Note, that you should enable the Image control option in order for the images to be set and displayed.

Step 6 — Finally, click the Update button to view the template with the dynamic content.

Dynamic settings in the front-end

So this is how you can use pre-designed templates for displaying dynamic content. Hope this tutorial is helpful!