Using Jupiter X 2 theme overview

Updated on February 13, 2022

This is a super quick overview of Jupiter X to help you easily get onboarded. Jupiter X consists of three main areas: 

  • Theme Styles: This contains all your visual theme settings and global options such as typography, site, blog settings, etc.
  • Elementor: This is where you create content using a drag and drop builder. Here, you create your pages and post content.
  • Dashboard: This is where you register Jupiter X, install a template or plugin, and manage some advanced settings. 
  • Layout Builder: A set of Full Site Editing features that allows you to create and assign dynamic templates to your website header, footer, archive pages, single pages, and so on. 
  • Custom Snippets: Controlling what code snippets should be added to every part of the website. 

Plugins

Jupiter X is bundled with a handful of premium and free plugins. You don’t need to pay for any of those premium plugins as long as you own legit Jupiter X license. 

To install plugins, Go to Jupiter X > Dashboard > Maintenance > Bundled Plugins. There, you can also activate, deactivate and delete plugins. Make sure to install and activate the required plugins. Required plugins are placed on top of the other plugins. 

Global Settings

Jupiter X uses WordPress Customizer (Theme Styles) to let you customize your website globally. This means any change made through customizer applies to the whole website, not individual pages. With Customizer, you can customize things like the logo, site width, favicon, typography, header, footer, sidebar, comments, search result, shop pages, 404 page, maintenance page and more. There are more than 800 customization options available in Theme Styles. 

To start the customizer, simply click on Jupiter X > Theme Styles from the WordPress Dashboard.

Page Settings

Almost all of the global customization you make via Theme Styles can be overridden in the individual pages. It means that you can set the unique header, footer, sidebar and content options for every page. You can find the page settings below each post as Post Options.

Site Logo and Favicon

Navigate to Theme Styles > Site Identity and choose Logo.

You can set different types of logos for different devices and conditions. Learn more about logo settings. Also, you can assign a favicon to your website by clicking on the Theme Styles -> Site Identity -> Select site icon button. To edit the logo size and position, go to Theme Styles > Template Parts ->  Header > Styles > Logo.

Website Width

You can change your website and content width from Theme Styles -> Theme Styles -> Layout -> Site Settings. Learn more about changing container width.

Page Template

In order to create a full page width and full width content that stretches to the borders of the browser and has no extra space below the header and above the footer, set the page template attribute to Full Width.

Typography

To change typography settings such as font family, font size, etc. go to Theme Styles > Typography menu, here you can change font properties for Body, Links and heading, you can also assign them to different parts of your website such as Header, Footer, Title bar, Breadcrumbs etc.

Please note that Elementor allows you to set a different typography setting for each of your elements, and it will override the Jupiter X settings. More information here.

There are two types of headers in Jupiter X: Default and custom headers.

Default Header

A simple header, which is quite easy to edit. Go to Theme Styles -> Template Parts > Header. Choose the type as Default. You can customize the style of the header from the Styles tab on the top. 
Learn more about default header

Custom Header

A custom header is a more advanced header with more options and deep customization. Go to Layout Builder -> Header. Add a new Header template or choose from the list. Then click on “Edit Conditions” link below it and choose where this template should be shown. 

To use a premade header template, while editing it via Elementor, click on the Add Template button and choose a header template from the list. Learn more about custom headers

Other Header Options

Regardless of your header type (default or custom), you can add more functionalities to your header such as making it sticky or transparent. All these header settings are available from Theme Styles -> Template Parts -> Header > Settings. Here is how to create a Sticky Header and Transparent Header

Just like the header, there are two footer types in Jupiter X. 

Default Footer

This is a simple and classic WordPress footer. Go to Theme Styles -> Template Parts -> Footer. Choose the type as Default. You can customize the style of footer from the Styles tab on the top. 

The default footer is comprised of two sections: Sub footer (enabled by default) and widget area (disabled by default).

Once you enable the widget area, you can use WordPress widgets or blocks in your footer.

go to Theme Styles -> Widgets to add, remove and edit widgets. Learn mroe about default footers.

Custom Footer

For a more customizable footer, you can use custom footers.

Go to Layout Builder -> Footer. Add a new Footer template or choose from the list. Then click on “Edit Conditions” link below it and choose where this template should be shown. 

To use a premade footer template, while editing it via Elementor, click on the Add Template button and choose a footer template from the list. Learn more about custom footer

Layout and Sidebar

To manage your page layout and sidebars, go to Theme Styles  -> Sidebar and choose a sidebar layout. Learn more about sidebars

As soon as you choose a sidebar layout, the widget positions will be available in Theme Styles -> Widgets. After adding the proper widgets to your sidebar, you can style them via the options available in the Sidebar -> Styles tab. Learn more about working with widgets.

Note that the sidebar options can be overridden inside individual pages. Learn more about page-specific sidebars.

Sidebar Conditions

In Jupiter X, you can have unique sidebar layouts for every post type. For example, you can set a condition to have a right sidebar on blog pages, and no sidebar at all on portfolio pages. Learn more about sidebar conditions.

Building pages using Elementor

The recommended page builder for Jupiter X is Elementor. Make sure that Elementor is installed and activated by going to Jupiter X -> Dashboard -> Maintenance ->  Bundled Plugins

Create a new page or post and click on Edit With Elementor button.

Page/Block Templates

To save time, you can use a premade page/block template to start from. Simply, click on the folder icon.

Then choose a template and click on the Insert button. Once the content is inserted in your page, you can edit and customize it using options available on Elementor’s left sidebar. 

Reorder Element Widgets

You can drag and drop elements to reorder them. However, if you want a more accurate tool, try Elementor Navigator

Blog Single Page

There are two types of blog single pages in Jupiter X: default and custom.

