Constro User Guide

Constro Introduction
This documentation will give you an understanding of how Constro is structured and guide you in performing the most common functions. If you require further assistance, related to topics not covered in this documentation, then please contact us via Our Support Forum.

NOTE: We will not respond to any support questions on Item comment section or through e-mail. If this document doesn’t answer your questions feel free to open up a private ticket in our support forum

If want to customize this theme as per your requirement, please contact us here: Our Support Forum

WordPress Installation

WordPress is one of the most popular CMS in the world that makes it the best choice for your website.
You can download and install the WordPress from the official website using WordPress’ very setup steps called “Famous 5-minute install”.

For more information on WordPress, please, visit the WordPress Codex page.

Theme requirements:

Please check the recommended server configuration for proper theme functioning:
– PHP version 5.5 and higher
– memory_limit – 512M
– max_execution_time – 600
– max_input_time – 600
– upload_max_filesize – 256M
– max_input_vars – 3000
Make sure your server is set up properly and the theme and content will be loaded correctly.
Enough server configuration will also ensure fast speed and increased performance.

Note Please check theme requirements Before you start with the theme.

Theme Installation

Assuming that WordPress website is already set (for setting up WordPress, refer to WordPress Documentation), the next step is to install the theme. There are 2 main ways to upload the theme:

Option 1: Via “Envato Market” plugin (recommended)

If you already have the “Envato Market Plugin” installed on your site then just go to Admin > Envato Market and install the theme from there. If not, than download the plugin by clicking on this link and install the plugin on your site. After installation, you need to configure it. Just go to this link to know how to configure this plugin.

Than just go to Admin > Envato Market plugin menu and install the theme. The theme would be available to install so you can easily install it.

Option 2: Via FTP client

Use an FTP client such as FileZilla, FireFTP or Cyberduck (if you are a Mac user) to connect to your hosting account. Navigate to where WordPress is installed and locate the /wp-content/themes/ directory.

Find the zip file called “constro.zip” in downloaded file, unzip it and upload the folder to the folder /wp-content/themes/.

After all file uploaded, just go to Admin > Appearance and activate Constro theme.

Option 3: Through the native WordPress theme uploader (not recommended due to big size of theme)

First you need to unzip the download file and find the zip file called constro.zip. After this you have to go in the admin panel > Appearance > Themes (see the image on the right), click on the Install Themes tab and in this section in the top left corner click on the link Upload. After that, a new form will appear to upload the theme. Select constro.zip file from your local file system and submit the form.

Plugins Installation

After theme installation and activation, it will redirect you to welcome screen, where you can start installation of required plugin by clicking “Proceed” button. Clicking on “Proceed” will lead you to the plugin installation page.

If you are guided to some other page, instead of Welcome screen, it will display a notice in Admin Panel to install required and recommended plugins. You can click “Begin installing Plugins” to proceed plugin installation.

Constro requires some plugins to be install to run various theme functionalities properly. Few plugins will be installed from WordPress Plugins Repository and few plugins are bundled with theme. On plugin installation page, it will display list of required and recommended plugins.

Choose plugins and select “Install” in Bulk Action dropdown and click Apply button. First, it will install the selected plugins and then it will display the same list to activate the installed plugins.

You can manage (install/uninstall, activate/deactivate) plugins from Plugin Manager (Admin Panel > Plugins). For more information on plugin management go to WordPress Codex – Plugin Management.

In Constro v3.0.0, to reduce the theme package size, we moved sample-data and plugins on our server. So, to access these resources, from the server, it will require to activate the theme first.

Also, since the theme activation system is integrated into the new version, some core features will be deactivated, until the theme is not activated. Once, the theme is activated, all the features will be activated.

To activate the theme, follow the below steps:

1. Update the theme with the latest version.
2. Go to Admin Panel > Constro.
3. Enter purchase-code and click on “Check” button.
4. Click on Plugins tab. It will redirect to theme’s bundled plugins page.
5. Install/Update the required plugins to latest version.

Once the theme is activated, it will display some tabs, including License, Support, Plugins, Theme Options, Install Demos, System Status, and Ratings.

If you are installing and activating, the theme for the first time or plugins are not updated to latest, it will display License, and Plugins tabs only. From the Plugins tab, you can install/update necessary plugins, and once all the required plugins are activated, other tabs will appear.

The theme is provided with the sample data. It will create similar to the instance of our demo site ( It is not exactly same because of contents/layout on demo site change time-to-time as per new changes)

After successful theme and plugins installation, you can proceed with sample-data to install sample data. It will help you to understand the content/layout and customize the site easily. If you want to proceed from scratch, you can skip this step.

If you use the 1 Click Demo Install option, you don’t need to use .xml files. It’s a simple One Click Process. To proceed to sample data installation go to Theme Settings > Sample Data and click on “Install” button (and Keep Calm). The rest will be done in background-process.

Once an installation is done, then home page, blog page, post, portfolio, testimonials, menu, and the widget will be set automatically.

– Page Layout: – You can change the layout of the Page from here. Like you can switch to the Boxed or Full-Width  layout.

– Body Background: – You can change the body of the background type as per your need. We have provided two types of background option, first is Image and second are color.

1.1:  Image Background: – You can set an image as background with the different option like background repeat, background size, background attachment and background position.

1.2: Color: – You can set body background color from here.

This theme option provides you upload/set site logo. You can set logo as text or logo image. If you will set logo as an image then this option will provide to you to upload Site Logo, Sticky Header Logo and Mobile Logo with the logo Max Height. You can set Logo Max Height as per your need.

You can enable/disable sticky header here. Also, you can set Sticky Header background color, Text color and link color here.

You can enable/disable site preloader option here. Site Preloader option provides predefined loader images and another is you can upload custom preloader image. You can select as per your need.

– In site header, Theme provides three types of headers. You can set any header type as per your theme design.

– Also, Provides a color setting option in the header. If you will select a custom color setting option then theme provides Top Bar and Header Color Option like Background color, Text color, and Link color.

–  Top bar section has 5 elements such as email, phone number, opening hours, social profiles and topbar menu. You can set any element in top bar section on left and right side. You can add phone number, email and social profile link in “Site info” tab in The Theme Setting menu.

You can change Search results page settings from here.

– Page Header option provides you to set your header section with image, color or video. If you want to set the page header as an image then page header provides to upload page header image option. You can also set video (youTube and Vimeo) as page header background.

– In Background Opacity Color, it provides to set the page banner header background opacity as per your need.

– Also, You can set Page header content enable/disable.

– You can also enable/disable Breadcrumb option.

– You can also set page header section height as per you theme design.

– You can set Title bar text alignment, Such as Left, Right, Center, Title Left/Breadcrumb right and Title Right/Breadcrumb Left.

You can override settings individually, while editing, on any page, post, or other custom post types. For this, you can see custom setting panel over there.

Page Settings

– Show Header: Uncheck this box to hide the Page Header.

– Header Settings Source: You want to show default page header or want to set custom page header.

– Banner Type: Page setting provides three type of banner types Such as Image, Color, and Video. See this option same as in (Page Header)

– Display Breadcrumb: If you want to hide breadcrumb than check this option

– You can change “Footer Column layout” as per your requirement. Also, provide footer background type, Background opacity color, Footer heading color, Footer text color.

– Copyright section, You can change footer text from here. You can use the following shortcodes in your footer text: [constro-year], [constro-site-title], [constro-footer-menu]. Also, you can change copy right background color and text color from here.

In color schemes, you can change the site default color and set as per your site design.

We provide 3 color options:

Primary:  Main theme color and main background color

Secondary: Theme dark title and background

Tertiary: Theme Description color and border colors

Apply color which suits your website the best.

You can change Sidebar related settings from here.

– In the Blog tab, you can set the Blog page title, Blog Sidebar, Blog Layout and Display Meta Items.

– Blog Sidebar has 3 layouts like Full Width, Left Sidebar, Right Sidebar.

– Blog Layout has 2 layouts like Classic and Masonry blog layout.

– Blog post, by default, displays meta items like Date, Author, Categories, Tags, and Comments. If you don’t want to display any option on blog post meta item then you can uncheck option. You can also re-order meta item using drag and drop with drag handle.

– Display Meta Items option just as blog single page meta items.

– You want to show the related post, post author info and post navigation in blog post detail page using this option. By default, the theme displays all options. If you don’t want to show any option in detail blog post page, then you can off the option.

– In the Portfolio, You can set the portfolio sidebar, portfolio column size, portfolio full screen.

– In the Portfolio Details, You can enable/disable related portfolio option. You can also set “Related Portfolio” Heading title and also set number of portfolio display in the related portfolio section.

You can change settings related to WooCommerce from here. Such as Product Listing Column, Product Page Sidebar, Number of products per page, Cart icon in Primary menu, Woocommerce Up-Sell/Cross-Sell Product Number of Columns, Show related products, Number of Related Products per Page and Related Product Number of Columns.

– You can set the 404 page from here. Such as 404-page title, description, and image.

– Social Profiles: You can set your social profiles link in this option and these links will be displayed in Topbar on the front. Topbar will be visible based on “Header Type” selected in Theme Options ( Appearance > Theme Option > Header > TopBar).

– Site Contact: You can set your contact information like Email, phone number and site opening hours and this info will be displayed in the top bar on the front page. Topbar will be visible based on “Header Type” selected in Theme Options (Appearance > Theme Option > Header > TopBar).

– We have given total five social sharing features like Facebook, Twitter, Linkedin, Google Plus, and Pinterest. If you want to disable any social sharing feature then you can disable from this section. This social sharing icon will appear on blog listing page and blog detail page.

– You can set the typography as per your design, Theme provides Body font, Header Typo (h1 to h6) and Text typo setting.

– This section contains setting to enable/disable Maintenance or Coming Soon method. You can enable settings to display these pages if your site is under maintenance or construction.

– If you want to do any custom formatting using CSS/Javascript, then you can add your own CSS/Javascript from this section.

– FAQ Layout: This layout provides two types of layout. One is Multi-category layout and Second is Single- category layout.

– Category Source: This open will appear when you select “Multi-Category Layout” option. You can select “All” or “Selected” category base FAQ in Multi Category Layout.

This element allows to insert address block in content.

This element allows to insert button.

This element allow to insert clients logos from Clients section.

This element allows to insert counter with label and icon.

This element allows to insert feature box.

This element allows to insert Featured Text with Title, Description and Icon with various styles.

This element allows to add sliders.

This element allows to insert list items with icons instead of bullets.

This element allows to insert portfolio items from Portfolio section.

This element allows to add recent posts.

This element allows to add horizontal/verical skill bars.

This element allows to add social profiles link with icons.

This element allows to add step numbered featured contents.

This element allows to insert team members list from Teams section.

This element allows to display testimonials from Testimonials section.

This element allows to add timeline content with Title, Description and Date.

We added below settings to Tabs and Tours shortcodes.

We added below settings to Accordion shortcode.

We added below settings to Row shortcode.

We added below settings to Message shortcode.

The basic concept of a Retina image is that an image twice the size of a standard web image will be displayed on the screen. On a non-retina device an image will be 100px X 100px whereas a Retina device will display the same image but at 200px X 200px. Most of the devices use this branded concept for Retina devices like having approximately twice the pixel density of a non-retina device.

If you want to get perfect looking images on Retina screens. If for example, you build website where you upload regular images into Content, you must always upload 2 images in Media
Add new section which looks like below:

my_image.png - this is the name for standard image (e.g. 100px X 100px)
my_image@2x.png - this is the example name for retina image and file must be always 2x larger than regular image (e.g. 200px X 200px)

Note You need to include retina.js to make your website completely retina ready. See example below:

<!-- retina --> 
<script type="text/javascript" src="js/retina.js"></script>

For more information about retina documentation and to download retina.js Click here.

Constro supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 11 and above.

If you like our theme and support, Please do not forget to rate it with 5 stars in your Downloads section and write a review in Comments as it will add more value to our services!

Kindly visit here: http://themeforest.net/downloads and find “Rate this item” below the download button and rate out the theme.

Advance Thanks in Anticipation!

Constro is fully compatible with the WooCommerce plugin. We carefully designed Constro in such a way that you can build a nice shop that is loaded with options, and one that is perfect in appearance. Since WooCommerce is an external plugin, you will find any information you may need about it in the WooCommerce author’s page. Here are several useful links:

1. WooCommerce Plugin Page
2. WooCommerce Documentation
3. WooCommerce Forum
4. WooCommerce Shortcodes

How to install WooCommerce and setup the default shop pages

1. First go to Plugins > Add new section and type “WooCommerce” into search field. Then click “Search Plugins” button.
2. Once that is done, and you see the result, click on the “Install now” button next to “WooCommerce – excelling eCommerce” plugin.
3. Once WooCommerce is installed, click on the “Activate plugin” link.
4. In a few moments you will see a WooCommerce Purple Notification Bar at the top of the plugin page. Clicking the Install WooCommmerce Pages button in the purple bar will install all the default pages.

You may find some useful documentation and tutorials links here.

1. Visual Composer Plugin documentation link.
2. Slider Revolution Plugin documentation link.
3. Woocommerce documentation link.

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.

Images

• Shutterstock

Scripts

• Jquery
• Owl Carousel 2
• Magnific Popup
• isotope
• Jquery appear
• Counter
• Countdown

CSS & Fonts

• Bootstrap
• Font Awesome
• Flaticon
• Google Fonts
  • Roboto

Note For questions on basic WordPress, HTML, Javascript or CSS editing – please give your question a quick Google or visit W3Schools as theme issues get top priority.