1.5 Theme Installation

1.5.1 Getting theme package from themeforest

1. At first, after purchasing this theme, please download the package from Themeforest. All you need to do that, is move your mouse over your login name in right top corner (of course after you`re logged in Themeforest) and then click Download. Here you will find all the items that you have purchased. It looks exactly just as the diagram next to.

2. In the next step click the Download > Main File(s) button next to designthemes theme and save the package on your computer.

3. In that package you can find things like documentation, license, zipped file with theme files and folder with theme files called fitnesszone and fitnesszone-child. Please unpack the whole package after downloading it from Themeforest.

1.5.2 Thing to keeps in mind

• Installing the theme can be done two ways. You can upload the theme ZIP file using the built in WordPress theme upload, or copy the files through an FTP client.
• Be sure to extract the file "fitnesszone.zip" from the ThemeForest download before uploading. Using the ThemeForest ZIP file directly will result in a "Missing Style Sheet" error.
• Using WordPress Theme Upload

1. Uploading by FTP
2. Activate the theme

• Once the theme is uploaded, activate it from Appearance > Themes by clicking the "Activate".
• After you have activated the theme. You need to install the plugins that are required and recommended to use with the theme.

1.5.3. Theme Installation via WordPress

Follow the steps below to install the theme via WordPress.

1. Navigate to Appearance > Themes.
2. Click 'Add New' button near 'Themes' title.
3. Now 'Add Themes' page will be loaded with 'Upload Theme' button hit on it.
4. Now navigate to find the "Fitness Zone Theme.zip" file on your computer ( "Fitness Zone Theme.zip" will be found inside "fitnesszone.zip" ) and click "Install Now"
5. Once uploaded go to Appearance > Themes and activate it.
6. Then you will see a notification message to activate the required & recommended plugins: 'DesignThemes Core Features Plugin', 'Responsive Styled Google Maps', 'Contact Form 7', 'LayerSlider WP' and 'Revolution Slider'.
7. Once required plugins are activated, navigate to Settings > Permalinks select 'Post name' in 'Common Settings' tab and save it.

1.3.2 Theme Installation via FTP

Follow the steps below to install via FTP.

1. Log into your hosting server space using FTP software.
2. Unzip the "Fitness Zone Theme.zip" ( "fitnesszone.zip" will be found inside "fitnesszone.zip" ) file and ONLY use the extracted 'Fitness Zone Theme'folder.
3. Upload the extracted 'Fitness Zone Theme' folder into wp-content / themes folder.
4. Activate the newly installed theme in Appearance > Themes.
5. Then you will see a notification message to activate the required & recommended plugins: 'DesignThemes Core Features Plugin', 'Responsive Styled Google Maps', 'Contact Form 7', 'LayerSlider WP' and 'Revolution Slider'.
6. Once required plugins are activated, navigate to Settings > Permalinks select 'Post name' in 'Common Settings' tab and save it.

Please take a look at structure of the fitnesszone.zip archive you got after purchasing.

1.6 Folder Structure

• style.css - main style.css
• responsive.css - makes the template as responsive
• The rtl.css - makes the template as Right To Left(rtl) Format
• The css folder - contains the css for all major browsers & for the font awesome. - ( Please ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours. )
• The images folder - contains all the images that are used in the stylesheets for the layout purpose & it has subfolder named post-images , which contains images used in post, pages and other areas
• The js folder - contains javascript files & plugins ( Which includes)
  1. Easing (easing.js)
  2. Modernizr (modernizr-2.6.2.min.js)
  3. Mean Menu (jquery.meanmenu.min.js)
  4. Isotope plugin (isotope.js)
  5. Nice Scroll (jquery.nicescroll.min.js)
  6. CarouFredSel plugin (jquery.carouFredSel-6.2.0-packed.js)
  7. Tabs (jquery.tabs.min.js)
  8. bx Slider plugin (jquery.bxslider.min.js)
  9. video ratio(jquery.fitvids.js)
  10. Smart Resize (jquery.smartresize.js)
  11. And custom js like (custom.js)

1.8 How To Update Your Theme?

Kindly follow the steps given below to update our theme with the latest version.

1. Download the theme's latest version from Themeforest downloads page.
2. If you've made any custom changes in the code, please take a backup of it first. To be in safer side, take backup of the database completely.
3. Overwrite the older theme files with latest theme files. Update the custom changes (from backup) into the new files.
4. Now goto "wp-content / plugins" folder through the FTP software.
5. Remove the folder 'designthemes-core-features' from wp-content / plugins folder. Make sure you have taken backup of custom changes if any.
6. Then get into "Dashboard -> Appearance -> Install Plugins", to install and activate the 'DesignThemes Core Features Plugin'.
7. Hereby you can update to the latest version of our Fitness Zone theme simply.

Note: If you have already updated our theme, just follow the steps 4,5,6 to update our 'DesignThemes Core Features Plugin'

3.1 Menu Settings

The theme offers 2 different types of menu locations: the Header Menu location beside your logo, a Top Menu location at the top of your page, and a footer menu location at the bottom of your page. Once you have created a menu you then have to select where to display it. Please keep in mind that the small menu locations (Top menu & Footer menu) doesnt support dropdown menus or mega menus.

• Primary Menu - this is main menu that appears in the header area
• Secondary Menu - this is additional menu that appears in the footer area

3.2 Setting up the MegaMenu

Here are some the points regarding mega menu and default menu.

• By default you will have option to diable menu text and menu link option for every menu.
• To enable mega menu please check the 'Use As Mega Menu' option and you can choose the number of column layout for mega menu ( available options 2 column, 3 column and 4 column ).
• You can add any page or custom link or any availalable pages as sub menu for mega menu.
• In sub menu you will have 'Enable Fullwidth' option which will make current menu and all its submenu to display in fullwidth.
• Also for every submenu you will have option to choose custom widget area in 'Display Widget Area', which is created in buddha panel ( Dashboard -> Appearance -> Fitness Zone Options ).
• You can also choose number of column(s) these custom widgets should occupy ( available options 2 column, 3 column and 4 column ).

3.3 How to Setup a New Menu

Step 1 – Navigate to Appearance > Menus section of your admin sidebar.

Step 2 – Click the Create A New Menu link to make a new menu. Enter the name then click the Create Menu button.

Step 3 – To add a menu item, select one of your created pages on the left hand side and click the Add to Menu button. You can also add all kinds of different posts from the left side.

Step 4 – To add a custom menu item, enter a custom name and link into the Links box.

Step 5 – Manage your menus by using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of another menu item, and it will lock into place and create a dropdown section.

Step 6 – After setting up your menu, scroll down to the bottom of the page to assign the menu to one of the 4 locations in the Theme Locations box.

Step 7 – Once its all done, make sure you click the Save button.

4.1 Header layout

To setup header layout, please navigate to Dashboard > Fitness Zone > Buddha Options > Apperance > Header section and choose one of available layouts

4.2 Logo & Favicon

To setup logos, please navigate to "Dashboard > Fitness Zone > Buddha Options > General" for Logo section, where you will be able to upload Custom and Retina Logos. You can also setup some different logo options (favicons) hereby.

Please remember that Retina Logo should be always 2x larger than the Custom Logo currently in use (this field is optional).

Follow the steps to setup the logo and favicon for your website.

Step 1 –Navigate to Dashboard > Fitness Zone > Buddha Options page.

Step 2 –Select General tab.

Step 3 –In Favicon option, click on upload button to launch Wordpress Media Library. Choose an existing media file or upload a new favicon image. A favicon is usually square shaped and it is of .png or .ico format.

Step 4 –In Your Logo option, click on upload button to launch Wordpress Media Library. Choose an existing media file or upload a new media file.

Step 5 –Click on Save Changes button to save the logo and favicon.

5.2 How To Create A New Page

Step 1 – Navigate to Pages in your admin sidebar and click Add New option.

Step 2 – Input a new name for your page, then find the Page Attributes box on right side.

Step 3 – Set your Parent page. It's usually set to No Parent.

Step 4 – Set your page template from the Template dropdown list. See list of page templates below.

Step 5 – Content for your page goes in the editing field, use the Visual or Text editor. Page content is mainly built using Shortcodes. See the Shortcodes section for how to use them. You can also use our demo content, see the corresponding section of this document for the demo code of each page.

5.3.1. Slider Options

• Fitness Zone Theme has following slider options 'Layer Slider', 'Revolution Responsive' and Image only option.
• You can enable / disable slider at any time.

5.3.2 Default Page Options

• You can choose template for your page which is configured in template post type.
• You can add custom css for this page alone here.
• You can enable / disable the breadcrumb section here.
• You can switch between following available page layouts 'Without Sidebar', 'Left Sidebar' and 'Right Sidebar'. You can choose the custom widget area created using 'Widget Area' tab in Buddha Panel(Dashboard -> Fitness Zone Theme -> Appearance ->Options) and you can enable / disable the default widget area.

5.3.3 Blog Options

• Choosing 'Blog Template' in 'Page Atrributes' metabox will enable the 'Blog Options' metabox.
• You can choose the page layout, posts layout, control the excerpt length and number of posts to display per page.
• You can enable / disble author, category, tag, date, comment info at any time. You can exclude certain categories using 'Exclude Categories' dropdown.
• Click Here to watch the video on setting up blog template page

5.3.4 Fullwidth Page Options

• Choosing 'Full Width Template' in 'Page Atributes' metabox will enable the 'Fullwidth Page Options' metabox.
• You can choose template for your page which is configured in template post type.
• You can add custom css for this page alone here.
• You can enable / disable the breadcrumb section here.

5.3.5 Gallery Template Options

• Choosing 'Gallery Template' in 'Page Atrributes' metabox will enable the 'Gallery Options' metabox.
• You can choose the page layout, posts layout, allow filters, number of posts to display per page.
• You can choose only certain categories using 'Choose Categories' dropdown.
• Click Here to watch the video on setting up gallery template page

6. Slider

6.1 Layer Slider

LayerSlider WP is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects, even from your WordPress posts and pages. It uses cutting edge technologies to provide the smoothest experience that's possible, and it comes with more than 200 preset 2D and 3D slide transitions. It has a beautiful and easy-to-use admin interface with supporting modern features like drag n'drop WYSIWYG slider builder, real-time previews, timeline view, Google Fonts and transition builder for custom animations. It's device friendly by supporting responsive mode, multiple layouts, touch gestures on mobile devices, and uses techniques like lazy load and conditional script loading for optimal performance. You can add any content into sliders, including images, text, custom HTML, YouTube and Vimeo videos or HTML5 self-hosted multimedia contents. It's also SEO friendly by allowing you to build semantic markup with custom attributes that search engines can index easily. LayerSlider comes with 13 built-in skins, and it has tons of options to entirely customize the appearance and behavior of your sliders at the smallest detail.

LayerSlider is external plugin which is included into theme. Because, for each product we purchase "Extended license" and that`s why we are able to include it into theme. This plugin works fine of course and if you want current slider version, you can always get directly from us. What you need to do, to get this slider is send us a request about it via contact form on our profile's page http://themeforest.net/user/designthemes (it is in the right bottom corner) and we`ll send you the current version.

6.2 Create A New Layer Slider

Step 1 – Click on the Layer Slider sidebar item in your admin section, then click the "Add New" button and give the slider a name.

Step 2 – The "Slider Settings" tab will open and allow you to set the general settings for your slider such as the width, height, responsive, full width, and more. Check out each tab.

Step 3 – Once you are done, click "Save Changes" to save the slider. Next you can add slides, see the information below.

Please Note – You can get sample sliders by clicking the "Import Sample Sliders" button. It's a good way to learn and see the different types of settings.

6.3 How to add Slides to your slider

Step 1 – Click on the "Slides" tab.

Step 2 – Slide #1 will already be created, add a background image for the slide, set thumbnails, transitions, links and more in the settings box above the slider preview window.

Step 3 – Each slide you make can have multiple layers to it. The layers show up below the slider preview window. Click "Add New Layer" create a new layer. An editing section will display once clicked.

Step 4 – The layer editing section has 5 tabs; Content, Transition, Link, Styles, Attributes. Content tab is where you add your content, Transition tab is where you set all the timings and animations, Link tab is where you can set the content to link, Styles tab is where you set custom styles, Attributes tab is where you can add custom id's or classes.

Step 5 – Click on the Content Tab and enter your text, image or video or custom HTML content. Then set your transitions, links, styles and attributes if needed.

Step 6 – Click the "Enter Preview" button to view a preview of the slider and layers.

Step 7 – When finished, click "Save Changes" to save it. Repeat process for more slides.

How To Create A New Revolution Slider

Step 1 – Click on the Revolution Slider sidebar item in your admin section, then click the Create New Slider button.

Step 2 – Insert a slider name and alias. The alias text will generate a shortcode that can be used in the editing field of pages or posts.

Step 3 – Then select the Source Type. If you choose Posts or Specific Posts, please refer to the Revolution Slider Docs for information on how to set that up.

Step 4 – Then select the Slider Layout type, each type will have its own settings. Set the Grid and Responsive settings here also. View the layout example diagram below this area to understand what each section is.

Step 5 – On the right hand side are many other options you can set. All are self explanatory with descriptions. Test them out.

Step 6 – Once you are done, click Create Slider and your new slider will be made.

7.1 General

In this section you can set up some general options for your site. Please check below options available in this section,

• Logo - Upload logo that fit the best for your homepage layout
• Retina Logo - Upload logo that fit the best for your homepage layout (retina logo must be 2x larger than regular homepage logo)

The General Settings tab has options relevant to the entire site such as logo, favicon, default intro content, breadcrumbs, twitter, top bar settings and more.

7.2 Appearance

Appearance Settings - Here you can change the appearance of the theme Please check below options available in this section,

• Header - To Change the Header Style option with Header 1 and Header 2 as two choices presented as radio buttons.
• Menu - To Change the Menu section appearance and behaviour styles
• Body - To customize the body portion of the theme like font, color & etc.
• Footer - To customize the footer portion of the theme like font, color & etc.
• Typography - To customize the Font color, size, type from H1 upto H6
• Layout & BG - Here you can change the layout of our theme (Boxed or FullWidth)

For Boxed layout - you can set the background by selecting the predefined patterns or upolad your custom image.

7.3 Skin Options

Skin Options - Fitness Zone comes with following predefined 12 color skins [ You can add your own skin :) ]

