JCI and Elementor

Your situation:
You have an API that gives you many sets of data items. This data should be displayed using Elementor, an excellent page design plugin. You need the Elementor PRO Version for the following, as dynamic data is used.

  • You have a JSON with 1000s of books. And many authors write books in another JSON. Each book has a unique book ID, and also each author has a unique author ID. These IDs are part of the JSON and connect an author with some books. And books with several authors.
  • Data with events and venues is similar: At, you see a list of events.

Solution 1: Generate Custom Post Pages from Custom Post Types and JSON. Then use the Elementor Theme Builder.

At is described, how to create WordPress-Custom Post Pages: Set up a CPT, load a blueprint-page, create & update the data out of JSON.
In this example, the blueprint page is ordinary.

With the Elementor Theme Builder, the “blueprint page” can be overwritten by a Template using just the Custom Post Fields: See how this is done here in an excellent video. With this, you don’t have to care about what content is set when creating the Custom Post Pages, and no blueprint page is needed.
In brief:

  • Start the Elementor-Theme Builder and add a “Single Post” Template. Edit the conditions for that Template: “Where Do You Want to Display Your Template?” is answered by the CPT “meetups”. Byx this any meetups-Custom Post Page is designed by this Elementor Single Post Template.
  • Then design the Template and add Custom Post Fileds:
    For Text-Fields, this is done using the Elementor “Dynamic Tags”, where you can select the Custom Post Field-Type (Pods, ACF, Woocommerce…) and then the Custom Post Field-Key.

Solution 2: Use JCI-Shortcodes with Elementor

This is nice if you don’t want to create Custom Post Pages but display the JSON-API-data right out of the box:

You can use the WordPress-Shortcodes with the Elementor-Shortcode-Widget. Therefore you can add a JCI-Shortcode like [[jsoncontentimporterpro. nameoftemplate=…]] to an Elementor-Page by copypasting it via the Elementor-Widget “Shortcode” to the page.

Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
On this page: