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
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
<input type="email" name="EMAIL" placeholder="Your email address" required />
<input type="submit" value="subscribe" />
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
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
