Chilli

Customizer

Site Identity

Tag line: 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 without any problem.

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

Custom Code

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

Woocommerce

This section controls changes to Shop page and Single product.

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: Enter a title here

Heading Background Image: Remove or change the image

Products per page: this option limits the number of products displayed on the page

2. Single Product

Default Heading Background Image: Remove or change the image here

Related Products Count: the number of related products is displayed

Blog

Making some changes 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

Blog heading: enter a title

Heading Background image: Upload, change or remove Heading background image here

Show post meta, show post image, show read more link: tick these boxes so that post meta, post image and read more link can be displayed in Post list

2. Single post

In this part, you can make some adjustments to Heading Background Image, Show Post Meta, Show Post thumbnail and Show Author`s Bio.

Event

You can make changes to Event list of the Event page in this section
Event Layout: The layout of Event 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 Event page. In contrast, the last ones will let sidebar be shown on the page.

Event Heading: Enter a title here

Heading background image allows you to select or change a background image

Widgets

This section enables you to customize Widgets situated in Footer. Besides, you can also add widgets to Noo Footer Top, Noo Footer Bottom, Noo-Footer #.

Footer

Please refer to this source to learn about Footer in Chilli:

http://nootheme.com/documents/chilli-footer/

Typography

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

1. Custom Fonts and Custom Font Color

Custom Fonts: Enable Custom Fonts to customize font, font size and other settings for heading and body text.
Custom Font Color: Enable Custom Font Color to customize font color of heading and body.

2. Headings
If ticking Transform to Uppercase box, you will have headings <h1><h2><h3> which are in uppercase

3. Body
You can change font size of body by selecting font size from drop-down list.

Design and Layout

This section helps you to alter Site layout, Icon theme and Color

1. Site Layout

You can set Style & Layout for your site. We provide two layout styles including: Boxed Layout and Fullwidth layout.

Fullwidth layout: if you choose this style, you will have a further second option that is Theme RTL.
If ticking No, from Right To Left, you will see the menu and the logo.
By contrast, when you tick Yes, that order will change: the logo is on the right side and the menu is on the left side

With Boxed layout, besides Theme RTL, you will have additional options for side width, max site width, background color or image setting, background repeat, background image alignment, auto resize:

If you opt blue for background, background of your site will be filled with blue. However, when you set up background image, background of the site will be replaced with a new image.

Background repeat: Background Repeat will work effectively if you use patterned background image as the image above. 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

You can show or hide Icon theme which appears under page title of each page.

3. Color

You can set color for links and various elements on your site

Site Enhancement

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

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

Enable Mailchimp subscribe: Turn off this button, Mailchimp subscribe part in Footer will disappear. If you turn on it then you will have an extra option, Mailchimp settings, to enter API key.

Learn more about making Mailchimp be shown in Footer

http://nootheme.com/knowledge-base/what-should-i-do-to-make-mailchimp-be-shown-in-footer/

Menus

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.

Menus

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

Header

This section contains 4 small parts which are Logo, Navigation Bar, Header Mini cart and Top Bar. After making changes to any parts of Header section in particular and any other parts of Customizer in general, you must remember to click Save and Publish button on top

1. Logo

Chilli 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, uppercase or lowercase for text logo.

If turning on this button then you can upload an image and change its height.

2. Navigation Bar

You can change style, position, font and color of NavBar here

NavBar Style: opt Relative or Absolute style. Absolute allows NavBar to overlay the surface of the part right below it while Relative makes NavBar separate from that part.
NavBar Position: Position of NavBar includes Static Top and Fixed Top. Static Top, in this case, the NavBar does not move. It means that when you scroll down on the page and let the mouse pass the NavBar, you will not see the NavBar displayed on top. However, Fixed Top will allow you to see the NavBar when you scroll down the mouse.

Use Custom NavBar Font and Color: Enabling this button, you can change font, font size, link color, link hover color and style of letters (uppercase or lowercase). For example, if you decide on orange and green for Link and Link Hover respectively then the Navigation Bar will have transformation. It is very clear that color of the links now change to orange and when you let your mouse hover over menu pagelink displayed on Navigation Bar, it will turn green.

Navbar Height, NavBar Link spacing: Adjust height of NavBar and space between NavBar links

header7

3. Header Mini Cart

This part will only give you one option. You can Enable or Disable Header Minicart.

4. Top Bar

Enabling this button, this will offer you some options to add to the header like Welcome Text, Contact information (Hotline and Email Address), Show search box.

Event

Events

Data you created in this part will be shown on Event page. There are few common factors associated with Events, that is to say, Organizers, Venues and Event categories.

1. Create an organizer

Navigate to Events > Organizers > Add New
Enter title > fill out Organizer information containing Phone, Website and Email. On the right side, you can set a featured image
Click Publish

2. Create a venue

Navigate to Events > Venues > Add New
Enter title > Fill out Venue Information like Address, City, Country, State or Province, Postal Code, Phone, Website, Show Google Map, Show Google Maps Link, Use Latitude and Longitude. On the right side, you can set a featured image.
Click Publish

3. Create an event category

Navigate to Events > Event Categories .
Enter name of the event category
Click on Add New Event Category button

4. Create an Event

Navigate to Events > Add New
Enter title and content
Complete The Events Calendar that comprises:

Time and Date
All Day Event: tick this box if you event appears during the whole day. If this box is unchecked, Star time and End time will be opened.

Start date & time, End date and time, Timezone: these sections provide you with drop down lists for you to choose.

Location

Use Saved Venue: opt a venue from the drop down list here

Show Google Map, Show Google Maps Link

Organizers

Use Saved Organizer: pick an organizer from the drop down menu here or add another organizer right below

Event website

Enter website into URL box

Tickets: you can upload image for the ticket header or add new ticket here
On the right side, enter tags, opt event categories, set a featured image
Click Publish button

Footer

Before supplying detailed information related to Footer, we would like to introduce the overall structure of Footer to you.

footer12

The Footer is composed of three parts called Footer Top, Footer Columns or Widget area and Footer Bottom. Thus, now you can guess that you will have to use not only Customizer but also Appearance>Widgets to make adjustments to the Footer.

Let`s get started with Appearance> Widgets:

