WordPress Themes | Document Category

Chilli

Customizer

Site Identity

Tag line: reveals a brief description of the site
Site icon is an image viewable in browsers for users to identify your website among many tabs. Please remember that the icon must be square and at least 512px wide and high. See the illustrative image to better understand function of the site icon. After choosing the image , you will click Save and Publish. Then when you come back to your site, you will see an image displayed on the tap of your website. It is clear that by dint of the this icon, you can distinguish your website`s tab from other tabs more easily.

Import/Export settings

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

This section controls changes to Shop page and Single product.

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

Products per page: this option limits the number of products displayed on the page

2. Single Product

Default Heading Background Image: Remove or change the image here

Related Products Count: the number of related products is displayed

Blog

Making some changes in this section will have some impacts on Post list and each post on Blog page

1. Post list

Blog Sidebar: choose a sidebar that will be shown on Blog page

Blog heading: enter a title

Heading Background image: Upload, change or remove Heading background image here

Show post meta, show post image, show read more link: tick these boxes so that post meta, post image and read more link can be displayed in Post list

2. Single post

In this part, you can make some adjustments to Heading Background Image, Show Post Meta, Show Post thumbnail and Show Author`s Bio.

Event

You can make changes to Event list of the Event page in this section
Event Layout: The layout of Event 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 Event page. In contrast, the last ones will let sidebar be shown on the page.

Event Heading: Enter a title here

Heading background image allows you to select or change a background image

Widgets

This section enables you to customize Widgets situated in Footer. Besides, you can also add widgets to Noo Footer Top, Noo Footer Bottom, Noo-Footer #.

Footer

Please refer to this source to learn about Footer in Chilli:

http://nootheme.com/documents/chilli-footer/

Typography

You can customize your Typography settings here. Chilli integrated all Google Fonts. See font preview at Google Fonts

1. Custom Fonts and Custom Font Color

Custom Fonts: Enable Custom Fonts to customize font, font size and other settings for heading and body text.
Custom Font Color: Enable Custom Font Color to customize font color of heading and body.

2. Headings
If ticking Transform to Uppercase box, you will have headings <h1><h2><h3> which are in uppercase

3. Body
You can change font size of body by selecting font size from drop-down list.

Design and Layout

This section helps you to alter Site layout, Icon theme and Color

1. Site Layout

You can set Style & Layout for your site. We provide two layout styles including: Boxed Layout and Fullwidth layout.

Fullwidth layout: if you choose this style, you will have a further second option that is 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

With Boxed layout, besides Theme RTL, you will have additional options for side width, max site width, background color or image setting, background repeat, background image alignment, auto resize:

If you opt blue for background, background of your site will be filled with blue. However, when you set up background image, background of the site will be replaced with a new image.

Background repeat: Background Repeat will work effectively if you use patterned background image as the image above. 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 in Background Image Alignment box.

2. Icon theme

You can show or hide Icon theme which appears under page title of each page.

3. Color

You can set color for links and various elements on your site

Site Enhancement

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 in Footer will disappear. If you turn on it then you will have an extra option, Mailchimp settings, to enter API key.

Learn more about making Mailchimp be shown in Footer

http://nootheme.com/knowledge-base/what-should-i-do-to-make-mailchimp-be-shown-in-footer/

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 with 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

Header

This section contains 4 small parts which are Logo, Navigation Bar, Header Mini cart and Top Bar. After making changes to any parts of Header section in particular and any other parts of Customizer in general, you must remember to click Save and Publish button on top

1. Logo

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

2. Navigation Bar

You can change style, position, font and color of NavBar here

NavBar Style: opt Relative or Absolute style. Absolute allows NavBar to overlay the surface of the part right below it while Relative makes NavBar separate from that part.
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.

Navbar Height, NavBar Link spacing: Adjust height of NavBar and space between NavBar links

header7

3. Header Mini Cart

This part will only give you one option. You can Enable or Disable Header Minicart.

4. Top Bar

Enabling this button, this will offer you some options to add to the header like Welcome Text, Contact information (Hotline and Email Address), Show search box.

Event

Events

Data you created in this part will be shown on Event page. There are few common factors associated with Events, that is to say, Organizers, Venues and Event categories.

1. Create an organizer

Navigate to Events > Organizers > Add New
Enter title > fill out Organizer information containing Phone, Website and Email. On the right side, you can set a featured image
Click Publish

2. Create a venue

Navigate to Events > Venues > Add New
Enter title > Fill out Venue Information like Address, City, Country, State or Province, Postal Code, Phone, Website, Show Google Map, Show Google Maps Link, Use Latitude and Longitude. On the right side, you can set a featured image.
Click Publish

3. Create an event category

Navigate to Events > Event Categories .
Enter name of the event category
Click on Add New Event Category button

4. Create an Event

Navigate to Events > Add New
Enter title and content
Complete The Events Calendar that comprises:

Time and Date
All Day Event: tick this box if you event appears during the whole day. If this box is unchecked, Star time and End time will be opened.

Start date & time, End date and time, Timezone: these sections provide you with drop down lists for you to choose.

Location

Use Saved Venue: opt a venue from the drop down list here

Show Google Map, Show Google Maps Link

Organizers

Use Saved Organizer: pick an organizer from the drop down menu here or add another organizer right below

Event website

Enter website into URL box

Tickets: you can upload image for the ticket header or add new ticket here
On the right side, enter tags, opt event categories, set a featured image
Click Publish button

Footer

Before supplying detailed information related to Footer, we would like to introduce the overall structure of Footer to you.

footer12

The Footer is composed of three parts called Footer Top, Footer Columns or Widget area and Footer Bottom. Thus, now you can guess that you will have to use not only Customizer but also Appearance>Widgets to make adjustments to the Footer.

Let`s get started with Appearance> Widgets:

You can see available widgets on the left side and 5 sidebars belonging to Footer such as Noo Footer Top , Noo Footer Bottom, Noo – Footer Column #1, Noo – Footer Column #2, Noo – Footer Column #3.

1.Noo Footer Top

Drag Noo About widget on the left side to Noo Footer Top > Click the triangle icon on the right of the widget> enter title, link image, upload image, write a short description> Save. Now you find that parts you have just created will be displayed in Footer Top of the site.

2. Noo – Footer Column #1

Drag Noo Mailchimp to Noo – Footer Column #1 > click the triangle icon > Enter title and Subscribe Text > Save.

In order that Mailchimp can be displayed on Footer, please refer to this link:

http://nootheme.com/knowledge-base/what-should-i-do-to-make-mailchimp-be-shown-in-footer/

3. Noo – Footer Column #2

Drag Noo Open Hours to Noo – Footer Column #2 > click the triangle icon > complete boxes as in the image below > Save

4. Noo – Footer Column #3

Drag Noo Information to this sidebar > click the triangle icon > enter title, Address, phone and mail > Save

5. Noo Footer Bottom

Drag Noo Social to this sidebar > click the triangle icon > enter a brief description, links of the social webs > 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 3 columns) and select Show Footer bottom > Save and Publish.

Header

Mega Menu

Chilli 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 visible 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 above 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 pages 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. As you see, Shop pages item will be a Mega menu heading when it is displayed on the site. 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 Cart, My account and Checkout, you only need to modify three options which are Navigation Label, Title Attribute and Icon.

Step 5: Shop label 1, 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 Sidebar1, Menu Sidebar 2 and Menu Sidebar 3.

Learn more about creating sidebars:

http://nootheme.com/documents/chilli-sidebars-widgets/

Next, navigate to Appearance > widgets > drag WooCommerce Products widget to Menu Sidebar 1, Menu Sidebar 2 and Menu Sidebar 3. 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).

Learn more about adding widgets to a sidebar:
http://nootheme.com/documents/chilli-sidebars-widgets/

Similar to Shop pages item, Shop label 1, Shop label 2 and Shop label 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 Sidebar 1, Menu Sidebar 2 and Menu Sidebar 3 to Shop label 1, Shop label 2 and Shop label 3 respectively.

Step 6: Click Save Menu button

Set up Menu

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:

http://nootheme.com/documents/header-2/

An introduction to Header

It is likely that header is the first place users will look at when they visit your site. So keep it simple, clear, meaningful, appealing and personal.
Simple? let`s make structure of your header understandable or avoid creating a complex header. A simple header will help the majority of site visitors be able to grasp information conveyed to them in the blink of an eye. In the most essential respect, a header should contain three parts which are menu area, logo and top bar

Clear? Chilli is a theme used to promote your restaurant business and you ought to know how to build necessary or core elements on the header wisely. By virtue of this idea, your clients can immediately figure out what you would like to introduce to them. Crucial factors, ideally, they may be important or distinctive menu items which present essence of your siteMeaningful? if clients skip through basic elements like logo, menu items and information included in top bar and get purpose of your site then you succeeded in creating a meaningful header.Appealing? it is obvious that colors or artistic design will surely evoke a strong impression or interest of viewers. Settings in Customizer of Chilli will help your header become more attractive.

Personal? Finally, after reading our instructions of Header, you will probably acquire necessary knowledge to create your exclusive header.

So in order to obtain an impressive and remarkable Header, you had better master steps of setting up menu and making changes to Header settings in Customizer.

Import Demo

Import Demo Content

Now it is very easy for you to import Chilli demo content. Please go to Noo settings> Import Demo > Tick all three boxes to import Post, Nav Menu and Comment > Let the mouse hover over the image of Chilli Demo > Click Install demo button to complete importing demo content.

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

Install Theme via FTP

How to install Chilli via FTP

Step 1: Login into your hosting space via an FTP software.
Step 2: Unzip the noo-chilli.zip file and ONLY use the extracted Chilli theme folder.
Step 3: Upload the extracted Chilli Theme folder into wp-content–> themes
Step 4: Activate the newly installed theme by going to Appearance–>Themes and clicking the Activate
Step 5: Then you will see a notification message to activate the required & recommended plugins Noo Post Type, Woocommerce, Visual Composer, Contact Form 7, Revolution Slider, YITH Woocommerce wishlist, The Events Calendar and Breadcrumb NavXT. Follow the steps to install and activate each plugin.

Install Theme via WordPress

How to install Chilli via WordPress

Step 1: Login to your WordPress Admin Panel, navigate to Appearance–>Themes
Step 2: Click Install Themes on the top –> hit Upload
Step 3: Find “noo-chilli.zip” file on your computer and click “Install Now”.
Step 4: Once uploaded, activate the theme. Go to Appearance–>Themes and activate it.
Step 5: Then you will see a notification message to activate the required & recommended plugins: Noo Post Type, Woocommerce, Visual Composer, Contact Form 7, Revolution Slider, YITH Woocommerce wishlist, The Events Calendar and Breadcrumb NavXT. Follow the steps to install and activate each plugin.

Note: If you see this message “Are You Sure You Want To Do This” when installing noo-chilli.zip file via WordPress, it means that size of the uploaded file exceeds limited size. Try to install the theme via FTP instead, or contact your host to increase the limit.

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:

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

Requirement For Chilli

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

WordPress Information

Before installing this theme, please make sure you have a working WordPress version already installed. For further guide to install WordPress, please find in useful links below:

WordPress Codex: General info about WordPress and how to install your server.
Instructional Video: How-To video created by Woo Themes
First Steps With WordPress: Multiple topics about WordPress.
FAQ New To WordPress: Popular FAQs about WordPress.

Preface

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

Plugin installation

After activating Chilli theme successfully, you will receive a message that informs of installing plugins.

1. Woo Commerce: An e-commerce plugin. This is a very popular free plugin you will need if you plan to create online shop.
Learn more about Woo Commerce:
WooCommerce WordPress Plugin Documentation
WooCommerce WordPress Plugin Support
WooCommerce Plugin Knowledge Base
2. Visual Composer: The popular drag and drop page builder plugin with intuitive interface to build your content at ease. Save another $33 for this plugin with Chilli.
Learn more about Visual composer:
Visual Composer WordPress Plugin Documentation
Visual Composer WordPress Plugin Support System
3. Contact Form 7: Chilli is fully compatible with Contact Form 7, the free form plugin recommended to create a nice form for your site.Learn more about Contact Form 7:

Contact Form 7 Plugin Documentation

Contact Form 7 Plugin Support Forum

4. Breadcrumb NavXT: Breadcrumb is a hierarchical series of hyperlinks displayed at the top of a page, indicating the page`s position in the overall structure of the page. It looks something like Home >> Reservation, Home >> About. Therefore, basically, this plugin will help visitors of your site to realize their path to the current content location easily.

Learn more about Breadcrumb NavXT:

Breadcrumb NavXT plugin documentation

Breadcrumb NavXT plugin support

Note: After activating this plugin, you should go to Settings> Breadcrumb NavXT > General > paste this code <span class=”separator”>·</span> into Breadcrumb Separator> Save changes. Then your breadcrumb will be shown like this:

5. Revolution Slider: Create a responsive or full-width slider with must-see effects.
Learn more about Revolution Slider:

Revolution Slider Plugin documentation

6. Noo Chilli Library: This is one of the distinctive plugins made by Noo Theme. It allows you to create post types and taxonomies.

7. YITH WooCommerce Wishlist: In case clients love some of your products but they cannot afford it. Then when having enough money, they will come back and search for these ones. This may make them waste time. Yet, now WooCoommerce Wishlist will avail. It will give visitors the chance to place their best-loved products in a wishlist page and then they can find these onesquickly.

Learn more about YITH WooCommerce Wishlist:

YITH WooCommerce Wishlist WordPress plugin documentation

8. The Events Calendar: This plugin helps you to create and manage events easily.

Learn more about The Events Calendar:

The Events Calendar Plugin Knowledgebase

The Events Calendar Support Forum

Please do the following steps to install and activate all plugins above:Click Begin installing plugins → Install Required Plugins item appears→ you choose Install in the left box → tick Plugin to install all plugins→ click Apply to complete installing.
Click Return to Required Plugins Installer→ Install Required Plugins item appears again → click Activate in the left box→ click Plugin then click Apply to complete activating.

After activating these plugins, you can find that the Admin panel now has some new sections:

Pages

Event Page

In essence, Event item in the header menu of our demo site was set as a Event category. This explains why you do not see this page in Pages > All Pages.

Note: Please make sure that you activated The Events Calendar and built data in Events section prior to implementing steps stated below.Seek more related information via these links:

http://nootheme.com/documents/plugin-installation-5/

http://nootheme.com/documents/chilli-events/

To achieve an Event item in header menu, please follow these steps:Step 1: Navigate to Events > Settings > Display > opt Default Events Template in Events template > Save changes

Step 2: Go to Appearance> menu > click the triangle of Event Categories on the left side.

Step 3: Tick Event box and click Add to Menu then Event item will appear in Menu area on the right side

Step 4: Drag this item to a position you desire, for example, in our demo, it is situated in a place like this:

Step 5: Save Menu
Learn more about setting up Header Menu:
http://nootheme.com/documents/set-up-menu-2/

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, please follow these steps:

Go to Shop page
Let the mouse hover over image of the product you like, then a heart icon will appear on the right lower corner of the image. Click on the icon and it will direct you to Wishlist page.

Contact Page

Red Row 1

It has one column
Text Block settings:

See Red Row 1 in action:

Red Row 2

It has one column
Google Maps element

See Red Row 2 in action:

Red Row 3

It has one column
Noo title: Title, Title size (Large or Medium), Sub Title, Description, Use White Style (use white style font on darker background)

Noo Custom Form 7:

See Red Row 3 in action:

Blog pages

1. Blog page

“Why does this page not have any shortcodes but it will still contain content when the page is exhibited on the site?”

You may be intrigued by this question. The reason is that you decided on Blog in above-mentioned Posts Page section. In this case, it takes all the latest blog posts originating from Posts in Admin Panel.

2. Blog Masonry page

This page is formed by two elements called Row and Post Masonry Grid

Post Masonry Grid Settings: it is an impressive element right? There are so many sections in this setting. From left to right, we have:
♦ General:

Data source: There are various sources picked here. They are Post, Page, Attachment, Product, Product_variation,etc

Narrow data source: You can type kinds of source here. Kinds of source can be categories, tags or custom taxonomies.

Total items: This option places a limit on the number of items in grid. You enter -1 to display all; however, it will be limited to 1000 items.

Display Style: Show all, Load More button or Lazy loading. The first one allows all posts to be displayed on the page. The second, next posts will be shown after you click Load More button. The last one, as soon as you scroll the mouse down to a position, posts will be loaded and displayed immediately.

Items per page: number of items shown per page

Show filter: If you click Yes then function of filtering according to categories.

Grid elements per row: select number of grid elements per row

Gap: select gap between grid elements

♦ Data settings:

Order by: Date, Post ID, Author, title, Last modified date, post/ page parent ID, number of comments, menu order, page order, meta value, meta value number, Ransom order. If Meta value number is chosen then meta key is required.

Sort order: Descending or Ascending

Offset: number of grid elements displaced or passed over

Exclude: If you enter title of any posts here then they will not be shown on the page

♦ Load More Button:

Button Style: The style can be Rounded, Square, Round, Outlined, 3D, Square Outlined.

Button color: opt a color of button here

Button size: Mini, Small, Normal or Large

♦ Item Design:Grid element template: If you notice Blog page on our demo site, you will see different types of Blog page. We have Blog Masonry Blur Out, Blog Masonry Go Top, Blog Masonry Overlay Rotation, Blog Masonry Scale Rotation, Blog Masonry Side Content, Blog Masonry Slide From Left, Blog Masonry Slide Out From Right.

This Grid option helps you create these types of Blog page.

Gallery Page

Gallery page is constituted by two elements that are Row and Noo Galllery Grid

Noo gallery Grid Settings comprises:Choose Gallery Categories: opt gallery categories you want by clicking the left button of the mouse and highlighting those categories

Order By: Recent First, Older First, Title Alphabet, Title Reserved Alphabet

Limit Gallery Item: This option limits the number of galllery items in one category

Hide Filter: if it is not checked then function of filtering based on All galllery categories or each gallery category will be visible on top of the page.

Choose Hover Style: The style can be Show Full Information, Show Only Title and Description, Show Only Icon

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.

Row Settings:

See Gallery Page in action:

Menu Pages

1. Menu Page

Building a menu page is like shooting fish in a barrel. If you have to use many elements to create preceding pages then this page will only require two elements. It is not a painstaking work right?. Very simple!

Two above-stated elements are now identified: Row that forms one column and Noo Menu Section with Slider

Noo Menu Section with Slider Settings has General and Navigation & Design options.

General contains:

Choose Menu sections: there is a dropdown list here and you opt sections you want by clicking the left button of the mouse and highlighting those sections.

Limit menu item: this option restricts the number of menu items in one category

Show slider menu: tick this box to show menu slider

Limit Thumnail Slider: this option limits the number of menu item slider in one category

Navigation & Design options:Auto Play: opt Yes so that slider will play automatically. Yet this box will only appear on the condition that you check Show Slider menu in General.

Background Color: opt a color for background here

Row settings:

2. Menu Grid Page

Menu Grid page is constituted by two elements, namely Row and Noo Menu Grid

Noo Menu Grid Settings comprises General and Icon optionsGeneral

Choose menu sections: opt menu sections you want by clicking on the left button of the mouse and highlighting those sections

Limit menu item: this option places a limit on the number of menu item in one category

Order by: Recent First, Older First, Title alphabet, Title Reserved alphabet

Hide Filter: if you do not check this box, you will have a function of filtering based on menu category or menu section criteria.

Choose item style: Medium or Small.

Icon options

Show Icon: check this box then it will expand to another option that is Choose image.

Row settings:

3. Menu Grid Small

This page uses the same shortcodes as those of Menu page. You only have to make a minor change to Choose Item Syle in Noo Menu Grid Settings. Now the Style is Small.

4. Menu Section Page

This one is composed of 2 elements, Row and Noo Menu Sections
Noo menu sections settings contains recognized parts like Choose menu sections, Limit menu item, Background color.

Row settings

Open Table Reservation Page

Red Row 2 and 3 of Open Table Reservation Page are the same as those of Reservation page. The shortcode used in Red Row 1 of Open table reservation page is Noo Open Table Reservations. This element will create a reservation form which is different from that of Reservation page. On Reservation page, all reservation information of customers will be in an email sent to a person whose email address you entered in Contact > Contact Forms > Form Reservation > Mail. However, when visitors click Find a table on Open table reservation page, it will lead them to a website called Open table on which they will fill out a reservation form.

Choose Form Style: select Gray or White which is color of title, description and background input.OpenTable Restaurant ID: enter ID of your restaurant here

Title: Enter a title here

Country: this option has a drop-down list of countries which are U.S, Germany, United Kingdom, Japan and Mexico. Opt a nation then it will give you a corresponding top level domain of Opentable website. For instance, if you choose United Kingdom, you will have a domain which is co.uk

See Red Row 1 in action:

Reservation Page

Red Row 1

It has one column
Noo Custom form 7

Row settings

See Red Row 1 in action

Red Row 2
It has two columns corresponding to 2 Noo Reservation elements
The first Noo Reservation element: Title (Reservation By Phone), Description and Info (add contact information here)

The second Noo Reservation element: Title ( Private Events), Description and Info (add contact information here)

The first one

The second one

Row Settings:

See Red Row 2 in action

Red Row 3
It has one column which contains Noo Title and 4 columns corresponding to 4 Noo Services element whose titles are Gluten Free, Achieve Fitness, No More Cooking and Healthy Lifestyle.
Noo Title

Row settings

See Red Row 3 in action

About page

The illustrative image below reveals that you can upload or change a heading background image here and enter custom page title (if this one is left blank, page title will be used) in the region right below shortcodes.

1. Red Row 1

The first column is Noo Image.
It has two columns with style 1/2+1/2
The second column is Noo Title

Row Settings:

2. Red Row 2

It has one column which comprises Noo Title and 4 small columns corresponding to 4 Noo Services elements. 4 Noo Services elements have 4 different titles which are Wedding Special, Birthday Party, Office Party and Party Hostess

: Noo Title

Row Settings:
General > tick Using Container box > Save changesDesign options > change properties of padding > opt grey in background color > Save changes

See Red Row 2 in action:

3. Red Row 3

It has one column
Noo title

Row Settings:

4. Red Row 4

It has one column
Noo Team Settings contains

Categories: opt All or every single category

Order by: Recent First, Older First, Title Alphabet, Title Reserved Alphabet

Limit Team Member: A specific number in this section you select will be the number of displayed members.

Layout Style: Default or info overlay. Default style arranges Media data that you created in Team Member into the place right below name and position of each team member. Meanwhile, Info Overlay will make Media data appear on image of each team member when you let the mouse hover over the image.

Row settings:

See Red Row 3 and Red Row 4 in action

5. Red Row 5

It has one column
Noo title:

Noo Testimonial contains:

Choose Style: Square images or Circle images

Border Color images: select color for border of the image

Categories: All or every single category you added in Testimonial categories.

Order by: as usual, we have 4 kinds that are Recent First, Older First, Title Alphabet, Title Reserved Alphabet.

Auto play: Yes or No

Limited Testimonial: the maximum number of shown testimonials.

Row Settings:

See Red Row 5 in action:

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 of Chilli 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.
In general, layout of parts displayed on Home One page is quite similar to that of parts shown on Home page. As a result, it is understandable that shortcode settings will not change much. Therefore, to avoid rehearsing instructions in Home page above, we will only point out some discrepancies in building Home One page:

Red Row 1

represents About Restaurant section shown on Home One Page:

Revolution Slider: opt One Page Slider (to create One page Slider, please go to Revolution Slider and add a new slider with title One Page Slider) > Save changes.

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, Menu, Reservation, 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 home_one_page then URL will be #home_one_page.

Red Row 2

This one will form About Restaurant part of Home one page

Row Settings:

Red Row 3

reflects Menu Today part of Home One page

Red Row 4

corresponds to Make Online Reservation part of Home One Page

Red Row 5

builds Our Services part

Red Row 6

will be Gallery part

Red Row 7 and Red Row 8

will turn into News & Events part of Home One page

Red Row 7

Red Row 8

IMPORTANT:To create Onepage Menu, please do the following steps:

Step 1: Navigate to Appearance> Menus> click Create a new menu > give a name to the menu. In this case, you should call it Onepage Menu.

Step 2: Remember that all menu items of Home One Page are Custom Links. Thus, in the column on the left side, click Custom Links. Then you will see two boxes that are URL and Link Text.

URL must be what you entered in Row ID part of Row settings. More exactly, it must be URL that will be immediately generated after you type Row ID, with location of this URL being next to “+” icon mentioned above. Therefore, if you rename Row ID, you will have to make corresponding change to URL.

Link Text is name of the menu item.

Next, Click Add to Menu and the menu item will appear in Menu Structure area.

Step 3: In Menu settings, check One Page Menu box and click Save Menu.

Home page

1. Red Row 1

It has one column: use Row element to create this one then you will have some kinds of column layout like 1/1 (one column), 1/2+1/2 (2 columns whose widths are equal) , 2/3+1/3 (two columns and the ratio of the first column`s width to the second column`s is 2/3 to 1/3), 1/3+1/3+1/3 (3 columns whose widths are equal), etc.

Revolution Slider: opt Home Slider (to create Home Slider, please go to Revolution Slider and add a new slider with title Home Slider) > Save changes.

: Display of Red Row 1 on Homepage

2. Red Row 2

It has 2 columns with 1/2+1/2 layout style
The first column is Noo Title which contains Title (About Restaurant), Title size (Large or Medium), Sub Title, Description and Use White Style (use white font style for dark background)

The second column is Noo Images that includes Choose Logo, Choose Style (Slider Images or Simple Image) and Choose Images (the maximum number of images is 8)

Click the pencil icon on the right top of the red row 2 then you will see Row Settings that has two parts: General and Design options

♦ 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

Note: If you are not familiar with these CSS definitions, please consult the following source and see the image below:

http://www.templatemonster.com/help/css-understanding-border-margin-and-padding-properties.html

http://www.w3schools.com/css/css_padding.asp

http://www.w3schools.com/css/css_margin.asp

http://www.w3schools.com/css/css_border.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Sum up some important points in these sources:

The CSS padding properties define the space between the element border and the element content.

The CSS border properties allow you to specify the style, size, and color of an element’s border.

The CSS margin properties define the space around elements.

We set up design options as the image above for our demo site. Now we try altering some options in this section. See the image below:

Before changing

After changing

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.

3. Red Row 3

It has one column
Noo Our Menu

General: Enter menu title (Menu Today), Choose Menu Sections (Breakfast, Dinner, Lunch), Choose Menu Columns (Three), Limit menu item (This option limits the number of menu items shown in each menu section)

Navigation & Design options: Bottom Name (ALL MENU), Button Link, Background Color, Show images bottom (images will be displayed at the bottom of Menu today section on the home page), Choose images, Size of images.

Display of Red Row 3 on Home page

4. Red Row 4

It has one column
Noo Title: Title (Make Online Reservation), Title size (Large or Medium), Sub title, Description, Use white style.

Noo Custom Form 7:

This name seemed to make you recollect Contact Form 7 plugin and Contact section in the Admin panel. That`s right!

