Hermosa | Document Category

Customizer

Class

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

Footer

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

Header

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

: Default

: Logo Transparent

: Background Transparent

: Top 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

Typography

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:

Design and Layout

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

Site Identity

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.

Import/ Export Settings

All themes of NooTheme share the same theme settings structure so that you can export then import setting from one theme to another one conveniently.

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

Custom Code

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

Event

1. Event Listing

Event Page: Choose an Event Page in the drop-down list
Event Layout: Opt Full-width, With Right/ Left Sidebar
Event Heading: Enter a heading here
Event Heading Description: Enter a short description
Heading Background Image: Upload/ Change/ Remove heading background image
Event Default View Style: There are 2 styles which are Grid and List
Events Per Page: the number of events is shown per page
Show Event Category/ Event Time Start/ Event Time End/ Event Address: Tick these boxes to show the corresponding items

2. Single Event

Event layout: You can choose the same layout as Event Page
Related Event Count: The number of Related Events is shown

WooCommerce

1. Shop Page

Shop Layout: Shop page is also an ideal place to incorporate sidebar. Opt With Right Sidebar or With Left Sidebar to achieve this and as usual, Full-Width makes display of the sidebar inactive.
Shop Sidebar: select a sidebar that exists on the Shop page
Shop Heading Title: Enter a title here
Shop Heading Description: Give a short description here
Heading Background Image: Remove or change the image
Shop Default View Style: The style can be Grid or List
Products Grid Columns: The number of columns is displayed
Products per page: The number of products is displayed on each page

2. Single Product

Heading Background Image: Upload an Image here
Product Layout: You can choose the same layout as Shop page or another layout
Related Products Count: The number of related products is shown

Trainer

These options target Trainer List Page
Trainer Page: Choose a Trainer List Page
Trainer Heading Title: Enter a heading title
Trainer Heading Description: Give a short description here
Trainer Heading Background Image: Upload/ Change/ Remove Heading Background Image here
Trainer Page Layout: There are 3 layouts which are Full-width, With Right/ Left Sidebar
Grid Columns: The number of columns fluctuate from one to four
Items per page: This option determines the number of items shown per page

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 Description: Enter a short description here
Heading Background Image: Upload a heading background image hereExcerpt 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

Post layout: You can choose the same layout as Blog layout or choose another style
Enable Related Post: Turn this button on to show related posts
Show Post Meta, Show Author`s Bio: Tick these boxes to show Post Meta and Author`s Bio on Single Post Page
Enable Social Sharing: Activate this button to enable social sharing. Then you will enter sharing title and check boxes of social media via which single posts will be shared

Widgets

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

Static Front Page

Settings here are used to set up Home page and Blog page
Front Page Display: Tick the box of A Static Page
Front Page: Choose a Home page in the drop-down list
Posts Page: Choose a Blog page in the drop-down list

Site Enhancement

Back To Top Button: Back To Top Button will appear at the the right bottom when users scroll down
Enable Heading: Turn this option off to hide the heading
Enable Page Description: Turn on/off this option to show/hide description
Enable Breadcrumb: Turn on/off this option to show/hide breadcrumb
Page Heading Spacing: This option handles height of heading

Menus

You can create a new menu, change order of items in a formed menu or add items to the menu

Footer

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

Header

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

Set Up Menu

As for Hermosa theme, you will need to create 2 menus called Main Menu Left and Main Menu Right. To create a menu, for example Main Menu Left, you will follow these steps:
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, Main Menu Left 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. Choose Primary Menu Left
Step 7: Once It’s all done, make sure you click Save Menu.

: Step 1 and 2

: step 3, 4 and 5

: Step 6 and 7

Similarly, you can also create Right Menu and choose Primary Menu Right in Step 6

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:

Customizer _ Header

Healcode Mindbody widget

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: Make sure that you have already gone to your domain/mindbod/wp-admin (for example, Hermosa.com/minbody/wp-admin).

In the admin panel, navigate to HC Widgets > click Add New widget > an 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 account 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.

Import demo data

Import Demo Data

To import demo data, please go to Noo settings> Tick all three boxes to import Post, Nav Menu and Comment> Let the mouse hover over Hermosa> Click Install Demo button

You can watch this video to learn more about importing demo data:
Import Demo Data – Hermosa

Installation

Update Theme

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

Requirement For Hermosa