You can see available widgets on the left side and 5 sidebars belonging to Footer such as Noo Footer Top , Noo Footer Bottom, Noo – Footer Column #1, Noo – Footer Column #2, Noo – Footer Column #3.

1.Noo Footer Top

Drag Noo About widget on the left side to Noo Footer Top > Click the triangle icon on the right of the widget> enter title, link image, upload image, write a short description> Save. Now you find that parts you have just created will be displayed in Footer Top of the site.

2. Noo – Footer Column #1

Drag Noo Mailchimp to Noo – Footer Column #1 > click the triangle icon > Enter title and Subscribe Text > Save.

In order that Mailchimp can be displayed on Footer, please refer to this link:

http://nootheme.com/knowledge-base/what-should-i-do-to-make-mailchimp-be-shown-in-footer/

3. Noo – Footer Column #2

Drag Noo Open Hours to Noo – Footer Column #2 > click the triangle icon > complete boxes as in the image below > Save

4. Noo – Footer Column #3

Drag Noo Information to this sidebar > click the triangle icon > enter title, Address, phone and mail > Save

5. Noo Footer Bottom

Drag Noo Social to this sidebar > click the triangle icon > enter a brief description, links of the social webs > Save.

After accomplishing all steps above, please navigate to Customizer > Footer > You can upload background image of Footer, set number of Footer columns (on our demo site, we choose 3 columns) and select Show Footer bottom > Save and Publish.

Header

Mega Menu

Chilli equips you with a kind of menu called Mega menu whose sample is placed on Shop page of our demo site. Basically, it has some typical features:

The first one, a visible feature is that Mega menu allows you to organize sub-menus according to columns. Meanwhile, sub-menus are usually arranged in conformity with hierarchy.
The structure of a mega menu contains Mega menu heading, sub-pages and widget area.
Mega menu helps icons to be shown next to pages and sub-pages on the Navigation bar

Create a Mega menu

In order that you can better perceive how to build a Mega menu, we will opt Shop page in which Mega menu is created.Please follow these steps:

Step 1: Navigate to Appearance > Menus > do the same steps mentioned in Set up menu above to obtain structure of the mega menu on Shop page as in the image

Step 2: Click the triangle icon on the right of Shop pages item then it will expand into many options like:Navigation label: name of the parent page (Shop page)

Icon: you can select an icon of the page and change size, color and position of the icon here. Click the arrow icon to opt an icon and click the stick icon to make alternations to the icon.

Enable Mega menu: ticking this box allows display of megamenu

Mega menu column: This option has a drop-down list of different numbers of columns shown in Mega menu area. The number varies from 2 to 6. On our demo site, this number is 4.

Hide Mega menu heading: Check this box if you want to hide Mega menu heading. In our demo, Shop pages item is considered to be a Mega Menu heading. When you choose option of hiding mega menu heading, Shop pages title will automatically disappear on Mega menu area.

Step 3: Regarding Shop pages item, it is a Custom link. Therefore, you also have common options like URL, Navigation, Title Atribute and Icon. Besides, you will have an extra option named Mega Menu Widget Area which contains a drop-down list. As you see, Shop pages item will be a Mega menu heading when it is displayed on the site. Thus, you will have to opt Select Widget area whereas the remaining options in this drop-down list will make Shop pages item become a widget area.

Step 4: As for sub-pages like Cart, My account and Checkout, you only need to modify three options which are Navigation Label, Title Attribute and Icon.

Step 5: Shop label 1, 2 and 3 constitute the widget area of Mega menu. Therefore, before making any changes to options included in these three items, please assure that you created sidebars and widgets corresponding to them:

We have three sidebars: Menu Sidebar1, Menu Sidebar 2 and Menu Sidebar 3.

Learn more about creating sidebars:

http://nootheme.com/documents/chilli-sidebars-widgets/

Next, navigate to Appearance > widgets > drag WooCommerce Products widget to Menu Sidebar 1, Menu Sidebar 2 and Menu Sidebar 3. Click the triangle icon then you will have further options like Title, number of products to show, Show (All products, Featured products, On-sale products), Order by(Date, Price, Random and Sales), Order (Descending or Ascending).

Learn more about adding widgets to a sidebar:
http://nootheme.com/documents/chilli-sidebars-widgets/

Similar to Shop pages item, Shop label 1, Shop label 2 and Shop label 3 are Custom links; therefore, you will also have options like URL, Navigation label, Title Attribute, Icon and Mega Menu Widget Area. In the drop-down list of Mega Menu Widget Area, opt Menu Sidebar 1, Menu Sidebar 2 and Menu Sidebar 3 to Shop label 1, Shop label 2 and Shop label 3 respectively.

Step 6: Click Save Menu button

Set up Menu

Set up menu

In order that pages can be displayed in the menu that is located in header area of the site, you have to carry out 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 then click the Create Menu
Step 3: To add menu item, select one of your created pages on the left hand side and click the Add To Menu button. You can also add different posts from the left side.
Step 4: To add a custom menu item, enter a custom name and link into the Links box.
Step 5: Manage your menus by using the drag and drop functionality. To create a dropdown menu in Menu Structure, simply drag a menu item on the left side to the area on the right side.
Step 6: After setting up your menu, scroll down to the bottom of the page to assign the menu on the Theme Location box.
Step 7: Once It’s all done, make sure you click Save Menu.

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

Yet when you see the header on our demo site:

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

http://nootheme.com/documents/header-2/

An introduction to Header

It is likely that header is the first place users will look at when they visit your site. So keep it simple, clear, meaningful, appealing and personal.
Simple? let`s make structure of your header understandable or avoid creating a complex header. A simple header will help the majority of site visitors be able to grasp information conveyed to them in the blink of an eye. In the most essential respect, a header should contain three parts which are menu area, logo and top bar

Clear? Chilli is a theme used to promote your restaurant business and you ought to know how to build necessary or core elements on the header wisely. By virtue of this idea, your clients can immediately figure out what you would like to introduce to them. Crucial factors, ideally, they may be important or distinctive menu items which present essence of your siteMeaningful? if clients skip through basic elements like logo, menu items and information included in top bar and get purpose of your site then you succeeded in creating a meaningful header.Appealing? it is obvious that colors or artistic design will surely evoke a strong impression or interest of viewers. Settings in Customizer of Chilli will help your header become more attractive.

Personal? Finally, after reading our instructions of Header, you will probably acquire necessary knowledge to create your exclusive header.

So in order to obtain an impressive and remarkable Header, you had better master steps of setting up menu and making changes to Header settings in Customizer.

Import Demo

Import Demo Content

Now it is very easy for you to import Chilli demo content. Please go to Noo settings> Import Demo > Tick all three boxes to import Post, Nav Menu and Comment > Let the mouse hover over the image of Chilli Demo > Click Install demo button to complete importing demo content.

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

Install Theme via FTP

How to install Chilli via FTP

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

Install Theme via WordPress

How to install Chilli via WordPress

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

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

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:

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

Requirement For Chilli

To use Chilli theme, you must be running WordPress 3.6 or higher, PHP 5.6 or higher, and MySQL 5 or higher. Follow below checklist to ensure your host can work well with Chilli 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.

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

Plugin installation

After activating Chilli theme successfully, you will receive a message that informs of installing plugins.

1. Woo Commerce: An e-commerce plugin. This is a very popular free plugin you will need if you plan to create online shop.
Learn more about Woo Commerce:
WooCommerce WordPress Plugin Documentation
WooCommerce WordPress Plugin Support
WooCommerce Plugin Knowledge Base
2. Visual Composer: The popular drag and drop page builder plugin with intuitive interface to build your content at ease. Save another $33 for this plugin with Chilli.
Learn more about Visual composer:
Visual Composer WordPress Plugin Documentation
Visual Composer WordPress Plugin Support System
3. Contact Form 7: Chilli is fully compatible with Contact Form 7, the free form plugin recommended to create a nice form for your site.Learn more about Contact Form 7:

Contact Form 7 Plugin Documentation

Contact Form 7 Plugin Support Forum

4. Breadcrumb NavXT: Breadcrumb is a hierarchical series of hyperlinks displayed at the top of a page, indicating the page`s position in the overall structure of the page. It looks something like Home >> Reservation, Home >> About. Therefore, basically, this plugin will help visitors of your site to realize their path to the current content location easily.

Learn more about Breadcrumb NavXT:

Breadcrumb NavXT plugin documentation

Breadcrumb NavXT plugin support

Note: After activating this plugin, you should go to Settings> Breadcrumb NavXT > General > paste this code <span class=”separator”>·</span> into Breadcrumb Separator> Save changes. Then your breadcrumb will be shown like this:

5. Revolution Slider: Create a responsive or full-width slider with must-see effects.
Learn more about Revolution Slider:

Revolution Slider Plugin documentation

6. Noo Chilli Library: This is one of the distinctive plugins made by Noo Theme. It allows you to create post types and taxonomies.

7. YITH WooCommerce Wishlist: In case clients love some of your products but they cannot afford it. Then when having enough money, they will come back and search for these ones. This may make them waste time. Yet, now WooCoommerce Wishlist will avail. It will give visitors the chance to place their best-loved products in a wishlist page and then they can find these onesquickly.

Learn more about YITH WooCommerce Wishlist:

YITH WooCommerce Wishlist WordPress plugin documentation

8. The Events Calendar: This plugin helps you to create and manage events easily.

Learn more about The Events Calendar:

The Events Calendar Plugin Knowledgebase

The Events Calendar Support Forum

Please do the following steps to install and activate all plugins above:Click Begin installing plugins → Install Required Plugins item appears→ you choose Install in the left box → tick Plugin to install all plugins→ click Apply to complete installing.
Click Return to Required Plugins Installer→ Install Required Plugins item appears again → click Activate in the left box→ click Plugin then click Apply to complete activating.

After activating these plugins, you can find that the Admin panel now has some new sections:

Pages

Event Page

In essence, Event item in the header menu of our demo site was set as a Event category. This explains why you do not see this page in Pages > All Pages.

Note: Please make sure that you activated The Events Calendar and built data in Events section prior to implementing steps stated below.Seek more related information via these links:

http://nootheme.com/documents/plugin-installation-5/

http://nootheme.com/documents/chilli-events/

To achieve an Event item in header menu, please follow these steps:Step 1: Navigate to Events > Settings > Display > opt Default Events Template in Events template > Save changes

Step 2: Go to Appearance> menu > click the triangle of Event Categories on the left side.

Step 3: Tick Event box and click Add to Menu then Event item will appear in Menu area on the right side

Step 4: Drag this item to a position you desire, for example, in our demo, it is situated in a place like this:

Step 5: Save Menu
Learn more about setting up Header Menu:
http://nootheme.com/documents/set-up-menu-2/

Wishlist Page

After YITH Woocommerce Wishlist plugin is activated, it will automatically create Wishlist page. If you do not see this page in Pages > All pages, please do the following steps to build this page:

Navigate to Pages> Add New
Enter title of the page and paste this code [yith_wcwl_wishlist] into content area
On the right side, opt Default Template
Click the Publish button

Note: To find Wishlist page on the site, please follow these steps:

Go to Shop page
Let the mouse hover over image of the product you like, then a heart icon will appear on the right lower corner of the image. Click on the icon and it will direct you to Wishlist page.

Contact Page

Red Row 1

It has one column
Text Block settings:

See Red Row 1 in action:

Red Row 2

It has one column
Google Maps element

See Red Row 2 in action:

Red Row 3

It has one column
Noo title: Title, Title size (Large or Medium), Sub Title, Description, Use White Style (use white style font on darker background)

Noo Custom Form 7:

See Red Row 3 in action:

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

This page is formed by two elements called Row and Post Masonry Grid

Post Masonry Grid Settings: it is an impressive element right? There are so many sections in this setting. From left to right, we have:
♦ General:

Data source: There are various sources picked here. They are Post, Page, Attachment, Product, Product_variation,etc

