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

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:

  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.

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.

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

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.

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.

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

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.

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.

Address Block

This element allows to insert address block in content.

Param NameDescription
StyleChoose address block styles from Default, Border and Flat.
ShapeSelect icon shape.
Icon LibrarySelect 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
IconSelect icon from selected library.
Sub ContentsThis is repeater field where you can add multiple address sub contents, like Phone Number, Address, and Emails. This contains below fields.
TitleEnter title.
Enable LinkSelect this check box to enable link for sub-content title.
Content LinkSelect/enter content link. This field will be visible only if Enable Link field is checked.

Button

This element allows to insert button.

Param NameDescription
TitleEnter button title.
URLChoose/add button link.
StyleChoose 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.
SizeSelect button shape.
ShapeSelect button shape.
AlignmentSelect 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.
AnimationSelect button animation.
ColorSelect 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 AlignmentSelect icon alignment.
Icon Revealing Effect?Select this checkbox to enable icon revealing effect.
Icon LibrarySelect 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
IconSelect icon from selected library.
ShapeSelect icon shape.

Clients Logo

This element allow to insert clients logos from Clients section.

Param NameDescription
StyleChoose clients list style. There are 2 styles and each style contains specific parameters.
Style - Slider
Slider elements styleSelect slider elements style from "Pagination Control" or "Pagination Control".
Style - Grid
Grid elements per rowSelect number of single grid elements per row.
SlidesThis is repeater field where you can add multiple items. This contains below fields.
TitleEnter title.
Slide ImageSelect slide image.
Image LinkSelect/enter image link.

Counter

This element allows to insert counter with label and icon.

Param NameDescription
StyleChoose counter style.
TitleEnter counter title.
CounterEnter counter count.
Icon StyleSelect icon style.
Note:This field is applicable for Style "Style 1", "Style 2", "Style 3", "Style 7" and "Style 8".
Icon LibrarySelect 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
IconSelect icon from selected library.

Feature Box

This element allows to insert feature box.

Param NameDescription
StyleSelect Feature Box style.
TitleEnter title.
Title TypeSelect title element from h2 to h6.
DescriptionEnter description.
Image AlignmentSelect image alignment.
Note:This field will be applicable only if "Style 1" is selected as style.
Theme StyleSelect theme style.
Note:This field will be applicable only if "Style 1" is selected as style.
LinkChoose/add box link.
Background ImageSelect background image.

Feature Text

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

Param NameDescription
StyleSelect Feature Box style.
TitleEnter title.
Title TypeSelect title element from h2 to h6.
DescriptionEnter description.
Icon SizeSelect size.
Icon LibrarySelect 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
IconSelect icon from selected library.

Image Slider

This element allows to add sliders.

Param NameDescription
Carousel sizeEnter 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 viewEnter number of slides to display at the same time.
Hide Pagination ControlSelect this check box to hide pagination controls.
Hide Prev/Next ButtonsSelect 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 CaptionSelect this checkbox to caption on slides.
SlidesThis is repeater field where you can add multiple slides. This contains below fields.
Slide ImageSelect slide image.
TitleEnter title.
Note:This will be displayed only if "Enable Caption" is selected.
SubtitleEnter subtitle.
Note:This will be displayed only if "Enable Caption" is selected.
On Click ActionSelect action when image is clicked.
Custom LinkAdd 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 NameDescription
Add Icon?Select this checkbox to add icon to list items.
Icon LibrarySelect 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
IconSelect icon from selected library.
List ItemsThis is repeater field where you can add multiple list item. This contains below fields.
ContentEnter content.

Portfolio

This element allows to insert portfolio items from Portfolio section.

Param NameDescription
CountEnter the number of portfolio items to display.
CategoriesSelect 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 NameDescription
StyleChoose style.
List StyleSelect list style.
CountEnter number of posts to display.
CategoriesSelect categories to limit result from. To display result from all categories leave all categories unselected.
Style - Slider
Show Pagination ControlSelect this checkbox to display pagination controls.
Show Prev/Next ButtonsSelect this checkbox to display prev/next buttons.

Skill Bar

This element allows to add horizontal/verical skill bars.

Param NameDescription
StyleChoose style, Horizontal or Vertical.
Style - Horizontal
Skill Bar SizeSelect skill bar size.
Text PositionSelect Text Postion.
Skill Bar StyleSelect Text Postion.
Skill Bar ItemsThis is repeater field where you can add multiple items. This contains below fields.
Bar LabelEnter bar label.
Bar PercentEnter bar percent.

Social Icons

This element allows to add social profiles link with icons.

Param NameDescription
StyleChoose style.
ShapeSelect shape.
SizeSelect icon display size.
Hover StyleSelect hover style.
Social ProfilesThis is a repeater field, where you can add multiple items. This contains below fields.
Profile LinkSelect/enter image link.
IconSelect icon from library.

Step Feature Text

This element allows to add step numbered featured contents.

Param NameDescription
StyleChoose style.
TitleEnter title.
Title TypeSelect title element type from H2 to H6.
DescriptionEnter description.
Step CounterEnter step counter number.

Team Members

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

Param NameDescription
StyleChoose style.
List StyleSelect members list style.
CountEnter number of tetimonial items to display.
CategoriesSelect categories to limit result from. To display result from all categories leave all categories unselected.
Style - Carousel ( Slider Settings )
Show Pagination ControlSelect this checkbox display pagination controls.
Show Prev/Next ButtonsSelect this checkbox to display prev/next buttons.

Testimonials

This element allows to display testimonials from Testimonials section.

Param NameDescription
StyleChoose style.
ColorSelect testimonials color.
CountEnter number of testimonial items to display.
ColumnsEnter number of testimonial columns to display.
CategoriesSelect 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 NameDescription
StyleChoose style.
ShapeSelect shape.
Title ElementSelect title element type from H2 to H6.
Timeline DataThis is repeater field where you can add multiple items. This contains below fields.
TitleEnter title.
DescriptionEnter description.
DateEnter date in YYYY-MM-DD format.

Tabs & Tour

We added below settings to Tabs and Tours shortcodes.

Param NameDescription
Tabs Shortcode
Full Width TabsSelect this checkbox to display tabs equaly divided to width of tabs area.
Tour Shortcode
Icon AlignmentSelect 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 NameDescription
Boxed IconSelect this checkbox to display boxed icon, if icon is added/enabled.

Row

We added below settings to Row shortcode.

Param NameDescription
Backgrund Tab
Row Background Color TypeSelect 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 ColorSelect overlay backgrund color.
Note: This field will be applicable only if "Enable Overlay" checkbox is selected.
Extras Tab
Vertical Half OverlapSelect this checkbox to place current row above previous and next rows.

Message

We added below settings to Message shortcode.

Param NameDescription
Hide IconSelect this checkbox to hide icon.
Closeable BoxSelect this checkbox to display close button and hide box by clicking close button.

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:

  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.

Plugins Documentation

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.

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.

Suggest Edit