Intro

Hello! First of all we would like to thank you for purchasing our template! :) If you have any questions that are beyond the scope of this help file, please feel free to send your question on anpsthemes.freshdesk.com

This file will teach you how to set up and use our theme.

This file is really extensive so you might think the theme is hard to use, actually it's not, you probably just might jump in the code and explore everything yourself, this file is more of a reference work if you do not know what to do.

Have fun using our template!

Best regards,

AnpsThemes

Page Elements

Theme Options Page Elements

First lets introduce elements that are available to you throughout the site.
On the image below there are displayed elements on the standard demo of Constructo, but note that you can adjust and alter this elements to your liking, by editing Theme Options settings or using Visual Composer.

page elements
  1. Top Bar: Top Bar consists of brief but important company data such as telephone number, social links, email and opening hours. You can:


  2. Logo: Logo is your brand indetity. It should be clearly visible on all pages. You can:


  3. Main Menu: is the main navigation. You can:


  4. Page Heading: Page Heading is optional on every subpage. By default it consists of breadcrumbs, page title and background image. You can:


  5. Submenu: submenu displays additional dropdown menu

  6. Side Submenu (sidebar):

  7. Slider: Revolution Slider is included. You can:
  8. Content:


  9. Prefooter: Displayed above Footer.You can:


  10. Footer: Footer is meant for displaying additional but important information, such as sitemap, contact forms, company information, navigation, recent posts, social links etc. You can:


  11. Copyright Footer:

Page Elements are being edited inside Theme Options and Visual Composer, so make sure you cover this two topics thoroughly.

Theme Options

Inside Theme Options you can change almost everything. From font styles to the page layout. Easily change or adjust font-sizes, colors, breadcrumbs, mobile layout, menu and footer.

Go to Theme options by clicking on Theme Options under Appearance → Theme Options.

theme options

You can also access Theme Options by hovering or clicking on the Theme Options inside the WP Admin Bar on the top of your screen.

theme options admin bar

Style Settings

This is where you can adjust Theme Style (font, buttons and color adjustments), update Google Fonts, upload your own Custom Fonts and add Custom CSS

First lets take a look at our Theme Style options.

Theme Style

You can choose differenet front page headers by following the next steps:

theme style

Here is a list of features that are availible for you to customize.

We will thoroughly explain to you what each option can do.

Font family

Specify three font types:

Character subsets

Below the Font Family you can also specify the subsets of character encoding for that specific font family. Character subsets varies from font to font (i.e. PT Sans supports Latin, Latin-ext, Cyrillic and Cyrillic-ext meanwhile Montserrat only supports latin).
Character subset will automatically refresh when you select a different font family.

If you chose a Font, but it doesn't show some of the characters as it should chances are that this font family doesn't support the desired character subset and you should find one that does.

Since many of our fonts are included from Google Fonts, you can easily search for your perfect font by filtering the results based on the desired character subset on Google Fonts website.

font family

When selecting a font family you will be able to choose a font from three groups:

Custom Font sizes

Theme supports custom font sizes. It is possible to define custom font-size for:

font sizes

Adjust the font-size to your desires by entering new value in the input. After that click Save Changes button at the bottom of the Theme Options panel.

Predefined Color Scheme

When you choose a color scheme, it will only fill in the options below, so you can still change any color, without editing the predefined colors.

color schemes

Color Scheme has influence on Hovers Color (links when hovered by mouse) and Button Hover state colors on Button Styles.

Setting the colors

Set colors by typing in the HEX values or click on the colored box, which will open our colorpicker.

theme colors
colorpicker

Text Color will change the color of the raw content text.

Primary Color change the color of icons, tabs upper border, text of visited page in breadcrumbs, username in comments.

Hovers Color applies to all hover states.

Menu Text Color applies to the text in the menu (navigation)

Headings Color applies to heading across the site. It also applies for the headings in Sidebar and previous pages in breadcrumbs.

Top Bar Text Color applies to the text in the Top Bar. Top Bar is above the logo and navigation.

Top Bar Background Color changes the background color of the Top Bar section.

Footer Background Color changes the background color of the footer.

Copyright Footer Background Color changes the background color of the copyright section which is a bit below the footer.

Footer Text Color changes the text in the Footer section.

Page Header Background Color changes the background color of the Page Header section. Page Header is located below the Header and above the Content.

Submenu Background Color changes the background color of a dropdown submenu in navigation.

Submenu Text Color changes the text color of a dropdown submenu in navigation.

Side submenu Background Color changes the background color in the side submenu.

Side submenu Text Color changes the text color in the side submenu.

Side submenu Text Hover Color changes the text hover color in the side submenu.

Customizing the buttons

There are 6 different button types, each of them is customizable.

You can customize their background color, text color and their hover states.

Each customization can be previewed after Saving all Changes at the bottom of the Theme Options panel.

button styles

You can choose from these button styles in Visual Composer when choosing the Button element.

Update Google Fonts

At the initial theme installation no fonts will be added so you will need to import them by pressing Update Google Fonts in this section. Note that the process might take a while, as there are quite a lot of font families that need to be imported.

If in the future you will see a new Google Font and would like to use it on your site, then import the fonts again by pressing Update Google fonts.

google fonts

Upload Custom Fonts

This section allows you to add new font families. The fonts can be easily added by selecting a .zip file (you need to provide more than just one font file type, so that all browser will be able to use you font) and pressing Save all changes.

custom fonts

Custom CSS

This section is intended for front end developers. Custom CSS section enables you to customize your site beyond theme options. Learning CSS is easy as it is not an advanced programming language. Most of the style customization can be achieved with CSS. Using tools like Firebug or browser native developer tools will help you to search for the CSS rulesets, which you can change to your liking and paste the CSS code to the custom CSS section of theme options. For learning CSS there are many resources on the web. You can start here: w3schools.

General Settings

Inside the General Settings section you can find Page Layout settings, Page Setup settings, Analytics, Logos & Media, Dummy Content import and Theme Upgrade.


general settings

Page Layout

Inside Page Layout you will find options for managing slider (hidden or visible on mobile), boxed layout, disabling of page titles, breadcrumbs and background (Page Heading) and selecting mobile layout between 1 column and 2 columns.

page layout

Hide slider on mobile

By clicking on the on/off button you can toggle between hiding or showing the slider on mobile devices.

slider mobile

Boxed

The default value for the page layout is Full Layout, but you can also select the Boxed version.
Once you will select the Boxed version you will be able to choose from nine predefined patterns or a custom background, which you can set to either a stretched or tilled image.
Tilled is best used for adding your own patterns or you can pick a solid color.

boxed

Disable page title, breadcrumbs and background

This options will hide the Page Heading section (below main menu on single pages such as about us, blog post single etc.)

page heading

Disable breadcrumbs

Turning on this option will hide the breadcrumbs. Page Heading will be still visible.

Breadcrumbs are meant for showing the user his location on the website. Breadcrumbs are displayed inside Page Headings on Single Pages in next order: Grandparent Page / Parent Page / Child Page.

breadcrumbs

Vertical Menu

Turning on this option will display menu vertically positioned to the left instead of horizontally.

You can also upload a background image for the main menu background.

vertical menu

Mobile Layout

Here you can select two types of mobile layouts. One column or two column. This will be applied to Footer and Prefooter.

Meaning that with two column the content of the footer will be in two columns.

Page Setup

This is the section where you can specify different page roles such as Coming Soon Page and 404 Page (page not found).
You can also modify the Shopping Cart Icon for Woocommerce, change Portfolio Single styles and Portfolio Footer.
Below that there are four different types of Headers which you can customize.
This is also where the General Top Menu, Prefooter and Footer settings can be modified.

page setup

Coming Soon Page

Lets say that you are still building your page, but your domain is online and some visitors are already visiting your website.
Because your web page still needs some work, you can show them this site, which will nicely welcome them and tell them to return in a few days.
When clicking on the select box a dropdown with the list of pages appears. Selecting a page will mean that all the users visiting your web site will be shown this particular page.

coming soon page

404 Page (Page not found)

Select a page from a drop down of already added pages, which will be displayed on 404 errors.

WooCommerce

Display shopping cart icon in header?

This option takes affect only if you use Woocommerce on your site. It defines behaviour of the cart icon, displayed in the header. You have three options how you can display the cart icon:

Portfolio Single Style

Portfolio single is specific page for each item in your portfolio. This page is meant to describe your project, product or service more thoroughly, with plenty of pictures and content.

Changing portfolio single style will apply to all portfolio single pages.

There are two types of Portfolio Single Styles.

For creating Portfolio Posts please refer to Adding Portfolio Posts

Portfolio single footer

The content you insert in this textarea is shown below the portfolio content and above the footer on all single portfolio pages.

portfolio single footer

Front page Top Menu

You can choose differenet front page headers by following the next steps:

front page top menu

There are 4 different front page headers you can choose from.

types of header

If you choose the third or the fourth option, a textarea will apear below, where you can enter the shortcode for the slider. This slider (or any other shortcode you enter inside the textarea) will be loaded before the header of the page. This gives you a lot of new options for building the front-page layout.

Type 1
front page type

When you choose the first type of Front Page Top Menu you will be presented with five customization options.


type one settings
Type 2
front page type

When you choose the second type of Front Page Top Menu you will be presented with three customization options.


type two settings
Type 3
front page type

When you choose the second type of Front Page Top Menu you will be presented with three customization options.


type two settings
Type 4
front page type

When you choose the second type of Front Page Top Menu you will be presented with three customization options.


type four settings

General Top Menu Settings

Here you will find customization options that are influencing top bar and top menu sections.

general top menu
Display Top Bar

Default value "Yes" means that Top Bar will be displayed on all pages.

Value "No" will hide the Top Bar feature across all pages.

top bar displayed
Menu

Can be set to either normal or description. If set to description it will display the description text below the top level links.

Menu Centered

If checked, the main navigation will be centered. This results in logo displaying centered above the main navigation.

menu centered
Sticky Menu

If this option is set, the menu will be always shown on the top of the page, even on scrolling.

Make sure to upload a Sticky Logo in the LOGOS & MEDIA section.

Click on the upload button, choose the image you like inside the media library or upload a new one. Click on the "Insert into post" button when finished.

Below you can see an example of sticky menu in action.

sticky menu
Sticky logo transition

This option will take effect only if sticky menu is checked. This option enables different transitions between standard logo and sticky logo. Transitions are just different visual effects, when standard logo changes to sticky logo. When you change an option, you can observe changes by scrolling with yor mouse up and down.

Display search icon in menu?

This option will toggle on/off the search functionality in main navigation. If checked, a search icon will be displayed in the main navigation area.

This setting only applies to desktop and laptop pc's and wont make any changes to mobile and tablet versions.

search desktop
Display search on mobile and tablets?

If checked, search will not apear on tablets and mobile devices.

search mobile
Prefooter

If checked, the prefooter widgets areas will become available. You can than choose how many columns will be displayed with setting "Prefooter style" option.

Prefooter Style

You can select three prefooter styles: 2 columns, 3 columns or 4 columns. Once you select a prefooter style the appropriate widget areas will appear under Appearance - Widgets.

Footer

To disable/enable footer, change styles and copyright footer follow the next steps:

Disable footer

Check this, if you don't want the footer to be displayed.

Footer Style

You can select three footer styles: 2 columns, 3 columns or 4 columns. Once you select a footer style the appropriate widget areas will appear under Appearance - Widgets.

There you will find Footer widgets that can be edited.

footer columns

On the image above, you can see a footer set to 4 columns, with widgets such as navigation, recent projects and text.

Copyright Footer

Determines the copyright footer widget areas. Can be set to either 1 columns (which is centered aligned) or 2 columns.

You can edit copyright footer content inside "Widgets" under Appereance section in your Admin Panel. There you will find Copyright Footer widgets that can be edited.

copyright footer

At the bottom you can see the Copyright Footer set to two columns (the second column is empty).

Legacy Mode - Visual Composer

If you had our Theme before the release of Visual Composer 4.6 then you might want to check the Legacy Mode, so that it offers the backwards compatibility meaning that your content and elements in VC will stay positioned as they were before.

Otherwise leave Legacy Mode unchecked.

To enable Legacy Mode follow the next steps:

legacy mode

Analytics

Here you can set your email address that is used for the contact form and Google Analytics account.

Logos and Media

Here you can find settings for page heading backgrounds, favicons and logo.

Page heading background

Background for the page heading element, that is located just below the main navigation.

It will only be applied to those pages where no custom page heading is specified.

To customize page headings follow the next steps:

page heading upload

Search page heading background

Background for the search page heading element, that is located just below the menu.

To customize search page heading follow the next steps:

search page heading upload

Logo

The selected image will be used as your site logo, which will be shown at the top left of your site.

You can specify the default logo and the sticky logo.

logo settings

Auto adjust logo size?

Here you can specify if you want your logo to be automatically adjusted.

adjust logo size

This is the recommended option.

Note: in case your logo is pixelated, upload a bigger version of it.
Logo Width and Logo Height

Here you can manually adjust the logo with and height.

Specify the width and height of your logo.

logo size
Note: use a porportionate ratio for good results.

Sticky Logo

If you use a sticky menu on your site, you can upload a smaller version of your logo for sticky menu here.

sticky logo

Note: Sticky nav is smaller in height than the normal navigation, thats why you should create a smaller version of your logo for Sticky Logo.

Favicon

You can upload an image - icon, that will be shown at the top of browsers for your site. You can upload .png and .ico files.

favicon favicon upload
Note: you can upload .png and .ico files.

Dummy Content

Importing demo content with one click dummy content import is the fastest way to get you started with your new theme. After importing the demo, you just change images and text. You can also learn how to setup the pages from these examples.

Important: Please make sure you have set your links to pretty link, so you won't receive any errors, check also menu description below.

Important: If you are having trouble inserting dummy content and are receiving server errors, you will probably need to set your file permissions on folder wp-content/uploads ( if you don't have the folder, create it manually and set the permissions only on this folder ).

If you don't want to set, can't or don't know how to set file permissions, you can download this .zip file and place it into wp-content folder.

Automatic installation ( inside Theme Options ):

How to import Dummy Content

dummy content
Note: install and activate all of the demanded plugins (Visual Composer, Revolution Slider, Contact Form 7 etc.).

Manual installation ( with WordPress Importer ):

Installing the WordPress Importer:

In our theme files you will find a .xml file (under anps-framework/classes/importer/dummy.xml). Use that file in the next step where it says: "Choose a WXR (.xml) file to upload, then click Upload file and import." and click on Upload file and import. In the next step you need to assign all the posts/page to a existing user or create a new user. In this step also be sure to have the Download and import file attachments checked, then click on the Submit button and you are done!

Theme upgrade

We tend to release upgrades to our themes quite a lot. Upgrades usually bring new features and bugfixes. By creating an API key on themeforest you can automate the upgrade procedure.

Read more about Theme Upgrade under Updating the Theme.

Megamenu

To create a megamenu you will first need to go to Appearance → Menus and open the Screen Options and checking the CSS Classes and Description options (you can also check the Product Categories if you intend to use them). Click on Save Menu to save the settings.

Then you need to assign a megamenu class to the parent element - the element at the top most of the structure (in the below examples this means to the Shop element).

Adding links

To add a group of links, you need to first add a parent element that will contain the title.

When adding the parent element set the URL to "#", the Navigation Label to the desired title (in our example we named it Links) and assign a column layout class (.col-md-4 for example) class to it, so it changes it to a heading.

Adding Text

Create a new element and set the URL to "#", the Navigation Label to the desired title (in our example we named it Links), assign a no-link class to it, so it changes it to a heading and insert you text in the description area.

Adding images

You can use the [image url="#" target="_blank" alt="Alternative text"]Image URL[/image] shortcode inside the description area to add images.

Notices

To use all of our advanced menu styling, it is suggested that you ckeck the Primary Navigation checkbox in your Menu settings after creating a new menu in Apperance -> Menus

Visual Composer

Visual Composer is a drag-and-drop builder that comes included with our theme.

Install Visual Composer

Note: on some features (such as post, product, team and portfolio) VC is disabled by default. To enable Visual Composer for these features go to "Visual Composer → General Settings" and check the checkboxes of desired pages.
visual composer general settings

Theme Elements

These are our custom designed Visual Composer elements.

Blog element

This element is used for displaying blog posts. It consists of blog posts that are added in "Posts" → "Add New". For adding blog posts click here.

You can define:

Portfolio element

Portfolio consists of portfolio posts that are added in "Portfolio" → "Add New". More about adding portfolio posts you can see here.

portfolio classic style
  1. Filter: filters portfolio posts based on their category
  2. Portfolio Posts: linked to single portfolio page

How to Add Portfolio element in VC:

You can define:

Team element

Team element is used for displaying team members/employees on your website. Team consists of team items that are added in "Team" → "Add New".

team
  1. Team Item: is a single item inside the Team element.
  2. Featured Image: add feature image by adding an image to the "Featured Image" panel on the right (on the Edit Item page).
  3. Team Item Title: add title by entering text in the upper input area on the "Edit Item" page.
  4. Team Item Subtitle: add subtitle by entering text in the "Team Subtitle" panel on the bottom (on the Edit Item page).
  5. Team Item Description: add description by entering text in the main textarea on the "Edit Item" page.
team item

How to Add Team element in VC:

team vc element

Recent Blog element

Recent Blog is used for displaying recent blog posts. It consists of blog posts that are added in "Posts" → "Add New".

You can read more about Adding Blog Posts here.

recent blog posts

How to Add Recent Blog element in VC:

recent blog vc element

Recent Portfolio Slider element

Recent Portfolio Slider is used for displaying recent portfolio posts in slider. It consists of portfolio posts that are added in "Portfolio" → "Add New".

Read more about Adding Portfolio Posts here.

recent portfolio slider vc
  1. Portfolio Title is used for displaying portfolio posts
  2. Portfolio Post are displayed from "Portfolio" in WP Admin Panel.
  3. Next/Prev Buttons are used for slider navigation

How to Add Recent Portfolio Slider element in VC:

You can define:

recent portfolio slider vc element

Recent Portfolio element

Recent Portfolio is used for displaying recent portfolio posts in grid. It consists of portfolio posts that are added in "Portfolio" → "Add New".

Read more about Adding Portfolio Posts here.

recent portfolio vc

How to Add Recent Portfolio element in VC:

You can define:

recent portfolio vc element

Twitter element

Twitter element displays your posts on twitter and adds the "follow us" button. It also includes background image or solid background with parallax effect that can be turned on and off.

twitter

How to Add Twitter element in VC:

You can define:

twitter vc element

Alert element

Alert element displays alert box.

alert

How to Add Alert element in VC:

You can define:

alert vc element

Counter element

Counter element counts from min number to max number interval.

counter

How to Add Counter element in VC:

You can define:

counter vc elements

Progress element

Progress element is used for visually displaying graphs of progress.

progress

How to Add Progress element in VC:

You can define:

progress vc element

Icons element

Icon element is meant for placing icons. It includes title, subtitle and text beneath or next to an icon, title and subtitle.

Icon colors are set inside Theme Options -> Style Settings -> Theme Style.

icon style

How to Add Icon element in VC:

You can define:

Quote element

Quote element is meant for displaying quotes. It consists of quote icon and quote text.

Quote color depends on Primary Color which is set inside Theme Options -> Style Settings -> Theme Style.

How to Add Quote element in VC:

You can define:

quote vc element

Color element

Color element is meant for displaying quotes. It consists of quote icon and quote text.

How to Add Color element in VC:

You can define:

Dropcaps element

Dropcaps element displays text with a dropcap letter.

How to Add Dropcaps element in VC:

You can define:

dropcaps vc element

Statement element

Statement element displays a statement.

statement

How to Add Statement element in VC:

You can define:

After you have create Statement element in VC you should add elements into the Statement element by clicking the "+" icon inside Statement element field in VC.

Heading element

Heading element displays a heading.

heading left

How to Add Heading element in VC:

You can define:

heading vc element

Google Maps element

As of June 2016, Google Maps no longer support keyless access and requires an API Key to work. Go to https://developers.google.com/maps/documentation/javascript/get-api-key and follow the described steps to retrieve an API key.

Once you receive your API Key, inside the WordPress admin dashboard navigate to Appearance - Theme Options - Google Maps and input your API key in the input field.

Google Maps element displays specified location in Google Maps.

google maps

How to Add Google Maps element in VC:

You can define:

google maps vc element

Google Maps Advanced element

Google Maps Advanced element displays specified location and description in Google Maps. You can also upload custom pin.

advanced google maps

How to Add Google Maps Advanced element in VC:

You can define:

advanced google maps vc element

After you have create Google Maps Advanced element in VC you should add Google Maps Advanced Item by clicking the "+" icon inside Google Maps Advanced element field in VC.

New window appears.

advaced google maps item settings

You can define:

Vimeo element

Vimeo element is used for displaying Vimeo videos.

vimeo

How to Add Vimeo element in VC:

You can define:

vimeo vc element

Youtube element

Youtube element is used for displaying Youtube videos.

youtube

How to Add Youtube element in VC:

You can define:

youtube vc element

Social Icons element

Social Icons element is used for displaying social icons that can be linked to your social network page.

social icons

How to Add Social Icons element in VC:

You can define:

social icons vc element

Contact Info element

Contact Info element is used for organized contact information. It consists of an icon and text next to it.

contact info

How to Add Contact Info element in VC:

You can define:

contact info vc element

FAQ element

FAQ element is used for displaying frequently asked questions in organized manner (with accordion).

faq

How to Add FAQ element in VC:

You can define:

faq vc element

Logo element

Logo element is used for displaying logos.

logo

How to Add Logo element in VC:

You can define:

logo vc element

Testimonials element

Testimonials element is used for displaying testimonials of users, customers, clients etc.

testimonials

How to Add Testimonials element in VC:

You can define:

testimonials vc element

After you have created the element in VC you should add Testimonial Items into the Testimonials element by clicking the "+" icon inside Testimonials element field in VC.

testimonial item vc settings

Button element

Button element is used for displaying buttons.

button

How to Add Button element in VC:

You can define:

button vc element

Pricing table element

Pricing table element is used for organized displaying of pricing lists inside a table.

pricing table

How to Add Pricing table element in VC:

You can define:

pricing table vc element

Insert Pricing Table Item by clicking on the "+" icon inside Pricing Table element in VC.

New window pops up. Here you can

pricing item vc settigns

You can define:

List element

List element is used for lists.

list item

How to Add Pricing table element in VC:

You can define:

Insert List Item by clicking on the "+" icon inside List element in VC.

New window pops up. Here you can

list item vc settings

You can define:

After that you should see List item inside your List element in VC.

list item vc element

Accordion element

Accordion element is used for neatly displaying information that is neatly organizied in different Accordion Items that toggles (open for more information) when the user clicks on it.

accordion

How to Add Accordion element in VC:

You can define:

Insert Accordion Item by clicking on the "+" icon inside Accordion element in VC.

New window pops up. Here you can

accordion item vc settings

You can define:

After that you should see List item inside your Accordion element in VC.

Build Accordion Items content by adding other Visual Composer elements inside the Accordion Item, in our example we added a heading element and beneath it a text block element.

accordion item vc element

Error 404 element

Error 404 element is used for neatly displaying information that is neatly organizied in different Accordion Items that toggles (open for more information) when the user clicks on it.

error 404

How to Add Error 404 element in VC:

You can define:

After that you should see Error 404 element added.

error 404 vc element

Table element

Table element is used for creating and displaying tables.

table

How to Add Table element in VC:

You can define:

After that you should see Table element added in VC

table vc element

Coming Soon element

Coming Soon element is meant to be displayed on Coming Soon pages that can be defined here.

coming soon

How to Add Coming Soon element in VC:

You can define:

Native Elements

You can choose from a wide variety of native elements in Visual Composer.

Official documentation about these elements can be found here.

Row element

Row element is used for placing content. Rows divide your page into the blocks of columns and columns hold different content items. Read more about Row Element here.

How to Add Row element in VC:

Icon element

Icon element is meant for displaying icons.

coming soon

How to Add Icon element in VC:

You can define:

After that you should see Icon element added in VC

coming soon vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Separator element

Separator element is meant for neatly organizing your page. It creates a line that divides two different sections.

separator

How to Add Separator element in VC:

You can define:

After that you should see Separator element added in VC

separator vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Separator with Text element

Separator with text element is meant for neatly organizing your page. It consists of a title and a separator line.

separator with text

How to Add Separator with text element in VC:

You can define:

After that you should see Separator with text element added in VC

separator with text vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Single image element

Single image element is meant for displaying images.

How to Add Single image element in VC:

You can define:

After that you should see Single image element added in VC

single image vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Image Gallery element

Image Gallery element is meant for displaying images.

How to Add Image Gallery element in VC:

You can define:

After that you should see Image Gallery element added in VC

image gallery vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Image Carousel element

Image Carousel element is meant for displaying images.

How to Add Image Carousel element in VC:

You can define:

After that you should see Image Carousel element added in VC

image carousel vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Tabs element

Tabs element is meant for displaying content inside tabs section.

tabs

How to Add Tabs element in VC:

You can define:

After that you should see Tabs element added in VC

tabs vc element

Add new tabs by clicking on the "+" icon inside Tabs Element section.

New window appears.

tabs item vc settings

You can define:

Add Tabs items by clicking on the big "+" icon inside Tabs element.

New window appears. Add elements and set their settings. On the image below you can see Tabs element with various VC elements inside.

tabs vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Tour element

Tour element is meant for displaying vertical tabbed content.

tabs

How to Add Tabs element in VC:

You can define:

After that you should see Tabs element added in VC

tabs vc element

Add new tabs by clicking on the "+" icon inside Tabs Element section.

New window appears.

tabs item vc settings

You can define:

Add Tabs items by clicking on the big "+" icon inside Tabs element.

New window appears. Add elements and set their settings. On the image below you can see Tabs element with various VC elements inside.

tabs vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Accordion element

Accordion element is meant for displaying vertical tabbed content.

accordion

How to Add Accordion element in VC:

You can define:

After that you should see Accordion element added in VC

accordion vc element

Add new tabs by clicking on the "+" icon inside Accordion Element section.

New window appears.

accordion item vc settings

You can define:

Add Accordion items by clicking on the big "+" icon inside Accordion element.

New window appears. Add elements and set their settings. On the image below you can see Accordion element with various VC elements inside.

accordion vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Round Chart element

Round Chart element is meant for displaying charts in a rounded fashion.

round chart

How to Add Round Chart element in VC:

You can define:

After that you should see Round Chart element added in VC

round chart vc element

Official guide about using Pie Chart and Round Chart element can be found here and here.

Line Chart element

Line Chart element is meant for displaying charts in a line fashion.

line chart

How to Add Line Chart element in VC:

You can define:

After that you should see Line Chart element added in VC

line chart vc element

Official guide about using Pie Chart and Round Chart element can be found here and here.

Empty Space element

Empty Space element is meant for displaying empty space. This is useful for some padding purposes.

How to add Empty Space element in VC:

You can define:

After that you should see Empty Space element added in VC

empty space vc element

Post Grid element

Post Grid element is meant for displaying blog posts in a grid.

How to add Post Grid element in VC:

You can define:

After that you should see Post Grid element added in VC

post grid vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Media Grid element

Media Grid element is meant for displaying Media in a grid.

How to add Media Grid element in VC:

You can define:

After that you should see Media Grid element added in VC

media grid vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Post Masonry Grid element

Post Masonry Grid element is meant for displaying blog posts in a masonry grid.

How to add Post Masonry Grid element in VC:

You can define:

After that you should see Post Masonry Grid element added in VC

post masonry grid vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Masonry Media Grid element

Masonry Media Grid element is meant for displaying media in a masonry grid.

How to add Masonry Media Grid element in VC:

You can define:

After that you should see Masonry Media Grid element added in VC

masonry media grid vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Contact Form 7 element

Contact Form 7 element is meant for displaying contact form.

contact form

How to add Contact Form 7 element in VC:

You can define:

After that you should see Contact Form 7 element added in VC

contact form vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Revolution Slider element

Revolution Slider element is meant for displaying a Revolution Slider.

revolution slider

How to add Revolution Slider element in VC:

You can define:

After that you should see Revolution Slider element added in VC

revolution slider vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

For more information please refer to Revolution Slider support here.

WooCommerce Elements

You can choose from a wide variety of WooCommerce elements in Visual Composer.

Official support and documentation for WooCommerce plugin is available here.

Cart element

Cart element is meant for displaying user added items of shopping cart.

cart

How to add Cart element in VC:

After that you should see Cart element added in VC

cart vc element

Checkout element

Checkout element is meant for displaying checkout forms.

checkout checkout list

How to add Checkout element in VC:

After that you should see Checkout element added in VC

checkout vc element

Order Tracking Form element

Order Tracking Form element is meant for tracking ordered items.

order tracking form

How to add Order Tracking Form element in VC:

After that you should see Order Tracking Form element added in VC

order tracking form vc element

My Account element

My Account element is meant for displaying user account settings.

my account

How to add My Account element in VC:

You can define:

After that you should see My Account element added in VC

my account vc element

Recent Products element

Recent Products element is meant for displaying your recently added products.

recent products

How to add Recent Products element in VC:

You can define:

After that you should see Recent Products element added in VC

recent products vc element

Featured Products element

Featured Products element is meant for displaying products that are featured (labeled with star in the "Products" page).

featured products
Note: you should label a product as featured by going to "Products" and clicking on the Star icon in WP Admin Panel.

How to add Featured Products element in VC:

You can define:

After that you should see Featured Products element added in VC

featured products vc element

Product element

Product element is meant for displaying a single product item.

product

How to add Product element in VC:

You can define:

After that you should see Product element added in VC

product vc element

Products element

Products element is meant for displaying more products.

products

How to add Products element in VC:

You can define:

After that you should see Products element added in VC

products vc element

Product Page element

Product Page element is meant for displaying more products.

product page

How to add Add Product Page element in VC:

You can define:

After that you should see Product Page element added in VC

product page vc element

Product Category element

Product Page element is meant for displaying products from a specific category.

product category

How to add Add Product Category element in VC:

You can define:

After that you should see Product Category element added in VC

product category vc element

Product Categories element

Product Categories element is meant for displaying products from more specific categories.

product category

How to add Add Product Categories element in VC:

You can define:

After that you should see Product Categories element added in VC

product categories vc element

Sale Products element

Sale Products element is meant for displaying products that are on sale.

sale products

How to add Add Sale Products element in VC:

You can define:

After that you should see Sale Products element added in VC

sale products vc element

Best Selling Products element

Best Selling Products element is meant for displaying products that are on sale.

best selling products

How to add Add Best Selling Products element in VC:

You can define:

After that you should see Best Selling Products element added in VC

best selling products vc element

Top Rated Products element

Top Rated Products element is meant for displaying top rated products.

top rated products

How to add Add Top Rated Products element in VC:

You can define:

After that you should see Top Rated Products element added in VC

top rated products vc element

For more information please refer to Visual Composer help page: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Grid elements

If you want to have our button style. Than you need to add: style-1, style-2, style-3 or style-4 under extra class name



Adding Blog Posts

Adding Blog Posts with Wordpress

Here is a brief tutorial on how to create and publish new posts.

You can insert special content elements such as headings, buttons, google maps etc. by clicking on shortcodes dropdown. To add a post to your blog go to Posts → "Add New", at the right navigation menu in your Wordpress Admin Panel add post heading, post content, add Featured image and assign the desired categories. See more details on adding posts.

Adding images

Images can be placed inside the content by clicking the "Add Media" button. New window appears where you can set additional options, such as title of an image, description etc. you can also set the image size from three predefined sizes (thumbnail, medium and large) and image alignment (left, center or right).

add media button

Adding a video to your Blog posts

Above the Featured image option (right side) on posts you can find the Featured Video option. You can add either the [youtube] or [vimeo] shortcodes to display the videos.

Read more about using these shortcodes here.

Adding a gallery of images to Blog posts

Above the Featured image option (right side) you can find the Gallery Images option.

blog post gallery

This gallery images are displayed as a slider on the blog post page.

blog post gallery page

Adding Blog Posts with Visual Composer

Inside VC Backend Editor you can easily drag-and-drop many of our custom elements (such as portfolio, team, recent blog, recent portfolio, quotes, icons, statements, accordions, testimonials, buttons, videos etc.)

On the image below you can see a custom blog page built with VC. Main Content is presented in a single column row and it consists of elements such as Single Image and Text Block. Text written below the image is caption.

Additional Information is presented in a two column row, each spanning the equal width in size. On the left column the Accordion element is placed and on the right column the Contact Form 7 element is placed.

vc builder combined

Left image: elements seen on page, right image: elements seen in Visual Composer.

  1. Empty space: used for empty space, to distance the main content and the heading for example.
  2. Text block: used for content, inside text block you can also add media files, like you would in WP editor.
  3. Heading: used for headings, it can be set to different styles such as Main Content, Left Heading, you can also specify the html tag between h1 and h5
  4. Accordion: used for displaying content in accordion-like structure.
  5. Contact Form 7: this element is used for displaying contact forms.

This is just a small set of elements that you can choose from in Visual Composer, more detailed description about using VC you can find here.

Portfolio Styles

There are two styles, that you can choose from in Theme Options.

Adding Portfolio Posts

Portfolio posts are meant for showcasing and describing your products, services, projects etc.

They are displayed in grid-like structure and when clicked more information about the project is revealed (goes to a portfolio item page).

portfolio example
  1. Sort Portfolio Posts by categories
  2. Portfolio Posts displayed in grid order. When hovered, title of portfolio appears and when clicked it takes you to the Portfolio Single Page.
  3. Portfolio Single Page is in this case using Portfolio Single Style 1.

This is an example of portfolio post page with Page Heading set to full screen and Portfolio Style set to Style one.

portfolio posts page

Sliders

Revolution slider

Our themes come included with Revolution Slider, which is one of best sliders available.

You can also copy the shortcode that is automatically generated anywhere in the text editor (WP or Visual Composer).

For more detailed information and support please refer to the official plugin website here.

Download slider dummy content: here

Widgets

You can add widget in Appearance → Widgets by drag and dropping in the Sidebar box.

Once you have added a widget to the Sidebar box the widget will open and extra fields will appear.

More information on widgets.

AnpsThemes - Download

You can add downloadable file. First title is widget title, than you can add file title and select file from dropdown list (all files from media library) or enter url to file (file external input field). You can also select icon from font awesome and color for icon and backgroud color, you can leave it empty and widget will take these colors from theme options.



AnpsThemes - Images

You can select any image from media library and shows it in any sidebar.



AnpsThemes - Social icons

You can add up to 12 social icons into different sidebars. If you will select Sidebar content checkbox, icons will be bigger like in blog sidebar.



AnpsThemes - Text and icon

You can also add link in text. Example: <a href="mailto:info@yourdomain.com">info@yourdomain.com</a>



AnpsThemes - Recent Projects

You can display Recent Projects. Enter the title for recent projects and number of projects to be displayed.

recent projects widget

Read more about WooCommerce widgets here.

Shortcodes

Alert

[alert type="warning"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, nihil?[/alert]
Name Default value Description
content * / Text that will be shown in the alert message.
type normal Changes the alert message color and icon.

Blog

[blog orderby="date" order="ASC" type="grid" columns="4" category="category-slug"]12[/blog]
Name Default value Description
content * / Number of posts to be displayed at once.
columns 3 The number of posts in a row. Can be set to either 3 or 4.
orderby The way the posts will be ordered. Can be set to date, ID, title, name or author.
order default The order in which the posts will be displayed. Can be set to default, ASC or DESC.
category / Slug of a specific category.
type The styling of blog posts. Can be set to grid or masonry.

Button

[button link="#" target="_self" size="large" style_button="style-1"]LARGE BUTTON[/button]
Name Default value Description
content * / Text that appears inside the button
link / Can contain either an URL (i.e. http://www.anpsthemes.com) or an anchor link (#contact)
target _self This attribute specifies where to display the linked resource. Can be set to _self, _blank, _parent or _top (read more about these values).
size small Determines the button size. Can be set to either small, medium of large.
style_button style-1 This changes the button styling. Can be set to either style-1, style-2 or style-3.
color / Adding this attribute will change the text color. The color needs to be added as a HEX value (ie. #000).
color_hover / Adding this attribute will change the text color when hovering over the element. The color needs to be added as a HEX value (ie. #000).
background / Adding this attribute will change the background color. The color needs to be added as a HEX value (ie. #000).
background_hover / Adding this attribute will change the background color when hovering over the element. The color needs to be added as a HEX value (ie. #000).
icon / Adds a icon inside the button. Can be set to any FontAwesome icon. The icon name needs to be specified without the fa- prefix (ie. codepen and not fa-codepen).

Color

[color style="style-1" custom="#000"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, nihil?[/color]
Name Default value Description
content * / Text that will have the specified color.
style style-1 Color style. Can be set to either style-1 or style-2.
custom / Custom specified color. Can be set to any color and will overwrite the style attribute. The color needs to be added as a HEX value (ie. #000).

Columns

[vc_column width="1/2"][/vc_column]
[vc_column width="1/2"][/vc_column]
Name Default value Description
width / Enter the layout , like: 1/2 + 1/2 or 1/3 + 1/3 + 1/3, etc.

Coming soon

[coming_soon image="" title="" subtitle="" date="2015/10/20 19:00"]content (any shortcode)[/coming_soon]
Name Default value Description
content * / You can add newsletter shortcode or any other content here.
image / Background image url.
title / Coming soon title (h1).
subtitle / Coming soon subtitle (h2).
date / Date example: 2015/10/20 19:00 (20th October 2015 at 19:00).

Contact

Our theme uses very popular Contact form 7 plugin. With this plugin you can create customized forms and add it to your pages and posts with a shortcode.
Official documentation for Contact Form 7 is available on wordpress.org.

Counter

[counter icon="codepen " max="255" min="0"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, nihil?[/counter]
Name Default value Description
content * / Counter text
min / The number from which the counter will count from.
max / The number to which the counter will count to.
icon / Adds a icon inside the button. Can be set to any FontAwesome icon. The icon name needs to be specified without the fa- prefix (ie. codepen and not fa-codepen).

Dropcaps

[dropcaps style="style-1"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, nihil?[/dropcaps]
Name Default value Description
content * / Text that will have the dropcaps letter.
style style-1 Dropcaps style. Can be set to either style-1 or style-2.

Error 404

[error_404 title="" sub_title=""]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, nihil?[/error_404]
Name Default value Description
content * / Text.
title / Error 404 page title (h1).
sub_title / Error 404 page subtitle (h2).

Faq

[faq]
    [faq_item title="" answer_title=""]TEXT[/faq_item]
[/faq]
Name Default value Description
content * / Faq text. Check example:
title / Faq title.
answer_title / Faq answer title.

Google Maps

As of June 2016, Google Maps no longer support keyless access and requires an API Key to work. Go to https://developers.google.com/maps/documentation/javascript/get-api-key and follow the described steps to retrieve an API key.

Once you receive your API Key, inside the WordPress admin dashboard navigate to Appearance - Theme Options - Google Maps and input your API key in the input field.

[google_maps zoom="15"]CONTENT[/google_maps]
Name Default value Description
zoom 15 At low zoom levels, a small set of map tiles covers a wide area; at higher zoom levels, the tiles are of higher resolution and cover a smaller area.

Google Maps Item

[google_maps_item info="" pin=""]121 Kings St Melbourne VIC 3000[/google_maps_item]
Name Default value Description
content * / Location to be shown with a pin, ie. "121 Kings St Melbourne VIC 3000".
info / You can add info which will be shown on hover over pin on google maps.
pin / If you want to use another pin on google maps, than you can upload or select it in visual composer. If you are not using visual composer, you need to enter id of image.

Heading

[heading size="3" heading_class="content_heading" h_id="heading_id" h_class="extra-class"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nostrum.[/heading]
Name Default value Description
content * / Text
type heading Heading type. Can be set to heading, content_heading or style-3.
size 1 Heading size. Can contain values from 1 to 5 (larger the value, smaller the heading size).
h_class / If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
h_id / Adds an ID attribute to the element. Useful for one page menu referencing.

Icon

[icon url="" target="_self" icon="" title="" subtitle="" position="icon-left" class="style-1"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nostrum.[/icon]
Name Default value Description
content * / Text
url / Icon, title and subtitle will be clickable.
target _self Default value is _self.
icon / Adds a icon inside the button. Can be set to any FontAwesome icon. The icon name needs to be specified without the fa- prefix (ie. codepen and not fa-codepen).
title / Icon title (h2).
subtitle / Icon subtitle (h3).
class style-1 Style-1 is for bigger icons. Style-2 is for smaller icons where icon could align left or right.
position icon-left Position icon-left is default (demo example). You can also use align right (icon-right).

List

[list class=""]CONTENT[/list]
Name Default value Description
content * / [list_item] shortcode goes here.
class / You can add class="number"

List item

[list_item]CONTENT[/list_item]
Name Default value Description
content * / List item text.

Logos

[logos]
    [logo url="" alt="" img_hover="" alt_hover=""]IMG URL[/logo]
[/logos]
Name Default value Description
content * / Image url
url / Clickable logo.
alt / Alt of logo image.
img_hover / Logo image on hover.
alt_hover / Alt of logo image on hover.

Newsletter

[newsletter /]

You can include newsletter plugin as a shortcode instead of widget.

Portfolio

[portfolio filter="on" per_page="" orderby="date" order="ASC" type="" columns="4" category="category-id" /]
Name Default value Description
per_page / Number of posts to be displayed at once.
filter on Filter on/off. Shows category filter.
columns 4 The number of posts in a row. Can be set to either 3 or 4.
orderby / The way the posts will be ordered. Can be set to date, ID, title, name or author.
order default The order in which the posts will be displayed. Can be set to default, ASC or DESC.
category / Id of a specific category.
type / The styling of blog posts. Can be set to classic, random or empty (it is for no padding).

Pricing tables

[pricing_table title="" currency="€" price="0" period="" button_text="" button_url=""]CONTENT[/pricing_table]
Name Default value Description
Content * / [pricing_table_item]
title / Pricing table title.
currency € Enter currency.
price 0 Price.
Period / Time period, example: monthly.
button_text / Enter button text.
button_url / Enter button url.

Pricing tables Item

[pricing_table_item]TEXT[/pricing_table_item]
Name Default value Description
Content * / Text

Progress

[progress procent="0" striped="" active="" color_class="progress-bar-success"]Title[/progress]
Name Default value Description
Content * / Title of progress bar.
procent 0 Procent number 0 to 100.
striped true Progress bar will be striped.
active true Progress bar will be animated.
color_class progress-bar-success There are next color class options: progress-bar-success (default), progress-bar-info, progress-bar-warning, progress-bar-danger.

Recent Blog posts

[recent_blog number="4"]
Name Default value Description
number 4 The number of posts to be displayed.

Recent Portfolio posts

[recent_portfolio number="4" category="3"]
Name Default value Description
number 4 The number of posts to be displayed.
category / The category from which the posts will be displayed.

Recent Portfolio Slider posts

[recent_portfolio_slider recent_title="Some title" number="8" number_in_row="3" category="All"]
Name Default value Description
recent_title / Title of the Recent Portfolio Slider
number / Number of recent portfolio posts to be displayed in slider.
number_in_row 4 Number of portfolio posts to be displayed in a row.
category All The category from which the posts will be displayed.

Row

[vc_row font_color="#666" el_class="extra-class" id="this-awesome-id" has_content="false"][/vc_row]

This shortcode is used for wrapping content, so that the child elements are layout correctly.

Name Default value Description
content * / Child elements
font_color / Adding this attribute will change the text color. The color needs to be added as a HEX value (ie. #000).
el_class / If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
id / Adds an ID attribute to the element. Useful for one page menu referencing.
has_content true Changes where the .container element is called. Can contain either true (the container is added), false (no container is added) or inside (inside content wrapper).

Social icons

[social_icons]
    [social_icon_item url="#" icon="" target="_blank" /]
[/social_icons]
Name Default value Description
url # Url of social network.
icon / Adds a icon inside the button. Can be set to any FontAwesome icon. The icon name needs to be specified without the fa- prefix (ie. codepen and not fa-codepen).
target _blank Url target, default is _blank.

Statement

[statement parallax="false" parallax_overlay="false" image="" color="" container="false" slug=""]CONTENT[/statement]
Name Default value Description
content * / Content (shortcode or text)
parallax false If set to "true", the shortcode will get the parallax effect.
parallax_overlay false If set to "true", the shortcode get a dark effect over the shortcode
image / Background image.
color / Background color.
container false Adds div around statement.
slug / Unique name for the shortcode

Tabs

[vc_tabs type="vertical" el_class="extra_class"][/vc_tabs]
Name Default value Description
content * / Tab elements
el_class / If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
type horizontal This attribute changes the tabs layout to either horizontal or vertical.

Tabs Element

[vc_tab icon="gear" title="Title"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nostrum.[/vc_tab]
Name Default value Description
content * / Text/Shortcodes
title / Tab title that is shown in the tab menu section.
icon / Adds a icon inside the button. Can be set to any FontAwesome icon. The icon name needs to be specified without the fa- prefix (ie. codepen and not fa-codepen).

Team

[team category="" ids="" columns="3" number_items="4"]
Name Default value Description
category / Enter team category id.
ids / Enter team item id/s separate with ,. For example ids="1,5,81".
columns 3 The number of team members in a row.
number_items -1 Enter number of team members (-1 will display all members).

Testimonials

[testimonials]
    [testimonial image="" user_name="" user_url=""]TEXT[/testimonial]
[/testimonials]
Name Default value Description
content * / Testimonial text
image / User image
user_name / User name/surname/nickname.
user_url / User url.

Text Block

[vc_column_text]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, at.[/vc_column_text]
Name Default value Description
content * / Text

Twitter

[twitter title="Our Twitter Feed" parallax="true" parallax_overlay="true" slug="twitter-slug" image="http://anpsthemes.com/Constructo/wp-content/uploads/2014/05/slider_image21.jpg"]anpsthemes[/twitter]
Name Default value Description
content * / Twitter username hadle, like anpsthemes (https://twitter.com/anpsthemes)
slug / This is used for both for none page navigation and the parallax effect (if you do not have the navigation need you enter a unique slug if you want parallax effect to function).
title / Enter twitter element title.
parallax false If set to true, the background image will have the parallax effect (http://en.wikipedia.org/wiki/Parallax_scrolling).
parallax_overlay false If set to true, it makes the background image darker.
image / URL for the background image.

Vimeo

[vimeo]23534361[/vimeo]
Name Default value Description
content * / Video ID

YouTube

[youtube]keDneypw3HY[/youtube]
Name Default value Description
content * / Video ID

Quote

[quote style="style-1"]Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, nihil?[/quote]
Name Default value Description
content * / Text that will displayed inside the quote wrapper.
style style-1 Quote style. Can be set to either style-1 or style-2.

Sidebars

Creating new Sidebar

You can add widgets to newly created sidebars by going to "Appearance → Widgets".

Adding a sidebar to a page or post

You can add a sidebar to all pages, except the portfolio page and single item portfolio page. You can add a sidebar to a page/post by selecting the desired by going to the desired item in WordPress (under Pages/Posts) and under the content editor you will see a box called Sidebars. You can select eiter only one of the sidebars, either both of them.

Important: Be carefull when adding two sidebars, because some elements aren't designed to be used with two sidebars ( two or more column sidebars ).

Adding a Sidebar

Translating the Theme

Our theme comes localisation ready out of the box.

There are several methods to create a translation, most of which are outlined in the codex (http://codex.wordpress.org/Translating_WordPress), however, we find the easiest method is to use a plugin called Loco Translate.

Translating with Loco Translate Plugin

The Loco Translate plugin provides in-browser editing of PO files used for localizing WordPress plugins and themes. Free Loco Translate Download

After installing the Loco Translate plugin you should see a new section added to your WP Admin Panel navigation area.

loco translate plugin

This is a step-by-step guide to translate your Theme with Loco Translate Plugin.

Choosing the Language
Translating

You can revert the modifications by clicking on the "Revert" button. Note: you can't revert the changes when you have already saved the file.

After clicking the "Save" button your Theme will automatically be updated with the newly added translations.

For more detailed information please refer to the official plugin website

Updating the Theme

Before you update

Everytime we update a theme you will be notified by email message. We suggesst that you keep Theme up to date, as we fix bugs and add improvements.

Caution: Always backup your files before upgrading.

How to update - Using FTP (prefered):

To update our theme, go to ThemeForest and download the newest version of our theme (you can check all of your purchased items under the Downloads tab).

theme update

Some of the FTP programs available for uploading files to server are FileZilla and SmartFTP.

Please note: our theme cannot be updated via WordPress, so if you are promted to update the theme, please do not click on the update, as you may lose your files.

How to update - Using Theme Options

Caution: Always backup your files before upgrading.

You can also update our theme by following the next steps:

Generate API key

To get your API key, log in to your themeforest account and click settings -> API Keys. Please see the screnshot below. If you do not have any generated API keys, please generate one.

generate envato api key

Upgrading the Theme

This section is important read for those who bought Constructo before the release of the 2.3.0 version.

Caution: Always backup your files before upgrading.

If you choose for disabling Legacy Mode follow the next steps:

Your page will look a bit messy i.e. some rows dont stretch full width, some elements are not positioned as they should be and tabs element doesn't display correctly.

Adjust row columns

New version of Visual Composer changed the Row Column settings.
Thus some of the rows don't span full-width and you have to manually define it inside VC. You can do this by following the next steps:

Adjust paddings

Some elements are not positioned as they should be. You can fix this by adjusting the paddings and the margins of the desired element.

Adjust Tabs element

Our Tabs element is deprecated in this version of Visual Composer.
deprecated tabs
Instead use native Tabs element. You can do this by following the next steps:

Now Tabs element should be styled properly.

tabs-native

Site Optimization

Slow website performance can be caused by different issues. Below are the 4 most common issues:

One Page Layout

Adding IDs In Row Settings

Inside the WordPress admin area, go to Pages and edit the page on which you want to set up the one page layout (usually Home). Click on "Row Settings" and add a "Row ID" for each row, where you want to have your navigation scroll to. For example, if you want the "About Us" section to be linked in the menu, you would edit its row and add an "about-us" ID to it.

Edit Row Settings

Adding Links

Go to Appearance - Menus and on the left side open the "Custom Links" tab. For the URL field write the full url path to the "One Page" layout page and add the ID (starting with "#") at the end of it. Example: http://www.anpsthemes.com/constructo#about-us. For the link text write the label of the link (what the user will see). Example: "About Us". Repeat this part for all the IDs you have set.

Add Custom Links under Appearance - Menus

Child Theme

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. The whole idea of a child theme is that you can modify, and add to the functionality of that parent theme without modifying it directly. The parent remains intact, everything is built within the child theme.

Reasons to use child theme:

Read more here

Footer

Footer is great for presenting some additional information such as your contact information, sitemap, search field, social icons etc.

You can add these features to your Footer by following the next steps:

Note: numbers in the Footer Widget area name are representing the column inside the Footer. Read more about how to specify footer columns inside General Settings -> Page Setup

You can set up the footer in the same part as Widgets, Appearance → Widgets. The only difference is you don't drag and drop in the sidebar boxes, but you add them in Footer Widget Areas. In each column you can add what you like, as the widgets look different in the footer than in the sidebars.

Bootstrap

This theme has been built using Twitter Bootstrap. We did not use every aspect of it, but only include parts of it. For example, we have removed the default Glyphicons font icons and include Font Awesome instead.

If you want to use a feature of Bootstrap that we did not include, then go to assets/sass/bootstrap.scss and uncomment the import functions.

Many elements used in this theme are almost identical to Bootstrap components, so you check their documentation if you need extra help or check if they have extra functionality that is outside the scope of our theme.

Sources and Credits