Vertikal

Responsive Business WordPress Theme


Thank you for purchasing Vertikal! In this document we are trying to help you to install and use your item easily. We've created this item with passion, So we wish that you will love it too...

1. Install WordPress

First, you must have a wordpress installed on you website. If you don't have a working wordpress installation already, then you should install it before using Ventus.

If you have wordpress already installed on your website, PLEASE check if it's running the latest version and upgrade it if its not up to date.

Most web hosting companies will provide you one click wordpress installation through web hosting control panels such as cPanel, Plesk or ... but if you want to install wordpress by yourself, you can follow this tutorial on wordpress codex site or maybe doing some google search.

2. Install Theme
 

Please DO NOT directly upload the .zip file that you have downloaded from Themeforest, into your WordPress website as it contains some extra items (such as this documentation and ...) and it will cause your website to stop working.

The main theme file, is a .zip file named "vertikal.zip" which is included into the main downloaded file from Themeforest.

You can install your theme in two ways:

After you have uploaded your theme package to your website hosting (with any of the above ways), now its time to activate the theme. Simply navigate to "Appearance > Themes" and click on "Activate" link from bottom of the theme thumbnail.

Activate Theme

3. Install Required Plugins

Vertikal is bundled with some useful plugins such as page builder, its elements, all in one widget and revolution slider. These plugins are required to use Verikal.

Immediately after you install Vertikal, You will see a notice on your page which is asking you to install and activate these plugins. Please:

  1. Click on "Begin Installing Plugins".
  2. Check all of the plugins in the list and "Install" them.
  3. Once again go back to this page and "Activate" them all.

Installing Required Plugins

You are almost done!

Now please go to "Appearance > Theme Options" and save your theme options once. Now your theme installations is done.

 

Please carefully see this infographic about Vertikal. By seeing this infographic, you will learn more about Vertikal in a minute...

By reading this section, you will be able to kick start your Vertikal Powered website in a few minutes. After you've installed your theme and its required plugins, you should first import demo content to make your site look like our demo at http://preview.themique.com/vertikal.

Importing Demo Content

  1. Please go to Tools > Import, and choose "WordPress".


     
  2. If it's the first time that you are using this feature, it will ask you to install import/export plugin. Simply install it.
  3. After it's installed, choose demo_content.xml file which is included in your downloaded package from ThemeForest in /demo content/dummy data/demo_content.xml and import it.


     
  4. Now check "Download and import file attachments" and submit it.
  5. It may take a few minutes then your demo content will be imported properly.

Importing Widgets Content

If you want to import widgets setting too, please:

  1. go to "Tools > Widget Import/Export".
  2. Choose "widgets.wie" file which is in your downloaded package from ThemeForest (/demo content/widgets/widgets.wie)


     
  3. And import it.

Setup Menu

Please go to "Appearance > Menu". Then scroll down the page and at the bottom of the page, in "Theme Locations" check "Header Menu". and save it. That's it! 


Please go to "Appearance > Theme Options > Header Options" then upload your image logo, choose top and bottom padding and also the background color of the logo area. You can also choose "Text Type" if you don't have any image logo available.


 



Import Revolution Slider

In you WordPress admin, please go to "Revolution Slider" then click on "Import Slider" and upload the exported revolution slider content which is included into your downloaded package from ThemeForest.

This file can be located in /demo content/revolution slider/homeslider.zip

After Revolution Slider is imported properly, you can use it in your pages. To use it you should edit your page, then in "Slider Settings" choose "Revolution Slider" in "Slider Type" and choose "HomeSlider" as this page's revolution slider.

Now you can save your page and enjoy revolution slider on your site.


Setup Your HomePage

  1. Please go to "Settings > Reading".
  2. Then in "Front page displays" choose "A static page".
  3. Now in Front Page, choose "Home" and in "Posts page", choose "Blog 3 Cols".

 

Ajax is a cool feature that is well supported in Vertikal theme. But please note that we don't recommend to use Ajax feature on sites with much content and also we don't recommend to enable it if you are using any third party plugins or javascripts.
 
Because of the nature of Ajax, all of your javascript codes should be prepared for a Ajax loaded page and we can't guarantee other plugins and scripts. Please also note that Flickr shortcode is not compatible with this cool ajax feature right now.
 
So, if you compltely understand these technical issues, you may decide better to enable Ajax navigation now.

The first item ("Enable Ajax Page Navigation") will enable Ajax loading when visitors click on navigation menu links. 

The other items will enable ajax loading when visitors click on them. For example, if you turn on "Ajax on Footer Links", once a visitor clicks on a link in site footer, target page will load by ajax.

You can easily change colors of your theme. All of theme color pickers are inside Theme Options page. If you navigate Theme Options pages, you will see several color pickers which will use for different sections of your website. Here is the list of color pickers and where you can find them in your Theme Options. (Appearance > Theme Options)
 
  1. Accent Color of the Site: This is the main color of the site. By setting a color here, all of your elements will use this color instead of default blue color.

    You can find this color picker in "Theme Options > General".


     
  2. Background Color of the Site: This will be the background color of your site. Please note that you will have the option to use an image as your background too. So if you upload an image as background image of the site, this option will be ignored.

    You can find this color picker in "Theme Options > General".
     
  3. Background Color of Logo: There is a color which will only change the background color of your logo. You can find it in "Theme Options > Header Options".
     
  4. Text and Background Color of Top Bar: You can change the text and background color of top bar
    area in "Theme Options > Header Options > Header: Top Bar".
     
  5. Menu Colors: You can customize the menu colors in "Theme Options > Header Options > Header: Menu". What you can change about menu colors are listed here:

    - Background color of main menu.
    - Text color of main menu.
    - Background color of sub menus.
    - Text color of sub menus.
    - Text color of sub menus when mouse is moved over them.
     
  6. Banner Area: Banner area is a bit different as you can set different colors for it in each page or post. Also you can have different colors for blog index page and search page.

    - If you want to change the color for each page or post, please edit your page or post then in "Slider Settings" section choose "Text and background" and set your colors there.

    - For changing default color of banner area in all pages, you should go to "Appearance > Theme Options > Header Options > Banner Area", then at the bottom of this page you can set banner area background colors or even use background image for this section there.

    - For changing banner area colors in blog index page, you should go to "Appearance > Blog Options > Blog: Index Page" then in the bottom of this section choose your preferred colors.

    - And finally you can adjust colors of banner area for search page in "Apperance > Search Page Settings". Once you entered this page, choose "Text and Background" as your "Slider Type" and set your desired colors there.
     
  7. Background Color of Footer Area: You can change the background color of your footer area in "Theme Options > Footer Settings". Please note that you should set a light color for this area. If you choose a dark color, it won't look fine and you should do some Custom CSS codes to fit this new background color for there.
     
  8. Background Color of Main Content Area: You can change the background color of the content area in "Theme Options > Page Options". Just like your footer, it's recommended to use a light color here (even leave it to be white).
     
  9. Toggle Bar: You can change this section's widgets title, text colors and also background color of this area. Toggle bar is the hidden widgetized area in top of site which can be enabled by clicking on its on/off switch on top right side of your site.



    These color pickers could be found in "Theme Options > Header Options > Header: Toggle Bar".

By these color pickers you can make almost any sites. You can get some ideas by visiting our demo and checking our different demo skins.

You can use your favorite fonts from Google Fonts in Vertikal. We did not import all of 600+ Google fonts because most of them are not very useful for websites running with Vertikal. But we have collected the most popular ones in our theme.

If you need any special google font which is not included into Vertikal, please simply send a ticket in http://themique.ticksy.com and we will include it in next updates.

In Vertikal, you can set different font families for these elements:

  1. Headings ( H1 to H6 )
  2. Menu ( All Levels )
  3. And another font family for all other elements in the site.

To set your own fonts in Vertikal, you should go to "Theme Options > Typography" then set your desired font family and font size for elements on your site.

You can set different font size for these elements individually:

  1. Default font size ( All Elements )
  2. Heading font size ( H1 to H6 )
  3. Blog title in lists
  4. Blog title in single page
  5. Banner area title
  6. Banner area subtitle
  7. Breadcrumb
  8. Menu ( Level One )
  9. Menu ( 2nd level and further )

 

One of the most powerful tools which are included into Vertikal, is its Page Builder. We've used Visual Composer for making our page layouts.

Visual Composer is the most popular layout builder plugins on the web. By using it, you can easily create any layouts for your site and then add any elements inside it with the simple drag and drop interface.

We've customized Visual Composer and added our own elements into it to let you easily create your page elements in a few seconds.

Using Visual Composer is very easy. Here is the step by step instructions:

  1. Add a new page
  2. Click on blue "Visual Composer" button right below the page title.
  3. When Visual Composer UI appears, click on Add Row button to add a new row.
  4. Choose the number of columns that you want to split this row to.
  5. Click on a column to add a new element into it.
  6. From elements gallery choose your desired element.
  7. Set the element configurations and save it.
  8. Now you can see the results on your site! You've created a nice element without coding a single word!

 

Vertikal is completely widgetized. It means you can use any widgets inside sidebar areas.

There are 4 main areas in Vertikal which you are able to add widgets inside them:

Yes, Footer is a sidebar. You can use footer in the following layouts:

Adding Content to Footer Sidebars: 

Once you set your desired layout for your footer, you can go to "Appearance > Widgets" and add your preferred widgets into "Footer Sidebar 1 to 3". Please note that if you choose a layout with 2 columns, the widgets that you add in "Footer Sidebar 3" will not show anywhere.

 

2. Left and Right Sidebars

On Pages, Blog Posts, Portfolio Posts and Search Results page you can set your page to have a left sidebar or right sidebar. 

Enable left or right sidebar for pages: To set default sidebar settings for pages, please go to "Theme Options > Pages" and set default sidebar setting for pages. You can override this setting per page, by changing the sidebar setting in "Sidebar Position" while you are adding or editing a page.

Enable left or right sidebar for Blog Index page:

Please go to "Theme Options > Blog Options" and choose default blog layout. This will take effect on blog index page and default sidebar setting for blog posts. 

You can override this setting per post and while you are adding or editing a blog post just like pages.


Enable left or right sidebar for Portfolio Posts:

Please go to "Theme Options > Portfolio Options" and choose default portfolio layout. This will take effect on portfolio posts. 

You can override this setting per post and while you are adding or editing a portfolio post just like pages.


Enable left or right sidebar for Search Results Page:

Please go to "Theme Options > Search Page Settings" and choose sidebar layout for search page. 


3. Toggle Bar Sidebar

You can divider toggle bar into 4 columns then add any widgets inside them by going to "Appearance > Widgets" and adding widgets in "Toogle Bar 1 to 4 Sidebar". You can set preferred sidebar layout for toggle bar by going to "Theme Options > Header Option > Header: Toggle Bar"

 

Once you enable these sidebars on your pages, you can add widgets into them by going to "Appearance > Widgets" and adding widgets into the pre-defined sidebars.


4. Under Menu Area ( NEW in v1.4+ )

This is a new section which will let you add widgets in under menu area. To add content, please insert your preferred widgets in "Appearance > Widgets" and add them to "Under Menu" widget.

Before using Under Menu area, please go to "Theme Options > Header Options > Header: Under Menu Area" and turn it on there.

 

Vertikal has a special custom post named Magic Widget. Magic widget is supposed to be shown in sidebars as a widget.

We've added this special post type to let you add any elements such as tabs, accordions, latest portfolio posts, progressbars, iconned services and ... into your sidebars.

What you need to do is to simply:

  1. Go to "Magic Widgets" and add a new post.
  2. Enable Visual Composer by clicking on its blue button.
  3. Click on Add Element and add your preferred element into the page.
  4. Save your post.
  5. Then go to "Appearance > Widgets".
  6. Add a new Magic Widget in any sidebars you want.
  7. Choose the post name which you've already added into magic widgets posts. and save it.
  8. Now your element is shown into your site's sidebar area.
IMPORTANT NOTE: Please only add one element into each magic post. Also do not use row with multiple columns in it because it will break your page layout.

Each Magic Post = Only one element in only one column.

Please note that not every elements are suitable for placing into sidebars. For example, Awesome tabs are very wide elements and if you add such element into your sidebars, it will not look fine. No way! 

To add a review post, please add a normal blog post into your site by going to "Posts > Add New" then enter your desired content in it.

Now below the WordPress editor area, Turn on "Enable as a Review" and then set the overal rating, rating title and item overview.

Finally if you want to add some review critica, please in "Review Items (Optional)" Add some criticas and save your post.

Now your post will look like a review and in google search results, the star rating will be available for this post.

Enable Google HeadShot:

  1. Please edit your WordPress account profile ( "Users > Your Profile" ). Then add your google+ account URL in "Google Profile URL" section.
  2. Then go to your Google+ account and on top right side of page click on your image, then choose Account.
  3. In new page click on edit profile.
  4. In edit progile page, edit links section.
  5. Then in "Contributor To" section, add the URL and a label for your site.

That's it now you will have your image beside your page title and description on google search results. To test this feature, please go to http://www.google.com/webmasters/tools/richsnippets and enter one of your posts URL to check if this feature is working properly.

IMPORTANT NOTE: These features are included in Vertikal and you can use them easily. But please note that Google does not guarantee that your image will be appear in your search resutls and it will take up to 2 weeks to your image be added there.

 

If you want to customize your theme, We do recommend to use a child theme and edit it instead of editing your core theme files directly.

In your downloaded package from ThemeForest, we've included a sample child-theme with minimal functionalities which you can simply install it on your theme and activate it as a child theme.

You should extract the child theme .zip archive file and put it in this directory:

/wp-content/themes/vertikal-child/

once you activate this child theme from your WordPress admin, you can copy any files from Vertikal parent theme into this new directory and edit it to make your own changes on it.

This way, you can customize Vertikal without changing the theme core files. And now, you can enjoy upgrading your theme to the latest versions without worring of loosing your changes.

Vertikal is translation ready. Currently we are working on other languages such as French, Portuguese and German to include them in the theme.
 
If you want to translate Vertikal into your language, you can download vertikal.pot file from "languages" folder of your theme directory and translate it with a program such as poedit. Then rename it to your language code (such as de_DE.po/de_DE.mo or fr_FR.po/fr_FR.mo or ...) and upload it in your theme "languages" directory.Then simply change the language of your wordpress by changing "WPLANG" parameter in your "wp-config.php" file (This file is in your website root directory).
 
For example if you have translated your theme in Spanish and you want to change the language of your website to Spanish, update this line in wp-config.php as below:
 
define('WPLANG', 'es_ES');
There are so many tutorials about this issue on the net so you can google it if you are not familiar with customizing wordpress config file.
 
You should also translate "Vertikal Premium Theme Add-ons" plugin too. To translate it, make a copy of this file:
 
/wp-content/plugins/js_vertikal_addons/languages/vertikal_plugin.pot
and rename it to your preferred language like this:
 
vertikal_plugin-fr_FR.po
and edit your po file with poedit application and save it again. Please note that the above example is for French language and you should use your own language file name.
 
We will appreciate, if you send us your translated .mo and .po files and let us put it in Vertikal with your name and a link to your website on it.

You can use our pre-made skins easily. Here is the instructions:

  1. Please install your theme.
  2. In your downloaded package from ThemeForest, find Pre-made Skins directory.
  3. Find the skin that you want and open its text file.
  4. Copy all the content of the exported theme options text file in you clipboard.
  5. Go to "Appearance > Options Backup"
  6. In Import Theme Options section, paste the code and save it.
  7. Now go to your Theme Options and save the settings again.

That's it! Now your site will look like you preferred skin not the main demo.

There are two ways to upgrade your theme to the latest version.

Manual Upgrade

  1. Download the latest version from ThemeForest.
     
  2. Make a copy from your current Vertikal theme into your FTP. You will find it here:

    /wp-content/themes/vertikal
     
  3. Copy the downloaded file from ThemeForest into your FTP and extract it into the above directory.
     
  4. Go to your admin panel, and save your theme options in “Appearance > Theme Options”.
 

Automatic Upgrade (You should only do the following steps once and your theme will be upgraded automatically on next versions)

  1. Download and Install Envato WordPress Toolkit plugin:

    https://github.com/envato/envato-wordpress-toolkit

    You should click on “Download Zip” button on bottom of the right sidebar.
     
  2. Go to the following URL and make an API key:

    http://themeforest.net/user/ImanGM/api_keys/edit

    Please note that you should change "ImanGM" with your own username in ThemeForest.
     
  3. Set your ThemeForest username and API key in this plugin in your WordPress admin panel.
     
  4. You’ll see a message that a newer version of Vertikal is available to install. Simply click on install button.
     
  5. Go to your admin panel, and save your theme options in “Appearance > Theme Options”.
 
We recommend to use the second solution as in this way, next time that release a newer version, you’ll be able to upgrade to the latest versions automatically.
 
Please note that if you've customized and edited your theme files (PHP files and CSS files) manually, you should make a backup before upgrading to the new version and then restore your changes line by line.
 
Of course changes that you've applied in Theme Options and Child Theme are safe and you won't need to worry about them.
 
 

How to add custom CSS code to each page separately?

Please enable Visual Composer on this page/post by clicking on its blue button right above the WordPress editor, and then click on CSS button and add your Custom CSS codes there:

Default Revolution Slider Settings:

If you import your demo content, your slider will be configured by default. By the way if you want to make your slide manually, please see the following image and set your slider settings just like the below image:

We want to appreciate and thanks everyone who helped us to make this great theme for you. Specially:
 
We should note that we used Documenter - by revaxarts.com to create this document for you.
 
This awesome theme is designed by PremiumLayers (http://themeforest.net/user/premiumlayers/portfolio) and it's PSD and HTML versions are available on ThemeForest too:
 
HTML Version: http://themeforest.net/item/vertikal-multipurpose-html5-template/6369349
PSD Version: http://themeforest.net/item/vertikal-creative-psd-template/6223240

If these documents are not enough of if you have any questions that are not covered in this article, please open a ticket in http://themique.ticksy.com and we'll respond to it as soon as possible.

If you need your purchase code, please see the following image to learn where to find it:

Also your suggestions are very important for us. So please feel free to contact us anytime if you have any suggestions or comments.

Thank you!