Yogi | Document Category

Class & Trainer

Trainer Listing Page

To set up a page as Trainer listing page to show all trainers, create a new page. From admin panel, navigate to Customizer > Trainer tab. Here you can find your page from dropdown list to set as Trainer Listing page.

Trainer Settings

Trainer Information: This section will help you to provide some trainer information that includes position, experience, email and biography.
Media Data: This section allows to enter social URL which student can contact with trainer.

Add New Trainer

Please follow these steps to add new trainer:

Step 1: From admin panel, navigate to Trainer–> Add New to add new trainer
Step 2: Enter Name and description for trainer.
Step 3: Choose Trainer Categories and Featured Image of trainer on the right side.
Step 4: Scroll down your mouse, you will see Trainer Information and Media Data: Social section. Please fill out information for sections.

Class Schedule Page

To set up a page as Class Schedule page to show all class schedules, simply create a new page then add Class Schedule shortcode (you can easily find Class Schedule Shortcode in Yogi shortcode list). You can set Schedule Min/Max time for class schedule as the start and end time of the timetable.

Class Listing Page

To set up a page as Class listing page to show all classes, create a new page. From admin panel, navigate to Customizer > Class tab. Here you can find your page from dropdown list to set as Class Listing page.

Class Setting

In this section, you can enter your class information detail, including some options below:

Open date: Date when the class is opened. In this option you can select date on calendar.
Open Time: Time when the class is open. You can choose from dropdown timeline with 15 minutes block.
Close Time: Similar to Open Time option, you can choose time class closed from dropdown timeline.
Select Trainer: Choose trainer of the class from dropdown trainer list.
Address: Enter address of class here.
Number of Weeks: Enter the integer of weeks
Number Days: This option allows you to choose the days class is opened during a You can choose multiple days from Monday to Sunday (keep Ctrl or Command to select multiple days).
Use Advanced Multi-time: if you do not tick this box then open time and close time of the class will be set as in two sections above, Open time and Close Time. However, when the box is checked, you will have an extra option called Advanced Multi-time. In this section, you carry out 2 steps: opt one of the days you select in Number Days then reset open time and close time of the class organized on that day. Besides, reset time in this section will be prioritized to use.
Register Link: Use this option if you want to link the registration somewhere.

Class Category/Class Level

To add new class category or class level, you can follow these steps:

Step 1: From admin panel, navigate to Classes–> Class Category/ Class Level.
Step 2: You will see Add New Class Category/ Class Level on the left side, please enter name, slug, description for Class Category or Class Level.
Step 3: All done, click “Add New Class Category/ Add New Class Level” to save your information. The new class category/ class level will be displayed on the right side when you add new class.

Add New Class

Please follow these steps to add a new class from backend:

Step 1: From admin panel, navigate to Classes–> Add New Class.
Step 2: Enter title and description of your Class.
Step 3: Choose Class Category, Class Level and select Featured Image of class on the right side.
Step 4: Scroll down your mouse, you will see Class Setting In this section you need to fill out information for your yoga class, which includes open date, open time, close time, trainer, address, number of weeks and week days for your class.
Step 5: All done, Click Publish to save your class.

Demo

[Yogi] Import Demo Data

1. Import Demo Data

From version 2.0.0, now it is very easy for you to import the demo data. Please go to Admin Panel > Noo settings > Import Demo > Let the mouse hover over Yogi Demo > Click Install Demo button to install the Demo Data.

Note: Make sure that you activated all plugins before importing demo data

2. Import Revolution Slider

Step 1: Go to Slider Revolution> Click Import Slider> click choose file
Step 2: Go to Yogi package> demo content> rev_slider> select a file to upload
Step 3: Click Import Slider button

Event & Testimonial

Testimonial Setting

Your Image: Select avatar or thumbnail image for customers.
Your Name: Enter customer name here.
Your Position: Enter customer position here.

Create New Testimonial

Step 1: From admin panel, navigate to Testimonial–> Add New to add new testimonial.
Step 2: Enter title and description for testimonial.
Step 3: Choose Testimonial Categories of new testimonial on the right side.
Step 4: Scroll down your mouse you will see Testimonial options, please fill out information for Testimonial options.
Step 5: All done, click Publish to save your information.

Event Listing Page

To set up a page as Event listing page to show all events, create a new page. From admin panel, navigate to Customizer > Event tab. Here you can find your page from dropdown list to set as Event Listing page.

Event Settings

Event Settings: This section includes Start & End Date, Author, Address, Phone, Website and Email option for your event.
Place In Map: This section allows you to input address on map where event will be placed.

Add New Event

Please follow these steps to how to add a new event:

Step 1: From admin panel, navigate to Event–> Add New to add new event.
Step 2: Enter title and description for event
Step 3: Choose Event Category, Event Location and Featured Image of new event on the right side.
Step 4: Scroll down your mouse, you will see Event Settings and Place In Map section. Please fill out information for Event Settings section and choose address where event will be placed.
Step 5: All done, click Publish to save your information.

Extras

Coming together with Yogi, these plugins are recommended to install and activate for flexible use. Below are the source for documentation and support of each plugins.

Healcode Mindbody Widget

Healcode is an excellent plugin to help you sync and get content such as class, schedule, trainer list and more from your Mindbody account. If you plan to use the plugin for your website, check out these source:

Healcode FAQs for frequently asked questions from users.

Healcode Tech support to find first step guide and send a ticket for support.

However, to help you know how to synchronize such contents from Healcode, we would like to propose crucial steps below:

Step 1: In the admin panel, navigate to HC Widgets > click Add New widget > a Add Widget Shortcode section appears. As you see, it contains two boxes that are Widget title and Widget code. Now you will go to https://www.healcode.com/ to paste widget code into this one.

Step 2: Login to Healcode and you will see a list of widgets. Click a blue line containing name of the widget you want. We take Appointments widget as an example.

Step 3: After clicking, you will see a new page. Scroll down on the page you are viewing, copy and paste the widget code into Widget code box indicated in Step 1. Afterwards, enter widget title such as Appointments and press Create button.

Step 4: Navigate to Pages > MindBody Appointment > in the first row below Add media box, click “two leaves” icon > opt Appointments then the shortcode you have just created in widgets section will be appear automatically. Finally, remember to press Update button.

Visual Composer

Yogi works well with Visual Composer, the popular drag and drop page builder plugin with intuitive interface to build your content at ease. If you plan to use Visual Composer Plugin for your site, check out these source:

Visual Composer WordPress Plugin Documentation for user guide to use the plugin.

Visual Composer WordPress Plugin Support System for support upon issues of the plugin.

Woo Commerce

Yogi works compatibly with Woo Commerce that allows you to create membership package or online shop. If you plan to use Woo Commerce Plugin for your site, check out these sources:

Woo Commerce Plugin Documentation for user guide to use the plugin.

Woo Commerce Plugin Community Forum for support upon issues of the plugin.

Woo Commerce Knowledge Base for questions about the plugin.

Revolution Slider

Yogi integrated with Revolution Slider that brings to your hand tons of slider effects and intuitive slider builder. Check out its documentation:

Revolution Slider Plugin Documentation for user guide to use the plugin.

Contact Form 7

Yogi is fully compatible with Contact Form 7, the free form plugin recommended to create a nice form for your site. If you plan to use Contact Form Plugin for your site, check out these sources:

Contact Form 7 Plugin Page for basic information about the plugin.

Contact Form 7 Plugin Documentation for user guide to use the plugin.

Contact Form 7 Plugin Support Forum for support upon issues of the plugin.

Footer

The Footer is composed of 2 parts that are Footer Columns or Widget Area and Footer Bottom.
Thus, now you can guess that you will have to use not only Customizer but also Appearance>Widgets to make adjustments to the Footer.
You can see available widgets on the left side and 4 sidebars belonging to Footer: Noo – Footer Column #1, Noo – Footer Column #2, Noo – Footer Column #3 and Noo – Footer Column #4.

1. Noo-Footer Column #1

Drag 2 Text widgets to this sidebar> click the triangle icon on the right side of this widget> complete options> Save

2. Noo-Footer Column #2

Drag Calendar widget to this sidebar> click the triangle icon on the right side of this widget> complete options> Save

3. Noo – Footer Column #3

Drag Custom Menu widget to this sidebar> Click the triangle icon on the right side of this widget> Enter a title and Select a Menu (Quicklink) > Save
The Quicklink Menu is created in Appearance> Menus.

4. Noo- Footer Column #4

Drag Mailchimp Sign-Up form widget to this sidebar> click the triangle icon on the right side of this widget> Enter a title> Save

Header

Set Up Menu

Follow these steps so that menu items can be shown in Header

Step 1: Navigate to Appearance–> Menu 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
Step 3: To add menu item, select one of your created pages on the left hand side and click the Add To Menu button. You can also add 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 in Menu Structure, simply drag a menu item on the left side to the area on the right side.
Step 6: After setting up your menu, scroll down to the bottom of the page to assign the menu on the Theme Location box.
Step 7: Once It’s all done, make sure you click Save Menu.

Now returning to the site, you will see the menu shown on the header like this:

Yet when you see the header on our demo site:

You can wonder yourself “why is the header of my site different from that of your site?”.To achieve such design, refer to this link

An Introduction To Header

Perhaps Header is the first place visitors look at when they go to your site. The first impression is always important; therefore, if the Header can convey your message to users, that is very great! The simple message given to them can be an understandable and clear menu or an amazing and eye-catching design of the header or diversified header styles of your site also make the most choosy customers feel satisfied.
In the most essential respect, a header should contain three parts which are menu area, logo and top bar:

Here is structure of sections in Header, which will help you to acquire essential knowledge of building a Header. In terms of an striking and personal Header, I suppose that it depends on your creativity:))♦ Set up Menu
♦ Customize Header

Setting Up Menu

Yogi supports custom WordPress menu, this is one area where you can assign a menu: Main Menu. Following the guide below to learn how to create new menu on Yogi Theme.

Step 1: Navigate to Appearance–> Menus from Admin panel.
Step 2: Click the Create A New Menu link to make a new menu. Enter the name then click Create Menu
Step 3: To add menu item, select pages and posts on the left hand side and click Add to Menu button. You also can add custom links or post categories into menu.
Step 4: To create a dropdown menu, simply drag a menu item below of another menu item and slightly to the right, 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 on the Theme Location box.
Step 7: Once it’s all done, make sure you click the Save Menu

Below is the screenshot of menu structure and place to assign menu:

Adding Logo

Yogi allows you to add image file or use text for logo. For the image file, you can upload at any size and it will be adjusted to fit into the menu. There is an option for you to upload a retina logo to keep your logo retina ready.

Step 1: Navigate to Customizer–>Header–> Logo tab to access the logo options.
Step 2: You will see a button to turn On/Off Use Image for Logo.

If Off, you will have option to enter your site name, select logo font from Google font, font size and color for your logo.

Step 3: If you are uploading a retina logo (optional), you need to upload a larger image of which dimensions are 2 times larger than dimension that your standard logo will be displayed.
Step 4: If you are using a retina logo, you must enter the logo height for standard logo.

Create a Mindbody Page

After setting up widgetised sidebars following our guide, now you can add those sidebar shortcodes into any page to build a Mindbody page you want.

Step 1: Navigate to Pages > Add new. Enter title of the page such as Mindbody Class.
Step 2: Turn to the editor field. In backend editor of Visual Composer, add Widgetised Sidebar shortcode. Enter title and choose a sidebar from dropdown list. You can add number of sidebar shortcode into a page as you want.
Step 3: Save and Publish

Create Widgetised Sidebar

You are using Mindbody system to manage your class schedule and registration and want to get information directly from there rather than re-input one more time to website? That’s fine. Yogi supports HealCode Widget that is excellent to get all the content you need to your site. Just by installing HealCode MINDBODY Widget in Plugins section and you will have all the function to create class list, class schedule and more.

Creat Widgetised Sidebar

After installing successfully HealCode MINDBODY Widget, you need to create widgetised sidebar to use for page builder later.

Step 1: From admin panel, navigate to Appearance >Sidebar Generator. Add number of sidebar you will need to use. HealCode supports 8 sidebar widgets: Mindbody, Mindbody Class list, Mindbody Schedules, Mindbody Registration, Mindbody Enrollment, Mindbody Appointment, Mindbody Staff list, Mindbody Contact.

Step 2: Now you need to add those widgets to sidebar. Navigate to Appearance > Widgets, find HealCode MINDBODY Widget on the left side and drag and drop to a sidebar on the right side you just added above. Select corresponding Widget shortcode from dropdown list then click save.
Step 3: Similarly add all widget shortcode you need to other corresponding sidebars.

Installation

Basic Setting

If you’re new to WordPress, you’ll probably see that your site after importing data is completely different from our demo. It’s because some basic settings are needed on WordPress site. If you know the problem and how to fix it, please skip this section.

Setup Home Page

To set up home page, please follow these steps:

Step 1: Navigate to Settings–> Reading
Step 2: Select A Static Page option.
Step 3: Choose the page you want as your home page from the Front Page dropdown list.
Step 4: Here you can also select a page to display blog post from the Post page dropdown list.

Assign Menu

Please go to Appearance–>Menus then find Menu Settings–> Theme Locations at the bottom. Check the Primary Menu then save it. This action will assign the menu “Main Menu” to the location Primary (the main menu) on our theme. You can see more detail at: http://codex.wordpress.org/Appearance_Menus_Screen

Change Permalink

Please go to Permalinks setting: Settings > Permalinks then change the Common settings to Post name. You can see more detail at: http://codex.wordpress.org/Using_Permalinks. After doing these steps, your site will look like our demo, you can move on to process to build your content.

Update Theme

Automatic Update

Please follow these steps to update theme:

Step 1: Hover into username then choose Download
Step 2: Select “License certificate and purchase code”
Step 3: Go to Noo settings> Quick Setup> Enter the key into License Key section> Save changes
Note: When a new version of the theme is released, you will go to Appearance> theme> there will be a message notifying you to update the theme automatically > Click Automatic Update

Import Demo Content

How to Import Yogi Demo Content

Step 1: From Admin Panel, after installing and activating our theme, navigate to Tools, choose Import–> WordPress. Then you click “Install Now” to install WordPress Importer.
Step 2: Click Choose File and browse the demo content .xml file extracted from the .zip file you can download from Themeforest following guide in DOWNLOAD THEME PACKAGE section above. Click Upload file and import to upload the file.

Note: If you have not installed Demo Importer Plugin, you may see the notification message to install the plugin. Click Install Now to install and move on.

Step 3:You will first be asked to map the authors in the file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user. After that, tick “Download and import file attachments” and remember to click “Submit” to complete importing data.
Step 4: WordPress will then import all the posts, comments, and categories contained in this file into your blog.

See guide to import a sample content into a WordPress blog in WordPress Codex.

Note: Not all the content in our demo will be included. Those files might be excluded from the content you can import:

Images: our stocks might not be in the content due to license issues. Instead, we replace with grey images. Please change to your own pretty images for your site.
Sliders, Post and Pages: not all sliders, posts and page in our demo will be consisted in our dummy date when you import. However, we still add some sliders and pages for your reference.

Plugin Installation

Here is list of plugins that will come together with our theme when you activated it. You are recommended to install and activate these plugins based on your own need:

Woo Commerce: It is an e-commerce plugin which is free and very popular. You will need this plugin if you plan to create membership package or online shop.
Visual Composer: The popular drag and drop page builder plugin with intuitive interface to build your content at ease. Save another $33 for this plugin with Yogi.
Contact Form 7: Yogi is fully compatible with Contact Form 7, the free form plugin recommended to create a nice form for your site.
Revolution Slider: Create a responsive or full-width slider with must-see effects.

Please refer to this link to learn more about these plugin:

Extras

After installation Yogi theme, you will see a notification message to activate the required & recommended plugins. Follow the steps to install and activate each plugin:

Click Begin installing plugins → Install Required Plugins item appears→ you choose Install in the left box → tick Plugin to install all plugins→ click Apply to complete installing.

However, after installing plugins, you will have to carry out one further step called activating plugins.

Click Return to Required Plugins Installer→ Install Required Plugins item appears again → click Activate in the left box→ click Plugin then click Apply to complete activating.

If you want to install another WordPress plugin that doesn’t include in our theme. Please following these steps:

Step 1: Navigate to Plugins–> Add New.
Step 2: Under Search, type in the name of WordPress Plugin or descriptive keyword, author, or tag in the search form or click a tag link below the search form.
Step 3: Find the WordPress Plugin you wish to install.

Click Details for more information about the Plugin and instructions you may wish to print or save to help setup the Plugin

Click Install Now to install the WordPress Plugin.

Step 4: You will see the popup window that will ask you to confirm your wish to install the Plugin.
Step 5: If this is the first time you’ve installed a WordPress Plugin, you may need to enter the FTP login credential information. If you’ve installed a Plugin before, it will still have the login information. This information is available through your web server host.
Step 6: Click Proceed to continue with the installation. The resulting installation screen will list the installation as successful or note any problems during the install.
Step 7: If successful, click Activate Plugin to activate it, or Return to Plugin Installer for further actions

Install Theme via FTP

How to install Yogi via FTP

Step 1: Login into your hosting space via an FTP software.
Step 2: Unzip the noo-yogi.zip file and ONLY use the extracted Yogi theme folder.
Step 3: Upload the extracted Yogi Theme folder into wp-content–> themes
Step 4: Activate the newly installed theme by going to Appearance–>Themes and clicking the Activate
Step 5: Then you will see a notification message to activate the required & recommended plugins Woocommerce, Visual Composer, Contact Form 7, Revolution Slider. Follow the steps to install and activate each plugin.

Install Theme via WordPress

How to install Yogi via WordPress

Step 1: Login to your WordPress Admin Panel, navigate to Appearance–>Themes
Step 2: Click Install Themes on the top –> hit Upload
Step 3: Find “noo-yogi.zip” file on your computer and click “Install Now”.
Step 4: Once uploaded, activate the theme. Go to Appearance–>Themes and activate it.
Step 5: Then you will see a notification message to activate the required & recommended plugins: Woocommerce, Visual Composer, Contact Form 7, Revolution Slider. Follow the steps to install and activate each plugin.

Note: If you see this message “Are You Sure You Want To Do This” when installing noo-yogi.zip file via WordPress, it means that you have an upload max file size limit. Try to install the theme via FTP instead, or contact your host to increase the limit.

Requirement For Yogi

To use Yogi theme, you must be running WordPress 4.4 or higher, PHP 5.6 or higher, and MySQL 5 or higher. Follow below checklist to ensure your host can work well with Yogi theme:

Your web host has the minimum requirements to run WordPress.
They are running the latest version of WordPress.
You can download the latest release of WordPress from official WordPress website.
You did create best secure passwords FTP and Database.

Download Theme Package

When purchasing successfully our theme from Themeforest, you will need to download theme package for your use. To download the package, please login to your Themeforest account, navigate to “Downloads”, click the “Download” button in the left of the theme, choose “All files & documentation” to download our theme package to your computer. The theme package includes:

Yogi Theme File: Includes noo-yogi.zip file that consists of everything you need to install the theme.
Document Folder: Includes Yogi Documentation file that helps you get to know about Yogi and guides you to build your site with our theme.
Licensing Folder: Includes the licensing files of Themeforest purchase.
Demo Content Folder: Includes the .xml file you will need to import our demo data.

WordPress Information

Before installing this theme, please make sure you have a working WordPress version already installed. For further guide to install WordPress, please find in below useful links:

WordPress Codex: General info about WordPress and how to install your server.
Instructional Video: How-To video created by Woo Themes
First Steps With WordPress: Multiple topics about WordPress.
FAQ New To WordPress: Popular FAQs about WordPress.

Instruction

Firstly we would love to send our great thanks to you for purchasing Yogi. This documentation covers almost everything to guide you step by step to have your site on air. We encourage you to read all sections thoroughly before you go on. If you still have to cope with any problem around, get our quick support at NooTheme Support Center.

Thanks again and enjoy building your website with Yogi.

Page & Blog

Login/ Register Page

Here are images of shortcodes used to create Login/ Register Page

Membership Page

Here is image of shortcodes used to create Membership Page

1. Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column contains a Text Block shortcode

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Text Block shortcode

About Us Page

Here is image of shortcodes used to create About Us Page

1. Red Row 1

