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:
Installing Via WordPress: First log in to wordpress admin area (/wp-admin) and then navigate to "Appearance > Themes". Click on "Add New" button then choose "Upload" and upload your theme (.zip file which is in the downloaded package from themeforest) by clicking "Choose file" and finally click on "Install Now" button to install the theme.
Install Via FTP: If you want to upload your theme manually, you should first unzip your theme (.zip file which is in the downloaded package from themeforest). Then you should upload it in your website "/wp-content/themes/". After uploading you should have this directory: "/wp-content/themes/vertikal".
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.
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:
Click on "Begin Installing Plugins".
Check all of the plugins in the list and "Install" them.
Once again go back to this page and "Activate" them all.
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
Please go to Tools > Import, and choose "WordPress".
If it's the first time that you are using this feature, it will ask you to install import/export plugin. Simply install it.
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.
Now check "Download and import file attachments" and submit it.
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:
go to "Tools > Widget Import/Export".
Choose "widgets.wie" file which is in your downloaded package from ThemeForest (/demo content/widgets/widgets.wie)
And import it.
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!
Upload Your Logo
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
Please go to "Settings > Reading".
Then in "Front page displays" choose "A static page".
Now in Front Page, choose "Home" and in "Posts page", choose "Blog 3 Cols".
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)
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".
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".
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".
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".
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.
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.
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.
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).
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:
Headings ( H1 to H6 )
Menu ( All Levels )
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:
Default font size ( All Elements )
Heading font size ( H1 to H6 )
Blog title in lists
Blog title in single page
Banner area title
Banner area subtitle
Menu ( Level One )
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:
Add a new page
Click on blue "Visual Composer" button right below the page title.
When Visual Composer UI appears, click on Add Row button to add a new row.
Choose the number of columns that you want to split this row to.
Click on a column to add a new element into it.
From elements gallery choose your desired element.
Set the element configurations and save it.
Now you can see the results on your site! You've created a nice element without coding a single word!
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:
Please edit your WordPress account profile ( "Users > Your Profile" ). Then add your google+ account URL in "Google Profile URL" section.
Then go to your Google+ account and on top right side of page click on your image, then choose Account.
In new page click on edit profile.
In edit progile page, edit links section.
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:
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:
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:
and rename it to your preferred language like this:
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:
Please install your theme.
In your downloaded package from ThemeForest, find Pre-made Skins directory.
Find the skin that you want and open its text file.
Copy all the content of the exported theme options text file in you clipboard.
Go to "Appearance > Options Backup"
In Import Theme Options section, paste the code and save it.
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.
Download the latest version from ThemeForest.
Make a copy from your current Vertikal theme into your FTP. You will find it here:
Copy the downloaded file from ThemeForest into your FTP and extract it into the above directory.
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)
Download and Install Envato WordPress Toolkit plugin:
You should click on “Download Zip” button on bottom of the right sidebar.
Go to the following URL and make an API key:
Please note that you should change "ImanGM" with your own username in ThemeForest.
Set your ThemeForest username and API key in this plugin in your WordPress admin panel.
You’ll see a message that a newer version of Vertikal is available to install. Simply click on install button.
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:
OptionTree - by Derek Herman
Bootstrap - by Twitter
jQuery FlexSlider - by WooThemes
jQuery Isotope - by David DeSandro (Developer License)
Some images we used in our demo site from photodune.com, istockphoto.com. (Some bought from / Some downloaded as free image of the week / month)
Revolution Slider WP Plugin - (Extended License + Permission to include into our theme)
Visual Composer Slider WP Plugin - (Extended Lincese + Permission to include into our theme)
And also these great wordpress plugins: TGM plugin activation,Contact Form 7, Widget Import/Export.
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:
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.