Automatic Update

Only by carrying out steps on Envato market and in Admin Panel > NOO settings > Quick Setup can you update the theme automatically:

• Step 1: Hover over username then choose Download
• Step 2: Select “License certificate and purchase code”
• Step 3: In Admin Panel, choose NOO settings > navigate to Quick setup tab > Enter code into License key
• Step 4: 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

Visual composer is a drag and drop frontend and backend page builder plugin that equips you with more than 40 elements (also called shortcodes) to design your page with ease. In addition to these predefined elements, Hermosa has extra 21 ones helping you to create many desirable pages. To generate the shortcodes, go to Backend Editor, click the “+” icon to add shortcode. Navigate to Noo Hermosa tab to find a shortcode you want to use. You can add those shortcodes to any pages or posts for your own use

Note: In some cases, when you add an element and edit it, you should edit Row settings at the same time

 Row settings includes:
• General:
Using Container: if you check this box, container`s width will be 1170px.
Row stretch: In our demo, we set Default in this section. Besides Default, you can select Stretch row, Stretch row and content, stretch row and content (no paddings). If opting these ones, the whole content in Red row 2 will disappear when it is shown on the site.
Full height row: when you tick this box, row will be set to full height.
Use video background: If this box is checked, video will be used as row background.
Parallax: There are three options for you:
None: image without parallax effect
Simple: image with parallax effect. It means that the image will move when you let the mouse scroll on it
With fade: image with parallax effect but move effect of the image is not as clear as that of Simple style.
Note: Two options Use video background (tick this box) and Parallax (Simple and With fade) will avail in some cases. For example, if font color is white and you do not use video background or Simple/ With Fade Parallax then visitors of you site may find it difficult to read white words and phrases. You know,  white words on white background. No one can figure out those words in this case!
Design Options:
CSS box: you can change width of padding, border and margin here
Background color: opt color for background hereBelow background color section, you will have an option to upload the background image and opt styles of background image: theme default, cover, contain, no repeat and repeat.
Cover: Scale the background image to be as large as possible so that the background area will be completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.
Contain: Scale the image to the largest size such that both its width and its height can fit inside the content area.
No repeat: Size of the image will not change when it is placed in background area.
Repeat: Size of the image will also be as same as that of the original one; however, then many replicates of this image will be established in background area.

1. Noo Product

This shortcode is used in creating Home Page 1
Title: Enter a title
Sub Title: Enter a sub title
Choose Categories: Select categories in the drop-down list
Order By: Display order of products are based on Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Configs Column Slider: The number of shown columns fluctuates between 1 and 5
Auto Slider: Choose True or False
Posts Per Page: The number of posts is shown per page
Button: Click on Select URL to give a name and URL to the button

2. Noo Event Slider

This shortcode is used in Home Page 2
Title: Enter a title
Sub Title: Enter a sub title
Choose categories: Select categories in the drop-down list
Order By: This option handles the display order of Events based on Recent First, Older First, Title Alphabet or Title Reversed Alphabet.
Posts per page: The number of events is shown per page
Button: Click on Select URL to enter link and name of the button

3. Noo Title

4. Noo Trainer

It is one of the shortcodes used to create Home Page 2
Title: Enter a title here
Sub Title: Enter a sub title
Columns: The number of shown columns fluctuates between 1 and 4
Trainer Categories: Choose trainer categories here
Show Category Filter: Check this box to show category filter
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 Trainer: This option places a limit on number of shown trainers

5. Noo Class Grid Slider

This shortcode is used to build Homepage 1

Title: Enter a title here
Sub Title: Enter a subtitle
Layout Style: There are two kinds of layout. They are Grid and Slider
Auto Play Slider: This option is available if you select Slider style
Show Info: Show Date & Time, Only Date, Only Time or Show No Date&Time
Column: The number of columns fluctuates between 1 and 4
Class Categories: Choose class categories in the drop-down list
Order By: This option handles the display order of classes based on Default, Open Date, Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Max Number of Class: The maximum number of classes is shown

6. Noo Class Schedule

It is one of the shortcodes used to create Home Page 1
Title: Enter a title here
Sub Title: Enter a sub title
Default View: Select Weekly or Monthly VIew
Schedule Min Time: Select the start time of Schedule
Schedule Max Time: Select the end time of Schedule
Schedule Height: Input height of schedule. Leave blank for auto height
Hide Times From Schedule: Select times which will be not be shown in schedule
Show Time Column: Choose Yes/No to show/hide Time column
Show weekends: Choose Yes/No to show/hide weekends
Show Exports: Choose Yes to show Export your schedule to iCal.

7. Noo Event Calendar

This shortcode is used to create Event Calendar Page

Title: Enter a title
Sub Title: Enter a sub title
Show Weekends: Choose Yes or No to Show or Hide weekends
Show Export: Choose Yes or No to show or hide export

8. Noo Counter

This is one of the shortcodes used to create Home Page 1
Upload Icon: Upload an icon
Import Number: Enter a number here
Title: Enter a title

9. Short Introduction

This one is used to create Home Page 1
Upload Icon: Upload an icon
Title: Enter a title
Description: Give a short description
Link: Click on Link to enter title of link and the link

10. Noo Contact Form

This shortcode is used in building Home Page 1
Title: Enter a title here
Description: Give a short description
Select Contact Form: Select a contact form which is created in Dashboard/Contact

11. Noo Video

This shortcode is used to build Home Page 1
Title: Enter a title
Description: Give a short description
Choose Style: Select Style One or Style Two
Thumbnail Video: Upload an image
Import Video ID: Enter ID of the video
Video Type: There are 2 types which are Youtube and Vimeo

12. Noo Gallery

This is one of the shortcodes used to create Home Page 1
Title: Enter a title here
Sub title: Enter a sub title
Categories: Choose gallery categories
Limit: This option places a limit on number of shown galleries
Choose Columns: The number of columns varies from 2 to 4

13. Noo Partner

This one is used to create Home Page 1
Limited Post Of Slider: This option restricts the number of shown sliders. The number varies from 4 to 6
Upload Images: Click on + icon to upload images
Custom Links: Input Links of the image and these links are separated by Enter
Custom Link Target: When you click on the image, it will direct you to the same or a  new window
Auto Play: Choose Yes or No so that sliders can automatically play

14. Noo Blog

This shortcode is used to build Home Page 1 page
Title: Enter a title
Sub title: Enter a sub title
Style Blog: Select Style 1 or 2
Data Source: Data can be taken from Category, Tags or Posts
Categories: Select Categories in the drop-down list
Order By: The display order of blogs can be based on Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Config Columns: The number of columns fluctuate between 2 and 5
Posts per page: The number of posts is shown per page
Box Shadow: Choose Yes/ No to show/hide Box Shadow
Excerpt Length: The number of words is included in the excerpt
Choose Button: There are 3 choices which are Hide Button, Infinite Scroll and Custom Link
Link: Click on Select URL to enter title and URL of the button

15. Noo Mailchimp

Title: Enter a title here
Sub Title: Enter a subtitle
Note: In order that Noo Mailchimp can function properly, you will need to install and activate Mailchimp For WordPress plugin. Then you will paste these codes into Admin panel> Mailchimp For WordPress> Forms> Fields:
<div class="mc_footer">
<input type="email" name="EMAIL" placeholder="Email Address" required />
<input type="submit" value="subscribe" />
<i class="ion-ios-paperplane"></i>
</div>

16. Noo Testimonial

This one is used to create Noo Testimonial

Choose Style: There are 2 styles
Upload Image: This option is available to Style One
Posts Per Page: The number of posts is shown per page
Auto Play: Choose Yes so that the slider can automatically play

17. Price Table

This shortcode is used to create Home Page 2

Choose Style: There are 2 styles
Title: Enter a title
Sub Title: Enter a title
Price: Enter a price
URL Link: Click on Select Link and enter link and title
Click on + icon to add sections. Each one will have an option called Title

18. Noo Single Service

Noo Single Service Settings:
Choose Style: There are 2 styles
Title: Enter a title
Description: Give a short description here
Choose Align: Texts can be Left or Right Alignment
Icon: Select an icon here
Background Icon Color: Choose background color for the icon

19. Noo Multiple Service

It is one of the shortcodes used to create Home Page 2
Title: Enter a title
Sub Title: Enter a sub title
Image: Upload an image
Click + to add sections and click  on triangle icon to complete the following options:
Title: Enter a title
Description: Enter a short description
Icon: Click the arrow icon to choose one of these icons
Background Icon Color: Select a background color of the icon

20. Noo Info

This shortcode is used to create Contact Us Page
Icon: Click on arrow to select an icon
Description: Give a short description here

21. Noo Find Event

Noo Find Event Settings:
Show Date/ Show Search/ Show Category: Choose Yes to show these Search items

The Footer is composed of 3 parts which are Footer Top, 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 and 4 sidebars belonging to Footer: Noo Top Footer, Noo – Footer Column #1, Noo – Footer Column #2 and Noo – Footer Column #3

1. Noo Top Footer

• Drag Noo Information widget on the left sidebar to this sidebar
• Click on triangle icon to complete options such as:
Link Image: Enter link of the image
Image: Choose an image to upload
Select Menu: Select a menu in the drop-down list. In our demo, we call it Menu Footer Top
To learn more about creating a menu, please refer to this source: Set Up Menu
Facebook, Google, Twitter,…: Enter link of social media
• Click Save

2. Noo – Footer Column #1

• Drag Text and Mailchimp Sign-Up Form widgets to this sidebar
• Text widget: Enter title and content
• Sign-Up Form widget: Enter a Title
• Click Save

3. Noo – Footer Column #2

• Drag Text widget to this sidebar
• Text widget: Enter title and content
• Click Save

4. Noo – Footer Column #3

• Drag Noo Instagram widget to this sidebar
• Complete options of Noo Instagram, including:
Title, Instagram username, Number, refresh hour and Randomise (enter True so that photos will be in a random order after you refresh the page. Meanwhile, order of photos will not change when you enter False)
• Click Save

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 2 parts which are menu area and logo
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

1. Classes Listing

Options in Class section serve Classes Page
Class Page: Choose a Classes Page in the drop-down list
Class Heading Title: Enter a heading title
Class Heading Description: Enter a short description for heading
Classes Heading Background Image: Change or Remove Heading Background Image
Class List Layout: There are 3 types of layout (Full width, With Left/ Right Sidebar)
Class List Sidebar: Choose a sidebar shown on Classes Page
Class List Style: There are 2 styles which are Grid and List
Show Class Date/ Class Time/ Class Trainer/ Class Address: Check these boxes to show the corresponding items
Number Class: The number of classes is shown
Order Class By: The display order of classes is based on Open date or Added Date
Order Direction: The latest/ oldest classes are shown first
Filter Title: Enter a filter title
Show Level Filter/ Category Filter/ Trainer Filter/ Filter By Days: Check these boxes to show the corresponding items

2. Single Class

Class Detail Heading Background Image: Remove or Change background image
Single Class Layout: There are 2 layouts which are With Right Sidebar and With Left Sidebar
Classes Sidebar: Choose a sidebar shown on single class page
Open Date Display: There are 3 options which are Only Open Date, Only Next Class Date or Both Open Date and Next Class Date
Enable Social Sharing: Turn this button on so that you can share single classes via social media
Sharing title: Enter a title here

There 2 two styles which are Footer Default and Footer With Map

Footer Default
Footer Columns (Widgetized): The number of footer columns fluctuates between 0 and 4
Footer Bottom Content (HTML): Enter content here

Footer With Map

Latitude/Longitude: You can refer to this site http://www.latlong.net/ to know latitude and longitude of the place
Zoom: Enter a zoom level of the map
Icon Map: Upload a Map Icon here
Footer Columns (Widgetized): The number of footer columns fluctuates between 0 and 4

Learn more about widgets used to create these Footer Styles:

Footer widgets and sidebars

Footer Bottom Content (HTML): Enter content here

1. Header Style

There are 3 styles of Header:

Notice that all Header styles have symmetry. You will need to create 2 menus in Appearance/ Menus to obtain this effect. We call these menus Main Menu Left and Main Menu Right.

You can create Top Menu in Appearance/ Menus

Hide Top Menu When Scroll: Turn this button on so that you can hide Top Menu when you scroll the page

Learn more about creating a new menu: Set Up Menu

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.
Background Navigation: Here you can change background of navigation bar
Background Navigation when Scroll: When you scroll the page and want to change background color of Navigation Bar, this option will help you obtain the desire
Icon Search: Turn this button on so that Search Icon can be shown in menu navigation bar
Hide Icon Search When Scroll: Turn this button on if you want to hide Search Icon when scrolling the page
Icon Cart: Turn this button on if you want to show Cart Icon in menu navigation bar
Hide Icon Cart When Scroll: Turn this button on if you want to hide the cart icon when scrolling
Navbar Height: This option handles height of Navigation Bar
NavBar Link Spacing: You can change NavBar Link Spacing here
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

Hermosa 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. If turning on this button then you can Upload Your Logo, adjust Image Height, Upload Your Logo Transparent and change Image Transparent Height

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

1. Headings

Use Custom Headings Font: Turn this button on so that you will have extra options to change Headings font and color
Transform to Uppercase: If you tick this box,  headings such as <h1><h2><h3> will be in uppercase

2. Body

Use Custom Font Body: Turn this button on in order that you can make adjustments to Body font, Font color and Font size

3. Use Custom Special Font

Enable Use Custom Special Font to choose Font for some elements on the site such as those ones:

1. Site Layout

You can set Style & Layout for your site. Hermosa 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 option on to hide theme icon
Custom Icon theme: Remove or change theme icon

3. Color

Hermosa provides you with 2 colors which are Primary color and Secondary Color. You can select a color for links and various elements of your site

Options in Customizer are in charge of appearance of your site. You can control various features of header, footer, font, color, logo, menu, etc here. Remember that any adjustments made by you will become real with the condition that you have clicked Save & Publish button on top.
Tag line: this one reveals a brief description of the site
Site icon is an image viewable in browsers for users to identify your website among many tabs. Please remember that the icon must be square and at least 512px wide and high. See the illustrative image to better understand function of the site icon. After choosing the image , 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 this icon, you can distinguish your website`s tab from other tabs more easily.

Hermosa allows you to create an unlimited number of sidebar. Each page or post can come with a unique sidebar. To select a sidebar for post or page, make sure you set page template with sidebar. You may need to create several separate sidebars to use for different pages and posts. Follow these steps to generate a sidebar and add widgets to it

Create A 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

Add Widgets To A Sidebar

You can add any widget and any number of widgets to your sidebar. All widgets are accessible from Appearance–>Widgets and easily dragged and dropped to your sidebar.
Step 1: Navigate to Appearance–> Widgets to access the list of widgets and widget section that they can be added. The left hand side shows all the widgets you can use. The right hand side shows all different sections you can add widgets to.
Step 2: Simply drag and drop the widget you want into the widgets section you want the right hand side.
Step 3: Don’t forget to click save changes after you customize any widget in sidebar.

The image above illustrates four sidebars that are Event Sidebar, Main Sidebar, Class Sidebar and Shop Sidebar.

1. Event Sidebar

This sidebar is shown on Event Detail Page. Drag the following widgets to this sidebar
• Noo Event Filter: Show box calendar, Show box search and Show box category
•Noo Event Info: Enter a title
• Noo Event Box Author: Enter a title
• Noo Event Box Map:
• Noo Event Slider: Title (Enter a title), Event Category (Select All categories or one of the categories in the drop-down list), Number of Posts to Show (The number of shown posts), Order By ( This option handles the order of events based on Recent First, Older First, Title Alphabet, Title Reversed Alphabet, Featured and Random)

