Note: After releasing the Donut plugin you don’t need to recreate the pages which were created by WPBakery Page Builder. You can use both WPBakery Page Builder and Elementor on a website and keep the pages as they are.
Considerations before upgrading from Jupiter to Jupiter X:
1. Take a backup before switching to a new theme. It’s just to keep the process safe and in case anything happened, you will be able to restore backup easily.
2. Do everything on a staging website, not on the live one. Not only because you have to put your live website on maintenance mode, but because in case by any chance you lost your data, you won’t lose your real website. In this post you’ll find more info how to create a staging site.
3. Make sure your web host meets the server requirements for having Jupiter X.
Now you can install the Jupiter X on your website like this:
2. Click on Add New Theme.
3. lick on Upload Theme button.
4. Click on Choose File button and select jupiterx.zip that you have extracted from the ThemeForest downloaded file, then click on Install Now button and wait for the install to complete.
5. After the theme is installed successfully, click on the Activate button.
Note: If for some reason you can’t upload Jupiter X via WordPress Dashboard, you can do this via FTP (the second method) which is described in this article.
6. Once the theme is activated, you must install Jupiter X Core plugin. You’ll see the notice in the dashboard at the top:
Click on Activate Jupiter X Core Plugin button. It will enable Jupiter X Control Panel and you’ll see it on the left side on WordPress Dashboard. Also, Jupiter X Customizer settings will be available after activating this plugin.
Note: It’s recommended to install the child theme just after the Jupiter X parent theme installation, and activate the Jupiter X child theme. It will be useful if you decide to edit some functions in the theme or translate some strings. All these changes should be made in the child theme and you’ll be ready for customizations as the child theme will be already activated in your dashboard.
Registering the theme
When you installed Jupiter X on a staging site, you can register it with the existing Purchase Code, that you used for Jupiter V6. In this case, you need revoke the API key and generate a new one.
Revoking Purchase Code
1. Log in to artbees.net dashboard.
2. Go to the Register Product section and find the Purchase Code you want to revoke.
Note: Make sure to copy and save your purchase code before removing it.
3. Click on the Delete button of that Purchase Code row to revoke it.
Revoking the API Key
To revoke the old API key from your website:
1. Go to your old website dashboard with Jupiter V6 in Jupiter > Control Panel > Register Product.
2. Click on the Revoke this API key button.
Setting Theme Options
After enabling Jupiter X, you will notice that the page layout and design are corrupted. Don’t worry, there is a simple workaround to fix it.
You will need to open the old website Theme Options to see what are your old configuration. Then for those parts that need to be reconfigured, open the Customizer from Appearance > Customize and start reconfiguring the theme options. Here are some tips that can help you speed up this process:
- Everything is visual and live in the Jupiter X customizer. You will get what you see, so you can move fast reconfiguring everything.
- You can choose the default header from Customizer > Header which is the same as Header Style 1 in Jupiter. The rest of the Header Styles should be created as Custom Headers in Elementor > My Templates > Header. You can also import from many premade Elementor Header Templates when you want to create a new Header. Here is more info.
- The same applies to the Footer. You can design a completely customized footer, or simply choose between the footer layouts. Here is more info.
Unlike Jupiter theme which we had a bunch of custom post types, we only have one here. It is the same Portfolio post type in Jupiter, but have different meta fields. Read more about it here.
Creating pages in Jupiter X
You don’t need to create your pages again in this step. Instead, enable the WPBakery Page Builder and the Donut plugin from Appearance -> Install Plugins and simply use the same pages you had on Jupiter. However, you would need to reconfigure the Page Options individually if you have changed something on your pages meta fields already.
But Anyway, You can recreate your pages using Elementor Page Builder as well because:
- It is built based on Frontend editor UX in mind.
- It requires much less learning curve.
- It is freaking fast both editor and rendering the site.
- Your WordPress site speed won’t be affected by Elementor’s presence (can’t say the same for WPBakery page Builder)
- It does not use Shortcode API to store the content and render it, excess usage of Shortcode cause slower sites.
- It has customizable built-in elements
- Its element controls have better UX and arrangements
- It has much better extendibility codebase
- Header, Footer, single page builders and many more unlimited functionalities are included.
Assuming that you already checked the Elementor tutorials from here or you are familiar with it, we will review some points that will speed up your page creation using Elementor.
- If you wish to create a full-width page, you MUST choose the Full Width template from the Page Attributes. Otherwise, removing the sidebars and make every section Full Width, will add some space on top and bottom of your content.
- We developed the Raven plugin to extend the functionality of Elementor by adding elements that were available in Jupiter and were not by default in Elementor. For more information please check here. It would be easier for you if you know what element you must use in order to have the most similar look to Jupiter.
Here is a list:
Portfolio Shortcode > Post element and choose the post type to Portfolio
Page Section > Section
Inner Row > Inner Section
Blog Shortcode > Post Element and choose the post type to Blog
Product Loop > Products (Raven)
Flip Box > Animated Box
Padding Shortcode > Spacer element
Clients Shortcode > Brands element
Contact Form Shortcode > Form element
The rest of the Raven elements are having the same name as Jupiter shortcodes. Also, some other elements are available in Jet Elements which are needless to say. For example, Advanced Google Maps is now Advanced Map and etc. You can find more info about Jet Elements here.