Default Single Page

This is the quickest way of customizing your blog single page. It offers 3 single blog post templates and allows you to customize each template. From Theme Styles -> Blog > Blog Single, choose Default as the type and select your desired page template, choose what blog element you want to display on the page and finally style it under the Styles tab. Learn more about the default blog post.

Custom Blog Single

If you want to create a completely custom blog single page, you can use the custom blog single type. From Jupiter X -> Layout Builder -> Single > Blog Single, create a template and set edit its conditions to show on every single blog page.

Customizing the Blog Archive Page

To customize blog archive pages (author, tag, category, date pages) go to Jupiter X -> Layout Builder -> Archive. Then create a new template and assign it to the blog archive pages using the conditions. Make sure to use the Posts element inside that page.

Customizing the portfolio single page

Just like blog posts, there are two portfolio single types: default and custom.

Default portfolio single post

This makes it quick and easy to edit a portfolio single page. Just go to Theme Styles > Portfolio > Portfolio Single, choose Default as the type. You can decide what elements to be displayed. Customize the elements under the Styles tab.

Custom portfolio single post

As the name suggests, a custom portfolio is for those who want even more customization. Go to Jupiter X -> Layout Builder > Single  and create a new template. Then assign it to the portfolio single pages by editing the conditions. Learn more about custom portfolio.

Build Woocommerce Pages

WooCommerce is the most popular shopping cart plugin for WordPress. Jupiter X offers 8 premade single shop page templates and many other options that let you customize every bit of your e-commerce website. Learn more about customizing shop pages.

If you want even more customization, you can create your custom shop page using the bundled plugin, Jet Woo Builder. Learn more about creating custom shop pages.

Customizing 404, search and maintenance pages

Jupiter X provides an easy way to design your 404 not found page template. Just create a template and assign it via customizer on  Jupiter X -> Theme Styles -> 404.

You can customize your search results page in Jupiter X -> Theme Styles -> Specific Pages > Search Page. Learn more about customizing search result page.

You can also create your own custom page and assign it via Jupietr X -> Theme Styles -> Elements -> Maintenance to show when your site is in maintenance mode. Learn more about maintenance mode.

Create custom post type and dynamic content

You can organize your content in different post types other than default ones (page, post and portfolio) such as employees, hotel rooms, schools, etc. and customize their designs easily using Jupiter X. First, you need to enable custom post types from Jupiter X -> Settings. After that, an additional item with the same name of your Post Types along with its archive page (if it has archive capability) will be added to the Theme Styles -> Specific Pages.

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

Now back to the Theme Styles -> Specific Pages > [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. 

To create a single custom post type template, from the Theme Styles > Specific Pages > [your post type] and then click on New.

Then find the JX elements (with the blue JX badge) and use them as you want.

Now choose the source option to be Dynamic and then select the Post Title.

Then update the template and close the modal. You can style the elements as you wish while editing the template in the Elementor editor. 

As for the Archive page, you can use Posts Widget from Elementor. Just remember to enable Is Archive toggle if you are going to use it on an archive page template. 

The Custom Post Types templates and Smart Filters are a good combination when creating a listing directory website. You can find a comprehensive tutorial on how to get used to these features to build a hotel website. 

Export and Import

Importing and exporting page content

The page content is stored in the database and can be exported from Tools > Export.

You can also import the backup from Tools > Import > WordPress Importer.

Importing and exporting Customizer settings

If you want to export customizer settings, you can use the Customizer Export/Import plugin which is bundled with Jupiter X. So first, navigate to Jupiter X-> Dashboard -> Maintenance -> Bundled Plugins, install the Customizer Export/Import Plugin and then activate it. 

Now back in Customizer, you’ll see the Export/Import option at the bottom of the list. 

Please note, you need to have the Customizer Export/Import plugin activated from the Jupiter X > Dashboard > Maintenance -> Bundled Plugins in order to use the Import/Export feature

Custom CSS and JS

Advanced customizations may sometimes require additional CSS or Javascript snippets. Jupiter X allows you to add your custom CSS and JS snippets both globally and individually on each page. 

To add a global CSS fix

Remember that this will apply to all of your pages. Simply navigate to Theme Styles > Additional CSS and add your CSS snippet, then publish the changes.

To add a CSS fix to a page

If you wish to add a Custom CSS to one of your pages, please first activate the Jupiter X Core plugin (if it is not yet activated) and then navigate to your page while editing in Elementor. Then click on the Settings button.

In the Advanced Tab, you can find the Custom CSS/JS section. Add your code snippet here and update the page.

To add a Javascript snippet globally  

Go to Jupiter X -> Settings > Tracking codes.

You should wrap your JS code into a script opening and ending tag and then put it into the proper place. 
<script type=”text/javascript” >
     //your code here
</script>
Now, save the settings and flush the theme assets on top. 

Custom Snippets

You can add custom JS snippets to different locations of your website using conditions in Jupiter X.

Simply navigate to Jupiter X -> Custom Snippets and add a new custom snippet. You can define where exactly you want to use that custom snippet. It’s useful when you want to track something using Javascript. 

You should wrap your JS code into a script opening and ending tag and then use it. 

<script type=”text/javascript” >
     //your code here
</script>

Now, make sure to check the Active this immediately after it is created. And then save the settings. 

Layout Builder

Introducing since Jupiter X 2, Layout Builder combines all Full Site Editining features of Jupiter X in one place. You can control every part of your website using Layout Builder. 

Add Header, Footer, Page Title, Single Page, Archive pageWooCommerce Products, Archive, My account, Thank You, Cart and Checkout pages, 404 and search page and custom post type templates through Jupiter X -> Layout Builder and set the proper conditions to use them in the proper place. 

 

Did this answer your question?