2. Main Sidebar

This sidebar is displayed on Blog Page. Drag the following widgets to this sidebar:
• Search: Enter a title
• Categories: Title (Enter a title), Display as Drop-down (categories will be shown in a drop-down list)
• Tag Cloud: Title (Enter a title), Taxonomy (Choose a kind of taxonomy to show)
• Noo Recent Posts: Title (Enter a title), Number of Posts to Show (The number of shown Recent Posts on sidebar, Display Post Date (Check this box to show post date)
• RSS: Enter the RSS URL here, Give the feed a title, How many items would you like to display, Display item content, Display item author if av

3. Shop Sidebar

This sidebar is shown on Shop Page:
• Woocommerce Product Search: Title (Enter a title)
• Woocommerce Price Filter: Title (Enter a title)
• Woocommerce Product Categories: Title (Enter a title), Order By (Select Name or Category Order), Show as drop-down, Show Product counts, Show hierarchy, Only show children of the current category, hide empty categories.
• Woocommerce Products: Title (Enter a title), Number of Products to Show (the number of shown products), Show (Select All products or a product category), Order By (Display order of products is based on Date, Price, Random and Sales), Order (select Ascending or Descending), Hide free products, Show hidden products
• Woocommerce Products Tags: Title (Enter a title)

4. Class Sidebar

This sidebar is shown on Classes Page
• Noo Popular Class: Title (Enter a title), Class Category (Choose All categories or a specific category), Order by (Display order of classes can be based on Default, Open Date, Recent First, Older First, , Number of classes to show, Display trainer (tick this box to show Trainer), Auto Play Slider (tick this box so that sliders can play automatically)
• Noo Recent Post: Title (Enter a title), Number of posts to show (the number of show Recent Classes), Display Post Date (Tick this box to show Post Date)

After Woocommerce plugin is installed, it creates the following new pages:

• Cart
• Checkout
• My account
• Shop page

Learn more about Woocommerce pages:
http://docs.woothemes.com/document/woocommerce-pages/

Yet if it is unfortunate that those pages are not automatically created, you can do the following steps to build them:

1. Cart Page

• Navigate to Pages > Add New.
• Enter Title (Cart), paste this shortcode [woocommerce_cart] into content area of the page
• Opt Default Template in Page Attributes on the right side
• Click on Publish button
• Finally, go to Woocommerce> settings > Checkout Page> Choose a Cart page here> Save changes

2. Checkout Page

• Navigate to Pages > Add New.
• Enter Title (Checkout), paste this shortcode [woocommerce_checkout] into content area of the page.
• Opt Default Template in Page Attributes on the right side.
• Click on Publish button
• Finally, go to Woocommerce> settings > Checkout Page> Choose a Checkout page here> Save changes

3. My Account

• Navigate to Pages > Add New.
• Enter Title (My Account), paste this shortcode [woocommerce_my_account] into content area of the page.
• Opt Default Template in Page Attributes on the right side.
• Click on Publish button

4. Shop Page

• Navigate to Pages > Add New
• Enter title, Shop
• Opt Default Template in Page Attributes on the right side.
• Click on Publish button
• Finally, go to Woocommerce> settings> Products> Display> Choose a Shop Page here> Save changes