anpsthemes

Jump start

To get your theme up and running as quickly as possible, follow this checklist:

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, edit the pages, add your content and replace placeholders with your own images.

When you’re done, you can customize theme options and page elements to your liking.

Elements

Alert

Alert element has two options. First is text, which will appear inside alert element. Second is icon, where you can select between: info, danger, warning, success, useful and normal.
Each icon has own color. Example is on our demo: Notifications

Appointment

With appointment element you can show image or location (google maps). If you select image, than you won’t be able to have google maps on this place and location field will be ignored.
We suggest to use image with width 720px or greater. If you will decide to have location instead of image, than you need to fill location field with your location. Other fields are title, text and contact form.
Contact form is drop down, where you select between all contact form 7 elements. Here is an example of contact form 7, which is built only for appointment shortcode.

<div class="row">
    <fieldset class="form-group col-md-12">
       [text* name placeholder "Name"]
    </fieldset>
    <fieldset class="form-group col-md-12">
       [email* email placeholder "Email"]
    </fieldset>
    <fieldset class="form-group col-md-12">
       [tel* tel-162 placeholder "Your phone number"]
    </fieldset>
    <fieldset class="form-group col-md-12">
       [date date-173 placeholder "Select your date"]
    </fieldset>
    <fieldset class="form-group col-md-12">
       [submit class:btn class:btn-normal class:btn-md "Submit"]
    </fieldset>
</div>

Blog

Blog element will show all blog posts on this page. You can select blog category, set posts per page, order by and order. Last option is to select between columns: 1, 2, 3 or 4.
Basically you can put blog posts on every page. Using default blog option

Button

You can add button element anywhere on your page. There you can set text, link, target and select size and predefined button style (from theme options).
If you need something special, than you can set own text color, background color, hover text color and hover background color. If you will select icon, it will be before text.

Call to action

Call to action element will add text and button on your page. You can set content text color, button url, button text and select between different button types.

Contact info

Choosing this element will add a wrapper for the contact info elements. Than you just need to click on “+” to add contact info items.
There are three options for each contact info item.

• Text
• Url
• Icon

Enter the desired text inside the text field. If you want contact info to link to a specific page, paste a link into the url field. Now you only need to select an icon and you are done.

Contact info card

Choosing this element will add a wrapper for the contact info card elements. A setting will appear offering two options:

• 2 elements in row
• 3 elements in row

This will define how many cards will be displayed in one row. After adding a wrapper, click on “+” to add contact info card items.

Contact info card item will let you choose:

• Icon
• Title
• Text
• Title Color
• Description color
• Background color
• Icon color

Counter

Counter element will add number on your page and will count to this number. You can add text, maximum number and set next colors: number color, divider color and title color.
If these colors are not set, it will take default colors from theme options.

Download

Download element will add content with icon and button with icon on your page. You can also set content color. Button color will be from dark button settings in theme options.
We suggest you to use this element with visual composer strech row option. You can also set row background under row settings.

Error 404

With error 404 element you can create own “page not found”. You also need to select it from dropdown in theme options.

Featured content

Featured element will add content with an image on your site. You can set either image or video. You can set to open image/video in lightbox. Option position image above will show featured content element below slider.
You can also select between default and minimal style. There are options for button: link and icon, where you can add custom icon.

Featured horizontal content

In this element you can enter title, content, link and image.

Gallery slider

We suggest you to add minimally 5 images. If you will add more images, than there will be buttons for next and previous.
You can check example on single portfolio item.

Google maps

Google maps element will display google maps on your page. You need to create api key and add it in
plugin options. In google maps element you can set zoom, which is by default on 15. You can select between next map types: road map, satelite, hybrid or terrain.
You need to enter height in px (550 by default). You can also add custom style, we suggest you to check styles here and disable scrolling.
After this you need to add google maps item/s. Here you need to set location (full address), you can also select to show marker at center and upload custom pin icon. Last option is to add info, which will be open in popup.

Heading

