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