<b>Jupiter</b> theme is the fastest, easiest way to build a website.
Words by clients
Updating WordPress Theme
There are 2 methods to update our wordpress themes to newer version. These new updates are essential if you want to have a bugfree website as we give new features and improvements to the theme over time. some of these updates might be needed in order to make the theme compatible with wordpress newer versions. there is no risk on losing your settings and pages. However if you had done modifictations on theme files, then they will be lost.
Update Through WordPress Admin Panel
- For this method you should first install Theme Upgrades Tool
- Unzip the file you just downloaded from ThemeForest and locate the WordPress Theme. (eg. Jupiter.zip)
- Log into your WordPress Dashboard.
- Click on “Appearance > Themes”.
- Still within the Themes section, on header tab, click on “Install Themes”, then on header second tab click “Upload”.
- Click “Browse…” and locate the new theme file. (eg. Jupiter.zip)
- In the “Upgrade existing theme?” option choose “Yes” from the dropdown list.
- Click “Install Now”.
- Click “Activate”.
Method Two
- Login into your Themeforest account and go to downloads (Dashboad > downloads)
- Download the theme into your computer
- Install an FTP program (Filezilla is free)
- Retrieve your FTP login information from your hosting admin panel and login into your hosting via FTP
- Unzip the item main file
- Locate theme.zip (eg : Jupiter.zip) and unzip it. make sure your unzipping software do not create extra directory with the same name nested into each other.
- drag and drop theme main folder into your FTP program with the destination : “YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/”
- FTP program will give a warning that there is an existing with the same directory name, choose replace all.
- It will take varying from 15 to 30 minutes to replace all files. once you done login into your wordpress dashboard and go to masterkey settings. on the header (beside masterkey logo) the theme version will be changed to the latest version. this is the indication that your theme is updated. We recommend method one which only takes less than one minute.
Masterkey Settings
Masterkey settings is the core of your theme. A place you can customise from A-Z. Its in fact theme settings same like other themes, however we put alot of time and effort to build a solid framework. It exhibits options and settings in a way you can find them easily, and many other features. Thats why we thought better name it “Masterkey” so we can evolve this visual panel over the time. we are not going to explain every single option in masterkey since we added description for each option and most of them are self descriptive.
In this documentation we will cover some major sections that has a workflow and needed to be explained in steps to avoid any confusion. If you wonder where to find Masterkey settings, its in WordPress admin panel > Left sidebar > last item (Jupiter) or its in wordpress Toolbar, so you can access there from backend and frontend (if you logged in with administrator roled user).
Before we move on to other sections let us introduce some geneal stuff here :
- Your Theme’s Current version indicator. so you can always see what version you are using by just having look at here right beside masterkey logo.
- Main Navigation. General sections which will direct you to sub levels
- Sub Level Navigations. will get you just right there faster by 2 clicks
- Settings Pane area that based on your navigation moves will change accordingly.
- Save settings that will save ALL changes you have made in masterkey, not only the pane you are currently viewing.
- Reset to Defaults will return all settings to default state. Be careful as it will rest ALL settings to defaults in masterkey.
Uploading Your Logo
In Jupiter we have thought an alternative way of having single logo image which is retina compatible as well. The concept is simple. lets assume you have a header height of 100px which you defined in Masterkey settings -> General -> Header. You will need to make a png image of height 200px (See below screenshot). The image will be scaled to fit the height. this has no difference in normal dislays, however if you look at your website in a retina display the logo will look sharp and great. if you don’t want to support retina displays simply make your logo png file the same height with the value you defined for header height. Please note that you should leave paddings from top and bottom like below in the png file to align it vertivally. Jupiter will not give these paddings using CSS.
Styling & Coloring
Here is where all the magic happens! Here you can customize your websites backgrounds, header, footer and many more. In Masterkey settings click on Styling & coloring from left hand main navigation. You will see sub level of items as below and each contains panes which will direct you to it’s section accordingly.
- Backgrounds :The only advanced and easy to use background selector we have seen so far! We dont even see a need to explain how to work with that. you just play around with it and everything will come naturally. you will not cunfused or overwhelmed. Be informed you have this whole background selector in each page options. so you can customise for each page differently. You can also have boxed and full layout and define your header, header banner, page, footer and body backgrounds with just few clicks away.
- General Coloring : Some General typography coloring options
- Main Navigation : Everything you need to change your main navigation appearance is here!
- Header Toolbar : Will brush your header toolbar colorings
- Page Title : Page title and subtitles colors
- Sidebar : This section will allow you to change coloring of all widgets appears in your site sidebar
- Footer : In this section you will be able to customise your footer widgets coloring as well as some other footer specific elements stylings such as sub footer.
- Miscellaneous
Backgrounds
One of the great features of Jupiter is that you can have global and local backgrounds. For example you can have a custom background in a page for Banner Section. You can find these options in every page => Jupiter Page Options => Backgroudns.
Typography Settings
Typography is pretty strightforward section. You can define your theme elements font-family, font-size, font-weight and text-transform. so you have full set of options to get any results in typography. In this documentation we will only focus on how to choose your font-family :
Masterkey settings > Typography > Fonts
You can choose from different and various kind of fonts readily available in the theme. You can also choose a font and specify which sections the font of your choice will be applied to. To do so all what you have to do is:
- Go to choose a font family
- Then go to specify which elements use the font above using this multi selectbox.
- You can utilize such feature twice as shown in the image below
How to add custom @fontface?
If you need to add more fonts other than the list we offer in our themes then follow the below instruction :
- Visit http://www.fontsquirrel.com/tools/webfont-generator
- Click on “add fonts” and browse the font you need to import.
- Check the agreement that you have permission to use it on your website.
- Then hit the “download the kit” button
- A zip file will be downloaded, unzip the file and open the folder.
- Select the files with extensions “woff”, “ttf”, “svg” and “eot” and upload them into your fontface folder located in theme main folder root. you will need to have FTP access to do this action.
- Once you have done with above steps, find stylesheet.css file located on the same folder you just downloaded.
- Open the file and copy-paste the content into the same named file located in your theme’s main folder > fontface. You should add the code to the last line of the file. save the file and replace with the same file in your host (via FTP)
- Once you have done with above steps you will find the custom font in typography settings => “Choose a Font” select boxes, so you can select and apply to any element you like.
Warning!
This is a customisation in theme files and if you need to upgrade themes in future make sure you have a backup from your edited version of fontface/stylesheet.css file.
Widgets & Custom Sidebars
WordPress Widgets add content and features to your Sidebars and Footer. Examples are the default widgets that come with WordPress; for example post categories, tag clouds, navigation, search, etc. Widgets require no code experience or expertise. They can be added, removed, and rearranged on the WordPress Administration Appearance > Widgets panel.
Guide to use widgets feature :
- Go to Appearance > Widgets.
- Choose a Widget and drag it to the sidebar where you wish it to appear. The widget areas designated as No 1
- Once you dropped the widget to widget areas, WordPress automatically updates the Theme and it will appear in its area.
- Preview the site. and look for the specified area you dropped your sidebar. for example if you used “archive widget area” you should look for it in archive loop.
- Return to the Widgets Panel to continue adding Widgets. Jupiter has 14 custom widgets as designated below with No 2. as you can see all have “JP” perfixes.
- To arrange the Widgets within the sidebar or Widget area, click and drag it into place.
- To customize the Widget features, click the down arrow in the upper right corner to expand the Widget’s interface.
- To save the Widget’s customization, click Save.
- To remove the Widget, click Remove or Delete.
Custom Sidebars
In some cases you need an specific widget area for an specific blog post or page. Good news is we have such feature that give you the ability to create unlimited widget areas beside your predefined widget areas (eg. single widget area). To start follow the below steps :
- Go to Masterkey settings > General > Custom sidebars
- Write down your sidebar alias as you will remember for what page you are going to create it, such as FAQ, contact us. (No 1)
- Click on “create” button. (No 2)
- The list of created sidebars will appear below textfield as designated with No 3 in below screenshot. you can delete them anytime you need
- Save settings
- Now go to Appearance > Widgets.
- You will see the list of custom sidebar areas you just created. If you didnt notice where they appeared check above screenshot where appointed with No 3.
- Same like predefined widget areas you can drag and drop widgets into custom sidebars.
- Now its time to assign the custom sidebar to a post (blog or portfolio) or page. add new page > below text editor > Jupiter Page Options > general Settings > Custom Sidebar.
- Choose your custom sidebar from the selectbox.
- Done! if your page is left or right sidebar layout then you should see your custom sidebar widgets on your page.
Custom CSS & JS
If you need to apply some small CSS tweaks or add Java Script snippets to your theme, then you are in right place. Please note that you should always have a copy of your custom codes as sometimes you may mistakenly reset theme options to defaults and lose all your custom css. Alternatively you may consider making a child theme if your customisation is beyund just few lines of css or js. below are some links to how to create your own child theme :
- Child Themes « WordPress Codex
- Child Themes Basics and Creating Child Themes in WordPress
- WordPress child theme made easy… and easier
Export & Import Options
If you have decided to move your wordpress installation to other hosting, Export & Import feature will help you do this migration painlessly. Please note this feature will help you to only migrate Masterkey settings (skinning, typography, etc).
- Go to Masterkey Settings > Advanced > Export options
- click on the textarea once, whole content will be selected.
- copy and paste it to a text file.
- On your new installation you paste the saved content in Masterkey Settings > Advanced > Import options
- Click on “Import” button
- Done! you will see immediately see the changes in frontend.
Set up Homepage
In Jupiter setting up your homepage is pretty simple thing. all you need to do below steps :
- Add New Page
- Build your homepage content same like building other pages.
- you may consider checking its page options, for example : page layout, slideshows, Backgrounds.
- Save the page.
- From WordPress Left Hand sidebar navigate to Settings > Reading.
- You will see a page like below.
- Change your Front page displays to “A static page (select below)”
- From “Front page:” selectbox choose the page you just created
- Save Settings and you should see that page in your homepage.
Blog
In below Screenshots we have explained how to make blog posts and blog loops. in Jupiter you can have unlimited Blog pages with 3 different styles.
- From WordPress Admin Left hand Sidebar > Blog > Add New Post
- As you can see in below screenshots you should follow below steps to create a new post
- Jupiter has 4 post type : Image, Video, Sound, Portfolio.
- Once you done with creating new posts procceed to add a new page.
- Click on Page Composer Button to switch to visual mode.
- From “elements” Button type blog to filter elements (to save time searching for it). click on Blog to drop blog loop module to the editor section.
- then save the page
- However you can modify its settings such as its style and so on right from the module editor section
- as shown in below screenshot click edit. you will see the Blog Edit options.
- Once you done editing click save.
- Now you can view the page to see your blog loop.
Portfolio
Portfolio is a custom post type and you can exhibit your work using this feature. Its basic functionality is the same as creating a new post or page. However there are some features difference as you can see in “Jupiter Portfolio Options” meta box (No 3). the rest of the things are pretty strightforward. In order to add a portfolio loop page you should follow below steps :
- Add a new page.
- Click on Page Composer Button to switch to visual mode.
- From “elements” Button type portfolio to filter elements (to save time searching for it). click on Portfolio item to drop portfolio loop module to the editor section.
- then save the page
- However you can modify its settings right from the module editor section
- To do so click on edit icon on the right side of portfolio shortcode module.
- Once you done editing click save.
- Now you can view the page to see your Portfolio loop.
FAQ
FAQ is a custom post type and you can add a filterable FAQ section to your website. Its look is like an accordion shortcode, but since for some users adding new faq questions and putting them organized we decided to create an standalone post type for it. Its basic functionality is the same as creating a new post or page. Just type a title, content, category and hit save settings. In order to add a FAQ loop page you should follow below steps:
- Add a new page.
- Click on Page Composer Button to switch to visual mode.
- From “elements” Button type FAQ to filter elements (to save time searching for it). click on FAQ item to drop FAQ loop module to the editor section.
- then save the page
- However you can modify its settings such as its style and so on right from the module editor section
- To do so click on edit icon on the right side of FAQ shortcode module.
- Once you done editing click save.
- Now you can view the page to see your FAQ loop.
News
News is a custom post type. some users who may love this feature as they want a separate post type to manage their news section. If you are a crowded company and involve in many events, then here you go! 🙂 Its basic functionality is the same as creating a new post or page. Just type a title, content, category and hit save settings. There are 5 styles avalaible for you to choose from for each post. If you check out the Number 5 (Jupiter News Options) section in below screenshot you will spot post style option. In order to add a News loop page you should follow below steps :
- Add a new page.
- Click on Page Composer Button to switch to visual mode.
- From “elements” Button type News to filter elements (to save time searching for it). click on News item to drop News loop module to the editor section.
- then save the page
- However you can modify its settings right from the module editor section
- To do so click on edit icon on the right side of News shortcode module.
- Once you done editing click save.
- Now you can view the page to see your News loop.
Employees
Employees is a custom post type. If you are a crowded company and would like to show your employee members in your about page, then fire up the base. you will need to add new post for each of your employees and then follow below steps to add them into a page:
- Add a new page.
- Click on Page Composer Button to switch to visual mode.
- From “elements” Button type Employees to filter elements (to save time searching for it). click on Employees item to drop Employees loop module to the editor section.
- then save the page
- However you can modify its settings such as its style (simple or Boxed) right from the module editor section
- To do so click on edit icon on the right side of Employees shortcode module.
- Once you done editing click save.
- Now you can view the page to see your Employees shining in the page.
Pricing Tables
Pricing Tables is a custom post type. Needless to describe what kind of stuff you can build with this post types, If you just have a look below image you will get a notion on how to build each of your tables. To add pricing tables into a page follow below steps:
- Add a new page.
- Click on Page Composer Button to switch to visual mode.
- From “elements” Button type pricing tables to filter elements (to save time searching for it). click on pricing tables item to drop pricing tables module to the editor section.
- Click its edit icon to choose your pricing tables from the list as well as its styles. there are some other settings may need to consider modifing them.
- Once you done editing click save.
- Now you can view the page to see your Great pricing Tables.
Clients
Clients is a custom post type. This specific post type will help you to add your clients logos and optionally links to their website into a page. Logos will be slided horizentally if you have many of them. its structure is pretty simple, add new client logos, give a title, maybe a URL. then follow below steps to add them into a page.
- Add a new page.
- Click on Page Composer Button to switch to visual mode.
- From “elements” Button type Clients to filter elements (to save time searching for it). click on Clients item to drop Clients module to the editor section.
- Click its edit icon to choose your Clients from the list or just leave it as default. there are some other settings may need to consider modifing them.
- Once you done editing click save.
- Now you can view the page to see your clients logos are inside a Carousel.
Testimonials
Testimonials is a custom post type. One of the most needed module for a company to prove their quality of services using their current customers testimonials. The main concept is pretty easy, the same as other post types, add your testimonials. for each testimonial you will need to fill up the below options and save them. later on you can add them into a page using below steps.
- Add a new page.
- Click on Page Composer Button to switch to visual mode.
- From “elements” Button type Testimonials to filter elements (to save time searching for it). click on Testimonials item to drop Testimonials module to the editor section.
- Click its edit icon to choose your Testimonials from the list or just leave it as default. there are some other settings may need to consider modifing them.
- Once you done editing click save.
- Now you can view the page to see your Testimonials.
Edge Slideshow
Edge Slideshow is super resposnive swipe enabled, full height optionality slideshow made by artbees. This slideshow is a post type and for adding a new slider item you will need to follow below steps.
Adding a new Slide Item
To start navigate to WordPress Sidebar => Edge SlideShow => Add Edge Slider. You should see an screen as shown in below screenshot. Please follow the step numbers from below screenshot.
- Add a title to this slide. this tite will only be used to choose slide items while adding it into contant. This title will not be shown in the slideshow
- You can use any shortcode in Edge Slide item content. You can use Page Composer for edge slider items. Using custom content for slideshow can be a though job so use it if you are enough expert on building and designing contents. If you want to keep it simple you just need to refer No.8 for adding only title & captions.
- Edge Slider supports Image and Video backgrounds. please refer to next section for video type. we will continue with image type in this section.
- If you have chosen image type, then you will need to consider uploading a large image. if you want the image look great in all devices try to upload an image with 1930 * 1080 pixel dimnesions. Images will be fit to the area using CSS background cover feature. so your images will not be repeated.
- Background color is for the cases you dont want to use image. In some cases captions or custom content with solid color can be more trendier than image backgrounds.
- Content Align will set a relative location for your custom content or captions. This location is reposnive. Please note that you can not use page section and rows with full width enabled option in Edge Slider content. If you do so the content align feature will not work as expected.
- While using captions in slider you may need to set your content width as 70% or even less. but if you have used custom content you may need to set it 100% (so its in your hands to set the content width).
- Caption title and description! 🙂
- Caption can be used in dark and light backgrounds. May you consider choosing its skin color from this option.
- You can have 2 buttons in each slide. Button Text and URL including http://
- Each button can be skinned separately
Please read on with the next section if you will use video backgrounds for edge slider.
Edge Slideshow Video Backgrounds
Video Baclground is pretty strightforward. You will need to choose video type and start uploading your video formats in as shown in below screenshot. Below formats compatibility check ups:
- MP4 : Safari, IE9, iPhone, iPad, Android, and Windows Phone 7
- webM : Firefox4, Opera, and Chrome
- OGV : Older Firefox and Opera versions
- Preview image is important until the video load the slide will not be empty.
- If you enable video mask option you will see an angled pattern over video. This option will reduce the boldness of your videos to help your content over them be more readable.
- Color overlay will make your videos colorish.
Some Important Notes :
Ensure your server is using the correct mime-types. Firefox will not play the Ogg video if the mime-type is wrong. Place these lines in your .htaccess file to send the correct mime-types to browsers :
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
The iPhone will not autoplay. This is done to save bandwidth which may cost some users, or be limited. It is not a bug, it’s a feature
HTML5 video (used in theme) on Android is badly broken. Resolution support varies from one handset to the next (often just 480×360), the fallback image usually doesn’t show and the code requires special adjustments. The Android emulator is completely useless as it doesn’t represent any real hardware and does not play HTML5 video. THERE IS NO WAY TO TEST ON ANDROID WITHOUT A PHYSICAL PHONE. BLAME GOOGLE.
Some web hosts, in trying to save bandwidth, gzip everything by default—including video files! In Firefox and Opera, seeking will not be possible or the video may not play at all if a video file is gzipped. If this is occurring to you please check your server / hosts and disable the gzipping of Ogg and other media files. You can switch off gzipping for video files in your .htaccess file by adding this line:
SetEnvIfNoCase Request_URI \.(og[gv]|mp4|m4v|webm)$ no-gzip dont-vary
We have added flash player fall back for older IE versions.
Adding Slideshow to Header Section.
Adding videos into the content is very easy. You can add new page, post or portfolio. Below Editor => Jupiter Page Options => Slideshow. You will see below metabox options :
- Enable slideshow for this page
- Choose Edge Slideshow from the options.
- You can choose specific slideshow. if left blank, all slideshows will be added
- You can turn off full height option and use a custom height for this slideshow. Full height feature means the height of slideshow will always cover the screan in all devices.
Adding Edge Slideshow into Content
Edge Slideshow is available as shortcode as well. to start with switch to page composer mode and add new element.
- Once you add edge slideshow shortcode into the page composer visual convas, edit parent row and set its full width option as enabled.
- Shortcode options are same as above metabox options.
Flexslider
Flexslider is a custom post type. This slideshow is build with one of the most famous jQuery plugins in the planet called Flexsldier. Adding new slides will take you seconds as you can see in below image.
Adding Flexslider into a page
- Add a new page.
- Click on Page Composer Button to switch to visual mode.
- From “elements” Button type Flexslider to filter elements (to save time searching for it). click on Flexslider item to drop Flexslider module to the editor section.
- Click its edit icon to choose your Flexslider items from the list or just leave it as default. there are some other settings may need to consider modifing them.
- Once you done editing click save.
- Now you can view the page to see your Slideshow.
Adding Flexslider into Header Banner
- Add a new page.
- Find Jupiter Page Option Metabox below the wordpress editor.
- Click on the third tab to view slideshow pane
- Turn on the toggle for the option > Enable Slidehsow For this page
- Select your slideshow as Flexslider
- New set of options will appear, now you can choose your slides and modify defualt settings.
- Once you done editing, save page and view the page.
- You will see your slideshow below header > inside header banner.
- Also you can customize header banner section background (for only this page) from Jupiter Page Option Metabox > Background.
iCarousel
iCarousel is a custom post type. This slideshow is build with one of the best 3D carousel jQuery plugin that available in Codecanyon. Same as Flexslider you should first add your slides using iCarousel post type and then follow below steps to add it in your header Banner.
- Add a new page.
- Find Jupiter Page Option Metabox below the wordpress editor.
- Click on the third tab to view slideshow pane
- Turn on the toggle for the option > Enable Slidehsow For this page
- Select your slideshow as iCarousel
- New set of options will appear, now you can choose your slides and modify defualt settings.
- Once you done editing, save page and view the page.
- You will see your slideshow below header > inside header banner.
- Also you can customize header banner section background (for only this page) from Jupiter Page Option Metabox > Background.
Banner Builder
Banner builder will give you the ability to add any sort of content into the header Banner section. All shortcodes included in jupiter can be used to build anything starting from static contents going to slideshows.
Creating content for Banner is the same prosedure as you are making a page. with the difference of :
- Its a custom post type
- You can add it to any page
- You can reuse banner templates throughout of your website
Below are the steps:
- From WordPress Admin > Left Sidebar > Banner Builder > Add new Banner
- Using our Page composer start making your content. Alternatively you can use our demo site banners if you dont want to start from scratch.
- Once you done with your banner or banners (you can slide banners as well)
- Add new page
- Below WordPress editor panel you will find “Jupiter Page Options” Metabox. click on slideshow tab to view its pane.
- Enable slideshow for this page
- select “Banner Builder” as your slideshow
- Now you can add your Banner or Banners. if you add more than one banner, they will slide, otherwise it will be an static banner.
- Plase note that if you have slideshow shortcode (eg : Laptop slideshow, LCD slideshow) in your Banner you should only choose one banner rather than multiple as they will conflict with each other (Banner slider with its child slideshows).
- once you done click save and view the page
- You can change Banner section background only for this page from one tab above slideshow in page options. you will only need to click on Banner section from background selector and modify its color and other attributes which will be applied for this page.
Steps how to make your Banners
Add new page and from Jupiter Page Options follow below steps
You can modify Banner section background for only this page as shown below:
Layer Slider
Jupiter integrated with LayerSlider WP and it meets all its compatibilities to use it anywhere in your content, starting from your header or as a shortcode (using page composer). due to the Themeforest new guidlines we can not ship third party plugins with themes. However we can include it in the main item folder for you to install it manually. It will just take you few seconds to get it from the main item you downloaded > Plugins > Layersldier.zip and manually upload and install it. If you will not use Layerslider and happy with our built-in sliders, simply just dont install it and theme’s other features will work seamlessly. However if you wish to build awesome slides using this plugin follow below steps to install :
- Open Main Item zip file and unzip Plugins.zip file.
- You will find LayerSlider.zip file.
- Go to WordPress Dashboard > Left sidebar > Plugins > Add New
- Click on upload from top Navigation.
- Browse LayerSlider.zip file you just found in plugins folder.
- Install now.
- By now you should see its name in wordpress dashboard > left sidebar.
We will ship Included plugin’s new versions with our every theme update. Since this plugin is premium (We have extended lisence, so you can use it freely), therefore you must have a single lisence to make your auto updates. If you have your own lisence and prefer to make your own updates independently, then you should manually add jupiter folder (Located in Layerslider > skins) to your current version of Layer Slider. This folder is standalone skin that we made to fit our theme design.
Getting Started With Layerslider
Using Layerslider is tough job, and I personally dont recommend it to novice users! Its not about steps or its visual panel usages. you should also be skilled in animations, transitions and layers. you should be able to use photo editing softwares like Photoshop to make your layers and then combine them in layerslider with transitions. Layerslider has a simple documentation right inside its visual panel (If you check below screenshot you will stop where to click)
Adding Slider into Header Banner Section
- Add New Page
- From Jupiter Page Option Metabox click on Slideshow tab to view its pane content
- Enable slideshow for this page
- Choose Layer Slider from the select box
- New options will appear, choose your slideshow (with the name you have give it)
Adding Slider as a shortcode
- Add a new page.
- Click on Page Composer Button to switch to visual mode.
- From “elements” Button type “Layer Slider” to filter elements (to save time searching for it). click on Layer Slider item to drop Layer Slider module to the editor section.
- Click on edit icon on the right side of Layer Slider shortcode module.
- Choose your slideshow and save. then Save Page and publish.
Please be informed that we do not give support to any third party plugin’s questions and issues. We can only afford to answer simple usage questions or issues related to incompatibility with the theme. this exception is for only our supported Plugins (Layerslider, Revolution slider, Contact form 7 and Woocommerce).
Revolution Slider
Jupiter integrated with LayerSlider WP and it meets all its compatibilities to use it anywhere in your content, starting from your header or as a shortcode (using page composer). due to the Themeforest new guidlines we can not ship third party plugins with themes. However we can include it in the main item folder for you to install it manually. It will just take you few seconds to get it from the main item you downloaded > Plugins > RevSlider.zip and manually upload and install it. If you will not use Revolution Slider and happy with our built-in sliders, simply just dont install it and theme’s other features will work seamlessly. However if you wish to build awesome slides using this plugin follow below steps to install :
- Open Main Item zip file and unzip Plugins.zip file.
- You will find RevSlider.zip file.
- Go to WordPress Dashboard > Left sidebar > Plugins > Add New
- Click on upload from top Navigation.
- Browse RevSlider.zip file you just found in plugins folder.
- Install now.
- By now you should see its name in wordpress dashboard > left sidebar.
We will ship Included plugin’s new versions with our every theme update. Since this plugin is premium (We have extended lisence, so you can use it freely), therefore you must have a single lisence to make your auto updates. If you have your own lisence and prefer to make your own updates independently, There will not be any issues as we dont touch any plugin’s Core files we ship.
Getting Started
Revolution slider is delivered a documentation inside its plugin. to make it easier for you, we used their documentation content right here to get familiar with this awesome plugin.
Slider
After pressing the “Create New Slider” button you will reach a form where you are asked to enter a Slider Title (used for the Slider overview in this backend) and a Slider Alias (a slug that is used to implement the Slider in your WP later, so keep it simple with no spaces and special chars).
You are also prompted to enter the Sliders Basic Settings, a Slider Title (for you to remember the Slider by) and a Slider Alias (please do not use special characters or spaces here, this defines the shortcode for you to use in your content).
The options in the boxes on the right side (General Settings, Position, Appearance, Navigation, Thumbnails) have helping Tooltips on mouseover so they are not explained here.
The Slider Type can be fixed (not responsive, fix dimensions), responsive (changes depending on the size of its max. sizes given later in relation to the screen size) or fullwidth (always 100% in width of the screen size, but height keeping the aspect ratio).
The Sizes section is needed to fit the slider in all screen sizes needed. The height of the slider will always be calculated to keep the aspect ratio from the max width and height given in the Slider Size line.
Slides
The next step is creating/editing slides. You get there by just clicking on “Edit Slides” in the Slider Form window.
Just press “New Slide” and the native WP Media Upload dialog window will appear. Choose or Upload the slide’s background image, choose “Full Size” and then “Insert Into Post” (all like you are used to it in your WP editor). You can always click on the pic to change it.
Use the arrow handles on the right side to change the slides position in the slider (top to bottom = first to last slide to be shown) or delete it with the “Delete” button.
The “Edit Slide” leads you to the next chapter “Slide”.
Slide & Creative Layers
In the “Edit Slide” view you see the heart of our plugin. The drag&drop Caption editor.
But first please note that you have another chance here to change the background image with the “Change Image” button.
To create a Layer (Caption, Image or Video) press the button “Add Layer” or “Add Layer: Image”. In case of a text layer a basic layer will be created you can use the “Text” field in the Layer Params to change the caption on it. The “Style” selectbox shows some basic styles (CSS classes) you can use to style the caption (you can always add own CSS classes to this field or edit the existing ones via the “Edit CSS File”).
In case of an Image Layer you will see the native WP Media Uploader again. In case of a Video Layer you will prompted to a custom Video selection wizard.
You now can move the Layers around via drag&drop or type in the x and y coordinate in the corresponding fields.
The “Layers Sorting” drag&drop list determines the Layers’ z-index. This list specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Video Wizard:
Adding Slider into Header Banner Section
- Add New Page
- From Jupiter Page Option Metabox click on Slideshow tab to view its pane content
- Enable slideshow for this page
- Choose Revolution Slider from the select box
- New options will appear, choose your slideshow (with the name you have give it)
Adding Slider as a shortcode
- Add a new page.
- Click on Page Composer Button to switch to visual mode.
- From “elements” Button type “Reolution Slider” to filter elements (to save time searching for it). click on Reolution Slider item to drop Reolution Slider module to the editor section.
- Click on edit icon on the right side of Reolution Slider shortcode module.
- Choose your slideshow and save. then Save Page and publish.
Please be informed that we do not give support to any third party plugin’s questions and issues. We can only afford to answer simple usage questions or issues related to incompatibility with the theme. this exception is for only our supported Plugins (Layerslider, Revolution slider, Contact form 7 and Woocommerce).
Banner Video
In this section I would like to demonstrate how to make a banner Video same as you can find it Portfolio One Page.
- From WordPress Dashboard go over Banner Builder Menu => Add new Banner.
- Go ahead and give it a title.
- Switch to Classic mode in WordPress Editor and paste below sample data.
- Please note that the logo is used in above demo is premium item and you should change it to your own graphics once you done with your site development
- Save new Banner Slide settings
- From WordPress Dashboard go over Pages => Add New Page
- Give it a title and then scroll down below WordPress Editor. Find “Jupiter Page Options” metabox(see below screenshot).
- Click Banner Video tab and as demonstrated in below screenshot upload your videos. you should have m4v or mp4 and webM formats to have the video play in all borwers.
- Once you finished uploading your videos move to the Slideshow tabs from the same section.
- Enable Slideshow from this page and choose Banner Builder.
- From the option “Choose your Banner or Banners” find the banner slide that you just added.
- Set “Min Height” 200 and “Top & Bottom Padding” 30
- Thats all about it. save the page and view the page.
Page Composer
Page Composer is a visual shortcode generator that you can build your layout painlessly without wasting your time with writing shortcodes. We built Page Composer based on Famous plugin called Visual Composer.There’s one concept/design pattern you should know. In the Page Composer editor mode you’ll have “Add element” button, which you should click or drag to the working canvas, to add content block or row to your page. Clicking the “Add element” button will show the content element selection menu. Content blocks are divided into categories so you can filter. Alternatively you can type the shortcode name to filter down the items instead of search them visually.
Main buttons :
- The button to switch between classic and visual mode. So you can modify generated shortcodes manually if you know what you are doing.
- Adds Elements, using this button you can drop all shortcodes avalaible in Jupiter. You can drag this button and drop to a page section, row or a column.
- Adds Row. This is a column container. This shortcode does nothing other than holding controlling columns and elements.
- Page section is the same as Row, but it has huge amount of options such as backgrounds, parallax effects, background videos and many more. you can click edit to explore its options.
- Templates : You can save a page using this section and use it in other page. Its handy when you built blocks and columns that you might need them later in other pages.
Elements Blocks
Below image shows the list of all shortcodes that you can use in Jupiter. You can use category filter and search element name field to find your shortcode much quickly.
Rows
Rows are used to divide your page into the logic blocks with columns, columns later will hold your content blocks. Rows can be divided into the layouts (eg. 1/2 + 1/2, 1/3 + 1/3 + 1/3, and so on). Your page can have unlimited number of rows. To change row’s position, click and drag row’s drag handler (top left row’s corner) and drag row around (vertical axis). Please note that you can edit a row property to enable full width option. This row will no longer follow main grid width that you define it in Masterkey Settings. Now you can add shortcodes such as full width slideshow, Portfolio carousel(modern style) or divide a page with Page divider (fullwidth style).
Introducing Row based on below screenshot :
- Delete button to delete the row and the all elements inside it.
- Clone Button to dublicate the row and all its columns and elements
- Edit button to give it custom class name and enable fullwidth mode.
- Dragger button to move vertical wise.
- Layout section to divide the row into differnt column width combinations.
- Column Edit button inside this row
- Plus button will bring up all elements pop up in order for you to choose which element to drop into this column.
Columns
Columns are part of the row and they hold your content elements inside them. Columns can be reordered. Click and drag column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse (to re-position).
Page Section
Page sections are standalone shortcode that plays a fullwidth container role. It has huge optionality so you can put your shortcodes into it. You can have parallax backgrounds, videos, an many more using this huge shortcode. page section same as Rows are column holders, so you can have first level and second level columns to build complex layouts which has been never possible in old times without HTML and CSS knowledge.
Content Elements
This is a list of available content elements that can be placed inside of the columns. Think of them as bricks. With those bricks you are building your layout. Most of the content elements have options, to set them click pencil icon. To save changes click save button.
- Delete Button to delete the shortcode
- Clone button
- Edit button to view all of this shortcode options
- Shortcode Name
Page Composer Settings
You can control page composer global settings such as disable/enable in a post type and user roles that can use a shortcode. You can find these settings from WordPress dashboard => left sidebar => settings => Page Composer. Once you arrived to this page, you will face with 2 options :
- Content types:
- This option allows you to choose which post type should have the page composer feature. Please note that only post types will have this feature that they have WP editor feature. so for example clients will not have page composer even if you check mark its post type.
- Rules for users groups:
- This option will give you the ability to select which shortcode should be appeared in the specific user role. this is useful when you give subscribers the ability to post, so you can disable some shortcodes for them.
Shortcodes
In Jupiter you will no longer need to remember any shortcode thanks to the visual Page Composer. For those of you who prefer to not use page composer and stick with the old fasion, we made a TinyMCE button with the list of all shortcodes for you to just click and generate.
Below is a complete list of shortcodes with explanations:
Page Sections
This is probably one of the most popular and useful shortcodes in Jupiter. Using Page sections you can divide your page into sections and insert any content (shortcodes) inside them. In page sections you can also change background color or images and give them border colors.
- Border Top and Bottom ColorYou can change page section’s Top and Bottom Color. (Figure 1-1)
- Box Background ColorYou can change the inner color of page sections here. (Figure 1-1)
- Background ImageIf you prefer to insert an image inside your page section instead of a simple color, use this option. Click on Upload button and select your image file and press “insert into page” button.
- Background PatternIf you want to apply a seamless pattern inside your page section use this option. Of course these patterns are just simple image files and you can upload your own pattern image file using previous option but in case you want a quick solution this is what you need. Just choose your desired pattern by clicking on it. This option only works when background image field (previous option) is empty.
- Background AttachmentYou can define an attachment method for your background image (if selected). The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. Read more about this option here
- Background PositionYou can define a position for your background image (if selected). First value defines horizontal position and second vertical positioning. For example if you choose “center bottom” it means your background image inside this page section will be aligned center horizontally and bottom vertically. Usually this is not something you need to change unless you want to do something special.
- Background RepeatPretty intuitive right? Do you want your background image to be repeated or not. And if yes, do you want it to be repeated horizontally or vertically?
- Stretch Background Image to fit the container.Sometimes your background image is bigger or smaller your page sections. In this case part of image could be missed. You can eliminate this issue by activating this option. If this option is enabled then any image inside this page section will resized according to the size of page section.
Note: If you want to enable Parallax backgrounds, please set activate this option.
- Enable Parallax backgroundYou might be familiar with those 3D like background images that moves slower than your mouse scroll. This is an example. Activate this option to create a parallax background image. See this video tutorial for more details.
- 3D Speed FactorHow fast your parallax background image should be? Just set an amount here. The best option that works most of the time is 0.2. Please note that you should activate “Enable Parallax background” prior using this option.
- Background Video?If you prefer to have a video playing inside your page section then set this option to “Yes”. Read more about using video page sections here.
- Drop Top ShadowIf you enable this option, a light inset shadow will appear inside page section, below top border. (Figure 1-1)
- Select Section LayoutIf you want a sidebar inside your page section then choose weather you want it on the right or left. Sidebars are off by default in page sections. When you choose to have a sidebar then you will select which sidebar you want here on the next option.
- Custom SidebarHere you can choose which sidebar you want inside your page sections. This option will only work if you activate sidebar in previous option. You need to define a custom sidebar to have it inside this menu. Want to know how to define a sidebar? Read here
- Box Min HeightThis is the minimum height of your page section.
- Padding TopHow much blank space do you want between your content inside and the top edge of page section? Set it here. (Figure 1-1)
- Padding BottomLike the previous option you can choose how much space you want between your content and this time the bottom edge of your page section. (Figure 1-1)
- Margin BottomThis is the amount of space between your bottom of your page section and the next shortcode. Note unlike previous options this will add space outside of page section. (Figure 1-1) If you want your next content to start right after this page section without any space then you need to remove any margin and set it to “0”.
- Remove space before this sectionOnly if this page section is the First element on current page, enable this option to remove extra space between page header and this section. If you have any content before this page section it will be hidden if you enable this option.
- Remove Space after this sectionThis option removes extra space after this section. this option only works : when this shortcode is last one in page OR there is other page section after this shortcode.
- Section IDYou can user this field to give your page section a unique ID. please note that this should be used only once in a page. This is useful when creating one page sites.
- Visibility For devicesYou can make this element visible for a device range or make it hidden for a particular device.
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Now that you have created a page section you can Save it and back in page composer you can easily add any shortcodes inside this page section by clicking on plus icon inside the page section box in Page composer. (figure 1-2)
Custom Box
If you need a box container with its own background color/image to put some contents to, custom boxes is a good option. Unlike page sections custom boxes are not meant to divide your page into sections. they are just non full-width boxes inside your page without the complexity of page sections. After you create a custom box you can add any contents into it by clicking on plus icon in page composer just like page sections.
See some examples of custom boxes and their usage here.
- Border ColorApply a color to the border of your custom box. Leave it empty for border less boxes
- Background ColorYou can change the inner color of custom boxes here.
- Background ImageIf you prefer to insert an image inside your custom box instead of a simple color, use this option. Click on Upload button and select your image file and press “insert into page” button.
- Background PositionYou can define a position for your background image (if selected). First value defines horizontal position and second vertical positioning. For example if you choose “center bottom” it means your background image inside this page section will be aligned center horizontally and bottom vertically. Usually this is not something you need to change unless you want to do something special.
- Background RepeatPretty intuitive right? Do you want your background image to be repeated or not. And if yes, do you want it to be repeated horizontally or vertically?
- Stretch Background Image to fit the container.Sometimes your background image is bigger or smaller your custom box. In this case part of image could be missed. You can eliminate this issue by activating this option. If this option is enabled then any image inside this page section will resized according to the size of page section.
- Background PatternIf you want to apply a seamless pattern inside your custom box use this option. Of course these patterns are just simple image files and you can upload your own pattern image file using previous option but in case you want a quick solution this is what you need. Just choose your desired pattern by clicking on it. This option only works when background image field (previous option) is empty.
- Padding Top and BottomHow much blank space do you want between your content inside and the top and bottom edge of your custom box? Set it here.
- Padding Left and RightHow much blank space do you want between your content inside and the left and right edge of your custom box? Set it here.
- Margin BottomThis is the amount of space between your bottom of your custom box and the next shortcode. Note that unlike previous options this will add space outside of custom box. (Figure 1-1)
- Section Min HeightThis is the minimum height of your custom box.
- Visibility For devicesYou can make this element visible for a device range or make it hidden for a particular device.
- Viewport AnimationIf you like to give some nice introduction animation to this element, pick up one from 6 animations available in the list. Let’s say you choose “Scale up”. It means this shortcode will be hidden first when the page loads. However when the user scrolls down and reaches to the location of this shortcode it will become visible while scaling up on the screen.
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Content Box
In Jupiter there is a more interesting way to organize the content of page rather than using simple columns. Content box is a shortcode that allows you to wrap any content. It is similar to custom box shortcode. The difference is you can customize custom box background color/image while you can not do this in content boxes.
See some examples of content boxes here
- IconsThis icon will be shown on top left side of your content box. Or you can leave it blank if you prefer it without any icons. (Figure 3-1)
- Title HeadingThis goes on top of each content box. (Figure 3-1)
- Viewport AnimationIf you like to give some nice introduction animation to this element, pick up one from 6 animations available in the list. Let’s say you choose “Scale up”. It means this shortcode will be hidden first when the page loads. However when the user scrolls down and reaches to the location of this shortcode it will become visible while scaling up on the screen.
- Visibility For devicesYou can make this element visible for a device range or make it hidden for a particular device.
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Image
Allows you to insert any image files such as .jpg, .png, .svg, … into your page.
See some examples here
- Heading TitleThe title of your image on top. If you leave it blank there will be no title and title pattern (Figure 4-1)
- Uplaod Your imagehere you can upload and locate your image. A preview of your image will be shown up after you are done.
- Image WidthThe width of your image. This option will only work when you activate Image Cropping.
- Image HeightThe height of your image. This option will only work when you activate Image Cropping.
- Image CroppingActivating this option will crop the image based on width and height values you have set in previous options. If you deactivate this option the image will be placed in page by its original width and height values.
- LightboxActivating this option will link the image to its higher resolution which opens by user click. In other words if you have a big image which eats up your space in page you can activate light box and set small width and heights for your image. This will allow users to see the thumbnail of photo and click on it for higher resolution and more detail. See some samples here
- Custom Lightbox URLYou can use this field to add your custom lightbox URL to appear in pop up box. it can be image SRC, youtube URL.
- Lightbox Group relThis will group your lightbox enabled images.
- Image Frame StyleYou can choose a frame style for your image. See the samples here
- Image LinkIf you want to link your image to an specific URL, enter the URL here.
- TargetIf you have linked your image to a URL, here you can define decide weather you want it to be opened in same window or in a new window.
- Image Caption TitleEnter a caption for this image. (Figure 4-1)
- Image Caption DescriptionEnter a description for this image. (Figure 4-1)
- Image Caption LocationYou can set weather you want your image caption to be inside the image or outside below image. See some example here
- AlignAlign your image to left, right or center.
- Viewport AnimationIf you like to give some nice introduction animation to this element, pick up one from 6 animations available in the list. Let’s say you choose “Scale up”. It means this shortcode will be hidden first when the page loads. However when the user scrolls down and reaches to the location of this shortcode it will become visible while scaling up on the screen.
- Visibility For devicesYou can make this element visible for a device range or make it hidden for a particular device.
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Circle Image Frame
Clips any image in a circle.
See example here
- Heading TitleThe title of your image on top. If you leave it blank there will be no title and title pattern
- Uplaod Your imagehere you can upload and locate your image. A preview of your image will be shown up after you are done.
- Image DiameterThis is the diameter of the circle which surrounds your image. In other words, it is the width of your final circled image.
- Image LinkIf you want to link your image to an specific URL, enter the URL here.
- Viewport AnimationIf you like to give some nice introduction animation to this element, pick up one from 6 animations available in the list. Let’s say you choose “Scale up”. It means this shortcode will be hidden first when the page loads. However when the user scrolls down and reaches to the location of this shortcode it will become visible while scaling up on the screen.
- Visibility For devicesYou can make this element visible for a device range or make it hidden for a particular device.
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Moving Images
This shortcode makes your image animating on the screen. Once it is applied the image will float horizontally or vertically on screen for infinite amount of time.
See example here
- Uplaod Your imagehere you can upload and locate your image. A preview of your image will be shown up after you are done.
- Moving AxisThe axis which will be used to animate images. Horizontal or Vertical.
- AlignAlign your image to left, right or center.
- Title and AltFor SEO purposes you may need to fill out the title and alt property for this image
- LinkIf you want to link your image to an specific URL, enter the URL here.
- Viewport AnimationIf you like to give some nice introduction animation to this element, pick up one from 6 animations available in the list. Let’s say you choose “Scale up”. It means this shortcode will be hidden first when the page loads. However when the user scrolls down and reaches to the location of this shortcode it will become visible while scaling up on the screen.
- Visibility For devicesYou can make this element visible for a device range or make it hidden for a particular device.
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Image Gallery
This shortcode allows you to create a set of images into columns. You can decide how many columns you want.
See example here
- Heading TitleThe title of your image gallery on top. If you leave it blank there will be no title and title pattern.
- Add ImagesAdd your images here. Click on plus icon and start uploading and selecting your images.
- Custom LinksYou can link each of your image gallery items to a specific URL. Just remember to separate them with comma.
- How many Column?Decide how many columns you need to layout your image gallery.
- Image HeightsSets the height of images.
- Image Frame StyleYou can choose a frame style for your image. See the samples here
- Collection TitleThis title will be replaced with all captions you define in wordpress media. If you just want to give one title for all gallery images you can use this option. image alt tag will still follow the media section image alt field.
- Hover CaptionsThis option is disabled by default. Once it is enabled, image’s caption will be shown when mouse hovers the image.
- OrderDesignates the ascending or descending order of the ‘orderby’ parameter.
- OrderbySort retrieved gallery items by Menu order, post Id, …
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Mini Call out Box
This shortcode will create a tiny call out box good for some outstanding text between bunch of text.
See samples here
- TitleChoose a title for your mini call out box. (Figure 5-1)
- DescriptionA small description of what this call out box is for. (Figure 5-1)
- Button TextThis is a hyper linked text coming after the description. (Figure 5-1)
- Button URLThe URL of the above button
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Message Box
5 type of notification boxes. Comment, Warning, Confirm, Error and Info.
See samples here
- Write your message in this textarea.This is the text which goes inside the box.
- TypeThe type of box. Each type has its own icon and background color. Choose between Comment, Warning, Confirm, Error and Info.
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Icon box
This shortcode is one of the most popular ones. It allows you to create a text paragraph with a title and an icon on top. You can add links too. Icon box has many varieties and comes with multiple styles. Make sure to check samples.
See samples here
First make sure to check this image below. This image shows the different types of icon boxes.
- TitleChoose a title for your icon box. It goes just below Icon.
- Title Font SizeSet the size of text for Title.
- Title Font WeightChoose weather you want your title text to be bold or slim.
- DescriptionThis text goes just below title.
- Read More TextIn case you want a hyper linked text below your description, write something here.
- Read More URLIf you chose to have a “Read More Text” above, you need to set URL for that text.
- Select IconJust select your desired icon. You can search for a keyword or find it manually from the list.
- StyleAs mentioned above, you need to decide what type of icon box you want for your website. Choose from 3 basic options. Each option has its own parameters that you can set later on. (Figure 6-1)
(Click on any option here to see its tutorial)- Icon SizeThe size of your icon
- Rounded CircleIf you prefer your icon to be inside a circle container activate this option
- Icon LocationIcon can be placed either on the top or left of box container (Fig 6-1)
- Icon ColorChoose a color for your icon
- Title ColorChoose a color for the title of icon box
- Paragraph ColorChoose a color for the description of icon box
- Margin bottomThe amount of space between the bottom of icon box and top of any elements below
- Viewport AnimationIf you like to give some nice introduction animation to this element, pick up one from 6 animations available in the list. Let’s say you choose “Scale up”. It means this shortcode will be hidden first when the page loads. However when the user scrolls down and reaches to the location of this shortcode it will become visible while scaling up on the screen.
- Visibility For devicesYou can make this element visible for a device range or make it hidden for a particular device.
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Divider
Horizontal lines to divide the contents of a page. It comes with different styles and sizes.
See samples here
- StyleChoose among 8 styles for the look of divider. You can view the lives examples here
Padding divider: This is not a line like other dividers. This is actually a blank vertical space in case you want to divide your content by space rather than horizontal lines.
Go top with thin/thick line: This is a normal looking solid line with a link next to it. Users can click on this link to scroll to top. This is perfect for long pages.
- Divider WidthThis is the width of horizontal line. It is based on content width. It means if you choose One half it will consume half the size of page width.
- Padding Top / BottomHere you can set how much space you want for top and bottom of your divider.
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Table
Data tables for organizing your data and information.
See samples at the bottom of page here
- TitleThe title for your data
- StyleChoose between 2 styles. Check the styles at the bottom of this page
- Table HTML content.Here you need to insert your data table HTML code. Note that you need to switch to Text editor to start coding or paste your HTML codes.
- Visibility For devicesYou can make this element visible for a device range or make it hidden for a particular device.
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Skill meter
This is a useful shortcode to show how good you are at different set of skills.
See samples here
- TitleThe title for an individual skill meter.
- StyleChoose between 2 styles. Check the styles at the bottom of this page
- Table HTML content.Here you need to insert your data table HTML code. Note that you need to switch to Text editor to start coding or paste your HTML codes.
- Visibility For devicesYou can make this element visible for a device range or make it hidden for a particular device.
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Diagram Progress Bar
This is a circle type diagram with some cool animation on mouse over.
See sample here
- Heading TitleA generic title for your all diagrams
- Skill 1 : PercentThis is the first arc diagram. Enter the title here.
- Skill 1 : Arch ColorSelect a color for your arc diagram.
- Continue and fill out all as many as fields you need.
- Viewport AnimationIf you like to give some nice introduction animation to this element, pick up one from 6 animations available in the list. Let’s say you choose “Scale up”. It means this shortcode will be hidden first when the page loads. However when the user scrolls down and reaches to the location of this shortcode it will become visible while scaling up on the screen.
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Chart
Circle chart for showing progress or any other stats.
See sample here
- PercentEnter any numeric amount
- Bar ColorChoose the color of your circle bar. Note that this is the highlighted area. It means if you choose 70% for previous option, this color will apply to just 70% of the whole circle.
- Track ColorChoose the color of your circle track bar. Note that this is the color of whole circle no matter what percent you chose.
- Line WidthChoose the thickness of the circle bar.
- Bar SizeChoose the Diameter of the circle bar.
- ContentChoose the type of content inside the circle bar. It is percent by default meaning that your percentage will be showed up inside circle. If you choose icon your selected icon in next step will be showed up and if you choose custom text then any text you enter in next steps will be showed up.
- Choose IconChoose an icon for the inner content of circle. Note that this icon will be showed only if you set content to Icon in previous steps.
- Custom TextEnter any text for inner content of circle. Note that this will work only if you set content to Custom text in previous steps.
- DescriptionEnter a description text if you prefer to have a description below the chart.
- Viewport AnimationIf you like to give some nice introduction animation to this element, pick up one from 6 animations available in the list. Let’s say you choose “Scale up”. It means this shortcode will be hidden first when the page loads. However when the user scrolls down and reaches to the location of this shortcode it will become visible while scaling up on the screen.
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Process Builder
This shortcode allows you to create a process diagram step by step.
See sample here
- TitleChoose a title for the whole process diagram..
- How many step?Decide how many steps you want in your process diagram. This is simply the amount of those circles with title and description below.
- Container hover fill colorChoose a color for all of circle boxes. This circle shaped box will hold an icon inside.
- Step 1: IconChoose an icon to place inside the circle box. This should be related to the title of this step.
- Step 1: TitleChoose a title for the first step of your process. This title goes below the circle.
- Step 1: DescriptionEnter a description for the first step. This goes below the title.
- LinkAdd an optional link to the title here.
- Just follow the same pattern and fill out as many as steps you need.
News Tab
This shortcode allows you to create a tabbed content box. The difference with regular tabs is that the content of this box is dynamic. It will gather the news section of your website and put an overview of them inside this box. The news tab is perfect for a quick overview of your website news on front page for example. Learn how to add news here
See sample: The first box in the page here
- TitleChoose a title for the whole process diagram.
- Tab TitleA general title for your news tabbed box
- Extra class nameIf you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Paralax Backgrounds
In this section we will introduce Jupiter’s Prallax feature. In this theme you can have parallax backgrounds in theme’s main background (Body, Header, Banner, Page, Footer) Sections as well as in page section shortcode.
Theme Main Backgrounds
In order to have Parallax effect in one of (or all of them together) your backgrounds follow below steps :
- Add new page
- From “Jupiter Page Options” metabox click on Backgrounds tab to view its pane.
- Enable background for this page.
- Click on the section (from background selector) you want to have parallax effect.
- Upload your background image or select any of predefined patterns.
- Enable “Enable Parallax Effect” option as you can see in below screenshot.
- Save settings and view the page, you will see the movement of background image is 0.2 times faster than actual page scroll
Page Section Shortcode
If you would like to have page sections with parallax effect as you can see in our demo (http://artbees.net/themes/jupiter/homepage-parallax/) then follow below steps
- Add new page
- From page composer => elements => type “page section” to filter and click it to drop the module to the visual editor panel
- Click edit icon to modify its settings
- Choose your backgrounds
- As you can see in below screenshot you will need to enable Parallax effect, choose your speed factor (eg : 0.2).
- If you are using large images that are not repeatable select fixed in “Background Attachement” option to avoid repeating it while scrolling the page.
- once you finished save changes and view your changes.
- Please note that parallax effect is very flexible and sometimes you will need extra effor to get it look and work perfect. however you cant get it done, you can ask our support staff to help you.
Woocommerce
One of great features of Jupiter is that you can make an online shop with it.
Jupiter is fully compatible with latest version of Woocommerce Plugin. We added required stylings to fit the design, Checkout section in header toolbar, and all required confiq codes to make it seamless with Jupiter. If you dont need Woocommerce simply dont install it and all the features, codes and anything required for woocommerce will not be loaded and interfered. Vice versa, if you need to set up woocommerce just install woocommerce like you do for other plugins and thats all about it. you dont need to do anything else. There are couple of options in Masterkey Settings > Advacned > Woocommerce and a predefined widget area for shop archive template that you will need to consider using them.
Please be informed that we do not give support to any third party plugin’s questions and issues. We can only afford to answer simple usage questions or issues related to incompatibility with the theme. this exception is for only our supported Plugins (Layerslider, Revolution slider, Contact form 7 and Woocommerce).
Contact Form 7
Good News for those of you who is familiar with great plugin Contact form 7 : We have covered all styling required to build your forms without worrying about its appearance. You dont need to do anything in extra just intall Contact Form 7 and Jupiter will take over the rest. we will dequeue its styling and add our own customised version to make it work seamlessly with Jupiter.
If you are not familiair with this plugin check out below resources:
Please be informed that we do not give support to any third party plugin’s questions and issues. We can only afford to answer simple usage questions or issues related to incompatibility with the theme. this exception is for only our supported Plugins (Layerslider, Revolution slider, Contact form 7 and Woocommerce).
Tips and Tricks
Jupiter Comes with a powerful backend that allows for a heavy style and customization, But often times this is not enough for some users and they want to modify and add their css rules. In this case we highly recommend you to use child theme. It will give you the power to modify theme in any manner you like without missing any of our theme updates. how to make a child theme? There are many tutorials and if you google will sure find many of them useful. There are some occasions you need our help to find the best way to change an specific css rule, for sure we will help you in our help desk to get the right snippet code.
However I recommend you to use some Inspect element to find the exact class selector with its rules and try to recoding to fit your needs.
What is Inspect Element?
All Browsers has a handy tool that if you right-click on window you will see it. please see below screenshot
So what is next?
once you activate “Inspect Element” in your browser you will see a panel like below. matching with numbers (in screenshot) follow below steps :
- Click on zoom icon to activate click to inspect feature.
- Now you can click on the element you need to alter its CSS rules.
- Once you clicked you will see its HTML content in the left panel like below, so you will make sure you have inpected the right element (based on the selector name)
- On the right Hand you should see the Class selecor name as well as its rules like below.
So what should I do to override the rules?
You have 2 main appraches :
- If there are just few modifications then use our custom css option. you can read about it in “Custom CSS & JS” section in this documentation.
- If you decided to go beyund simple changes then we highly recommend to use a child theme.
How to Create One page website
With Jupiter you can create either standard multi page websites or One page scroll websites. This article will show you how to create one page scroll page by jupiter.
You can view a sample one page scroll website we have already created. Take a look and get inspired if you like. Click here
You can also download Jupiter’s demo content and get a template for one page scroll.
Craeting one page scroll is very easy. In fact you just create a normal page using any shortcodes and contents you like. However the difference is you need your navigation menu items to be linked up with in-page contents. That is a very easy process. Follow these instruction:
- Add a new page and enter a title for your page
- Switch to Page Composer by clicking on Page composer button
- Start adding contents now. Feel free to insert anything you want. However note that you need to give each section a name.
For example let’s say we want to add a Contact section to our page. We normally start off by adding a Row or Page section. To do this click on Add Elements or Add Row button on the top of page composer (Figure 1-1).
- Once it is placed on page, click on Edit button (Figure 1-1).
- Now inside the edit options windows you can give an ID name for your sections. Find a text field called Row ID in Rows (Figure 1-2) or Section ID in page sections (Figure 1-3) Give them any name you like. For example a good name for contact section could be “contact” or “contactUs”. Just avoid spaces in your characters.
- After you gave a name to your section continue adding contents to your section. Repeat the above steps for every new section you have. For example when you finish with “contact” section and want to start adding “portfolio” you need to add a Row or page section and give it a new ID name such as “portfolio”.
- When you finish creating contents Save your page by pressing “Publish” or “Update” button on the right side
- Now it is time to create your menu. Go to Appearance > Menus (Figure 1-4)
- Create a new menu and enter a name for your menu (Figure 1-4)
- Open Links on the left side menu (Figure 1-4)
- In URL field Enter the name you just added to your section back in step 5 preceding by a hash tag prefix. For example for portfolio section if you gave it a name like “Portfolio” then you have to enter #Portfolio (Figure 1-4)
- In Link text field you can enter any names but remember that it is better to be related to you URL above. So if you have entered #Portfolio above in URL then you can enter Portfolio here in Link text field. Please note that this text will be showed up on your navigation bar. (Figure 1-4)
Translating WordPress Theme
Jupiter is localised and you can easily translate it to any language you like. Please note that you font family you are using in theme should support the language’s special characters. so you will need to use a fontface that supports it.
Configure WordPress
Before translating your theme, you’ll need to make sure WordPress is setup correctly with your locale. Open wp-config.php from your wordpress installation root folder and modify the line below, or add it if it is missing. Complete lists of codes can be found at (country codes) and (language codes).
For example you will need to modify as below for Portuguese Language.
define ('WPLANG', 'pt_BR');
Installing a Plugin
Now you’re ready to translate your theme. The easiest way to do this is by installing the Codestyling Localization plugin. Install and activate the plugin and go to Tools => Localization (shown in your language). Read Plugin documentation on how to use it to translate the theme. Jupiter’s Textdomain is “mk_framework”.
Handling Theme Updates
If you update your theme to a new version which has an updated language file, you’ll need to rescan your theme using the plugin and then translate the new strings. Find your theme in Codestyling Localization plugin and click the Rescan link to have the plugin update the pot file.
After you have rescanned your theme, click Edit to translate any new strings the plugin found when rescanning. Remember to generate a new MO file after you have translated your new strings.
My Contact Form not working!
If you have used contact form shortcode or widget, set up the correct email address (to be sent) and you do not recieve any emails after all your attempts then read on about some tips that may help.
Try getting the WordPress wp_mail function to work properly
WordPress sends email using wp_mail, a function that for all practical purposes operates like php’s mail. It is a way for your site to send email via a PHP script rather than other ways like SMTP.
In order to determine what your problems might be, it is important to understand the potential email configuration requirements. Some issues could be server-based, others could be not understanding restrictions by your host.
In some cases even mail() function is disabled by default and you should set it to “ON” from php configuration file (php.ini) or ask hsoting provider to enable it for you.
Valid email headers
Some hosts require that any server-side email script send with a “from” address that is an actual email address. WordPress by default sends email from a generic address “wordpress@yourdomain.com”. If your host has a requirement that you send from a valid email address and you don’t have a wordpress@yourdomain.com email configured, then your site can’t send email. for example wordpress@artbees.net should be configured in your mail server in order to pass through this policy
Are you on a shared server?
In general, on shared hosting, the email process is shared, too. If another user on your host has a script that is tying up the email server, that is going to effect your site (and therefore your email script).
For those running WordPress on shared hosts, the issue most often is that email is delayed in some case for a long period. But it is important to know if this is something you are likely to be effected by.
What about spam filters?
Sometimes, the issue is that certain messages are simply blocked because of an addressing issue. Emails coming into one of the major email provider domains (hotmail, aol, gmail, yahoo) can get flagged for a number of reasons.
If email from wp_mail is not getting delivered, you may need to consider is it not getting through to everyone? Or is this limited to certain domains? Getting blocked or blacklisted by a specific host could be an issue.
What is the best way to avoid script base mailing system?
The simplest way around all of this is to use a valid email account sent through an SMTP server. SMTP stands for Simple Mail Transfer Protocol and sending through an SMTP server simply means you have set up a real email address on your system and you are allowing the web based script (wp_mail) to connect to the server with appropriate account credentials. This will satisfy most hosting requirements and also help you avoid system bottlenecks on shared hosting.
There are many plugins that forces wp_mail function use an SMTP for delivering emails. We suggest below solutions :