<b>Jupiter</b> theme is the fastest, easiest way to build a website.
			









	
		
PURCHASE NOW



	

	

		

	





	


				

	


    
Multi Layered Customization
Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim.


		Learn more		


    









	


    
Fast and Light Weight
Phasellus dolor enim, faucibus egestas scelerisque hendrerit, faucibus egestas aliquet sed lorem.


		Learn more		


    









	


    
Retina Display Ready
Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim.


		Learn more		


    









	


    
Extensive Documantation
Phasellus dolor enim, faucibus egestas scelerisque hendrerit, faucibus egestas aliquet sed lorem.


		Learn more		


    







	


				

	


			

	




			

	



	


				

		    
Words by clients


		

		

	

		
Pellentesque et pulvinar enim. Quisque at tempor ligula. Maecenas augue ante, euismod vitae egestas sit amet, accumsan eu nulla. Nullam tempor lectus a ligula lobortis pretium. Donec ut purus sed tortor malesuada venenatis eget eget lorem.
	
	

	

Andy			
				Company
			
	

	

		
Quisque at tempor ligula. Maecenas augue ante, euismod vitae egestas sit amet, accumsan eu nulla. Nullam tempor lectus a ligula lobortis pretium. Donec ut purus sed tortor malesuada venenatis eget eget lorem. Pellentesque et pulvinar enim.
	
	

	

Maecenas S.			
				Company
			
	

	

		
Pellentesque et pulvinar enim. Quisque at tempor ligula. Donec ut purus sed tortor malesuada venenatis eget eget lorem Maecenas augue ante, euismod vitae egestas sit amet, accumsan eu nulla. Nullam tempor lectus a ligula lobortis pretium.
	
	

	

Quisque tempor			
				Company
			
	
	
	





	


		    
Clients we work with

	


				    

			    			    

			    		    
				    

			    			    

			    		    
				    

			    			    

			    		    
				    

			    			    

			    		    
				    

			    			    

			    		    
				    

			    			    

			    		    
				    

			    			    

			    		    
				    

			    			    

			    		    
				    

			    			    

			    		    
				    

			    			    

			    		    
		
	


	


				

	


			

	



	


	


			
			

				




				
				
	
	

		

									

		
	

			

			
        

            


	


    


	

     Fast and Light


Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit.


		Learn more		


	





    









	


    


	

     Amazing Page Builder


Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit.


		Learn more		


	





    









	


    


	

     Unlimited Homepage Layout


Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit.


		Learn more		


	





    








            

        


			
			
			
		

	

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

1. For this method you should first install Theme Upgrades Tool
2. Unzip the file you just downloaded from ThemeForest and locate the WordPress Theme. (eg. Jupiter.zip)
3. Log into your WordPress Dashboard.
4. Click on “Appearance > Themes”.
5. Still within the Themes section, on header tab, click on “Install Themes”, then on header second tab click “Upload”.
6. Click “Browse…” and locate the new theme file. (eg. Jupiter.zip)
7. In the “Upgrade existing theme?” option choose “Yes” from the dropdown list.
8. Click “Install Now”.
9. Click “Activate”.

Method Two

1. Login into your Themeforest account and go to downloads (Dashboad > downloads)
2. Download the theme into your computer
3. Install an FTP program (Filezilla is free)
4. Retrieve your FTP login information from your hosting admin panel and login into your hosting via FTP
5. Unzip the item main file
6. 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.
7. drag and drop theme main folder into your FTP program with the destination : “YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/”
8. FTP program will give a warning that there is an existing with the same directory name, choose replace all.
9. 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.

Theme Navigations

This Theme uses wordpress built-in menus feature which can be found in your wordpress dashboard > appearance > menus. In this section we will go by explaining every detail regarding usage of below tools as well as some other cool features we added such as making a mega menu and using 1500+ icons for your Menu items. We pointed sections with numbers and while explaining we may ask your attention to the screenshot for clear undrestanding.

From the ‘Appearance’ menu on the left-hand side of the Dashboard, select the ‘Menus’ option to bring up the Menu Editor and start implementing below steps.

