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/

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.

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:

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:

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:

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:

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)

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

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:

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:

  
  

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

 

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.

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

 

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

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.

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

 

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

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.

 

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

 

• 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

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

 

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

• Row settings:

 

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