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