Heading element has many options and you can add it anywhere on your page. You can select between next heading sizes: h1, h2, h3, h4 and h5.
There are also 3 heading classes (middle heading, content heading and left heading) and 4 different heading styles. You can also add id and/or class and than style heading by yourself.
It is also possible to change title and subtitle color.

Icon

Icon element has many options. You can enter title and description. If you want to have read more link, than enter link. You can also change target value, which is set to _self by default.
Last to options are icon selection (font awesome) and icon position. Icons example

List

You can select list icon and add unlimed list items inside list element. In list item element you can add own text.

Logos

You can choose between 2 styles and also set how many logos will be in row. Inside logos element you can add as many as you want logo elements. In logo element select image from your wordpress or enter image url.
Next two options are url, it is a link when you click on logo and alt.

Portfolio

First you need to add portfolio items. Please check here how to add them. In portfolio element you can set number of portfolio items. Select number (2 or 3) of items in row.
Next option is to select between all categories or any of other single category. You can also enable or disable filer, set mobile view to 2 or 1 column and change default order by settings.

Quote

Quote element has 2 options. First you add quote text and than select between style 1 and style 2. Vertical line color is primary color from theme options.
Quote example

Recent blog

Recent blog element will display blog posts on your page. Newest posts will be first. In element options you can enter title, select between 3 different styles (default, minimal dark, minimal white),
set number of blog posts, select number of posts in a row (3 and 4). You can enable slider option, in this case you need to have more posts than it is in row.
Content length is set on 130 by default, you can change this number. Category ids have to be separated with , and no space. If you want to have posts from all categories, just leave this field empty.

Recent portfolio

First you need to add portfolio items. Please check here how to add them. In recent portfolio element you can add portfolio tile, set number of items. If you want to display all posts, leave this field empty.
You can select between portfolio categories. You can also hide filter, by default it is enabled and you can select number (3 or 4) of items in row.

Social icons

Choosing this element will add a wrapper for the social icons. Than you just need to click on “+” to add icons.
There are three options for each icon.

• Url
• Icon
• Target

Paste a link to your social profile into the url field, than choose an icon. Target field can be empty, or if you want the link to open in a new tab, add “_blank” to it.

Subscribe

Subscribe element adds subscribe form on your page. If you want to use this element, you need to install Newsletter plugin first.
You can also add title and description and change color for title and input field background color.

Table

Table element will display content in a table.

A table is made of columns and rows. Each column can have a heading. To add additional columns, click on “+” icon on the right.
To add aditional rows, click on “+” icon on the bottom. Additional cells will appear where you can add cell data.

There are three aditional options available for customization:

• Stripped
• Bordered
• Table heading style 2

All of those will change the styling of the table. Stripped will add alternative styling for each row. Bordered will add border between columns and Table heading style 2 will alter the table heading appearance.
You can see examples by visiting this link.

Team

First you need to add team members. Please check here how to add them. You can add team element anywhere on page. You can select number (2, 3, 4 or 6) of team memebers in column.
Than you can set number of team members, if you want to display all members than enter -1. You can enter team members ids and it will show on this order.

Team with description

First you need to add team members. Please check here how to add them. You can add up to 3 member id/s, title, text. There are also button options: text, url and color options: title and description.

Timeline

Inside timeline element you can add timeline items (as many as you want). Timeline items have year field, title and content. Year is set by default on 2016 value, but you can change it to any other number.

Twitter

Twitter element will display latest tweets from your twitter account. Twitter username field is required and you need to add correct username to display tweets.
If twitter username is missing you will get next php error: Warning: Invalid argument supplied for foreach()… You can also change title color and twitter text color and set number of tweets on your page.

Theme Options

Color management

Predefined color schemes

You can choose from several predefined theme color schemes. Choosing a scheme will override all the color options to a predefined selection. After choosing a scheme you can fine tune the colors with the options below.

Setting the colors

You can set the colors by clicking on the colored square in each color option and using the interactive color picker, or by entering the hex color value in the field on the right.

Main theme colors

Here you can define:

• Text color
• Primary color
• Hovers color
• Heading color
• Heading divider color
• Important background color
• Important text color
• Text on top of primary color
• Mobile toolbar color

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.
Headings Color applies to heading across the site. It also applies for the headings in Sidebar and previous pages in breadcrumbs.
Headings Divider applies to heading dividers.
Text on top of primary color is used in cases where the background is primary color.
You can also set the color of mobile toolbar.

Header colors

Here you can set the colors in the header section. This includes the top bar, the menu with submenus and the shopping card:

• Menu text color
• Menu background color
• Page header background color
• Page title color
• Top bar text color
• Top bar background color
• Submenu background color
• Submenu text color
• Submenu text hover color
• Submenu divider color
• Shopping cart item number background color
• Shopping cart item number text color

Footer colors

In the footer section it is possible to define the colors:

• Footer background color
• Footer text color
• Footer border color
• Footer heading text color
• Copyright footer text color

Buttons colors

There are different buttons used in the theme:

• Normal button
• Button with gradient
• Dark button
• Light button
• Minimal button

For each button, it is possible to define the background color, text color, hover backgound color and hover text color. Except for the minimal button, which doesn’t have any background color options.

Custom CSS

This section is intended for front-end developers. Custom CSS section enables you to customize your site beyond theme options. 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.

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.
Recommended font files are WOFF, WOFF2 and TTF/OTF,

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.

To import the demo just select the desired demo and click Insert demo content.

Make sure you install and activate all of the required plugins before importing demo content.
Make sure you have the system requirements in check before launching demo import.

Demo import consumes a lot of resources. Some hosting providers (especially the cheap ones) enforce high restrictions on their hosting packages. If your hosting doesn’t meet the requirements, a demo import might not be able to import all the content and settings.
Usually, just a mail to your hosting provider about this restrictions solves the issue. If this is not the case, you can still import and build the site on your local computer (localhost) using WAMP or MAMP, and then migrate the database to the server when done.

Do not import demo multiple times as the content will get duplicated.

Footer Options

• Enable footer option toggles footer on/off
• Footer style defines number of columns in the footer area
• Copyright footer style defines number of columns in the Copyright footer area

After setting the Footer and Copyright footer columns, a new widget area will appear in Dashboard -> appearance -> Widgets.

Desktop style

Here you can set the footer behavior on desktop screens. You can choose between classic and Fixed footer.

Mobile layout

Here you can set the number of footer columns on mobile screens.
Even if two columns are selected, it will gracefully still default to one column on really small screens.

Header Options

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

Menu Layout Options

In this section, you can choose between horizontal and vertical navigation, by clicking one of the two images.
After changing these settings, a lot of the options below will change.

Horizontal Navigation

The horizontal menu is a default setting for the theme. When selected, additional options for the menu layout will appear.
Choosing any of them will display additional options for this navigation type. The options below are divided into Home page menu options and Global menu options.
Among the header options, you will find:

• Text Color
• Background color
• Text Hover color
• Centered menu option
• Top bar color
• Transparent header
• Custom header height
• Menu button checkbox
• Menu button text
• Menu button url
• Menu button target
• Large above navigation style

To apply the Home page settings to Global header options, just add a checkmark to “Set this settings as global”.

Vertical Navigation

Vertical Navigation doesn’t have separate settings for the Home page and the rest of the site. All settings will be applied globally.
Among Vertical navigation specific options, you will find:

• Text color
• Background color
• Text hover color
• Background image

Global header options

This sections is not menu layout specific but applies to all menu types which support this option.
Among this options you will find:

• Options for to bar and above menu bar
• Sticky menu
• Search icon
• Menu Walker
• Background color behind the logo

Options for to bar and above menu bar

• Display top bar toggles top bar on/off
• Top bar style toggles top bar style
• Display above menu bar toggles above menu top bar on/off

Sticky menu

• Sticky menu toggles sticky menu on/off on desktop screens
• Sticky menu mobile toggles menu on/off on smaller devices

Menu Walker

These options disable our custom navigation Walker. If you are using any third party menu plugin, turn this option off, to prevent any compatibility issues.

Display background color behind logo

If you want to have a different background color for the logo, check this option on.

Heading background

Here you can select Default Page heading background, which will apply to all pages. You can override these settings on each page separately.
There is also Search page content background option, which will only apply to the search results page.

Import/Export

This section allows you to easily migrate theme configuration to another site. You can just copy and paste the configuration from one site to another, or export and import a configuration file.

Import/Export Widgets

This section allows you to easily migrate widgets configuration to another site. You can just copy and paste the configuration from one site to another, or export and import a widget configuration file.

Logos & Media

This section lets you set different logos across the page and devices and a favicon.

Logo

This is the primary logo image. If a specific logo is not defined, this logo will be used instead.
If you want fine control over which logo appears in which case, there are additional logo options below.

Front page logo

This option is especialy useful when a transparent menu is set for the front page. It lets you set a different logo for the front page.
You can upload the logo for the front page here, optionally you can specify a custom height for the logo. Width will be calculated automatically.

Sticky Logo

This option will only take effect if sticky header is turned on. You can upload sticky logo here and optionaly you can specify a custom height for the logo. Width will be calculated automatically.

Transparent Sticky Logo

This option is similar to the Sticky Logo above, but it will be displayed only if the sticky is set to transparent.

Mobile logos

You can set a general mobile logo and a front page specific logo here.
This logos will appear on mobile devices. If no specific logo is defined, the general logo will be displayed.

Other

In this section, you can define a Favicon and Home screen icon. The second one is used on mobile devices (Android, IOS).

Text based Logo

This option is useful for pages without a logo.
You can enter a text here and set the font family for the text logo.

Page Layout

Within Page Layout you can set various options for managing page layout like

• boxed layout
• sidebar defaults
• Headings and Breadcrumbs
• Page comments
• Blog Layout

Boxed layout

The default value for the page layout is Full-width Layout, but you can also select the Boxed version.
Once a checkmark is added next to the ‘Boxed version’ option, additional options for page background appear.
You can choose among predefined patterns or add a custom background.

Display shadow on certain elements

This option adds shadows to some of the elements

Page sidebars

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

Post sidebars

This will change the default left and right sidebar value on all posts. Sidebars can still be overridden on each page individually.

Heading

Here you can manage global display option for the 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. The option defines how many posts will be displayed in a row.

Page Setup

Within Page Setup you can set up various options among which are:

• Home page slider
• 404 error page
• excerpt length
• Portfolio settings
• Meta fields on archive pages
• Meta fields on single posts

Slider shortcode

Add a slider slug here, to be displayed on the front page

404 error page

When a user visits an url on your site which does not exist in the database, an 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.

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.

Portfolio

Portfolio slug

Default slug in url is portfolio, here you can change it. This will change the url of your portfolio pages.

Portfolio single style

There are three single portfolio styles available:

• Style 1
• Style 2
• Style 3

Style 1 will display the content on the left and images on the right.
Style 2 will display full-width portfolio images and the content below them.
Style 3 will display just the content, which you can fully customize with Visual Composer.

Post meta on blog, categories, tags, archive pages

In this section, you can enable or disable the display of comments, categories, the author, the date and the tags
Adding a checkmark, will display the meta field and removing the checkmark will hide it.

Post meta on single pages

In this section, you can enable or disable the display of comments, categories, the author, the date and the tags on single pages.
Adding a checkmark, will display the meta field and removing the checkmark will hide it.

System requirements

This section only shows your current server configuration and checks if it meets the basic requirements.
If you have an access to php.ini file on your server, these options can be configured there, if not, you can ask your hosting provider to resolve those issues for you.

If the minimum requirements are not met, the theme might still work, but the demo import will most likely not, as importing the content is the most resource consuming task.

Theme Update

Our theme supports updates from ThemeForest.net. To enable this options, you will need to provide Envato username and ThemeForest API key. To get your API key, log into your ThemeForest account and click settings -> API Keys.

If you want to customize the theme files, we suggest you create a child theme and implement your customization there. Using child themes for customization enables safe upgrading of your theme in the future, without losing any of custom changes.

Typography

In typography section, you can define font-families and font-sizes.

Font family

Here you can select any system font, Google font or upload your own. See Upload Custom Fonts section for more details.
To use typography section to its full potential, make sure you first update Google fonts, by visiting “Update Google Fonts” section, so all the new fonts will be available.

Theme supports up to three different font types.

• Font type 1
• Font type 2
• Navigation font type

Font type 1 is used for headings (we used Montserrat on our demo site), Font type 2: used as the main body font (we used PT Sans on our demo site), Navigation font type used in main navigation (we used Montserrat on our demo site).

Character subsets

Below the Font Family you can specify the subsets of character encoding for that specific font family.
Character subsets vary 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 selected font doesn’t show some of local 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 sizes

here you can set font-sizes for various theme elements.

• Body font size
• Menu font size
• Submenu font size
• Content heading 1 font size
• Content heading 2 font size
• Content heading 3 font size
• Content heading 4 font size
• Content heading 5 font size
• Content heading 5 font size
• Page heading 1 font size
• Single blog page heading 1 font size

Body Font Size is main font-size, which is used by most of the content on the site (14px is default).
Menu Font Size modifies main menu (navigation) font-size.
Content Headings (from h1 to h5): With these you can modify headings (ranging from h1 to h5).
Page heading 1 font size sets font-size in page heading areas on pages.
Single blog page heading 1 font size sets font-size on single blog post heading.

Update Google Fonts

At the initial theme installation, most of Google fonts are already added. However, Google is adding new fonts every now and than. If you don’t see the latest Google Fonts in the typography section, you should update Google fonts by clicking the ‘Update Google fonts’ button. Note that the process might take a while, so be patient.

Woocommerce

These settings are WooCommerce specific, if you don’t have WooCommerce installed, these settings will not take effect.

Settings

Display shopping cart icon in header option defines on which pages you want to display a cart. There are three options to choose from:

• Never display
• Only on Woo pages
• Display everywhere

Layout

How many products in column option defines the layout of the shop pages. You can display either 3 or 4 products in a single row.
Products per page option defines how many products will be displayed on product listings. If there are more products, a pagination will be available.

Widgets

AnpsThemes – Contact Number

Using this widget, you can add a simple contact information.
You can set the following options:

• Text
• Number
• Text color
• Number color
• Background color

AnpsThemes – Download

Using this widget, you can add a downloadable file. This is especially useful for pricelists and brochures.
The widget assumes you’ve already added files in WordPress Dashboard -> Media.
You can set the following options:

• Title
• File Title
• File
• Icon
• Icon color
• Background color
• External File

File will let you choose any file from your media library. For files hosted elsewhere, you can use External File.
If you leave the color fields empty, default colors will be used.

AnpsThemes – Google Maps

With the Google Maps you can add a map to your site.

• Title
• Zoom
• Height
• Markers
  • Location
  • Pin
  • Info

Markers is repeatable field. This means, you can add multiple markers on the same map.

AnpsThemes – Images

This widget displays an image of your choice from WordPress Media uploads

AnpsThemes – Menu

This widget displays a menu. It is similar to the native WordPress Custom Menu widget. There is a difference in style. AnpsThemes – Menu widget displays the menu in two collumns.

AnpsThemes – Mini Cart

This widget doesn’t have any settings. It is used ton add WooCommerce mini cart to any widget area.

AnpsThemes – Opening time

In opening time widget you can set day of the week, and working time (for example: 10:00 – 18:00). You can also set if this day is exposed or not.
Additional days of the week are added by clicking the + button.

AnpsThemes – Recent Projects

This widget adds styled recent portfolio items to any widget area. You can limit the number of portfolio items to show by entering a number in the “Number of projects to show:” field.

AnpsThemes – Recent Projects

This widget adds icons with links to social media. There are four styles available, default, minimal, border and transparent border.
There is an option “Open links as”. This defines how links will open. For example, if you want them to open in same window, you can choose the option “_self” or in another window, you can select an option _blank.

Additional social links are added with repeater field, by clicking +button. There are three options for each social link:

