Step 1 - Log into your WordPress Dashboard.

Step 2 - Install and Activate All Plugin.

Step 1 - Log into your WordPress Dashboard.

Step 2 - Go to Theme Options > Import/ Export.

Step 3 - Then Click on Import Demo

Step 4 - The Dummy content is really big and may takes more then 30 minutes to import depending where you are living, Do not interrupt/cancel the import process!

Step 6 - Done!

This video tutorial shows you how to Import Data Fitness Theme with just one click.

If you would like to learn the best practice of using Fitness theme, you can import content from our demo web site. Importing theme is performed using XML file located in theme ZIP file downloaded from Themeforest and following these steps.

If the script auto importing demo data doesn't works with your host, we had included demo data within the theme files, take a look at the folder /dummy-data

3.1. WordPress Importer 3.2. Revolution Importer 3.3. Theme Options Importer 3.4. Widget Importer

If you have problems importing the demo ( example : infinite loading, error 505 with when using wordpress importer ) then you may have a problem with the server settings. Please create ticket in Support Center.

Visual Composer is the most popular drag and drop editor for Wordpress.

If you need dedicated support for this component, please visit: Visual Composer on Code Canyon

Here is Documentation of Visual Composer guide.

Fitness theme includes the premium plugin - Revolution Slider.
Once you've installed and activated the Revolution Slider plugin, you will then see the menu item appear at the bottom of the WordPress menu, as below:

You can import the revolution slider we used in our demo, all slider are in the slider folder. To learn more about the Revolution Slider plugin please read the Plugin documentation

YITH WooCommerce Compare plugin is an extension of WooCommerce plugin that allow your users to compare some products of your shop. All products are saved in one complete table where the user can see the difference between the products. Each product features can be set with the woocommerce attributes in the product configuration. You can also add a simple widget with the list of products the users have added, where you can manage them. Also you can simply customize the compare table with your style, by editing the specific template.

Full documentation is available here

This plugin is 100% compatible with WPML

Sometimes the halfway is better: what if you are looking to a product in a list and its image is still too small?

You have to open its product page, waiting for its loading and finally observe what you are interested into. So why don't use a simple way to look immediately at the product's distinctiveness? Here it is what Quick View can offer you.

People are more attracted to what they can see clearly. And often the classic product lists are not enough to understand the real value of a product. That's when Quick View strikes successfully! Your clients will be free to look in a better way your products, reading also a small description with all the most important features and qualities you want to underline. In this way, they will be more focused on what they really want and they will proceed easily to the purchase step.

Main features:

- Add a button in product loop to open a modal window with the product summary using ajax

- Choose to enable the prettyPhoto lightbox for images in quick view

- Customize style of modal

Full documentation is available here.

What can really make the difference in conversions and amount of sales is without a doubt the freedom to share your own wishlist, even on social networks, increasing indirect sales: can you imagine the sales volume you can generate during holidays or birthdays, when relatives and friends will be looking for the wishlist of your clients to buy a gift?

Offer to your visitors a chance to add the products of your woocommerce store to a wishlist page. With YITH WooCommerce Wishlist you can add a link in each product detail page, in order to add the products to the wishlist page. The plugin will create you the specific page and the products will be added in this page and afterwards add them to the cart or remove them.

Full documentation is available here.

This plugin is 100% compatible with WPML.

Step 1 - Login to the WordPress Dashboard.

Step 2 - From the 'Appearance' menu on the left-hand side of the Dashboard, select the 'Menus' option to bring up the Menu Editor.



Step 3 - Select Create a new menu at the top of the page.

Step 4 - Enter a name for your new menu in the Menu Name box.

Step 5 - Click the Create Menu button.

Your menu is now defined, and you can now add pages to it (steps below).

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. The Screen Options are located in the top right corner of your WordPress Dashboard.

Step 1 - Locate the pane entitled Pages.

Step 2 - Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.



Step 3 - Select the Pages that you want to add by clicking the checkbox next to each Page's title.

Step 4 - Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.

Step 5 - Click the Save Menu button once you've added all the menu items you want.