Narrow data source: You can type kinds of source here. Kinds of source can be categories, tags or custom taxonomies.

Total items: This option places a limit on the number of items in grid. You enter -1 to display all; however, it will be limited to 1000 items.

Display Style: Show all, Load More button or Lazy loading. The first one allows all posts to be displayed on the page. The second, next posts will be shown after you click Load More button. The last one, as soon as you scroll the mouse down to a position, posts will be loaded and displayed immediately.

Items per page: number of items shown per page

Show filter: If you click Yes then function of filtering according to categories.

Grid elements per row: select number of grid elements per row

Gap: select gap between grid elements

♦ Data settings:

Order by: Date, Post ID, Author, title, Last modified date, post/ page parent ID, number of comments, menu order, page order, meta value, meta value number, Ransom order. If Meta value number is chosen then meta key is required.

Sort order: Descending or Ascending

Offset: number of grid elements displaced or passed over

Exclude: If you enter title of any posts here then they will not be shown on the page

♦ Load More Button:

Button Style: The style can be Rounded, Square, Round, Outlined, 3D, Square Outlined.

Button color: opt a color of button here

Button size: Mini, Small, Normal or Large

♦ Item Design:Grid element template: If you notice Blog page on our demo site, you will see different types of Blog page. We have Blog Masonry Blur Out, Blog Masonry Go Top, Blog Masonry Overlay Rotation, Blog Masonry Scale Rotation, Blog Masonry Side Content, Blog Masonry Slide From Left, Blog Masonry Slide Out From Right.

This Grid option helps you create these types of Blog page.

Gallery Page

Gallery page is constituted by two elements that are Row and Noo Galllery Grid

Noo gallery Grid Settings comprises:Choose Gallery Categories: opt gallery 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

Limit Gallery Item: This option limits the number of galllery 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 15, the number of words contained in an excerpt will be equivalent to 15.

Row Settings:

See Gallery Page in action:

Menu Pages

1. Menu Page

Building a menu page is like shooting fish in a barrel. If you have to use many elements to create preceding pages then this page will only require two elements. It is not a painstaking work right?. Very simple!

Two above-stated elements are now identified: Row that forms one column and Noo Menu Section with Slider

Noo Menu Section with Slider Settings has General and Navigation & Design options.

General contains:

Choose Menu sections: there is a dropdown list here and you opt sections you want by clicking 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 Thumnail 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

Row settings:

2. Menu Grid Page

Menu Grid page is constituted by two elements, namely Row and Noo Menu Grid

Noo Menu Grid Settings comprises General and Icon optionsGeneral

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.

Row settings:

3. Menu Grid Small

This page uses the same shortcodes as those of Menu page. You only have to make a minor change to Choose Item Syle in Noo Menu Grid Settings. Now the Style is Small.

4. Menu Section Page

This one is composed of 2 elements, Row and Noo Menu Sections
Noo menu sections settings contains recognized parts like Choose menu sections, Limit menu item, Background color.

Row settings

Open Table Reservation Page

Red Row 2 and 3 of Open Table Reservation Page are the same as those of Reservation page. The shortcode used in Red Row 1 of Open table reservation page is Noo Open Table Reservations. This element will create a reservation form which is different from that of Reservation page. On Reservation page, all reservation information of customers will be in an email sent to a person whose email address you entered in Contact > Contact Forms > Form Reservation > Mail. However, when visitors click Find a table on Open table reservation page, it will lead them to a website called Open table on which they will fill out a reservation form.

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

See Red Row 1 in action:

Reservation Page

Red Row 1

It has one column
Noo Custom form 7

Row settings

See Red Row 1 in action

Red Row 2
It has two columns corresponding to 2 Noo Reservation elements
The first Noo Reservation element: Title (Reservation By Phone), Description and Info (add contact information here)

The second Noo Reservation element: Title ( Private Events), Description and Info (add contact information here)

The first one

The second one

Row Settings:

See Red Row 2 in action

Red Row 3
It has one column which contains Noo Title and 4 columns corresponding to 4 Noo Services element whose titles are Gluten Free, Achieve Fitness, No More Cooking and Healthy Lifestyle.
Noo Title

Row settings

See Red Row 3 in action

About page

The illustrative image below reveals that you can upload or change a heading background image here and enter custom page title (if this one is left blank, page title will be used) in the region right below shortcodes.

1. Red Row 1

The first column is Noo Image.
It has two columns with style 1/2+1/2
The second column is Noo Title

Row Settings:

2. Red Row 2