1. Click on plus icon to add new menu (Refer to No 1).
2. You should define a name to your menu (eg: main menu, footer menu)
3. Click the Create Menu button.
4. Your new custom menu has now been defined and you are ready to drag and drop menu items.

Creating your menu

From the ‘Appearance’ menu on the left-hand side of the Dashboard, select the ‘Menus’ option to bring up the Menu Editor and start implementing below steps.

1. Click on plus icon to add new menu (Refer to No 1).
2. You should define a name to your menu (eg: main menu, footer menu)
3. Click the Create Menu button.
4. Your new custom menu has now been defined and you are ready to drag and drop menu items.

Adding Items to a Menu

1. The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Posts are hidden by default. If you have’nt spot it yet, its on wordpress backend header right-side. if you click on “Screen Options” it will slide down. so you can easily check items to hide or show.
2. Refer to No 2,3,4,5. These panes will alow you to drop any sort of item to your menu. for example No 2 will let you make custom links, the rest are your pages, posts, categories and so on.
3. The general technic of these panes are pretty simple, select the item and click on “Add to Menu” button. after a moment you will see the item appeared on your menu white space.
4. Please remember you should always save your changes by clicking on “Save Menu” which can be found on header and footer right section.

Deleting a Menu Item

1. Locate the menu item that you want to remove in the menu editor window
2. Click on the arrow icon in the top right-hand corner of the menu item/box to expand it.
3. Click on the Remove link. The menu item/box will be immediately removed.
4. Click the Save Menu button to save your changes.

Customising Menu Items

1. Locate the menu item that you want to customise in the menu editor window
2. click on arrow icon in the top right-hand and exapnd.
3. The Navigation Label: This field specifies the title of the item on your custom menu. This is what your visitors will see when they visit your site/blog.
4. The Title Attribute This field specifies the Alternative (‘Alt’) text for the menu item. This text will be displayed when a user’s mouse hovers over a menu item.
5. Refer to No 6 in screenshot : Jupiter gives you this ability to add icon to each menu item. to add just click on “Add Icon”, a Pop up Lightbox will appear. choose your icon and click on “Use Icon”. To remove the icon simply click on “Remove Icon” button. (please note that this feature is only limited to your Site Main Navigation location).

Creating Multi-level Menus

When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right.

The WordPress menu editor allows you to create multi-level menus using a simple ‘drag and drop’ interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.

To make one menu item a subordinate of another, you need to position the ‘child’ underneath its ‘parent’ and then drag it slightly to the right.

1. Position the mouse over the ‘child’ menu item.
2. Whilst holding the left mouse button, drag it to the right.
3. Release the mouse button.
4. Repeat these steps for each sub-menu item.
5. Click the Save Menu button in the Menu Editor to save your changes.

Creating Mega Menus

If you have decided to make any of your Main Navigation items a Mega Menu like the same you can see in demo site for Shortcodes and Pages items, you should follow below steps :

1. Add a an item to the menu editor.
2. Click on arrow icon in the top right-hand and exapnd.
3. Check the “Make this Item Mega Menu?” checkbox to convert this item to a mega menu
4. You can add up to 6 childs to this parent item.
5. Each of these direct childs will define a column in mega menu and they will appear as a heading in each column. if you dont want a heading title, the procceed with adding a dash (-) in “Navigation Label” field. Dont leave this field blank as wordpress will completely remove them from menu editor.
6. Any grand child you add for each of direct childs will play row roles.
7. Onec you done, save settings.
8. Remember you can always convert mega menus back to a traditional multi-level menu by just visiting the parent item’s options and remove the check from “Make this Item Mega Menu?” field.

Adding Your Menu to Your Site

Please refer to No 7 in screenshot. Jupiter supports 4 theme locations. if you have created your navigations, in order to display them in front-end you should assign your menus to specified locations accordingly.

1. Header Toolbar Navigation : Will appear in header toolbar left-hand. this menu does not support multi level menu.
2. Language Navigation : If you have a multilingual website this menu will be handy for you. This menu will appear on header toolabr left-hand
3. Main Navigation
4. Footer Navigation : Will appear on sub footer right-hand.

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 :

1. 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.
2. Main Navigation. General sections which will direct you to sub levels
3. Sub Level Navigations. will get you just right there faster by 2 clicks
4. Settings Pane area that based on your navigation moves will change accordingly.
5. Save settings that will save ALL changes you have made in masterkey, not only the pane you are currently viewing.
6. 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:

1. Go to choose a font family
2. 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 :

1. Visit http://www.fontsquirrel.com/tools/webfont-generator
2. Click on “add fonts” and browse the font you need to import.
3. Check the agreement that you have permission to use it on your website.
4. Then hit the “download the kit” button
5. A zip file will be downloaded, unzip the file and open the folder.
6. 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.
7. Once you have done with above steps, find stylesheet.css file located on the same folder you just downloaded.
8. 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)
9. 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 :

1. Go to Appearance > Widgets.
2. Choose a Widget and drag it to the sidebar where you wish it to appear. The widget areas designated as No 1
3. Once you dropped the widget to widget areas, WordPress automatically updates the Theme and it will appear in its area.
4. 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.
5. 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.
6. To arrange the Widgets within the sidebar or Widget area, click and drag it into place.
7. To customize the Widget features, click the down arrow in the upper right corner to expand the Widget’s interface.
8. To save the Widget’s customization, click Save.
9. 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 :

1. Go to Masterkey settings > General > Custom sidebars
2. 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)
3. Click on “create” button. (No 2)
4. The list of created sidebars will appear below textfield as designated with No 3 in below screenshot. you can delete them anytime you need
5. Save settings
6. Now go to Appearance > Widgets.
7. 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.
8. Same like predefined widget areas you can drag and drop widgets into custom sidebars.
9. 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.
10. Choose your custom sidebar from the selectbox.
11. 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).

1. Go to Masterkey Settings > Advanced > Export options
2. click on the textarea once, whole content will be selected.
3. copy and paste it to a text file.
4. On your new installation you paste the saved content in Masterkey Settings > Advanced > Import options
5. Click on “Import” button
6. 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 :

1. Add New Page
2. Build your homepage content same like building other pages.
3. you may consider checking its page options, for example : page layout, slideshows, Backgrounds.
4. Save the page.
5. From WordPress Left Hand sidebar navigate to Settings > Reading.
6. You will see a page like below.
7. Change your Front page displays to “A static page (select below)”
8. From “Front page:” selectbox choose the page you just created
9. 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.

1. From WordPress Admin Left hand Sidebar > Blog > Add New Post
2. As you can see in below screenshots you should follow below steps to create a new post
3. Jupiter has 4 post type : Image, Video, Sound, Portfolio.
4. Once you done with creating new posts procceed to add a new page.
5. Click on Page Composer Button to switch to visual mode.
6. 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.
7. then save the page
8. However you can modify its settings such as its style and so on right from the module editor section
9. as shown in below screenshot click edit. you will see the Blog Edit options.
10. Once you done editing click save.
11. 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 :

1. Add a new page.
2. Click on Page Composer Button to switch to visual mode.
3. 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.
4. then save the page
5. However you can modify its settings right from the module editor section
6. To do so click on edit icon on the right side of portfolio shortcode module.
7. Once you done editing click save.
8. 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:

1. Add a new page.
2. Click on Page Composer Button to switch to visual mode.
3. 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.
4. then save the page
5. However you can modify its settings such as its style and so on right from the module editor section
6. To do so click on edit icon on the right side of FAQ shortcode module.
7. Once you done editing click save.
8. 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 :

1. Add a new page.
2. Click on Page Composer Button to switch to visual mode.
3. 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.
4. then save the page
5. However you can modify its settings right from the module editor section
6. To do so click on edit icon on the right side of News shortcode module.
7. Once you done editing click save.
8. 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:

1. Add a new page.
2. Click on Page Composer Button to switch to visual mode.
3. 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.
4. then save the page
5. However you can modify its settings such as its style (simple or Boxed) right from the module editor section
6. To do so click on edit icon on the right side of Employees shortcode module.
7. Once you done editing click save.
8. 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:

1. Add a new page.
2. Click on Page Composer Button to switch to visual mode.
3. 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.
4. 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.
5. Once you done editing click save.
6. 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.

1. Add a new page.
2. Click on Page Composer Button to switch to visual mode.
3. 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.
4. 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.
5. Once you done editing click save.
6. 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.

1. Add a new page.
2. Click on Page Composer Button to switch to visual mode.
3. 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.
4. 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.
5. Once you done editing click save.
6. 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.

1. 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
2. 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.
3. Edge Slider supports Image and Video backgrounds. please refer to next section for video type. we will continue with image type in this section.
4. 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.
5. 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.
6. 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.
7. 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).
8. Caption title and description! 🙂
9. Caption can be used in dark and light backgrounds. May you consider choosing its skin color from this option.
10. You can have 2 buttons in each slide. Button Text and URL including http://
11. 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

1. Preview image is important until the video load the slide will not be empty.
2. 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.
3. 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 :

1. Enable slideshow for this page
2. Choose Edge Slideshow from the options.
3. You can choose specific slideshow. if left blank, all slideshows will be added
4. 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.

1. Once you add edge slideshow shortcode into the page composer visual convas, edit parent row and set its full width option as enabled.
2. 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

1. Add a new page.
2. Click on Page Composer Button to switch to visual mode.
3. 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.
4. 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.
5. Once you done editing click save.
6. Now you can view the page to see your Slideshow.

Adding Flexslider into Header Banner

1. Add a new page.
2. Find Jupiter Page Option Metabox below the wordpress editor.
3. Click on the third tab to view slideshow pane
4. Turn on the toggle for the option > Enable Slidehsow For this page
5. Select your slideshow as Flexslider
6. New set of options will appear, now you can choose your slides and modify defualt settings.
7. Once you done editing, save page and view the page.
8. You will see your slideshow below header > inside header banner.
9. 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.

1. Add a new page.
2. Find Jupiter Page Option Metabox below the wordpress editor.
3. Click on the third tab to view slideshow pane
4. Turn on the toggle for the option > Enable Slidehsow For this page
5. Select your slideshow as iCarousel
6. New set of options will appear, now you can choose your slides and modify defualt settings.
7. Once you done editing, save page and view the page.
8. You will see your slideshow below header > inside header banner.
9. 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 :

1. Its a custom post type
2. You can add it to any page
3. You can reuse banner templates throughout of your website

Below are the steps:

1. From WordPress Admin > Left Sidebar > Banner Builder > Add new Banner
2. Using our Page composer start making your content. Alternatively you can use our demo site banners if you dont want to start from scratch.
3. Once you done with your banner or banners (you can slide banners as well)
4. Add new page
5. Below WordPress editor panel you will find “Jupiter Page Options” Metabox. click on slideshow tab to view its pane.
6. Enable slideshow for this page
7. select “Banner Builder” as your slideshow
8. 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.
9. 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).
10. once you done click save and view the page
11. 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 :

1. Open Main Item zip file and unzip Plugins.zip file.
2. You will find LayerSlider.zip file.
3. Go to WordPress Dashboard > Left sidebar > Plugins > Add New
4. Click on upload from top Navigation.
5. Browse LayerSlider.zip file you just found in plugins folder.
6. Install now.
7. 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

1. Add New Page
2. From Jupiter Page Option Metabox click on Slideshow tab to view its pane content
3. Enable slideshow for this page
4. Choose Layer Slider from the select box
5. New options will appear, choose your slideshow (with the name you have give it)

Adding Slider as a shortcode

1. Add a new page.
2. Click on Page Composer Button to switch to visual mode.
3. 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.
4. Click on edit icon on the right side of Layer Slider shortcode module.
5. 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 :

1. Open Main Item zip file and unzip Plugins.zip file.
2. You will find RevSlider.zip file.
3. Go to WordPress Dashboard > Left sidebar > Plugins > Add New
4. Click on upload from top Navigation.
5. Browse RevSlider.zip file you just found in plugins folder.
6. Install now.
7. 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

1. Add New Page
2. From Jupiter Page Option Metabox click on Slideshow tab to view its pane content
3. Enable slideshow for this page
4. Choose Revolution Slider from the select box
5. New options will appear, choose your slideshow (with the name you have give it)

Adding Slider as a shortcode

1. Add a new page.
2. Click on Page Composer Button to switch to visual mode.
3. 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.
4. Click on edit icon on the right side of Reolution Slider shortcode module.
5. 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.

1. From WordPress Dashboard go over Banner Builder Menu => Add new Banner.
2. Go ahead and give it a title.
3. Switch to Classic mode in WordPress Editor and paste below sample data.
4. 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
5. Save new Banner Slide settings
6. From WordPress Dashboard go over Pages => Add New Page
7. Give it a title and then scroll down below WordPress Editor. Find “Jupiter Page Options” metabox(see below screenshot).
8. 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.

1. Once you finished uploading your videos move to the Slideshow tabs from the same section.
2. Enable Slideshow from this page and choose Banner Builder.
3. From the option “Choose your Banner or Banners” find the banner slide that you just added.
4. Set “Min Height” 200 and “Top & Bottom Padding” 30
5. 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 :

1. The button to switch between classic and visual mode. So you can modify generated shortcodes manually if you know what you are doing.
2. 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.
3. Adds Row. This is a column container. This shortcode does nothing other than holding controlling columns and elements.
4. 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.
5. 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 :

1. Delete button to delete the row and the all elements inside it.
2. Clone Button to dublicate the row and all its columns and elements
3. Edit button to give it custom class name and enable fullwidth mode.
4. Dragger button to move vertical wise.
5. Layout section to divide the row into differnt column width combinations.
6. Column Edit button inside this row
7. 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.

1. Delete Button to delete the shortcode
2. Clone button
3. Edit button to view all of this shortcode options
4. 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.

1. Border Top and Bottom ColorYou can change page section’s Top and Bottom Color. (Figure 1-1)
2. Box Background ColorYou can change the inner color of page sections here. (Figure 1-1)
3. 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.
4. 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.
5. 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
6. 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.
7. 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?
8. 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.

9. 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.
10. 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.
11. 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.
12. Drop Top ShadowIf you enable this option, a light inset shadow will appear inside page section, below top border. (Figure 1-1)
13. 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.
14. 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
15. Box Min HeightThis is the minimum height of your page section.
16. 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)
17. 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)
18. 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”.
19. 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.
20. 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.
21. 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.
22. Visibility For devicesYou can make this element visible for a device range or make it hidden for a particular device.
23. 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)

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

1. 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)
2. Title HeadingThis goes on top of each content box. (Figure 3-1)
3. 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.
4. Visibility For devicesYou can make this element visible for a device range or make it hidden for a particular device.
5. 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

1. Heading TitleThe title of your image on top. If you leave it blank there will be no title and title pattern (Figure 4-1)
2. Uplaod Your imagehere you can upload and locate your image. A preview of your image will be shown up after you are done.
3. Image WidthThe width of your image. This option will only work when you activate Image Cropping.
4. Image HeightThe height of your image. This option will only work when you activate Image Cropping.
5. 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.
6. 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
7. 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.
8. Lightbox Group relThis will group your lightbox enabled images.
9. Image Frame StyleYou can choose a frame style for your image. See the samples here
10. Image LinkIf you want to link your image to an specific URL, enter the URL here.
11. 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.
12. Image Caption TitleEnter a caption for this image. (Figure 4-1)
13. Image Caption DescriptionEnter a description for this image. (Figure 4-1)
14. Image Caption LocationYou can set weather you want your image caption to be inside the image or outside below image. See some example here
15. AlignAlign your image to left, right or center.
16. 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.
17. Visibility For devicesYou can make this element visible for a device range or make it hidden for a particular device.
18. 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

1. TitleChoose a title for your mini call out box. (Figure 5-1)
2. DescriptionA small description of what this call out box is for. (Figure 5-1)
3. Button TextThis is a hyper linked text coming after the description. (Figure 5-1)
4. Button URLThe URL of the above button
5. 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.

