Using Jupiter X theme overview

Updated on March 18, 2020

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

  • WordPress Customizer: Contains all your visual theme settings and global options such as typography, site, blog settings, etc.
  • Elementor: This is where you actually create content using a drag and drop builder. You create your pages and post content, custom header and footer, etc here.
  • Control Panel: This is where you register Jupiter X, install a template or plugin and manage some advanced settings. 

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 > Control Panel > Plugins. There, you can also activate, deactivate and delete plugins. Make sure to install and activate the required plugins. Required plugins are marked as “required” with a red badge on top.

Global Settings

Jupiter X uses  WordPress Customizer 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 Customizer. 

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

Page Settings

Almost all of the global customization you make via Customizer 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 Customize > 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 Select site icon button. To edit the logo size and position, go to Customizer > Header > Styles > Logo.

Website Width

You can change your website and content width from Customize > 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 & Font Settings

To change typography settings such as font family, font size, etc. go to Customize > Fonts & Typography menu. Here you can add new fonts from either Adobe fonts or Google fonts. You can also assign them to different parts of your website such as Body, Headings (H1, H2 …), 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 Customize > 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 Customize > Header. Choose the type as Custom and then click on New. This will open a new Elementor window where you can either build a header from scratch or use a premade template to start from.

To use a premade header template, 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 Customizer > 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 Customize > 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 in your footer.

go to Customizer > 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 Customize > Footer, choose the type as Custom and then click on New. This will open a new Elementor window where you can either build a footer from scratch or use a premade template to start from.

To use a premade footer template, click on the Add Template button. Learn more about custom footers.

Layout and Sidebar

To manage your page layout and sidebars, go to Customize > 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 Customize > Widgets. After adding the proper widgets to your sidebar, you can style them via the options available in the Layout > 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.

Custom Sidebar

To create your own sidebar, go to Appearance > Widgets, and click on Add Custom Sidebar.

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 > Control Panel > 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 Customize > 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 Customize > Blog > Blog Single, choose Custom and then click on New.

Customizing the Blog Archive Page

To customize blog archive pages (author, tag, category, date pages) go to Customize > Blog > Blog Archive. Then assign a template that is built with Elementor. Make sure to use the blog 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 Customize > 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 Customize > Portfolio > Portfolio Single, choose Custom as the type. Click on new and customize it using Elementor. 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 page and assign it as a template via Customize > Pages > 404.

You can customize your search results page in Customize > Pages > Search. Learn more about customizing search result page.

You can also create your own custom page and assign it via Customize > Pages > 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 > Control Panel > Settings. After that, a new additional item called Post Types will be added to the customizer.

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

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. 

To create a single custom post type template, from the Customize > Post Types > [your post type] > Single and then click on New.

Then find the Raven elements (with the blue X 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 > Control Panel > 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. 

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 Customizer > 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 Raven 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 > Control Panel > Settings > Tracking code area.

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. 
Did this answer your question?