Mebla Document - NooTheme

Installation

Preface

Firstly we would love to send our great thanks to you for purchasing Umbra. 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 Umbra.

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.

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:

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

Requirements For Umbra

To use Umbra 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 Umbra 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.

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

♣ Note: When a new version of the theme is released, you will go to Appearance> theme> there will be a message notifying you to update the theme automatically > Click Automatic Update

Import Demo

Import Demo Data

To import demo data, please go to Noo settings> Tick all three boxes to import Post, Nav Menu and Comment> Let the mouse hover over Umbra> Click Install Demo button

You can watch this video to learn more about importing demo data:

Import Demo Data – Umbra

Header

An Introduction To Header

Perhaps Header is the first place visitors look at when they go to your site. The first impression is always important; therefore, if the Header can convey your message to users, that is very great! The simple message given to them can be an understandable and clear menu or an amazing and eye-catching design of the header or diversified header styles of your site also make the most choosy customers feel satisfied.
In the most essential respect, a header should contain 2 parts which are menu area and logo

Here is structure of sections in Header, which will help you to acquire essential knowledge of building a Header. In terms of an striking and personal Header, I suppose that it depends on your creativity:))
♦ Set up Menu
♦ Customize Header

Set Up Menu

Follow these steps so that menu items can be shown in Header

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:

Customizer- Header

Footer

The Footer is composed of two parts which are Widget area and Footer Bottom.
Now you can guess that you will have to use not only Customizer but also Appearance>Widgets to make adjustments to the Footer.
You can see available widgets on the left side and 5 sidebars belonging to Footer: Noo – Footer Column #1, Noo – Footer Column #2, Noo – Footer Column #3 and Noo – Footer Column #4

1. Noo – Footer Column #1

Drag Noo Information widget to this sidebar
Title: Enter a title here
Link Image: Enter a image link
Address: Enter an address
Phone: Enter a phone number
Mail: Enter a mail

2. Noo – Footer Column #2

Drag Text widget to this sidebar:
Title: Enter a title here
Content: Enter opening times here

3. Noo-Footer Column #3

Drag Custom Menu widget to this sidebar
Title: Enter a title here
Select Menu: Choose a menu in the drop-down list (Select About Menu)
Learn about creating a menu:
Set up menu

4. Noo- Footer Column #4

Drag Custom Menu widget to this sidebar
Title: Enter a title here
Select Menu: Choose a menu in the drop-down list (Select Account Menu)
Learn about creating a menu:
Set Up Menu

Post Types

Usually, the theme only has a type of post called Blog post. However, hardly have you activated NOO Umbra Core plugin when you have 2 further kinds of post. So now the number of post types is 3, namely Blog post, Testimonial and Team Member

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

Add A New Testimonial Category
Go to Testimonial> Testimonial Categories> Enter Name, Description> Click on Add New Testimonial Category
Add A New Testimonial
• Go to Testimonial > Add New> Enter title, content
• Complete Testimonial Options:
Your Image: Upload an Image
Your name: Enter a name
Your Position: Enter a position
• On the right side, choose a Testimonial Category> Click Publish to complete creating the testimonial

3. Team Member

Add A New Category
Go to Team Member/ Categories/ Enter Name of categories/ Click Add New Category
Add A New Team Member
Step 1: Go to Admin dashboard/ Team Member/ Add New/ Enter Title
Step 2: Complete Member Information (Image: Upload an image here, Name: Enter Name of Team Member, Position: his/her position) and Media Data of that team member (Facebook, Twitter, Google+,…)
On the right side, choose a category
Step 3: Publish

Pages

About Us Page

Here are images of shortcodes used to create About Us Page

Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The first column comprises a Text Block shortcode
♣ The second column comprises a Single Image shortcode

2. Red Row 2