Your custom menu has now been saved.

Once you've created a menu and filled it with items, it's time to assign it to one of the theme pre-defined locations.

Step 1 - Go to Appearance > Menus and click Manage Locations.

Step 2 - Assign each Theme Location with a menu. You can assign menus to multiple Theme Locations.

Step 3 - Click the Save Changes button.

Fitness features Mega Menus. The mega menus are available only for top level navigations items only in "Main Menu" area.
Follow the steps below to create a mega menu:

Step 1 - Add a an item to the menu editor. This has to be a top level item!

Step 2 - Click on arrow icon in the top right-hand and expand.

Step 3 - Seclect the columns number you want to use in Submenu Type.



Step 4 - Now, you need to add child menu items, which will represent columns in the mega menu.
First level of child items will represent Titles in each of 3 columns.
Add some sub child menu items.


Step 5 - Now, add child items to each of those columns. This will represent your actual sub-menu pages. Take a look at the image below.



The menu dropdown should now look something like this :



Step 6 - If you want to Remove the Titles (First Column, Second Column Third Column) Go back to the Mega menu setting and check Hide Mega Menu heading.



Step 7 - Adding Widget / Image to the Menu. To do this first you need to have a Widget set with some widget ( you can create new sidebar go to Appearance > Widget ). Menu doesn't work with all the widget, but works will all Fitness Widget and Default WordPress Text Widget

Step 8 - When you have set your sidebar with widget click on the sub child menu you want to turn into widget area ( we will turn the third column into a widget area), make sure it doesn't have sub menu



Step 9 - Enter class icon FontAwesome for icon input. Ex: fa fa-heart.



Step 10 - DropDown menu align with Dropdown Align select(Alignleft, Alignright, Aligncenter, Fullwith, Auto).



Step 11 - Choose image for DropDown menu Background Image.

You can upload your logo image in the Theme Options. Please, follow the steps below to upload your logo & & favicon:

Step 1 - Login to your WordPress Dashboard.

Step 2 - Go to Theme Options > Logo.

Step 3 - Upload a Logo & Favicon ( Used For normal header ) and a Logo ( Used for Stick Header ).

You can upload your favicon image in the Appearance. Please, follow the steps below to upload your favicon:

Step 1 - Go to Appearance > Customize > Site Identity.

Step 2 - Upload your favicon. Should be a Png/Gif image.

Follow the steps below to find out how to change the page options:

Step 1 - Login to your WordPress Dashboard.

Step 2 - Go to Theme Options > Page .

Step 3 - Choose whether or not you would like to show page comments.

Step 4 - When you have finish to customize the color don't forget to save.

For each page you can change the title style, title background color, select to use a slider and much more! Check the screenshot and read the documentation to see how it works

2.1. Header Setting 2.2. Title Bar Setting 2.3. Footer Setting

Take a look at Set Homepage section.

Select Layout - Select layout for Archive Post.

Image Default - Select an image for Feature post.

Crop Image - Choose whether or not you would like to crop the image of post on your Archive Post.

Image Width - Enter the value of the width of image on your Archive Post.

Image Height - Enter the value of the height of image on your Archive Post.

Show Post Title - Choose whether or not you would like to show title of post on your Archive Post.

Show Post Info - Choose whether or not you would like to show info of post on your Archive Post.

Show Post Description - Choose whether or not you would like to show description of post on your Archive Post.

Excerpt Length - Insert the number of words you want to show in the post excerpts.

Excerpt More - Insert the character of words you want to show in the post excerpts.

Select Layout - Select an image for Feature post.

Select Layout - Select an image for Feature post.

Select Layout - Select layout of Single Post.

Crop Image - Choose whether or not you would like to crop the image of post on your Single Post.

Image Width - Enter the value of the width of image on your Single Post.

Image Height - Enter the value of the height of image on your Single Post.

Show Post Title - Choose whether or not you want to show Post Title.

Show Social Share - Choose whether or not you want to show Social Share.

Show Post Info - Choose whether or not you want to show Post Info.

