Convertible

Business WordPress Theme


Thank you for purchasing Convertible! 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 "convertible.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

Convertible 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 the theme, 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 Convertible. By seeing this infographic, you will learn more about Convertible in a minute...

javascript:void(0)

By reading this section, you will be able to kick start your 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/convertible.

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 save it.

 

Convertible has a special layout for its homepage which will allow you to have full width sections in your pages with different background color or background image. 

Of course this feature is optional and you can turn it on or off by editing you home page and changing its page template.

To turn it on, you should set your homepage template to "HomePage":

 

Once you did it, you can enable full width sections, sections with shadow, sections with different background color or background image and ... Please take a look at the following image. It will tell you the story in short!

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. This option will only work in boxed mode.

    You can find this color picker in "Theme Options > General".
     
  3. Text and Background Color of Contact Bar: You can change the text and background color of top bar
    area in "Theme Options > Header Options > Contact Bar".
     
  4. Menu Colors: You can customize the menu colors in "Theme Options > Header Options > Menu Styles". 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.

    You may also change the complete layout of menu in "Theme Options > Header Options > Menu Layout".
     
  5. 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 > Theme Options > Search Page Settings". Once you entered this page, choose "Text and Background" as your "Slider Type" and set your desired colors there.
     
  6. 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.
     
  7. 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).
     
  8. 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 > 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. Breadcrumb
  7. Menu ( Level One )
  8. Menu ( 2nd level and further )

 

One of the most powerful tools which are included into Convertible, 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!

 

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

There are 4 main areas in Convertible 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 4". Please note that if you choose a layout with 2 columns, the widgets that you add in "Footer Sidebar 4" 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 > 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.

 

Convertible 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 Convertible 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/convertible-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 Convertible without changing the theme core files. And now, you can enjoy upgrading your theme to the latest versions without worring of loosing your changes.

Convertible 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 Convertible into your language, you can download convertible.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 "Convertible Premium Theme Add-ons" plugin too. To translate it, make a copy of this file:
 
/wp-content/plugins/js_convertible_addons/languages/convertible_plugin.pot
and rename it to your preferred language like this:
 
convertible_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 Convertible theme into your FTP. You will find it here:

    /wp-content/themes/convertible
     
  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 Convertible 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/convertible-responsive-html5-template/6289591
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!