Introduction
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
Getting Started
Theme Installation
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.
Theme Activation



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:
- Update the theme with the latest version.
- Go to Admin Panel > Constro.
- Enter purchase-code and click on “Check” button.
- Click on Plugins tab. It will redirect to theme’s bundled plugins page.
- 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.
Sample Data

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.
Theme Settings
Layout Settings

– 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.
Site Logo

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.
Sticky Header

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

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.
Header
Site Header

– 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.
Topbar

– 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.
Search

You can change Search results page settings from here.
Page Header


– 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
Color Scheme

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.
Sidebar Settings

You can change Sidebar related settings from here.
Blog Setting

– 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.
Single post

– 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.
Portfolio

– 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.
WooCommerce Setting

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.
404 page

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


– 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).
Typography

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


– 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.
Custom CSS/JS

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

– 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.
VC Elements/Shortcodes
Address Block


This element allows to insert address block in content.
Param Name | Description | |
---|---|---|
Style | Choose address block styles from Default, Border and Flat. | |
Shape | Select icon shape. | |
Icon Library | Select icon library with visual composer you can easily add icons from following libraries: – Font Awesome – Open Iconic – Typicons – Entypo – Linecons – Mono Social – Material – Pixel – Flaticons | |
Icon | Select icon from selected library. | |
Sub Contents | This is repeater field where you can add multiple address sub contents, like Phone Number, Address, and Emails. This contains below fields. | |
Title | Enter title. | |
Enable Link | Select this check box to enable link for sub-content title. | |
Content Link | Select/enter content link. This field will be visible only if Enable Link field is checked. |
Button

This element allows to insert button.
Param Name | Description | |
---|---|---|
Title | Enter button title. | |
URL | Choose/add button link. | |
Style | Choose button style. | |
3d? | Select this checkbox to enable 3d style. Note:This field will be applicable only if Default or Flat Color style is selected. | |
Size | Select button shape. | |
Shape | Select button shape. | |
Alignment | Select button alignment. | |
Set full width button? | Select this checkbox to set button size to full-width. Note:This field will be applicable if Alignment field is set to Left, Right or Center. | |
Animation | Select button animation. | |
Color | Select button color. Note:This field will be applicable only if Flat Color style is selected. | |
Add icon? | Select this checkbox to set button icon. | |
Icon Alignment | Select icon alignment. | |
Icon Revealing Effect? | Select this checkbox to enable icon revealing effect. | |
Icon Library | Select icon library. With Visual Composer you can easily add icons from following libraries: – Font Awesome – Open Iconic – Typicons – Entypo – Linecons – Mono Social – Material – Pixel – Flaticons | |
Icon | Select icon from selected library. | |
Shape | Select icon shape. |
Clients Logo


This element allow to insert clients logos from Clients section.
Param Name | Description | |
---|---|---|
Style | Choose clients list style. There are 2 styles and each style contains specific parameters. | |
Style - Slider | ||
Slider elements style | Select slider elements style from "Pagination Control" or "Pagination Control". | |
Style - Grid | ||
Grid elements per row | Select number of single grid elements per row. | |
Slides | This is repeater field where you can add multiple items. This contains below fields. | |
Title | Enter title. | |
Slide Image | Select slide image. | |
Image Link | Select/enter image link. |
Counter

This element allows to insert counter with label and icon.
Param Name | Description | |
---|---|---|
Style | Choose counter style. | |
Title | Enter counter title. | |
Counter | Enter counter count. | |
Icon Style | Select icon style. Note:This field is applicable for Style "Style 1", "Style 2", "Style 3", "Style 7" and "Style 8". | |
Icon Library | Select icon library. With Visual Composer you can easily add icons from following libraries: – Font Awesome – Open Iconic – Typicons – Entypo – Linecons – Mono Social – Material – Pixel – Flaticons | |
Icon | Select icon from selected library. |
Feature Box


This element allows to insert feature box.
Param Name | Description | |
---|---|---|
Style | Select Feature Box style. | |
Title | Enter title. | |
Title Type | Select title element from h2 to h6. | |
Description | Enter description. | |
Image Alignment | Select image alignment. Note:This field will be applicable only if "Style 1" is selected as style. | |
Theme Style | Select theme style. Note:This field will be applicable only if "Style 1" is selected as style. | |
Link | Choose/add box link. | |
Background Image | Select background image. |
Feature Text

This element allows to insert Featured Text with Title, Description and Icon with various styles.
Param Name | Description | |
---|---|---|
Style | Select Feature Box style. | |
Title | Enter title. | |
Title Type | Select title element from h2 to h6. | |
Description | Enter description. | |
Icon Size | Select size. | |
Icon Library | Select icon library. With Visual Composer you can easily add icons from following libraries: – Font Awesome – Open Iconic – Typicons – Entypo – Linecons – Mono Social – Material – Pixel – Flaticons | |
Icon | Select icon from selected library. |
Image Slider



This element allows to add sliders.
Param Name | Description | |
---|---|---|
Carousel size | Enter image size. You can enter predefined image sizes or custom size. Example: thumbnail, medium, large, full or other sizes defined by current theme. Alternatively enter image size in pixels: 200×100 (Width x Height). Leave empty to use "constro-slider-thumbnail" size. | |
Slides per view | Enter number of slides to display at the same time. | |
Hide Pagination Control | Select this check box to hide pagination controls. | |
Hide Prev/Next Buttons | Select this check box to hide prev/next buttons. | |
Responsive Settings | ||
Slides per view ( < 480px) | Enter number of slides to display for viewport size lower than 480px. | |
Slides per view ( < 768px) | Enter number of slides to display for viewport size lower than 768px. | |
Slides per view ( < 980px) | Enter number of slides to display for viewport size lower than 980px. | |
Slides per view ( < 1200px) | Enter number of slides to display for viewport size lower than 1200px. | |
Slides | ||
Enable Caption | Select this checkbox to caption on slides. | |
Slides | This is repeater field where you can add multiple slides. This contains below fields. | |
Slide Image | Select slide image. | |
Title | Enter title. Note:This will be displayed only if "Enable Caption" is selected. | |
Subtitle | Enter subtitle. Note:This will be displayed only if "Enable Caption" is selected. | |
On Click Action | Select action when image is clicked. | |
Custom Link | Add custom link for click event on slider image. Note:This field will be applicable only when "Open Custom Link" is selected in "On Click Action". |
List


This element allows to insert list items with icons instead of bullets.
Param Name | Description | |
---|---|---|
Add Icon? | Select this checkbox to add icon to list items. | |
Icon Library | Select icon library. With Visual Composer you can easily add icons from following libraries: – Font Awesome – Open Iconic – Typicons – Entypo – Linecons – Mono Social – Material – Pixel – Flaticons | |
Icon | Select icon from selected library. | |
List Items | This is repeater field where you can add multiple list item. This contains below fields. | |
Content | Enter content. |
Portfolio

This element allows to insert portfolio items from Portfolio section.
Param Name | Description | |
---|---|---|
Count | Enter the number of portfolio items to display. | |
Categories | Select categories to limit result from. To display result from all categories, leave all categories unselected. |
Recent Posts


This element allows to add recent posts.
Param Name | Description | |
---|---|---|
Style | Choose style. | |
List Style | Select list style. | |
Count | Enter number of posts to display. | |
Categories | Select categories to limit result from. To display result from all categories leave all categories unselected. | |
Style - Slider | ||
Show Pagination Control | Select this checkbox to display pagination controls. | |
Show Prev/Next Buttons | Select this checkbox to display prev/next buttons. |
Skill Bar


This element allows to add horizontal/verical skill bars.
Param Name | Description | |
---|---|---|
Style | Choose style, Horizontal or Vertical. | |
Style - Horizontal | ||
Skill Bar Size | Select skill bar size. | |
Text Position | Select Text Postion. | |
Skill Bar Style | Select Text Postion. | |
Skill Bar Items | This is repeater field where you can add multiple items. This contains below fields. | |
Bar Label | Enter bar label. | |
Bar Percent | Enter bar percent. |
Social Icons


This element allows to add social profiles link with icons.
Param Name | Description | |
---|---|---|
Style | Choose style. | |
Shape | Select shape. | |
Size | Select icon display size. | |
Hover Style | Select hover style. | |
Social Profiles | This is a repeater field, where you can add multiple items. This contains below fields. | |
Profile Link | Select/enter image link. | |
Icon | Select icon from library. |
Step Feature Text

This element allows to add step numbered featured contents.
Param Name | Description | |
---|---|---|
Style | Choose style. | |
Title | Enter title. | |
Title Type | Select title element type from H2 to H6. | |
Description | Enter description. | |
Step Counter | Enter step counter number. |
Team Members


This element allows to insert team members list from Teams section.
Param Name | Description | |
---|---|---|
Style | Choose style. | |
List Style | Select members list style. | |
Count | Enter number of tetimonial items to display. | |
Categories | Select categories to limit result from. To display result from all categories leave all categories unselected. | |
Style - Carousel ( Slider Settings ) | ||
Show Pagination Control | Select this checkbox display pagination controls. | |
Show Prev/Next Buttons | Select this checkbox to display prev/next buttons. |
Testimonials

This element allows to display testimonials from Testimonials section.
Param Name | Description | |
---|---|---|
Style | Choose style. | |
Color | Select testimonials color. | |
Count | Enter number of testimonial items to display. | |
Columns | Enter number of testimonial columns to display. | |
Categories | Select categories to limit result from. To display result from all categories leave all categories unselected. |
Timeline


This element allows to add timeline content with Title, Description and Date.
Param Name | Description | |
---|---|---|
Style | Choose style. | |
Shape | Select shape. | |
Title Element | Select title element type from H2 to H6. | |
Timeline Data | This is repeater field where you can add multiple items. This contains below fields. | |
Title | Enter title. | |
Description | Enter description. | |
Date | Enter date in YYYY-MM-DD format. |
Visual Composer Inbuilt Shortcodes
Tabs & Tour


We added below settings to Tabs and Tours shortcodes.
Param Name | Description | |
---|---|---|
Tabs Shortcode | ||
Full Width Tabs | Select this checkbox to display tabs equaly divided to width of tabs area. | |
Tour Shortcode | ||
Icon Alignment | Select this checkbox this to display icon top/bottom of title based on left/right alignment. So, if icon is set to display on left and this checkbox is selected, then it will be displayed above label. And, if icon is set to display on right and this checkbox is selected, then it will be displayed below label. |
Accordion

We added below settings to Accordion shortcode.
Param Name | Description | |
---|---|---|
Boxed Icon | Select this checkbox to display boxed icon, if icon is added/enabled. |
Row


We added below settings to Row shortcode.
Param Name | Description | |
---|---|---|
Backgrund Tab | ||
Row Background Color Type | Select a background color type as per your backgroudn image or background color. Select "Light Background" if you are using image/color of light tone or select "Dark Background" if you are using image/color of dark tone. | |
Background Position: Select background position, if you are using image background. it will display image with selected position. | ||
Enable Overlay? | Select this checkbox to enable row overlay. | |
Overlay Color | Select overlay backgrund color. Note: This field will be applicable only if "Enable Overlay" checkbox is selected. | |
Extras Tab | ||
Vertical Half Overlap | Select this checkbox to place current row above previous and next rows. |
Message

We added below settings to Message shortcode.
Param Name | Description | |
---|---|---|
Hide Icon | Select this checkbox to hide icon. | |
Closeable Box | Select this checkbox to display close button and hide box by clicking close button. |
Extra
Retina Display
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.
Browser Support
Constro supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 11 and above.
How to rate this item
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!
WooCommerce / Shop integration
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:
How to install WooCommerce and setup the default shop pages
- First go to Plugins > Add new section and type “WooCommerce” into search field. Then click “Search Plugins” button.
- Once that is done, and you see the result, click on the “Install now” button next to “WooCommerce – excelling eCommerce” plugin.
- Once WooCommerce is installed, click on the “Activate plugin” link.
- 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.
Source & Credits
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
Scripts
CSS & Fonts
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.
Social Sharing
– 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.