Show Post Navigation - Choose whether or not you want to show Post Navigation.

Show Post Tags - Choose whether or not you want to show Post Tags.

Show Post Author - Choose whether or not you want to show Post Author.

Show Post Comment - Choose whether or not you want to show Post Comment.

Show Post Related - Choose whether or not you want to show Post Related.

Show Post Tags - Choose whether or not you want to show Post Tags.

Sidebar Position - Select sidebar position in page Archive products.

Columns - Enter number columns you want to display.

Columns for Fullwidth - Enter number columns you want to display for fullwidth.

Products Per Page - Enter number products per page.

Show.. - Choose whether or not you want to show Result Count, Catalog Ordering, Pagination, ..

Sidebar Position - Select sidebar position in page single product.

Show.. - Choose whether or not you would like to show Product Title, Product Price, Product Rating, ..

Custom CSS - Quickly add some CSS to your theme by adding it to this block. Add new CSS class or JS to your website, add it in this text box. This will add/overwrite the theme CSS,JS, so please be careful!

Step 1 - Log in to your WordPress Administration Panel (Dashboard).

Step 2 - Click the 'Posts' tab.

Step 3 - Click the 'Add New' sub-tab.

Step 4 - Start filling in the blanks: enter your post title in the upper field, and enter your post body content in the main post editing box below it.

Step 5 - As needed, select a category, add tags, post format, fill in the meta setings below the editor.

Step 6 - Upload a featured image for your Post.

Step 1 - Change Post Format to Gallery.



Step 2 - Scroll down until you see the Gallery Settings.



Step 3 - After finishing, Update your Post, it should looks like this

Step 1 - Change Post Format to Video.



Step 2 - Scroll down until you see the Video Settings.



Step 3 - After finishing, Update your Post, it should looks like this.

Step 1 - Change Post Format to Audio.



Step 2 - Scroll down until you see the Audio Settings.

Step 1 - Change Post Format to Quote.



Step 2 - Scroll down until you see the Quote Settings.

Step 1 - Change Post Format to Link.



Step 2 - Scroll down until you see the Link Settings.

To you show your posts you need to create a Blog page. Click here to check how create a blog page.

Fitness theme includes support for the Visual Composer plugin. Visual Composer comes with a lot of drag and drop modules to help you quickly and easily building your pages.

You can read more information with the documentation live at link https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress to understand how it works.

Step 1: Go to Pages > click "Add new" and then enter your page information.

You can create your page content with CLASSIC MODE or if you would like to create a complex page with page builder, click to "Backend Editor" to use Visual Composer plugin building your page.

Step 2: Add elements on page, drag and drop to manage its position and edit its content.

Click on "Publish" to save and publish your new page or "Save draft" to save it as a draft.

Here is how it works on our page

List of builder items ( included buider items build special for this theme )

Add Portfolio Items Video Portfolio Post

Follow the steps bellow to understand how to create a portfolio page.

Step 1 - Log in to your WordPress Administration Panel (Dashboard)..

Step 2 - Click on Pages > Add New.

Step 3 - Give your page a name then Change the Editor to Backend Editor ( you need to have the Visual Composer plugin activated ).

Step 4 - Click on the Add Element button.



Step 5 - Select the Portfolio module.



Step 6 - The Portfolio Settings should appear. You can customize the Portfolio by modifying the settings

Step 7 - After finishing, Publish the page.

Step 1 - Log in to your WordPress Dashboard, go to Contact > Add New



Step 2 - Give a Name to your form and change Mail Info



Step 3 - Edit the Form field to change the Form Layout ( if you want to use one of the layout you saw on the demo check the next step )



Step 4 - Save your Form

Step 1 - Log in to your WordPress Administration Panel (Dashboard)..

Step 2 - Click on Pages > Add New.

Step 3 - Give your page a name then Change the Editor to Backend Editor ( you need to have the Visual Composer plugin activated ).

Step 4 - Click on the Add Element button.



Step 5 - Select the Contact Form 7.