• Icon
• Link
• Color

AnpsThemes – Spacing

With spacing widget you can add empty space between widgets. Just add the widget and adjust the desired spacing.

AnpsThemes – Text and icon

With this widget you can add a text with icon element. Beside the widget title, this widget has the following repeatable options

• Icon
• Title
• Subtitle
• Icon Color
• Title Color
• Subtitle Color

Additional Text and icon elements can be added by clicking +button.

Adding Portfolio

1. In WordPress Dashboard click on the “Portfolio” → “Add New”.
2. Enter the Portfolio Item title
3. Insert the content in textarea below.
4. Assign categories for this specific portfolio post.
5. Add Gallery Images (on the right).
6. Add Featured Image (on the right).
7. Click “Publish” or “Update”

Repeat this steps for each portfolio item.

Displaying Portfolio

For displaying portfolio, there are two Visual composer elements available. Portfolio and Recent Portfolio. Plese refer to the Elements section of documentation for more information on using this elements.

Adding Posts

Please refer to official WordPress documentation for an in-depth guide on adding posts to your WordPress site.

Here are the highlights:

• Step 1: To add a post to your blog go to Posts → “Add New”, at the right navigation menu in your WordPress Admin Panel
• Step 2: Add a title of your post
• Step 3: Add content in the textarea below.
• Step 4: You can insert media content (images, videos) by clicking the “Add Media” button above the content textarea and below the title text field
• Step 5: You can choose to disable page heading or change page heading image and type of heading (i.e. fullscreen heading)Note: this will override page heading settings set in Theme Options for this specific blog post.
• Step 6: Assign categories for this specific blog post in the panel “Categories” on the right.
• Step 7: Choose the featured image for blog post in the panel “Featured Images” on the right. Featured image is displayed above the excerpt post of the blog post.
• Step 8: Click on the publish button to publish the blog post.

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

Adding Team Members is easy.
In WordPress dashboard left menu, there is a tab called “Team”.
If you click on it, all team members will be listed. To add new one, just click on “Add new” button.

When adding a team member, you will be presented with a form fields will find some additional fields besides the content field, the excerpt and featured image, there are also:

• Title (name of team member)
• content field (description or bio)
• the excerpt (short description)
• Featured image (photo of the employee)
• Team subtitle
• Social accounts

Team subtitle is ment to be used as a position in your organisation (ie CEO, …). Social accounts are optional links to social profiles of the team member.

Customizer

Prefered way of customizing the site is by using the theme options. You can however customize most of the options with customizer aswell.
All our options reside in Theme Options customizer section.

Main theme colors

Here you can set the Theme colors:

• Text color
• Primary color
• Hovers color
• Menu text color
• Menu background color
• Headings color
• Top bar color
• Top bar background color
• Footer background color
• Footer text color
• Footer border color
• Footer heading text color
• Copyright footer text color
• Page header background color
• Page title color
• Submenu background color
• Submenu text color
• Submenu text color
• Submenu divider color
• Text on top of primary color
• Shopping cart item number background color
• Shopping cart item number text color
• Important background color
• Important text color
• Important text color

Button colors

here you can define buttons:

• Normal button
• Button with gradient
• Dark button
• Light button
• Minimal button

Each button has the color options:

• Background color
• button color
• hover background color
• hover button color

With the exception of minimal button, which is a button without any background.

Typography

Here you can set:

• Body font size
• Menu font size
• Content heading 1 font size
• Content heading 2 font size
• Content heading 3 font size
• Content heading 4 font size
• Content heading 5 font size
• Page heading 1 font size
• Single blog page heading 1 font size

Page layout

In this section you can set sidebars:

• Page Sidebars
• Post Sidebars

For each of those you can specify left and right default sidebars, which can be overridden on single page / post.

There are also additional Page Layout options here:

• Enable page title and background
• Enable Breadcrumbs
• Enable page comments
• Blog layout

Please refer to theme options -> Page layout section for more detailed description of these options.

Page Setup

Here you can set:

• Excerpt length
• 404 error page
• Portfolio slug
• Portfolio single style
• Post meta settings
• Post meta single page settings

Please refer to theme options -> Page setup section for more detailed description of these options.

Header options

Here you can set:

• Page heading background
• Search page content background
• Display top bar
• Display above menu bar
• Sticky menu
• Sticky menu mobile
• Display search on mobile and tablets
• Display search icon in menu (desktop)
• Enable menu walker (mega menu)

Please refer to theme options -> header options section for more detailed description of these options.

Footer options

Here you can set:

• Enable footer
• Footer style
• Copyright footer
• Footer type
• Mobile footer columns

Please refer to theme options -> Footer options section for more detailed description of these options.

WooCommerce options

Here you can define on which pages you want to have the cart displayed and the number of products in a row on a product listnings.

Mega menu

Setting up mega menu is a multistep procedure. Please follow the steps carefully, without skipping them.

1. First make sure, that option Enable menu walker (mega menu) in Theme options -> Header options is checked.
2. Now go to Appearance -> Menus and select your primary menu.
3. On the tab, where you want to use the mega menu, add checkmark next to the Megamenu checkbox field
4. MegaMenu requires a three level menu structure. First beeing the megamenu tab, the second is the grid level and the last levels is the actual navigation.

Configuring the megamenu

First level

On the first level, just add a checkmark next to the Megamenu checkbox field. This will set different rendering to this menu item.

Second level

Second level (first children of the megamenu item) is the layout level. The number of second level items will define the number of columns in the megamenu. This number can be 3, 4 or 6.. Items added here, will not be linkable, but will display as the title in this megamenu column.

Third level

This level will be the actual links. Add menu items here as you would on a normal menu.

Revolution slider

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

• Step 1: Install Revolution Slider by going to “Plugins” → “Revolution Slider” then click Install and Activate the plugin.
• Step 2: Go to “Revolution Slider” in the WP Admin Panel navigation.
• Step 3: Click on the “Create New Slider” or click on the link to modify an existing one.
• Step 4: Fill out the Main Slider Settings, such as the slider title, layout, height and width properties. Adjust visual effects in panels on the right side.
• Step 5: Go to the page you want your slider to be shown.
• Step 6: Go to Backend Editor with Visual Composer and add new element by clicking “+” icon and add element “Revolution Slider”
• Step 7: New window will appear. Choose desired slider setup from the menu.
• Step 8: After clicking “Save Changes” you should see Revolution Slider element added to the page.

If you don’t use Visual Composer on a specific page, you can also copy the slider shortcode and paste it inside the page content.

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

Sidebars

Our theme comes with some pregenerated sidebars, but there is also sidebar generator, to add more.

Add new sidebar

• Step 1: Inside WP Admin Panel Go to “Appearance → Sidebars”
• Step 2: Click on the “+ Add Sidebar”
• Step 2: New window pops up. Insert Sidebar name.
• Step 4: Click on the “OK” button.

New sidebar should appear in the Appearance -> Widgets, where you can add widgets to newly created sidebar.

Displaying sidebars on pages and posts

You can display any sidebar on a specific page. On the page edit screen, under the content editor you will see a box called Sidebars. You can select which sidebar you want to display on the left and which on the right. If you set this option to “None”, no sidebar will be displayed.

Further customization

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

• Easy updates – If you’re using a child theme, you don’t have to worry about any updates. Whenever you update the theme, only the parent theme will be updated. Your child theme, and everything you’ve coded in it, remains intact.
• Changes – If you’re using a child theme, every modification can be found in the child theme’s folder and thus you can track all the changes you made very easily.

Please refer to the official WordPress documentation for more information about using child themes.

Customizing the Footer

Footer is made up Widget areas. To add content, just add widgets to the footer area in Appearance -> Widgets.

In theme options -> Footer options, you can set how many widget areas you want to display in footer.

Images

Images are not included with the theme. The reason for this is in copyright. We only have a license to use them on our demos, but we’re not allowed to redistribute them. We created a collection of all images, we used (plus some we didn’t) here.

Site Optimization

Slow website performance can be caused by different issues. Below are the 4 things you can do to increase the loading speed:

• Plugins – Using multiple plugins on your site may effect your site performance. To quickly see if a plugin is slowing your site, disable all the plugins except for the ones that we included with our theme. If the site is running faster, then one of the plugins is the problem. To find out which one it is, activate one plugin at a time and test your site after each activation. If you find a plugin that is causing issues, please contact the plugin developer and report it to them.
• Media Content – Images are the primary reason web pages are bloated and having unoptimized images can drastically slow down your site. Make sure not to upload larger images than you need to. Example: the image should not be larger then the column size in which the image is placed.Also make sure the images are compressed/optimized. To do so, we recommend using an image editing tool like Photoshop and use the “Save For Web” feature to optimize images and reduce the overall file size.
• W3 Total Cache – Using a caching plugin will definitely boost your site performance. We recommend using W3 Total Cache, because it has shown the most performance boosts on our themes. Check out this Tuts+ article. It starts by going over why using a caching plugin will help you and then dives into all the different options you need set, to make sure your site runs as fast as possible.
• Hosting – Your site can only run as fast as your hosting allows it. This depends on which hosting provider and which hosting plan you have chosen. For example: using shared hosting can have an effect on speed. If you have not yet chosen a provider, please check forum and review sites to see which hosting will work best for you.If you have tried all the performance tips and the site performance has not changed, we suggest you contact your host and discuss it with them.

Translating the Theme

Our theme comes localization 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.
You can download it here.

• Step 1: To translate your Theme, select the desired theme from the “Themes” area by clicking on the “New Language” button.
  To modify an existing translation click on the link of that specific language.
• Step 2: Select a language in which you want to translate your Theme into. You can also specify language by inserting the language code into the text box located below. Then click “Start Translating.” button
• Step 3: Click on the “Sync” button to synchronize.
• Step 4: Choose the word or a string you would like to translate by clicking on them.
  You can also filter the strings by using the “Filter Translation” input box above the “Source Text” area.
• Step 5: Type the translated version of a word or a string inside the “Language Version” area below “Source Text” area.
• Step 6: When finished translating click on the Save button located on top of the “Source Text” area.

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

Updating the Theme

Caution: Backup your files before updating.

How to update – Using FTP

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

• Step 1: Download the latest version from ThemeForest and unzip it
• Step 2: Log in to your server with FTP program and navigate to your wordpress installation -> wp-content -> themes
• Step 3: Delete (or just rename) your old Theme folder on server
• Step 4: Copy your new Theme folder to the server

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

How to update – Using Theme Options

This method requires you to generate ThemeForest API key.
To get your API key, log in to your themeforest account and click settings -> API Keys. If you do not have any generated API keys, please generate one.

• Step 1: Go to “Appearance -> Theme Options”
• Step 2: Inside Theme Options click on the “Upgrade Theme” inside the General Settings section.
• Step 3: Enter your ThemeForest username
• Step 4: Enter your ThemeForest API key (see Generate API key below)

Visual Composer

Visual Composer is a drag-and-drop page builder that comes included with our theme.
Please refer to the Visual composer Wiki on how to use it properly.

Here are the highlights of how to use it:

• Step 1: Go to “Plugins” inside WP Admin Panel.
• Step 2: Install and Activate WPBakery Visual Composer plugin.
• Step 3: Go to desired page inside “Pages → All Pages” or “Pages → Add New” if you wish to add a new page.
• Step 4: Click on the “Backend Editor” to enter the Visual Composer editor.
• Step 5: Click on the big “+” icon below the Page or Post title to add new element.
• Step 6: New window pops-up with wide range of different elements that you can add to your page

Please refer to the Elements section of this documentation for more information about Visual composer elements.

To use Visual Composer on other post types, go to “Visual Composer → General Settings” and check the checkboxes of desired post types.

Sources and Credits

• jQuery
• gmap3
• Isotope
• Bootstrap
• Modernizr
• Moment
• Double tap to go
• Count to
• Pikaday
• Waypoints