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

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.

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.