All themes of NooTheme share the same theme settings structure so that you can export then import setting from one theme to another one conveniently without any problem.
Import Settings: Click Upload button then choose a JSON file (.json) from your computer to import setting to 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 then can use that file to restore theme settings to any theme of NooTheme.
Custom Code
In this section you can add custom JavaScript and CSS to your site. You Google analytics tracking code should be added to Custom JavaScript field.
WooCommerce
1. Shop page
Shop Layout: Shop page is also an ideal place to incorporate sidebar. Opt With Right Sidebar or With Left Sidebar to achieve this and as usual, Full-Width makes display of the sidebar inactive. Shop Sidebar: select a sidebar that exists on the Shop page
Shop Heading: Enter a title here Heading Background Image: Remove or change the image Product Columns: This option handles number of columns shown on Shop page Products per page: The number of products is displayed on each page
2. Single Product
Product Layout: check this box in order that single products will have the same layout as Shop page. Using Header Image: Related Products Count: the number of related products is displayed
Blog
Making some changes in this section will have 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
Heading title: enter a title
Heading Background image: Upload, change or remove Heading background image here
Excerpt Length: Excerpt is a short extract or a short passage taken from the post. Length of the excerpt is determined by number of words. Therefore, if you opt a specific number like 20, the number of words contained in an excerpt will be equivalent to 20.
2. Single Post
Post Layout: Tick this box so that single posts have the same layout as Post list. Uncheck to opt another layout. Use Header Image: You can use Header blog image (the header image is displayed on Blog page) or Thumbnail (It is the featured image you set when you created a blog post) for Header image of single post. Show Post Tags: If checked, post tags will be displayed on each post. Similarly, you can choose show/hide author’s bio. Enable Social Sharing: Enable/Disable Social Sharing. If enable, you enable visitor to share your post by Facebook, Twitter, Google+, Pinterest and LinkedIn.
Widgets
This section enables you to customize Widgets situated in Footer. Besides, you can also add widgets to Menu One, Menu Two, Menu Three, Noo Footer Top, Noo Footer Bottom, Noo-Footer #.
We provide you with 6 different styles of header. It comes down to you interest to opt a suitable header style
♣ Header Boxed
♣ Header Shop
When you let the mouse hover over bullets, you will see menu items
♣ Header Business
♣ Header Transparent
♣ Header Minimalist
♣ Header Centralized
Note: Notice that all options you set in Header settings (these settings will appear when you create page) will override your choice to Header style in Customizer.
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. Use Custom NavBar Font and Color: Enabling this button, you can change font, font size, link color, link hover color and style of letters (uppercase or lowercase). For example, if you decide on orange and green for Link and Link Hover respectively then the Navigation Bar will have transformation. It is very clear that color of the links now change to orange and when you let your mouse hover over menu pagelink displayed on Navigation Bar, it will turn green. Transform to Uppercase: if you tick this box, all menu items turn into Uppercase
3. Logo
Carle 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, uppercase or lowercase for text logo.If turning on this button then you can upload an image and change its height.
4. Navbar Alignment
Turn on the button to change Navbar Height and NavNar Link Spacing
5. NavBar Top
Show NavBar Top: Enabling this button, this will offer you some options to add to the header like Email, Working hours and Link Map
Typography
You can customize your Typography settings here. Carle integrated all Google Fonts. See font preview at Google Fonts
1. Custom Fonts
Custom Fonts: Enable Custom Fonts to customize font, font size and other settings for heading and body text.
2. Headings
Headings Font: opt a font type in the drop-down list Font Color: select a font color
Transform to Uppercase: If ticking this box, you will have headings <h1><h2><h3> whichare in uppercase
3. Body
Body font: Choose a body font in the drop-down list Font size: Opt a font size
Design and Layout
1. Design
Theme RTL: If ticking No, from Right To Left, you will see the menu and the logo.
By contrast, when you tick Yes, that order will change: the logo is on the right side and the menu is on the left side.
Choose Color by theme: Opt a theme whose color will be changed Use Multiple Color: Turn on this button then you will have two options to change color of various elements on your site Primary Color One: Select a color Primary Color Two: Select another color
2. Layout
Site Layout: Full-width or Boxed. If you choose Boxed layout, you will have extra options: Site Width, Site Max Width: control width of the site Background Color: Select a background color Background image: Select a background image Background repeat: Background Repeat will work effectively if you use patterned background image as in the illustrative image on the right side. When you let the image repeated, its copies will cover the whole background. Background image attachment: There are two types that are Fixed image and Scroll with site. Fixed image means that when you scroll down on the page, you will still see the background image. Yet Scroll with site does not allow you to do this. Auto Resize: if you turn on the button, image will appear in the whole background area. Yet, turning off this button will make background image be displayed only in a part of one side. Position of background image in this case may be left top, left center, left bottom, center top, center center, etc of the side. It depends on your choice to Background Image Alignment box.
Site Enhancement
Custom Favicon: A favicon is an image viewable in browsers for users to identify your website among many tabs. Please see the illustrative image below to better understand function of the favicon. After choosing the favicon, 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 favion, you can distinguish your website`s tab from other tabs more easily:
Back To Top Button: Back To Top Button will appear in the right bottom when users scroll down.Enable/Disable as your preference. Enable Page Heading: Page Heading will appear on the header of page. When you enable this option, you will have header background image on blog page, shop page or another page…
Enable Mailchimp subscribe: Turn off this button, Mailchimp subscribe part will disappear. If you turn on it then you will have an extra option (Mailchimp settings) to enter API key.
Menus
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 on the condition that you have clicked Save & Publish button on top.
Menus
You can create a new menu, change order of items in a formed menu or add items to the menu
Footer
Footer
The Footer is composed of Widget area . Thus, 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 4 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 to Noo Footer Column #1 > click the triangle icon on the right of the widget to complete options:
Description: Give a short description
Upload an image
Address, Phone, Mail, Website, Copyright and Link of social pages
2. Noo Footer Column #2
Drag Noo Category Services to Noo Footer Column #2 > click the triangle icon > Type Title > Save
3. Noo Footer Column #3
Drag Noo Custom Menu to Noo Footer Column #3 > click the triangle icon > type title and select a menu (we opt Custom Menu in this drop-down list)> Save.
Note: The Custom Menu is created in Appearance> Menus:
4. Noo Footer Column #4
Drag Recent Tweets to Noo Footer Column #4 > click the triangle icon > complete options in this widget > Save
After accomplishing all steps above, please navigate to Customizer > Footer > You can upload background image of Footer, set number of Footer columns (on our demo site, we choose four columns) > Save and Publish.
Header
Mega Menu
Carle equips you with a kind of menu called Mega menu whose sample is placed on Shop page of our demo site. Basically, it has some typical features:
• The first one, a noticeable feature is that Mega menu allows you to organize sub-menus according to columns. Meanwhile, sub-menus are usually arranged in conformity with hierarchy.
• The structure of a mega menu contains Mega menu heading, sub-pages and widget area.
• Mega menu helps icons to be shown next to pages and sub-pages on the Navigation bar
Create A Mega Menu
In order that you can better perceive how to build a Mega menu, we will opt Shop page in which Mega menu is created. Please follow these steps:
Step 1: Navigate to Appearance > Menus > do the same steps mentioned in Set up Menu to obtain structure of the mega menu on Shop page as in the image
Step 2: Click the triangle icon on the right of Shop pages item then it will expand into many options like:Navigation label: name of the parent page (Shop page)Icon: you can select an icon of the page and change size, color and position of the icon here. Click the arrow icon to opt an icon and click the stick icon to make alternations to the icon.
Enable Mega menu: ticking this box allows display of megamenu
Mega menu column: This option has a drop-down list of different numbers of columns shown in Mega menu area. The number varies from 2 to 6. On our demo site, this number is 4.
Hide Mega menu heading: Check this box if you want to hide Mega menu heading. In our demo, Shop pages item is considered to be a Mega Menu heading. When you choose option of hiding mega menu heading, Shop pages title will automatically disappear on Mega menu area.
Step 3: Regarding Shop menu item, it is a Custom link. Therefore, you also have common options like URL, Navigation, Title Atribute and Icon. Besides, you will have an extra option named Mega Menu Widget Area which contains a drop-down list. Thus, you will have to opt Select Widget area whereas the remaining options in this drop-down list will make Shop pages item become a widget area.
Step 4: As for sub-pages like Wishlist, Cart, My account and Checkout, you only need to modify three options which are Navigation Label, Title Attribute and Icon.
Step 5:Widget1, 2 and 3 constitute the widget area of Mega menu. Therefore, before making any changes to options included in these three items, please assure that you created sidebars and widgets corresponding to them:
We have three sidebars: Menu One, Menu Two and Menu Three.
Next, navigate to Appearance > widgets > drag WooCommerce Products widget to Menu One, Menu Two and Menu Three. Click the triangle icon then you will have further options like Title, number of products to show, Show (All products, Featured products, On-sale products), Order by(Date, Price, Random and Sales), Order (Descending or Ascending).
Similar to Shop menu item, Widget 1, 2 and 3 are Custom links; therefore, you will also have options like URL, Navigation label, Title Attribute, Icon and Mega Menu Widget Area. In the drop-down list of Mega Menu Widget Area, opt Menu One, Menu Two and Menu Three to Widget 1, Widget 2 and Widget 3 respectively.
Step 6: Click Save Menu button
Header Types
Carle equips you with 6 different kinds of Header. It is up to your preference to pick a suitable header with the site. Let`s discover characteristic of each type:
1. Header 1
2. Header 2
This kind of Header has two special features:
• Allow you to search categories you created in WooCommerce Products > Categories
• You will see a section called Categories on the right of the navigation bar. This section contains a list of WooCommerce pages that are My account, Checkout, Cart and Shop page
3. Header 3
4. Header 4
5. Header 5
When you click the icon of search on the right side of the navigation bar, you will be directed to a separate search area like this:
Click X icon to return to the site.
6. Header 6
Similar to search in Header 5, as you press the icon of search, you will see the same thing happen in Header 5
Set up Menu
In order that pages can be displayed in the menu that is located in header area of the site, you have to carry out these steps:
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 Header Customizer
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 three parts which are menu area, logo and top bar:
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
Header Styles
Import Demo
Install theme and Import demo data
To import the demo data, please go to Noo settings> Import Demo> Tick all three boxes to import Post, Nav Menu and Comment> Let the mouse hover over the theme you want to install > Click on Install Demo button. You can see this video for the further instruction:
After you import the demo data successfully, the next and crucial step is to import Sliders so that they can be shown on pages of the site.
To import Sliders, follow these steps: Step 1: Go to Slider Revolution> click Import Slider> click Choose file (the uploaded file is ZIP) Step 2: To choose the file, navigate to Pearle_Package> rev_slider > select a theme, for example, carle > Homeslider.zip file Step 3: Click Import Slider then you will see the Home slider appear in Slider Revolution:
In case, you imported the demo data of another theme, for instance, the first installed one is Carle then you would like to replace it with Printing. Thus, it is certain that you will have to import sliders of own Printing. Step 1: Make sure that you have already installed and activated WordPress Database Reset. Step 2: Go to Tools> Database Reset > click Select All> paste the security code into the box> click Reset Table. Step 3: Go to Slider Revolution> Delete sliders you uploaded in the previous theme. Step 4: Return to steps of importing Sliders stated above.
Installation
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
Requirement For Pearle
To use Pearle 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 Pearle 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:
Pearle Theme File: Includes noo-carle.zip file that consists of everything you need to install the theme.
Document Folder: Includes PearleDocumentation file that helps you get to know about Pearle and 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 Pearle. 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 Pearle.
Note: Pearle contains 5 themes that are Bikang, Carle, Cleaning, Construct, Printing and Transport. We will give you instructions of Carle theme. After that, you can make use of knowledge to use the remaining themes.
Pages
Page Templates
We have built some specific Carle page templates for you. Here is the list and their short description:
• Default Template: The default template can be used for any page. You can customize and add shortcode to build Homepage, Contact, Blog…
•Full- width Template: This template is set to be full-width that can be used for Homepage, About page….Most of our demo pages use this kind of template.
• Template One page: This template is used for Home One page • Template Print: This template is used to create Print page
Page Settings
When you create a new page, you will have options to change elements of Header : Header setting: there is a drop-down list here. Using header in Customizer: The Header style chosen in Customizer will be used for this page Header Boxed, Header Shop, Header Business, Header Transparent, Header Minimalist and Header Centralized: If you pick one of these styles, it will be prioritized to be used for the page. Menu Logo: Upload a Logo image Heading background image: select a unique heading image for this page Revolution Slider: This option is used for only One Page Template. Opt a kind of Slider in the drop-down list. Note: In spite of what you set up in Customizer, all options above will always be prioritized.
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 custom slug of the page in Permalink field appeared after entering 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 you page you will need to our provided Shortcodes.
Step 5: Make 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 create shortcodes in 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 page
Here is the image of shortcodes used to build Contact page:
1. Red Row 1
• It has a Row shortcode whose style is one column
• The column contains a Noo Map shortcode 10. Noo Map
2. Red Row 2
• It has a Row shortcode of which style is one column
• The column includes a Noo Custom Form 7 15. Noo Custom Form 7
3. Red Row 3
• It has a Row shortcode whose style is one column
• The column contains a Text Block shortcode
4. Red Row 4
• It has a Row shortcode whose style is 3 columns (1/3+1/3+1/3)
• Each column comprises a Noo Information shortcode 20. Noo Information
5. Red Row 5
• It has a Row shortcode whose style is one column
• The column includes a Noo Newsletter shortcode 13. Noo Newsletter
Wishlist page
After YITH Woocommerce Wishlist plugin is activated, it will automatically create Wishlist page. If you do not see this page in Pages > All pages, please do the following steps to build this page:
• Navigate to Pages> Add New
• Enter title of the page and paste this code [yith_wcwl_wishlist] into content area
• On the right side, opt Default Template
• Click the Publish button
Note: To find Wishlist page on the site:
• Go to Shop page
• Let the mouse hover over image of the product you like, then click on heart icon and it will direct you to Wishlist page.
Blog pages
1. 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
Here is the image of shortcodes used to build Blog Mansory page
2.1. Red Row 1
• It has a Row shortcode whose style is one column
• The column contains a Text Block shortcode
2.2. Red Row 2
• It has a Row shortcode whose style is one column
• The column contains a Noo Blog Masonry Categories: Select blog post categories in the drop-down list Order By: Recent first, Older first, Title Alphabet and Title Reserved Alphabet. Post per page: The number you enter in this option will decide number of posts loaded at the same time when you scroll the mouse down. Load more icon: Opt an icon used to load items
Display of Blog Masonry on the site:
Special Offers Page
Here is the image of the shortcodes used to build Special Offers Page
Note: Before creating this page, please make sure that you have already finished building Print page:
Go to Pages> Add New > Enter title of the page: Print > on the right side, opt Template Print in Template section > click Publish button.
The reason for this action is that it will help the list of selected coupons to be printed. Read Red Row 3 below to better understand
1. Red Row 1
• It has a Row shortcode whose style is one column
• The column contains a Text Block shortcode
2. Red Row 2
• It has a Row shortcode whose style is 3 columns (1/3+1/3+1/3)
• Each column contains a Noo Pricing shortcode 18. Noo Pricing
Display of Red Row 1 and 2 on Special Offers page:
3. Red Row 3
• It has a Row shortcode of which style is one column
• The column contains a Noo Coupons shortcode Title: Enter a title Content: Enter a paragraph Link image: Enter link of the image Upload image Note: Opt a coupon by ticking the square box on the upper right. After choosing your coupons, you can print the list of these coupons by clicking Print Selected Offer.
4. Red Row 4
• It has a Row shortcode whose style is one column
• The column contains a Noo Custom Form 7 15. Noo Custom Form 7
5. Red Row 5
• It has a Row shortcode whose style is one column
• Text Block: add this shortcode [noo_newsletter title=”newsletter” subscribe_text=”Subscribe to our monthly newsletter” background=”314″] to content of Text Block so that Newsletter section will be shown on the site.
Introduction page
Here is the image of shortcodes used to create Introduction page:
1. Red Row 1
• It has a Row shortcode of which style is 2 columns (1/2+1/2)
• Each column contains a Text Block shortcode. However, content type of text section in each Text Block is different. The first one comprises a short paragraph whereas the second one is a video.
Display of Red Row 1 on Introduction page:
2. Red Row 2
• It has a Row shortcode whose style is one column
• The column comprises a Noo Team shortcode 11. Noo Team
3. Red Row 3
• It has a Row shortcode of which style is one column
• The column contains a Noo Newsletter shortcode 13. Noo Newsletter
Clients page
Here is the image of shortcodes used to create Clients page
1. Red Row 1
• It contains a Row shortcode whose style is one column
• The column comprises a Text Block shortcode
2. Red Row 2
• It has a Row shortcode whose style is one column
• The column contains a Noo testimonial shortcode 19. Noo Testimonial
Display of Red Row 1 and 2 on Clients page:
3. Red Row 3
• It has a Row shortcode whose style is one column
• The column contains a Noo Clients shortcode 12. Noo Clients
Display of Red Row 3 on Clients page
4. Red Row 4
• It has a Row shortcode whose style is one column
• The column contains a Noo Newsletter shortcode 13. Noo Newsletter
FAQs Page
Here is the image of shortcodes used to create FAQs page:
1. Red Row 1
• It has a Row shortcode whose style is one column
• The column contains a Tour shortcode. As soon as this one is added, some Section shortcodes will automatically be generated.
Click on each section and add the following shortcodes: Text Block and FAQ
Display of Red Row 1 on FAQs page
2. Red Row 2
• It has a Row shortcode whose style is one column
• The column contains a Noo Newsletter shortcode 13. Noo Newsletter
Service 2 Page
Building Service 2 page is is an easy task because you only need use a Row shortcode and a Noo Services Grid shortcode
Noo Services Grid settings: Categories Services: pick service categories in the drop-down list Order By: Recent First, Older First, title alphabet and Title Reserved Alphabet Show Filter: Opt Yes or No to show or Hide the filter Limit: this option limits the number of displayed services.
Service 1 Page
Here is the image of shortcodes used to create Service 1 page:
1. Red Row 1
• It has a Row shortcode whose style is one column
• The column contains a Text Block
Display of Red Row 1 on Service 1 Page:
2. Red Row 2
• It has a Row shortcode whose style is one column
• The column contains a Noo Services shortcode. Its service category is maintenance service and Order by is Recent First. 4. Noo Services
Display of Red Row 2 on Service 1 page:
3. Red Row 3
• It has a Row shortcode whose style is one column
• The column contains a Noo Services shortcode. Its service category is Upgrade Service and Order by is Older first
Display of Red Row 3 on Service Page:
4. Red Row 4
• It has a Row shortcode whose style is one column
• The column contains a Noo Services shortcode. Its service category is Repair Service and Order by is Recent first
Display of Red Row 4 on Service 1 Page:
Header pages
Shortcodes used to create Header pages are similar to ones in Home Revolution page. Thus, you can consult this link:
In general, the majority of sections on Home Revolution page are quite the same as those on Home page. Therefore, we only direct attention to some sections that have difference.
Home Revolution
Home page
Here are the images of shortcodes used to created two sections of Home revolution above:
1. Red Row 1
• It contains a Row shortcode whose style is one column
• The column comprises of a Revolution Slider shortcode
2. Red Row 2
• It has a Row shortcode whose style is a column
• The column contains a Noo Contact Form 7 Choose Style: The style is Style One or Style Two. If you pick the first one, you will have fewer options: Title: Enter a title Select Contact Form: opt a Contact form in the drop-down list.
Yet when you vote for Style Two, you will have further options: Number: Enter a number. If the number has more 2 digits, please separate them with space so that the number will not hide the title when they are displayed on the site. Background: Select a background image
Display of Red Row 2 onHome Revolution page
3. Red Row 3
• It has a Row shortcode whose style is one column
• The first column contains a Noo Title shortcode
• The second one comprises a Text Block • The third one contains a Text Block and a Noo Button 7. Noo Button
4. Red Row 4
• It has a Row shortcode whose style is one column
• The column contains a Noo Services shortcode 4. Noo Services
Display of Red Row 3 and 4 on Home Revolution page:
Home One Page
Home One Page is different from a normal Home page. So which features does it own to make itself distinguishable from an usual Home page? There are two important ones of Home One page you should remember:
No sooner have you scrolled the mouse down and let it pass the area of the slider than you can see Navigation bar.
When you click on items of the menu, for example, About, it will go to the corresponding location on the Home One Page on which About is placed. This is totally different from Home page. After you click an item, it will direct you to another page link.
1. Red Row 1
•It has a Row shortcode whose style is one column • Noo Title 1. Noo Title
• Row settings: After reading the second distinctive feature of Home One Page, perhaps, you will have a question of the detail related to “When you click on items of the menu, for example, About, it will go to the corresponding location on the Home One Page on which About is placed”. The key to the issue will be found in Row ID section in General. It is Row ID that will bring About, Services etc to their exact places on Home One Page. Yet, you have to make sure that Row ID is unique and valid according to w3c specification.Thus, you can speculate that the major change of shortcode settings in Home One page belongs to Row ID section.Please pay attention to this one:After entering a Row ID, you will see a URL next to the icon ” + ” at the top of each Red Row. For instance, if row ID is aboutus then URL will be #aboutus.
2. Red Row 2
• It has a Row shortcode whose style is one column
• Text Block shortcode
3. Red Row 3
• It has a Row shortcode whose style is 4 columns (1/4+1/4+1/4+1/4)
• Each column contains a Noo Why Choose Us shortcode 2. Noo Why Choose Us
About Uspage is constituted by Red Row 1,2 and 3:
4. Red Row 4
• It has a Row shortcode whose style is 4 columns (1/4+1/4+1/4+1/4)
• Each column comprises a Noo Counter shortcode 17. Noo Counter
5. Red Row 5
• It has a Row shortcode whose style is 2 columns (1/4+3/4)
• The first column contains the following shortcodes: Noo Title, Text Block and Noo Button 7. Noo Button
• The second one is composed of a Noo Services shortcode 4. Noo Services
Row settings:
Red Row 5 turns into Services page:
6. Red Row 6
• It has a Row shortcode whose style is one column. The column contains the following shortcodes: • Noo TItle • Text Block
• A row shortcode of which style is 3 columns (1/3+13+1/3)
• Each column is a Noo Pricing shortcode: Title: Enter a title here Price: Enter price here Button name: give a name to the button Button link: paste link of the button here Content: Enter items whose price is the one you input in Price option above. Separate items by pressing Enter Background Style: There are two available background colors that are White and Gray
Row settings:
Red Row 6 is transformed into Special Offers page:
7. Red Row 7
• It has a Row shortcode whose style is one column.
• The column contains a Noo Title shortcode • Row settings
8. Red Row 8
• It has a Row shortcode whose style is one column
• The column has a Text Block shortcode
9. Red Row 9
• It has a row shortcode whose style is one column
• Tab shortcode
After this shortcode is created, sections will be automatically formed or you can add extra ones. In our example, we add 3 sections whose titles are New Products, Popular Products, Best Selling
• Noo Woocommerce General options: Choose data: Opt an item in the drop-down list Order by: Recent first, Order first, Title Alphabet or Title reserved alphabet Post Per page: This option determines how many products are shown on the page Slider options: Show pagination: Choose Show or Hide so that pagination will be shown or hidden Auto play: Opt Yes or No
Shop Page is created by Red Row 7, 8 and 9:
10. Red Row 10
• It has a Row shortcode whose style is a column
• The column is composed of the following shortcodes:
• A Row shortcode of which style is 2 columns (1/4+3/4)
The first column is a Noo Title shortcode and the second one is a Noo Client shortcode 12. Noo Clients
• A Row shortcode of which style is one column
• Noo Testimonial shortcode 19. Noo Testimonial
Row settings:
Red Row 10 turns into Clients page:
11. Red Row 11
• It has a Row shortcode whose style is one column • Noo Blog 8. Noo Blog • Row settings
Red Row 11 turns into Blog page:
12. Red Row 12
• It has a Row shortcode whose style is one column
• The column contains a Noo Map shortcode Latitude: Enter a number corresponding to latitude of the map Longitude: Enter a number corresponding to longitude of the map Icon Map: Upload an icon image here Height Map: Enter a number equivalent to height of the map Note: To get longitude and latitude, firstly, you should go to this website: http://www.latlong.net/ Search the place you want then you will see its longitude and latitude
13. Red Row 13
• It has a Row shortcode of which style is one column
• Noo Newsletter: 13. NooNewsletter
Display of Red Row 12 and 13:
14. Red Row 14
• It has Row shortcode whose style is one column
• The column contains a Noo title shortcode Row settings
15. Red Row 15
• It has a Row shortcode whose style is one column
• The column contains a Text Block shortcode
16. Red Row 16
• It has a Row shortcode whose style is one column
• This column contains Contact Form 7
17. Red Row 17
• It has a Row shortcode whose style is 4 columns
• Each column contains a Noo Information shortcode Choose Style: The style controls position of each contact information. It can be Left or Center Icon: Click the arrow to choose an icon Name: give a name to each contact information section , for example, we have address, email, hotline, etc Description: give more specific contact information
Red Row 14, 15, 16 and 17 constitutes Contact page:
18. Red Row 18
• It has Row shortcode whose style is one column
• The column contains a Noo Appointment. This shortcode only has an option: Select Contact Form: opt a Contact form you created in Admin panel> Contact> Contact Forms Note: To see Appointment form, please scroll the mouse down to bottom of the page and click on Book Appointment tab on the right side.
Display of this shortcode on Home One Page:
Home Services
Here is the image of shortcodes used to create Home Services page:
1. Red Row 1
• It has a Row shortcode whose style is one column
• Revolution Slider Widget Title: Enter a title here Revolution slider: select Home slider
2. Red Row 2
• It has a Row shortcode of which style is one column
• Noo Title 1. Noo Title
3. Red Row 3
• It has a Row shortcode • Text Block
4. Red Row 4
• It has a Row shortcode whose style is 4 columns (1/4+1/4+1/4+1/4)
• Each column is a Noo Why Choose Us shortcode 2. Noo Why Choose Us
Display of Red Row 2,3 and 4 on Home Services:
5. Red Row 5
• It has a Row shortcode whose style is 4 columns (1/4+1/4+1/4+1/4)
• Four columns comprises 4 Noo Counter shortcodes with different titles. Noo Counter setitngs: Import Number: Enter a number here Tile: Enter a title here
6. Red Row 6
• It has a Row shortcode whose style is 3 columns (1/3+1/3+1/3)
• The first column is Noo Title 1. Noo Title
• The second one is Text Block
• The last one contains Text Block and Noo Button 7. Noo Button
7. Red Row 7
• It has a Row shortcode whose style is one column
• Noo Service shortcode 4. Noo Service
Display of Red Row 5,6 and 7 on Home Services page:
8. Red Row 8
• It has a Row shortcode whose style is one column. The column contains the following shortcodes: • Noo Title • Text Block
• A row shortcode whose style is 3 columns (1/3+1/3+1/3). Each column is a Noo Pricing shortcode: Title: Enter a title here Price: Enter price Button name: give a name to the button Button link: Add link of the button Content: Enter items whose price is the one you have just entered in Price option Background Style: There are two available background colors that are White and Gray.
Display of Red Row 8 on Home Services Page:
9. Red Row 9
• It has a Row shortcode whose style is one column • Noo Blog 8. Noo Blog
10. Red Row 10
• It has a Row shortcode whose style is 2 columns (1/2+1/2)
• The first column is Noo Testimonial shortcode 19. Noo Testimonial
Column settings:
• It has a Row shortcode whose style is one column
• Noo Team shortcode Note: When you let the mouse hover over each team member, a circle icon will appear. Click on this this icon to see full information of the team member:
12. Red Row 12
• It has a Row shortcode whose style is one column
• Noo Custom Form 7 shortcode Choose Style: The style is Style One or Style Two. If you pick the first one, you will have fewer options: Title: Enter a title Select contact form: Opt a contact form you created in Admin panel> Contact Form.
Yet when you vote for Style Two, you will have further options: Number: Enter a number. If the number has more 2 digits, please separate them with space so that the number will not hide the title when they are displayed on the site. Background: Select a background image
13. Red Row 13
• It has a Row shortcode whose style is one column • Noo Newsletter Title: Enter a title Subscribe Text: Type subscribe texts here Subscribe Mail list: This option shows what you completed in List name section when you had created a List in Mailchimp Style: Full-width or Boxed. The Style handles measurements of Newsletter section. Full-width give larger measurements while the opposite belongs to Boxed style. Background: Upload a background image here Note: Learn more about our Mailchimp Instruction
Home Shop 2
Here is the image of shortcodes used to create Home Shop 2:
1. Red Row 1
• It has a Row shortcode whose style is 2 columns (2/3+1/3)
• The first column is Noo Products Slider shortcode:
Product categories: This option has a drop-down list of product categories you created in Admin panel > Products> categories.
Order by: Recent first, Older first, Title alphabet or Title Reserved Alphabet.
Auto Play: Opt Yes or No
Limited: This option limits the number of displayed products
The second column contains 2 Single image shortcodes
Display of Red Row 1 on Home shop 2:
2. Red Row 2
• It has a Row shortcode whose style is 2 columns (1/4+3/4)
• The first column is Single image
• The second one is Noo Simple Product. Its setting is very simple because it only includes one option called Select Identificator (input product ID/SKU/title to see suggestions)
Display of Red Row 2 on Home Shop 2 page:
3. Red Row 3
• It has a Row shortcode whose style is one column
• Noo Poster Product:
Background: Upload a background image here
Product Categories: opt product categories in the drop-down list
Order by: Recent First, Older First, Title Alphabet, Title Reserved Alphabet
Auto play: Opt Yes or No
Limited: This option limits the number of displayed products
Note: Because the remaining red rows are similar to Red Row 8 to 11 of Home Shop 1 page, you can consult this link Home Shop 1 Page
Home Shop 1
Here is the image of shortcodes used to create Home Shop 1
1. Red Row 1
• It has a Row shortcode of which style is one column • Revolution Slider: Widget title: Enter Text used as widget title Revolution Slider: opt a Slider formed in Admin Panel > Revolution Slider. In our demo, we created three sliders which are Home slider, onepage and slider shop. It is understandable that on Home Shop 1, we will select Slider Shop.
Display of Red Row 1 on Home Shop 1:
2. Red Row 2
• It has a Row shortcode whose style is 4 columns (1/4+1/4+1/4+1/4)
• There are four Noo Why Choose Us shortcodes that are corresponding to these columns. They have four different titles: 30 Days Return, Free Delivery, Secure payment and Online support 24/7. 2. Noo Why Choose Us
• Row settings:
General contains
Using Container: if you check this box, container`s width will be 1170px.
Row stretch: In our demo, we set Default in this section. Besides Default, you can select Stretch row, Stretch row and content, stretch row and content (no paddings). If opting these ones, the whole content in Red row 2 will disappear when it is shown on the site.
Full height row: when you tick this box, row will be set to full height.
Use video background: If this box is checked, video will be used as row background.
Parallax: There are three options for you:
None: image without parallax effect
Simple: image with parallax effect. It means that the image will move when you let the mouse scroll on it
With fade: image with parallax effect but move effect of the image is not as clear as that of Simple style.
You should notice that in case of choosing parallax, you will have an extra option of uploading image right below parallax box. Nevertheless, if no image is specified, it will take background image from Design Options.
Design options:
CSS box: you can change width of padding, border and margin here
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.
Display of Red Row 2 on Home Shop 1 page:
3. Red Row 3
• It has a Row shortcode whose style is one column • Noo Product: General options: Choose Style: Style 1 or Style 2. This option controls position of the image. If it is Style 1, the image is on the right side while the opposite is true of Style 2. We selected Style 1 for Red Row 3. Text color: There are two choices for you: Black and White or White and Gold Icon: Upload an image Background: Upload a background image Select identificator: Input product ID or product SKU or product title to see suggestions Line options: Status: Hide or Show line style Line Style: Line Inset or Line Out. The first style, Line inset, it is a diagonal and the second one, Line out, it is a horizontal line
4. Red Row 4
• It has a Row shortcode whose style is one column • Noo Product: 27. Noo Product
5. Red Row 5
• It has a Row shortcode whose style is one column • Noo Product 27. Noo Product
Display of Red Row 3.4 and 5 on Home Shop 1 page:
6. Red Row 6
• It has a Row shortcode of which style is one column • Noo Title 1. Noo Title
7. Red Row 7
• It has a Row Shortcode of which style is one column • Text Block
8. Red Row 8
• It has a Row shortcode of which style is one column • Tab shortcode
After this shortcode is created, sections will be automatically formed or you can add extra ones. In our example, we add 4 sections whose titles are New Products, Popular Products, Best Selling and Sale Products
• Noo Woocommerce General options: Choose data: Opt an item in the drop-down list Order by: Recent first, Order first, Title Alphabet or Title reserved alphabet Post Per page: This option determines how many products are shown on the page Slider options: Show pagination: Choose Show or Hide so that pagination will be shown or hidden Auto play: Opt Yes or No
Display of Red Row 6, 7, 8 and 9 on Home Shop 1:
9. Red Row 9
• It has a Row shortcode whose style is 2 columns (1/2+1/2)
• The first column is Noo Testimonial Choose Style: Style 1, Style 2 or Style 3 Categories: Pick Testimonial categories in the drop-down list Order by: Recent first, Older first, Title alphabet or Title Reserved Alphabet Auto play: Opt Yes or No Limited Testimonial: The number of testimonials is displayed
Column settings:
• It has a Row shortcode of which style is 2 columns (1/3+2/3)
• The first column contains the following shortcodes: Noo Title, Text Block and 5 Noo List shortcodes with different descriptions 6. Noo List
• The second column includes a Noo Blog shortcode 8. Noo Blog
Display of Red Row 10 on Home Shop 2:
11. Red Row 11
• It has a Row shortcode of which style is one column
• Noo Newsletter Title: Enter a title Subscribe Text: Type subscribe texts here Subscribe Mail list: This option shows what you completed in List name section when you had created a List in Mailchimp Style: Full-width or Boxed. The Style handles measurements of Newsletter section. Full-width give larger measurements while the opposite belongs to Boxed style. Background: upload a background image here Note: Learn more about our Mailchimp Instruction
Home page
Here is the image of shortcodes used to create Home page
1.Red Row 1
• It contains a Row shortcode whose style is one column
• The column is composed of a Noo Post Contact shortcode/element
Settings:
Select Contact form: opt a contact form you created in Contact> Contact Forms
Include only: Add title and an extract of posts here. It is recommended that you choose a post to type here
Display of Red Row 1 on Home page:
2. Red Row 2
• It contains a row shortcode whose style is 2 columns (1/2+1/2)
• The first column is Single Image shortcode
• The second one includes the following shortcodes: Noo Title: Position Styles: this option controls position of the title. The style can be Left or Center
Choose color: Color of the title which is Black or White
Number: opt a number that will be placed next to the title. Notice that as for the number containing more 2 digits you should separate them by space so that the number will not hide the title when it is shown on the site.
Title: Enter a title here
Row shortcode whose style is 2 columns (1/2+1/2)
Add Noo Why Choose Us shortcode to each column:
Choose Style: Your choice in this section will have an influence on the next options.
If you opt Style 1 then the following ones are:
Style Align: Left or Right. If it is Right, the first word of the Description will be moved to the right little. Meanwhile, Left style will let the first words in each line of the Description be aligned or they will be arranged in a straight line when you see them in vertical direction.
Choose Style icon: Font icon or Image Icon. If your preference is the first one then you will be given Choose icon section. Yet, your interest is image icon you can upload images in Choose image
Title: Enter a title here
Description: Type a brief paragraph here.
If you opt Style 2 , the upcoming options are Choose Style Icon, Title and Description
If you opt Style 3, the next options are Choose Style icon, Image hover (this option will act if you select Image icon in Choose Style icon), Title and Description.
Row shortcode whose style is 2 columns (1/2+1/2)
You also add Noo Why Choose Us shortcodes to these columns in the same way above
Display of Red Row 2 on Home page:
3. Red Row 3
• It contains a Row shortcode whose style is one column
• Noo Save Your Money:
Choose Style: Style One or Style Two. The first choice is applied to Carle demo whereas the second one is used in Printing demo. Title: Enter a title here
Content: Enter a content here
Background: select a background image
Icon: Upload an icon image
Button name: Give a name to the button, for example, Learn more button
Button link: Paste link of the button
Style Two of Noo Save Your Money shortcode and its display on Home One page of Printing demo
4. Red Row 4
• It contains a Row shortcode whose style is 3 columns (1/3+1/3+1/3)
• The first column is Noo Title 1. Noo Title
• The second one is Text Block
• The third one includes Tex Block and a Row shortcode of which style is one column. Noo button is added to this column: Choose Style: Background or No Background. The first one let you complete the next two options are Button Name and Button Link. However, If you select the second one, you will have a further option called Choose icon.
5. Red Row 5
• It contains a Row shortcode whose style is one column
• Noo ServicesGeneral options:Categories Services: opt service categories hereOrder By: Recent First, Older First, Title Alphabet or Title Reserved AlphabetLimit: This option places a limit on the number of displayed servicesLimit excerpt: A number you enter here will be equal to excerpt length of each service post Services options:Show categories/ Title/ Learn more: Opt Hide or Show hereChoose Style: The Style can be Slider Services or Column Services. If you vote for Slider Services, you will have the following options: Show pagination (Opt show or hide here), Auto play (opt Yes or No to decide whether or not service`s sliders will automatically played or not. If you are partial to the second choice then you will have an option named Size Services. The size of column is Large or Small. Limited post of Slider: This option restricts the number of posts shown on each Slider. The number is 2, 3 or 4.
Display of Red Row 4 and Red Row 5 on Home page:
6. Red Row 6
• It has a Row shortcode whose style is one column
• The column contains Noo Title, a Row shortcode whose style is 2 columns (1/2+1/2).
• The first column comprises 5 Noo List shortcodes
Noo List settings:
Choose Style: The style can be default or Border. If it is default, the Description will be displayed like this:
If it is Border style, when you let the mouse hover over Descriptions, you will find that they are underlined.
List active: Opting Yes will result in automatic display of Border style
Description: Give a piece of information here.
• The second column is composed of Text Block, two Noo Button shortcodes 7. Noo Button
7. Red Row 7
• It has a Row shortcode of which style is one column
• The column contains a Single image shortcode
Display of Red Row 6 and Red Row 7 on Home page:
8. Red Row 8
• It has a Row shortcode of which style is one column
• Noo title
9. Red Row 9
• It has a Row shortcode of which style is one column
• Text Block
10. Red Row 10
• It has a Row shortcode of which style is one column
• Tab shortcode
After this shortcode is created, sections will be automatically formed or you can add extra ones. In our example, we add 4 sections whose titles are New Products, Popular Products, Best Selling and Sale Products
• Noo Woocommerce
General options:
Choose data: Opt an item in the drop-down list
Order by: Recent first, Order first, Title Alphabet or Title reserved alphabet
Post Per page: This option determines how many products are shown on the page
Slider options:
Show pagination: Choose Show or Hide so that pagination will be shown or hidden
Auto play: Opt Yes or No
11. Red Row 11
• It has a Row shortcode of which style is one column
• Noo Blog Choose Style: There are three styles for you to select: Slider One, Slider Two and Default. Slider One is used in Carle demo whereas Slider Two is used on Home One Page of Printing. Number: opt a number that will be placed next to the title. Notice that as for the number containing more 2 digits you should separate them by space so that the number will not hide the title when it is shown on the site.
Title: Enter a title here Description: Give a short description here Data source: The sources are Posts, Tags or category. Include Only: Add title of the posts which will be displayed on the page. Order by: Recent First (the latest published date), Older First (The older published date), Title alphabet, title reversed alphabet. Posts per page: The number of posts is shown per page. Excerpt length: Excerpt is a short extract or a short passage taken from from the post. Length of the excerpt is determined by number of words. Therefore, if you opt a specific number like 15, the number of words contained in an excerpt will be equivalent to 15.
Here is the image of Noo Blog with Slider Two Style displayed on Home One Page of Printing
Display of Red Row 11 on Home page:
12. Red Row 12
• It has a Row shortcode whose style is one column • Noo Team: Number: opt a number that will be placed next to the title. Notice that as for the number containing more 2 digits you should separate them by space so that the number will not hide the title when it is shown on the site. Title: Enter a title here Description: Give a short description Categories: opt a member category Order by: Recent First (the latest published date), Older First (The older published date), Title alphabet, title reversed alphabet. Posts per page: The number of posts is shown per pageDisplay of Noo Team on Home page:
13. Red Row 13
• It has a Row shortcode whose style is one column
• Noo clients Style: the style can be Default or Slider. If you have a liking for Default, you will have three extra options:
Upload images, Custom link (enter links for clients and those links are separated by Enter), Custom Link target (select where to open custom links: same window or new window). Yet, selecting the remaining style will make you complete two further options other than options above: Status Button (Show or Hide the button), Limited post of Slider (the number of posts situated on the Slider)
Display of Red Row 13 on Homepage:
14. Red Row 14
• It has a Row shortcode whose style is one column • Noo Newsletter Title: Enter a title Subscribe Text: Type subscribe texts here Subscribe Mail list: This option shows what you completed in List name section when you had created a List in Mailchimp Style: Full-width or Boxed. The Style handles measurements of Newsletter section. Full-width give larger measurements while the opposite belongs to Boxed style. Background: upload a background image here Note:♣You should follow these steps to have Mailchimp operated on your site well:
Install and activate Mailchimp for WP> go to Mailchimp for WP section in your admin panel> paste these codes
♣ If you follow the above method to integrate Mailchimp with your site, you should ignore Maichimp settings in Customizer> Site Enhancement.
Note: After creating Home page, go to Settings> Reading> tick a Static page in Front Page displays > opt Home page in the drop-down list of Front page > Save changes.
Post types
Post types
Usually, the theme only has a type of post called Blog post. However, hardly have you activated Noo Post Type plugin when you have 5 further kinds of post. So now the number of post types is 6, namely Blog post, Posts in Team member, Testimonial, Services, Coupons and Project.
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. As you can see, in our example, we created 7 categories for Blog posts. They are Car, Car Services, Car Tuning, Care Tips, Mechanic, Painting and Vehicle.
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. Team Member
Similar to Blog post, firstly, you will create Team categories. In our demo, we produce 2 categories named Leader and Member.
Next, Add New Team Members. Please notice thatdata you create in this section will be shown in 06 Team member section of Home page Step 1: Enter title Step 2: Complete Team Member Information (Image, Name, Position, Phone, Email and Experience), Media Data (link of social pages like Facebook, Twitter,etc), Specialty (give a Description and add Properties here), Certificates (give a Description here) Step 3: Turn to the right side and opt team category for the post Step 4: Do not forget to click Publish button to finish creating a new team member.
3. Service
Services will be shown in 02 Our Services section of Homepage, on Service 1 and Service 2 pages.
Add a new service category Go to Services > Services Categories > enter name of the category in Name section, you can upload an image of the category in Icon Image section > click Add New Services Categories button.
Add a new service Enter title > enter content of the service > choose a service category in Services Categories> upload a featured image in Featured image section> Publish
3.1. Services on other demos
Add a new service Only by carrying out simple and popular steps such as entering title, content, opting service category, uploading a featured image can you create a new service in Carle demo. However, the way in which you build content of a service in Printing demo will be a bit different. You will have to use shortcodes to create the content instead of typing it. This task is similar to building a page.
A typical service in our Printing demo will be shown like this:
See the image of all the shortcodes used to form this service
Red Row 1 represents Overview section of the service. It contains the following shorcodes:
Text Block:
General: enter title and content of the section here
Noo Image Slider: General options:
– Image size: the size can be thumbnail, medium, large, full or other sizes defined by the current theme. Besides, you can also enter image size in pixels such as 200×100 (widthxheight). Leave empty to use thumbnail size.
– Images: opt images in media library. Design options: you can make changes to CSS box, border color, border style, border radius, background and box controls.
Red Row 2 represents Why are we better than other ones. It contains the following shortcode:
Text block:
General: Enter title and content of the section
Red Row 3 represents What is included section of the service. It contains the following short codes:
Text Block:
General: Enter title of the section here
Accordion: After this shortcode is added, it will generate some sections which allow you to create small parts of “What is included”. Content of each accordion section is formed by Text Block shortcode.
Accordion settings:
Section settings and Tex Block settings
4. Testimonials
Testimonials are shown on Clients page
Add a New Testimonial Category
Go to Testimonial > Testimonial Categories > Enter name of category > click Add New Testimonial Category
Add a New Testimonial:
Step1: Enter title, content of the testimonial
Step 2: Complete testimonial options like Avatar (upload an image here), Name, Position. Opt a testimonial category on the right side.
Step 3: Click Publish button
5. Coupons
Coupons are shown on Special Offers page Add a new coupon:
Coupons > Add New> Enter title > It is up to you to upload a featured image on the right side> Publish.
6. Projects
Note: We do not provide you with project demo in Carle. Yet, you can learn about creating this part in Printing demo. Projects formed in Admin dashboard will be shown in 02 Featured Projects of Printing`s Home page.
Add a new Project category:
Project> Project categories> Enter name, slug, description > click Add New Project category button
Add a new Project
Step 1: Go to Project > Add New> Enter title and content of the project
Step 2: Navigate to Custom field below content area> add images in Gallery, click Add then enter name and link download in Attach, click Add then enter Label and Value in Project info.
Step 3: On the right side, opt a project category and upload a featured image.
Step 4: Click Publish button to complete.
Sidebar&Widget
Sidebar & Widget
Carle 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 3 sidebars which are Main Sidebar, Shop Sidebar and Services Sidebar.
♣ Main Sidebar is displayed on Blog page • Drag Archives, Search, Recent posts, Categories and Noo Best Services widgets to the Main Sidebar > click the triangle icon on the right of each widget and it is up to you to complete parts in each widgets as the image below. Again, remember that after making changes to those parts, you will have to click on Save button.
• In order that the sidebar can be displayed on the Blog page, please go to Customizer > Blog > Postlist > tick With Left or Right Sidebar in Blog Layout, opt Main Sidebar in Blog Sidebar part > Save and Publish.
♣ Shop Sidebar is shown on Shop page
• Drag Woocommerce Price Filter, Woocommerce Products and Noo Best Services widgets to the ShopSidebar > click the triangle icon on the right of each widget and it is up to you to complete parts in each widgets as the image below > Save.
• Go to Customizer> Woocommerce> Shop page> tick With Left or Right Sidebar, opt Shop Sidebar > Save and Publish
♣ Services Sidebar is shown on single service Note: this sidebar will not be displayed on Carle demo. It will be shown on Printing demo instead.
• Drag Noo Category Services and Text widgets to the Services Sidebar
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, Pearle 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 Nootheme 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 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. Noo Title
This shortcode is used to add titles Position Styles: this option controls position of the title. The style can be Left or Center Choose color: Color of the title which is Black or White Number: opt a number that will be placed next to the title. Notice that as for the number containing more 2 digits you should separate them by space so that the number will not hide the title when it is shown on the site.Title: Enter a title here Display of Noo Title on Home Page:
2. Noo Why Choose Us
Choose Style: Your choice in this section will have an influence on the next options.If you opt Style 1 then the following ones are:
Style Align: Left or Right. If it is Right, the first word of the Description will be moved to the right little. Meanwhile, Left style will let the first words in each line of the Description be aligned or they will be arranged in a straight line when you see them in vertical direction.
Choose Style icon: Font icon or Image Icon. If your preference is the first one then you will be given Choose icon section. Yet, your interest is image icon you can upload images in Choose image
Title: Enter a title here
Description: Type a brief paragraph here.
If you opt Style 2 , the upcoming options are Choose Style Icon, Title and Description
If you opt Style 3, the next options are Choose Style icon, Image hover (this option will act if you select Image icon in Choose Style icon), Title and Description. Display of Noo Why Choose Us on Home Page:
3. Noo Save Your Money
Choose Style: Style One or Style Two. The first choice is applied to Carle demo whereas the second one is used in Printing demo. Title: Enter a title here
Content: Enter a content here
Background: select a background image
Icon: Upload an icon image
Button name: Give a name to the button, for example, Learn more button
Button link: Paste link of the button
Style Two of Noo Save Your Money shortcode and its display on Home Onepage of Printing demo
4. Noo Services
• General options:Categories Services: opt service categories here
Order By: Recent First, Older First, Title Alphabet or Title Reserved Alphabet
Limit: This option places a limit on the number of displayed services
Limit excerpt: A number you enter here will be equal to excerpt length of each service post • Services options:
Show categories/ Title/ Learn more: Opt Hide or Show here
Choose Style: The Style can be Slider Services or Column Services. If you vote for Slider Services, you will have the following options: Show pagination (Opt show or hide here), Auto play (opt Yes or No to decide whether or not service`s sliders will automatically played or not. If you are partial to the second choice then you will have an option named Size Services. The size of column is Large or Small.
Limited post of Slider: This option restricts the number of posts shown on each Slider. The number is 2, 3 or 4.
Display of Noo Services on Home page:
5. Noo Services Grid
This shortcode is used to create Services 2 Page Categories Services: pick service categories in the drop-down list Order By: Recent First, Older First, title alphabet and Title Reserved Alphabet Show Filter: Opt Yes or No to show or Hide the filter Limit: this option limits the number of displayed services.
6. Noo List
Choose Style: The style can be default or Border. If it is default, the Description will be displayed like this:
If it is Border style, when you let the mouse hover over Descriptions, you will find that they are underlined.
List active: Opting Yes will result in automatic display of Border style
Description: Give a piece of information here.
Display of Noo List on Home page:
7. Noo Button
Choose Style: Background or No Background. The first choice let you complete the next two options are Button Name and Button Link. However, If you select the second one, you will have a further option called Choose icon.
8. Noo Blog
Choose Style: There are three styles for you to select: Slider One, Slider Two and Default. Slider One is used in Carle demo whereas Slider Two is used on Home One Page of Printing. Number: opt a number that will be placed next to the title. Notice that as for the number containing more 2 digits you should separate them by space so that the number will not hide the title when it is shown on the site. Title: Enter a title here Description: Give a short description here Data source: The sources are Posts, Tags or category. Include Only: Add title of the posts which will be displayed on the page. Order by: Recent First (the latest published date), Older First (The older published date), Title alphabet, title reversed alphabet. Posts per page: The number of posts is shown per page. Excerpt length: Excerpt is a short extract or a short passage taken from from the post. Length of the excerpt is determined by number of words. Therefore, if you opt a specific number like 15, the number of words contained in an excerpt will be equivalent to 15.
