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.
Previous JCI and TableSorter
Next JCI and WPML
On this page: