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
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
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
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:
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
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
Widgets
This section helps you to make changes to sidebars and widgets of Footer, namely Noo- Footer Column #1,2,3 and 4
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
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
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
Menus
You can create a new menu, change order of items in a formed menu or add items to the menu
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.
Footer
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
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:
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
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:
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
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.
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 Umbraand guides you to build your site with our theme.
Licensing Folder: Includes the licensing files of Themeforest purchase.
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:
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.
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.
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.
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 🙂
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
Post Types
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
Sidebars & Widgets
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)
Visual Composer
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.
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)
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
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
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
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
Woocommerce Pages
Woocommerce Pages
After Woocommerce plugin is installed, it creates the following new 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
