ECONO Documentation

Introduction

Thank you for purchasing our Theme, We are so happy that you choosed ECONO for your website. Please do not forget to rate the Theme and We'll be waiting for your Feedback. It would be nice to see your comments on our product, this documentation consists of several parts and shows you how to set up and administrate your WordPress site. We did our best to make this documentation as clear as possible. However, if you have any difficulties with the our theme or any suggestions on improving the theme or the documentation, feel free to contact us via our support link: support@it-rays.net.

What Is WordPress ?

WordPress is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL. It enables you to build Websites and powerful on-line applications and requires almost no technical skills or knowledge to manage. Many aspects, including its ease of use and extensibility, have made WordPress the most popular Web site software available.

What is a WordPress Theme ?

A WordPress Theme is a skin for a website built with the WordPress CMS platform. In other words, you can easily change your WordPress Web site appearance by installing a new Theme in a few easy steps. With all its simplicity, a WordPress Theme is provided with all the necessary source files and you are free to edit or extend it the way you need

ECONO Theme Requirements

ECONO WordPress Theme requires some basic settings to work properly with no issues, and this is somehow different from many other minimal wordpress themes as it includes tons of features and options to make it easy for you to make your website as you dream with.

So below what is required for ECONO to work:

WordPress Version 4.7.3 or Higher
PHP 5.6 or higher
MySQL 5.6 or higher
Recommended PHP Configuration Limits:
- max_execution_time 180
- memory_limit 128M
- post_max_size 32M
- upload_max_filesize 32M

How To Download ECONO From ThemeForest

1. Login to your ThemeForest account and go to the "Downloads" tab.
2. Find ECONO Theme, then click Download button. You will find "All Files & Documentation" or "Installable WordPress File Only".

The Full Package.zip file includes some files and folders:

Licensing Folder
Resources Folder: wp-plugins folder: that contains all premium plugins, demo-data folder that contains all demo content and also theme options, etc...
Theme Folder: econo.zip and the child theme (econo-child.zip)

CSS Files

I'm using 2 Customizable CSS styling files in this theme.

The style.css is for the main styling, also Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

dark.css for the dark skins color.

The main style.css file contains all of the specific styling for the page. The file is separated into sections using:

/*==============================================================================
    CONTENTS:
    
    1. CSS RESET.
    2. HEADER STYLE:
        2.1. Top bar.
        2.2. Main menu.
        2.3. Top Search.
        2.4. Top Cart.
        2.5. Header Styles.
    3. THEME ELEMENTS.
    	3.1. Social Icons
    	3.2. Sliding Bar
    4. PAGE TITLES.
    5. PAGE SPECIFIC STYLES:
        5.1. widgets.
		5.3. Maintenance Mode.
		5.4. 404 Not Found.
		5.5. Blog.
		5.6. SiteMap.
		5.7. Search Results
    6. FOOTER.
    7. TYPOGRAPHY.
    8. BOXED MODE.
    9. RESPONSIVE STYLES.
============================================================================= */

Ex: If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

.top-bar {
	border-bottom: 1px #eee solid;
	background: #f4f4f4;
	text-transform: uppercase;
	font-size: 11px;
}

CSS Stylesheet files structure

this is the contents of css folder inside the theme folder.

File Name	Description
`assets/css/assets.css`	All Assets needed for Animations, Icon Fonts, etc... compressed in this file to save performance.
`assets/css/style.css`	This file contains all the necessary styling rules for the theme.
`rtl.css`	RTL right to left support.

JS Files

This theme imports 4 Javascript files.

File Name	Description
`assets/js/assets.js`	This file contains all the jquery plugins included in the theme compressed to save performance.
`assets/js/easyshare.js`	This file contains all functions responsible for Share Post Plugin.
`assets/js/script.js`	Responsible For The Main Custom jQuery Function In The Whole Site.

ECONO Theme Support

ECONO comes with 6 months of included support and free lifetime updates for your theme. Once the 6 months of included support is up, you have the opportunity to extend support coverage up to 6 or 12 months further. If you choose to not extend your support, you will still be able to submit item comments and also still have access to our online documentation and theme updates.

ECONO Theme Installation

1) Download & Organize Files

After downloading the ZIP file from ThemeForest UNIZP that file, after unzipping you see various structure of theme.

Theme/econo.zip (Root file to install wordpress theme)
Documentation (Directory which includes theme documentation file)
Licensing (File which include information about wordpress & theme under GPL liscense)
Resources (Directory which includes xml demo content file, theme options, widgets, etc...)

2) Installing Theme

A - Installing your theme via Wordpress

Login to your wordpress dashboard, go to WordPress Appearance -> Themes section.
Click on Install Themes tab.
Click on Choose File button, and select .zip theme file and click Install Now button.
If you uploading process fails due to theme broken issues, then you may refer here

Note : This method will only work if your server allows space greater than 5 MB. Usually hosting providers provides only 2 MB

B - Installing your theme via FTP

Go to the downloaded package then select Theme/econo.zip and extract it.
Copy extracted files in ECONO folder to /wp-content/themes/ECONO via FTP Clients
For example theme should be in wp-content/themes/ECONO
Follow the instruction below for activating the theme.

3) Activating Theme

Log in to the WordPress Administration Panels.
Select the Appearance panel, then Themes.
From the Available Themes section, click on the ECONO title (or ECONO screenshot) to activate.
A preview of the Theme will be shown.
To activate the Theme click the Activate ECONO link in the top right.

Plugins Installation

In order for the theme to work properly we require some extra plugins to be installed and activated via the top info message in the image below:

Demo Content Installation

A - Import Demo Content via One-Click-Install Method

This will import EVERYTHING like our main demo content (Sliders, Portfolio Grids) Automatically.

Go to your wodpress admin panel
Under Appearance tab click on ECONO, this will direct you to the theme options panel.
Click on Extras, you will find an Import Demo Data button, click it (this will import posts, categories, menus, widgets, Sliders, Portfolio Grid and Theme Options.)

B - Import Demo Content via XML DUMP Manually

Go to your wodpress admin panel
Under the Tools tab select Import
In the new page appeared select the last item "WordPress"
Find the Resources folder inside the root folder of Downloaded Package File.
Inside Resources folder open demo-data folder then choose content.xml

C - Import Plugins Data Individually

To Import sliders, RAYS Grid Plugin content, just go to these plugins in the left side of the Administration Panel and select import/export link in each plugin then import the corresponding content for each plugin from demo-data folder.

ECONO Theme Update

There are two ways to update ECONO theme, via wordpress dhashboard or via FTP.

A - Update ECONO Via WordPress Dashboard:

There are also two ways to update via dashboard:

If you want to update the theme via WordPress dashboard you need to install Envato Market Plugin that enables you to check the theme update and perform the theme updates easily just with easy steps, Just follow the steps they mention and all will be done.
Another easy way to update ECONO theme is to download and install Easy Theme and Plugin Upgrades and follow the steps that are also very easy to perform the theme and also plugins upgrade.

B - Update ECONO Via FTP:

Important Note : It is Very Important to make a backup of your theme folder and plugins folder. Also It’s very important to delete (not to replace) the old ECONO theme folder and ECONO Core plugin folders. They need deleted because if you only replace the folders, then the old files can be left on the server and the update may not work.

Let's Proceed in updating the theme:

Download the theme from themeforest as descibed above.
Log into your server using FTP and go to wp-content > themes > then you will see ECONO folder.
Backup the ‘ECONO’ theme folder by downloading it to your computer, then delete it. please note that any customizations to the theme's core files, such as PHP files will be lost unless you're using a child theme.
Now we need the theme files you’ve just downloaded. If you’ve downloaded the installable WordPress file, then you only need to extract it, but If you’ve downloaded the Full Package you must extract it then open Theme > extract the ECONO.zip file to get to the ECONO folder.
Now you can drag and drop the new ECONO theme folder into wp-content > themes folder location. Make sure the folder is named ECONO.

Plugins Update

There are two ways to update Plugins, via wordpress dhashboard or via FTP.

A - Update Plugins Via WordPress Dashboard:

As described above you can download and install Easy Theme and Plugin Upgrades and follow the steps that are also very easy to perform the plugins upgrade.

B - Update ECONO Via FTP:

Important Note : It is Very Important to make a backup of your plugins folder. Also It’s very important to delete (not to replace) the old plugin folders. They need deleted because if you only replace the folders, then the old files can be left on the server and the update may not work.

Let's Proceed in updating the Plugins:

Download the Full Package from themeforest as descibed above.
Log into your server using FTP and go to wp-content > plugins > then you will see plugins folders.
Backup the plugin folder you need to update by downloading it to your computer, then delete it.
Now we need the full package you’ve just downloaded. you need to extract it then open Resources Folder > wp-plugins > extract the plugin zip file to get to it's folder.
Now you can drag and drop the new plugin folder into wp-content > plugins folder location. Make sure the folder is named with the plugin name(Ex: ECONO-core).

Options Panel

To Navigate to the theme options and begin customizing the look and feel or your website, you can:

Log in to the WordPress Administration Panels.
Select the Appearance panel, then ECONO and you will find this:

Now Let's discuss each element in our powerfull theme options panel individually to make use of all theme features.

Top Right Buttons

Save Changes & Restore Defaults Buttons on the top right of the page.

Save Changes: After selecting your options from the theme options panel click this button to save the changes.
Restore Defaults: When you click this button, a message will appear to you, choose OK and hit the save changes button to reset the theme options to their default values or cancel this action by clicking on cancel button.

General Settings

Property	Description
`General Settings`	Choose layout: Choose the Wide or Boxed Layout of your site. Site Width: if not responsive layout type here the main container width in (%), and this will apply the fixed layout. Sidebar Width: the page sidebar width in (%). Content Padding: Top and Bottom main content padding in px. Tags Limit: Control the Number of tags that will be displayed in tags widgets. Back To Top Button: Show the back to top button at the bottom of the page when scrolling down. Smooth Scrolling: Enable / Disable the mouse wheel smooth scrolling while navigating the site. Image Placeholders: Show default image for posts that not having featured image.
`Page Loader & Animation`	Page Animation Enable / disable Page Transitions. animation In: choose how the page transition (IN) animation. animation Out: choose how the page transition (Out) animation. Animation In Duration: Select the page In animation duration in milliseconds. Animation Out Duration: Select the page Out animation duration in milliseconds. Pre-loader Style: Select a preloading style from 6 available ones ( Or Upload a custom loading image ) that appears before page completely loaded.

Styling Options

Property	Description
`Main Site Color`	Main Site color:Select the main theme color that will be applied on all elements of your site. Body Font color: Choose your new custom body font (text) color from the color picker. Body Links color: Choose new custom color for all site links from the color picker. Body Background color: Choose your new body custom background color from the color picker. Body Background Image: Select an image to use for the body background image. Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all. Background Position: This option lets you choose if the background position inside the body. Background Size: This option lets you choose if the background will fit the container width and height or not. Fixed Background: if enabled the body background image will be fixed with page scroll down. Use patterns ?: if enabled a Custom body pattern background image will be used. Pattern Background Image: Select an image from the available 10 patterns to use for the body background image.

Top Bar Settings

Property	Description
`Top Bar`	These settings let you Show / Hide top bar and also choose what to show on the left and right sides of the top bar on your site. Show top bar: Show/Hide top bar above header. Top bar left Menu: Displays one of your menus on left side. Text: Adds whatever text you want that will appear on left side. Link: Adds Link with icon that will appear on left side. Social Icons: Displays social icons with links to your social media pages on left side. Search: Adds Search Box on left side. WP Login: Displays a login / register links and welcome to guest on left side. Shopping Cart: Adds shopping cart on left side. Language Switcher (WPML): WPML language switcher menu enables user to choose his prefered language. Top bar Right Menu: Displays one of your menus on right side. Text: Adds whatever text you want that will appear on right side. Link: Adds Link with icon that will appear on right side. Social Icons: Displays social icons with links to your social media pages on right side. Search: Adds Search Box on right side. WP Login: Displays a login / register links and welcome to guest on right side. Shopping Cart: Adds shopping cart on right side. Language Switcher (WPML): WPML language switcher menu enables user to choose his prefered language.
`Styling`	Color: Choose your prefered top bar color. Full Width: Make top bar in full width. Bottom Border: Add bottom border for top bar. Hide On Small Screens Hides the top bar only when the screen is larger than 768px and smaller than 1024px.

Header Settings

Property	Description
`Header`	These settings let you choose the header options on your site. Choose header layout: Choose header layout from the 5 available styles. Full Width: Make the header full width not wrapped center in the page. Fixed: Make the header with fixed position over the page content. Position: Choose the fixed header position (Top / Bottom). Header Padding: Top and Bottom Header content padding in px. Show Search Box: Choose to show / hide the search box beside top menu. Show Cart Box: Choose to show / hide the cart box beside top menu. Left & Right Side Copyrights ? This will only apply the copyrights in the left and right side headers. Copyrights Text Text for the left, right side headers copyright.
`Styling`	These settings let you choose the header styling on your site. Text Color: Choose header links color from the color picker. Links Hover color: Choose header links hover color from the color picker. Icons color: Choose header icons color from the color picker. Background color: Choose your new custom background color from the color picker. Border Top color: Choose top header border color from the color picker. Border Bottom color: Choose bottom header border color from the color picker. Background Image: Select an image from the uploader or insert an image url to use for the header background image. Background Size: This option lets you choose if the background will fit the container width and height or not. Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all.
`Sticky Header settings`	Enable Sticky Header: Lets you choose Enable / Disable Sticky header. Dotted Nav On Scroll: Lets you choose Enable / Disable dotted navigation for the sticky header. Background color: Choose your new custom background color from the color picker. Font Color: Choose custom links color from the color picker. Show on Small Screens: Enable / Disable the sticky header on Small Screens.

Logo

Property	Description
`Logo`	Logo Position: Choose logo position (Left - Center - Right). Logo Type: Choose your Logo to be an Image / Text. Default Logo: Upload an image for the default logo. Sticky Header Logo: Upload an image for the Sticky header logo. Logo Font Family: Select the logo font family in case you choose TEXT Logo. Logo Font Size: Select the logo font size in case you choose TEXT Logo. Logo Font Weight: Select the logo font weight in case you choose TEXT Logo. Logo Text Color: Select the logo text color in case you choose TEXT Logo. Mobile Logo Font Size: Select the logo font size for mobile in case you choose TEXT Logo.
`Tagline`	Tagline Font Family: Select the Tagline font family in case you choose TEXT Logo. Tagline Font Size: Select the Tagline font size in case you choose TEXT Logo. Tagline Font Weight: Select the Tagline font weight in case you choose TEXT Logo. Tagline Text Color: Select the Tagline text color in case you choose TEXT Logo.

Property	Description
`Menu Options`	Links Color: Choose the menu links color from the color picker. Menu First Level Icons: Show / Hide main menu first level icons. Show Submenu Icons: Show / Hide sub menu icons. Show Menu Subtitles: Show / Hide menu Subtitles below the menu item link. Sub Menu Color: Background color for the sub menu.
`Menu Locations`	Add unlimited nav menu locations.

Footer

The first option is to choose the footer style from the available 5 footer styles.

Hint: Our Footer consists of 3 main blocks (Top Footer Newsletters Bar, Footer Widgets Block and Bottom Footer Bar Block)

Property	Description
`Main Footer Settings:`	Footer Style: Choose footer style from 5 pre-defined styles. Footer Width: Choose footer To be wide or boxed style. Fixed ? Make bottom fixed footer.
`Top Footer Area`	Show top footer bar Area: Show / Hide Top Footer area on your site. NewsLetter Heading: Enter the left text Heading for the newsletters. NewsLetter Text: Enter the left text for the newsletters. NewsLetter Form ID: the mailchimp newsletters form ID.
`Widgets Area`	Show footer widgets Area: Show / Hide Footer Widgets on your site. Number of Columns: The number of footer widgets columns per row. Text color: Choose Middle footer text color from the color picker. Background color: Choose your new custom background color from the color picker. Background Image: Select an image from the uploader or insert an image url to use for the Top Footer Bar background image. Background Position: This option lets you choose the background position. Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all. Background Size: This option lets you choose if the background will fit the container width and height or not.
`SubFooter Area`	SubFooter Width: Choose subfooter area To be wide or boxed style. Show Bottom footer Area: Show / Hide Footer Bottom Area on your site. Number of Columns: The number of footer widgets columns per row. Copyrights: Insert your site Copyrights. Text color: Choose Middle footer text color from the color picker. Background color: Choose your new custom background color from the color picker. Background Image: Select an image from the uploader or insert an image url to use for the Top Footer Bar background image. Background Position: This option lets you choose the background position. Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all. Background Size: This option lets you choose if the background will fit the container width and height or not.

Page Title

Property	Description
`General Settings`	Position: Choose How the page titles will be Horizontally aligned (Left - Center - Right). Custom Height: type the custom page title height in px. Page Title icon: Select page title icon from the popup to be shown in the page title block. Icon color: Choose a solid Icon color. Icon Background color: Choose a solid Icon Background color. Hide All Page Titles: Show/Hide page title in all pages.
`Typography`	Font Family: Choose Font Family for main page title. Font Size: Choose Font size for main page title. Subtitle Font Size: Choose Font size for page sub title. Font Weight: Choose Font weight for main page title.
`Styling`	Font Color: Choose a solid color for page title. Subtitle Font Color: Choose a solid color for page sub title. Text Background Color: Choose a color for the title text background. Background Color: Choose a color for the main title background. Background Image: Select an image from the uploader or insert an image url to use for the page title background image. Background Size: This option lets you choose if the background will fit the container width and height or not. Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all. Background Position: This option lets you choose the background position. Parallax Background: if enabled the body background image will be in parallax effect with page scroll down. Overlay: This option lets you make Overlay over the background image.
`Breadcrumbs`	Show BreadCrumbs: Show / hide breadcrumbs for all pages. Breadcrumbs Style: Choose Breadcrumbs from all 4 available styles. Breadcrumbs Alignment: Choose How the breadcrumbs will be Horizontally aligned (Left - Center - Right) Breadcrumbs Prefix: The text before the breadcrumbs Breadcrumbs Suffix: The text After the breadcrumbs Breadcrumbs on Mobiles: Show / hide breadcrumbs in mobiles. Background Color: Choose a color for the breadcrumbs background. Font Color: Choose a solid color for breadcrumbs text.

Typography

Property	Description
`Body`	Select the BODY font family from the font selector and also select font size, font weight and line height of all body elements EXCEPT: The Menu typography and The Headings typography are not affected by this option because they have their own settings.
`Menu`	Select the Menu font family from the font selector and also select font size, font weight and text style of menu items.
`Headings`	Select the Headings font family from the font selector and also select font size, font weight and line height of all Headings elements.
`Custom Fonts`	Upload New Font The new font will appear in the Font Family selector (Just refresh the page after saving).

Sliding Bar

Property	Description
`Settings`	Show Sliding Bar: Show / Hide the sliding bar. Position: Choose Sliding bar position to be left or right. Sliding Bar Content Push: Push the site content left, right or down when the sliding bar is shown. Select Side Bar: Select the side bar for sliding bar content from all available widgets. Sliding Bar On Mobile: Turn on to display the sliding bar on mobiles.
`Styling`	Button Color: Choose the font color of the button. Content Padding: Top and Bottom Sliding bar content padding in px. Background Image: Select an image from the uploader or insert an image url to use for the Sliding bar background image. Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all. Background Position: This option lets you choose if the background position inside the body. Background Size: This option lets you choose if the background will fit the container width and height or not. Headings Color: Choose solid color for the sliding bar heading font. Heading Font Size: Choose the sliding bar heading font size. Content Font Color: Choose solid color for the sliding bar content font color. Content Font Size: Choose the sliding bar content font size.

Blog options

Property	Description
`Blog listing`	Blog Listing Style: Select your prefered blog posts listing style and they are: Large image. Small image. Timeline. Masonry. Grid. Featured Image Size: Select what size you prefere from the pre-defined sizes. Max. number of words: The text length that appears in the posts list description. Blog Sidebar: Select how the layout will look (With right sidebar or left sidebar or witout sidebar). Sidebar Style: Select how the sidebar style will look like. Pager Type: We have 3 pager types (Numeric + Navigation pager and Older Newer page or Load more pager). Pager Style: Numeric pager have 6 styles that you can choose from them the one suits you. Pager Position: control the pager position (Left, Right and Center position).
`Single post`	Single Post Sidebar: Select how the layout will look (With right sidebar or left sidebar or witout sidebar). Sidebar Style: Select how the sidebar style will look like. Show Post Image: if enabled the post details page will show the post image. Show Title: if enabled the post details page will show the title. Show Post Icon: if enabled the post details page will show the Post Icon. Show Date: if enabled the post details page will show the date. Show By Author: if enabled the post details page will show the author. Show Category: if enabled the post details page will show the post category. Show Tags: if enabled the post details page will show the tags. Show Post navigation: if enabled the post details page will show the next post, previous post links navigation. Show Author Info Box: Show / Hide Author info box. Show Comments: if enabled the post details page will show the post comments. Show Post Content: if enabled the post details page will show the post content. Disable Post Content Format ? Enable / Disable Post content format in blog listing only. Max. number of words Select Max. number of words to be shown, (Enter -1 to disable this feature).
`Share post`	Show Social Sharing options: if enabled the post details page will show the share buttons. Show Facebook: if enabled the post details page will show the facebook button. Show Twitter: if enabled the post details page will show the Twitter button. Show Google Plus: if enabled the post details page will show the Google Plus button. Show LinkedIn: if enabled the post details page will show the LinkedIn button. Show Pinterest: if enabled the post details page will show the Pinterest button. Show Xing: if enabled the post details page will show the Xing button.
`Authors Page`	This setting is for the Author's details page that can be found in this link: http://YOUR-DOMAIN/author/USER-NAME/, You can show hide author information, posts by author, and the way to display the author's posts (Large image, Small image, Grid, Masonry and Timeline) and even add text or HTML to be shown before and after All authors' pages. Notice: the text or HTML content before and after author's content will be applied on all authors pages not only one author's page.

Sidebars

ECONO Comes with Unlimited SideBars Feature that enables you to add unlimited numbers of side bars in your wordpress site.

to do this click on add sidebar, a new textbox will appear, then add your sidebar name and hit save changes button.

Social icons

ECONO Comes with Unlimited SOCIAL ICONS Feature that enables you to add unlimited numbers of social icons in your wordpress site.

to do this click on add Social Icon, a new icon select, textbox for title and link will appear, Also you can drag and drop social icons to re-order them as you wish, then hit save changes button.

Import Demo

Install Demo Data: By clicking this button a new message will appear to confirm if you want to import the demo data which will install some demo pages, posts, menus etc...

Note: To Enable this feature you must install ECONO Core Plugin first.

Portfolio

Property	Description
`Archive settings`	Sidebar: Choose the way that the projects archive listing page sidebar will appear.
`Share Project`	Project Details Layout: Choose the single project details page layout. Show Project Image: if enabled the project details page will show the project image. Show Date: if enabled the project details page will show the date. Show By Author: if enabled the project details page will show the author. Show Category: if enabled the project details page will show the project category. Show Project Content: if enabled the project details page will show the project content. Show Tags: if enabled the project details page will show the tags. Show Related Projects: if enabled the project details page will show the related projects block.
`Share Project`	Show Social Sharing options: if enabled the project details page will show the share buttons. Show Facebook: if enabled the project details page will show the facebook button. Show Twitter: if enabled the project details page will show the Twitter button. Show Google Plus: if enabled the project details page will show the Google Plus button. Show LinkedIn: if enabled the project details page will show the LinkedIn button. Show Pinterest: if enabled the project details page will show the Pinterest button. Show Xing: if enabled the project details page will show the Xing button.

Contact

Property	Description
	Address Title: Type here the address title that will appear at the right side of the Address field. Address: Type here your address. Email Title: Type here the Email title that will appear at the right side of the Email field. Email Address: Show / Hide Email. Phone Title: Type here the phone title that will appear at the right side of the Phone field. Phone Number: Show / Hide Phone Number. Fax Title: Type here the Fax title that will appear at the right side of the Phone field. Fax Number: Show / Hide Fax Number.

Import / Export options

Property	Description
`Export Theme Options:`	You will find a button to export all current theme options in an external file to be a backup in case you need to revert these settings back.
`Import Theme Options:`	You will find a button to import theme options from another file.

WooCommerce

Property	Description
`Products Listing`	Show Side Bar: In the shop pages select to show / hide the shop sidebar. Select Side Bar: Select the side bar for shop pages. Side Bar Style: Select the side bar style for shop pages. Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) . Products Columns: Number of products columns per row.
`Single Product`	Show Side Bar ? In the product page select to show / hide the shop sidebar. Side Bar Style: Select the side bar style for shop pages. Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) .
`Related Products`	Show Related Products ? In the product page select to show / hide the Related Products block. Related Products Per Page: How many related products will be shown in the single product page. Related Products Columns: Number of Related Products columns per row.

BBPress (Forums)

Show Side Bar: In the forums select to show / hide the forums sidebar.
Select Side Bar: In the forums select sidebar from all sidebar widgets.
Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) .
Show Welcome message: Show / Hide welcome message on the top of the forum index page.
Welcome Message: Type the text that appears in the welcome message on the top of the forum index page.

BuddyPress

Show Side Bar: In the Activity Pages select to show / hide the forums sidebar.
Select Side Bar: In the Activity Pages select sidebar from all sidebar widgets.
Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) .

Downloads

Show Side Bar: In the Activity Pages select to show / hide the forums sidebar.
Select Side Bar: In the Activity Pages select sidebar from all sidebar widgets.
Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar).
Downloads Columns: Select number of columns per row.
Downloads Per Page: Select number of downloads per Page.

Page Options

Pages And Site Templates

When you need to create a page just go to administration panel, and under Pages tab click Add New, then you will get this screen:

1) Template

As you see in the Page Template, you can see that there are 5 custom templates:

Default Template: For default page templates.
Home Page Template: For home pages.
One-Page Template: For One page.
Slider Revolution Blank Template: For Slider Revolution Page Template.

2) Page Layout Mode

As you see in the Page Layout Mode, you can see that there are 4 Layout Modes:

Inherit From Theme: This is to take the layout style from the main theme options settings.
Full Width: This is for pages that has no sidebar, and takes the full content container width.
Full Page: This is for pages that takes the full page width not centered content.
Left Bar: Content with left sidebar pages.
Right Bar: Content with left sidebar pages.

3) Page Menu

As you see in the Select Menu, you can Choose a different menu for this page only.

Page Editor:

----- When you select BACKEND EDITOR, this screen will appear:

Custom Page Settings

Notic: These options are applied individually on the page you are editing only, so this can give the page a custom options such as hiding header, footer, customizing the page title for this page only. As a result for that, you can build all your site pages and posts with different styles.

Option	Description
`Top Bar`	Show / Hide Top Bar, choose custom colors, backgrounds, etc...
`Header`	Show / Hide header, set different header style and choose custom colors, backgrounds, etc...
`Page Title`	you can hide page title, add custom background image, custom icon, set different page title style, set custom height, custon colors and also set custom video background, and too many other options.
`Footer`	Show / Hide Footer, set different footer style.

Create Or Modify One Page

To Create a One Page you have two important tasks :

1) Menu configuration

Go to Appearance -> Menus
select the one page menu and hit the button select as shown in the next image.
Create menu items as shown in the next image with Title and link that starts with # plus the name (any name you want but be careful to make it one word cause we'l use it as an ID in next steps)
After Adding the menu items click save menu.

Important: All links you created in this menu we'll create a Rows in the page with number equals to these menu items number.

2) Page configuration

Go to Pages -> Add New
From the Right tools go to page Attributes then open Template dropdown menu and select One-Page Template.
Go to the page content then switch to BACKEND EDITOR.
Add Element -> Select Row.
Edit Row and go to ID and enter the first menu item link without the # to be home only and change other Row Properties as you need.
Repeat this step according to the other menu items you have created.
Publish the Page.
Enjoy!

Custom Shortcodes

ECONO comes with 37 Main custom shortcodes + the default shortcodes from Visual composer.

to see how to use the default visual composer shortcodes just go to visual composer documentation and follow the steps.

Now we'll see how to use the custom shortcodes

Add New Row

Row Shortcode is default visual composer shortcode but we made some modifications to suit our new design, let's see how to configure it:

When you click add new element, Click on Row then a new element will be now seen in the content area.

Let's Explain the Row Properties in visual composer: As you see the following image , the numbers on each item describes what it do.

Edit the row properties.
Copy row.
Delete row.
Row columns.
Add new element in the row
Edit existing column in this row.
Delete existing column in this row.
Add new element in the row

1) Gereral Row Properties

Select the padding values Top and Bottom for this row. (Normal: 100px, X-Small: 30px, Small: 70px, Large: 140px, X-large: 180px,No Padding: 0px )
If Checked the row will take full width of the container.
If Checked the row content will be stretched to full width not centered in the page container.
if Checked the row columns will have the same height.
If Checked the row will take the full page height.
Add Extra class name to style this row individually.
Assign ID to this Row, This will be required in ONE-PAGE Creation.

2) Background

There are 4 Values for the Row Background:

None -> Disable the row background
Color -> Only Add background color for the row.
Image -> Add background image with options
Video -> Add video background with options

If you choosed Image, this option will appear:

Row Background Type : Image.
Row Background Color.
Row Background Image.
Row Background repeat options (No repeat, Repeat vertically or horizontally).
Choose if you need the background will be fixed or scroll with mousewheel.
Choose the background position.
Choose the background size (Cover - Contain - 100%).
Enable Row Background Image Parallax Effect.
Create Layer over the background image.
If Overlay is Yes, The background color of the overlay layer and transparency level, Value from 0 to 1.

If you choosed Video, this option will appear:

Row Background Type : Video.
Row Background video Poster.
Row Background MP4 video.
Row Background WEBM video.
Row Background OGV video.
Row Background YouTube video.
Row Background YouTube video Link.
Enable YOUTUBE video (Only) Parallax Effect.
Create Layer over the video.
The background color of the overlay layer.

Heading

When you click add new Heading, a popup window will appear (like the next screenshot), check the next image:

Choose Heading Style from 5 predefined styles.
Heading Alignment (Left - Center - Right).
If checked a new tab with icons select will be shown and this will Show an icon with your heading element.
Choose the way to animate this heading.
Add Extra class name to style this Heading individually.

Heading Title Text.
Heading Tag.
Heading Font Family from Google Fonts.
Heading Font weight.
Heading Font Size.

Sub Heading Text.
Sub Heading Position.
Heading Font Family from Google Fonts.
Sub Heading Custom Color from color chooser.
Sub Heading Font Style.
Sub Heading Font weight.
Sub Heading Font Size.

Testimonials

When you click add new Testimonials, a popup window will appear (like the next screenshot), check the next image:

Click Add element and a new popup will appear with only one child element in it ( Testimonial BlockQuote ), click it and the properties will appear:

Author name
Author Font Size
Color
Hover - Color
Position
Position Font size
Color
Hover - Color

Icon Box

When you click add new icon box, a popup window will appear and have some properties that can be:

1) Box

Box Style: Select box style from available 4 box styles.
Shape: Select box shape from available 3 box shapes.
Box Align: Text align inside the icon box.
Use Icon ?: If checked a new tab with icons select will be shown and this will Show an icon with your Icon box element.
Background Color: Choose Box background color from colorpicker.
Border Color: Choose Box Border color from colorpicker.
Hover - BG Color: Choose Box Hover background color from colorpicker.
Hover - Border Color: Choose Box Hover Border color from colorpicker.

2) Title

Title: Enter text for box title.
Link: Enter link for box title.
Title Tag: Select title tag.
Color: Choose a color for box title from color picker.
Border Bottom Color: Choose a color for box title bottom border from color picker.
Hover - Color: Choose a color for box title when hover on the main box from color picker.
Hover - Border Bottom Color: Choose a color for box title bottom border when hover on the main box from color picker.

3) Sub Title

Sub Title: Enter text for box title.
Title Tag: Select Sub title tag.
Color: Choose a color for box Sub title from color picker.
Border Bottom Color: Choose a color for box Sub title bottom border from color picker.
Hover - Color: Choose a color for box Sub title when hover on the main box from color picker.
Hover - Border Bottom Color: Choose a color for box Sub title bottom border when hover on the main box from color picker.

4) Content

Content: Enter text for box Content.
Hover - Color: Choose a color for box Sub Content when hover on the main box from color picker.

5) Icon

Icon Type: Select your icon type from 3 types.
Icon Library: Select your icon from icon Library.
Icon: Select your icon from icons chooser.
Color: Choose a color for the icon from color picker.
Background Color: Choose a Background color for the icon from color picker.
Border Color: Choose a Border color for the icon from color picker.
Border Width: Enter border width in PX.
Hover - Color: Choose a color for the icon when hover on the main box from color picker.
Hover - Background Color: Choose a Background color for the icon when hover on the main box from color picker.
Hover - Border Color: Choose a Border color for the icon when hover on the main box from color picker.
Hover Style: Choose hover style from 3 available styles or you can disable hover.

6) More Link

Show Read More Link ? Show / Hide Read More Link in the icon box element.
Read More Text Enter text for read more box content.
Style: Select read more button style from available 3 styles.
Alignment: Horizontally align the read more button inside the icon box.
Color: Choose a color for read more font color.
Background Color: Choose a Background color for read more link.
Border Color: Choose a Border color for read more link.
Hover - Color: Choose a color for read more font color when hover on the main box.
Hover - Background Color: Choose a Background color for read more link when hover on the main box.
Hover - Border Color: Choose a Border color for read more link when hover on the main box.

7) General

CSS Animation: Select animation type, delay and duration.
Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.

Features

Title: Enter feature title.
Sub Title: Enter feature sub title.
Link: Enter feature link.
Image: Upload or select an existing Feature image.
Content: Enter feature content.
Feature Style: Select the feature style from 3 predefined styles available.
Align: Horizontally Align feature title, Image,content,etc...
Image Shape: Select Feature image shape from 3 available shapes.
Background Color: Choose a Background color for feature box.
Title Color: Choose a solid color for title.
Sub Title Color: Choose a solid color for feature sub title.
Padding: Enter Padding Top, Right, Bottom and left values in PX.
Margin: Enter Margin Top, Right, Bottom and left values in PX.
Show Read More Link ? Show / Hide Read more link

Google Map

Map Type: Select the map type from 4 available types.
Zoom: Select the zoom value for google map.
Height: Select the height of the map.
Disable Mouse Wheel: If selected This will disable mouse scroll zoom in on the google map.
API Key: Enter yor google map API Key.
Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.
Latitude: The Latitude value.
Longitude: The Longitude value.
Address: Type here more details about the location on google map.
Icon: Upload or type Image URL for the map marker on google map.

Counter

When you click add new Counter, a popup window will appear and have some properties that can be:

1) General

Box Shape: Select box shape from available 3 box shapes.
Alignment: Text align inside the Counter box.
Use Icon ?: If checked a new tab with icons select will be shown and this will Show an icon with your Icon box element.
Background Color: Choose Counter Box background color from colorpicker.
Border Width: Enter Counter Box Border widht in PX.
Border Color: Choose Counter Box Border color from colorpicker.
Border Style: Choose Counter Box Border style.
Hover - BG Color: Choose Counter Box Hover background color from colorpicker.
Hover - Border Color: Choose Counter Box Hover Border color from colorpicker.
CSS Animation: Select animation type, delay and duration.
Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.

2) Content

Title: Enter text for item title.
Title Color: select title color from color chooser.
Title Background Color: select title background color from color chooser.
Font Size: Type title font size in px.
Font Weight: Select title font weight.
Hover - Color: Choose title color When Hover on Counter Box from color picker.
Hover - Background Color: Choose title background color When Hover on Counter Box from color picker.
Content: Enter item description text.
Hover - Color: Choose content color When Hover on Counter Box from color picker.

3) Number

Theme: Select Counter Numbers Theme from 6 available themes.
From: start number.
To: end number.
Start After: Enter the delay time that the numbers begin counting after it ( in milliseconds ).
Text Before Number: Enter text that will be shown before the number.
Text After Number: Enter text that will be shown after the number.
Color: select numbers color from color chooser.
Hover - Color: select numbers color When Hover on Counter Box from color chooser.
Font Size: Type numbers font size in px.
Font Weight: Select Numbers font weight.

4) Icon

Icon Library: Select your icon from 6 icons Libraries.
Icon: Select your icon from icons chooser.
Icon Color: Select your icon color from color chooser.
Hover - Color: Select icon hover color When Hover on Counter Box from color chooser.
Font Size: Type icon size in px.

4) More Link

Show Read More Link ?: Show / Hide Read more link.

Dividers

When you click add new Divider, a popup window will appear and have some properties that can be:

Divider Style: Select the divider style from 10 available styles.
Color: Choose a solid color for the divider line.
Use Icon ? If checked a new tab with icons select will be shown and this will Show an icon with your counter element.
CSS Animation: Select animation type, delay and duration.
Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.

Breaking News

Title: Enter the title for this widget.
Category: Select the posts category that will be shown.
Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.

Blog Shortcode

Category: Select the posts category that will be shown.
Blog Style: Select how the blog listing style would be : (Large Image, Small Image, Grid, Masonry and TimeLine).
Max. Number of words: Enter the maximum number of words to be shown in the blog shortcode listing item.
Image Size: Select the featured image size.
Posts Per Page: Enter the posts per page to be shown in the blog shortcode listing.
Pager Type: Select the pager type (Numeric, Older-Newer and Load More).
Pager Style: Select the pager style from the 5 predefined styles.
Pager Position: Select the pager position Horizontally.
Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.

Posts From Category

When you click add Posts From Category, a popup window will appear and have some properties that can be:

Style: Select how the Posts From Category style would be from available 3 styles.
Category: Select the posts category that will be shown.
Carousel ?: Show the Posts From Category in carousel.
Image Size: Select the featured image size.
Number Of Posts: Enter the posts per page to be shown in the Posts From Category listing.
Max. Number of words: Enter the maximum number of words to be shown in the Posts From Category listing.
Non Carousel Columns: Number of Coulmns in case not Carousel view.
Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.

News In Pictures

When you click add News In Pictures, a popup window will appear and have some properties that can be:

Category: Select the News In Pictures that will be shown.
Image Size: Select the featured image size.
Number Of Posts: Enter the posts per page to be shown in the News In Pictures listing.
Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.

codecanyon Plugins Documentations

Plugin Name	Documentation URL
`Visual Composer: Page Builder for WordPress`	LINK
`Slider Revolution Responsive WordPress Plugin`	LINK

Introduction

What Is WordPress ?

What is a WordPress Theme ?

More Links to make it easy with WordPress:

ECONO Theme Requirements

So below what is required for ECONO to work:

How To Download ECONO From ThemeForest

CSS Files

CSS Stylesheet files structure

JS Files

ECONO Theme Support

ECONO Theme Installation

1) Download & Organize Files

2) Installing Theme

A - Installing your theme via Wordpress

B - Installing your theme via FTP

3) Activating Theme

Plugins Installation

Demo Content Installation

A - Import Demo Content via One-Click-Install Method

B - Import Demo Content via XML DUMP Manually

C - Import Plugins Data Individually

ECONO Theme Update

A - Update ECONO Via WordPress Dashboard:

B - Update ECONO Via FTP:

Plugins Update

A - Update Plugins Via WordPress Dashboard:

B - Update ECONO Via FTP:

Options Panel

Top Right Buttons

General Settings

Styling Options

Top Bar Settings

Header Settings

Logo

Menu

Footer

Page Title

Typography

Sliding Bar

Blog options

Sidebars

Social icons

Import Demo

Portfolio

Contact

Import / Export options

WooCommerce

BBPress (Forums)

BuddyPress

Downloads

Page Options

Pages And Site Templates

1) Template

2) Page Layout Mode

3) Page Menu

Page Editor:

Custom Page Settings

Create Or Modify One Page

1) Menu configuration

2) Page configuration

Custom Shortcodes

Add New Row

1) Gereral Row Properties

2) Background

Heading

Testimonials

Icon Box

1) Box

2) Title

3) Sub Title

4) Content

5) Icon

6) More Link

7) General

Features

Google Map

Counter

1) General

2) Content