To use Hermosa 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 Hermosa 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

After purchasing 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:

Hermosa Theme File: Includes noo-hermosa.zip file that consists of everything you need to install the theme.
Document Folder: Includes Hermosa Documentation file that helps you get to know about Hermosa and guides you to build your site with our theme.
Licensing Folder: Includes the licensing files of Themeforest purchase.

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 useful links below:

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.

Preface

Firstly we would love to send our great thanks to you for purchasing Hermosa. 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 Hermosa.

Pages

Contact Page

Here are images of shortcodes used to build Contact Page

1. Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The first column contains a Single Image shortcode
♣The second one includes a Text Block shortcode and 3 Noo Info shortcode
Noo Info settings:
Icon: Click on arrow to select an icon
Description: Give a short description here

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣ The first column comprises a Contact Form 7 shortcode

Gallery Page

Here are images of shortcodes used to create Gallery 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 includes a Noo Gallery shortcode
12. Noo Gallery

About Us Page

Here are images of shortcodes used to create About Us Page

1. Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column contains a Text Block and a Noo Multiple Service
19. Noo Multiple Service

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣ The column contains a Single Image, a Noo Testimonial and a Noo Video shortcode
16. Noo Testimonial, 11. Noo Video

3. Red Row 3

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

Blog Pages

1. Blog Page

To build this page, you only need to enter title of the page and click the Publish button. After that, you will carry out one further step: Navigate to Settings>Reading> opt Blog in Posts page section> Save changes.“Why does this page not have any shortcodes but it will still contain content when the page is exhibited on the site?”You may be intrigued by this question. The reason is that you decided on Blog in above-mentioned Posts Page section. In this case, it takes all the latest blog posts originating from Posts in Admin Panel.

2. Blog Grid Page

Noo Blog is the only shortcode used to create Blog Grid Page
14. Noo Blog

Weekly/ Monthly Schedule Page

These pages use Noo Class Schedule shortcode

1. Weekly Schedule Page

Default View of Noo Class Schedule will be Weekly View 6. Noo Class Schedule

2. Monthly Schedule Page

Default View of Noo Class Schedule will be Monthly View

Event Calendar Page

Row and Noo Event Calendar are 2 shortcodes used to build Event Calendar Page
Noo Event Calendar settings
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

Home Page 2

Here are images of shortcodes used to create Home Page 2

1. Red Row 1

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

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣ The column contains a Text Block shortcode and a Noo Multiple Service
Noo Multiple Service settings:
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

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Class Grid Slider shortcode 5. Noo Class Grid Slider

4. Red Row 4

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

5. Red Row 5

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Event Slider shortcode
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

6. Red Row 6

♣ It has a Row shortcode whose style is one column
♣ The column comprises 1 Text Block shortcode and 3 Price Table shortcodes
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

: Style 1

: Style 2

7. Red Row 7

♣ It has a Row shortcode whose style is one column
♣ The column contains a 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>

8. Red Row 8

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Trainer shortcode
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

9. Red Row 9

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Testimonial shortcode
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

10. Red Row 10

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

11. Red Row 11

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

Home Page 1

Here are images of shortcodes used to create Home Page 1

1. Red Row 1

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

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Class Grid Slider
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

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Class Schedule shortcode
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.

4. Red Row 4

♣ It has a Row shortcode whose style is 2 columns
♣ The first column contains 4 Noo Counter shortcode
Noo Counter settings:
Upload Icon: Upload an icon
Import Number: Enter a number here
Title: Enter a title
♣ The second column comprises a Short Introduction shortcode
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

5. Red Row 5

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Gallery shortcode
Noo Gallery settings:
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

6. Red Row 6

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Product shortcode
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

7. Red Row 7

♣ It has a Row shortcode whose style is 2 columns
♣ The first column contains a Noo Contact Form
Title: Enter a title here
Description: Give a short description
Select Contact Form: Select a contact form which is created in Dashboard/Contact

♣ The second one includes a Noo Video
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

8. Red Row 8

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Blog shortcode
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

9. Red Row 9

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Noo Partner shortcode
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

Page Settings

When you create a new page, you will have options to change elements of Header :

Hide Page Heading: Tick this box to hide Page Heading
Page Description: Give a short description here
Menu Logo: Upload a logo image
Header setting: Tick a box to select a Header style
Navbar position: There are 3 options that are Use Navbar Position in customizer, 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
Footer setting: There are 3 options which are Using Footer in Customizer, Footer Default and Footer With Map
Heading Background Image: Upload an image which will be background for the heading

♣ Note: In spite of what you set up in Customizer, all options in Page settings will always be prioritized

Page Template

We have built some specific page templates for you. Here is the list and their short description:
•Full- width Template: This template is set to be full-width that can be used for Homepage, About Us….Most of our demo pages use this kind of template.
• Default Template
• Page With Left or Right Sidebar: This template is used for page on which sidebar is displayed.

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

Next, we will introduce you elements or short codes used to build each page

Note:

After editing any sections in an element setting, please click Save changes button and then Publish/Update button.

We instruct you to create shortcodes in pages so that your pages will be exactly similar to those on our demo site. Yet, it is up to you to make adjustments to settings of elements. By virtue of this creative action, your site will become special 🙂

Post Types

Usually, the theme only has a type of post called Blog post. However, hardly have you activated NOO Hermosa Core plugin when you have 3 further kinds of post. So now the number of post types is 4, namely Blog post, Events, Testimonial and Classes

1. Blog Post

It is obvious that blog posts will be shown on Blog page In Admin panel, please go to Posts. You can see subordinate parts like All posts (to see all created posts), Add New (to create a new post), Categories (to classify posts) and Tags (to classify posts but in a more specific way, tags can be keywords that are indicated in a post). When you intended to create posts, you had surely thought of generating all categories for posts. So we will begin with building categories:Adding a new category is very easy: enter name of category and click on Add New Category button.

Add A New Post
Step 1: Enter title and content of the post.
Step 2: Now turning to the right side, you will complete some sections such as Format, Categories, Tags and Featured image.
Step 3: Remember to click Publish to complete creating the post

2. Events

Create A New Event Category
Go to Events> Event Categories > Enter Name of the category > click Add New Event Category.
Create A New Organizer
Go to Events> Organizers> complete information of the organizer such as Author, Avatar, Phone, Website, Email and Position

Create A New Event
• Go to Events> Add New Event> Enter title and content
• Organizers: Choose an organizer in the drop-down list
• Time&Date: Choose a Start and End Date of Event
• Location: Enter Address, Longitude and Latitude
• On the right side, choose an Event Category
• Click Publish to complete creating a new event

3. Testimonial

Add A New Testimonial Category
Go to Testimonial> Testimonial Categories> Enter Name, Description> Click on Add New Testimonial Category
Add A New Testimonial
• Go to Testimonial > Add New> Enter title, content
• Complete Testimonial Options:
Your Image: Upload an Image
Your name: Enter a name
Your Position: Enter a position
• On the right side, choose a Testimonial Category> Click Publish to complete creating the testimonial

4. Classes

Add a new class level
Go to Classes> Class Level> Enter name, Description> Add New Class Level
Add a new class category
Go to Classes> Class Category> Enter name, description, choose a color> Add New Class category
Add a new Trainer
• Go to Classes> Trainers> Enter title, content
• Trainer Class Category: Tick boxes to select Trainer Class Cateogries
• Trainer Information:
Welcome Text: Enter texts here
Position: Enter a position
Experience: Enter a number of experience year
Email: Enter an email address
Phone: Enter a phone number
Biography: Enter a short description of Trainer`s biography
Skill: Add Labels and Values
• Trainer Social Information:
Enter URL of facebook, Google, Twitter and Pinterest
• On the right side, upload a featured image
• Click on Publish button to complete creating the class

Add a new class
• Go to Classes> Add New Class> Enter title, content
• Complete Class settings:
Open Date: Choose an open date in the drop-down list
Open/ Close time: Choose an open/close time
Trainers: You can select many trainers here
Address: Enter an address
Numbers of Week: The number of weeks during which the class operates
Days of week: Weekdays on which the class is organized
Use Advanced Schedule: 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 and 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 to somewhere.
• On the right side, select a Class Category, Class Level and upload a Featured Image
• Click on Publish button to complete creating a new class

Sidebars & Widgets

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)

Visual Composer

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

Title: Enter a title here
Sub Title: Enter a sub title
Text Align: This option handles position of Title and Subtitle. There are 3 alignments which are Center, Left and Right.

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

: Style 1

: Style 2

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

WooCommerce Pages

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