Step 6 - The Contact Form 7 Settings should appear. Select the Form you want to use you can also customize the Color and change the fields layout and button design

Step 7 - Update / Publish your page

Link to the Official Documentation of the Plugin.

First of all, make sure of the plugin functionalities have been enabled from settings dashboard.


Within the same section, you can enable/disable the zoom functionality on products when the access take place from mobile devices.

Now, you can configure zoom settings on the product image.



Settings that can be configure are:

"Zoom box width/height" - width and height of the zoom box

"Image size" - size of the image shown within the zoom box. When you change this option, you must regenerate thumbnails in order to make the plugin work correctly. To regenerate thumbnails, we suggest you use a free plugin like Regenerate Thumbnails.

"Zoom box position" - zoom box position in respect to product image (inner or aside)

"Loading label" - the label showed during the loading of the product images.

"Opacity" - the opacity of the magnifier.

"Blur" - enable this option to apply a blur effect to the product image on the mouse hover. This effect will be available only if the zoom box is on the right of the product image.

The plugin allows to show miniatures of the product within a slider. In order to do it, it is essential to activate "Activate slider".



Here is the list of settings you find within "Slider settings" section:

"Items" - the number of images to show under the product image.

"Circular carousel" - choose whether to roll product images in a circular way in the slider

"Infinite carousel" - choose whether the slider should be sequential showing the product images. If activated, once you reach the last image of the gallery, you will be redirected to the first one of the slider.

Step 1 - Log in to your WordPress Administration Panel (Dashboard) > Pages > All Pages.

Step 2 - Select the Page you want to add Shortcode then press Edit button.

Step 3 - Click Add element button.

Step 4 - Select Shortcode you want to add.

Step 1 - Hover on shortcode and click on 'Edit' button.

Step 2 - Config shortcode in setting box.

Step 3 - Click Save to save changes.

Step 1 - Click 'Edit Page' includes Blog Carousel or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - configure shortcode.

Extra class - Add a class name you wish to style particular content element differently. And remember refer to it in your CSS file.

Categories - Select Categories. By default, all your projects will be displayed. If you want to narrow output, select Category(s) above and only selected category(s) will be displayed.

Count - The number of posts to display on each page. Set to "-1" to display all posts on the page.

Order (by) - Show your Posts in Chronological Order and Select to show your posts will be displayed in ascending order when they are arranged from the oldest posts to the newest posts or in descending order when they are arranged from the newest posts to the oldest posts.

Show image, title,.. - Choose whether or not show image, title, info, excerpt of post in this element.

Image Size - Select image size of post in this element.

Excerpt, Read More - Enter excerpt length, excerpt more, read more text and choose whether or not you would like to show read more text as new line. in this element.

Step 4 - Save your changes

Step 1 - Click 'Edit Page' includes Banner Widget or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - configure shortcode.


Heading - Enter Heading.

Sub Heading - Enter Sub Heading.

Image src - Upload image.

Link - Enter link.

Extra Class - Add a class name you wish to style particular content element differently. And remember refer to it in your CSS file.

Step 4 - Save your changes

Step 1 - Click 'Edit Page' includes Widgetised Sidebar or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - configure shortcode.


Widget Title - Enter Title.

Sidebar - Select widget area to display. You have to config sidebar in Appearance > Widgets before selecting.


Extra class name - Add a class name you wish to style particular content element differently. And remember refer to it in your CSS file.

Step 4 - Save your changes

Step 1 - Click 'Edit Page' includes Info Box or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - configure shortcode.


Template - Select template in this element.

Link Text - Enter Read more text in this element. EX: Shop Now.

Extra Link - The number of posts to display on each page. Set to "-1" to display all posts on the page.

Promotion Link Text - Enter Read more text in this element. EX: Promotion.

Extra Promotion Link - Choose whether or not show image, title, info, excerpt of post in this element.

Extra Class - Add a class name you wish to style particular content element differently. And remember refer to it in your CSS file.


Heading 1 - Enter Heading 1

Sub Title - Enter Sub title.

Description - Enter description in this element.

Image - Upload Image