♣ It has a Row shortcode whose style is 2 columns
♣ The first column contains a Single Image shortcode
♣ The second one comprises a Text Block shortcode and a Row shortcode whose style is 2 columns. Each column includes 3 Noo Services shortcodes
5. Noo Services

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column includes a Noo Team shortcode
Title: Enter a title here
Description: Give a short description here
Categories: Choose a Team Member category which will be shown
Order By: This option determines display order of team members based on Recent First, Older First, Title Alphabet and Title Reversed Alphabet
Posts per page: The number of posts is shown per page

FAQ Page

Tour shortcode is used to create FAQ page. After adding this one, you will see some sections. You can add an FAQ shortcode to each section.

Blog Pages

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

There are two shortcodes used to create Blog Masonry Page. They are Row and Noo Blog Masonry shortcodes

Noo Blog Masonry settings:
Data Source: Select a data source from which blog posts are taken
Categories: Select categories that will be shown
Columns: The number of displayed columns fluctuates between 2 and 4
Order By: This option determines display order of posts based on Recent First, Older First, Title Alphabet and Title Reversed Alphabet
Posts Per Page: The number of posts is showcased on a page
Excerpt length: The number you enter here is equal to the number of words included in the excerpt.

Page Settings

When you create a new page, you will have options to change elements of Heading and Header

♣ Heading settings:

Show Settings: Tick Show or Hide
Sub Title: Enter a sub title for the heading area
Height of Heading background: You can adjust height of heading background
Using parallax for heading: Tick this box if you want to enable parallax effect for heading
Heading Bakground Image: Upload an image

♣ Header setting: Tick a box to select a Header style
Navbar position: There are 3 options that are Use Navbar Position in customizer, 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

♣ Note: In spite of what you set up in Customizer, all options in Page settings will always be prioritized

Home Page 7

Here are images of shortcodes used to create Home Page 7

1. Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column contains a Revolution Slider shortcode

2. Red Row 2

♣ It has a Row shortcode whose style is 3 columns
♣ Each column contains a Noo Services shortcode
5. Noo Services

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column contains a Product Grid shortcode
1. Product Grid

4. Red Row 4

♣ It has a Row shortcode whose style is one column
♣ The column contains a Text Block shortcode. In this shortcode settings, you will go to General/ Text/ add link of the Show More button.

5. Red Row 5

♣ It has a Row shortcode whose style is 2 columns
♣ Each column contains a Single Image shortcode

6. Red Row 6

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Product Grid shortcode
1. Product Grid

7. Red Row 7

♣ It has a Row shortcode whose style is one column
♣The column contains a Noo Partner shortcode
6. Noo Partner

Home Page 6

Here are images of shortcodes used to create Home Page 6

Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column contains a Revolution Slider

2. Red Row 2

♣ It has a Row shortcode whose style is 4 columns
♣ The column includes a Noo Services shortcode
5. Noo Services

3. Red Row 3

♣ It has a Row shortcode whose style is 2 columns
♣ The first column contains a Noo Simple Banner
Content Position: This option handles position of title and link button. There are 2 options that are Content Left and Content Right
Image: Upload an image here
Title: Enter a title
Link: Enter a link and title of the link
♣ The second one includes a Product Grid shortcode
1. Product Grid

: Content Left

: Content Right

4. Red Row 4

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Partner shortcode
6. Noo Partner

5. Red Row 5

♣ It has a Row shortcode whose style is 2 columns
♣ The first column contains Product Grid shortcode
1. Product Grid
♣ The second one comprises a Noo Simple Banner shortcode
8. Noo Simple Banner

6. Red Row 6

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Noo Testimonial shortcode
3. Noo Testimonial

7. Red Row 7

♣ It has a Row shortcode whose style is one column
♣ The column includes a Noo Blog shortcode
11. Noo Blog

8. Red Row 8

♣ It has a Row shortcode whose style is one column
♣The column contains a Noo Mailchimp shortcode
4. Noo Mailchimp

Home Page 5

Here are images of shortcodes used to create Home Page 5

Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column contains a Revolution Slider

2. Red Row 2

♣ It has a Row shortcode whose style is 3 columns
♣ Each column comprises a Custom Link shortcode
Style: There are 2 styles which are Content Top and Content Bottom
Title: Enter a title
Description: Give a short description
Link: Enter a link and its title

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column contains a Product Grid shortcode
1. Product Grid

4. Red Row 4

♣ It has a Row shortcode whose style is one column
♣ The column includes a Product Countdown
Choose Date: Enter a date on which the countdown will end
Select Identification: You can input product ID or product SKU or product title to see suggestions

5. Red Row 5

♣ It has a Row shortcode whose style is one column
♣ The column contains a Product Grid shortcode

6. Red Row 6

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Noo Blog shortcode
14. Noo Blog

7. Red Row 7

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Partner shortcode
6. Noo Partner

8. Red Row 8

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Mailchimp shortcode
4. Noo Mailchimp

Home Page 4

Here are images of shortcodes used to create Home Page 4

Red Row 1

♣ It has a Row short code whose style is one column
♣The column contains a Revolution Slider. You can choose a slider you created in Slider Revolution section

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Product Simple shortcode
General options
Choose categories: Choose categories whose products are shown
Order By: This option decides display order of products based on Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Limit: This option places a limit on the number of shown products
Banner options
Banner Style: This option controls position of Banner. There are 2 styles which are Banner Left and Banner Right
Content Style: This option handles position of Title, Description and Link button. There are 3 styles which are Bottom Right, Top Left and Center center
Upload Banner: Upload a banner
Title: Enter a title here
Description: Give a short description
Link: Enter link and title of the link

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Product Simple shortcode
13. Product Simple

4. Red Row 4

♣ It has a Row shortcode whose style is one column
♣ The column contains a Product Simple shortcode

5. Red Row 5

♣ It has a Row shortcode whose style is one column
♣ The column contains a Product Simple shortcode

Home Page 3

Here are images of shortcodes used to create Home Page 3

Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column contains a Revolution Slider

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣ The column contains a Raw HTML shortcode

3. Red Row 3

♣ It has a Row shortcode whose style is 2 columns
♣ The first one includes a Product Grid shortcode
1. Product Grid
♣ The second one comprises a Short Image shortcode
Short Image settings
Style: there are 2 styles which are Style Right and Style Left. This option decides position of the image
Image: Upload an image here
Title: Enter a title here

4. Red Row 4

♣ It has a Row shortcode whose style is 2 columns
♣ The first one includes a Short Image shortcode
14. Short Image
♣ The second one comprises a Product Grid shortcode
1. Product Grid

5. Red Row 5

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Partner shortcode
6. Noo Partner

6. Red Row 6

♣ It has a Row shortcode whose style is one column
♣ The column includes a Noo Blog shortcode
14. Noo Blog

7. Red Row 7

♣ It has a Row shortcode whose style is one column
♣ The column includes a Noo Mailchimp shortcode
4. Noo Mailchimp

Home Page 2

Here are images of shortcodes used to create Home Page 2

Red Row 1

♣ It has a Row shortcode whose style is 3 columns
♣ Each column contains a Single Image shortcode

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣The column contains a Product Grid shortcode
1. Product Grid

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Testimonial
3. Noo Testimonial

4. Red Row 4

♣ It has a Row shortcode whose style is one column
♣ The column contains a Product Grid shortcode

5. Red Row 5

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Simple Countdown
9. Noo Simple Countdown

6. Red Row 6

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Noo Blog shortcode
11. Noo Blog

7. Red Row 7

♣ It has a Row shortcode whose style is 3 columns
♣ Each column includes a Noo Services shortcode
Style: There are 2 styles which are Style Center and Style Left
Choose Icon: There are 2 kinds of icon. If you select Font, you will have a drop-down list of icons. Meanwhile, when you select Image, you will have an option to upload an image
Title: Enter a title here
Description: Give a short description here

8. Red Row 8

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Mailchimp shortcode
4. Noo Mailchimp

Home Page

Here are images of shortcodes used to create Home Page

Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column contains a Revolution Slider shortcode (select a home slider you created in Slider Revolution)

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣ The second one comprises a Noo Banner shortcode
Style Item: There are 3 styles which are Default, Vertical and Horizontal

If you select Default style, you will only have 2 extra options to complete:
Upload Image: Upload images here
Link: When you click on image, it will direct you to this link
Meanwhile, when you select the rest 2 styles, you will have the following options:
Color: Select a color for the title
Title: Enter a title here
Link: Enter a link
Link Text: Give a name to the link. For example, it is View Detail. When you click on View Detail, it will lead you to that link

You can click + icon to add extra sections.

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column contains a Product Grid shortcode
Title: Enter a title here
Sub title: Enter a sub title
Choose Style: There are 3 styles which are Style One, Style Two or Style Three
Using Masonry: This option controls loading effect of products. If you select Yes, you can minimize the screen to see this effect in a clear way.

Choose Data: Select a data from which products will be shown. The Data can be Recent Products, Featured Products, Best selling products, sale products and By categories.
Choose categories: select product categories which will be shown (only available to data of By categories)
Choose Style: There are 2 styles that are No filter and Style Filter (only available to data of By Categories)
Choose columns: The number of columns is shown. This number fluctuates between 1 and 5
Order By: This option handles display order of products based on Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Limited: This option restricts the number of products displayed in the section using this shortcode

4. Red Row 4

♣ It has a Row shortcode whose style is 2 columns
♣ The first column comprises a Noo Simple Countdown
General options
Style Item: There are
Background: Upload a background image
Choose Date: the date on which the countdown will end
Title: Enter a title here
Description: Give a short description
Link: Insert a link and name of the link here

Design options (these options are only available to Simple Countdown left)
Background wrapper: Upload a wrapper
Title wrapper: Enter a wrapper title
Description wrapper: Enter a short description for wrapper

The second column contains a Product Group Sale shortcode
Title: Enter a title
Image: Upload an image
Sub title: Enter a sub title
Description: Give a short description
Order By: This option controls display order of products based on Older First, Recent First, Title Alphabet and Title Reversed Alphabet
Limited: This option places a limit on the number of shown products

5. Red Row 5

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Partner shortcode
Limited Post of slider: This option places a limit on number of images per slider
Upload Images: You can upload many images here
Custom link: Enter link of images here. Links are separated by Enter
Custom Link Target: Links can be opened in the same window or in a new window
Auto play: Select Yes so that the slider can run automatically

6. Red Row 6

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Blog shortcode
Title: Enter a title here
Description: Give a short description
Blog Style: There are 5 styles
Data source: Data can be taken from three sources which are category, tags and posts
Categories: Select blog categories here
Order By: This option handles display order of blog posts based on Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Posts per page: The number of posts is shown per page
Excerpt length: The number entered here is equal to the number of words included in the excerpt
Link: Enter a link and title of the link. This title will be shown at the bottom of this section

7. Red Row 7

♣ It has a Row shortcode whose style is one column
♣ The column contains a Product Simple Slider shortcode

Choose Categories: Select categories whose products will be shown
Order By: This option determines the display order of products based on Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Limit: This option places a limit on the number of shown products
Config columns slider: The number of columns is shown on the slider. It fluctuates between 1 and 5
Auto Slider: Select True so that the slider can run automatically

8. Red Row 8

♣ It has a Row shortcode whose style is 2 columns
♣ The first column contains a Noo Mailchimp shortcode
Choose Style: There are 4 stylesTitle: Enter a title
Description: Give a short description here
Note: In order that Noo Mailchimp can function properly, you will need to install and activate Mailchimp For WordPress plugin. Then you will paste these codes into Admin panel> Mailchimp For WordPress> Forms> Fields

♣ The second one comprises a Noo Testimonial shortcode

Choose Style: There are 2 styles which are Default and Thumbnail Control
Categories: Select a category or all categories
Limited Testimonial: This option places a limit on the number of testimonials
Order By: This option handles the display order of Testimonials
Auto Play: Choose Yes so that the slider can run automatically

♣ To set up Home Page as Front Page, please go to Settings/ Reading/ Tick A static page and choose Home Page in Front Page section.

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 customize slug of the page in Permalink field which will appear after you enter 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.
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 the page, you will need to use available Shortcodes.
Step 5: Complete other settings for the page in meta-boxes under editing field. Once you get your settings done, click Publish.

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 add shortcodes to 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 🙂

Page Template

We have built some specific page templates for you. Here is the list and their short description:
•Full- width Template: This template is set to be full-width that can be used for Homepage, About Us….Most of our demo pages use this kind of template.
• Default Template
• Page Revolution: This template is used for Home Page 2 on our demo site
• Page Left Menu: This template is used for Home Page 7 on our demo site
• Page With Left or Right Sidebar: This template is used for page on which sidebar is displayed.

Contact Us Page

Here are images of shortcodes used to create Contact Us Page

1. Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column contains a Google Maps shortcode

2. Red Row 2

♣ It has a Row shortcode whose style is 3 columns
♣ Each column comprises a Noo Introduce shortcode
Image: Upload an image here
Title: enter a title
Text: Input a short description

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Contact form 7 shortcode

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
• Finally, go to Woocommerce> settings > Checkout Page> Choose a Cart page here> Save changes

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
• Finally, go to Woocommerce> settings > Checkout Page> Choose a Checkout page here> Save changes

3. My Account

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

4. Shop Page

• Navigate to Pages > Add New
• Enter title, Shop
• Opt Default Template in Page Attributes on the right side.
• Click on Publish button
• Finally, go to Woocommerce> settings> Products> Display> Choose a Shop Page here> Save changes

Sidebars & Widgets

Umbra allows you to create an unlimited number of sidebar. Each page or post can come with a unique sidebar. To select a sidebar for post or page, make sure you set page template with sidebar . 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 that are Main sidebar and Shop Sidebar

1. Main Sidebar

This sidebar is shown on Blog Page. It contains some widgets:

• Search : Title (Enter a title)
• Categories: Title (enter a title), Display as drop down, show post counts, show hierarchy (tick these boxes to show these items)
• Tag Cloud: Title (Enter a title), Taxonomy (Choose a kind of taxonomy to show)
• Recent Posts: Title (Enter a title), Number of Posts to Show (The number of shown Recent Posts on sidebar, Display Post Date (Check this box to show post date)
• Noo Instagram: Enter title, Instagram username, number of shown images, refresh hour and randomise

2. Shop Sidebar

This sidebar is shown on Shop Page:
• Woocommerce Product Search: Title (Enter a title)
• Woocommerce Price Filter: Title (Enter a title)
• Woocommerce Products: Title (Enter a title), Number of Products to Show (the number of shown products), Show (Select All products or a product category), Order By (Display order of products is based on Date, Price, Random and Sales), Order (select Ascending or Descending), Hide free products, Show hidden products
• Woocommerce Products Tags: Title (Enter a title)

Customizer

Site Identity

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

Logo: Upload a logo for your site
Tag line: this one 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.

Menus

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

Site Enhancement

Back To Top Button: Back To Top Button will appear at the the right bottom when users scroll down
Enable Page Heading: Turn it on or off to show or hide page heading

Static Front Page

Settings here are used to set up Home page and Blog page
Front Page Display: Tick the box of A Static Page
Front Page: Choose a Home page in the drop-down list
Posts Page: Choose a Blog page in the drop-down list

Typography

You can customize your Typography settings here. Umbra integrated all Google Fonts. See font preview at Google Fonts
Turning Use Custom Fonts and Custom Font Color buttons on, you will have the following options:

1. Headings

Headings font and color: select font and color for headings
Transform to Uppercase: If you tick this box, headings such as <h1><h2><h3> will be in uppercase

2. Body

You can make adjustments to Body font, Font color and Font size

Header

1. Header Style

There are 4 styles of Header in Umbra theme

♣ Header Default

♣ Header Business

♣ Header Center

If you want to create Header Center, you will need to create 2 menus in Appearance/ Menus. We call them Menu Left and Menu Right. Here are images of these 2 menus:

Learn more about creating a menu: Set Up Menu

♣ Header Transparent

2. Navigation Bar

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.
Show Shopping Cart/ Search Icon/ Wishlist Icon: Turn these buttons on to show these items
Use Custom NavBar Font and Color: Turn this button on to adjust NavBar font and color. When you enable this button, you will have extra options such as:
NavBar Font: Select a font for menu items on navigation bar
Font Size: Set up a Font Size
Link Color/ Link Hover Color: Select a color or hover color for menu items

Transform to Uppercase: Tick this box so that Header font will transform into Uppercase
NavBar Link Spacing: You can change NavBar Link Spacing here

3. Logo

Umbra 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, font color, uppercase for text logo. If turning on this button then you can Upload Your Logo, adjust Image Height, Upload Your Logo Transparent and change Image Transparent Height

4. Top Bar

Show Top Bar: Turn this button on to show Top Bar
Mail/ Phone: Enter an email address and phone number
Show Wishlist/ Show My Account and Show Checkout: Turn these buttons on to show these items on the top bar

Footer

Footer Layout: There are two layouts which are full-width and boxed

1. Full width

2. Boxed

Footer Columns (Widgetized): The number of footer columns fluctuates between 0 and 4

Background Image: Upload a background image for footer
Footer Bottom Content (HTML): enter content for Footer Bottom

Widgets

This section helps you to make changes to sidebars and widgets of Footer, namely Noo- Footer Column #1,2,3 and 4

Blog

Making some adjustments 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
Show Heading?: Select Show or Hide
Heading Title: Enter a title for Heading
Heading Sub title: Enter a sub title for Heading
Height of Heading Background: You can change height of heading background here
Using Parallax: Check this box to enable parallax effect on your heading background
Heading Background Image: Upload a heading background image here

2. Single Post

Show heading: Select Show or Hide
Heading subtitle: Enter a subtitle for the Heading area
Height of Heading Background: Adjust height of heading background here
Using Parallax: Tick this box to enable parallax effect on your heading background
Heading Background Image: Upload a heading background image
Post layout: You can choose the same layout as Blog layout or choose another style
Enable Related Post: Turn this button on to show related posts
Show Post Meta: Tick these boxes to show Post Meta and Author`s Bio on Single Post Page
Enable Social Sharing: Activate this button to enable social sharing. Then you will enter sharing title and check boxes of social media via which single posts will be shared

Woocommerce

1. Shop Page

Show Heading: Select Show or Hide
Height of Heading Background: This option adjusts height of Heading Background
Using Parallax: Check this box to enable parallax effect on your heading background
Heading Background Image: Upload a heading background image here
Shop Title: Enter a title for Heading area
Shop sub title: Enter a subtitle for Heading area
Shop Layout: there are 2 layouts which are Full-width and Boxed

1. Full-width

2. Boxed

Shop Sidebar: You can show Right Sidebar/ Left sidebar or hide Sidebar
Choose Sidebar: select a sidebar which is shown on Shop Page
Products Grid Columns: The number of columns is shown on Shop page
Show Filter by attribute: You can select Yes or No to show or hide the filter
Show Display by View: show display of products based on Grid or List
Show View Style: There are 3 view styles

1. Style one

2. Style two

3. Style three

Products Per Page: The number of products is shown per page

2. Single Product

Product Layout: You can choose the same layout as Shop Page or another layout
Related Products Count: The number of related products is shown on each single product page

Custom Code

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

Import/Export Settings

All themes of NooTheme share the same settings structure so that you can export and import setting from one theme to another one conveniently.

Import Settings: Click Upload button then choose a JSON file (.json) from your computer to import setting into 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 can use that file to restore theme settings to any themes of NooTheme

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, Umbra has extra 18 ones helping you to create many desirable pages. To generate the shortcodes, go to Backend Editor, click the “+” icon to add shortcode. Navigate to Umbra tab to find a shortcode you want to use. You can add those shortcodes to any pages or posts for your own use

Note: In some cases, when you add an element and edit it, you should edit Row settings at the same time

♣ Row settings includes:
• General:
Using Container: if you check this box, container`s width will be 1170px.
Row stretch: In our demo, we set Default in this section. Besides Default, you can select Stretch row, Stretch row and content, stretch row and content (no paddings). If opting these ones, the whole content in Red row 2 will disappear when it is shown on the site.
Full height row: when you tick this box, row will be set to full height.
Use video background: If this box is checked, video will be used as row background.
Parallax: There are three options for you:
None: image without parallax effect
Simple: image with parallax effect. It means that the image will move when you let the mouse scroll on it
With fade: image with parallax effect but move effect of the image is not as clear as that of Simple style.
Note: Two options Use video background (tick this box) and Parallax (Simple and With fade) will avail in some cases. For example, if font color is white and you do not use video background or Simple/ With Fade Parallax then visitors of you site may find it difficult to read white words and phrases. You know, white words on white background. No one can figure out those words in this case!

Design Options:
CSS box: you can change width of padding, border and margin here
Background color: opt color for background 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

1. Product Grid

This is one of the shortcodes used to create Home Page
Title: Enter a title here
Sub title: Enter a sub title
Choose Style: There are 3 styles which are Style One, Style Two or Style Three

Style 1

Style 2

Style 3

Using Masonry: This option controls loading effect of products. If you select Yes, you can minimize the screen to see this effect in a clear way.

1. No filter

2. Style filter

Choose columns: The number of columns is shown. This number fluctuates between 1 and 5
Order By: This option handles display order of products based on Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Limited: This option restricts the number of products displayed in the section using this shortcode

2. Product Group Sale

It is one of the shortcodes used in building Home Page
Title: Enter a title
Image: Upload an image
Sub title: Enter a sub title
Description: Give a short description
Order By: This option controls display order of products based on Older First, Recent First, Title Alphabet and Title Reversed Alphabet
Limited: This option places a limit on the number of shown products

3. Noo Testimonial

It is one of the shortcodes used to create Home Page
Choose Style: There are 2 styles which are Default and Thumbnail Control

1. Default

2. Thumbnail control

Categories: Select a category or all categories
Limited Testimonial: This option places a limit on the number of testimonials
Order By: This option handles the display order of Testimonials
Auto Play: Choose Yes so that the slider can run automatically

4. Noo Mailchimp

It is the shortcode used on most pages of the site
Choose Style: There are 4 styles

Style 1

style 2

Style 3

Style 4

Title: Enter a title
Description: Give a short description here
Note: In order that Noo Mailchimp can function properly, you will need to install and activate Mailchimp For WordPress plugin. Then you will paste these codes into Admin panel> Mailchimp For WordPress> Forms> Fields

5. Noo Services

It is one of the shortcodes used to create Home Page 2

Style: There are 2 styles which are Style Center and Style Left

1. Style Center

2. Style Left

Choose Icon: There are 2 kinds of icon. If you select Font, you will have a drop-down list of icons. Meanwhile, when you select Image, you will have an option to upload an image
Title: Enter a title here
Description: Give a short description here

6. Noo Partner

This is one of the shortcodes used to create Home Page
Limited Post of slider: This option places a limit on number of images per slider
Upload Images: You can upload many images here
Custom link: Enter link of images here. Links are separated by Enter
Custom Link Target: Links can be opened in the same window or in a new window
Auto play: Select Yes so that the slider can run automatically

7. Noo Banner

It is one of the shortcodes used to create Home Page

Style Item: There are 3 styles which are Default, Vertical and Horizontal

1. Default

2. Vertical

3. Horizontal

You can click + icon to add extra sections

8. Noo Simple Banner

It is one of the shortcodes used to create Home Page 6
Content Position: This option handles position of title and link button. There are 2 options that are Content Left and Content Right

1. Content Left

2. Content right

Image: Upload an image here
Title: Enter a title
Link: Enter a link and title of the link

♣ The second one includes a Product Grid shortcode

9. Noo Simple Countdown

It is one of the shortcodes used to create Homepage
General options

Style Item: There are
Background: Upload a background image
Choose Date: the date on which the countdown will end
Title: Enter a title here
Description: Give a short description
Link: Insert a link and name of the link hereDesign options (these options are only available to Simple Countdown left)Background wrapper: Upload a wrapper
Title wrapper: Enter a wrapper title
Description wrapper: Enter a short description for wrapper

10. Product Countdown

It is one of the shortcodes used to create Home Page 5
Choose Date: Enter a date on which the countdown will end
Select Identification: You can input product ID or product SKU or product title to see suggestions

11. Noo Blog

It is one of the shortcodes used to build Home Page
Title: Enter a title here
Description: Give a short description
Blog Style: There are 5 styles

Data source: Data can be taken from three sources which are category, tags and posts
Categories: Select blog categories here
Order By: This option handles display order of blog posts based on Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Posts per page: The number of posts is shown per page
Excerpt length: The number entered here is equal to the number of words included in the excerpt
Link: Enter a link and title of the link. This title will be shown at the bottom of this section

12. Product Simple Slider

This is one of the shortcodes used to create Home Page
Choose Categories: Select categories whose products will be shown
Order By: This option determines the display order of products based on Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Limit: This option places a limit on the number of shown products
Config columns slider: The number of columns is shown on the slider. It fluctuates between 1 and 5
Auto Slider: Select True so that the slider can run automatically

13. Product Simple

This is one of the shortcodes used to create Home Page 4
General options
Choose categories: Choose categories whose products are shown
Order By: This option decides display order of products based on Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Limit: This option places a limit on the number of shown products

Banner options
Banner Style: This option controls position of Banner. There are 2 styles which are Banner Left and Banner Right

1. Banner Right

2. Banner Left

Content Style: This option handles position of Title, Description and Link button. There are 3 styles which are Bottom Right, Top Left and Center center

1. Bottom Right

2. Top Left

3. Center Center

Upload Banner: Upload a banner
Title: Enter a title here
Description: Give a short description
Link: Enter link and title of the link

14. Short Image

It is one of the shortcodes used to create Home Page 3
Short Image settings
Style: there are 2 styles which are Style Right and Style Left. This option decides position of the image

1. Style Left

2. Style Right

Image: Upload an image here
Title: Enter a title here

15. Noo Blog Masonry

It is used to create Blog Masonry Page
Data Source: Select a data source from which blog posts are taken
Categories: Select categories that will be shown
Columns: The number of displayed columns fluctuates between 2 and 4
Order By: This option determines display order of posts based on Recent First, Older First, Title Alphabet and Title Reversed Alphabet
Posts Per Page: The number of posts is showcased on a page
Excerpt length: The number you enter here is equal to the number of words included in the excerpt.

16. Custom Link

It is one of the shortcodes used to create Home Page 5
Style: There are 2 styles which are Content Top and Content Bottom

1. Content Top

2. Content Bottom

Title: Enter a title
Description: Give a short description
Link: Enter a link and its title

17. Noo Team

It is one of the shortcodes used in building About us page
Title: Enter a title here
Description: Give a short description here
Categories: Choose a Team Member category which will be shown
Order By: This option determines display order of team members based on Recent First, Older First, Title Alphabet and Title Reversed Alphabet
Posts per page: The number of posts is shown per page

18. Noo Introduce

It is one of the shortcodes used to create Contact Us Page
Image: Upload an image here
Title: enter a title
Text: Input a short description