Dynamic Elements and Post Type Templates

Updated on October 14, 2020

Jupiter X is offering a simple way to create custom post and page templates. It also supports custom post type templates (single and archive). In this article, we will give an overview of how to enable custom post type features in Jupiter X and then use custom post type templates in order to design a completely customized look for your dynamic content. 

Note: You need the Raven plugin to be enabled to be able to use the custom template feature. 

Enabling Custom Post Type 

In order to benefit from the Jupiter X custom post type feature, you need to first enable your custom post type in Jupiter X -> Control Panel -> Settings. All of the custom post types available on your website even if you added them from different plugins, will be listed here. Simply enabling every custom post type, will give you additional Customizer settings. 

It will add the Jupiter X post options below your custom posts as well.

Now back to the Customizer > Post types > [your post type], you can decide which elements will be displayed. You can also create a completely custom single page and archive page for your new custom pages. 

Creating a single post type template

In order to create a single post type template, choose the custom type and then click on New. 

Note: You can also create a section in Elementor -> Saved Templates and then assign that template in Customizer -> Post Types section. 

Using the dynamic elements

When you assign a template to a post type it will override all of the layout, design, and settings on those pages and will use only the template design and content. If you add a static content into the template, you will see that static content all the time. So, if you want to show dynamic content like post title or post feature image, you would need to make that element to load your dynamic content. This is possible when you activate the Raven plugin. So, make sure the Raven plugin is activated before you try to add any dynamic content into your templates. 

Segment your customers and show dynamically generated content for them based on their behavior using Growmatik.

Adding the post title into the template

In order to add  a post title into the template, simply drag a Heading element into the page and set the source to dynamic. 

Now you can style the heading element, position it as you wish or add style and visuals to it. 

Adding a dynamic featured image

In order to add the featured image to your template, just drag and drop an image element from the list of available Raven elements and set its source to Dynamic -> Featured Image. 

You can also set the featured image as a background image anywhere you want. So, if you wanted to show the title over your featured image, simply set the section’s background image dynamic to your featured image. 

Rather than the post title or featured image, there are several other dynamic content types you can choose to show your content with. By using dynamic field option on the text elements such as Heading or Text block, you are able to choose between these options:

  • Site
    • Shortcode   (Used to call a shortcode to populate the content. Useful when you want to change the output field based on the given title. Requires to develop a custom shortcode or map a function with a shortcode mapper plugin)
  • Post
    • Post Custom Field  (custom meta fields of the post type)
    • Post Date
    • Post Excerpt
    • Post ID
    • Post Terms
    • Post Time
    • Post Title
  • Archive
    • Archive Description
    • Archive Meta
    • Archive Title
  • Media
    • Featured Image Data  (Image Title, Alt, Caption, Description, File URL, Attachment URL) 
  • Author
    • Author Info
    • Author Meta
    • Author Name
  • JetEngine (only while using Jet Engine plugin)
    • Custom Field
    • Option
    • User Field

Each of these types can be used on a special use case. Please note that some of the dynamic fields are only available for the archive post types (Archive category) and in case you use them in a single post template, they will remain empty. 

Note: While creating a post template, you should know that the default data that is being represented by the dynamic elements in your template, belongs to the post that you are editing at that moment. It means that if you create a post template by “Author A” you will see the “Author A” name when editing that template and using the author name dynamic field. This author’s name will change depending on the post you are viewing in the front end, later on when you publish the template and assign it to a post type. 

As an example, we used the custom dynamic fields in order to create this post type template. The demo page is available here

This page is made by a combination of dynamic and static elements and is part of the Real Estate 2 template. All listing and directory templates available on the Jupiter X theme provided here

Note: Using Jet Engine plugin will give you extra features to build a dynamic website. Widgets such as Dynamic Image Gallery, Dynamic Maps, Dynamic Booking forms, price calculator, and event calendar are available in Jet Engine. More information

Creating an archive post type template

Archive pages such as author pages, category or date archive pages, tags and taxonomies, and blog pages too can have a completely custom layout. Just like single post types, after enabling the Custom Post Type through the Jupiter X Control Panel, in case your custom post type has archive capabilities, you will see the archive post type settings under Customizer -> Post Types -> [your post type]. Right there you will be able to select or create a new archive page template. 

The only difference with the single post dynamic elements is that you should use the elements that are working with the archives. If you are about to use a heading to show your archive title, use the Archive Title type. 

Also, since archive pages usually come with a set of contents, you should use the elements that are printing a query result containing multiple posts. Posts and Posts Carousel are two great examples of those elements. 

Using the Posts or Posts Carousel elements will give you the ability to show the archive posts. You just need to enable the “Is Archive Template” option and if you enable that, it would query the archive posts and show the results as you styled them in the element settings. 

If you don’t use the “Is Archive Template”, the archive pages will not show the proper content. So, always enable this option in your archive templates. After enabling the “Is Archive Template” the query options in the element will hide and not work because the query will be created by WordPress by default. 

Creating a listing template

You are not limited to use Raven Posts or Post Carousel to represent your content to your visitors. The comprehensive scenario that can cover all of your needs to build a listing or directory website upon your dynamic content is this:

1 – Use Jet Engine to create your custom post type. 

2 – Create a single post type template with Jupiter X and assign it in the Customizer in order to show your desired content on your single posts. 

3 – Create a listing template and use it on a Listing Grid (one of the Jet Engine elements) inside an archive template. 

4 – Use Jet Smart Filters to add filtering and search options to your listings. 

This is how most of our listings templates have built. You can check them out here

There are multiple articles specifically explaining how to build a listing directory website using Jupiter X. In the Crash Course series step by step workflow explained with examples. 

WooCommerce and shop templates

The Jupiter X theme offers a great Shop Customizer tool by default. It allows you to customize every part of the default shop pages or choose between the predefined shop page templates. But what if you want to create your own design and layout and use it to build an eCommerce store in Jupiter X? Fortunately, this is possible with the JetWooBuilder plugin which is bundled in with the Jupiter X theme.

Simply put, the JetWooBuilder allows you to override the default shop pages in WooCommerce from single pages to the archive and category pages. It still doesn’t offer any customization on checkout and cart pages, but that part can still be made using Jupiter X or other plugins. So, if you aim to build a completely custom shop page layout, you can make use of the JetWooBuilder plugin. Here is the JetWooBuilder’s official website.

After adding the JetWooBuilder, there will be four global widgets that you’ll be able to use among your templates and even on your own pages:

It also adds a various number of widgets that you can use on your single page templates such as an add to cart button, attributes, content, excerpts, image, price and etc. You can find out how to create a single page template for your eCommerce here. Also, in order to create an archive page template using Jet Woo Builder, you may check this article. More information on how to use Jet Woo Builder in Jupiter X can be found here

Frequently Asked Questions

Do I need Elementor Pro to have dynamic templates?

Elementor Pro has it’s own templating feature, however, you don’t need Elementor Pro to make the dynamic templates work with Jupiter X. It’s all possible with Raven plugin which is bundled with it and for advanced features, you can use Jet Engine. (bundled for free).

Is there any conflicts with third party plugins?

If you are using Elementor Pro, the display conditions may override the templating functionality of Jupiter X. So, you need to make sure you are not using the Display Conditions if you see the template you set in the customizer is not working. More information.

Did this answer your question?