Dashboard > Fiteness Zone > Skin Options

Skin Options - To Change the Skin Style option with Sytle 1 and Sytle 12 as two choices presented as radio buttons.

7.4 Integration Options

General - To place any code, that will appear in header, body portion of every post or page.

We have two sections each for "Post" and "Page" to place code on top and bottom of every posts and pages.

Post - Single Post page customization

With the help of this "Post integration" section, you can do the following things,

1. Setting up the top and bottom code for individual posts
2. Enable / Disable the Most used Social Share options for individual posts
3. Enable / Disable the Most used Social Bookmark options for individual posts

Page - Single page customization

As the same way followed in Post page customization, you can setup all those things here for Pages too.

Gallery - Gallery Bookmarks

Enable / Disable the Most used Social Bookmark options for individual galleries

7.5 SEO Options

1. Title Delimiter - Please specify the symbol, will appear in title of the pages.
2. Page Title Formats - Drap and Drop option to customize the page title
   1. Single Post & Page Title Format
   2. Category, Archieve & Tag page Title Format
   3. Search & 404 page Title Format
3. Meta - To specify Meta data & other SEO elements
   1. You can generate automatic Canonical URLs for entire website
   2. You can exclude the archieve, category and tag pages from indexing to avoid duplicate content.
   3. You can generate:
      1. Automatic description
      2. Meta keywords ffrom the tag and category for posts.

7.6 Speciality Pages

Speciality Pages - Author, Category, Tag, Gallery, Search & 404 Page

Dashboard > Fitness Zone > Speciality Pages Options

Available Options:

1. You can choose page layout
2. You can choose post layout for Author, Category, Tag, Gallery & Search Page
3. Custom 404 Text for 404 Page
4. And Background settings for 404 Page

7.8 Footer Settings

Available Options:

1. Show / Hide Footer Section
2. Columns Layout - To choose the layout style you need in the footer..
3. Footer Logo Settings
   1. Show / Hide Footer Logo option
   2. Upload new footer logo
4. You can set Copyright text ,and enable it to show in front view

7.8 Widget Area

You can create custom widget areas that can be assigned to any individual post / page and megamenu.

Go to 'Wp-admin(Dashboard) > Fitness Zone > Appearance > Widgets'. You'll see widget areas you've created on the right hand side.

7.9 Woocommerce

To get this option install WooCommerce plugin. And the plugin bundled with dummy data which can be imported to instantly give you a working store with products to test the different features WooCommerce has to offer.

Available Options:

1. No.of Products to show in main shop page.
2. Product Layout - 3 types of products layouts are there. (II Column, III Column & IV Column )
3. Product Details, Product Category, Product Tag page layouts.
4. Also you can easily handle widget areas for individual Product, Product Category, & Product Tag in the Role -> "Widget Area" Settings.