♣ It has a Row shortcode whose style is 2 columns
♣ The first column contains a Single Image shortcode
♣ The second one contains the following shortcodes: 2 Text block shortcodes and a Gap shortcode

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Testimonial shortcode

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column contains a Trainer shortcode

Trainer List Page

Row and Trainer are 2 shortcodes used to create Trainer List Page

Trainer settings:
Columns: The number of shown columns fluctuates between 1 and 4
Grid Style: There are 2 styles which are Masonry Grid and Standard Grid

1. Masonry Grid

2. Standard Grid

Show Category Filter: Tick this box to show category filter. This option is not available to Standard Grid Style.
Order By: This option controls display order of trainers based on Default, Recent First, Older First, Title Alphabet or Title Reversed Alphabet.
Max number of post: The maximum number of posts is shown
Heading/ Sub Heading: These options are not required. It is up to you to show heading and subheading on top of this section.

Class Schedule/ Monthly Schedule Pages

1. Class Schedule Page

There are 2 shortcodes used to create this page. They are Row and Class Schedule

Class Schedule settings:
Default View: There are 2 types of View. They are weekly and monthly view
Schedule Min Time: Enter the minimum start time of schedule here
Schedule Max Time: Enter the maximum end time of schedule
Schedule Height: Enter height of the schedule. If you leave this section blank, the auto height will be set.
Hide Times from schedule: Times selected here will be hidden in the schedule. Note that you should not choose times at which classes take place
Show weekends: Choose Yes or No to Show or Hide Saturday and Sunday
Visibility: Choose devices on which this shortcode is shown or hidden
Class: Enter a unique class name
Custom Style: Enter Css which helps you to change style

2. Monthly schedule

This page has the same shortcodes as Weekly schedule page. Yet, this page has Monthly View instead Weekly View

Home Classic Page

Here are images of shortcodes used to create Home Classic Page

1. Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column contains a Revolution Slider

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣ The column comprises 2 Gap shortcodes and a Row shortcode whose style is 3 columns. Each column contains a Text Block

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column includes a Gap and a Noo Recent Class

4. Red Row 4

♣ It has a Row shortcode whose style is one column
♣ The column comprises 2 Gap shortcodes and a Trainer shortcode

5. Red Row 5

♣ It has a Row shortcode whose style is one column
♣ The column includes a Gap and a Noo Testimonial
Testimonial Title: Enter a title here
Testimonial Image Per Page: The number of testimonial images shown per page
Auto Play: Choose Yes or No
Slider Duration: the time during which slides run
Show Name/ Show Position: Select Yes or No to Show or Hide Name and Position of people who give testimonials
Visibility: Chose Show or Hide this shortcode on devices
Class: Enter a unique class name
Custom Style: Enter Css which helps you to modify the style

Row settings

6. Red Row 6

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Noo Recent News shortcode

7. Red Row 7

♣ It has a Row shortcode whose style is one column
♣ The column contains a Text Block shortcode ( paste this shortcode [noo_membership_package] into this Text Block) and a Gap shortcode

Home Page

Here are images of shortcodes used to create Home Page

1. Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column contains a Revolution Slider

2. Red Row 2

♣ It has a Row shortcode whose style is 2 columns (2/3 + 1/3)
♣ The first column comprises a Gap, Text Block a Row shortcode whose style is 3 columns (each column contains an Icon and a Text Block shortcode)
♣ The second column contains 2 Gap shortcodes and a Single Image shortcode

♣ Display of Red Row 2 on Home Page

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column contains a Text Block shortcode, Row shortcode whose style is 2 columns and a Gap shortcode

1. Column 1 settings

2. Column 2 Settings

♣ The first column contains a Noo Recent Class shortcode
Title: Enter a title here
Columns: The number of columns is shown on this page. It varies from 3 to 6
Class Categories: Choose class categories shown on this page
Trainer: Select a trainer in the drop-down list
Posts Per Page: Enter a number that is equal to the number of Class posts displayed per page
Order By: This option controls the display order of Class posts based on Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Layout Style: There are 2 layout styles

1. Default

2. Info Overlay

Show Info: Choose type of shown information. You can show both Date and Time, Only Date, Only Time or No Date and No Time
Visibility: Choose devices on which this shortcode will be visible or invisible
Class: Enter a unique class name
Custom Style: Enter Css which helps you customize the style
♣ The second one includes a Text Block shortcode

Display of Red Row 3 on Home Page

4. Red Row 4

♣ It has a Row shortcode whose style is one column
♣ The column comprises the following shortcodes: a Gap, a Text Block and a Noo Video Slider
Noo Video Slider settings:
Title: Enter a title here
Post Per Slide: The number of posts is shown per slide
Visibility: Choose devices on which this shortcode is hidden or shown
Class: Enter a unique class name
Custom Style: Enter Css which helps you to customize the style

5. Red Row 5

♣ It has a Row shortcode whose style is one column
♣ The column contains a Trainer shortcode
Columns: The number of columns is displayed
Grid Style: there are 2 styles which are Standard Grid and Masonry Grid. If you select the second style, you will have an extra option to Show Category Filter

1. Standard Grid

2. Masonry Grid with showing category filter

Order By: The display order of Trainers is based on Default, Recent First, Older First, Title Alphabet or Title Reversed Alphabet.
Max Number of Posts: This option handles the maximum number of Trainers shown on this page
Heading/ Sub-heading: Enter a heading/ sub-heading title
Visibility: Choose devices on which this shortcode is shown or hidden
Class: Enter a unique class name

6. Red Row 6

♣ It has a Row shortcode whose style is 2 columns (1/2+1/2)
♣ The first column comprises a Single Image shortcode
♣ The second one contains 2 Gap shortcodes and a Text Block shortcode

7. Red Row 7

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Recent News
Title: Enter a title here
Columns: Choose the number of columns shown on this page. The number varies from 2 to 4
Posts Per Page: The number of posts is displayed per page
Visibility: Choose hide/show this shortcode on devices
Class: Enter a unique class name
Custom Style: Enter Css which helps you to customize the style

8. Red Row 8

♣ It has a Row shortcode whose style is one column
♣ The column comprises 2 Gap and a Call To Action

Row settings

Blog Post Setting

Global Setting

Body Custom CSS Class: Add a custom CSS class to the <body> element. Separate class names with a space.
Page Layout: You can choose Layout of Single Post page, includes Full Width. With Right Sidebar and With Left Sidebar style.

Post Format Setting

Gallery Settings: When selecting Gallery Format, you will have Gallery Setting meta-box to add as many images as you want into your gallery and manage your preview content as Featured Image, First Image on Gallery or Image Slideshow.
Image Settings: When you selecting Image Format for you post, you woll have Image Settings meta-box to choose main image of the post. Set Feature Image as main image for preview content or Choose Your Image if you want to set another image as main image for preview content.
Video Settings: When selecting Video Format, you will have Video Setting meta-box where you can add video URL, and embedded video code, aspect ratio and preview content as Featured Image, Video or Featured Image as Video Thumbnail.

Create A Blog Post