It has one column which comprises Noo Title and 4 small columns corresponding to 4 Noo Services elements. 4 Noo Services elements have 4 different titles which are Wedding Special, Birthday Party, Office Party and Party Hostess

: Noo Title

Row Settings:
General > tick Using Container box > Save changesDesign options > change properties of padding > opt grey in background color > Save changes

See Red Row 2 in action:

3. Red Row 3

It has one column
Noo title

Row Settings:

4. Red Row 4

It has one column
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.

Row settings:

See Red Row 3 and Red Row 4 in action

5. Red Row 5

It has one column
Noo title:

Noo Testimonial contains:

Choose Style: Square images or Circle images

Border Color images: select 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.

Row Settings:

See Red Row 5 in action:

Home One Page

Home One Page is different from a normal Home page. So which features does it own to make itself distinguishable from an usual Home page? There are two important ones of Home One page of Chilli you should remember:

No sooner have you scrolled the mouse down and let it pass the area of the slider than you can see Navigation bar.
When you click on items of the menu, for example, About, it will go to the corresponding location on the Home One Page on which About is placed. This is totally different from Home page. After you click an item, it will direct you to another page link.
In general, layout of parts displayed on Home One page is quite similar to that of parts shown on Home page. As a result, it is understandable that shortcode settings will not change much. Therefore, to avoid rehearsing instructions in Home page above, we will only point out some discrepancies in building Home One page:

Red Row 1

represents About Restaurant section shown on Home One Page:

Revolution Slider: opt One Page Slider (to create One page Slider, please go to Revolution Slider and add a new slider with title One Page Slider) > Save changes.

Row settings:

After reading the second distinctive feature of Home One Page, perhaps, you will have a question of the detail related to “When you click on items of the menu, for example, About, it will go to the corresponding location on the Home One Page on which About is placed”. The key to the issue will be found in Row ID section in General. It is Row ID that will bring About, Menu, Reservation, etc to their exact places on Home One Page. Yet, you have to make sure that Row ID is unique and valid according to w3c specification.

Thus, you can speculate that the major change of shortcode settings in Home One page belongs to Row ID section.

Please pay attention to this one:

After entering a Row ID, you will see a URL next to the icon ” + ” at the top of each Red Row. For instance, if row ID is home_one_page then URL will be #home_one_page.

Red Row 2

This one will form About Restaurant part of Home one page

Row Settings:

Red Row 3

reflects Menu Today part of Home One page

Red Row 4

corresponds to Make Online Reservation part of Home One Page

Red Row 5

builds Our Services part

Red Row 6

will be Gallery part

Red Row 7 and Red Row 8

will turn into News & Events part of Home One page

Red Row 7

Red Row 8

IMPORTANT:To create Onepage Menu, please do the following steps:

Step 1: Navigate to Appearance> Menus> click Create a new menu > give a name to the menu. In this case, you should call it Onepage Menu.

Step 2: Remember that all menu items of Home One Page are Custom Links. Thus, in the column on the left side, click Custom Links. Then you will see two boxes that are URL and Link Text.

URL must be what you entered in Row ID part of Row settings. More exactly, it must be URL that will be immediately generated after you type Row ID, with location of this URL being next to “+” icon mentioned above. Therefore, if you rename Row ID, you will have to make corresponding change to URL.

Link Text is name of the menu item.

Next, Click Add to Menu and the menu item will appear in Menu Structure area.

Step 3: In Menu settings, check One Page Menu box and click Save Menu.

Home page

1. Red Row 1

It has one column: use Row element to create this one then you will have some kinds of column layout like 1/1 (one column), 1/2+1/2 (2 columns whose widths are equal) , 2/3+1/3 (two columns and the ratio of the first column`s width to the second column`s is 2/3 to 1/3), 1/3+1/3+1/3 (3 columns whose widths are equal), etc.

Revolution Slider: opt Home Slider (to create Home Slider, please go to Revolution Slider and add a new slider with title Home Slider) > Save changes.

: Display of Red Row 1 on Homepage

2. Red Row 2

It has 2 columns with 1/2+1/2 layout style
The first column is Noo Title which contains Title (About Restaurant), Title size (Large or Medium), Sub Title, Description and Use White Style (use white font style for dark background)

The second column is Noo Images that includes Choose Logo, Choose Style (Slider Images or Simple Image) and Choose Images (the maximum number of images is 8)

Click the pencil icon on the right top of the red row 2 then you will see Row Settings that has two parts: General and Design options

♦ General contains

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.

You should notice that in case of choosing parallax, you will have an extra option of uploading image right below parallax box. Nevertheless, if no image is specified, it will take background image from Design Options.

♦ Design options:

CSS box: you can change width of padding, border and margin here

Note: If you are not familiar with these CSS definitions, please consult the following source and see the image below:

http://www.templatemonster.com/help/css-understanding-border-margin-and-padding-properties.html

http://www.w3schools.com/css/css_padding.asp

http://www.w3schools.com/css/css_margin.asp

http://www.w3schools.com/css/css_border.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Sum up some important points in these sources:

The CSS padding properties define the space between the element border and the element content.

The CSS border properties allow you to specify the style, size, and color of an element’s border.

The CSS margin properties define the space around elements.

We set up design options as the image above for our demo site. Now we try altering some options in this section. See the image below:

Before changing

After changing

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.

3. Red Row 3

It has one column
Noo Our Menu

General: Enter menu title (Menu Today), Choose Menu Sections (Breakfast, Dinner, Lunch), Choose Menu Columns (Three), Limit menu item (This option limits the number of menu items shown in each menu section)

Navigation & Design options: Bottom Name (ALL MENU), Button Link, Background Color, Show images bottom (images will be displayed at the bottom of Menu today section on the home page), Choose images, Size of images.

Display of Red Row 3 on Home page

4. Red Row 4

It has one column
Noo Title: Title (Make Online Reservation), Title size (Large or Medium), Sub title, Description, Use white style.

Noo Custom Form 7:

This name seemed to make you recollect Contact Form 7 plugin and Contact section in the Admin panel. That`s right!

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. The second one will be used in Make Online Reservation.

Here are these two samples of Contact Form:

Form Contact Us

Form Reservation

Continue to learn about Noo Custom Form 7 element: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 form reservation for this case

Open time reveals the time at which making online reservation is accessible.

Row settings:

General > opt Simple Parallax > upload an image > Save changes.

Design Options > set 60px for top distance of padding, 56px for bottom distance of padding > Save changes.

Display of Red Row 4 on Home page

5. Red Row 5

It has one column
The column contains Noo Title and a child column (style 1/4+1/4+1/4+1/4) which includes 4 Noo Services elements.

Noo Title: Title (Our Services), Title size, Sub Title, Description, Use white style.

Noo Services: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.
As we mentioned above, we will have four Noo Services elements in Red Row 5 and their titles are Wedding Special, Birthday party, Office party and Party hostess respectively.

Row settings:

Display of Red Row 5 on Home page

6. Red Row 6

It has one column
Noo Gallery

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

Navigation & Design Options comprises boxes like Use White Style, Auto Play, Button name (View More), Button Link.

Row Settings:

As you can see the image below, Red Row 6 uses Simple Parallax background type and has some changes to padding.

Display of Red Row 6 on Home page

7. Red Row 7

It has one column
Noo Title: Title (News & Events), Title size (Large or Medium), Subtitle, Description, Use White Style

Row settings:

8. Red Row 8

It has one column
Noo News: contains General and Navigation options

General:

Choose Style: the style can be Masonry Style or Blog Style. Perhaps Blog Style is quite a common one. If you choose Blog Style, posts will be arranged in this way:

On the other hand, Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout.

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 (View more news), Button Link (when you click on View More button, it will lead you to the link you entered in this section)

Display of Red Row 7 and Red Row 8 on Home page

Page Setting

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

Hide Page Title: If you checked, page title won’t be displayed on header of your page.
Heading Background Image: This option allows you to select a unique heading image for your page.

Page Templates

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

Default Template: The default template can be used for any page. You can customize and add shortcode to build Homepage, Contact, Blog…
Full- width Template: This template is set to be full-width that can be used for Homepage, About page….Most of our demo pages use this kind of template.
Template One page: This template is used for Home One page

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 custom slug of the page in Permalink field appeared after entering title.

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

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

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 Chilli Library plugin when you have 4 further kinds of post. So now the number of post types is 5, namely Blog post, posts in Team member, Testimonial, Food Menus and Gallery.

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. As you can see, in our example, we created 5 categories for Blog posts. They are About, Beverage Trend, Chef Insight, Dessert Trends and Food Trends.

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. Team Member

Similar to Blog post, firstly, you will create Team categories. In our demo, we only produce a category named Chef.
Next, Add New Team Members. Please notice that data you create in this section will be shown in About page > Our staffStep 1: Enter title and Team Member information like name and position. Then you can select an image for the team member.

Step 2: Scroll the mouse down, you will see an area to add social webs of the team member.

Step 3: Turn to the right side, now you will opt category for the post

Step 4: Do not forget to click Publish button to complete creating new team member.

3. Testimonial

Testimonials will be shown on About page > TestimonialAs usual, the first step is creating Testimonial categories. In our demo, we created a testimonial category that is Masterchef.

Add a New Testimonial

Step 1: Enter title and content of the testimonial

Step 2: Go to Testimonial options area that is right below the content area > upload image, enter name and position

Step 3: On the right side of the page, select Testimonial categories

Step 4: Click Publish button

4. Food Menus

Posts in this section will be shown on Menu pageMenu items: you can see all created kinds of food here.

Menu sections: Fundamentally, name of this part is as same as the so-called menu categories. Thus, its function is similar to testimonial categories or something like that. However, when you produce a new menu section, you can upload an image that illustrates for this menu section. In our sample, there are 4 menu sections which are breakfast, dinner, lunch and midnight.

Add a new menu itemPlease go to Add one item and follow these steps:

Step 1: Enter title and content of the item

Step 2: In Menu item options area, create price and attibutes for the item

Step 3: Turn to the right side, opt Menu sections and upload the featured image

Step 4: Click Publish button

Unlike Posts, Team Member and Testimonial that only allow you to build a new post, now in Food Menus, you are absolutely able to create many menu items or posts at the same time. Please go to Add many items to obtain this wonderful feature.The image on the right side shows you parts that you will have to complete to create many items concurrently:

First, you will see some fields like Name or title of the item, Price, Attributes, Image or Featured Image and Description or content of the title. They are similar to parts accomplished in Add one item. Next, after fulfilling these fields, please choose a menu section in the box right below the phrase Choose Menu Section. Finally, click Save Menu button that is corresponding to Publish button.

Then you will continue to add new items by clicking on Add Menu item.

5. Gallery

Posts you create here will be displayed on Gallery page.In a way that often happens, we will invent Gallery categories:

In the Admin panel, go to Gallery > Gallery categories > Add a new gallery category

To Add a new gallery item:

Navigate to Gallery > Add New
Enter title, content > turn to the right side, opt a gallery category > set a featured image if you want.
Click the Publish button.

Sidebar & Widget

Sidebars & Widgets

Chilli allows you to create an unlimited number of sidebar. Each page or post can come with unique sidebar. To select a sidebar for post or page, make sure you set page template with sidebar then you can choose a sidebar you want to display from Sidebar dropdown list on the right side. 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 2 sidebars which are Main Sidebar and Shop Sidebar.

Drag Search, Categories, Noo Events and Recent Tweets widgets to the Main Sidebar> click the triangle icon on the right of each widget and it is up to you to complete parts in each widgets as the image below. Again, remember that after making changes to those parts, you will have to click on Save button.

In order that the sidebar can be displayed on the Blog page, please go to Customizer > Blog > Postlist > tick With Left or Right Sidebar in Blog Layout, opt Main Sidebar in Blog Sidebar part > Save and Publish.

Display of this sidebar on Blog page

Likewise, you also drag widgets like Woocommerce Product categories, Woocommerce price filter, Woocommerce products to Shop sidebar. Then please go to Customizer> Woocommerce> Shop page> tick With Left or Right Sidebar, opt Shop Sidebar >Save and Publish.

Display of shop sidebar on Shop page

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.

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.

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

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.

Sample of its display on the site:

2. Noo images

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

Sample of its display on the site:

3. Noo Title

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)

Sample of its display on the site:

4. Noo Our Menu

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

Navigation & Design options

Button Name: Give a name to the button here

Button Link: Paste a link of the button here

Background color: Select a background color

Show images bottom: tick this box to show images at the bottom. Then you will have two following options:

Choose image

Size (px): Enter size of the image you have just chosen

Sample of its display on the site:

5. Noo News

♣ Noo News Settings:

General:

Choose Style: the style can be Masonry Style or Blog Style. Perhaps Blog Style is quite a common one. If you choose Blog Style, posts will be arranged in this way:
Meanwhile, Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout.

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)

Sample of its display on the site:

6. Noo Testimonial

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.

Sample of its display on the site:

7. Noo Services

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

Sample of its display on the site:

8. Noo Team

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.

Sample of its display on the site:

9. Noo Reservation

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)

Sample of its display on the site:

10. Noo Menu Sections

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

11. Noo Menu Sections With Slider

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

Sample of its display on the site

12. Noo Menu Grid

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.

Sample of its display on the site:

13. Noo Galllery

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

Sample of its display on the site:

14. Noo Gallery Grid

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.

Sample of its display on the site:

15. Noo OpenTable Reservations

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

Sample of its display on the site

16. Noo Events

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.

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

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

3. My account

Navigate to Pages > Add New.
Enter Title (Checkout), 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