1. TitleChoose a title for your icon box. It goes just below Icon.
2. Title Font SizeSet the size of text for Title.
3. Title Font WeightChoose weather you want your title text to be bold or slim.
4. DescriptionThis text goes just below title.
5. Read More TextIn case you want a hyper linked text below your description, write something here.
6. Read More URLIf you chose to have a “Read More Text” above, you need to set URL for that text.
7. Select IconJust select your desired icon. You can search for a keyword or find it manually from the list.
8. 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)
   • Simple Minimal
   • Simple Ultimate
   • Boxed
   1. Icon SizeThe size of your icon
   2. Rounded CircleIf you prefer your icon to be inside a circle container activate this option
   3. Icon LocationIcon can be placed either on the top or left of box container (Fig 6-1)
   4. Icon ColorChoose a color for your icon
   5. Title ColorChoose a color for the title of icon box
   6. Paragraph ColorChoose a color for the description of icon box
   7. Margin bottomThe amount of space between the bottom of icon box and top of any elements below
9. 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.
10. Visibility For devicesYou can make this element visible for a device range or make it hidden for a particular device.
11. 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.

Custom Sidebar

If you are working with WordPress you might be familiar with WordPress famous sidebars. WordPress has its own built-in sidebars which can hold widgets. However custom sidebars are your very own sidebars which can be placed everywhere between contents and it won’t mess up other contents. You can have as many as sidebars you like in a page each filled with different widgets.

For a better understanding take a look at this sample page. As you see the first sub menu on the right is placed on a sidebar. This is a custom sidebar which is placed in the first row of the page. Now note that the rest of page has no left sidebar and it is free to put any contents. However if you choose to use WordPress sidebars this is not possible and you will have a sidebar that takes up a whole space all along the left or right side of your page.

What this shortcode does is to insert a pre-defined custom sidebar in a page. To learn how to define custom sidebars click here

Look at the image below. This is how you can use this shortcode to put a custom sidebar similar to previous example.

1. Custom SidebarIn this menu you need to select a custom sidebar which you have created before. Learn how to create a sidebar.
2. 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 :

1. Add new page
2. From “Jupiter Page Options” metabox click on Backgrounds tab to view its pane.
3. Enable background for this page.
4. Click on the section (from background selector) you want to have parallax effect.
5. Upload your background image or select any of predefined patterns.
6. Enable “Enable Parallax Effect” option as you can see in below screenshot.
7. 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

1. Add new page
2. From page composer => elements => type “page section” to filter and click it to drop the module to the visual editor panel
3. Click edit icon to modify its settings
4. Choose your backgrounds
5. As you can see in below screenshot you will need to enable Parallax effect, choose your speed factor (eg : 0.2).
6. If you are using large images that are not repeatable select fixed in “Background Attachement” option to avoid repeating it while scrolling the page.
7. once you finished save changes and view your changes.
8. 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 :

1. Click on zoom icon to activate click to inspect feature.
2. Now you can click on the element you need to alter its CSS rules.
3. 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)
4. 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:

1. Add a new page and enter a title for your page
2. Switch to Page Composer by clicking on Page composer button
3. 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).

1. Once it is placed on page, click on Edit button (Figure 1-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.

1. 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”.
2. When you finish creating contents Save your page by pressing “Publish” or “Update” button on the right side
3. Now it is time to create your menu. Go to Appearance > Menus (Figure 1-4)
4. Create a new menu and enter a name for your menu (Figure 1-4)
5. Open Links on the left side menu (Figure 1-4)
6. 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)
7. 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)

• Click on “Add to Menu” button
• Repeat steps 10, 11 and 12 for each section
• Now Save your menu by clicking on the Save Menu button on the right side
• You are almost there! You just need to make your menu appears in the right location. To do this Go to Manage Locations on top of the page (Figure 1-5)
• Under the Theme Location, Assign your newly created menu to Main Navigation. Just select your menu name in the menu and Save Changes (Figure 1-5)
• That’s it! Now you have your one page scroll website up and running.

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 :