JCI and Elementor

Your situation:
You have an API which gives you many sets of data-items. This data should be displayed by using Elementor, a great plugin to design your pages. For the following you need the Elementor PRO Version, as dynamic data is used.

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

Solution 1: Generate Custom Post Pages out of 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 an ordinary page.

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 a very good video
With this, you don’t have to care about what content is set when creatrin 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-Fileds this is done by using the Elementor “Dynamic Tages” 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 a 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: