Intro

Hello! First of all we would like to thank you for purchasing our theme! :) 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 theme!

Best regards,
AnpsThemes

Jump start

If you want to set the theme up and running as quickly as possible, please follow this check list:

  1. Create a fresh installation of wordpress
  2. Upload the theme through WP dashboard in Appearance -> themes -> Add New -> Upload Theme
  3. When you activate the theme, a notice will appear to install required plugins. Install them.
  4. After plugins are installed, visit Theme options -> Dummy Content and install your prefered demo.
  5. Demo install might take few minutes, after it is done, just edit the pages, add your content and replace placeholders with your own images.

After you've imported the demo content, you can adjust and alter all elements to your liking, by

Page Elements

Theme Options Page Elements

First lets introduce elements that are available to you throughout the site.

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

  2. Logo: Logo is your brand indetity. It should be clearly visible on all pages.
    Our theme supports multiple Logos. In theme options -> Logos & Media you can upload General logo, Front page logo, Sticky logo and Mobile logo. You can also set the height of logos here. On each page separatly this options can be overridden if needed.

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


  4. Page Heading: Page Heading can be turned on and off in Theme options -> page layout. This options can also be overriden on each page separatly.


  5. Content:


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


  7. Copyright Footer:

Theme Options

Inside Theme Options you can change almost everything. From font styles to 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

Color management

Color management is accessed by clicking Theme options -> Color Management

Predefined Color Scheme

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

color schemes
Setting the colors
For fine control over colors, you can modify almost each color used in the theme seperatly. Some color option change more than one element on the page at the same page, like primary color or hovers color.

You can set colors by typing in the HEX values or by clicking on the colored box, which will open interactive colorpicker.

theme colors

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.

Footer Heading Text Color changes headings text color.

Copyright Footer Text Color changes text color in copyright 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.

Submenu divider color changes the color of submenu divider.

Text on top of primary color changes color of text where primary color is used as background (ie calendar title, mini cart in header,...)

Shopping cart item number background color changes background color of items number in mini cart.

Shoping cart item number text color changes color of items number in mini cart.

Typography

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:

Font sizes

For fine control over theme's typography, it is possible to adjust used font sizes 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.

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

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.

Page Layout

Inside Page Layout you will find options for managing page layout like boxed layout, default sidebars on pages and posts, page titles, breadcrumbs and background (Page Heading), you can enable page comments here for pages and set the blog layout.

page layout

Boxed

The default value for the page layout is Full Layout, but you can also select the Boxed version.
Once you checkmark 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

Page sidebars

This will change the default left and right sidebar value on all pages. Sidebar can still be overriden on each page individually.

Post sidebars

This will change the default left and right sidebar value on all posts. Sidebar can still be overriden on each post individually.

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

Heading

Here you can manage global display option for page title and breadcrumbs.

Page comments

Here you can enable/disable comments on pages.

Blog layout

Here you can manage default display on blog/category/tag/archive pages.

Page Setup

Here you can set up 404 page, excerpt length, Portfolio style and slug, mangae display of meta data like categories, author, tags and date on archive pages and single posts.

Excerpt length

Default excerpt length is set to 40 characters. You can change this value if you want to change default excerpt length on archive pages.

404 error page

When user visits an url on your site which does not exists in the database, error page is displayed. Here, you can set which page is displayed in this case.

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

Portfolio slug

Default slug in url is portfolio, here you can change it to any other word.

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

POST META ON BLOG / CATEGORIES / TAG / ARCHIVE PAGES

In this section you can set what post meta data you want to be displayed. Just add a checkmark next to the Comments, Categories, Author and Date, if you want to display them.

POST META ON SINGLE POST

In this section you can set what post meta data you want to be displayed. Just add a checkmark next to the Comments, Categories, Author, Date and Tags, if you want to display them.

Header options

This is the most extensive theme option page. You can set here every aspect of header and navigation display.

MENU LAYOUT OPTIONS

By clicking on one of the two images, you can chose between the horizontal and vertical navigation. menu type

By selecting one option, additional settings panel for this option will be displayed.

Horizontal menu

horizontal menu is default setting for the theme. If selected, you can than choose between top and bottom menu on the home page and set the text color, background color, link hover color, set the centered menu, top bar color, and header transparency.

After setting the option for the front page, you can set this setting as global, so it will be used on other pages aswell. Or you can set the global options independently.

Not all options are compatible, the interface will dimm the options, that are not compatible with selected choices. For example Top bar color can ony be set here if you choose transparent header.

Vertical menu

When you set the global menu option to "Vertical menu", additional options for vertical menu are displayed. You can set Text color in the menu, Background color and link hover color. You can also upload custom Background image, which will be displayed in vertical menu.

GLOBAL HEADER OPTIONS

Here you can turn on or off display of top bar, Above navigation menu bar, set sticky menu behaviour, turn on search icon on the navigation separatly on mobile and desktop display and turn on/off the mega menu. If you are using third part mega menu plugin, you should turn this off.

HEADING BACKGROUNDS

Here you can set the global option for page headings and Search page background.

The selected background will apply globaly over all pages. On each page you can upload its own background which will override the current setting in this panel for that page alone.

Selected Search page background will be the background color of search results page.

In this section you can set various options, which control the display of footer.

Footer

Here you can enable or disable footer display globaly.

Further you can choose footer and prefooter style. You can set how many columns do you want displayed in footer/prefooter.

After you've set the columns, you can add widgets to footer sidebars.

Desktop style

You can choose between classic and fixed footer on desktop displays. This modifies way footer appears when scrolling down the page.

Mobile layout

On mobile footer can be shown eider on 1 or 2 columns. Even if two columns are selected, it will gracefully still default to one column on really small screens.

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

Woocommerce

This is woocommerce specific, if you don't have woocommerce e-shop installed, they are irellevant.

Display shopping cart icon in header?

You can define here if you want the mini cart to be displayed in main menu. You can choose among three options:

If you choose the first option Cart will not be displayed. You can still add the cart as a widget into the top bar or above navigation bar.

The second option will display the cart only on woocommerce related pages, such as product page or shop page,...

The last option will display cart on every page.

Layout

Here you can choose the number of products displayed in one row on a shop page. This option allows you to choose between 3 or 4 products in one row.

Logos and Media

In this section you can set different logos and their size (height).

Logo

This is the general logo. If you have only one version of your logo, you don't need to upload any other logos to the page. After general logo is defined, it will be used everywhere.

For fine control over which logo appears in which case, there are additional logo options.

Front page logo

You can specify logo for front page only. This is usefull if you have slider on the front page and header is set to transparent. In this case the general logo might not be perfect in terms of contrast.

Sticky logo

Sticky logo appears in sticky menu.

Transparent Sticky logo

Transparent sticky logo appears on sticky menu, if it is set to transparent header.

Mobile logo

This logo will appear on mobile devices. If no specific logo is defined, the general logo will be displayed.

Logos can be also defined on every page sparately. If the logo is defined on a specific page, than this setting will override settings in theme options.

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.

How to import Dummy Content

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


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

Automatic installation (inside Theme Options):

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!

Important: Please note that theme options, widgets, slider won't be installed!

Theme upgrade

We tend to release upgrades of 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 Upgrading the Theme.

If you are customizing the theme and you are changing the theme files, we suggest creating a child theme. Using child themes for customization enables safe upgrading of your theme in the future, without loosing any of custom changes.

Customizer

You can also change some theme options settings in customizer. You can find it in Appearance -> Customize and than select Theme options. Everything saved in Customizer will be synchronized with theme options and vice versa. If you want to know more about theme options settings, you can read it under Theme options section.

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.

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

  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.

How to Add Recent Blog element in VC:

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

How to Add Recent Portfolio element in VC:

You can define:

recent portfolio vc element

Featured content element

You can create own featured content which is below slider or independent element. We suggest you to use 3 featured elements for best effort.

featured content element
You can add next options:

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.

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.

How to Add Counter element in VC:

You can define:

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

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 - Plugin Options - Google Maps and input your API key in the input field.

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

google maps

How to Add Google Maps element in VC:

You can define:

google maps vc element

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

New window appears.

google maps item settings

You can define:

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.

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.

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.

How to Add Testimonials element in VC:

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.

How to Add Button element in VC:

You can define:

button vc element

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.

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

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

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.

This gallery images are displayed as a slider on the blog post 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.

Adding Portfolio Posts

Portfolio single item styles

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

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

  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.

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

Double column menu display. Only one level menu supported.



AnpsThemes - Mini Cart

Widget without options. You can add woocommerce mini cart to any widget area. For example into above navigation sidebar.



AnpsThemes - Opening Time

In opening time widget you can set day (for example: Monday), time (for example: 10:00 - 18:00). You can also set if this day is exposed or not (automatically added new class). You also have + button to add new days.



AnpsThemes - Recent News

Our widget recent news is a bit different than native wordpress widget. There are construction style and also images from recent posts.



AnpsThemes - Recent Projects

With recent projects widget you can show latest portfolio posts with images. Enter the title for recent projects and number of projects to be displayed.



AnpsThemes - Social icons

You can select between 4 styles: default, minimal, border and transparent border. You can also select icon and add url for this icon. Links can open as: self, blank, parent and top. You can add unlimited icons.



AnpsThemes - Spacing

With spacing widget you can add spacing between widgets in px.



AnpsThemes - Text and icon

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

Read more about WooCommerce widgets here.

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

Site Optimization

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

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