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, Chilli has 16 extra ones helping you to create many desirable pages. To generate the shortcodes, go to Backend Editor, click the “+” icon to add shortcode. Navigate to Chilli 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 here

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

This element allows display of contact form active on the page. Prior to introducing this shortcode to you, we suggest you should firstly create contact forms in Contact section. Our demo provides you with 2 types of contact form. They are Form contact us and Form Reservation.

♣ Noo Custom Form 7 Settings:

Choose Form Style: the style can be White or Gray. It implies title color, description color and background input color.

Title: Name of the form

Select contact form: decide on forms you have created in Admin panel > Contact.

Open time: For example, Form Reservation, open time reveals the time at which making online reservation is accessible.

This shortcode allows you to add images to the pageNoo images Settings

Choose Logo: the logo will be in the center of the area created by images

Choose Style: Slider Images or Simple Image

Choose Images: the maximum number of images is 8

This element allows you to add title, subtitle and description

Noo Title Settings: Title, Title size (Large or Medium), Sub title, Description, Use White Style (use white style on darker background)

This element can be used in building Menu page

♣ Noo Our Menu Setting:

•   General: Menu title, choose menu sections, choose menu columns (one, two or three), limit menu item (this option limits the number of menu item in one category).

Data source: data is picked from category, tags or posts.

Categories: there is a dropdown list here and you opt categories you want by clicking the left button of the mouse and highlighting those categories.

Order by: Recent First, Older First, Title alphabet, title reserved alphabet.

Limited item: The maximum number of posts will be displayed

Excerpt length: Excerpt is a short extract or a short passage taken from from the post. Length of the excerpt is determined by number of words. Therefore, if you opt a specific number like 20, the number of words contained in an excerpt will be equivalent to 20.

• Navigation options:

Button Name (for example, View more news), Button Link (when you click on View More button, it will lead you to the link you entered in this section)

This element contributes to display of testimonials

Noo Testimonial Settings:

Choose Style: Square images or Circle images

Border Color images: opt color for border of the image

Categories: All or every single category you added in Testimonial categories.

Order by: as usual, we have 4 kinds that are Recent First, Older First, Title Alphabet, Title Reserved Alphabet.

Auto play: Yes or No

Limited Testimonial: the maximum number of shown testimonials.

Noo Services settings:

Choose Icon Style: there are two choices, you can opt Select image or FontAwesome. If it is the first option then you have a corresponding next one that is Choose Image. Meanwhile, when the second option is preferred, Choose Image will be replaced with Choose icon.

Title: Enter a title here

Background color: Select a background color here

Noo Team Settings contains

Categories: opt All or every single category

Order by: Recent First, Older First, Title Alphabet, Title Reserved Alphabet

Limit Team Member: A specific number in this section you select will be the number of displayed members.

Layout Style: Default or info overlay. Default style arranges Media data that you created in Team Member into the place right below name and position of each team member. Meanwhile, Info Overlay will make Media data appear on image of each team member when you let the mouse hover over the image.

This element is used in building Reservation page

Noo Reservation Settings:

 Title: Add a title here

 Description: Enter a brief description

 Info: You can give contact information here (add email, phone number,etc)

This element is used in building Menu section page

Noo Menu Sections Settings:

Choose menu sections: opt menu sections by clicking the left button of the mouse and highlighting them

Limit menu item: This option limits the number of menu items in one category.

Background color: opt a color for background

This one is used in creating Menu page

♣ Noo Menu Sections With Slider Setting: 

• General:

Choose Menu sections: opt menu sections you want by clicking on the left button of the mouse and highlighting those sections

Limit menu item: this option restricts the number of menu items in one category

Show slider menu: tick this box to show menu slider

Limit Thumbnail Slider: this option limits the number of menu item slider in one category

• Navigation & Design options:

Auto Play: opt Yes so that slider will play automatically. Yet this box will only appear on the condition that you check Show Slider menu in General.

Background Color: opt a color for background here

This element is used in creating Menu Grid page and Menu Grid Small page

♣ Noo Menu Grid Settings

• General:

Choose menu sections: opt menu sections you want by clicking on the left button of the mouse and highlighting those sections

Limit menu item: this option places a limit on the number of menu item in one category

Order by: Recent First, Older First, Title alphabet, Title Reserved alphabet

Hide Filter: if you do not check this box, you will have a function of filtering based on menu category or menu section criteria.

Choose item style: Medium or Small.

• Icon options:

Show Icon: check this box then it will expand to another option that is Choose image.

Noo Gallery is used in building Gallery section displayed on Home page and Home One page

♣ Noo Gallery Settings:

• General:

Title: Enter a title here

Choose Gallery Categories: select Gallery Categories you want by clicking on the left button of the mouse and highlighting those categories.

Order By: Recent First (the latest published date), Older First (The older published date), Title alphabet, title reversed alphabet

Limit gallery item: This option limits the number of gallery items in one category

Choose Hover Style: when you let the mouse hover over images of gallery items, you will see Full Information, Only Tile & Description or Only Icon

Excerpt length: Excerpt is a short extract or a short passage taken from from the post. Length of the excerpt is determined by number of words. Therefore, if you opt a specific number like 15, the number of words contained in an excerpt will be equivalent to 15

• Navigation & Design options:

Use White Style: use white style font on darker background

Auto play: opt Yes or No

Button Name: for example, View more

Button link: when you click on View More button, it will lead you to the link you entered in this section

This shortcode is used in building Gallery page

Noo Gallery Grid Settings:

Choose Gallery Categories: select Gallery Categories you want by clicking on the left button of the mouse and highlighting those categories.

Order By: Recent First (the latest published date), Older First (The older published date), Title alphabet, title reversed alphabet

Limit gallery item: This option limits the number of gallery items in one category

Hide Filter: if it is not checked then function of filtering based on All galllery categories or each gallery category will be visible on top of the page.

Choose Hover Style: The style can be Show Full Information, Show Only Title and Description, Show Only Icon

Excerpt length: Excerpt is a short extract or a short passage taken from from the post. Length of the excerpt is determined by number of words. Therefore, if you opt a specific number like 20, the number of words contained in an excerpt will be equivalent to 20.

This element is used to build OpenTable Reservation page

Noo Open Table Reservation Settings:

Choose Form Style: select Gray or White which is color of title, description and background input.

OpenTable Restaurant ID: enter ID of your restaurant here

Title: Enter a title here

Country: this option has a drop-down list of countries which are U.S, Germany, United Kingdom, Japan and Mexico. Opt a nation then it will give you a corresponding top level domain of Opentable website. For instance, if you choose United Kingdom, you will have a domain which is co.uk.

Categories Events: Choose Event categories in the drop-down list
Columns: The number of columns is displayed. The number fluctuates between 1 and 4
Order By: This option decides the display order of Events. The order can be Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Show Date/ Excerpt: Choose Yes to show Date/Excerpt
Excerpt Length: the number you enter here is equal to the number of words included in the Excerpt
Limited: This option places a limit on the number of shown events.