Following plugins used to extend the woocommerce options

1. YITH WooCommerce Zoom Magnifier is that enables you to add a zoom effect to product images.
2. YITH WooCommerce Wishlist adds all Wishlist features to your website. Needs WooCommerce to work.

7.10 Page Builder

You can anable / disable page builder for any post.

Go to 'Wp-admin(Dashboard) > Appearance > Fitness Zone > Page Builder'.

7.11 Events

Available Options:

1. Layout option for events archive page.
2. Layout option for events details page.
3. Layout option for events archive page.
4. For Installing & Configuring Events Calendar Plugin, Click here to watch on YouTube.
5. Layout option for TimeTable events details page.
6. For Installing & Configuring TimeTable Events Plugin, Click here to watch on YouTube.

7.12 Responsive & Mobile

You can enable responsive option in "Fitness Zone > Responsive & Mobile > Make My Site Responsive"

And you can disable sliders by choosing the 'Disable Slider for Mobile Devices' option in "Fitness Zone > Responsive & Mobile"

7.13 Branding

Available Options:

1. Custom Buddha Panel Logo

7.14. Backup

Backup Options These options allow you to backup and restore your custom settings and options. These options also allow you to transfer Theme Options data from site to site.

8.Template Option

Template is powerfull tool used to configure completely unique page with lot of options. Also you can use templates created here for more number of pages. This template option will be found in (Dashboard -> Templates). Apart from these template comfigured pages rest of the pages will take settings configured in Buddha Panel.