Align image - Align Image


Heading 2 - Enter Heading 2

Image - Upload Image

Align image - Align Image

Step 4 - Save your changes

Step 1 - Click 'Edit Page' includes Portfolio Grid or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - configure shortcode.


Portfolio Categories - Select Categories. By default, all your projects will be displayed. If you want to narrow output, select Category(s) above and only selected category(s) will be displayed.

Count - The number of posts to display on each page. Set to "-1" to display all posts on the page.

Show Filter, Pagination - Choose whether or not you want to show Filter, Pagination.

No Padding - Choose whether or not show image, title, info, excerpt of post in this element.

Columns - Select Columns of post in this element.

Order (by) - Show your Posts in Chronological Order and Select to show your posts will be displayed in ascending order when they are arranged from the oldest posts to the newest posts or in descending order when they are arranged from the newest posts to the oldest posts.

Extra Class - Add a class name you wish to style particular content element differently.


Template - Select template in this element.

Show Title, Categories, View Now, Icon - Choose whether or not you want to show Title, Categories, View Now, Icon.

Step 4 - Save your changes

Step 1 - Click 'Edit Page' includes Testimonial Slider or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - configure shortcode.


Template - Select template in this element.

Count - The number of posts to display on each page. Set to "-1" to display all posts on the page.

Order (by) - Show your Posts in Chronological Order and Select to show your posts will be displayed in ascending order when they are arranged from the oldest posts to the newest posts or in descending order when they are arranged from the newest posts to the oldest posts.

Extra Class - Add a class name you wish to style particular content element differently.


Show image, title, excerpt - Choose whether or not show image, title, excerpt of post in this element.

Step 4 - Save your changes

Step 1 - Click 'Edit Page' includes Instagram Feed or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - Configure shortcode.


Access Token - Enter Access Token in this element

Extra Class - Add a class name you wish to style particular content element differently.

Show Photos From - Select template in this element. Below is to show photos from Popular.

TagName/ LocationId/ UserId - Enter tagname/ locationId/ userId dependent of type 'Show Photos From'

Limit - Maximum number of Images to add.

Choose image size - Select image size in this element.

Columns - Select columns display in this element.

Step 4 - Save your changes

Step 1 - Click 'Edit Page' includes Product Carousel or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - configure shortcode.


Extra class - Add a class name you wish to style particular content element differently.

Columns - Select columns.


Categories - Select Categories. By default, all your projects will be displayed. If you want to narrow output, select Category(s) above and only selected category(s) will be displayed.

Show - Select show product type in this elment.

Product Count - The number of posts to display on each page. Set to "-1" to display all posts on the page. Hide Free - Hide free product in this element.

Show Hidden - Show Hidden product in this element.

Order (by) - Show your Posts in Chronological Order and Select to show your posts will be displayed in ascending order when they are arranged from the oldest posts to the newest posts or in descending order when they are arranged from the newest posts to the oldest posts.


Show Sale Flash, Title.. - Choose whether or not show Sale Flash, Title, Show Product categories,.. of post in this element.

Step 4 - Save your changes

Step 1 - Click 'Edit Page' includes Product Carousel or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - configure shortcode.


Template - Select Template.

Columns - Select Columns.

Extra Class - Add a class name you wish to style particular content element differently.

Title Load - Please enter the text from the keyboard.


Categories - Select Categories. By default, all your projects will be displayed. If you want to narrow output, select Category(s) above and only selected category(s) will be displayed.

Show - Select show product type in this elment.

Product Count - The number of posts to display on each page. Set to "-1" to display all posts on the page.

Hide Free - Hide free product in this element.

Show Hidden - Show Hidden product in this element.

Order (by) - Show your Posts in Chronological Order and Select to show your posts will be displayed in ascending order when they are arranged from the oldest posts to the newest posts or in descending order when they are arranged from the newest posts to the oldest posts.


Show Sale Flash, Title.. - Choose whether or not show Sale Flash, Title,... of post in this element.

Align Pagination - Align Pagination.

Step 4 - Save your changes