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, Organici has 30 extra ones helping you to create many desirable pages. To generate the shortcodes, go to Backend Editor, click the “+” icon to add shortcode. Navigate to Organici 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!
• 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 here. Below 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.
CSS box: you can change width of padding, border and margin here
Background color: opt color for background here. Below 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. Image Attributes
This shortcode is used in creating Home Page
Upload Image: You can upload images here
Upload Image: You can upload images here
2. Noo farmer
This shortcode is one of the shortcodes used to Home Page
Title: Enter a title here
Description: Give a short description
Choose Categories: choose farmer categories
Order By: This option determines the display order of farmer (Recent First, Older First, Title Alphabet or Title Reversed Alphabet)
Product Columns: The number of columns is shown
Posts per page: The number of posts is displayed per page
Title: Enter a title here
Description: Give a short description
Choose Categories: choose farmer categories
Order By: This option determines the display order of farmer (Recent First, Older First, Title Alphabet or Title Reversed Alphabet)
Product Columns: The number of columns is shown
Posts per page: The number of posts is displayed per page
3. Noo Farmer Slider
It is used in building Our Story page
Title: Enter a title here
Description: Give a short description here
Order By: This option handles the display order of farmers (recent first, older first, title alphabet, title reversed alphabet)
Posts per page: The number of posts is displayed per page
Background your image: Upload your background image here
Title: Enter a title here
Description: Give a short description here
Order By: This option handles the display order of farmers (recent first, older first, title alphabet, title reversed alphabet)
Posts per page: The number of posts is displayed per page
Background your image: Upload your background image here
4. Noo Present Product
Noo Present Product is used in creating Home page
Icon: Upload an icon image
Title: Enter a title here
Description: Give a short description here
Button name: Give a name to the button
Button Link: Enter link of the button here
Icon: Upload an icon image
Title: Enter a title here
Description: Give a short description here
Button name: Give a name to the button
Button Link: Enter link of the button here
5. Noo Testimonial
This one is used to show testimonials on Home Page
Choose Style: There are two styles that are Pagination and Thumbnail
Choose Style: There are two styles that are Pagination and Thumbnail
1. Pagination Style
2. Thumbnail Style
Categories: Choose Testimonial categories in the drop-down list
Your background image: Upload a background image
Order By: This option decides the display order of Testimonials (Recent First, Older First, Title Alphabet or Title Reversed Alphabet)
Auto Play: Choose Yes or No
Limited Testimonial: The maximum number of testimonial is shown
6. Noo Blog
This shortcode is used in creating Home Page
Title: Enter a title here
Description: Give a short description here
Data Source: Choose a kind of data that will be displayed
Categories: Choose post categories that will be shown
Order By: This option controls the display order of posts (Recent First, Older First, Title Alphabet or Title Reversed Alphabet)
Choose Columns: The number of columns is shown
Posts per page: The number of posts is shown per page
Excerpt Length: This option places a limit on the number of words shown in the excerpt
Show Loadmore button: If you tick this box, the loadmore button will be shown under the content.
Title: Enter a title here
Description: Give a short description here
Data Source: Choose a kind of data that will be displayed
Categories: Choose post categories that will be shown
Order By: This option controls the display order of posts (Recent First, Older First, Title Alphabet or Title Reversed Alphabet)
Choose Columns: The number of columns is shown
Posts per page: The number of posts is shown per page
Excerpt Length: This option places a limit on the number of words shown in the excerpt
Show Loadmore button: If you tick this box, the loadmore button will be shown under the content.
7. Noo Our Story
This one is used in creating Home page 2
Title: Enter a title here
Content: Add content
Signature: Display signature by image
Button name: Give a name to the button
Button Link: Insert Link of the button
Gallery: Upload images here
Title: Enter a title here
Content: Add content
Signature: Display signature by image
Button name: Give a name to the button
Button Link: Insert Link of the button
Gallery: Upload images here
8. Noo Our Story 2
It is one of the shortcodes used to create Home Page 3
Title: Enter a title
Content: Add content
Background: Upload a background image
Signature: Display signature by an image
Name, Position: Enter name and position
Image bottom: Upload an image bottom
Title: Enter a title
Content: Add content
Background: Upload a background image
Signature: Display signature by an image
Name, Position: Enter name and position
Image bottom: Upload an image bottom
9. Noo Image Signature
This shortcode is used in creating Our Story Page
Image: Upload an image
Background color: Select a background color here
Signature: Display signature by image
Name, Position: Enter name and position
Image: Upload an image
Background color: Select a background color here
Signature: Display signature by image
Name, Position: Enter name and position
10. Noo Title
This shortcode is used in creating Home Page 2
Title: Enter a title here
Description: Give a short description here
Title: Enter a title here
Description: Give a short description here
11. Noo Information
This shortcode is used in creating Home Page 3
General options:
Icon: Upload an icon
Number: Enter a number
Title: Enter a title
Description: Give a short description
Color: Choose a color for title and number
Position: The position of title, number and description. It can be Left or Right
Design Options:
CSS box: you can change width of padding, border and margin here
Border color: Choose a color for the border
Border Style: Opt a border style in the drop-down list
Border Radius: Choose a border radius in the drop-down list
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.
General options:
Icon: Upload an icon
Number: Enter a number
Title: Enter a title
Description: Give a short description
Color: Choose a color for title and number
Position: The position of title, number and description. It can be Left or Right
Design Options:
CSS box: you can change width of padding, border and margin here
Border color: Choose a color for the border
Border Style: Opt a border style in the drop-down list
Border Radius: Choose a border radius in the drop-down list
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.
12. Noo Images Slider
This shortcode is used in creating Home page 4
Config columns Slider: choose the number of slider columns that will be shown. The number fluctuates between 1 and 5
Auto Slider: Choose True or False. If it is True, the Slider will play automatically. The opposite belongs to False
Using Padding?: Choose Yes or No
Click + icon to upload image and add link of the image.
Config columns Slider: choose the number of slider columns that will be shown. The number fluctuates between 1 and 5
Auto Slider: Choose True or False. If it is True, the Slider will play automatically. The opposite belongs to False
Using Padding?: Choose Yes or No
Click + icon to upload image and add link of the image.
13. Noo Images Grid
This shortcode is used in creating Home Page of Bakery
Config Columns: Choose the number of shown columns. It fluctuates between 1 and 5.
Then click the triangle icon to Upload image and insert link of the image
Config Columns: Choose the number of shown columns. It fluctuates between 1 and 5.
Then click the triangle icon to Upload image and insert link of the image
14. Noo Instagram
This shortcode is used in creating Home 2 Page of Bakery
Icon: Upload image of icon
Attach: Give a brief description
Title: Enter a title
Description: Create a short description
Instagram User: Enter an instagram user
Number of images: Enter number of images which will be shown
Check for new images on every hours: The time allows you to updatenew images to Instagram on your page again or you can select Randomise Images
Icon: Upload image of icon
Attach: Give a brief description
Title: Enter a title
Description: Create a short description
Instagram User: Enter an instagram user
Number of images: Enter number of images which will be shown
Check for new images on every hours: The time allows you to updatenew images to Instagram on your page again or you can select Randomise Images
15. Noo About Us
This one is used in building Home page of Bakery
Image Left: Upload an image that will be displayed on the left of the page
Icon: Upload an icon here
Description: Incorporate a short description into this section
Button name: Give a name to the button
Button Link: Insert link of the button into this section
Image Left: Upload an image that will be displayed on the left of the page
Icon: Upload an icon here
Description: Incorporate a short description into this section
Button name: Give a name to the button
Button Link: Insert link of the button into this section
16. Custom Countdown
This shortcode is used in creating Home Page of Bakery
Custom Link: Incorporate a link into this section
Choose date: Select a date in the calendar
Attach: Incorporate an attach here
Title: Enter a title here
Description: Insert a short description here
Price: Incorporate a price here
Image: Upload an image here
Custom Link: Incorporate a link into this section
Choose date: Select a date in the calendar
Attach: Incorporate an attach here
Title: Enter a title here
Description: Insert a short description here
Price: Incorporate a price here
Image: Upload an image here
17. Noo Clients
This shortcode is used in creating Home Page of Bakery
Icon: Upload an icon here
Attach: Enter a short description
Title: Enter a title
Description: Create a short description here
Config columns: Choose the number of shown columns
Click triangle icon to upload image and insert link of the image
Icon: Upload an icon here
Attach: Enter a short description
Title: Enter a title
Description: Create a short description here
Config columns: Choose the number of shown columns
Click triangle icon to upload image and insert link of the image
18. Noo Blog List
This shortcode is used in creating Home Page of Bakery
Icon: Upload image of the icon
Attach: Enter a short description
Title: Enter a title
Description: Create a short description
Data Source: Select a content type in the drop-down list. The content can be originated from Category, Tags or Posts.If you are partial to Category then you will have options such as:
Categories: choose categories in the drop-down list
Order By: This option handles the display order of posts. The order is Recent First, Older First, Title Alphabet or Title Reversed AlphabetIf you opt Tags, extra options will be Tags and Order By
If you select Posts, you will have options:
Include Only (Add title of Posts or Pages) and Order By
♣ The second one is Noo Image:
Upload Image: You can upload an image
Link Image: Incorporate link of the image into this section
Image height: Set height of the image
Icon: Upload image of the icon
Attach: Enter a short description
Title: Enter a title
Description: Create a short description
Data Source: Select a content type in the drop-down list. The content can be originated from Category, Tags or Posts.If you are partial to Category then you will have options such as:
Categories: choose categories in the drop-down list
Order By: This option handles the display order of posts. The order is Recent First, Older First, Title Alphabet or Title Reversed AlphabetIf you opt Tags, extra options will be Tags and Order By
If you select Posts, you will have options:
Include Only (Add title of Posts or Pages) and Order By
♣ The second one is Noo Image:
Upload Image: You can upload an image
Link Image: Incorporate link of the image into this section
Image height: Set height of the image
19. Noo Image
This shortcode is used in building Home Page of Bakery
Upload Image: You can upload an image
Link Image: Incorporate link of the image into this section
Image height: Set height of the image
Upload Image: You can upload an image
Link Image: Incorporate link of the image into this section
Image height: Set height of the image
20. Noo Service
This shortcode is used to create Home 2 Page of Bakery
Icon: Upload image of the icon
Attach: Enter a brief description here
Title: Enter a title here
Description: Create a short paragraph
Config Columns: Choose number of shown columns in the drop-down list
Click the triangle icon to add Title, Upload image and Enter a short description
Icon: Upload image of the icon
Attach: Enter a brief description here
Title: Enter a title here
Description: Create a short paragraph
Config Columns: Choose number of shown columns in the drop-down list
Click the triangle icon to add Title, Upload image and Enter a short description
21. Noo Boxes
This shortcode is used in creating Boxes page
Choose boxes: Choose boxes that will be shown.
Note: Boxes are created in Products> Boxes
Enter Name of the Box, add products to box, select a title color, upload an image that represents the box.
Choose boxes: Choose boxes that will be shown.
Note: Boxes are created in Products> Boxes
Enter Name of the Box, add products to box, select a title color, upload an image that represents the box.
Choose columns: Choose number of columns that will be displayed
22. Noo Product Grid
Icon image: Upload an icon image
Title: Enter a title here
Description: Give a short description here
Choose Style: One or Two. If you choose Style One, there will be icons/thumbnails of product categories that are created in Products> Categories. Besides, when you let the mouse hover over products, you also find the recognizable difference between Style One and Two.
Title: Enter a title here
Description: Give a short description here
Choose Style: One or Two. If you choose Style One, there will be icons/thumbnails of product categories that are created in Products> Categories. Besides, when you let the mouse hover over products, you also find the recognizable difference between Style One and Two.
1. Style One
2. Style Two
Choose Categories: Choose Product categories that will be displayed.
Product columns: The number of columns is shown
Order By: This option handles the display order of products (Recent First, Older First, Title Alphabet and Title Reversed Alphabet.
Limit: The maximum number of products are shown
23. Noo Product Slider
This shortcode is used in building Home Page 2
Title: Enter a title
Description: Give a short description here
Choose Categories: Choose product categories that will be displayed
Order By: This option decides the display order of products (recent first, older first, title alphabet or title reversed alphabet)
Limit: This one restricts the number of shown products
Title: Enter a title
Description: Give a short description here
Choose Categories: Choose product categories that will be displayed
Order By: This option decides the display order of products (recent first, older first, title alphabet or title reversed alphabet)
Limit: This one restricts the number of shown products
24. Product Masonry
This shortcode is used in creating Home page
Title: Enter a title here
Description: Give a short description
Choose Data: Choose data which will be displayed
Choose categories: choose product categories that will be shown
Order By: Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Product Columns: The number of columns is displayed
Limit Excerpt: This option places a limit the number of words shown in the excerpt
Posts per page: The number of posts is displayed per page
Title: Enter a title here
Description: Give a short description
Choose Data: Choose data which will be displayed
Choose categories: choose product categories that will be shown
Order By: Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Product Columns: The number of columns is displayed
Limit Excerpt: This option places a limit the number of words shown in the excerpt
Posts per page: The number of posts is displayed per page
25. Product Countdown
This one is used in creating Home page
Choose Date: The date on which the count-down will end
Select identificator: Input Product ID/Product SKU/ product title to see suggestions
Upload Icon title: upload a title iconChoose Style: Default or White
Choose Date: The date on which the count-down will end
Select identificator: Input Product ID/Product SKU/ product title to see suggestions
Upload Icon title: upload a title iconChoose Style: Default or White
1. Default
2. White
This shortcode is used in building Home 2 Page of Bakery
Icon: Upload image of the icon here
Attach: Give a brief description that will be shown under the icon
Title: Enter a title
Description: Enter a short paragraph
Choose Categories: Select product categories in the drop-down list
Order By: This option decides the display order of products. The order can be Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Limit: This option places a limit on the number of shown products
Background: Upload a background image
Icon: Upload image of the icon here
Attach: Give a brief description that will be shown under the icon
Title: Enter a title
Description: Enter a short paragraph
Choose Categories: Select product categories in the drop-down list
Order By: This option decides the display order of products. The order can be Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Limit: This option places a limit on the number of shown products
Background: Upload a background image
27. Product Simple Slider
This one is used in creating Home page 4
Choose Categories: Choose product categories that will be shown
Order By: The display order of products (Recent first, Older first, Title Alphabet, Title reversed alphabet)
Limit: the number of products is shown
Config Columns Slider: The number of slider columns is shown
Auto Slider: Opt True or False. The Slider will play automatically when you select True. The opposite belongs to False.
Choose Categories: Choose product categories that will be shown
Order By: The display order of products (Recent first, Older first, Title Alphabet, Title reversed alphabet)
Limit: the number of products is shown
Config Columns Slider: The number of slider columns is shown
Auto Slider: Opt True or False. The Slider will play automatically when you select True. The opposite belongs to False.
28. Noo Product List
This shortcode is used in creating Home Page 2
Title: Enter a title here
Description: Give a short description here
Choose categories: Choose product categories which will be displayed
Order By: this one handles the display order of products (Recent First, Older First, Title Alphabet or Title Reversed Alphabet)
Limit: The maximum number of products is shown
Button name: Give a name to the button
Button Link: Input link of the button
Title: Enter a title here
Description: Give a short description here
Choose categories: Choose product categories which will be displayed
Order By: this one handles the display order of products (Recent First, Older First, Title Alphabet or Title Reversed Alphabet)
Limit: The maximum number of products is shown
Button name: Give a name to the button
Button Link: Input link of the button
29. Noo Map
This shortcode is used to create Contact Page
Latitude: Enter latitude of the address on Map
Longitude: Enter longitude of the address on Map
Refer to this link to know the latitude and longitude of the address
http://www.latlong.net/
Icon Map: Upload a icon image here
Height Map: Set height of the map
Title: Enter a title here
Description: Give a short description
Location, Email, Phone and Website: Complete these options
Latitude: Enter latitude of the address on Map
Longitude: Enter longitude of the address on Map
Refer to this link to know the latitude and longitude of the address
http://www.latlong.net/
Icon Map: Upload a icon image here
Height Map: Set height of the map
Title: Enter a title here
Description: Give a short description
Location, Email, Phone and Website: Complete these options
30. Product Simple
It is used to build Home 2 page of Bakery
Icon: Upload image of icon
Attach: Give a brief description that will be displayed under the icon
Title: Enter a title
Description: Enter a short paragraph
Select Identificator: Input Product ID/ SKU/ title to see suggestions
Background: Upload background image here
Icon: Upload image of icon
Attach: Give a brief description that will be displayed under the icon
Title: Enter a title
Description: Enter a short paragraph
Select Identificator: Input Product ID/ SKU/ title to see suggestions
Background: Upload background image here
31. Noo Mailchimp
1Noo Mailchimp is one of the shortcodes used to create Home Page
Title: Enter a title here
Description: Give a short description here
Title: Enter a title here
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="Email address" required />
<input type="submit" value="submit" />