Templates consists of following configuration options.

8.1 Slider Options

• Fitness Zone theme comes with following slider options to configure each single page.
• This 2 slider options 'Layer Slider', 'Revolution Responsive' can be applicable only for pages.

9.Page Builder

Fitness Zone theme come with page builder which makes creation of page simpler and easier. To enable / disable page builder in post, page, portfolio and Fitness Zone Theme globally navigate to Fitness Zone Theme(Buddh Panel) -> Page Builder tab. You can switch between Page Builder and WordPress default editor in any single post or page or portfolio or Fitness Zone Theme at any time.

Overview

• 'WordPress Editor' button and 'Fitness Zone Theme Page Builder' button is used to switch between WordPress default editor and Page Builder.
• If you keep the 'Enable page builder' option active while saving, then everytime this page will be loaded by keeping page builder active.
• Use 'Clear All' button to completely clean the builder area
• 'Create Sample Layout' button is used to save the existing modules in builder area to separate layout. After updating the page created layout will be listed in 'Sample Layouts' tab.
• We have 9 tabs of modules consisting of columns('Columns'), modules('General', 'Unique', 'Others'), widgets('WP Widgets', 'Fitness Zone Theme Widgets', 'Events Widgets', 'WooCommerce Widgets') and sample layouts('Sample Layouts').

Options

Column Options

Every column comes with 3 types of options. They are,

1. Settings - It is used add additional CSS class for this column alone.
2. Clone - Click this button to clone the column along with every modules added inside. Those cloned column will be added immediately after current column.
3. Delete - Used to delete the column completely along with its settings.

Fullwidth Section or Fullwidth Section Video

These sections comes with lot of options in 'Settings' button to configure fullwidth section. Some of the available options are,

1. Fullwidth Section - Bacground Color, Background Image, Parallax Effect, Background Repeat, Background Position, Padding Top, Padding Bottom, CSS Class, etc,.
2. Fullwidth Section Video - MP4, WEBM, OGV, Poster Image, Background Image, Padding Top, Padding Bottom and CSS Class.

Module Options

Every module comes with 5 different types of options. They are,

1. Edit - Clicking this button will open a sliding panel at very top of the builder area which contains options to configure those modules.
2. Clone - Click this button to clone the module along with its settings. Those cloned modules will be added immediately after current module.
3. Delete - Use this delete button to delete the module along with its settings.
4. Show / Hide - Use this button to enable or disable this module. If its disabled then that module will not be shown in frontend but all the settings of that module will be preserved, you can enable that module any time.
5. Resize - Its just a symbol to represent that this module can be resized to any width. Making width too smaller or too larger may collapse the modules design.

Note : By default every module can be resized, but it cannot be resized inside another column or fullwidth section. While resizing note that making width too smaller or too larger may collapse the modules design.

Resizable Column

Resizable Column has all options similar to normal Column options. This resizable column cannot be placed inside the Fullwidth Section

Sample Layouts

Fitness Zone theme comes with few sample layouts which can be acessed simply clicking the module. Now your builder area will be loaded with all the modules of that sample layout, now you can just update the content, images, etc, as you wish.

10. Blog

10.1 How to create a Blog Post

• Login to the WordPress dashboard by visiting www.yourdomain.com/wp-admin
• Click on 'Add New' from the 'Posts' menu once you are inside the WordPress admin panel
• There are four main and important sections in a post that you should fill in before publishing the post
  • The post title
  • Post content
  • Tags
  • Categories
• Give the post a nice title.
• Add the post content in the content section.
• Add relevant tags for this post.
• Add the post to the relevant category (Create a category if a relevant category doesn't exist).
• Publish the post by hitting the 'Publish' button.

11. Events Template

This theme can support, The Events Calendar WordPress Plugin. To install & configure events calendar page, Click here to watch on YouTube.

14.2 Widgets

Widgets

The Fitness Zone theme comes with 8 custom widgets

1. Fitness Zone Posts
2. Fitness Zone Social
3. Fitness Zone Twitter
4. Fitness Zone Workouts
5. Fitness Zone Events
6. Fitness Zone Flickr Widget
7. Fitness Zone Gallery
8. Fitness Zone Mailchimp Newsletter