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.
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.
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.
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.
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).
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.
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.
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.
So this is how you can use pre-designed templates for displaying dynamic content. Hope this tutorial is helpful!