Prior to introducing this shortcode to you, we suggest you should firstly create contact forms in Contact section. Our demo provides you with 2 types of contact form. They are Form contact us and Form Reservation. The second one will be used in Make Online Reservation.

Here are these two samples of Contact Form:

Form Contact Us

Form Reservation

Continue to learn about Noo Custom Form 7 element:Choose Form Style: the style can be White or Gray. It implies title color, description color and background input color.

Title: Name of the form

Select contact form: decide on form reservation for this case

Open time reveals the time at which making online reservation is accessible.

Row settings:

General > opt Simple Parallax > upload an image > Save changes.

Design Options > set 60px for top distance of padding, 56px for bottom distance of padding > Save changes.

Display of Red Row 4 on Home page

5. Red Row 5

It has one column
The column contains Noo Title and a child column (style 1/4+1/4+1/4+1/4) which includes 4 Noo Services elements.

Noo Title: Title (Our Services), Title size, Sub Title, Description, Use white style.

Noo Services:Choose Icon Style: there are two choices, you can opt Select image or FontAwesome. If it is the first option then you have a corresponding next one that is Choose Image. Meanwhile, when the second option is preferred, Choose Image will be replaced with Choose icon.
As we mentioned above, we will have four Noo Services elements in Red Row 5 and their titles are Wedding Special, Birthday party, Office party and Party hostess respectively.

Row settings:

Display of Red Row 5 on Home page

6. Red Row 6

It has one column
Noo Gallery

General:

Title: Enter a title here

Choose Gallery Categories: select Gallery Categories you want by clicking on the left button of the mouse and highlighting those categories.

Order By: Recent First (the latest published date), Older First (The older published date), Title alphabet, title reversed alphabet

Limit gallery item: This option limits the number of galllery items in one category

Choose Hover Style: when you let the mouse hover over images of gallery items, you will see Full Information, Only Tile & Description or Only Icon

Navigation & Design Options comprises boxes like Use White Style, Auto Play, Button name (View More), Button Link.

Row Settings:

As you can see the image below, Red Row 6 uses Simple Parallax background type and has some changes to padding.

Display of Red Row 6 on Home page

7. Red Row 7

It has one column
Noo Title: Title (News & Events), Title size (Large or Medium), Subtitle, Description, Use White Style

Row settings:

8. Red Row 8

It has one column
Noo News: contains General and Navigation options

General:

Choose Style: the style can be Masonry Style or Blog Style. Perhaps Blog Style is quite a common one. If you choose Blog Style, posts will be arranged in this way:

On the other hand, Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout.

Data source: data is picked from category, tags or posts.

Categories: there is a dropdown list here and you opt categories you want by clicking the left button of the mouse and highlighting those categories.

Order by: Recent First, Older First, Title alphabet, title reserved alphabet.

Limited item: The maximum number of posts will be displayed

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 20, the number of words contained in an excerpt will be equivalent to 20.

Navigation options:

Button Name (View more news), Button Link (when you click on View More button, it will lead you to the link you entered in this section)

Display of Red Row 7 and Red Row 8 on Home page

Page Setting

We have created some specific Chilli page settings which will help you to build splendid pages for your site. Following the list of options below to see how they work:

Hide Page Title: If you checked, page title won’t be displayed on header of your page.
Heading Background Image: This option allows you to select a unique heading image for your page.

Page Templates

We have built some specific Chilli 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

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. See below Page Template list for more detail.
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 your page.

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 :).

Post Types

Usually, the theme only has a type of post called Blog post. However, hardly have you activated Noo Chilli Library plugin when you have 4 further kinds of post. So now the number of post types is 5, namely Blog post, posts in Team member, Testimonial, Food Menus and Gallery.

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 5 categories for Blog posts. They are About, Beverage Trend, Chef Insight, Dessert Trends and Food Trends.

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 only produce a category named Chef.
Next, Add New Team Members. Please notice that data you create in this section will be shown in About page > Our staffStep 1: Enter title and Team Member information like name and position. Then you can select an image for the team member.

Step 2: Scroll the mouse down, you will see an area to add social webs of the team member.

Step 3: Turn to the right side, now you will opt category for the post

Step 4: Do not forget to click Publish button to complete creating new team member.

3. Testimonial

Testimonials will be shown on About page > TestimonialAs usual, the first step is creating Testimonial categories. In our demo, we created a testimonial category that is Masterchef.

Add a New Testimonial

Step 1: Enter title and content of the testimonial

Step 2: Go to Testimonial options area that is right below the content area > upload image, enter name and position

Step 3: On the right side of the page, select Testimonial categories

Step 4: Click Publish button

4. Food Menus

Posts in this section will be shown on Menu pageMenu items: you can see all created kinds of food here.

Menu sections: Fundamentally, name of this part is as same as the so-called menu categories. Thus, its function is similar to testimonial categories or something like that. However, when you produce a new menu section, you can upload an image that illustrates for this menu section. In our sample, there are 4 menu sections which are breakfast, dinner, lunch and midnight.

Add a new menu itemPlease go to Add one item and follow these steps:

Step 1: Enter title and content of the item

Step 2: In Menu item options area, create price and attibutes for the item

Step 3: Turn to the right side, opt Menu sections and upload the featured image

Step 4: Click Publish button

Unlike Posts, Team Member and Testimonial that only allow you to build a new post, now in Food Menus, you are absolutely able to create many menu items or posts at the same time. Please go to Add many items to obtain this wonderful feature.The image on the right side shows you parts that you will have to complete to create many items concurrently:

First, you will see some fields like Name or title of the item, Price, Attributes, Image or Featured Image and Description or content of the title. They are similar to parts accomplished in Add one item. Next, after fulfilling these fields, please choose a menu section in the box right below the phrase Choose Menu Section. Finally, click Save Menu button that is corresponding to Publish button.

Then you will continue to add new items by clicking on Add Menu item.

5. Gallery

Posts you create here will be displayed on Gallery page.In a way that often happens, we will invent Gallery categories:

In the Admin panel, go to Gallery > Gallery categories > Add a new gallery category

To Add a new gallery item:

Navigate to Gallery > Add New
Enter title, content > turn to the right side, opt a gallery category > set a featured image if you want.
Click the Publish button.

Sidebar & Widget

Sidebars & Widgets

Chilli allows you to create an unlimited number of sidebar. Each page or post can come with unique sidebar. To select a sidebar for post or page, make sure you set page template with sidebar then you can choose a sidebar you want to display from Sidebar dropdown list on the right side. You may need to create several separate sidebars to use for different pages and posts. Follow these steps to generate a sidebar and add widgets to it.

Create a sidebar

Step 1: Navigate to Appearance–> Sidebar Generator and click the Add New button, enter sidebar title then save. You can add as many sidebars as you need.
Step 2: Once you are done, you need to add Widgets to the sidebar you just created.
Step 3: Navigate to Appearance–> Widgets and find your sidebar on the right side.
Step 4: On the left hand side you will see all the widgets you can use, simply drag and drop the widget you want into your sidebar on the right hand site.
Step 5: Make sure you click Save to save the widgets added to your sidebar

Add Widgets to a sidebar

You can add any widget and any number of widgets to your sidebar. All widgets are accessible from Appearance–>Widgets and easily dragged and dropped to your sidebar.
Step 1: Navigate to Appearance–> Widgets to access the list of widgets and widget section that they can be added. The left hand side shows all the widgets you can use. The right hand side shows all different sections you can add widgets to.
Step 2: Simply drag and drop the widget you want into the widgets section you want the right hand side.
Step 3: Don’t forget to click save changes after you customize any widget in sidebar.

The image above illustrates 2 sidebars which are Main Sidebar and Shop Sidebar.

Drag Search, Categories, Noo Events and Recent Tweets 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.

Display of this sidebar on Blog page

Likewise, you also drag widgets like Woocommerce Product categories, Woocommerce price filter, Woocommerce products to Shop sidebar. Then please go to Customizer> Woocommerce> Shop page> tick With Left or Right Sidebar, opt Shop Sidebar >Save and Publish.

Display of shop sidebar on Shop page

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, Chilli has 16 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 Chilli 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.

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.

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 Custom Form 7

This element allows display of contact form active on the page. Prior to introducing this shortcode to you, we suggest you should firstly create contact forms in Contact section. Our demo provides you with 2 types of contact form. They are Form contact us and Form Reservation.

♣ Noo Custom Form 7 Settings:

Choose Form Style: the style can be White or Gray. It implies title color, description color and background input color.

Title: Name of the form

Select contact form: decide on forms you have created in Admin panel > Contact.

Open time: For example, Form Reservation, open time reveals the time at which making online reservation is accessible.

Sample of its display on the site:

2. Noo images

This shortcode allows you to add images to the pageNoo images Settings

Choose Logo: the logo will be in the center of the area created by images

Choose Style: Slider Images or Simple Image

Choose Images: the maximum number of images is 8

Sample of its display on the site:

3. Noo Title

This element allows you to add title, subtitle and description

Noo Title Settings: Title, Title size (Large or Medium), Sub title, Description, Use White Style (use white style on darker background)

Sample of its display on the site:

4. Noo Our Menu

This element can be used in building Menu page

♣ Noo Our Menu Setting:

General: Menu title, choose menu sections, choose menu columns (one, two or three), limit menu item (this option limits the number of menu item in one category).

Navigation & Design options

Button Name: Give a name to the button here

Button Link: Paste a link of the button here

Background color: Select a background color

Show images bottom: tick this box to show images at the bottom. Then you will have two following options:

Choose image

Size (px): Enter size of the image you have just chosen

Sample of its display on the site:

5. Noo News

♣ Noo News Settings:

General:

Choose Style: the style can be Masonry Style or Blog Style. Perhaps Blog Style is quite a common one. If you choose Blog Style, posts will be arranged in this way:
Meanwhile, Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout.

Data source: data is picked from category, tags or posts.

Categories: there is a dropdown list here and you opt categories you want by clicking the left button of the mouse and highlighting those categories.

Order by: Recent First, Older First, Title alphabet, title reserved alphabet.

Limited item: The maximum number of posts will be displayed

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 20, the number of words contained in an excerpt will be equivalent to 20.

Navigation options:

Button Name (for example, View more news), Button Link (when you click on View More button, it will lead you to the link you entered in this section)

Sample of its display on the site:

6. Noo Testimonial

This element contributes to display of testimonials

Noo Testimonial Settings:

Choose Style: Square images or Circle images

Border Color images: opt color for border of the image

Categories: All or every single category you added in Testimonial categories.

Order by: as usual, we have 4 kinds that are Recent First, Older First, Title Alphabet, Title Reserved Alphabet.

Auto play: Yes or No

Limited Testimonial: the maximum number of shown testimonials.

Sample of its display on the site:

7. Noo Services

Noo Services settings:

Choose Icon Style: there are two choices, you can opt Select image or FontAwesome. If it is the first option then you have a corresponding next one that is Choose Image. Meanwhile, when the second option is preferred, Choose Image will be replaced with Choose icon.

Title: Enter a title here

Background color: Select a background color here

Sample of its display on the site:

8. Noo Team

Noo Team Settings contains

Categories: opt All or every single category

Order by: Recent First, Older First, Title Alphabet, Title Reserved Alphabet

Limit Team Member: A specific number in this section you select will be the number of displayed members.

Layout Style: Default or info overlay. Default style arranges Media data that you created in Team Member into the place right below name and position of each team member. Meanwhile, Info Overlay will make Media data appear on image of each team member when you let the mouse hover over the image.

Sample of its display on the site:

9. Noo Reservation

This element is used in building Reservation page

Noo Reservation Settings:

Title: Add a title here

Description: Enter a brief description

Info: You can give contact information here (add email, phone number,etc)

Sample of its display on the site:

10. Noo Menu Sections

This element is used in building Menu section page

Noo Menu Sections Settings:

Choose menu sections: opt menu sections by clicking the left button of the mouse and highlighting them

Limit menu item: This option limits the number of menu items in one category.

Background color: opt a color for background

11. Noo Menu Sections With Slider

This one is used in creating Menu page

♣ Noo Menu Sections With Slider Setting:

General:

Choose Menu sections: opt menu sections you want by clicking on the left button of the mouse and highlighting those sections

Limit menu item: this option restricts the number of menu items in one category

Show slider menu: tick this box to show menu slider

Limit Thumbnail Slider: this option limits the number of menu item slider in one category

Navigation & Design options:

Auto Play: opt Yes so that slider will play automatically. Yet this box will only appear on the condition that you check Show Slider menu in General.

Background Color: opt a color for background here

Sample of its display on the site

12. Noo Menu Grid

This element is used in creating Menu Grid page and Menu Grid Small page

♣ Noo Menu Grid Settings

General:

Choose menu sections: opt menu sections you want by clicking on the left button of the mouse and highlighting those sections

Limit menu item: this option places a limit on the number of menu item in one category

Order by: Recent First, Older First, Title alphabet, Title Reserved alphabet

Hide Filter: if you do not check this box, you will have a function of filtering based on menu category or menu section criteria.

Choose item style: Medium or Small.

Icon options:

Show Icon: check this box then it will expand to another option that is Choose image.

Sample of its display on the site:

13. Noo Galllery

Noo Gallery is used in building Gallery section displayed on Home page and Home One page

♣ Noo Gallery Settings:

General:

Title: Enter a title here

Choose Gallery Categories: select Gallery Categories you want by clicking on the left button of the mouse and highlighting those categories.

Order By: Recent First (the latest published date), Older First (The older published date), Title alphabet, title reversed alphabet

Limit gallery item: This option limits the number of gallery items in one category

Choose Hover Style: when you let the mouse hover over images of gallery items, you will see Full Information, Only Tile & Description or Only Icon

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

Navigation & Design options:

Use White Style: use white style font on darker background

Auto play: opt Yes or No

Button Name: for example, View more

Button link: when you click on View More button, it will lead you to the link you entered in this section

Sample of its display on the site:

14. Noo Gallery Grid

This shortcode is used in building Gallery page

Noo Gallery Grid Settings:

Choose Gallery Categories: select Gallery Categories you want by clicking on the left button of the mouse and highlighting those categories.

Order By: Recent First (the latest published date), Older First (The older published date), Title alphabet, title reversed alphabet

Limit gallery item: This option limits the number of gallery items in one category

Hide Filter: if it is not checked then function of filtering based on All galllery categories or each gallery category will be visible on top of the page.

Choose Hover Style: The style can be Show Full Information, Show Only Title and Description, Show Only Icon

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 20, the number of words contained in an excerpt will be equivalent to 20.

Sample of its display on the site:

15. Noo OpenTable Reservations

This element is used to build OpenTable Reservation page

Noo Open Table Reservation Settings:

Choose Form Style: select Gray or White which is color of title, description and background input.

OpenTable Restaurant ID: enter ID of your restaurant here

Title: Enter a title here

Sample of its display on the site

16. Noo Events

Categories Events: Choose Event categories in the drop-down list
Columns: The number of columns is displayed. The number fluctuates between 1 and 4
Order By: This option decides the display order of Events. The order can be Recent First, Older First, Title Alphabet or Title Reversed Alphabet
Show Date/ Excerpt: Choose Yes to show Date/Excerpt
Excerpt Length: the number you enter here is equal to the number of words included in the Excerpt
Limited: This option places a limit on the number of shown events.

WooCommerce pages

After Woocommerce plugin is installed, it creates the following new pages:

Cart
Checkout
My account
Shop page

Learn more about Woocommerce pages:

http://docs.woothemes.com/document/woocommerce-pages/

Yet if it is unfortunate that those pages are not automatically created, you can do the following steps to build them:

1. Cart page

Navigate to Pages > Add New.
Enter Title (Cart), paste this shortcode [woocommerce_cart] into content area of the page
Opt Default Template in Page Attributes on the right side
Click on Publish button

2. Checkout page

Navigate to Pages > Add New.
Enter Title (Checkout), paste this shortcode [woocommerce_checkout] into content area of the page.
Opt Default Template in Page Attributes on the right side.
Click on Publish button

3. My account

Navigate to Pages > Add New.
Enter Title (Checkout), paste this shortcode [woocommerce_my_account] into content area of the page.
Opt Default Template in Page Attributes on the right side.
Click on Publish button

4. Shop page

Navigate to Pages > Add New
Enter title, Shop
Opt Default Template in Page Attributes on the right side.
Click on Publish button

CitiLights

Firstly we would love to send our great thanks to you for purchasing Citilights – Real Estate Wordpress Theme. Citilights is a premium responsive WordPress theme dedicatedly crafted for Property listing portal, as well as Agent and Agency’s website. Understanding what online real estate business demands, we included in this theme viable functions such as Front-end submission, Membership Subscription, Google map integration, Advanced search, Property Featuring, dsIDXpress IDX Plugin support and more. To turn to the design, we make sure that it brings out premium look and feel to boost your credibility. Various proprerty listing layouts are available and all are fully responsive. Whether you are building a Property Sales & Rentals website, or you are an agent/agency looking to expand your online presence, Citilights is the right fit for you. Ready to own the best looking real estate website around? Let’s scroll down.

Sidebars & Widgets

Citilights 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 then you can choose a sidebar you want to display from Sidebar dropdown list on the right side. 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

Add Widgets To A Sidebar

The image above illustrates 4 sidebars which are Property Sidebar, IDX Sidebar, Main Sidebar and Shop Sidebar.

1. Property Sidebar

This Sidebar is shown on Properties page

Drag Advanced Search Property and Recent Properties widget on the left side to this sidebar> click the triangle icon on the right of the widget to complete options> Click Save
Advanced Search Property: There is an option in this widget. It is Tittle (enter a title here, for instance, Find Property)
Recent Properties:
Title: Enter a title
Number: The number of properties shown in this sidebar
Show: Choose All or Featured Properties that will be shown
You can also select items in the drop-down list of the next options such as Type, Status, Label, Location and Sub-location.

2. IDX Sidebar

This sidebar is displayed on IDX Single Listing Shortcode and IDX Multiple Listing Shortcode.

Drag IDX Areas, IDX Single Listing and IDX Listings widgets on the left to this sidebar > click the triangle icon on the right of the widget to complete options> Click Save
IDX Areas widget contains the following options:
Widget title: Enter a title
Area Types: Select a type in the drop-down list
Area: Enter an area per line
IDX Single Listing
Enter a MLS Number
IDX Listings includes options:
Widget title: Enter a title here
# of listing to show (max 50): The number of shown properties
Sort order: this option handles order of Properties` display

3. Main Sidebar

This sidebar is shown on Blog page
Drag Recent Posts, Search, Recent Comments, Tag Cloud, Categories, Recent Comments, Text and Calendar widgets to this sidebar > Click the triangle icon to complete options> Click Save

[Citilights] Demo

Step 1: Go to admin panel/ Appearance/Theme/Add new/ Upload Theme/ Find “noo-citilight.zip” file on your computer and click “Install Now”. Once uploaded, activate the theme. Go to Appearance–> Themes and activate it. Then you will see a notification message to activate the required & recommended plugins: Woocommerce, Visual Composer. Follow the steps to install and activate each plugin.

Step 2: Go to admin panel/Tools/Import/WordPress/Choose File . Find “dummy_data.xml” file on your computer and click “Upload file and import”.

Step 3: Go to admin panel/Settings/Reading and select A static page (select below)

Step 4 Go to admin panel/ Appearance/Menu/Manage Locations/ select Main menu

You can see link below
https://www.youtube.com/watch?v=MVDM8qKyt38&feature=youtu.be

Citilights - Properties

Adding new property

To add a New Property, go to Properties>Add New Property

Enter Property title.
Add description about the property in the content section.
Select Type of the property.
Select Status of the Property. Note: Properties marked as Soldwill not be shown in property listing page, but will be visible in Agent’s page.
Select Location of the property.
Select Sub-location of the property.
Add images of the property by clicking Add Images in the Gallery These images will be added to the Slider header in the property’s page on front end. You can select multiple images at once. We recommend that the images have minimum width of 750px.
Select the Agent Responsible of the property. The drop down list consists of all available Agents.
Payment Status (only available if Pay per Submission is enabled): If Not Paid, the property will not be displayed on frontend. If Paid, it will be displayed normally.
Set property’s thumbnail image in Featured Image section (This is mandatory). The image should have minimum width of 750px.
Fill in Property Details. This section is default, meaning you can’t add or remove fields.

Note: In the Price field, don’t type “,” or “.” for thousand separator, they will be counted as decimal separator instead. Thousand separator will be added automatically when displaying on frontend.

For more configurations, please check the General settings section below.

Fill in Property Custom fields, if any. This section is customizable, meaning you can add or remove fields. To manage custom fields, go to Properties>Settings>Custom fields. For more detailed instructions, please check the Custom fields section below.
Fill in Property Features, if any. This section is customizable, meaning you can add or remove fields. To manage property features, go to Properties>Settings>Listing features & Amenities. For more detailed instructions, please check the Listing features & Amenities section below.
Locate the property on the Map by enter its Latitude and A quick way to do this is to enter the property’s address to the search bar and the map will move to its neighborhood. Click on the map to place pin. For more configurations, please check the Map settings section below.
Provide the Property Video by entering the video URL.

After everything is set, click Publish or Update the post.

General setting

To set up Area Unit, Currency, Separator, go to in Properties>Settings>General.

Area Unit: enter the unit that follows the area number.
Currency: choose a currency.
Currency Position: choose how the currency symbol is associated with the price number.
Thousand Separator: Enter the mark that separates groups of thousands.
Decimal Separator: Enter the mark that separates the integer part from the fractional part of the price number.
Number of Decimals: the number of digits that follows decimal separator.

After everything is set, click Save Changes.

Custom fields

Custom fields provide additional information about the property. They will appear in the Property detail section in Property Page on frontend, along with the default fields. You are free to add or remove any custom field.

To manage custom fields, go to Properties>Settings>Custom fields.

Add: add custom field.
Delete: delete custom field.
Field name: This will be used in the code. It can not contain space.
Field label: This is the title of the field on frontend.
Field Type: Choose between Short Text, Long Text and Date.

You can order fields using drag and drop. After everything is set, click Save Changes.

Listing features & Amenities

To manage listing features & amenities, go to Properties>Settings> Listing features & Amenities.

Add: add amenity.
Delete: delete amenity.
Feature name: enter amenity title.
Show the Features and Amenities that are not available: Choose whether unchecked Amenities are displayed on frontend or are hidden.

You can order fields using drag and drop. After everything is set, click Save Changes.

Advanced Search

This is where you can customize the search filters and Advanced Search fields.

There are 8 possible filters. You can change parameter from the dropdown. To disable a filter, select None.

The Advanced Search Field allows searching by Amenities. Select Amenities from the dropdown.

Map settings

For map configuration, go to Properties>Settings> Google Map.

Starting Point Latitude & Starting Point Longitude: enter Google map default landing address.
Default Zoom level:the resolution of the current view. 0 is the lowest value.

After everything is set, click Save Changes.

For Siderbar and Map Header settings, please go to Customizer>Agents & Properties.

Citilights - Agents & Membership

Adding new agent

To add a New Agent, go to Agents & Memberships>Add Agent

Enter Agent name.
Add description about the agent in the content section.
Set agent’s profile image in Featured Image The image should be 370x500px at a minimum. If no image is selected, default profile image will be used.
Fill in Agent Details.
Select a Membership Package for the agent from the dropdown list. (Only available if Membership Package is activated in Agents & Memberships>Settings, if you choose other Membership Type, please skip this step).
Login Information: This function allows managing login information of agent. In case that a user has registered as agent, it provides a fast way to change his password. In case that you do not enable frontend registration, it allows you to add a new agent and give him a login account at once.

After everything is set, click Publish or Update the page.

Adding new membership package

To add a New Membership Package, go to Agents & Memberships>Membership Packages

Select Add New on top left.
Enter Package Title.
Fill in Package Interval: the duration of the package.
Fill in Package Price: type “.” for decimal separator.
Fill in Number of Listing: Number of listing available for the package.
Fill in Number of Featured Properties: Number of properties that can make featured with the package.
Fill in Additional Information: this section is to provide extra information on the package that will be shown on the pricing table built by Membership Packages (Pricing Table) shortcode. If you don’t intend to use said shortcode for pricing table, you can leave this section blank.

After everything is set, click Save Changes.

Agent and Membership Settings

From version 2.1.0, When you click on this part, it will take you to Properties> Settings
Now Agent& Membership is a tab of Property settings

Citilights - Setup Pages

Create a new page

Please follow these steps to create your pages:

In Admin Panel, choose Page, click “Add New” on the top then enter your page title. If you need to know more about Pages in WordPress, use the Help tab in the upper right of your screen.
In Page Attributes box on the right side, choose your Parent It is set by default as no parent. Pages are usually ordered alphabetically, but you can choose your own order by entering a number (1 for first, etc.) in Order field.
Also in Page Attributes box, choose your Page Template in dropdown list. For a regular page, select Default Template.
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 your page, you will need our provided Check out Shortcodes chapter for how to use them.
Make other settings for the page in meta-boxes under the editing field. Once you get your settings done, you can Publish your page.

Pricing page

To create Pricing table using regular Visual Composer’s shortcode:

First go to Pages>Add new.
Give the page a
Use Shortcodes to create Pricing table. Switch to Visual Composer’s Backend Editor, click Add Element.
Select Pricing Table among the Shortcodes.
Select the Number of columns from 1 to 6.
Choose a Style:

Classic

Ascending

Insert columns by clicking on the + button and select Pricing Table Column.
Fill in content of every column. When you are done, click Save Changes.

After everything is set, click Publish or Update the page.

To create Pricing table using CitiLights’s Pricing table shortcode which retrieves information from membership packages to display as content (if Memberships is enabled only):

First go to Pages>Add new.
Give the page a title
Use Shortcodes to create Pricing table. Switch to Visual Composer’s Backend Editor, click Add Element.
Select Membership Packages (Pricing Table) among the Shortcodes.
Fill in the fields. Then click Save Changes.
When you are done, Publish the page.
Navigate to Agents & Memberships>Settings. In Membership listing page, select the page you have just created. Then click Save Changes.

Property listing page

To create Property Listing Page, navigate to Appearance>Menus>Links. In the URL field, enter http:// …site-name/properties. Click Add to Menu.

The Property Listing Page will be automatically generated, showcasing all properties and order them by date.

After everything is set, click Save Menu.

For layout configurations, please go to Customizer>Agents & Properties.

Agent listing page

To create Agent Page, first go to Pages>Add new.

Give the page a title
Edit the Permalink of the page. Make sure that it’s the same as The Agent Archive base (slug) that you entered in Agents & Memberships>Settings.
That’s all. Publish the page.
Now you have a page to showcase all agents. The next thing to do is add it to the Menu if you like to.

For layout configurations, please go to Customizer>Agents & Properties.

Register and Login page

To create Register and Login page, go to Pages>Add new.

Give the page a
Use Shortcodes to insert Login/Register form. Switch to Visual Composer’s Backend Editor, click Add Element.
Select Mode: you can build Register page and Login page separately or include both form in one page.
Type Login text and Register text. They will show up above username and password field.

After everything is set, click Publish or Update.

Submission page

To create frontend Submission page, go to Pages>Add new.

Give the page a
In the Page Attributes panel, select Template: Agent Dashboard.

After everything is set, click Publish or Update.

Agent Dashboard page

To create Agent’s Dashboard page, go to Pages>Add new.

Give the page a title
In the Page Attributes panel, select Template: Agent Dashboard.

After everything is set, click Publish or Update.

Agent Profile page

To create Agent Profile page, go to Pages>Add new.

Give the page a title
In the Page Attributes panel, select Template: Agent Dashboard Profile.

After everything is set, click Publish or Update.

Contact page

To create Contact Page, first go to Pages>Add new.

Give the page a
To embed Google Map into the page, use Shortcodes. In Visual content box, choose NOO Shortcodes>Media>Google Map. Fill in the form, then click
To embed Contact Form, choose NOO Shortcodes>WordPress content>Contact Form 7. Enter form title, select a form, then Save.

After everything is set, click Publish or Update.

Search Result Page

In order to have searched properties displayed in a result page, you must create Search result page first, otherwise searching will lead to No result.

To create Search Result page, first go to Pages>Add new.

Give the page a title
In the Page Attributes panel, select Template: Search Property Result.

After everything is set, click Publish or Update.

Page settings

You can choose various settings for your page in this box.

Show Page Title: if not checked, Page Title will be hidden.

Body Custom CSS Class: Add custom CSS class to <body> element.

Revolution Slider: Select Slider to be displayed on your site or just set No Slider if you don’t need a slider for your page.

Home Slider: enable this option if you want to set up a header for the page. Page header can be slider or video background.

Translation

The theme is compatible with WPML plugin, thus can be translated into multiple languages. Follow this link for guide.
You can also use POEdit plugin for translation.

Located the .po file in folder /languages.
Open the file with POEdit and translate the texts into your preferred language.
When complete, you’ll want to save the file twice, as two separate files – a .po file and a .mo file. When you save the files, you must name them according to your language code. Find a list of language codes at WordPress in your Language. As an example, the language code for English is en_EN, so you would save the translated files as en_EN.po first, then en_EN.mo.
When that’s done, simply upload the files to your theme folder.

Codestyling Localization is a good alternative for POEdit. It also works with .po/.mo files and is very easy to use.

Agents & Memberships

Citilights - Agents & Membership

Adding new agent

To add a New Agent, go to Agents & Memberships>Add Agent

Enter Agent name.
Add description about the agent in the content section.
Set agent’s profile image in Featured Image The image should be 370x500px at a minimum. If no image is selected, default profile image will be used.
Fill in Agent Details.
Select a Membership Package for the agent from the dropdown list. (Only available if Membership Package is activated in Agents & Memberships>Settings, if you choose other Membership Type, please skip this step).
Login Information: This function allows managing login information of agent. In case that a user has registered as agent, it provides a fast way to change his password. In case that you do not enable frontend registration, it allows you to add a new agent and give him a login account at once.

After everything is set, click Publish or Update the page.

Adding new membership package

To add a New Membership Package, go to Agents & Memberships>Membership Packages

Select Add New on top left.
Enter Package Title.
Fill in Package Interval: the duration of the package.
Fill in Package Price: type “.” for decimal separator.
Fill in Number of Listing: Number of listing available for the package.
Fill in Number of Featured Properties: Number of properties that can make featured with the package.
Fill in Additional Information: this section is to provide extra information on the package that will be shown on the pricing table built by Membership Packages (Pricing Table) shortcode. If you don’t intend to use said shortcode for pricing table, you can leave this section blank.

After everything is set, click Save Changes.

Agent and Membership Settings

From version 2.1.0, When you click on this part, it will take you to Properties> Settings
Now Agent& Membership is a tab of Property settings

Demo

[Citilights] Demo

Step 2: Go to admin panel/Tools/Import/WordPress/Choose File . Find “dummy_data.xml” file on your computer and click “Upload file and import”.

Step 3: Go to admin panel/Settings/Reading and select A static page (select below)

Step 4 Go to admin panel/ Appearance/Menu/Manage Locations/ select Main menu

You can see link below
https://www.youtube.com/watch?v=MVDM8qKyt38&feature=youtu.be

Footer

The Footer is composed of two parts called Footer Columns or Widget area and Footer Bottom or Bottom bar. Thus, now you can guess that you will have to use not only Customizer but also Appearance>Widgets to make adjustments to the Footer.

Let`s get started with Appearance> Widgets:You can see available widgets on the left side and 4 sidebars belonging to Footer such as Noo – Footer Column #1, Noo – Footer Column #2, Noo – Footer Column #3, Noo – Footer Column #4.

1. Noo Footer Column#1

Drag Text widget on the right side to Noo Footer Column#1 > click the triangle icon on the right of the widget > Enter title and content > Save

2. Noo Footer Column#2

Drag Recent Properties to Noo-Footer Column# 2 > click the triangle icon of the widget> Enter title, Number: the number of featured properties is displayed, Show: select All properties or Featured ones, select Type, Status, Label, Location or Sub-location > Save

3. Noo Footer Column#3

Drag Custom Menu to Noo Footer Column#3 > Click the triangle icon on the right of the widget> Enter title> Select Footer Menu that is created in Appearance> Menus

4. Noo Footer Column #4

Drag Text to Noo Footer Column#4 > Enter title, content> Save

Note: You can change icon of contact sections by replacing , for example, <i class=”fa fa-map-marker”> with the code of the expected icon taken from Font Awesome

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), Upload Footer Logo, Add content to Bottom Bar > Save and Publish.

Header

Set Up Menu

To show menu items located in header area of the site, you have to carry out these steps:

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:

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 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:

To create a remarkable Header, you should master basic instructions of setting up Menu and Header settings in Customizer

Add or change header social

In Citilights theme, we provided some social options which will help you input URLs of your social media profile. We supported Facebook, Twitter, Google+, Pinterest, LinkedIn, RSS Feed, You-tube and Instagram social.

To add social media on your header, please following these steps:

Case 1: Add socials which have on Citilights theme.
- Navigate Customizerà Headerà Open Top Bar tab then you need to turn On Show Social Icons option. After that, you can choose position which social will be displayed by tick left/right on Social Position option.
- Then, go to Customizer–> Open Social Media tabs–> Input your URL that corresponding social icon will be displayed.

Case 2: Add socials which don’t have on Citilights theme
- To add socials which don’t have on Citilights theme, you need to add on Citilights code.
- You can open file {root}/wp-content/theme/noo-citilights/framework/functions/noo-html.php then see the functionYou can add more socials icon in this code. Example: we add Vimeo social –> Here is code which you need to add:

Adding Logo

Citilights theme requires that you upload your logo as an image file. The logo can be any size and can fill up the full content area. Citilights is also retina ready, so there are additional options to upload retina 2x logo and specific instruction that need to be followed to display correct on retina ready devices.

To insert your logo, please following these steps

Step 1: Navigate to Customizer–> Header–>Logo tab to access the logo options.
Step 2: You will see button turn On/Off Use Image for Logo. If turn On, you will have two logo to upload, one is Your logo – a standard logo on desktop, one is Retina Logo – a retina ready devices.
Step 3: if you are uploading retina logo (it’s not required) it needs to be exactly twice the size of the regular logo. For example, if the standard logo is 200×100, the retina logo should be 400×200. Click Upload button and select your retina logo.
Step 4: If you are using a retina logo, you must enter the logo height for standard logo.

Installation

Update Theme

Automatic Update

Please follow these steps to update theme:

Step 1: Hover into username then choose Download
Step 2: Select “License certificate and purchase code”
Step 3: In Admin Panel, choose Settings, click “NOO Citilights License”. You will see the message Please enter your license key to enable updates to NOO Citilights.
Step 4: Enter code into License key

Note: Auto update is available from version 1.9.0 and above

Basic Settings

If you’re new to WordPress, you’ll probably see that your site after importing data is completely different from our demo. It’s because some basic settings is needed on WordPress site. If you know what the problem is and how to fix it, please skip this section.

Step 1: Setup homepage

Please go to Reading setting: Settings -> Reading then choose a Static page for Front page displays. After that, select one of the three home page as your Front page.

You can see more detail at: http://codex.wordpress.org/Creating_a_Static_Front_Page

Step 2: Assign menu

Please go to Appearance -> Menus then find Menu Settings -> Theme locations at the bottom. Check the Primary Menu then save it. This action will assign the menu “Main Menu” to the location Primary (the main menu) on our theme.

You can see more detail at: http://codex.wordpress.org/Appearance_Menus_Screen

Step 3: Change Permalink

Please go to Permalinks setting: Settings -> Permalinks then change the Common settings to Post name

You can see more detail at: http://codex.wordpress.org/Using_Permalinks

After doing these steps, your site will look like our demo, you can move on to process to build your content.

Import All Demo Data

How To Import Citilights Demo Data

Step 1: From Admin Panel, after installing and activate our theme, navigate to Tools, choose Import–> WordPress
Step 2: Click Choose File and browse the demo content .xml file extracted from the .zip file you can download from Themeforest following guide in DOWNLOAD THEME PACKAGE section above. Click Upload file and import to upload the file.

Note: If you have not installed Deme Importer Plugin, you may see the notification message to install the plugin. Click Install Now to install and move on.

Step 3: You will first be asked to map the authors in the file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.
Step 4: WordPress will then import each of the posts, comments, and categories contained in this file into your blog.

See guide to import a sample content into a WordPress blog in WordPress Codex.

Note: Not all the content in our demo will be included. Those files might be excluded from the content your can import:

Images: our stocks might not be in the content due to license issues. Instead, we replace with grey images. Please change to your own pretty images for your site.
Sliders, Post and Pages: not all sliders, posts and page in our demo will be consisted in our dummy date when you import. However, we still add some sliders and pages for your reference.

Plugin Installation

Here is the plugin will come together with our theme when you activated it. You are recommended to install and activate these plugins base on your own need:

Slider Revolution: A popular slider plugin. Its intuitive interface and diversified options and effects will be a good choice for your sliders. You saved $18 for this plugin with CitiLights.
Visual Composer: The popular drag and drop page builder plugin with intuitive interface to build your content at ease. Save another $28 for this plugin with CitiLights.
Contact Form 7: A free form plugin recommended to create a nice form for your site.

Install Theme via FTP

How to install Citilights via FTP

Step 1: Login into your hosting space via an FTP software.
Step 2: Unzip the noo-citilights.zip file and ONLY use the extracted Citilights theme folder.
Step 3: Upload the extracted Citilights theme folder into wp-content–>themes
Step 4: Activate the newly installed theme by going to Appearance–> Themes and clicking the Activate
Step 5: Then you will see the notification message to activate the required and recommended plugins. Follow these steps to install and activate plugin.

Install Theme via WordPress

How to install Citilights via WordPress

Step 1: Navigate to Appearance–>Themes
Step 2: Click Install Theme and click the Upload button
Step 3: Navigate to file “noo-citilight.zip” file on your computer and click “Install Now”
Step 4: Once uploaded, activate the theme. Go to Appearance–>Themes to activate it.
Step 5: Then you will see the notification message to activate the required and recommended plugins. Follow these steps to install and activate plugin

install theme

NOTE: If you see this message “Are You Sure You Want To Do This” when installing “noo_citilights.zip” file via WordPress. If means that you have an upload max file size limit. Try to install the theme via FTP instead, or contact your host to increase the limit.

Requirement for Citilights

</>To use Citilights theme, you must be running WordPress 3.6 or higher, PHP 5.6 or higher, and mysql 5 or higher. We have tested it with Mac, Windows and Linux. Below is a list of items you must ensure your host can comply with.

Check to ensure that your web host has the minimum requirements to run WordPress.
Always make sure they are running the latest version of WordPress.
You can download the latest release of WordPress version from WordPress website.
Always create secure passwords FTP and Database.

Download Theme Package

When purchasing successfully 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 contains:

Citilights Theme File: Includes noo-citilights.zip file that consists of everything you need to install the theme.
Document Folder: Includes Citilights Documentation file that helps you get to know about Citilights and guides you to build your site with our theme.
Licensing Folder: Includes the licensing files of Themeforest purchase.
Demo Content Folder: Includes the .xml file you will need to import our demo data.

WordPress Information

To install this theme you must have a working version of WordPress already installed. If you need to help installing WordPress, follow the instruction in WordPress Codex or you can watch the Instruction Video created by Woo Theme. Below are all the useful link for WordPress information.

WordPress Codex: General information about WordPress and how to install your server.
Instruction Video: Awe some How-To video created by Woo Theme.
First Steps With WordPress: General info about multiple topics about WordPress.
FAQ New To WordPress: The most popular FAQ’s regarding WordPress

CitiLights Intruction

Firstly we would love to send our great thanks to you for purchasing Citilights – Real Estate WordPress Theme.
Citilights is a premium responsive WordPress theme dedicatedly crafted for Property listing portal, as well as Agent and Agency’s website. Understanding what online real estate business demands, we included in this theme viable functions such as Front-end submission, Membership Subscription, Google map integration, Advanced search, Property Featuring, dsIDXpress IDX Plugin support and more. To turn to the design, we make sure that it brings out premium look and feel to boost your credibility. Various property listing layouts are available and all are fully responsive.
Whether you are building a Property Sales & Rentals website, or you are an agent/agency looking to expand your online presence, Citilights is the right fit for you.
Ready to own the best looking real estate website around? Let’s scroll down.

Pages

Map Property Page

On this page, half of the content is Map and the rest part contains search bar and search results.

To create Compare Listings Page, enter title and choose Half-Map Property Template.

Compare Listings Page

This page is used to show the compared information of property price, location, status, features, etc along properties

To compare properties, please click + icon/ compared properties will be shown on top of the list. Click on Compare button to see the detailed comparison. Notice that Compare Listings Page will only work properly if you click on Compare button to see the page.

To create Compare Listings Page, you can enter a title, choose Compare Listings Template and click on Publish button

My Favorites Page

This page is used to show your favorite properties. To save a favorite property, you will click on heart icon (Add to favorites). To your favorite list, you can continue to click on that icon.

Creating My Favorites Page is very easy. You only need to enter title, choose Property Favorites Template and click Publish button

Search Property Result

Creating Search Property Result is quite easy. Enter a title> Choose Search Property Results Template> Publish

Pricing Table Page

Two shortcodes used in building Pricing Table Page are Row and Membership packages (Pricing Table)
Membership packages settings:
Featured Items: the number of Featured packages
Buttons Text: Enter text of the button

Login/Register Page

There are two shortcodes used to create this page. They are Row and Login/Register shortcode
Mode: There are 3 kinds for you to select in the drop-down list. It can be Only login, Only register or both Login and Register
Login/Register Text: These options are used as description for the login/register form

Submit Page

1. Submit Property Page

Enter title> on the right side, choose Agent Dashboard Submit in the drop-down list of Template > Publish

2. My Profile

Enter title> on the right side, choose Agent Dashboard Profile in the drop-down list of Template> Publish.

3. My Properties

Enter title> on the right side, choose Agent Dashboard in the drop-down list of Template> Publish.

Home Map

1. Home Map Vertical

Shortcodes used to build Home Map Vertical are quite similar to those of Home Page. The difference is that Property Slider and Property Slide shortcodes are now replaced with Property Map & Search one.

Property Map & Search shortcode:
Title: Enter a title here
Source: Choose the data source which will be displayed
Map Height: You can set height of map here
Search Layout: The Search Form can be Vertical or Horizontal
Disable Map: Tick this box so that map will not be shown under the search form
Disable Search: Tick this box so that the Search Form will be hidden
Show Advanced (Amenities) Search: Tick this box to show Advanced Search

2. Home Map Horizontal

Likewise, Home Map Horizontal page also uses the same shortcodes as Home Map Vertical. Yet, Search Layout option in Property Map & Search shortcode now is Horizontal instead Vertical.

Contact pages

1. Contact Page

Shortcodes used to create Contact page

Display of Contact page on the site

• It contains a Row shortcode whose style is one column
• The column comprises a Row shortcode whose style is two columns
• The first column contains a Text Block and Google Maps shortcode

• The second one includes no shortcodes
• Then add a Row shortcode whose style is 2 columns (1/3+2/3)
• The first column contains 2 Text Block shortcodes

• The second one comprises a Text Block, a Gap and Contact Form 7 shortcode

2. Contact 1 Page

Here is image of shortcodes used to create Contact 1 page

Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column contains 2 Text Block shortcodes

Red Row 2

♣ It has a Row shortcode whose style is 2 columns
♣ The first column contains a Google Maps shortcode
♣ The second one includes a Text Block shortcode and a Contact Form 7 shortcode.

IDX Listing Shortcode Pages

1. IDX Single Listing Shortcode

Creating IDX Single Listing Shortcode is very easy: go to Pages> Add New> Enter title> paste this code [idx-listing mlsnumber=”20649469″ showall=”true”] into content of the page > on the right side, opt Page With Right Side Bar in Template section, select IDX Sidebar in Page Sidebar section> Publish

2. IDX Multiple Listing Shortcode

Here is the image of shortcodes used to create this page

Red Row 1

• It has a Row shortcode whose style is one column
• The column contains a Property Map&Search

Red Row 2

• It has a Row shortcode whose style is one column
• The column comprises a Row shortcode whose style is 2 columns (2/3+1/3)
• The first column contains a Text Block shortcode
• The second one includes Widgetised Sidebar

On the right side, choose Full-width Template > click Publish to complete

Blog pages

1. Blog page

2. Default Blog Left/Right Sidebar

Both Default Blog Left Side Bar and Default Blog Right Sidebar page use Post List shortcode. The distinct feature of these two pages belongs to Template setting. While template of the first page is Page with Left Sidebar, that of the second one is Page With Right Sidebar.

• It has a Row shortcode whose style is one column
• The column contains a Post List shortcode

Properties Pages

1. Properties List With Side Bar

Here is the image of shortcodes used to create this page

• It contains a Row shortcode whose style is one column
• The column comprises a Recent Properties shortcode with List Style
Notice: on the right side, choose Page With Right Sidebar in Template section

2. Properties List No Sidebar

Here is the image of shortcodes used to create this page

Red row 1

• It has a Row shortcode whose style is one column
• The column contains a Property Map& Search

Red Row 2

• It has a Row shortcode whose style is one column
• The column contains a Row shortcode of which style is one column
• The second column comprises a Recent Properties shortcode with List style
Note: on the right hand, choose Full-width in Template section

3. Properties Grid With Sidebar

Here is the image of shortcodes used to create this page

• It has a Row shortcode whose style is one column
• The column contains a Recent Properties shortcode
Note: on the right side, select Page With Left Sidebar in Template section

4. Properties Grid No Sidebar

Here is the image of shortcodes used to create this page

Red Row 1

• It has a Row shortcode whose style is one column
• The column contains a Property Map&Search shortcode

Red Row 2

• It has a Row shortcode whose style is one column
• The column comprises a Row shortcode of which style is one column
• The second column contains a Recent Properties shortcode with Grid style
Note: On the right side, Opt Full-width in Template section

Home Page

Here is the image of shortcodes used to create Home page

1. Red Row 1

• It has a Row shortcode whose style is one column
• The column contains a Property Slider:
Animation: Slide or Fade
Slide Time/ Speed/ Height: set a number
Auto Play Slider: tick this box so that slider can be automatically played
Show Slide Indicator, Show Previous/ Next Navigation: Tick these boxes to show Slide Indicator, Previous/ Next Navigation.
Show Property Search: tick this box to show search below Slider
Show Advanced (Amenities) Search: check this box tho show Advanced Search
Search Info Title: Give a title
Search Info content: give a content
• Add four Property Slide shortcodes to this shortcode

2. Red Row 2

• It has a Row shortcode whose style is one column
• The column contains a Row shortcode whose style is one column
• This second column comprises Recent Properties shortcode
Title: Enter a title here, for example, recent properties
Style: Grid, List, Slider or Featured Style

Grid

List

Slider

Featured Style

If you select Grid style and List Style then you will have the following options:
Show Layout Control: Choose Hide or Show grid/ list switching button
Show Pagination: Choose Show or Hide
Show: Choose All or Featured Property
Property Type: Select a Property type that will be show or leave blank to show all property types
Property Status: Select a Property Status that will be displayed or leave blank to show all property statuses
Similarly, you have some options like Property Label, Property Location and Property Sub-location
Number of properties to show: The number of properties is displayed per page
Sort properties by: Properties will be arranged in conformity with Featured, Date, Price, Name, Area or Random
Sort Direction: Decrement or Increment
Visibility: Opt All devices or a device on which Properties will be shown

If you select Slider and Featured style, you will have options:
Auto Play Slider: Tick this box so that Slider will automatically play
Slide Time, Slide Speed: Set Time and Speed of the Slide
Show: Choose All or Featured Property
Property Type: Select a Property type that will be show or leave blank to show all property types
Property Status: Select a Property Status that will be displayed or leave blank to show all property statuses
Similarly, you have some options like Property Label, Property Location and Property Sub-location
Number of properties to show: The number of properties is displayed per page
Sort properties by: Properties will be arranged in conformity with Featured, Date, Price, Name, Area or Random
Sort Direction: Decrement or Increment
Visibility: Opt All devices or a device on which Properties will be shown

3. Red Row 3

Shortcodes in Red Row 3 are the same those in Red Row 2. Yet, Title of Recent Properties shortcode now is Featured Properties

4. Red Row 4

• It has a Row shortcode whose style is one column
• The column contains a Row shortcode whose style is three columns (1/3+1/3+1/3). Each column comprises these shortcodes: Icon, Gap and Text Block

Display of Red Row 4 on Home page:

5. Red Row 5

• It has a Row shortcode whose style is one column
• The column contains a Row shortcode of which style is one column
• This second column comprises a Recent Agents shortcode
Title: Give a title here
Number: The number of Agents is shown

6. Red Row 6

• It has a Row shortcode whose style is one column
• The column contains a Row shortcode of which style is 2 columns (1/2+1/2)
• The first column is Text Block shortcode
• The second one is Button 1

7. Red Row 7

• It has a Row shortcode whose style is one column
• The column comprises a Row shortcode of which style is one column
• The second column has the following shortcodes:
Text block, Gap and Responsive Slider
• Add 4 Slide shortcodes to Responsive Slider

8. Red Row 8

• It has a Row shortcode whose style is one column
• The column contains a Row shortcode whose style is 6 columns (1/6+1/6+1/6+1/6+1/6+1/6)
• Each column comprises a Single Image shortcode

Create new page

You may need a page such as About or Contact page. We also did some change to the default WordPress page setup by adding some page templates and preset options for you to build your page fluidly.

Please follow these steps to create your pages:

Step 1: In Admin Panel, choose Page, click “Add New” on the top then enter your page 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 (1 for first, etc.) in Order field.

Step 3: Also in Page Attributes box, choose your Page Template in dropdown list. See below Page Template list for more detail. For a regular page, select Default Template. You can choose to edit your content using Visual or Text editor. To build content for your page, you will need our provided Shortcodes. Check out in below section.

Step 4: Start editing your page content in the editing field.

Step 5: Make other settings for the page in meta-boxes under the editing field. Once you get your settings done, click Publish your page.

Citilights - Setup Pages

Create a new page

Please follow these steps to create your pages:

In Admin Panel, choose Page, click “Add New” on the top then enter your page title. If you need to know more about Pages in WordPress, use the Help tab in the upper right of your screen.
In Page Attributes box on the right side, choose your Parent It is set by default as no parent. Pages are usually ordered alphabetically, but you can choose your own order by entering a number (1 for first, etc.) in Order field.
Also in Page Attributes box, choose your Page Template in dropdown list. For a regular page, select Default Template.
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 your page, you will need our provided Check out Shortcodes chapter for how to use them.
Make other settings for the page in meta-boxes under the editing field. Once you get your settings done, you can Publish your page.

Pricing page

To create Pricing table using regular Visual Composer’s shortcode:

First go to Pages>Add new.
Give the page a
Use Shortcodes to create Pricing table. Switch to Visual Composer’s Backend Editor, click Add Element.
Select Pricing Table among the Shortcodes.
Select the Number of columns from 1 to 6.
Choose a Style:

Classic

Ascending

Insert columns by clicking on the + button and select Pricing Table Column.
Fill in content of every column. When you are done, click Save Changes.

After everything is set, click Publish or Update the page.

To create Pricing table using CitiLights’s Pricing table shortcode which retrieves information from membership packages to display as content (if Memberships is enabled only):

First go to Pages>Add new.
Give the page a title
Use Shortcodes to create Pricing table. Switch to Visual Composer’s Backend Editor, click Add Element.
Select Membership Packages (Pricing Table) among the Shortcodes.
Fill in the fields. Then click Save Changes.
When you are done, Publish the page.
Navigate to Agents & Memberships>Settings. In Membership listing page, select the page you have just created. Then click Save Changes.

Property listing page

To create Property Listing Page, navigate to Appearance>Menus>Links. In the URL field, enter http:// …site-name/properties. Click Add to Menu.

The Property Listing Page will be automatically generated, showcasing all properties and order them by date.

After everything is set, click Save Menu.

For layout configurations, please go to Customizer>Agents & Properties.

Agent listing page

To create Agent Page, first go to Pages>Add new.

Give the page a title
Edit the Permalink of the page. Make sure that it’s the same as The Agent Archive base (slug) that you entered in Agents & Memberships>Settings.
That’s all. Publish the page.
Now you have a page to showcase all agents. The next thing to do is add it to the Menu if you like to.

For layout configurations, please go to Customizer>Agents & Properties.

Register and Login page

To create Register and Login page, go to Pages>Add new.

Give the page a
Use Shortcodes to insert Login/Register form. Switch to Visual Composer’s Backend Editor, click Add Element.
Select Mode: you can build Register page and Login page separately or include both form in one page.
Type Login text and Register text. They will show up above username and password field.

After everything is set, click Publish or Update.

Submission page

To create frontend Submission page, go to Pages>Add new.

Give the page a
In the Page Attributes panel, select Template: Agent Dashboard.

After everything is set, click Publish or Update.

Agent Dashboard page

To create Agent’s Dashboard page, go to Pages>Add new.

Give the page a title
In the Page Attributes panel, select Template: Agent Dashboard.

After everything is set, click Publish or Update.

Agent Profile page

To create Agent Profile page, go to Pages>Add new.

Give the page a title
In the Page Attributes panel, select Template: Agent Dashboard Profile.

After everything is set, click Publish or Update.

Contact page

To create Contact Page, first go to Pages>Add new.

Give the page a
To embed Google Map into the page, use Shortcodes. In Visual content box, choose NOO Shortcodes>Media>Google Map. Fill in the form, then click
To embed Contact Form, choose NOO Shortcodes>WordPress content>Contact Form 7. Enter form title, select a form, then Save.

After everything is set, click Publish or Update.

Search Result Page

In order to have searched properties displayed in a result page, you must create Search result page first, otherwise searching will lead to No result.

To create Search Result page, first go to Pages>Add new.

Give the page a title
In the Page Attributes panel, select Template: Search Property Result.

After everything is set, click Publish or Update.

Page settings

You can choose various settings for your page in this box.

Show Page Title: if not checked, Page Title will be hidden.

Body Custom CSS Class: Add custom CSS class to <body> element.

Revolution Slider: Select Slider to be displayed on your site or just set No Slider if you don’t need a slider for your page.

Home Slider: enable this option if you want to set up a header for the page. Page header can be slider or video background.

Properties

Before learning how to create a New Property, we will discover how to create a Property Type/ Property Label/ Property Location/ Property Sub-location/ Property Status.

Create A Property Type
Go to Properties> Property Type> Give name to the Property Type> You can upload an image used as a Map marker> Click Add New Property Type.

Create A Property Label
Go to Properties> Property label > Give name to Property Label > Select a color to the label> Click Add New Property Label

Create a Property Location
Go to Properties> Enter a location> Click Add New Property Location

Create a Property Sub-location
Go to Properties> Property-Sublocation> Enter a sub-location > Choose a location in the drop-down list > Click Add New Sub-location.

Create A Property Status

Go to Properties> Property Status> Enter a Status> Click Add New Property Status

Custom Fields

Go to Properties> Custom Fields> Click Add New> Enter FIeld Name and Field Label > Save changes

Features & Amenities

Go to Properties> Features & Properties > Click Add New> Enter Feature name
Show The Features& Amenities that are not available:

Add A New Property
Step 1: Go to Properties> Add New Property > Enter Title
Step 2:
♣ Complete Property Details that contain:
Property label: Select a label in the drop-down list
Address: Enter address of the property
Price/ Area/ : Enter price, area of the property.♦Note: you should not type “,” or “.” for thousand separator. Thousand separator will be added automatically when the price is shown on the site. Besides, this rule also helps the price filter work properly.Bedrooms/ bathrooms: Enter number of Property`s bedrooms and bathrooms
♣ Complete Property Custom (this section comprises fields you created)
♣ Choose Property Features by ticking boxes
♣ Place In Map: This section is quite important. You should remember to set a place at which the property is located. As a result, as you search the property, it will be displayed on the map. Enter an address into Search box of the Map then the longitude and latitude corresponding to that address will be automatically shown.
♣ Property Video: Enter a Video URL
♣ Gallery: Add images of the property
Step 3: On the right side, you can choose Property Type, Property Location, Property Sub-location, Property Status. You can also assign this property to an agent and set a featured image for the new property. Moreover, you can also upload a file. Notice that the download file button will be shown like this:

Step 4: Click Publish button

Citilights - Properties

Adding new property

To add a New Property, go to Properties>Add New Property

Enter Property title.
Add description about the property in the content section.
Select Type of the property.
Select Status of the Property. Note: Properties marked as Soldwill not be shown in property listing page, but will be visible in Agent’s page.
Select Location of the property.
Select Sub-location of the property.
Add images of the property by clicking Add Images in the Gallery These images will be added to the Slider header in the property’s page on front end. You can select multiple images at once. We recommend that the images have minimum width of 750px.
Select the Agent Responsible of the property. The drop down list consists of all available Agents.
Payment Status (only available if Pay per Submission is enabled): If Not Paid, the property will not be displayed on frontend. If Paid, it will be displayed normally.
Set property’s thumbnail image in Featured Image section (This is mandatory). The image should have minimum width of 750px.
Fill in Property Details. This section is default, meaning you can’t add or remove fields.

For more configurations, please check the General settings section below.

Fill in Property Custom fields, if any. This section is customizable, meaning you can add or remove fields. To manage custom fields, go to Properties>Settings>Custom fields. For more detailed instructions, please check the Custom fields section below.
Fill in Property Features, if any. This section is customizable, meaning you can add or remove fields. To manage property features, go to Properties>Settings>Listing features & Amenities. For more detailed instructions, please check the Listing features & Amenities section below.
Locate the property on the Map by enter its Latitude and A quick way to do this is to enter the property’s address to the search bar and the map will move to its neighborhood. Click on the map to place pin. For more configurations, please check the Map settings section below.
Provide the Property Video by entering the video URL.

After everything is set, click Publish or Update the post.

General setting

To set up Area Unit, Currency, Separator, go to in Properties>Settings>General.

Area Unit: enter the unit that follows the area number.
Currency: choose a currency.
Currency Position: choose how the currency symbol is associated with the price number.
Thousand Separator: Enter the mark that separates groups of thousands.
Decimal Separator: Enter the mark that separates the integer part from the fractional part of the price number.
Number of Decimals: the number of digits that follows decimal separator.

After everything is set, click Save Changes.

Custom fields

To manage custom fields, go to Properties>Settings>Custom fields.

Add: add custom field.
Delete: delete custom field.
Field name: This will be used in the code. It can not contain space.
Field label: This is the title of the field on frontend.
Field Type: Choose between Short Text, Long Text and Date.

You can order fields using drag and drop. After everything is set, click Save Changes.

Listing features & Amenities

To manage listing features & amenities, go to Properties>Settings> Listing features & Amenities.

Add: add amenity.
Delete: delete amenity.
Feature name: enter amenity title.
Show the Features and Amenities that are not available: Choose whether unchecked Amenities are displayed on frontend or are hidden.

You can order fields using drag and drop. After everything is set, click Save Changes.

Advanced Search

This is where you can customize the search filters and Advanced Search fields.

There are 8 possible filters. You can change parameter from the dropdown. To disable a filter, select None.

The Advanced Search Field allows searching by Amenities. Select Amenities from the dropdown.

Map settings

For map configuration, go to Properties>Settings> Google Map.

Starting Point Latitude & Starting Point Longitude: enter Google map default landing address.
Default Zoom level:the resolution of the current view. 0 is the lowest value.

After everything is set, click Save Changes.

For Siderbar and Map Header settings, please go to Customizer>Agents & Properties.

Properties settings

Property settings

There are 6 tabs in Property settings. They are:

1. Property

This section contains the following options:
Property Archive base: Enter slug for Properties page
Area Unit: Enter a unit here, for example, m2
Currency: Choose a currency for the price of properties
Thousand Separator: Enter the mark that separates groups of thousands.
Decimal Separator: Enter the mark that separates the integer part from the fractional part of the price number.
Number of Decimals: the number of digits that follow decimal separator.

2. Agents & Membership

Agent Archive base (slug): Enter a slug for Agents page
Only Show Agent with Property: If this box is ticked, agents that have at least one published property will be shown in Agent listing
Membership Type: Select a type by ticking a circle. It can be No Membership (agents created by admin can still submit properties), Free for All users, Membership packages or Pay per Submission.
• No membership: Select this if you don’t wish to enable property submission from frontend. Adding Property and Agent is implemented in the admin site; therefore, only admin and those who have accessed to the backend can submit property.This type of membership is suitable for an agency’s site or an individual agent’s site.
• Free for all Users: Registered users are free to submit property without making any payment and there is no limitation in property listing.
Select this membership type if your site is a free listing portal, or if you use another WP plugin that allows charging user at registration.It can also be used for agency’s site if you restrict user registration so that only your agents are able to log in and submit property from frontend.
• Membership Packages: When this option is checked, there will be extra options like:
Enable Freemium Membership: by dint of ticking this box, it will automatically allow newly registered users to own Free package:
Number of Free Listing: the number of properties agents/users are permitted to submit
Unlimited Listing: Tick this box if you want agents to be able to submit an unlimited number of properties.
Number of Free Featured Properties: This option places a limit on the number of Featured properties
Membership Listing page: Choose a page on which membership packages will be shown
• Pay Per Submission: Ticking this box will bring to you the following options:
Price Per Submission: This is the price agents will have to pay when they submit a property
Price for Featured Property: This is the price agents will have to pay when they set a property to be Featured one
Submitted Property need approve from admin? You can choose Yes, all newly added and edited property/ Yes, but only newly submitted property/ Don`t need admin approval.
Custom Login page: Choose a page that will become a Login/ Register page in the drop-down listTerms and conditions Page: Choose a Terms and Conditions Page here. This section will be shown in Register Form

Note: Only when one of the next three Membership types is checked will the last two options, including Submitted Property need approve from admin and Custom Login Page, be displayed.

3. Contact & Email

Options here will determine to changes display of contact and email form on Property page and Agents page.
Custom Property Contact Form: Choose a contact form that will be displayed on Property page. You can select None form or a form you created with Contact Form 7 plugin (in our demo, this form was named “Property Contact”)
Note:
• The contact form must include the fields: [your- name], [your – email] and [your- message]
• You can use the following tags in the email of that form: [property-id], [property-name], [property-url], [agent-id], [agent-name] and [agent-url]

1. The Default form

2. The Contact Form 7

Custom Agent Contact Form: similar to Custom Property Contact Form, this option also allows you to select the Default Contact form (None form) or Contact Form 1 which was created with Contact Form 7 plugin. Here are two types of form displayed on Agents page:

1. None

2. Contact Form 1

Note:
• The form must include the following fields: [your – name], [your-email], [your-message]

• You can use the following tags in the email of that form: [agent-id], [agent-name], [agent-url]
CC All Property Emails to: If you enter an email address of admin here, the admin will also receive CC emails when visitors of the site send a message to Agents.

4. Advanced Search

This is a section in which you can customize the search filters and Advanced Search fields.

There are 8 possible filters. You can change parameter from the dropdown. To disable a filter, select None.

The Advanced Search Field allows searching by Amenities. Select Amenities from the dropdown.

5. Google Map

Google Maps API: Enter an API key here so that the map can run well. You can refer to our documentation:

https://nootheme.com/knowledge-base/get-google-maps-api/

Starting Point Latitude/ Longitude: Enter a latitude and longitude of the location firstly loaded on the map you want. You can go to this site to get latitude and longitude of the corresponding place

http://www.latlong.net/

Default Zoom Level: Set up a default zoom level
Automatically Fit All Properties: Enable this option so that all your listing will fit your map automatically. Sometimes, the above options will become invalid
Default Map Height: Set up a default Map Height here
Drag Map: Tick this box so that you can drag the map.
Map Background Image: this background image will be shown before the process of loading map is complete

Translation

The theme is compatible with WPML plugin, thus can be translated into multiple languages. Follow this link for guide.
You can also use POEdit plugin for translation.

Located the .po file in folder /languages.
Open the file with POEdit and translate the texts into your preferred language.
When complete, you’ll want to save the file twice, as two separate files – a .po file and a .mo file. When you save the files, you must name them according to your language code. Find a list of language codes at WordPress in your Language. As an example, the language code for English is en_EN, so you would save the translated files as en_EN.po first, then en_EN.mo.
When that’s done, simply upload the files to your theme folder.

Codestyling Localization is a good alternative for POEdit. It also works with .po/.mo files and is very easy to use.

Sidebar&Widget

Sidebars & Widgets

Create A Sidebar

Add Widgets To A Sidebar

The image above illustrates 4 sidebars which are Property Sidebar, IDX Sidebar, Main Sidebar and Shop Sidebar.

1. Property Sidebar

This Sidebar is shown on Properties page

2. IDX Sidebar

This sidebar is displayed on IDX Single Listing Shortcode and IDX Multiple Listing Shortcode.

3. Main Sidebar

Theme Customizer

Import/Export settings

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.

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.

Social Media

Input URLs of your social media profile. These social icons will be shown when they are enabled on Top Bar/ Bottom Bar

Woocommerce

1. Shop page

Shop layout: The layout can be Full-width, With Left or Right Sidebar
Products Per Page: This option handles the number of products shown per page

2. Single Product

Product Layout: The Layout of single product can be similar to that of shop page

Agent & Property

1. Agent Layout

This section handles layout of the Agent page. The layout can be Full-width, With Right/ Left Sidebar

2. Property Listing

Listing Page Layout: The Layout of Listing Page (in our demo, it is Property Status Page) is Full-width, With Left or Right Sidebar
Listing Page Sidebar: Select a sidebar shown on Property Listing Page
Listing Style: The style can be Grid or List
Display Style: There are 2 styles which are Show Extended Features and Show More Detail. If you select the first one, it will show you My favorites, Compare and share Icon. Meanwhile, when you choose Show More Detail, these three icons will be hidden.
Sort Property By: Featured, Date, Price, Name, Area or Random
Show Sort Button: Tick this box to show sort button
Show Map on Header/ Show Property Search: Turn these buttons on to show Map on Header and Property Search.
Search Layout: Horizontal or Vertical Search
Enable Features/ Amenities Search: Tick this box to show Features/ Amenities Search

3. Property Detail

Property Page Layout: You can set it to be similar to Listing Layout or choose another layout.
Property Page Sidebar: Select a sidebar that will be shown on Property Detail page
Show Map on Header/ Show Property Search: Turn buttons on to show those items.
Search Layout: Horizontal or Vertical Search
Enable Features/ Amenities Search: Tick this box to show Features/ Amenities Search
Number of Similar Properties: Choose the number of similar properties that will be displayed
Show Print Button: Turn this button on so that the print icon will be show on single property page:

Enable Social Sharing: Turn this button on to enable social sharing

4. dsIDXPress plugin

This section has settings dedicated to dsIDX Press. Please notice that you will have to use “dsIDX Template” on dsIDX general option for it to work.
IDX layout: Full-width, With Left or Right Sidebar
Show Google map on IDX page: The map will be shown if you use IDX Listing widget on the same page
Show Form Search Map on IDX page

Blog

1. Blog Page

Blog Layout: The layout can be Full-width, With Left/Right Sidebar
Blog Sidebar: Choose a sidebar that will be displayed on Blog page
Show Post Meta, Show Post Tags, Show Readmore Links: tick these boxes to show these ones
Excerpt Length: Excerpt is a short paragraph or an extract taken from the post. The number entered here is corresponding to the number of words shown in the excerpt.

2. Archive Page

3. Single Post

Post Layout: Tick this box so that single posts have the same layout as Post list. Uncheck to opt another layout.
Show Post meta, Show Post Tags, Show Author`s Bio: Tick these boxes to show these items on each post
Enable Social Sharing: Enable/Disable Social Sharing. If enable, you enable visitor to share your post by Facebook, Twitter, Google+, Pinterest and LinkedIn

Footer

Footer Columns (Widgetized): Choose number of columns that will be shown. The number varies from 1 to 4.
Footer background image: Upload a footer background image here.
Upload Footer Logo: Upload a logo that will be displayed in Footer section of the site.
Bottom Bar Content (HTML): Add content to Bottom Bar here

Header

1. 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. Besides, when you choose Fixed Top, you will have two extra options:
Shrink Navbar when Scroll:
Only Display when Scroll up:
Show Shopping Cart/ Show Search Icon: Turn these button on to show Shopping Cart and Search Icon.
Only Search Properties: Tick this box to only search Properties
Phone Number: Enter a phone number here
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
Custom Dropdown Style: Enable this button then you will be able to make changes to drop-down items
Drop-down Background Color: Choose a background color
Drop-down Font Size: Change font size of drop-down items
Drop-down Link Color: Change Link color of drop-down items
Drop-down Link Hover Color: Change Hover Link color of drop-down items

2. Logo

Citilights 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. Besides, you can choose a Retina Logo that will be displayed on mobile devices.

3. NavBar Alignment

Here you can change NavBar Height, NavBar Spacing and Mobile Icon Size

4. Top Bar

Enable Top Bar : Turn this button on to show the top bar
Show social icons: Turn this button on to show social icons
Social Position: The position of the social icon can be Left or Right
Email: Enter an email address here
Show Register Link/ Show Login Link: Tick these boxes to show these links
Custom Register/Login Page: Choose page that becomes Register/login page

Typography

You can customize your Typography settings here. Citilights integrated all Google Fonts. See font preview at Google Fonts

Enable Use Custom Fonts and Custom Font Buttons to make changes to color and font of Headings and Body

1. 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> which are in uppercase

2. Body

Body font: Choose a body font in the drop-down list
Font size: Opt a font size

Design&Layout

1. Site Layout

You can set Style & Layout for your site. Citilights is equipped with two layout styles including: Boxed Layout and Fullwidth layout.

If you select Boxed Layout, you will have further options:
Site Width, Site Max Width: these options handle width of the site
Background color, Background Image: If you opt yellow for background, background of your site will be filled with this color. However, when you set up background image, background of the site will be replaced with a new image.
Background repeat: Background Repeat will work effectively if you use patterned background image. 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 in Background Image Alignment box.

2. Color

Here you can set color for links and various elements on your site.
Options in this section include: Link Color, Link Hover Color and Secondary Color

Static Front Page

In this section, you will carry out steps that are similar to those in Settings> Reading to set up Front Page and Blog page:
Front Page Displays: Choose A static page
Front page: Choose a page that will become the Front page
Posts page: Choose page that will become Blog page.

Site Enhancement

• Custom Favicon: A favicon is a simple square image viewable in browsers for users to identify your website among many tabs. Ideally, it should be a 32×32 pixels or a 16×16 pixels image. Most modern browsers can display a favicon in PNG format but older versions of Internet Explorer may not. To make sure your favicon be shown nicely, it is recommended to be in .ico format. Add your favicon in our customizer simply by clicking “Open Library” button in “Custom Favicon“, selecting your existing image or uploading new image.
• Smooth Scrolling: Enable/disable the smooth scrolling feature.

Menus

You can create a New menu, change order of items in the formed menu and add items to the menu

An Introduction to Customizer

Our theme customizer works as the original WordPress customizer feature but be much more versatile. All our theme options can be changed in our Customizer on the left side and live previewed instantly in previewed site on right side. With its intuitive interface, you can customize your website as you wish at your fingertips without writing a line of code.

To start using Customizer, in Admin Panel, navigate to Customizer, you will be redirected to a live preview screen where you can change options on left side and preview your site on your right side promptly. All your change will not be committed and viewed on your site until you click Save & Publish on top right of Customizer bar. You are also able to Export your settings in Customizer and Import to apply for other sites.

Let’s take a quick overview throughout all options in our Customizer. When using Customizer, you also will get our short guide for each option right in Customizer bar.

Citilights Customizer

Let’s take a quick overview throughout all options in our Customizer. When using Customizer, you also will get our short guide for each option right in Customizer bar.

Site Enhancement

Custom Favicon: A favicon is a simple square image viewable in browsers for users to identify your website among many tabs. Ideally, it should be a 32×32 pixels or a 16×16 pixels image. Most modern browsers can display a favicon in PNG format but older versions of Internet Explorer may not. To make sure your favicon be shown nicely, it is recommended to be in .ico format. Add your favicon in our customizer simply by clicking “Open Library” button in “Custom Favicon“, selecting your existing image or uploading new image.
Smooth Scrolling: Enable/disable the smooth scrolling feature.

Design & Layout

Site Layout: Choose Full-width or Boxed layout for your site. With Boxed layout, you will have additional below options for background setting:
Color: You can set the color for links and various elements on your site. You can choose color for links, links hover and secondary color by select to color on color table or enter color code on box.

Typography

Custom Font: CitiLights integrated all Google Fonts. Enable Custom Font to customize font, font size and other settings for heading and body text.
Custom Font Color: Enable Custom Font Color to customize font color of headings and body

Header

Customize your settings for your Header including Navigation Bar (Logo and Navigation) and an optional Top Bar.

Navigation Bar: This tab adjust settings for Navigation Bar. You also can customize some settings for the Toggle Button on Mobile in this section.

This tab has many options with the consider bellowing:

NavBar Position: This option allows selecting position which header top will be displayed. That includes Static & Fixed top. Besides, there are 2 checkbox that help to shrink NavBar when scroll or Display when Scroll Up which will help you choose style of NavBar when displayed on frontend.
Show Search Icon: If you turn On this option, you will have search button on your main menu. You can only search properties by click to checkbox Only Search Properties under Show Search Icon button.
Phone Number: You can enter the phone number on this box. The number will be displayed on the right side of header.
Use Custom NavBar Font and color: If On, you will select font family, font size, link color and link hover color for Main Menu.
Custom Dropdown Style: You can configure background color, font size, link color and link hover color for menu when you scroll up by some options of Dropdown Background Color.

Logo: Upload your logo image and retina one (a larger image, with double the amount of pixels that your image will be displayed at). Enter your image height you want to display on navigation bar and we will do the calculation part for you to make it look great on all screen size.
NavBar Alignment: Adjust link alignment, height of navigation bar and size of mobile navigation button.
Top Bar: Enable/disable top bar. Top bar lays on top of your site, above Navigation Bar. It is suitable for placing contact information and social media link. You can choose to display social icons, set it as a top menu or custom content by checking each option. By checking Custom Content option, you are able to add content for top bar. Choose layout to display social icon and content of top bar.

Footer

This section contains all settings for Footer in your site.

Footer Columns: Set the number of column shown in footer.
Footer Background Image: Select a photo to be displayed on footer background. You can upload your footer background by click “Select Image” button.
Upload Footer Logo: select a photo to be displayed at the right bottom corner of the footer.
Bottom Bar Content: Add content shown in bottom bar.

Widgets

You can create widgets with various type of contents to put in the footer. To create a widget, click Add a Widget.

Blog

Blog Page: Choose page layout for your blog page. It can be full-width, with right sidebar or left sidebar. If you choose layout with sidebar, select blog sidebar for your blog.
Archive Page: Setup layout and style for your Archive Page. You can choose same layout and style as blog page by checking the box beside each option or uncheck the box to select other layouts and styles.
Single Post: Choose Post layout same as blog layout by checking the box beside the option or uncheck to choose another layout. You also can choose to show or hide Post Meta, Tags and Author’s Bio. In addition, by enabling Social Sharing, you enable visitors to share your post. Enter Social Sharing Title and decide which social media your post can be shared.

Agent & Property

Agent Layout: Configure the layout of all the pages relating to Agents, including index page, archive page and single agent page. In Agent layout, choose whether sidebar is enabled. In Agent Sidebar, select a sidebar among those available. Main Sidebar is default, although you can create custom sidebar in Appearance>Sidebar Generator. You can find details about this plugin and instruction at https://wordpress.org/plugins/smk-sidebar-generator/
Property Listing: This section has settings for the Property listing pages specifically, including Index and Archive Page.
Listing Page Layout: Property Listing layout supports 3 layouts which will be displayed on page. Including Full-Width, With Right Sidebar and With Left Sidebar. If you choose With Right Sidebar you need to choose Listing Page Sidebar for your layout.
Listing Style: You can choose 2 styles hat is Grid and List for Listing Properties.

Grid

grid

List

list

Enable Properties Sort: If checked on this checkbox, properties are sorted by Date, Price, Name, Area, Bath and Bed.
Show Map on Header: If you want to have map on header of properties listing you can turn On this option
Show Property Search: Similarly Map, if you turn On this option, search property will be displayed on Listing Properties page. In addition, you can select layout for Search, including Horizontal & Vertical layout.
Enable Features/Amenities Search: If checked this checkbox, you can some options which supports for search button.
Property Detail: This section has setting for Property detail pages(Single pages)
Property Page Layout: Same as Listing Layout, property single pages is inherited Listing Layout.
Show Map on Header: If On this option, you will have map which will be displayed on single property page.
Show Property Search: If On, search property will be displayed on single property page. Beside, you can choose search layout: Horizontal & Vertical for search form.
Enable Social Sharing: Turn on this option and tick on social checkbox, you will have social icon on property detail page.
dsIDXpress Plugin: This section has settings dedicated dsIDXpress Plugin. Please note that you will have to use “dsIDX Template” on dsIDX general option for it to work.
IDX Layout: You can choose 3 layouts for IDX that is Full- Width, With Right Sidebar and With Left Sidebar. If you choose With Right Sidebar, please choose IDX Sidebar for page.
Show Google map on IDX Page: If checked this checkbox the map will show if you use IDX Listing widget on the same page.

Social Media

Input URLs of your social media profile. Inputting URL here means that corresponding social icon will be displayed when Social Icon is enabled on Top Bar and/or on Bottom Bar.

Custom Code

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

Import/Export Settings

All themes from NooTheme share the same theme setting structure so you can export then import settings from one theme to another conveniently without any problem.

Import Settings: Click Upload button then choose a JSON file (.json) from your computer to import settings 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 Settings: 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.

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, Citilights has 7 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 Citilights 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:

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!

CSS box: you can change width of padding, border and margin hereBackground color: opt color for background hereBelow background color section, you will have an option to upload the background image and opt styles of background image: theme default, cover, contain, no repeat and repeat.Cover: Scale the background image to be as large as possible so that the background area will be completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.Contain: Scale the image to the largest size such that both its width and its height can fit inside the content area.No repeat: Size of the image will not change when it is placed in background area.Repeat: Size of the image will also be as same as that of the original one; however, then many replicates of this image will be established in background area.

1. Recent Properties

This shortcode is used in creating Home Page
Title: Enter a title here, for example, recent properties
Style: Grid, List, Slider or Featured Style

3. Property Slider

This shortcode is used in creating Homepage
Animation: Slide or Fade
Slide Time/ Speed/ Height: set a number
Auto Play Slider: tick this box so that slider can be automatically played
Show Slide Indicator, Show Previous/ Next Navigation: Tick these boxes to show Slide Indicator, Previous/ Next Navigation.
Show Property Search: tick this box to show search below Slider
Show Advanced (Amenities) Search: check this box to show Advanced Search
Search Info Title: Give a title
Search Info content: give a content

4. Recent Agents

This shortcode is used to show Agents section on Home page
Title: Give a title here
Number: The number of Agents is shown

5. Membership packages (Pricing Table)

This shortcode is used to create Pricing Table page
Featured Items: the number of Featured packages
Buttons Text: Enter text of the button

6. Login/Register

This shortcode is used to create Login/Register Page
Mode: There are 3 kinds for you to select in the drop-down list. It can be Only login, Only register or both Login and Register
Login/Register Text: These options are used as description for the login/register form

7. Single Property

This shortcode is used to display single property
Title: Enter a title here
Property: Choose a property in the drop-down list
Style: Select a style in the drop-down list. The style can be featured , List or Grid item

WooCommerce pages

Woocommerce pages

After Woocommerce plugin is installed, the following pages will automatically be built:
• Cart
• Checkout
• My account
• Shop Page
Learn more about Woocommerce pages:http://docs.woothemes.com/document/woocommerce-pages/

Yet if it is unfortunate that those pages are not automatically created, you can do the following steps to build them:

1. Cart Page

• Navigate to Pages > Add New.
• Enter Title (Cart), paste this shortcode [woocommerce_cart] into content area of the page
• Opt Default Template in Page Attributes on the right side
• Click on Publish button

2. Checkout Page

• Navigate to Pages > Add New.
• Enter Title (Checkout), paste this shortcode [woocommerce_checkout] into content area of the page.
• Opt Default Template in Page Attributes on the right side.
• Click on Publish button

3. My Account

• Navigate to Pages > Add New.
• Enter Title (My Account), paste this shortcode [woocommerce_my_account] into content area of the page.
• Opt Default Template in Page Attributes on the right side.
• Click on Publish button

4. Shop Page

• Navigate to Pages > Add New
• Enter title, Shop
• Opt Default Template in Page Attributes on the right side.
• Click on Publish button

Constru

Blog & Page

[Medicus] Setting Up Contact page

Medicus includes a Contact page with built in contact form. To have Contact page simply create a new page then add Google Map & Contact Form 7 shortcode for page. You can set up Form of Contact Form 7 in Dashboard–> Contact–>Contact Forms.

[Constru] Post Format Setting

Gallery Settings: When selecting Gallery Format, you will have Gallery Setting meta-box to add as many images as you want into your gallery and manage your preview content as Featured Image, First Image on Gallery or Image Slideshow.
Image Settings: When you selecting Image Format for you post, you woll have Image Settings meta-box to choose main image of the post. Set Feature Image as main image for preview content or Choose Your Image if you want to set another image as main image for preview content.
Video Settings: When selecting Video Format, you will have Video Setting meta-box where you can add video URL, and embedded video code, aspect ratio and preview content as Featured Image, Video or Featured Image as Video Thumbnail.

[Constru] Create A Blog Page

Follow these steps bellow to create a blog post:

Step 1: In your Admin Panel, go to Post and navigate to Add New.
Step 2: Enter your title and choose Post Format from Format box on the right side which shows different post format options: Standard, Image, Video, Audio and Gallery.
Step 3: Add your post content in editing field. You can use our shortcode to build your content where needed.
Step 4: Add Categories for the post from the Categories box on the right side. You can add new category or choose from existing categories. Check the box to select Categories for your post. Add relevant Tags for your post in the Tags box, set Featured image on the right side and other setting from the sections below Editing field.

If you need detailed guide about post settings in WordPress, please find in WordPress Codex.

Step 5: All done, click Publish to publish your post.

create blog page

[Constru] Setting Up Homepage

To setting up home page, please following these steps:

Step 1: Navigate to Settings–> Reading
Step 2: Select A Static Page option.
Step 3: Choose the page you want as your home page from the Front Page dropdown list.
Step 4: This is also the same spot you select the blog page as the Post page.

setting up homepage

[Constru] Page Settings

You can choose various setting for your page on this box.

Hide Page Title: This option allows you to Show/Hide your page title.
Enable Menu Transparent: If checked, you will enable menu transparent on your page.
Heading Background Image: This option will help you to select a unique heading Image for this page.

[Constru] Page Template

We have some specific Constru page template for you. Here is 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….
Page with Left Sidebar: You can have your page with left sidebar with this template. Use this template for your blog or whichever page you want to have sidebar. Select Page sidebar to display in sidebar position in Sidebar box.
Page with Right Sidebar: Also with sidebar but the right one, and of course, its use is quite the same. Choose this template for your blog whichever page you want to have sidebar. Select Page sidebar to display in sidebar position in Sidebar box.

[Constru] Create 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. See below Page Template list for more detail.
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 your page.

Constru Customizer

[Constru] Customizer

Our theme customizer works as original WordPress customizer feature but be must more versatile. All our theme options can be changed in our Customizer on the left side and live previewed instantly in previewed on right side. With this intuitive interface, you can customize your website as you wish at your fingertips without writing a line of code.

To start using Customizer in Admin Panel, navigate to Customizer, you will be redirected to a live preview screen where you can change options on left side and preview your site on right side promptly. All your change will not be committed and viewed on your site until you click Save & Publish on top right of Customizer bar. You also are able to Export your setting in Customizer and Import to apply for other sites.

Site Enhancement

Custom Favicon: A favicon is a simple square image viewable in browsers for users to identify your website among many tabs. Ideally, it should be a 32×32 pixels or a 16×16 pixels. Most modern browsers can display a favicon in PNG format but older versions of Internet Explorer may not. To make sure your favicon be shown nicely, it is recommended to be in .ico format. Add your favicon in our customizer simply by clicking “Open Library” button in “Custom Favicon”, selecting your existing image or uploading new image.
Back To Top Button: Back To Top will appear in the right bottom when users scroll down. Enable/Disable as your preference.
Enable page Heading: Page heading will appear in the header of site. When you enable you will have header background image on blog page, project page or shop page.
Enable MailChimp Subscribe: This option allows you to enable/disable MailChimp which will display on footer. In addition, you need to enter MailChimp API key to connect to your account. Don’t know where to find Just click here to get your API

Design and Layout

Site Layout: This option will help you to choose layout for your website. We provide two layout you can use, that is Fullwidth and Boxed. With Boxed layout you will have additional options for max style width background and background color or image setting.
Color: This option allows you to set color for links and various element for your site.
Primary Color: This option provides table color or code color which will help you to change primary color for your site.

Typography

You can customize your Typography settings. Constru integrated all Google Fonts. See font preview at Google Fonts.

Custom Fonts: Enable Custom Fonts to customize font, font size and other settings for heading and body text.
Custom Font Color: Enable Custom Font Color to customize font color of heading and body.
Headings: If checked on Transform to Uppercase, you will have heading <h1> <h2> <h3> which is uppercase type.
Body: You can change font size of body by selecting font size from dropdown list.

Header

Customize settings for Heading including Navigation Bar, Logo, Navigation Alignment and Social Media.

Navigation Bar

This option adjusts settings for Navigation Bar. You also can customize some settings for the Toggle Button on Mobile in this section.

NavBar Position: This option allows you to select type of for NavBar, includes Static Top and Fixed Top.
Show Search Box: If On, you will have search option on main menu.
Use Custom NavBar Font and color: If On, you can change font, font size, link color and link hover color for header font.

Logo

Constru allows you to add image file or user text for logo. You will see button to turn On/Off Use Image for Logo

If you turn Off Use Image for Logo button, you will have option to enter your site name, select logo font from Google font, font size and color for your logo.
If you turn On, you will see Upload your Logo option which will allow to add your logo image. And enter your image height you want to display on navigation bar and we will do calculation part for you to make it looks great on all screen size.

NavBar Alignment

Adjust height of navigation bar, space between links and size of mobile navigation button.

Social Media

You can input URLs of your social media profile. Inputting URL here means that corresponding social icon will be displayed when Social Icon is enabled on Top Bar and/or on Bottom Bar. To enable each social media you need to enter your link on each box.

Footer

Footer contains Widgetized area and Footer bottom. You can change any parts.

Upload Footer Background: This option allows you to display footer background image for your footer position.
Footer Columns: Set the footer column number on drop-down list. Number of columns can be from 1 to 4. You can also select None to leave it blank(no footer content).
Show Footer Bottom: If you choose Yes on droop-down list, you need to enter Footer Bottom Content on the Footer Bottom Content box.

Widget

This section enables you to add and customize Widgets on your preview site. It includes Main Sidebar and the number of Footer Columns due to setting in above section: Footer settings.

Footer Column #i: Add text, image or other widget by hitting Add a Widget button.

Blog

Post List

Choose layout setting for your Post List.

Blog layout: It can be full-width, right sidebar or left sidebar. If you choose layout with sidebar, select blog sidebar for your blog.
Blog sidebar: Choose a sidebar for your blog pages, including Main Sidebar, Shop Sidebar and Noo Footer Bottom.
Blog Heading: You can enter your Blog name which is displayed on Heading Blog page.
Heading Background Image: You will have background image on header of blog page if you click “Select Image” button then choose your image.
Enable Menu Transparent: Check the box to enable Menu Transparent for your page.
Show Post Meta: Check the box to show post me-ta of Blog page.
Show Read more link: Check the box to show read more link.
Excerpt Length: The number of characters displayed on post selection.

Post Single

Show Post Meta: This option allows you to Show/Hide post me-ta when you open post detail page. Similarly, you can Show/Hide Post thumbnail, author’s bio of post.
Show navigation: This option will help you to show/hide Navigation which is next/preview feature on post detail.
Heading Background Image: You will have background image on header of blog page if you click “Select Image” button then choose your image.

Woo Commerce

Shop page

This section provides some options which help you choose Layout and Headline Settings for your Shop Page.

Shop Layout: You can choose different layout for Shop page, including Full-Width, With Right Sidebar or With Left Sidebar. If you choose layout with sidebar, select shop sidebar for your shop.
Shop Sidebar: You can select shop sidebar on dropdown list.
Shop Heading: You can choose Heading Background of Shop page by clicking “Select Image” button and then enter title for Shop page.
Shop Default View Style: There are 2 product display options: Grid &List which allow to view products in 2 different way.
Products Per Page: You can set number of products displayed per page. Limited on 4 to 50 products

Single Product

Same as with Shop Layout you can choose Layout for Single Product. Besides that, you can enter number of Related Products Count

Single Portfolio

In this section you have settings for your single portfolio page.

Heading Background Image: This options will help you to choose Heading Background for single portfolio page (single project page).
Show navigation: This option allows to Show/Hide Navigation which is next/preview on single portfolio detail.
Share Portfolio: This option allows to share single portfolio on Facebook, Twitter or Google+… and Share option will be displayed on left side of single post. You can tick on list checkbox to select social media for your site.

Social Media

This option will help you input URLs of your social media profile. Inputting URL here means that corresponding social icon will be displayed when Social Icon is enabled on Top Bar and/ or Bottom Bar.

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.

Import/Export Setting

All themes from NooTheme share the same theme settings structure so you can export then import setting from one theme to another conveniently with our 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.

Constru Shortcode

[Constru] Shortcode

Instead of writing line of code to build elements, we built Constru with number of premade shortcodes that enable you to create many elements you see in our demo in fingertips. By installing Visual Composer (the page build plugin integrated in the theme package), you will have the Visual Backend Editor where every shortcodes are displayed visually before your eyes and easily generated in several click. In addition to Default Visual Composer shortcode, Constru comes with 15 specific shortcodes. To generate the shortcodes, go to Backend Editor, click the “+” icon to add shortcode. Navigate to Notica tab to find a shortcode you want to use. You can add those shortcodes to any pages or posts for your own use.

Constru theme provides 15 shortcode. Below are list of 15 Constru shortcodes and their attributes.

The guide below will describe the detail of each shortcode which used in Constru theme.

Noo Slider Shortcode

This shortcode provides many options that will help you to make awesome slider.

General option

Categories: This option allows to select many categories to get posts for your slider.
Order By: You can arrange posts by Recent First (all posts which are newly created), Older First (all post that is older created), Title Alphabet (all post that is arranged ascending) and Title Reversed Alphabet (all post that is ordered descending).
Limited slider: The maximum number of post will be displayed on slider.

Slider options

Height Style: This option provides some height styles that include Full Screen (the height of image is displayed full screen), Auto Height (the height of image is automatically displayed), Custom Height (you can configure height for slider by enter the Import Height).
Auto Play: If choose yes, your slider will be automatically transmitted on your slider.
Show Pagination: This option allows to enable/ disable pagination for your slider.
Width Style: This option allows you to choose 2 width styles, include: Full Width and Max Width.
Background Overlap: You can choose background color for your slider that is overlie on image slider.

Noo Title Shortcode

This shortcode is used to display text which you choose to make the title.

Layout Style: This option allows you to choose layout for your title that includes Left, Right and Center.
Font Size: You can select font size: Bold or Base for your title.
Choose Color: You can select color title by choosing color on color table or enter your color code in color box.
Ordinal numbers: This option allows to enter the ordinal numbers of your site.
Title: Enter your title here.

Why Choose Us

This shortcode is used to display team of engineers and constructors who have been completing hundreds of construction project throughout the country.

Upload Image: This option allows to upload your image from Media library or your computer.
Title: Enter title here.
Description: You can enter some texts that describes engineers, constructors or something you want.

Noo Portfolio

This shortcode is used to display portfolio on your page.

Categories: This option allows to select many categories to get portfolio item for your slider.
Columns: The columns attribute controls how wide are columns of portfolios should be displayed. You can choose from 1 to 5 columns.
Order By: You can arrange portfolio items by Recent First (all portfolio items which are newly created), Older First (all portfolio items those are older created), Title Alphabet (all portfolio items which are arranged ascending) and Title Reversed Alphabet (all portfolio items which are ordered descending).
Show Filter: This option allows you to Enable/ Disable category filter which portfolio item is displayed by category.
Filter Style: You can select style for category filter. That includes Center style and Left Style.
Post per page: The maximum number of portfolio will be displayed on page/category.

Noo Our Blog

This shortcode is used to display posts on Blog page.

Data Source: Select content type to get posts for your slider, including category, tag or post.

If you choose to get posts by C you want to display items on your page. Similarly with content type: tags.

If you want to get content by Post, enter specific ID of post you want to display on slider

Order By: This option allows you to arrange posts in title alphabet order or date order.
Post per Page: The maximum number of posts will be displayed on page/category.
Excerpt Length: The number of text is displayed on post selection.

Noo Testimonial

This shortcode allows you to display testimonial on your page.

Show Avatar: This option allows to Enable/Disable image avatar for testimonial.
Categories: Select category to display testimonial on your page.
Order By: This option allows to arrange testimonials in title alphabet order or date order.
Auto Play: If Yes, your testimonial will be automatically transmitted on your slider.
Limited Testimonial: The maximum number of testimonial will be displayed on page.

Noo Clients

This shortcode is used to display customizer from different locations and fields.

Upload Images: This option allows to upload many client images for your page.
Custom links: Enter links for each Clients here. Divide links with line breaks (enter).
Custom link target: This option will help you to select where to open custom links.
Image Size: You can choose image size for your clients. That includes Thumbnail, Medium, Large and Full image size.
Columns: The columns attribute control how wide are columns of clients image will be displayed.

Noo Counter

Use shortcode if you want to show the technical parameter or the specification of your site.

Import number: You can enter the number here.
Title: Enter title that represents for the number above.

Noo List

Use shortcode if you want to the information is displayed by list.

Choose icon: this option provides many icons which allow you can select one icon for your page. In additional, you can search your icon on search box.
Description: Enter your description here.

Noo Portfolio List

Use this shortcode if you want to display list portfolio.

Categories: Select categories to display portfolio item on portfolio list page.
Order By: This option allows to arrange portfolio items in title alphabet order or date order.
Post per Page: The maximum number of portfolio will be displayed on category/page.
Load More Icon: This option allows to select icon which is used to load portfolio item. Recommend you to use animation image.

Noo Services

This shortcode is used to show items on Services page.

Category: Select category to display items on services page.
Order By: This option allows to arrange portfolio items in title alphabet order or date order.
Post per Page: The maximum number of post will be displayed on services page.

Noo Quote

This shortcode allows you to display quotations from all quote post on one page.

Noo Contact

Use this shortcode to build contact page.

General

Map Embed iframe: You need to find iframe URL of your location on google map and push on this box. You can go to this link to learn more how to get iframe URL.

Contact Info

This option has many options which you can enter some information such as Title, description, address, phone and more…

Noo About

Use this shortcode if you want to build About Us page.

About Style: This option allows you to choose one or two images from Media Library or your computer. Image will be displayed on the left side.
Text: You can write one description of your company or your team on this box.

Noo Team Member

This shortcode is used to show name & position of all employees on your company or you can select a group represented team member.

Choose Image: This option allows you to choose represented image for person who belong your team.
Name: Enter his/her name here
Position: You can enter position of person on your team.
Image Size: Select style of image, you can select 4 styles include: Full, Large, Medium and Thumbnail.

Header

[Constru] Settings Up Menu

How To Create A New Menu

Step 1: Navigate to Appearance–> Menus from Admin panel.
Step 2: Click the Create A New Menu link to make a new menu. Enter the name then click Create Menu
Step 3: To add menu item, select pages on the left hand side and click Add to Menu button. You also can add custom links or blog categories into menu.
Step 4: To create a dropdown menu, simply drag a menu item below of another menu item and slightly to the right, and it will lock into place and create a dropdown section.
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 the Save Menu

Below is the screenshot of menu structure and place to assign menu:

create constru menu

[Constru] Adding Logo

Constru allows you to add image file on user text for logo. For the image file, you can upload at any size and it will be adjusted to fit into the menu. There is an option for you to upload a retina logo to keep your logo retina ready.

Step 1: Navigate to Customizer–> Header–> Logo tab to access the logo options.
Step 2: You will see a button to turn On/Off Use Image for Logo.

If Off, you will have option to enter your site name, select logo font from Google font, font size and color for your logo.

If On, you will have one logo images to upload. Click the Upload button and select your logo file.

Step 3: If you are using a retina logo, you must enter the logo height for standard logo.
Step 4: All done, click “Save & Publish” to save your change.

Installation

[Constru] Update Theme

There are 3 methods to update the theme:

Manually via WordPress admin: After downloading the package from Themeforest, you can delete the old theme and install the new theme. All your settings with our theme will be preserved but it sometimes results in losing Menu or Widgets settings because this method actually switches on/off the menu and widget location which has been registered by this theme.
Manually via FTP: After downloading the package from Themeforest, you can extract it and using FTP client like FileZilla to remove the old theme and upload the new theme. With this method, all your settings, including the menu and widget will be persevered.
Using Envato WordPress Toolkit introduced on this link: http://premium.wpmudev.org/blog/how-to-update-themeforest-themes-with-the-envato-wordpress-toolkit/. This is the plugin developed by Envato to auto update WordPress theme bought in Themeforest.

[Constru] Import Demo Content

How To Import Constru Demo Data

Step 1: From Admin Panel, after installing and activate our theme, navigate to Tools, choose Import–> WordPress.
Step 2: Click Choose File and browse the demo content .xml file extracted from the .zip file you can download from Themeforest following guide in DOWNLOAD THEME PACKAGE section above. Click Upload file and import to upload the file.

Note: If you have not installed Deme Importer Plugin, you may see the notification message to install the plugin. Click Install Now to install and move on.

Step 3: You will first be asked to map the authors in the file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.
Step 4: WordPress will then import each of the posts, comments, and categories contained in this file into your blog.

See guide to import a sample content into a WordPress blog in WordPress Codex.

Note: Not all the content in our demo will be included. Those files might be excluded from the content you can import:

Images: our stocks might not be in the content due to license issues. Instead, we replace with grey images. Please change to your own pretty images for your site.
Sliders, Post and Pages: not all sliders, posts and page in our demo will be consisted in our dummy date when you import. However, we still add some sliders and pages for your reference.

[Constru] Plugin Installation

Here is list of plugins that will come together with our theme when you activated it. You are recommended to install and activate these plugins base on your own need:

Woo Commerce: An e-commerce plugin. This is a very popular free plugin you will need if you plan to create job posting packages for your site.
Visual Composer: The popular drag and drop page builder plugin with intuitive interface to build your content at ease. Save another $33 for this plugin with Constru.
Contact Form 7: A free form plugin recommended to create a nice form for your site.

[Constru] Install Theme via FTP

How to install Constru via FTP

Step 1: Login into your hosting space via an FTP software.
Step 2: Unzip the noo-constru.zip file and ONLY use the extracted Notica theme folder.
Step 3: Upload the extracted Constru theme folder into wp-content–> themes
Step 4: Activate the newly installed theme by going to Appearance–> Themes and clicking the Activate
Step 5: Then you will see a notification message to activate the required & recommended plugins Visual Composer, Woo Commerce, Contact Form 7. Follow the steps to install and activate each plugin.

[Constru] Install Theme via WordPress

How to install Constru via WordPress

Step 1: Login to your WordPress Admin Panel, navigate to Appearanceà Themes
Step 2: Click Install Themes on the top –> hit Upload
Step 3: Find “noo-constru.zip” file on your computer and click “Install Now”.
Step 4: Once uploaded, activate the theme. Go to Appearance–>Themes and activate it.
Step 5: Then you will see a notification message to activate the required & recommended plugins: Woocommerce, Visual Composer, Contact Form 7. Follow the steps to install and activate each plugin.

install theme via wordpress
Note: If you see this message “Are You Sure You Want To Do This” when installing noo-constru.zip file via WordPress, it means that you have an upload max file size limit. Try to install the theme via FTP instead, or contact your host to increase the limit.

[Constru] Requirement

To use Constru theme, you must be running WordPress 3.6 or higher, PHP 5 or higher, and MySQL 5 or higher. Follow below checklist to ensure your host can work well with Constru 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.

[Constru] Download Theme Package

When purchasing successfully our theme from Themeforest, you will need to download theme package for your use. To download the package, please login your Themeforest account, navigate to “Downloads”, click the “Download” button in the left of the theme, choose “All file & documentation” to download our theme package to your computer. The theme package contains:

Constru Theme File: Includes noo-constru.zip file that consists of everything you need to install the theme.
Document Folder: Includes Constru Documentation file that helps you get to know about Constru and guides you to build your site with our theme.
Licensing Folder: Includes the licensing files of Themeforest purchase.
Demo Content Folder: Includes the .xml file you will need to import our demo date.

[Constru] 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 below useful links:

WordPress Codex: General info about WordPress and how to install your server.
Instructional Video: How-To video created by Woo Themes
First Steps With WordPress: Multiple topics about WordPress.
FAQ New To WordPress: Popular FAQs about WordPress.

[Constru] Instruction

Firstly we would love to send our great thanks to you for purchasing Constru. This documentation covers almost everything to guide you step by step from the start to have your site on air. We encourage you to read thoroughly all section 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 Constru.

Portfolio

[Constru] Portfolio Setting

Portfolio setting is displayed above content of portfolio item, you can configure all options to make splendid portfolio. Please see description bellow to learn more about these options:

General Information

In Constru theme, each portfolio item is same as construction project. You need to provide some information, include Office, Construction date, Location, Surface area and Value.

Gallery

This option will help you to upload many images from Media Library or your computer. That will be displayed on Project single.

Heading Background

Enable Menu Transparent: This option allows to enable/disable Menu Transparent for your project single page.
Heading Background: This option will help you to select a unique heading Image for this page.

[Constru] Create Portfolio Page

A Portfolio Post of Portfolio item is a piece of your work. To create portfolio item, please follow these steps:

Step 1: In Admin Panel, navigate to Portfolio, choose Add New to add a new Portfolio Item
Step 2: Enter your title and add your post content in the editing field.
Step 3: Select Categories for your post in Project Categories box on the right side. These Categories will be displayed on the top right of your portfolio images as in our demo and help to sort out your portfolio items into different types of project.
Note: You should build the list of Project Categories to assign to your Portfolio Posts. To add Project Categories, in Portfolio, navigate to Project Categories, add your Category Name in the field on the left and other settings (Slug, Parent Category, and Headline).
Step 4: Add Project Attributes in the box on the right to give tags to your portfolio posts. Separate multiple attributes with commas.
Step 5: Select media type of your post in Media Type box on the right (Image, Gallery or Video) corresponding to different media type options to choose featured image, preview content or add link of video post.
Step 6: Finish other settings as for regular post then Publish

[Wemusic] Add Sidebar Widget

In addition to default WordPress widgets, Wemusic included Noo Recent News, Noo Information, Noo Social and Noo Request Information widgets. You can add any widget and any number of widgets into your sidebar. All widgets are accessible from Appearance => Widgets and easily dragged and dropped into 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 on the right hand side.
Step 3: Don’t forget to click save changes after you customize any widget in sidebar.

[Yogi] Add Sidebar Widget

In addition to default WordPress widgets, Yogi included Latest Post, Categories, Tag Cloud and Class Slider widgets. You can add any widget and any number of widgets into your sidebar. All widgets are accessible from Appearance–>Widgets and easily dragged and dropped into 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 on the right hand side.
Step 3: Don’t forget to click save changes after you customize any widget in sidebar.

[Constru] Widget on Footer

Widgets are frequently used to create sidebar or footer. Beside default WordPress widgets, Constru added number of job and resume custom widgets. To view all Widgets, navigate to Appearance > Widgets. You can drag and drop widgets from left side list into footer columns or sidebars as you want. Here is the list of Constru Custom Widget you may want to use to have sidebar and footer like in Constru demo.

Noo Category

Show all posts of one category on Blog post. Can be used in Footer for displaying title of one category.

Noo About

This widget describes some information of you team or you can upload your logo for your site. Can be used in Footer.

Noo Social

Show all social media which is used in your site. Can be used in Footer position.

Noo Location

Use this widget if you want to create list location on footer position.

[Constru] Adding Footer Widget

Please follow these steps to adding footer widget

Step 1: First make sure footer widgets are set to show, navigate Customizer–> Footer and check the option Footer Columns (Widgetized) Also set the footer columns.

Step 2: To add widgets, Navigate to Appearance–> Widgets.
Step 3: You will see 4 widget section on the right hand side, Footer Widget 1-4. Your widgets are located on the left hand side.
Step 4: Simply drag and drop the widgets you want from the left side into the sliding bar widget sections on the right side.

[Constru] Sidebar

To make it more convenient for you, we pre-made two Constru Sidebar that we used in our demo site. They are all ready to be add any posts and pages you want.

Main Sidebar: is the sidebar with Categories, Recent News and Recent Tweets widgets which being display on Blog page.
Shop Sidebar: is the sidebar with Woocommerce Product Search, Woocommerce Price, Categories and WooCommerce products widgets which being display on Shop page.

[Constru] Adding Sidebar Widget

In addition to default WordPress widgets, Constru included Constru Category, Constru Social, Constru About and Constru Custom Menu widgets. You can add any widget and any number of widgets into your sidebar. All widgets are accessible from Appearance–> Widgets and easily dragged and dropped into 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.

Here is screenshot that show various areas of the widget section described above:

[Constru] Create Sidebar

How to create sidebar for Constru

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.

Woocommerce

[Constru] Product Settings

Heading Background Image: This option will help you choose image for background heading of product. If leave it blank, the default heading image of Shop (In Customizer settings) will be used.

[Constru] Create a New Product

To create a new product, please following these steps:

Step 1: Navigate to Products in your WordPress admin sidebar.
Step 2: Click on the Add New to make a new product. Create a title, and insert your product content in the editing field. You can use any of our shortcode builder elements inside the product.
Step 3: Add Categories from the right side. To assign it to the product, check the box next to the category name.
Step 4: Add Tags from the right side. Type the name of the tag in the field.
Step 5: Select image for product by the way click button “Set featured images”. You can select image in Media Library or Upload image by your computer.
Step 6: Once you are finished, click “Publish” to save your product.

Dreamer

Firstly we would love to send our great thanks to you for purchasing Dreamers – Charity/Multipurpose Wordpress Theme. With Dreamers, we’d want to contribute our part towards the perfect world that John Lennon described. Clean, elegant, flexible, Dreamers is designed for charity, non-profit organisations, NGO, donation, fund-raising websites to feature their Events and collect Donations. But more than that, the theme can be used for any other business thank to a large number of features and powerful theme customiser.

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, Dreamer has 7 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 Dreamer 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:

Background color: opt color for background here

Background image: Upload a background image

Background video: If this box is checked, video will be used as row background.

Has Container: if you check this box, container`s width will be 1170px

Border: The border can be None, Top, Right, Left, Bottom, Vertical or Horizontal.
Padding Top/ Bottom: You can set Padding Top and Bottom here

1. Noo Events

This shortcode is used to create Event Grids and List page
Title: Enter a title here
Show Archive Link: Select Show or Hide the link
Style: There are 2 styles that are List and Grid. If you are partial to Grid then you will have an extra option called Grid Columns (choose the number of shown columns)
Categories/Locations: Select categories/locations that will be shown
Posts per page: the number of posts is displayed per page
Show pagination: select show or hide pagination
Event status: Select event statuses in the drop-down list (All/ Upcoming/ Past events
Order Events By: Start Date (the date on which events start) or Added Date
Order Direction: Descending (Newest) or Ascending (Oldest)

2. Noo Causes

It is one of the shortcodes used to create Home page
Title: Enter a title
Show Archive Link: Choose Show or Hide Archive Link
Style: There are 3 styles that are Grid, List and Slider
Categories: Select cause categories in the drop-down list
Locations: Select cause location in the drop-down list
Posts per page: Enter a number of shown posts per page
Excerpt Length: The number you enter here is equal to the number of words contained in the excerpt
Show Pagination: Choose Show or Hide this one (this option is only used for Grid and List Style)
When you choose Grid style, you will have options like
Grid Columns: Choose number of shown columns

3. Noo Recent News

This shortcode is used in building Homepage
Title: Enter a title here
Column: Choose the number of shown columns. It fluctuates between 2 and 4
Posts per page: The number of posts is displayed per page
Excerpt length: Excerpt is a short paragraph taken from a post. The number you enter here is equal to the number of words included in the excerpt

4. Noo Event Calendar

This one is used to create Events Page
Visibility: Choose devices on which this section is displayed or hidden
Class: Enter a unique class name

5. Noo Staff

It is one of the shortcodes used to build Our Staffs Page
Title: Enter a title here
Show Archive Link: Choose Show/Hide Archive Link
Categories: Choose staff categories in the drop-down list
Grid Columns: Choose the number of shown columns
Posts per page: the number of posts is displayed per page
Show pagination: Choose Hide or Show the pagination

6. Event Slider

This one is used to build homepage

Event Slider setting
Animation: Choose Slide or fade
Slide Time/ Speed/ Height: Set a number in these sections
Auto Play Slider: Check this box so that the slider can play automatically
Show Slide Indicator: Tick this box to show this one
Show Previous/ Next Navigation: Check this box to show previous

Event Slide settings:
Background Type: There are 2 types of background. If you pick Featured Image, the image will be the featured one set in each event post. Meanwhile, if you choose Custom image, you will have an extra option to upload an image
Event: Select an event in the drop-down list

7. Cause Slider

This shortcode is used to create Home Cause page
Animation: Slide or Fade
Slide Time/ Height/ Speed: You can set time, height and speed for the slide
Auto Play Slider: Tick this box so that slider can play automatically
Show Slide Indicator/ Previous/ Next Pagination: Tick these boxes to show corresponding items
Cause Slide settings:
Background Type: Choose Featured image that is taken form Cause posts or Custom image (you will have an extra option to upload image)
Cause: Select a cause post in the drop-down list

Weirdo - Customizer

To start using Customizer, in Admin Panel, navigate to Customizer, you will be redirected to a live preview screen where you can change options on left side and preview your site on your right side promptly. All your change will not be committed and viewed on your site until you click Save & Publish on top right of Customizer bar. You also are able to Export your settings in Customizer and Import to apply for other sites.

Let’s take a quick overview throughout all options in our Customizer. When using Customizer, you also will get our short guide for each option right in Customizer bar.

General

Custom Favicon: A favicon is a simple square image viewable in browsers for users to identify your website among many tabs. Ideally, it should be a 32×32 pixels or a 16×16 pixels image. Most modern browsers can display a favicon in PNG format but older versions of Internet Explorer may not. To make sure your favicon be shown nicely, it is recommended to be in .ico format. Add your favicon in our customizer simply by clicking “Open Library” button in “Custom Favicon“, selecting your existing image or uploading new image.

Site Layout: Choose a layout for your site. Weirdo comes with 4 layouts along with different settings: Modern, Alternative, Weirdo and Classic. As you pick a site layout from here, all other settings may vary corresponding to the layout.

Typography

In this part, you are able to customize fonts and other settings for typography on your blog. Weirdo integrated all Google Fonts for you to customize font, font size and other settings for heading and body text.

Headings: Choose fonts and font color for all headings. You can transform all headings to UPPERCASE, too.

Body Text: Choose font, size and font color for body text. You can select color of links and number of elements on your site.

Navigation Bar

Customize settings for Navigation Bar, including Search and MailChimp Subscription as well as set up your logo.

Search & Subscribe: Enable/Disable Search and Subscribe feature. You need an existing MailChimp account to have Subscription function to work properly. Enter Mailchimp API key of your account to connect to your subscriber list.

Note: To get your API key, please go to https://us3.admin.mailchimp.com/account/api/

Logo: You can choose to upload image or use text as your logo. Disable Use Image for Logo to use text logo then you can enter blog name, choose font, size and color of the logo. When enable Use Image for Logo, you will need to upload logo image. Enter your image height you want to display on navigation bar and we will do the calculation part for you to make it look great on all screen size.

Homepage

Customize your homepage settings here. Those settings will vary corresponding to layout you choose for your blog above. If you choose classic layout, this part will not be included in Customizer.

Home Slider: Home Slider comes with Modern and Alternative Layout. You can select slider to display on homepage and upload your Logo. To create a new slider, navigate to Home Slider and follow steps in SET UP HOME SLIDER section below.

Home Image: Home Image comes with Weirdo Layout. You can upload your Home Image here.

Featured Posts: Featured Slider comes with Modern Layout. When enable Show Featured Slider, Featured Posts will be shown in featured slider on top of Homepage, under Home Slider. You can choose number of featured posts displayed from 3 to 6.

Blog Content

Blog content settings vary corresponding to layout you chose in General setting.

Post List: Customize settings for your post list.

Full Text Post: When enable Full Text Post, all the post will be viewed in full content in Homepage. When disable, you can set up length of text displayed in Homepage in Excerpt Length and choose to show/hide Read More button. You are also able to choose show/hide post tags, meta and Pagination Type, including None, Next-Back Link, Load More Button or Infinite Scroll from drop down list.
Blog Layout: When choosing Classic Layout for your blog, you will have this option included in Post List setting to select blog layout as Full Width, With Right Sidebar or With Left Sidebar. You also can set which sidebar to display from drop down list.
Single Post: If you chose Classic site layout, you will be able to choose Post layout same as blog layout by checking the box beside the option or uncheck to choose another layout. For other Site Layout, Single Post layout will follow corresponding default layout.

You also can choose to show or hide Post Meta, Tags, Author’s Bio, Related Posts, Like Button and Social Sharing. In addition, by enabling Social Sharing, you enable visitors to share your post. Decide which social media your post can be shared by checking the box beside each social media.

Widgets

This section enables you to add and customize Widgets on your preview site. It can include Colophon and number of Footer Columns due to setting in next section: Footer settings.

Colophon: Colophon is a brief statement about your blog. You can add text, image or other widget by hitting Add a Widget button.

Footer Column #i: Add text, image or other widget by hitting Add a Widget button.

Footer

This section enables you to select which widgets and number of column displayed in Footer.

Colophon: Colophon contains brief statement about your blog. Enable it and you will have a widget area called Colophon to add information about your site.

Columned Footer: Set the number of columns shown in footer. You will have corresponding number of column in Footer and widget areas (called Footer Column #i) added to Widget section above.

Bottom Bar: This is the bar in bottom of the page normally to display Copyright and social icons. Enable it and enter content shown.

Social Media

Input URLs of your social media profile. Inputting URL here means that corresponding social icon will be displayed when Social Icon is enabled on Top Bar and/or on Bottom Bar.

Custom Code

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

Import/Export Settings

All themes from NooTheme share the same theme setting structure so you can export then import settings from one theme to another conveniently without any problem.

Import Settings: Click Upload button then choose a JSON file (.json) from your computer to import settings 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 Settings: 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.

Woo Commerce

To install the plugin, you can go to Plugin>Add New, search for WooCommerce and Install it. Alternatively, you can download it from here.

When you activate the plugin, you may be asked for the permission to install WooCommerce default pages. We recommend that you go through with this so that all the pages are created correctly.

After WooCommerce is activated successfully, you can use all its features, including widgets and shortcodes.

For further guide, please check WooCommerce’s official documentation.

Translation

The theme is compatible with WPML plugin, thus can be translated into multiple languages. Follow this link for guide.
You can also use POEdit plugin for translation.

Located the .po file in folder /languages.
Open the file with POEdit and translate the texts into your preferred language.
When complete, you’ll want to save the file twice, as two separate files – a .po file and a .mo file. When you save the files, you must name them according to your language code. Find a list of language codes at WordPress in your Language. As an example, the language code for English is en_EN, so you would save the translated files as en_EN.po first, then en_EN.mo.
When that’s done, simply upload the files to your theme folder.

Codestyling Localization is a good alternative for POEdit. It also works with .po/.mo files and is very easy to use.

Visual Composer Shortcodes

Dreamers is equipped with powerful shortcode set that enables you to build any layouts you can imagine of. All shortcodes can be accessed in the Visual Editor after you complete installing the theme. If you use Visual Composer to edit content, all our shortcodes were already built into its Elements.

To use shortcodes to shape your layouts in Visual Editor, open visual editing tab of a page or post in Admin Panel. In top bar of editing field, hit Noo Shortcodes icon and navigate to a shortcode you want to use. A pop up window with some attributes of the shortcode then will appear for you to make change easily. Finally, click Save to generate the shortcodes. Be noted that values of shortcodes have always to be inserted in quotation mark “ ”. Insert any shortcode you need to make up your perfect pages and posts.

Widgets

Widgets can be added to main sidebar and footer. To activate widgets, navigate to Appearance>Widgets, you will see number of available widgets. To activate a widget, drag it to a Sidebar, or Footer. You can also click on it to assign to Main Sidebar or Footer. To remove them, just drag it back. If you want to remove a widget from sidebar or footer but keep its settings, drag it to Inactive Widgets. Below are location you can add widgets to:

Main Sidebar: Main sidebar will be displayed when you choose Classic Site Layout and With Sidebar page template.

Footer Column #i: Number of Footer Column #i here depends on the number of column you set in Customizer > Footer.

In addition to WordPress default widgets, there are 6 custom widgets of the theme:

Noo Cause: shows causes by latest order or by most commented order. You can choose to show only causes in a certain category too.
Noo Cause Categories: shows all Cause categories
Noo Event: shows events by latest order or by most commented order. You can choose to show only events in a certain category too.
Noo Event Categories: shows all Event categories
Recent tweets: shows latest tweets from your Twitter account. You’ll need to enter Consumer key, Consumer Secret, Access Token and Access Token Secret. To get these keys, first you need to create a Twitter app. Go to https://apps.twitter.com/ and sign in. Click Create new app. Fill out name, description and website. Leave Callback URL empty, accept the terms and create the app. On the new page, in the middle you should now have all the keys and secrets you need.

Dreamer - Customizer

To start using Customizer, in Admin Panel, navigate to Customizer, you will be redirected to a live preview screen where you can change options on left side and preview your site on your right side promptly. All your change will not be committed and viewed on your site until you click Save & Publish on top right of Customizer bar. You also are able to Export your settings in Customizer and Import to apply for other sites.

Let’s take a quick overview throughout all options in our Customizer. When using Customizer, you also will get our short guide for each option right in Customizer bar.

Site Enhancement

Smooth Scrolling: Enable/disable the smooth scrolling feature.

Design & Layout

Site Layout: Choose Full-width or Boxed layout for your site. With Boxed layout, you will have additional below options for background setting:

Site Width: Set width of the boxed layout in regard to full-width layout

Site Max Width: Set max width of the boxed layout in any screen size.

Background Color: Choose color of background

Background Image: Upload your background image along with some settings: Background Image Repeat, Background Image Alignment, and Background Image Attachment.

Link Color: Choose color of links on your site and color when you hover in.

Typography

Custom Font: Dreamers integrated all Google Fonts. Enable Custom Font to customize font, font size and other settings for heading and body text.

Custom Font Color: Enable Custom Font Color to customize font color of headings and body

Header

Customize your settings for your Header including Navigation Bar (Logo and Navigation) and an optional Top Bar.

Navigation Bar: Control the navigation bar with all the related settings here: its position, font, link color, link hover color and more. Check the box beside Custom Dropdown Style to change background color, font size, link color and link hover color on dropdown bar.

Logo: Upload your logo image and retina one (a larger image, with double the amount of pixels that your image will be displayed at). Enter your image height you want to display on navigation bar and we will do the calculation part for you to make it look great on all screen size.

NavBar Alignment: Adjust link alignment, height of navigation bar and size of mobile navigation button.

Top Bar: Enable/disable top bar. Top bar lays on top of your site, above Navigation Bar. It is suitable for placing contact information and social media link. You can choose to display social icons, set it as a top menu or custom content by checking each option. By checking Custom Content option, you are able to add content for top bar. Choose layout to display social icon and content of top bar.

Footer

This section contains all settings for Footer in your site.

Footer Columns: Set the number of column shown in footer.

Upload Footer Logo: select a photo to be displayed at the right bottom corner of the footer.

Bottom Bar Content: Add content shown in bottom bar.

Widgets

You can create widgets with various type of contents to put in the footer. To create a widget, click Add a Widget.

Blog

Blog Layout: Choose page layout for your blog page. It can be full-width, with right sidebar or left sidebar. If you choose layout with sidebar, select blog sidebar for your blog.

Blog Sidebar: Choose a sidebar for your blog pages.

Single Post: Choose Post layout same as blog layout by checking the box beside the option or uncheck to choose another layout. You also can choose to show or hide Post Meta, Tags and Author’s Bio. In addition, by enabling Social Sharing, you enable visitors to share your post. Enter Social Sharing Title and decide which social media your post can be shared.

Cause/Event

Cause/Event page: Assign a page as Cause/Event listing page. Once you chose a page as Cause/Event Page, its slug will be your Cause/Event’s main slug.

Cause/Event List Layout: Choose page layout for your cause/event page. It can be full-width, with right sidebar or left sidebar. If you choose layout with sidebar, select cause sidebar for your cause/event page.

Cause/Event List Sidebar: Choose a sidebar for your cause/event pages.

Cause/Event List Style: Choose between List or Grid Style.

Single Cause/Event: Choose Single Cause/Event layout same as Cause/Event page layout by checking the box beside the option or uncheck to choose another layout. In addition, by enabling Social Sharing, you enable visitors to share your cause/event. Enter Social Sharing Title and decide which social media your cause/event can be shared.

Portfolio

Portfolio page: Assign a page as Portfolio page. Once you chose a page as Portfolio Page, its slug will be your Portfolio’s main slug.

Grid Columns: select the number of columns.

Items per page: the number of items to be shown one page.

WooCommerce

Shop Layout: Choose page layout for your shop page. It can be full-width, with right sidebar or left sidebar. If you choose layout with sidebar, select cause sidebar for your shop page.

Shop Sidebar: Choose a sidebar for your shop pages.

Products per page: the number of items to be shown one page.

Single Product: Choose Single Product layout same as Shop page layout by checking the box beside the option or uncheck to choose another layout.

Custom Code

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

Import/Export Settings

All themes from NooTheme share the same theme setting structure so you can export then import settings from one theme to another conveniently without any problem.

Export Settings: 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.

Dreamer - Portfolio

With Dreamers’ built-in Portfolio, you can showcase your images, sliders, videos or links in a clean, simple grid layout.
To add new item, go to Portfolio>Add New.
• Enter Item name.
• Set Project Category.
• Select Media Type: specify whether your item is an Image, a Link, a Video or a Gallery.
• Media Data: Depending on the item’s type, the options in this section will vary. For example, if the Media Type is Link, you’ll get a meta-box to insert URL, if it’s Video, then you’ll get to insert video URL or embedded code, and so on.

Dreamer - Donation Settings

To change Currency and Payment settings, go to in Donation>Settings
• Area Unit: enter the unit that follows the area number.
• Currency: choose a currency.
• Currency Position: choose how the currency symbol is associated with the price number.
• Thousand Separator: Enter the mark that separates groups of thousands.
• Decimal Separator: Enter the mark that separates the integer part from the fractional part of the price number.
• Number of Decimals: the number of digits that follows decimal separator.
• Donate Modal Header Image: Select a picture to display as the Donate Modal Header Image.
• Donate Money Options: Enter 4 suggested donation amounts to display on the Donate Modal.
• PayPal Merchant Account (ID or Email): enter the ID or email address of your Paypal account.
• Enable PayPal Sandbox Testing: enable this when testing payment.
• Disable SSL secure connection (Not recommended): We recommend that you only disable this if your host has problem with SSL secure connection.
• Email for sending payment notification: insert the email address where payment notifications are sent to.
After everything is set, click Save Changes.

Add Staff

To add a New Staff, go to Staffs>Add New Staff

Enter Staff name.
Add description about the staff in the content section.
Set staff’s picture in Featured Image The image should be 237px width at minimum.
Select Staff category
Settings: fill in the details about the staff.

After everything is set, click Publish or Update.

Add Cause

To add a New Cause, go to Causes>Add New Cause

Enter Cause name.
Add description about the cause in the content section.
Set cause’s image in Featured Image The image should be 770px width at minimum.
Select Cause category
Cause Settings: insert the Adress/Location of the Cause and the Goal Amount (note: the money currency can be changed in Settings>Donate Settings)
File upload: upload a PDF document about the event if any.
Place in map: place a pin where the event takes place on Google map.

After everything is set, click Publish or Update the cause.

Add Event

To add a New Event, go to Events>Add New Event

Enter Event name.
Add description about the event in the content section.
Set event’s image in Featured Image The image should be 770px width at minimum.
Select Event category
Event Settings: fill in the details of the event.
File upload: upload a PDF document about the event if any.
Place in map: place a pin where the event takes place on Google map.

After everything is set, click Publish or Update the event.

Event Listing Page

An event listing page with the slug …/events is automatically generated when you add new events. You can customize its layout and style by navigating to Customizer>Event>Event page. After you are done, simply add the page to the menu.

You can also assign any other page as Event listing page, once you do, its slug will be your Event’s main slug.

Donation

Dreamer - Donation Settings

Extras

Dreamer Shortcodes

Beside regular Visual Composer shortcodes, Dreamers has custom shortcodes designed specifically for its purpose. To use these shortcodes, switch to Visual Composer’s Backend Editor, click Add Element button select Dreamer tab, then choose the shortcode you want.

Noo Events

This shortcode is used to create a list/grid of all recent events.

Noo Causes

This shortcode is used to create a list/grid of all recent causes.

Noo Recent News

This shortcode is used to create a grid of all recent posts.

Noo Staff

This shortcode is used to create a grid of all staff. To use it to create Staff listing page, please check Set up your pages>Staff listing page section.

Event Slider

This shortcode is used to create a slider featuring any event.

Cause Slider

This shortcode is used to create a slider featuring any cause.

Woo Commerce

To install the plugin, you can go to Plugin>Add New, search for WooCommerce and Install it. Alternatively, you can download it from here.

When you activate the plugin, you may be asked for the permission to install WooCommerce default pages. We recommend that you go through with this so that all the pages are created correctly.

After WooCommerce is activated successfully, you can use all its features, including widgets and shortcodes.

For further guide, please check WooCommerce’s official documentation.

Translation

The theme is compatible with WPML plugin, thus can be translated into multiple languages. Follow this link for guide.
You can also use POEdit plugin for translation.

Located the .po file in folder /languages.
Open the file with POEdit and translate the texts into your preferred language.
When complete, you’ll want to save the file twice, as two separate files – a .po file and a .mo file. When you save the files, you must name them according to your language code. Find a list of language codes at WordPress in your Language. As an example, the language code for English is en_EN, so you would save the translated files as en_EN.po first, then en_EN.mo.
When that’s done, simply upload the files to your theme folder.

Codestyling Localization is a good alternative for POEdit. It also works with .po/.mo files and is very easy to use.

Visual Composer Shortcodes

Widgets

Main Sidebar: Main sidebar will be displayed when you choose Classic Site Layout and With Sidebar page template.

Footer Column #i: Number of Footer Column #i here depends on the number of column you set in Customizer > Footer.

In addition to WordPress default widgets, there are 6 custom widgets of the theme:

Noo Cause: shows causes by latest order or by most commented order. You can choose to show only causes in a certain category too.
Noo Cause Categories: shows all Cause categories
Noo Event: shows events by latest order or by most commented order. You can choose to show only events in a certain category too.
Noo Event Categories: shows all Event categories
Recent tweets: shows latest tweets from your Twitter account. You’ll need to enter Consumer key, Consumer Secret, Access Token and Access Token Secret. To get these keys, first you need to create a Twitter app. Go to https://apps.twitter.com/ and sign in. Click Create new app. Fill out name, description and website. Leave Callback URL empty, accept the terms and create the app. On the new page, in the middle you should now have all the keys and secrets you need.

Footer

The Footer is composed of two parts that are Footer Columns or Widget area and Footer Bottom. 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 3 sidebars belonging to Footer: Noo – Footer Column #1, Noo – Footer Column #2, Noo – Footer Column #3.

1. Noo-Footer Column #1

Drag 2 Text widgets on the left to this sidebar> Click the triangle on the left of the widget > complete options > Save.

2. Noo- Footer Column #2

Drag Text and Noo Mailchimps widgets on the left side to this sidebar> Click the triangle on the left of the widget> Complete options> Save.

3. Noo- Footer Column #3

Drag Custom Menu widget on the left side to this sidebar > Click the triangle on the left of the widget > Complete options > Save
Options of Custom Menu widget are:
Title: Enter a title here
Select Menu: Choose a menu in the drop-down list and this menu is created in Appearance> Menus

Header

Set Up Menu

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

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

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

Installation

Update Theme

Automatic Update

Please follow these steps to update theme:

Step 1: Hover into username then choose Download
Step 2: Select “License certificate and purchase code”
Step 3: In Admin Panel, choose Settings, click “NOO Dreamer License”. You will see the message Please enter your license key to enable updates to NOO Dreamer.
Step 4: Enter code into License key

Dreamer Installation

There are 2 ways to install the theme. It is up to you to choose your preference.

Installation via WordPress: all you need to do is simply to login to your WordPress Admin Panel, navigate to Appearance > Themes, click Install Themes on the top then hit “Upload” Find “noo-dreamer.zip” file on your computer and click “Install Now”. You have done. Just wait for the theme to be uploaded and installed.

Note: If you see this message “Are You Sure You Want To Do This” when installing noo-dreamer.zip file via WordPress, it means that you have an upload file size limit. Try to install the theme via FTP instead, or contact your host to increase the limit.

Installation via FTP: this way of installing take a little more action, but not much of course. First, login to your FTP account. Extract the noo-dreamer.zip file then upload ONLY the unzipped folder to wp – content/themes You have just done installing.

Download Dreamer Package

When purchasing successfully 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 contains:

Dreamer Theme File: Includes noo-dreamer.zip file that consists of everything you need to install the theme.
Document Folder: Includes Dreamer Documentation file that helps you get to know about Dreamer and guides you to build your site with our theme.
Licensing Folder: Includes the licensing files of Themeforest purchase.
Demo Content Folder: Includes the .xml file you will need to import our demo data.

Pages

Contact Page

Here is image of shortcodes used to create Contact Page

♣ It has a Row shortcode whose style is 2 columns (2/3+1/3)
♣ The first column comprises a Google Maps, a Map and 2 Text Block shortcodes
♣ The second one includes a Text Block, Gap and Contact Form 7 shortcode

Our Staffs Page

Here is image of shortcodes used to create Our Staffs Page

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Staff shortcode
Title: Enter a title here
Show Archive Link: Choose Show/Hide Archive Link
Categories: Choose staff categories in the drop-down list
Grid Columns: Choose the number of shown columns
Posts per page: the number of posts is displayed per page
Show pagination: Choose Hide or Show the pagination

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.

Events Page

1. Events Grid

Here is image of the shorcodes used to create Events Grid Page

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Events shortcode
Title: Enter a title here
Show Archive Link: Select Show or Hide the link
Style: There are 2 styles that are List and Grid. If you are partial to Grid then you will have an extra option called Grid Columns (choose the number of shown columns)
Categories/Locations: Select categories/locations that will be shown
Posts per page: the number of posts is displayed per page
Show pagination: select show or hide pagination
Event status: Select event statuses in the drop-down list (All/ Upcoming/ Past events
Order Events By: Start Date (the date on which events start) or Added Date
Order Direction: Descending (Newest) or Ascending (Oldest)

2. Events List

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Events of which style is List

3. Event Calendar

Here is image of shortcodes used to create

♣ It has a Row shortcode whose style is one column
The column contains a Gap and a Noo Event Calendar shortcode
Noo Event Calendar settings:
Visibility: Choose devices on which this section is displayed or hidden
Class: Enter a unique class name

Causes Page

1. Causes Grid

Here is image of the shortcode used to create Causes Grid Page

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Noo Causes of which style is Grid

2. Causes List

♣ It has a Row shortcode whose style is one column
♣ The column includes a Noo Causes of which style is List

Home Cause

Here are images of shortcodes used to create Home Cause page

1. Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Cause Slider shortcode to which 2 Cause Slide are added
Cause Slider settings:
Animation: Slide or Fade
Slide Time/ Height/ Speed: You can set time, height and speed for the slide
Auto Play Slider: Tick this box so that slider can play automatically
Show Slide Indicator/ Previous/ Next Pagination: Tick these boxes to show corresponding items
Cause Slide settings:
Background Type: Choose Featured image that is taken form Cause posts or Custom image (you will have an extra option to upload image)
Cause: Select a cause post in the drop-down list

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣ The column includes the following shortcodes: Single Image, Text Block, Gap and Button 1

Display of Red Row 2 on the site

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column includes a Noo Causes shortcode

4. Red Row 4

♣ It has a Row shortcode whose style is one column
♣ The column comprises the following shortcodes: Text Block and a Row shortcode of which style is 3 columns
♣ Each column contains an Icon and a Text Block

Row settings

5. Red Row 5

♣ It has a Row shortcode whose style is one column
♣ The column contains three shortcodes: Text Block, Gap and Noo Causes

Display of Red Row 5 on the site

6. Red Row 6

♣ It has a Row shortcode whose style is one column
♣ The column includes a Responsive Slider to which 3 Slide shortcodes are added

7. Red Row 7

Shortcodes of Red Row 6 are the same as those of Red Row 7

Row settings

8. Red Row 8

♣ It has a Row shortcode whose style is one column
♣ The column contains 3 shortcodes: Text Block, Gap and Noo Recent News

9. Red Row 9

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Call To Action shortcode

Row setitngs

Home Page

Here are images of shortcodes used in building Home Page

1. Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column contains an Event Slider shortcode to which 3 Event Slide shortcodes are added
Event Slider setting
Animation: Choose Slide or fade
Slide Time/ Speed/ Height: Set a number in these sections
Auto Play Slider: Check this box so that the slider can play automatically
Show Slide Indicator: Tick this box to show this one
Show Previous/ Next Navigation: Check this box to show previous

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣ The column comprises the following shortcodes: Single Image, Text Block, Gap, Text Block, Gap and Button

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Cause shortcode
Title: Enter a title
Show Archive Link: Choose Show or Hide Archive Link
Style: There are 3 styles that are Grid, List and Slider
Categories: Select cause categories in the drop-down list
Locations: Select cause location in the drop-down list
Posts per page: Enter a number of shown posts per page
Excerpt Length: The number you enter here is equal to the number of words contained in the excerpt
Show Pagination: Choose Show or Hide this one (this option is only used for Grid and List Style)
When you choose Grid style, you will have options like
Grid Columns: Choose number of shown columns

4. Red Row 4

♣ It has a Row shortcode whose style is one column
♣ The column contains the following shortcodes: Text Block and a Row shortcode whose style is 3 columns.
♣ The first column comprises Icon, Text Block and Raw HTML
♣ The second and third ones include Icon and Text Block

5. Red Row 5

♣ It has a Row shortcode whose style is one column
♣ The column contains the following shortcodes: Text Block, Gap and Noo Causes

6. Red Row 6

♣ It has a Row shortcode whose style is one column
♣ The column contains a Responsive Slide shortcode to which 3 Slide shortcodes are added

Row settings

7. Red Row 7

♣ Shortcodes of Red Row 7 are similar to those of Red Row 6

8. Red Row 8

♣ It has a Row shortcode whose style is one column
♣ The column contains the following shortcodes: Text Block, Gap and Noo Recent News
Noo Recent News settings:
Title: Enter a title here
Column: Choose the number of shown columns. It fluctuates between 2 and 4
Posts per page: The number of posts is displayed per page
Excerpt length: Excerpt is a short paragraph taken from a post. The number you enter here is equal to the number of words included in the excerpt

9. Red Row 9

♣ It has a Row shortcode whose style is one column
♣ The column contains a Call to Action shortcode

Row settings

Dreamer - Contact Page

After importing demo data, you’ll see the Contact page in Pages>All pages. Click Edit page and replace the dummy data with your information.

Google map:

Adress:

Contact form: click Edit Contact form. Select a contact form from the dropdown list. To edit or create new contact form, navigate to Contact tab on WP Menu. For detailed guide, please check Contact 7 documentation.

After everything is set, update the page.

Dreamer - Page Settings

You can choose various settings for your page in this box.

Body Custom CSS Class: Add custom CSS class to <body> element.

Hide Page Title: Uncheck to hide Page title.

Enable Menu Transparent: option to make the menu transparent. If checked, you’ll have to upload a new logo to display on the menu, as the default logo inserted in Customizer>Header logo is use for non-transparent menu only.

Revolution Slider (only available if plugin is installed): Select Slider to be displayed on your site or just set No Slider if you don’t need a slider for your page.

Home Slider: enable this option if you want to set up a header for the page. Page header can be slider or video background.

Dreamer - Homepage

After importing demo data, you’ll see 2 Home pages in Pages>All pages. One is Homepage with Event slider, the other is Homepage with Cause Slider. They are made entirely by Shortcodes and HTML. Click Edit page and modify any element as you wish. We recommend that you switch to Visual Composer’s Backend Editor for a visualized interface.

After everything is set, Publish or Update the page.

To assign a page as default Homepage, navigate to Settings>Reading, in Front page displays section, check A static page, then select a page from the dropdown list. Save changes.

Create new page

You may need a page such as About or Contact page. We also did some change to the default WordPress page setup by adding some page templates and preset options for you to build your page fluidly.

Please follow these steps to create your pages:

Step 4: Start editing your page content in the editing field.

Step 5: Make other settings for the page in meta-boxes under the editing field. Once you get your settings done, click Publish your page.

Cause Listing Page

A cause listing page with the slug …/causes is automatically generated when you add new causes. You can customize its layout and style by navigating to Customizer>Cause>Cause page. After you are done, simply add the page to the menu.

You can also assign any other page as Cause listing page, once you do, its slug will be your Cause’s main slug.

Event Listing Page

You can also assign any other page as Event listing page, once you do, its slug will be your Event’s main slug.

Portfolio

Dreamer - Portfolio

Post Types

Dreamer contains 3 kinds of Post Types that are Blog post, Causes and Staff

1. Blog Post

It is obvious that blog posts will be shown on Blog page In Admin panel, please go to Posts. You can see subordinate parts like All posts (to see all created posts), Add New (to create a new post), Categories (to classify posts) and Tags (to classify posts but in a more specific way, tags can be keywords that are indicated in a post).When you intended to create posts, you had surely thought of generating all categories for posts. So we will begin with building categories:

Adding a new category is very easy: enter name of category and click on Add New Category button

Add A New Post

2.Causes

Add A New Cause Location
Go to Causes> Cause Location> enter a new location in Name section> Click Add New Cause Location
Add A New Cause Category
Go to Causes> Cause Category> enter a new category in Name section> Click Add New Cause Category
Add A New Cause
Step 1: Go to Causes> Add A New Cause> Enter title, content.
Step 2: Complete options of Cause Settings
Goal Donate: Enter a number that is equal to the targeted sum of email
Address: Enter an address
Custom Donate Link: Enter a donate link which directs users to the donation form. Leave it blank to use the default donation form.
PDF File: Enter a download link so that users can download the PDF file
Step 3: On the right side, you will complete options like Cause Category, Cause Location, Upload a featured image
Step 4: Click on Publish button

3. Staff

Add A New Staff Category
Go to Staff> enter a new staff category in Name section > Add New Staff Category
Add A New Staff
Step 1: Go to Staff> Add New Staff> Enter title and content
Step 2: Complete options such as Position (Position of the staff), Email, Mobile, Social – Twitter, Social – Facebook, Social – Google Plus, Social – LinkedIn.
Step 3: On the right side, choose a Staff Category, upload a featured image then click on Publish button

Posts

Add Staff

To add a New Staff, go to Staffs>Add New Staff

Enter Staff name.
Add description about the staff in the content section.
Set staff’s picture in Featured Image The image should be 237px width at minimum.
Select Staff category
Settings: fill in the details about the staff.

After everything is set, click Publish or Update.

Add Cause

To add a New Cause, go to Causes>Add New Cause

Enter Cause name.
Add description about the cause in the content section.
Set cause’s image in Featured Image The image should be 770px width at minimum.
Select Cause category
Cause Settings: insert the Adress/Location of the Cause and the Goal Amount (note: the money currency can be changed in Settings>Donate Settings)
File upload: upload a PDF document about the event if any.
Place in map: place a pin where the event takes place on Google map.

After everything is set, click Publish or Update the cause.

Add Event

To add a New Event, go to Events>Add New Event

Enter Event name.
Add description about the event in the content section.
Set event’s image in Featured Image The image should be 770px width at minimum.
Select Event category
Event Settings: fill in the details of the event.
File upload: upload a PDF document about the event if any.
Place in map: place a pin where the event takes place on Google map.

After everything is set, click Publish or Update the event.

Sidebars&widgets

Sidebars and Widgets

Dreamer 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 then you can choose a sidebar you want to display from Sidebar dropdown list on the right side. 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

Add Widgets to A Sidebar

1. Cause Sidebar

This sidebar is shown on Causes Page
Drag Noo Cause Categories, Recent Tweet and Noo Cause widgets on the left side to this sidebar> Click the triangle on the right side of widgets> complete options> Save

2. Event Sidebar

♣ This sidebar is shown on Events Page
♣ Drag Search, Calendar, Noo Event Categories, 2 Noo Event widgets to this sidebar> Click the triangle on the right side of widgets> complete options> Save

3. Main Sidebar

♣ This sidebar is displayed on Blog page
♣ Drag Noo Mailchimps, Search, Calendar and Tag Cloud widgets to this sidebar> Click the triangle on the right side of widgets> complete options> Save

4. Shop Sidebar

♣ This sidebar is shown on Shop page
Drag Woocommerce Cart/ Layered Nav/ Product Categories/ Price Filter/ Product Search/ Product Tags/ Recently Viewed/ Recent Reviews/ Top Rated Products to this sidebar

Theme Customizer

Import/Export settings

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.

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: The layout can be Full-width, With Left or Right Sidebar
Shop Sidebar: Choose a shop sidebar in the drop-down list
Products Per Page: The number of products is shown per page

2. Single Product

Check Same as Shop Layout so that the layout of single product page is similar to that of product page

Portfolio

Portfolio Page: Set a page to be Portfolio page
Show Portfolio Filters: Check this box to show portfolio filters
Grid Columns: select the number of shown columns
Items Per Page: The number of items is displayed per page

Event

1. Event List

Event Page: Set a page to be Event Page in the drop-down list
Event List Layout: The layout can be Full-width, With Left or Right Sidebar
Event List Sidebar: Choose an event sidebar in the drop-down list
Event List Style: The style can be Grid or List
Order Events By: The events can be arranged according to Start Date or Added Date
Order Direction: The direction is Descending (Newest) or Ascending (Oldest)
Hide Past Event: Turn this button on to hide past events

2. Single Event Layout

Single Event Layout: Tick Same as Event List Layout box so that layout of single events is similar to the event list
Moreover, you can select media via which single events are shared

Cause

1. Cause List

Cause Page: Set a page to be Cause Page in the drop-down list
Cause List Layout: The layout is Full-with, With Left or Right Sidebar
Cause List Sidebar: Choose a sidebar for the Cause List Page in the drop-down list
Cause List Style: The style can be Grid or List. If you are interested in Grid, you will have an extra option like Grid Columns (the number of columns can be Two or Three)

2. Single Cause

Single Cause Layout: Tick Same as Cause List Layout box so that layout of single causes will be the same as that of Cause List
Besides, you can select media via which single causes will be shared.

Blog

1. Post List

Blog Layout: The layout of Post list is Full-width , With Right Sidebar or With Left Side bar. Choose the first style if you do not want sidebar to be displayed on Blog page. In contrast, the last ones will let sidebar be shown on the page
Blog Sidebar: choose a sidebar that will be shown on Blog page
Show Post Meta, Show Readmore Link: Tick these boxes to show these items
Excerpt length: the number entered is equal to the number of words included in the excerpt

2. Single Post

Post Layout: Tick this box so that single posts have the same layout as Post list. Uncheck to opt another layout.
Enable Related Post: Turn this button on then related posts will be shown
Show Post Tags, Show Author`s Bio: Tick these boxes to show these items on each post
Enable Social Sharing: Enable/Disable Social Sharing. If enable, you enable visitors 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 Noo-Footer Column #.

Footer

Footer Columns: Choose the number of shown columns
Bottom Bar Content (HTML): Add content to the bottom bar of footer

Header

1. Navigation Bar

NavBar Position: Position of NavBar includes Static Top and Fixed Top. Static Top, in this case, the NavBar does not move. It means that when you scroll down on the page and let the mouse pass the NavBar, you will not see the NavBar displayed on top. However, Fixed Top will allow you to see the NavBar when you scroll down the mouse.
Show Donate Button: Turn this button on to show donate button on the navigation bar
Custom Donate Link: Incorporate link of
Show Shopping Cart: Turn this button on to show shopping cart on the navigation bar
Use Custom Navbar Font and Color: Enable this button to change NavBar Font, Size, Link Color and Link Hover Color
Transform to Uppercase: Tick this box so that font of menu items will be in Uppercase.

2. Logo

Dreamer 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 Blog name (site name), select logo font from Google font, font size, font color, uppercase or lowercase for text logo. If turning on this button then you can upload logo, a retina logo shown on mobile and change its height.

3. NavBar Alignment

You can make adjustments to NavBar Height, NavBar Link Spacing and Mobile Icon Size

4. Top bar

Enable Top Bar: Turn this button on so that you will have extra options like
Custom Content (HTML): Add content here
Show Search box: Tick this one to show search box on the top bar

Typography

You can customize your Typography settings here. Carle integrated all Google Fonts. See font preview at Google Fonts

1. Custom Fonts and Custom Font Color

Use Custom Fonts, Custom Font Color: Enable these buttons 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> which are in uppercase

3. Body

Body font: Choose a body font in the drop-down list
Font size: Opt a font size
Font Color: Select a font color

Design and Layout

1. Site Layout

Site Width, Site Max Width: these options handle width of the site
Background color, Background Image: If you opt yellow for background, background of your site will be filled with this color. However, when you set up background image, background of the site will be replaced with a new image.
Background repeat: Background Repeat will work effectively if you use patterned background image. When you let the image repeated, its copies will cover the whole background.

2. Color

You can select a color for links and various elements of your site

Site Enhancement

• Custom Favicon: A favicon is a simple square image viewable in browsers for users to identify your website among many tabs. Ideally, it should be a 32×32 pixels or a 16×16 pixels. Most modern browsers can display a favicon in PNG format but older versions of Internet Explorer may not. To make sure your favicon be shown nicely, it is recommended to be in .ico format. Add your favicon in our customizer simply by clicking “Open Library” button in “Custom Favicon”, selecting your existing image or uploading new image.

• Enable Mailchimp subscribe: Turn off this button, Mailchimp subscribe part in Footer will disappear. If you turn on it then you will have an extra option, Mailchimp settings, to enter API key.

Learn more about showing Mailchimp subscribe in Footer:
Maichimp documentation

Menus

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

Dreamer - Customizer

To start using Customizer, in Admin Panel, navigate to Customizer, you will be redirected to a live preview screen where you can change options on left side and preview your site on your right side promptly. All your change will not be committed and viewed on your site until you click Save & Publish on top right of Customizer bar. You also are able to Export your settings in Customizer and Import to apply for other sites.

Let’s take a quick overview throughout all options in our Customizer. When using Customizer, you also will get our short guide for each option right in Customizer bar.

Site Enhancement

Smooth Scrolling: Enable/disable the smooth scrolling feature.

Design & Layout

Site Layout: Choose Full-width or Boxed layout for your site. With Boxed layout, you will have additional below options for background setting:

Site Width: Set width of the boxed layout in regard to full-width layout

Site Max Width: Set max width of the boxed layout in any screen size.

Background Color: Choose color of background

Background Image: Upload your background image along with some settings: Background Image Repeat, Background Image Alignment, and Background Image Attachment.

Link Color: Choose color of links on your site and color when you hover in.

Typography

Custom Font: Dreamers integrated all Google Fonts. Enable Custom Font to customize font, font size and other settings for heading and body text.

Custom Font Color: Enable Custom Font Color to customize font color of headings and body

Header

Customize your settings for your Header including Navigation Bar (Logo and Navigation) and an optional Top Bar.

NavBar Alignment: Adjust link alignment, height of navigation bar and size of mobile navigation button.

Footer

This section contains all settings for Footer in your site.

Footer Columns: Set the number of column shown in footer.

Upload Footer Logo: select a photo to be displayed at the right bottom corner of the footer.

Bottom Bar Content: Add content shown in bottom bar.

Widgets

You can create widgets with various type of contents to put in the footer. To create a widget, click Add a Widget.

Blog

Blog Layout: Choose page layout for your blog page. It can be full-width, with right sidebar or left sidebar. If you choose layout with sidebar, select blog sidebar for your blog.

Blog Sidebar: Choose a sidebar for your blog pages.

Cause/Event

Cause/Event page: Assign a page as Cause/Event listing page. Once you chose a page as Cause/Event Page, its slug will be your Cause/Event’s main slug.

Cause/Event List Sidebar: Choose a sidebar for your cause/event pages.

Cause/Event List Style: Choose between List or Grid Style.

Portfolio

Portfolio page: Assign a page as Portfolio page. Once you chose a page as Portfolio Page, its slug will be your Portfolio’s main slug.

Grid Columns: select the number of columns.

Items per page: the number of items to be shown one page.

WooCommerce

Shop Layout: Choose page layout for your shop page. It can be full-width, with right sidebar or left sidebar. If you choose layout with sidebar, select cause sidebar for your shop page.

Shop Sidebar: Choose a sidebar for your shop pages.

Products per page: the number of items to be shown one page.

Single Product: Choose Single Product layout same as Shop page layout by checking the box beside the option or uncheck to choose another layout.

Custom Code

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

Import/Export Settings

All themes from NooTheme share the same theme setting structure so you can export then import settings from one theme to another conveniently without any problem.

Export Settings: 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.

Woocommerce pages

Woocommerce Pages

After Woocommerce plugin is installed, it creates the following new pages:

Cart
Checkout
My account
Shop page

Learn more about Woocommerce pages:

http://docs.woothemes.com/document/woocommerce-pages/

Yet if it is unfortunate that those pages are not automatically created, you can do the following steps to build them:

1. Cart Page

2. Checkout Page

3. My account

4. Shop Page

• Navigate to Pages > Add New
• Enter title, Shop
• Opt Default Template in Page Attributes on the right side.
• Click on Publish button

Emigo

Customizer

Import/Export settings

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.

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.

Social Media

Input URLs of your social media here so that the corresponding social icons will be displayed if Social Icon is enabled on Top Bar or Bottom Bar

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
Shop Default View Style: The style can be Grid or List
Products Grid Columns: The number of columns is displayed
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.
Product Sidebar: Choose a sidebar that will be shown on the single product page
Related Products Count: The number of related products is shown.

Blog

Making some changes in this section will have some impacts on Post list and each post on Blog page

1. Post List

Blog Sidebar: choose a sidebar that will be shown on Blog page

Excerpt Length: Excerpt is a short paragraph or an extract taken from the blog post. The number you enter here is corresponding to the number of words included in this excerpt.

Show Readmore Link/ Post Meta/ Post Tags: Tick boxes to show these items

2. Single Post

Post Layout: Tick this box so that single posts have the same layout as Post list. Uncheck to opt another layout.
Show Post Tags, Post Meta, Show Author`s Bio: Tick these boxes to show these items on each post
Enable Social Sharing: Enable/Disable Social Sharing. If it is enabled, visitors can 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 Sidebar One, Menu Sidebar Two, Menu Sidebar Three, Noo Footer Top, Noo-Footer Column #.

Footer

Footer Columns: Select the number of columns that will be shown in footer
Footer Bottom Content In Left: Enter content that will be displayed on the left side of footer section
Footer Bottom Content In Right: Enter content that will be shown on the right side of footer section

Header

1. Header Style

There are 4 types of Header

♣ Header Fullwidth Transparent

♣ Header Classic Transparent

♣ Header Business

♣ Header Classic

2. Navigation Bar

NavBar Position: Position of NavBar includes Static Top, Fix When Scroll To 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. Meanwhile, Fix When Scroll To Top will allow you to see the NavBar when you scroll the mouse to the top.
NavBar Link Spacing: You can change NavBar Link Spacing here
Use Custom NavBar Font and Color: Turn on this button to change NavBar Font and Color. Then you can change NavBar Font, Font Size, Link Color, Link Hover Color.
Transform to Uppercase: Tick this box so that Header font will transform into Uppercase.

3. Logo

Emigo allows you to add image file or use text for logo. If turning off Use image for Logo button, you will have options to enter your site name, select logo font from Google font, font size, font color, uppercase for text logo. If turning on this button then you can upload an image and change its height.

4. Top Bar

Text On Top Left: Texts entered in this section will only be shown if you select Header Classic Transparent
Facebook/ Twitter/ Google Plus/ Pinterest URL: Enter link of these social media
Text On Top Right: Enter texts that will be displayed at the right top

Typography

You can customize your Typography settings here. Organici integrated all Google Fonts. See font preview at Google Fonts

1. Headings

Use Custom Headings Font: Turn this button on so that you will have extra options to change Headings font and color
Transform to Uppercase: If you tick this box, headings such as <h1><h2><h3> will be in uppercase

2. Body

Use Custom Font Body: Turn this button on in order that you can make adjusments to Body font, Font color and Font size

Design and Layout

1. Site Layout

You can set Style & Layout for your site. Emigo is equipped with two layout styles including: Boxed Layout and Fullwidth layout.

2. Color

You can select a color for links and various elements of your site

Menus

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

Site Identity

Footer

The Footer is composed of two parts that are Footer Columns or Widget area and Footer Bottom. 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 widget on the left side to this sidebar> click triangle icon on the right side of the widget > complete options > Save

2. Noo-Footer Column #2

Drag Custom Menu widget on the left side to this sidebar> click the triangle icon on the right of the widget> complete options (select About menu that is created in Appearance> Menu) > Save

3. Noo-Footer Column #3

Drag Custom Menu widget on the left side to this sidebar> click the triangle icon on the right of the widget> complete options (Select Account menu) > Save

4. Noo-Footer Column #4

Drag Noo Instagram widget on the left side to this sidebar> click the triangle icon on the right of the widget> complete options > Save

header

Mega Menu

Emigo 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

1. 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 3.

Step 3: Regarding Shop Page item, it is a Custom link. Therefore, you also have common options like URL, Navigation, Title Attribute 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.