Follow these steps below to create a blog post:

Step 1: In your Admin Panel, go to Post and navigate to Add New.
Step 2: Enter your title and choose Post Format from Format box on the right side which shows different post format options: Standard, Image, Gallery and Video
Step 3: Add your post content in editing field. You can use our shortcode to build your content where needed.
Step 4: Add Categories for the post from the Categories box on the right side. You can add new category or choose from existing categories. Check the box to select Categories for your post. Add relevant Tags for your post in the Tags box, set Featured image on the right side and other setting from the sections below Editing field.

If you need detailed guide about post settings in WordPress, please find in WordPress Codex.

Step 5: All done, click Publish to publish your post.

To make changes to Post list and Single post, please go to Customizer > Blog in Admin panel or you can refer to this link to grasp instructions of modifying Post list and Single post:

Customizer

Page Setting

We have created some specific Yogi page settings which will help you to build splendid pages for your site. Following the list of options below to see how they work:

Body Custom CSS Class: Add custom CSS class to <body> elements.
Hide Page Title: If you checked, page title won’t be displayed on header of your page.
Heading Background Image: This option allows you to select a unique heading image for your page.
Enable Menu Center Vertical: This option will help you to have menu bar floating on your header as Home default in our demo.

Page Templates

We have built some specific Yogi page templates for you. Here is the list and their short description:

Default Template: The default template can be used for any page. You can customize and add shortcode to build Homepage, Contact, Blog…
Full- width Template: This template is set to be full-width that can be used for Homepage, About page….
Page with Left Sidebar: You can have your page with left sidebar with this template. Use this template for your blog or whichever page you want to have sidebar. Select Page sidebar to display in sidebar position in Sidebar box.
Page with Right Sidebar: Also with sidebar but the right one, and of course, its use is quite the same. Choose this template for your blog whichever page you want to have sidebar. Select Page sidebar to display in sidebar position in Sidebar box.

Create New Page

Please follow these steps to create your pages:

Step 1: In Admin Panel, choose Page, click “Add New” on top then enter your page title. You can custom slug of the page in Permalink field appeared after entering title.

If you need to know more about Pages in WordPress, use the Help tab in the upper right of your screen.

Step 2: In Page Attributes box on the right side, choose your Parent page. It is set by default as no parent. Pages are usually ordered alphabetically, but you can choose your own order by entering a number in Order field.
Step 3: Also in Page Attributes box, choose your Page Template in dropdown list. See below Page Template list for more detail.
Step 4: Start editing your page content in the editing field. You can choose to edit your content using Visual or Text editor. To build content for you page you will need to our provided Shortcodes.
Step 5: Make other settings for the page in meta-boxes under editing field. Once you get your settings done, click Publish your page.

Shortcode

By Yogi Shortcodes

Instead of writing lines of code to build elements, we built Yogi with number of premade shortcodes that enable you to create many elements you see in our demo in fingertips. By installing Visual Composer (the page builder plugin integrated in the theme package), you will have the Visual Backend Editor where every shortcodes are displayed visually before your eyes and easily generated in several clicks. In addition to Default Visual Composer shortcodes, Yogi comes with 6 specific shortcodes. To generate the shortcodes, go to Backend Editor, click the “+” icon to add shortcode. Navigate to Yogi tab to find a shortcode you want to use. You can add those shortcode to any pages or posts for your own use.

There are 6 Yogi custom Shortcodes. Below are the list of 6 shortcodes and their attributes:

Noo Recent News shortcode

Noo Recent News shortcode is used to show recent post on Homepage.

Detail option:

Title: Enter text which will be used as element title. Leave blank if no title is needed.
Columns: The columns attribute controls width of columns should be displayed on Recent News shortcode. You can change number of columns from 2 to 4 columns
Post per page: This option allows you to select how many posts to show on one.
Excerpt Length: The number of characters displayed on post selection.
Visibility: Select devices on which the post will be displayed. You can choose Show/Hide on Phone/Tablet/PC devices.

Noo Recent Class Shortcode

Use this shortcode if you want to show the latest class items as in Home Classic page in our demo.

Detail option:

Title: Enter text which will be used as element title. Leave blank if no title is needed.
Columns: The columns attribute controls width of column should be displayed on Recent Class shortcode. You can choose from 3 to 6 columns.
Class Categories: Select class categories to get recent class item from certain class categories. You can select All just to get latest classes.
Trainer: pick trainers you want in the drop-down list here
Class Categories: Select class categories to get recent class item from certain class categories. You can select All just to get latest classes.
Post Per Page: This option allows you to select how many posts will be displayed on one Recent Class page.
Order by: Order of the classes can be recent first, order first, title alphabet or title reversed alphabet
Layout Style: This option will help you to choose Layout Style for Recent New shortcode. That includes Default and Info Overlay
Show Info: You can choose Show Date&Time of the class, Only Date, Only Time or No Show Date&Time

default layout

Default Style

default layout

Info Overlay

Visibility: Select devices on which the post will be displayed. You can choose Show/Hide on Phone/Tablet/PC devices.

Noo Video Slider

This shortcode is used to show video post on Home page.

Detail option:

Title: Enter text which will be used as element title. Leave blank if no title is needed.
Post Per Slide: This option allows you to the number of video post which will be displayed on one slide.
Post Per Page: This option allows you to select how many posts will be displayed on one page.
Visibility: Select devices on which the post will be displayed. You can choose Show/Hide on Phone/Tablet/PC devices.
Class: Enter a unique class name.
Custom Style: Enter inline CSS.

Noo Testimonial Shortcode

This shortcode allows you to show all testimonials with testimonial slider. You can see this shortcode on Home Classic in our demo.

Detail option:

Testimonial Title: Enter text which will be used as element title. Leave blank if no title is needed.
Testimonial Image Per Page: The number of customer’s images will be displayed per page.
Auto Play: If Yes, your testimonial slider will be automatically transmitted on your page.
Slider Duration: The duration which one testimonial is automatically transmitted on your page. Note: with Mini-seconds unit (1000=1 second).
Show Name/ Show Position: This option allows you to display/not display name/ position of customers on your page.
Visibility: Select devices on which the post will be displayed. You can choose Show/Hide on Phone/Tablet/PC devices.

Noo Events

Detail option:

Choose Style: The style can be Grid or List
Post per page: The number of posts per page
Event categories: pick event categories in the drop-down list here
Event locations: opt event locations in the drop-down list here
Order Events By: Start Date or Added Date
Order Events Direction: Descending (from the newest event to the oldest one) or vice versa, Ascending (
Show pagination: opt Yes or No to show or hide pagination
Hide past events, hide events time, hide events date, hide events location: tick these boxes to hide these factors
Visibility: Select devices on which the post will be displayed. You can choose Show/Hide on Phone/Tablet/PC devices.

Noo Trainer

Use this shortcode if you want to get list of trainers to display on any page as Homepage in our demo.

Detail option:

Columns: Number of columns of trainers displayed. The columns attribute controls width of columns should be displayed on Trainer page.
Grid Style: You can choose layout style for trainer page that includes masonry grid and standard grid.
Trainer Categories: Select categories of trainers to display on your page. Select All to get latest trainers listed.
Show Category Filter: If checked, you will have category filter bar (as in trainer listing page) above trainer list that will help you to filter trainers by category.
Max Number of Post: The maximum number of trainers will be displayed on your page.
Heading: Enter your title of trainer list. Leave blank if no title is needed.
Sub-Heading: Enter your subtitle here. The subtitle will be display below title.
Visibility: Select devices on which the post will be displayed. You can choose Show/Hide on Phone/Tablet/PC devices.

Product Masonry Shortcode

Use this shortcode if you want to build shop masonry page.

Detail option:

Categories: Select categories of which product items are displayed on shop page.
Product Per page: This option allows you to choose number of products that will be displayed per page.
Columns: Number of product columns. The column attribute controls the width of column should be displayed on Product Masonry page.
Products Ordering: This option will help you arrange your products following different order criteria including Publish Date, Modified Date, Random, Alphabetic, Popularity Rate and Price.
Sorting: This option will help you arrange your products in ascending or descending order regarding order criteria you set above.
Visibility: Select devices on which the post will be displayed. You can choose Show/Hide on Phone/Tablet/PC devices.

Class Schedule Shortcode

Use this shortcode if you want to build Class Schedule page

Schedule Min Time: This is time start of schedule.
Schedule Max Time: This is time end of schedule.
Schedule height: Input height of the schedule, leave blank for the auto height
Hides Time from schedule: Selected hours will be hidden in the schedule. Please notice that you should not opt hours at which classes are operating as it may lead to the wrong calculation.
Visibility: Select devices on which the schedule will be displayed. You can choose Show/Hide on Phone/ Tablet/PC

Bottom Bar

The bottom bar can be customized from Customizer–>Footer tab. To have the bottom bar with Copyright text and social icon like in our demo, add custom HTML into the Bottom Bar Content field.

Add Footer Widgets

Step 1: From Admin panel, navigate to Customizer–> Footer, set the footer column number from dropdown list. Number of columns can be from 1 to 4. You also can select None to leave it blank (no footer content).
Step 2: To add widgets into footer, you can opt to add in Customizer–> Widgets tab directly or come back to Admin panel –> Appearance –> Widgets
Step 3: In Customizer –>Widget, you will see number of Noo – Footer column #i tab corresponding to number of columns you select in step 1. In each tab, hit Add a Widget button and choose Widget from widget list.

If you add widget in Appearance à Widgets, you will see Noo – Footer Column #i widget section on the right hand side. Your widgets are located on the left hand side. Simply drag and drop the widgets you want from the left side into the sliding bar widget sections on the right side.

Step 4: Don’t forget to save changes after you customize any widget in footer.

Yogi Widget Sidebar

Widgets are frequently used to create sidebar or footer. Beside default WordPress widgets, Yogi added some sidebar widgets. To view all Widgets, navigate to Appearance–>Widgets. You can drag and drop widgets from left sidebar list into footer columns or sidebars as you want. Here is the list of Yogi Custom Widget you may want to use to have sidebar and footer like in our demo site.

Class Slider

This widget is used to show class items as class slider. It can be display on Blog page.

Noo Class Categories

This widget is used to show list of class categories on sidebar.

Noo Event

Use this widget if you want to show event items on sidebar. You can select Event Status, Order Events and Order Direction for event item.

Noo Event Categories

This widget allows to show list of event categories on sidebar.

Create Sidebar

Step 1: Navigate to Appearance–> Sidebar Generator and click the Add New button, enter sidebar title then save. You can add as many sidebars as you need.
Step 2: Once you are done, you need to add Widgets to the sidebar you just created.
Step 3: Navigate to Appearance–> Widgets and find your sidebar on the right side.
Step 4: On the left hand side you will see all the widgets you can use, simply drag and drop the widget you want into your sidebar on the right hand site.
Step 5: Make sure you click Save to save the widgets added to your sidebar.

Theme Customizer

Blog

Making some adjustments in this section will have some impacts on Post list and each post on Blog page

1. Post List

Blog Layout: The layout of Post list is Full-width , With Right Sidebar or With Left Side bar. Choose the first style if you do not want sidebar to be displayed on Blog page. In contrast, the last ones will let sidebar be shown on the page
Blog Sidebar: choose a sidebar that will be shown on Blog page
Heading Title: Enter heading title of Blog Page
Heading Background Image: Upload/ Remove a heading background image
Show Post Meta/ Readmore link: Tick these boxes to show post meta and readmore button on the post list
Excerpt Length: Excerpt is a short paragraph or an extract taken from the blog post. The number you enter here is corresponding to the number of words included in this excerpt

2. Single Post

Widgets

This section helps you to make changes to sidebars and widgets of Footer, namely Noo-Top Footer Noo- Footer Column #1,2,3 and 4

Footer

Footer Columns (Widgetized): You can adjust the number of columns shown on Footer. The number fluctuates between 0 and 4
Bottom Bar Content: Enter content shown on Bottom Bar of the footer

Header

1. Header option

Enable User Menu: Turn this button on to show user menu on navigation bar
Enable Header Minicart: Turn this button on tho show Minicart on navigation bar

2. Navigation Bar

NavBar Position: Position of NavBar includes Static Top and Fixed Top. Static Top, in this case, the NavBar does not move. It means that when you scroll down on the page and let the mouse pass the NavBar, you will not see the NavBar displayed on top. However, Fixed Top will allow you to see the NavBar when you scroll down the mouse
Use Custom NavBar Font and Color: Turn on this button to change NavBar Font and Color. Then you can change NavBar Font, Font Size, Link Color, Link Hover Color.
Transform to Uppercase: Tick this box so that Header font will transform into Uppercase

3. Logo

Yogi allows you to add image file or use text for logo. If turning off Use image for Logo button, you will have options to enter your site name, select logo font from Google font, font size, font color, uppercase for text logo and set up overlay for the logo font. If turning on this button then you can Upload a logo for display on desktop and a Retina logo for display on devices supporting retina, adjust image height and set up overlay for the logo.

1. Overlay for Logo

2. Without Overlay

4. Navbar Alignment

NavBar Height: This option controls height of the navigation bar
NavBar Link spacing: Adjust space between links on the navigation bar
Mobile Icon size: This option determines size of the icon on mobile

5. Top Bar

Enable Top Bar: Enable this option to show top bar on the top of your site
Custom Content (HTML): Input the content which will be shown on the top bar

Typography

You can customize your Typography settings here. Yogi integrated all Google Fonts. See font preview at Google Fonts.

Turning Use Custom Fonts and Custom Font Color buttons on, you will have the following options:

1. Headings

Headings Font: Select a type of heading font
Font Color: Pick a color for headings
Transform to Upper case: If you tick this box, headings such as <h1><h2><h3> will be in uppercase

2. Body

You can make adjustments to Body font, Font color and Font size

Design and Layout

1. Site Layout

You can set Style & Layout for your site. Yogi is equipped with two layout styles including: Boxed Layout and Fullwidth layout

If you select Boxed Layout, you will have further options:
Site Width, Site Max Width: these options handle width of the site
Background color, Background Image: If you opt yellow for background, background of your site will be filled with this color. However, when you set up background image, background of the site will be replaced with a new image.
Background repeat: Background Repeat will work effectively if you use patterned background image. When you let the image repeated, its copies will cover the whole background.
Background image attachment: There are two types that are Fixed image and Scroll with site. Fixed image means that when you scroll down on the page, you will still see the background image. Yet Scroll with site does not allow you to do this.
Auto Resize: if you turn on the button, image will appear in the whole background area. Yet, turning off this button will make background image be displayed only in a part of one side. Position of background image in this case may be left top, left center, left bottom, center top, center center, etc of the side. It depends on your choice in Background Image Alignment box

2. Icon theme

Hide Icon theme: Turn this button on to hide theme icon
Custom Icon theme: Select a theme icon

3. Color

Select a primary color for links and various elements on your site

Site Enhancement

Back To Top Button: Back To Top Button will appear in the right bottom when users scroll down. Enable/Disable as your preference.

Enable Page Heading: Page Heading will appear on the header of page. When you enable this option, you will have header background image on blog page, shop page or another page…

Enable Breadcrumbs: Turn this button on so that the breadcrumb can be shown

Customizer

Our Theme customizer works as the original WordPress customizer feature but be much more versatile. All our theme options can be changed in our Customizer on the left side and live previewed instantly on right side. With this intuitive interface, you can customize your website as you wish at your fingertips without writing a line of code.

To start using Customizer in Admin Panel, navigate to Customizer, you will be redirected to a live preview screen where you can change options on left side and preview your site on right side promptly. All your change will not be committed and viewed on your site until you click Save & Publish on top right of Customizer bar. You also are able to Export your setting in Customizer and Import to apply for other sites.

Site Enhancement

Custom Favicon: A favicon is a simple square image viewable in browsers for users to identify your website among many tabs. Ideally, it should be a 32×32 pixels or a 16×16 pixels. Most modern browsers can display a favicon in PNG format but older versions of Internet Explorer may not. To make sure your favicon be shown nicely, it is recommended to be in .ico format. Add your favicon in our customizer simply by clicking “Open Library” button in “Custom Favicon”, selecting your existing image or uploading new image. Please see the below illustrative image to better understand function of the favicon. After choosing the favicon, you will click Save and Publish. Then when you come back to your site, you will see an image displayed on the tap of your website. It is clear that by dint of the favion, you can distinguish your website`s tab from other tabs more easily.

Back To Top Button: Back To Top Button will appear in the right bottom when users scroll down. Enable/Disableas your preference.
Enable Page Heading: Page Heading will appear on the header of page. When you Enable this option, you will have header background image on blog page, shop page or another page…
Enable Breadcrumbs: Breadcrumbs will appear on the header of page. Enable/Disable as your preference.

Design & Layout

Style Layout:This option will help you set Style & Layout for your site. We provide two layout styles including: Boxed Layout and Fullwidth layout. With Boxed layout, you will have additional options for side width, max site width, background color or image setting, background repeat, background image alignment, auto resize.

If you opt blue for background, background of your site will be filled with blue.

However, when you set up background image, background of the site will be replaced with a new image.

Color: This option allows you to set the color for links and various elements for your site.

Auto Resize: if you turn on the button, background image will appear in the whole sides of pages. Yet, turning off this button will make background image be displayed only in a part of one side. Position of background image in this case may be left top, left center, left bottom, center top, center center, etc of the side. It depends on your choice in Background Image Alignment box. In our example, the background image will be placed at left top of the left side.

Primary Color: you can change primary color by this option. There is table of color, which allows you to select color you want or enter your color code on box.

Typography

You can customize your Typography settings here. Yogi integrated all Google Fonts. See font preview at Google Fonts.

Custom Fonts: Enable Custom Fonts to customize font, font size and other settings for heading and body text.
Custom Font Color: Enable Custom Font Color to customize font color of heading and body.
Headings: If checked on Transform to Uppercase, you will have heading <h1> <h2> <h3> which is uppercase type.
Body: You can change font size of body by selecting font size from dropdown list.

Header

Customize settings for Heading including Navigation Bar, Logo and NavBar Alignment.

Navigation Bar

This section adjusts settings for Navigation Bar. You also can customize some settings for the Toggle Button on Mobile in this section.

NavBar Position: This option allows you to select type of for NavBar, including Static Top or Fixed Top. Static Top, in this case, the NavBar does not move. It means that when you scroll down on the page and let the mouse pass the NavBar, you will not see the NavBar displayed on top. However, Fixed Top will allow you to see the NavBar when you scroll down the mouse.
Use Custom NavBar Font and color: If On, you can change font, font size, link color and link hover color for header font.

For example, if you decide on green for Link Hover then the Navigation Bar will have transformation. When you let your mouse hover over menu pagelink displayed on Navigation Bar, it will turn green.

Logo

Yogi allows you to add image file or use text for logo. You will see button to turn On/Off Use Image for Logo.

If Off, you will have option to enter your site name, select logo font from Google font, font size and color for your logo.

If On, you will have two logo images to upload. The first one is for standard desktop while the second one is for retina ready devices (optional). Click the Upload button and select your logo file. Upload your logo image and retina one (a larger image, with double the amount of pixels that your image will be displayed at). Enter your image height you want to display on navigation bar and we will do the calculation part for you to make it look great on all screen size.

NavBar Alignment

Adjust height of navigation bar, space between links and size of mobile navigation button.

Top Bar

Top Bar lays on top of your site, above Navigation Bar. It is suitable for placing contact information and social media link. Enable to controls its layout and content.

Enable Top Bar: If On, you will see Custom Content (HTML) field where you can enter HTML content for Top Bar.

Footer

Footer contains Widgetized area and Bottom Bar. This section describes all settings for Footer in your site.

Footer Columns (Widgetized): set the footer column number from drop-down list. Number of columns can be from 1 to 4. You also can select None to leave it blank (no footer content).
Bottom Bar Content: Add content shown in bottom bar.

Widgets

This section enables you to add and customize Widgets on your preview site. It includes number of Footer Columns due to setting in above section: Footer settings.

Footer Column #i: You will see number of footer columns corresponding to footer settings. Add text, image or other widget by hitting Add a Widget button.

Blog

Post List

Choose layout setting for your Post List.

Blog layout: It can be full-width, right sidebar or left sidebar. If you choose layout with sidebar, select blog sidebar for your blog.
Blog sidebar: Choose a sidebar for your blog pages.
Heading Title: Enter title for blog page here. Your title will be displayed in center of background image.
Heading Background Image: You will have background image on header of blog page if you click “Select Image” button then choose your image.
Show Post Meta: Check the box to show post meta of Blog page.
Show Read more link: Check the box to show read more link.
Excerpt Length: Excerpt is a short extract or a short passage taken from the post. Length of the excerpt is determined by number of words. Therefore, if you opt a specific number like 23, the number of words contained in an excerpt will be equivalent to 23.

Single Post

Post Layout: Choose Post layout same as blog layout by checking the boxes beside options or uncheck to choose another layout.
Show Post Meta: If checked, post me-ta will display on each post. Similarly, you can choose show/hide post tags and author’s bio.
Enable Social Sharing: Enable/Disable Social Sharing. If enable, you enable visitor to share your post by Facebook, Twitter, Google+, Pinterest and LinkedIn.

Class

Classes Listing

This section will help you to configure Class Listing page. Firstly assign a page as your class listing page from dropdown list. Once you choose a page as Class listing page, its slug will be your Class Listing’s main slug.

Class Page: Select a page as Class listing page from dropdown list.
Class Heading Title: Enter heading title for class page here.
Class Heading Background Image: Choose heading background image for class page. It will be displayed on header of class page.
Classes List Layout: It can be With Right Sidebar and With Left Sidebar. You need to choose a sidebar for class page.
Class List Style: That includes Grid style and List Style. You can choose style for class. With Grid style, you can choose number of column to display classes. It can be 2 or 3 columns.

For example, you opt 2 columns. Coming back to Class page, if you click the left small square (Grid Button), classes will be separated into 2 columns.

Single Class

Layout: Single Class inherited layout of Classes Listing.
Enable Social Sharing: Enable/Disable Social Sharing. If enable, you enable visitor to share your post by Facebook, Twitter, Google+, Pinterest and LinkedIn.

Event

Event Listing

Event page: Select a page as Event Listing page from dropdown list.
Events Heading Title: Enter title for events page here.
Events Heading Background Image: You can choose heading background image for event page. It will be displayed on header of events page.
Event List Layout: It can be Full Width, With Right Sidebar and With Left Sidebar. If you choose layout with sidebar, you need to choose sidebar for class page.
Number Columns: The column attribute controls width of column should be displayed on Event Listing page.

Single Event

Layout: Single Event inherited layout of Event Listing.
Enable Social Sharing: Enable/Disable Social Sharing. If enable, you enable visitor to share your post by Facebook, Twitter, Google+, Pinterest and LinkedIn.

Trainer

Trainer Page: Select a page as Trainer page from dropdown list.
Grid Columns: The column attribute controls width of column should be displayed on Trainer Page.
Items Per Page: This option allows you enter the number of trainers which will be displayed per page.

WooCommerce

When WooCommerce is installed on your site, you will be able to change settings for shop pages and products in Customizer.

Shop Page

Shop Heading Background Image: You can choose heading background image for shop page. It will be displayed on header of shop page.
Shop Layout: It can be full width, with right sidebar and with left sidebar. If you choose layout with sidebar, you need to choose sidebar for event page.
Products Per Page: This option allows you enter the number of products which will be displayed on per page.

Single Product

Product Layout: It inherited from shop page layout. You can choose layout for single product on Shop Page section. If you want to change to different layout, uncheck the Same as Shop layout box to choose another option.

Custom Code

In this section you can add custom JavaScript and CSS to your site. You Google analytics tracking code should be added to Custom JavaScript field.

Import/Export Setting

All themes from NooTheme share the same theme settings structure so you can export then import setting from one theme to another conveniently with our any problem.

Import Settings: Click Upload button then choose a JSON file (.json) from your computer to import setting to this theme. All the settings will be loaded for preview here and will not be saved until you click button “Save and Publish”.
Export Setting: Simply click Download button to export all your settings to a JSON file (.json). You then can use that file to restore theme settings to any theme of NooTheme.

Woocommerce

Membership Page

To set up a page as Membership page to show all membership packages, create a new page. In Editor field, simply add below class to have the Membership page as in our demo.

[noo_membership_package]

Shop Masonry page

To set a page as Shop Masonry page to show all products, create a new page. Then use Visual Composer you can add Product Masonry shortcode for page. This shortcode will help you to show all product with masonry style.

Shop Page

To set up a page as Shop page to show all products, create a new page. From admin panel, navigate to Woo Commerce > Settings. In Products tab, navigate to Display sub-tab on the top, here you can find your page from dropdown list to set as Shop page.

Product Settings

Body Custom CSS Class: Add custom CSS class to <body> elements.
Product Data: Yogi provides two packages which you can choose:
- Product Data: Simple Product –> Choose this option if you want to create product on shop page.
- Product Data: Membership Package–>Choose this option if you want to create membership package which students can select to join yoga class.

Create Membership

Yogi allows you to create membership packages with different price, duration and features.

To create a membership package, please follow these steps:

Step 1: Navigate to Products in your WordPress admin sidebar, click Add New to create a new product.
Step 2: Enter title of your membership then scroll down to Product Data section and select Membership Package to set it as a membership package, which will not appear in your shop page later.
Step 3: When you set the product as Membership Package, you will have certain membership settings.

Price:the price of membership

Duration: duration of membership counted by days

Sub-title: the sub-title such standard, premium will be displayed on top of membership package

Package Features: those features will be displayed in the body of each membership package in membership pricing table.

Step 4: All done, save and Publish.

Note: In Products section, there is a Star icon and if you mark this, the product will be considered to be a featured one. This is also true of membership package. When a featured package is created, it will be displayed distinctively on the page. In our demo, we suppose the monthly membership package is featured. As you can see, this package will be more distinctive than other ones when they are shown on the page.

So when you view layout of packages displayed on our demo site, you may ask us if it is possible to change order of products or packages when they are displayed on the site. For instance, you want to place the Monthly membership into the first position, in front of Single Class. The answer is Yes.

Navigate to the row below Products > click Sort Products. This action will bring the result you desire. Subsequently, when you move the mouse to areas of products, you can see an icon constituted by up, down, left and right arrows. Now please press the left button of the mouse and drag the product to a new position you want. Do not forget to click Apply button at the bottom of the page. Finally, return to the site to check whether the product or package is displayed in the right place or not.

Create a New Product For Shop

To create a new product, please follow these steps:

Step 1: Navigate to Products in your WordPress admin sidebar.
Step 2: Click Add New to make a new product. Create a title, and insert your product content in the editing field. You can use any of our shortcode builder elements inside the product.
Step 3: Add Categories from the right side. To assign it to the product, check the box next to the category name.
Step 4: Add Tags from the right side. Type the name of the tag in the field.
Step 5: Select featured image for product by hitting button “Set featured images”. You can then select product images to add into Product Gallery
Step 6: Scroll down your mouse, you will see Product Data option. Remember to choose Product Data: Simple product.
Step 7: Once you have finished, click “Publish” to save your product.