Envision Theme Documentation

## Envision Documentation

by Orkun Gursel / support@wptation.com

Welcome
top

## Thank you for purchasing

Thank you for purchasing Envision Theme. I hope you like it.

If you have any question or problem about the theme, please contact us by using our support center. However before getting support, please read this documentation and watch video tutorials.

Enjoy it!

Welcome
top

## Requirements

- PHP 5.2.4 or greater
- MySQL 5.0 or greater
- WordPress 3.4 or greater

Getting Started
top

## Downloading from ThemeForest

Download the Envision theme package from ThemeForest and unzip it. Any good quality zip program will do. Just follow the unzip instructions of your program carefully. Some give you the option of unzipping only a portion, or all, of the files. You want to select "all". Once unzipped, you will find the following folders will be in the unzipped directory:

> - `envision.zip` - the zip file of the theme
> - `envision-child.zip` - the zip file of child theme
> - `documentation/` - theme documentation
> - `licensing/` - licenses for the theme
> - `resources/`
>   - `sample skins/` - importable skin files
>   - `sample sliders/` - importable slider files
>     - `revolution slider/` - importable slider files for revolution slider
>   - `psd/` - all psd files of the theme
>   - `dummy data/` - importable xml files for sample datas
> - `tools/` - tools to help you
>   - `searchreplacedb.php` - PHP script for searching and replacing mysql database fields smoothly
> - `change log/` - changelog files for the theme versions

Getting Started
top

## Installation

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress

When you are ready to install a theme, you must first upload the theme files and then activate the theme itself. The theme files can be uploaded in two ways:

- FTP Upload: Unzip the `envision.zip` file and using a FTP client software, upload the unzipped theme folder into the /wp-content/themes/ folder on your server.

  > The folder must be like this: (`/wp-content/themes/envision/`)

- WordPress Upload: Navigate to `Appearance` › `Add New Themes` › `Upload`. Go to browse, and select the zipped theme file in the package (`envision.zip`). Hit “Install Now” and the theme will be uploaded and installed.

Once the theme is uploaded, you need to activate it. Go to `Appearance` › `Themes` and activate your chosen theme.

More Info: Using Themes http://codex.wordpress.org/Using_Themes

Video Tutorial Installation via WordPress Upload
Getting Started
top

## Install Sample/Dummy Content

- 1. step: Go to `` › `Control Panel` › `Dahsboard` (Also the importer can be found in `Control Panel` › `System` › `Demo Contents` tab.)
- 2. step: Select the content types which you wish to import and hit
  button
- 3. step: Hit
  button to import contents.

Important: DO NOT INSTALL demo contents to your live website. It will corrupt your existing data(pages, widgets, skins, sliders and options). We suggest you install demo contents only on a clean WordPress setup. We do not hold any responsibility if you lost existing data.

Video Tutorial Installing Sample Contents with One-Click

1
2
Getting Started
top

## Pretty permalinks structure

You should setup your permalinks to look pretty.

Go to `` › `Settings` › `Permalinks`, choose the Custom Structure, and use this: `/%category%/%postname%/`

More Info: http://codex.wordpress.org/Using_Permalinks
Creating Pages · Home page
top

## Setting up Homepage

To set up the homepage you must create a new page, you can do so by navigating to `Pages` › `Add New`

You can give this page a title yet you do not have to include any content. Select the a template from the Page. And click
or

You can create the homepage's content using the content composer or classic wordpress editor. (See: using of the content composer)

Creating Pages · Home page
top

## Setting the homepage as static page

After creating your home page, navigate to `` › `Settings` › `Reading`, set Front page displays: A static page, and select your home page as front page.

Your homepage can be viewed by visiting your root URL.

Creating Pages · Blog page
top

## Setting up Blog Page

To set up the blog, you must create a new page with no content, you can do so by navigating to `` › `Pages` › `Add New`. Name it "Blog" and set a template for the page and click

Creating Pages · Blog page
top

## Displaying blog posts on the blog page

After creating your blog page, navigate to `` › `Settings` › `Reading`, set Front page displays: A static page, and select your page named Blog as `posts page`.

Your blog index can be viewed by visiting the page you just published.

Creating Pages · Blog page
top

## Creating multiple blog pages

Video Tutorial Creating multiple blog pages
Creating Pages · Portfolio page
top

## Setting up Portfolio Page

Video Tutorial Setting up portfolio page

1. To set up the main portfolio page, you must create a new page, you can do so by navigating to `` › `Pages` › `Add New`. Name it as "Portfolio" or another name you wish. And hit
   button.

2. After creating the main portfolio page, go to `` › `Control Panel` › `Portfolio` › `General Portfolio Settings` and select your portfolio page for the `Porfolio Page` option.

3. Back to portfolio edit page ( `` › `Pages` › `All Pages` › `Porfolio` › `Edit` )

4. Add a `Portfolio` module to the page by using the content composer. (See: using of the content composer)

5. You can change the portfolio widget's options to customize your portfolio page.

6. Now, we should create some portfolio posts to display them on the main portfolio page. (See: creating portfolio posts)

Video Tutorial Setting up portfolio page
Creating Pages · Portfolio page
top

## Creating portfolio posts

Video Tutorial Creating a Portfolio Post / Part 1
Video Tutorial Creating a Portfolio Post / Part 2

1. To create a portfolio post, navigate to `` › `Portfolio` › `Add New` page,
2. Insert a title for your portfolio post,

3. Set a featured image,

   1
   2
   3

4. Set the post options

5. And hit
   button.

Creating Pages · Contact page
top

## Setting up Contact Page

Download: Contact Form 7 - http://wordpress.org/extend/plugins/contact-form-7/

- You should use Contact Form 7 plugin for contact form.
- After installing it, go to `Contact` › `Add new` (or edit current form) page to create a contact form.
- Than add the `Contact Form` widget using the content composer to embed the form into your page.

1
2
3

- And hit
  and save your page.

WooCommerce
top

## Installing WooCommerce and Demo Products

Video Tutorial Installing WooCommerce and Demo Products
Content Composer
top

## Creating Page with the Content Composer

Video Tutorial Creating pages with the Content Composer - Part 1
Video Tutorial Creating pages with the Content Composer - Part 2
Content Composer
top

## Export page contents

- Click `Export All` button.

  1

- Copy all generated datas.

  2

Content Composer
top

## Import page contents

- Click `Import` button.

  1

- Paste your exported data here and click import button.

  2

Content Composer
top

## Save / load the composer's templates

Video Tutorial Save / load the composer's templates
Content Composer
top

## Importing Pre-Built Pages

- Click `Pre-Built Pages` button.
  1
  2

Shortcode Generator
top

## Using Shortcode Generator

You can see the shortcode generator button at the top of all pages of your admin panel. Just hit the `Shortcode Generator` button and generate your shortcode easily.

Shortcode Generator
top

## Using of the Shortcode Generator

Video Tutorial Using of the Shortcode Generator
Shortcode Generator
top

## Shortcodes and Attributes

CSS Entrance Effect

    [fx effect='' delay='' start_delay='']

Buttons

    [button size='' color='' link='' target='' align='' radius='' block='' icon_position='' icon='' shadow='' title='' custom_effect='' margin_top='' margin_bottom='']Content[/button]

Divider

    [divider color='' fullwidth='' device='' margin_top='' margin_bottom='']

    [mini_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']

    [dotted_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']

    [dashed_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']

    [fade_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']

    [fade_dotted_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']

Text Block + Icon

    [text_block icon='' link='' lightbox='' position='' title='' title_color='' title_position='' content_align='' tag='' effect_icon='' effect_title='' effect_text='' margin_top='' margin_bottom='']Content[/text_block]

Icon

    [icon icon='']

Lists

    [list type='' icon_color='' border='']Content[/list]

Message Boxes

    [info title='' icon='' shadow='']Content[/info]

    [success title='' icon='' shadow='']Content[/success]

    [error title='' icon='' shadow='']Content[/error]

    [caution title='' icon='' shadow='']Content[/caution]

Blank Space

    [space height='' height_tablets='' height_phones='']

Text Rotator

    [text_rotator effect='' speed='' color='' border_color='' border_style='' border_width='' block='']Content[/text_rotator]

Custom Titles Typography

    [dropcap color='' background='']Content[/dropcap]

    [highlight color='' background='']Content[/highlight]

    [highlight1 color='' background='']Content[/highlight1]

    [highlight2 color='' background='']Content[/highlight2]

    [highlight3 color='' background='']Content[/highlight3]

    [blockquote color='' background='']Content[/blockquote]

    [pullquote_left color='' background='']Content[/pullquote_left]

    [pullquote_right color='' background='']Content[/pullquote_right]

    [pre color='' background='']Content

[/pre]

    [code color='' background='']Content[/code]

Sharing Services

    [sharrre type='' counter='' align='' margin_top='' margin_bottom='']

Blog

    [blog layout='' from='' category='' columns='' limit='' pagination='' title_element='' title_align='' excerpt_length='' show_excerpt='' meta_author='' meta_date='' meta_category='' meta_comment='' meta_likes='' image_ratio='' video_ratio='' list_style='' shadow='' margin_top='' margin_bottom='']

Like the Post

    [like_the_post likes_layout='']

Portfolio

    [portfolio orderby='' order='' layout='' from='' id_cat='' id_filter='' id_post='' id_selected='' filters='' filters_position='' filters_style='' filters_title='' columns='' limit='' height='' pagination='' title_element='' title_align='' default_icon='' default_button_text='' show_desc='' show_caption='' image_ratio='' video_ratio='' link_target='' gallery_rotate='' shadow='' margin_top='' margin_bottom='']

Contact Form

    [contact-form-7 id='']

Gallery

    [cfw_gallery device='' columns='' width='' height='' lightbox='' carousel='']Content[/cfw_gallery]

Get Page Content

    [the_content id='']

Google Map

    [gmap maptype='' height='' address='' latitude='' longitude='' zoom='' marker='' html='' shadow='' doubleclickzoom='' fullwidth='' scrollwheel='' controls='' pancontrol='' zoomcontrol='' maptypecontrol='' scalecontrol='' streetviewcontrol='' overviewmapcontrol='' stylers='' stylers_hue='' stylers_saturation='' stylers_lightness='' stylers_labels_text_color='' stylers_labels_stroke_color='' stylers_road_labels='' stylers_road_lightness='' margin_top='' margin_bottom='']

Single Image

    [image id='' class='' floating='' device='' margin_top='' margin_bottom='' margin_left='' margin_right='' src='' retina='' link='' position='' style='' alt='' title='' resize='' lightbox='' lightbox_group='' resize_width='' resize_height='' shadow='']

Logical Condition

    [condition condition='' if_false_call_page='']

Progress Bar

    [toggle percent='' value='' height='' stripe='' gradient_start='' gradient_stop='' margin_top='' margin_bottom='']Content[/toggle]

Circle Progress Bar

    [toggle percent='' size='' rotate='' bar_width='' bar_color='' track_color='' label='' margin_top='' margin_bottom='']Content[/toggle]

Slider

    [slider id='']Content[/slider]

Social Services

    [socialbar size='' align='' color='' radius='' effect='' start_color='' end_color='' hover_start_color='' hover_end_color='' border_color='' custom_effect='']Content[/socialbar]

Testimonial

    [testimonial name='' caption='' image='']Content[/testimonial]

Toggle

    [toggle title='' state='' icons='' group='' device='' margin_top='' margin_bottom='']Content[/toggle]

Video

    [video type='' url='' autoplay='' shadow='']Content[/video]

HTML5 Video/Audio

    [html5_player type='' source_m4v='' source_ogv='' source_webmv='' poster='' autoplay='' shadow='' margin_top='' margin_bottom='']

Widgetized Areas

    [widget sidebar='']

Single Columns

    [1of2]Content[/1of2]

    [1of2_last]Content[/1of2_last]

    [1of3]Content[/1of3]

    [1of3_last]Content[/1of3_last]

    [1of4]Content[/1of4]

    [1of4_last]Content[/1of4_last]

    [1of5]Content[/1of5]

    [1of5_last]Content[/1of5_last]

    [1of6]Content[/1of6]

    [1of6_last]Content[/1of6_last]

Responsive Content

    [responsive device='']Content[/responsive]

Fullwidth Section

    [section id='' class='' style_id='' device='' margin_top='' margin_bottom='' padding_top='' padding_bottom='']Content[/section]

Boxed Content

    [boxed_content id='' class='' device='' radius='' shadow='' shadow_color='' shadow_direction='' gradient_start='' gradient_stop='' bg_image='' bg_position='' bg_attachment='' border_color='' border_style='' border_width='' link='' target='' height='' color='' link_color='' link_hover_color='' margin_top='' margin_bottom='' padding_top='' padding_bottom='']Content[/boxed_content]

Twitter Timeline

    [twitter_timeline username='' style='' columns='' count='' avatars='' carousel='' effect='' auto_rotate='' rotate_time='' arrows='']

Revolution Slider
top

## Using of Revolution Slider Plugin

Video Tutorial Using of Revolution Slider Plugin
Revolution Slider
top

## Importing demo Revolution Sliders

You can find importable revolution slider files inside `resources/sample sliders/revolution slider` folder in the theme package that downloaded from ThemeForest.

Video Tutorial Importing demo Revolution Sliders

You can find importable revolution slider files inside `resources/sample sliders/revolution slider` folder in the theme package that downloaded from ThemeForest.
Built-in Slider Manager
top

## Creating a slider

1. To create a slider, navigate to `` › `Slider Manager`, and hit the
   button.

2. Insert a name for your new slider and select a slider type. Then hit
   button again.

3. Now, you will see the slider options for your new slider. Set the options and save the slider.

4. We can pass the next step: creating slider items.

Built-in Slider Manager
top

## Creating slider items

1. After our slider created, we should create some slides for our slider. For that we must go to slider items managing page. And hit
   button.

2. Upload your image and set other item options and hit
   button.

3. After creating slider items, you can sort your slider items by drag drop method.

4. How to insert sliders into your pages

Built-in Slider Manager
top

## Insert sliders into your pages

1. To insert a slider into your pages, you should add `Slider` module into your pages via the content composer.

2. After adding the `Slider` module, hit to `Options` icon, then you will see module options.

3. Select the slider name that you wish to insert your pages. And save the page.

Also you can insert a slider into your pages via [slider] shortcode. (See: how to create shortcodes)
Built-in Slider Manager
top

## Importing sliders

You can find demo slider files inside `resources/sample sliders/` folder in the theme package that downloaded from ThemeForest.

1. Go to `` › `Slider Manager`, and hit
   button.

2. Selet one of importable slider file, and hit
   button again.

You can find demo slider files inside `resources/sample sliders/` folder in the theme package that downloaded from ThemeForest.
Customization · Visual Settings
top

## Creating new visual set

Video Tutorial Creating new visual set

1. Go to `` › `Control Panel` › `Visual Settings` › `All Visual Sets`, and hit
   button.

2. Type a name for your set and hit
   button again.

3. After creating your new set, click to edit icon to see all visual options.

Customization · Visual Settings
top

## Importing visual set

You can find pre-defined importable visual setting files inside `resources/sample skins/` folder in the theme package that downloaded from ThemeForest.

1. Go to `` › `Control Panel` › `Visual Settings` › `All Visual Sets`, and hit
   button.

2. Selet one of importable visual setting file, and hit
   button again.

You can find pre-defined importable visual setting files inside `resources/sample skins/` folder in the theme package that downloaded from ThemeForest.
Customization · Typography Settings
top

## Installing Fonts from Google Webfonts

Video Tutorial Installing Fonts from Google Webfonts
Customization · Typography Settings
top

## Installing Fonts from Premium Services

Video Tutorial Installing Fonts from Premium Services
Menus
top

## Menu Locations

This theme has 2 menu locations

> - `Navigation Menu` - This is main navigation thats located in the header
> - `Footer Menu` - This is located at the bottom above copyright text. This menu does not support dropdown

Mega Menus
top

## Creating Mega Menus

To enable mega menus, please follow these instructions:

- Go to `Appearance` › `Menu` page.
- Create a menu via wordpress' builtin menu manager.
- Set this menu for Navigation Menu location. `(This is important. If you don't set your menu as Navigation Menu you cannot see the mega menu options)`
- Now you can see the mega menu options in the options of menu items.

Video Tutorial Creating Mega Menus
Mega Menus
top

## Creating Mega Menus with Custom Page Content

Video Tutorial Creating Mega Menus with Custom Page Content
Sidebars and Widgets
top

## Theme Sidebars

The theme has 13 sidebars by default. Also, you can create your own custom sidebars under the `Theme Control Panel` › `Global Settings` › `Sidebar Manager` tab and can use them in your pages whatever you want.

Sidebars and Widgets
top

## Adding widgets into sidebars

You can add widgets into a sidebar area by the drag and drop action. Also, when you click to the widget titles, you will see the sidebar list. Just select one of them to add your widget to a sidebar.

Video Tutorial Adding widgets into sidebars
Sidebars and Widgets
top

## Creating custom sidebars

To crete a custom sidebar, navigate to `` › `Control Panel` › `Global Settings` › `Sidebar Manager`

Sidebars and Widgets
top

## Playing with Widgets

Video Tutorial Playing with Widgets
Custom Login Pages
top

## Creating Custom Login Pages without WooCommerce

Video Tutorial Creating Custom Login Pages without WooCommerce / Part 1
Video Tutorial Creating Custom Login Pages without WooCommerce / Part 2
Side Panel
top

## Setting Up the Side Panel

Video Tutorial Setting Up the Side Panel
Fullwidth Sections with Parallax Effect
top

## Fullwidth Sections with Parallax Effect

Video Tutorial Fullwidth Sections with Parallax Effect
How-to · Move your website to another server smoothly
top

## Step 1: Export Local WordPress Database

First thing you need to do is export your local WordPress database. We will be using `phpMyAdmin` to do that. If you are unfamiliar with it, then you might want to take a look at our guide to WordPress database management using `phpMyAdmin`. Simply go to `http://localhost/phpmyadmin/` and click on your WordPress database. Next, click on the Export button from the top menu bar.

In the Export Method option choose custom, which will provide you with more options to export your database. Select all tables to export and gzipped for compression. Scroll down to the bottom of the page and press the Go button to download your database.

How-to · Move your website to another server smoothly
top

## Step 2: Uploading WordPress Files to Live Site

Now open an FTP client and connect to your live site. Once you are connected to your live site, make sure you upload the files in the right directory. For example if you want the site to be hosted on yoursite.com, then you would want to upload all files in your public_html directory. Now select your local WordPress files and upload them to your live server.

How-to · Move your website to another server smoothly
top

## Step 3: Creating MySQL Database on Live Site

While your FTP client is uploading your WordPress files, you can spend this time on importing your database to the live server. Most WordPress hosting providers offer cPanel to manage your hosting account, so we will show you how to create a database using cPanel. Log in to your cPanel dashboard and click on the MySQL databases icon which can be found in the databases section.

On the next screen, create a database by entering a name for your database.

After creating a database, scroll down to MySQL users section and create or add an existing user to the database. After adding the user, cPanel will take you to set MySQL privileges for that user. Simply grant all privileges to the user.

How-to · Move your website to another server smoothly
top

## Step 4: Importing WordPress Database on Live Site

Next step in the process is to import your WordPress database. Go to your cPanel dashboard, scroll down to the databases section and click on phpMyAdmin. This will take you to phpMyAdmin where you want to click on the database you created earlier. phpMyAdmin will show your new database with no tables. Click on the Import tab in the top menu. On the import page, click on choose file button and then select the gzipped database file you saved in step 1. Lastly, press the Go button at the bottom of the page. phpMyadmin will now import your WordPress database.

How-to · Move your website to another server smoothly
top

## Step 5: Changing the Site URL

Now you need to change the site URL, so you can setup your live WordPress site.

To change the site URL smoothly, a PHP script named as `searchreplacedb.php` has been added to `/resources/tools/` folder in the theme package downloaded from ThemeForest.

To use the script, you should put it in the root folder of your WordPress install (if you wish it to automatically pick up your wp-config) or anywhere else you fancy, but you won’t get the automatic config. You should also, to protect yourself from automated scanners looking for this script, rename it first. eg, you could name it as `rrrrreplace.php` – you’d then visit a url like `http://example.com/rrrrreplace.php` and follow the on-screen instructions from there.

What you absolutely, 100% certainly MUST do is to delete the script once you’ve finished. If somebody chances on it they can do anything to your database – and that wouldn’t be nice, would it?

Why we should use this script to change the site URL?

When you’re migrating WordPress (or any other platform using serialized PHP strings in the database) between domains, you must use a safe search and replace method that preserves the integrity of the serialized string lengths. A simple of a dump file for http://localhost to, for example, http://thenewdomain.com is problematic because the length of the string changes but the indexes for the serialized strings does not. Consequently settings are lost and widgets disappear. Not good.

This script can now also handle multiply nested serializations, which can happen in transient values in WP at times, and it can also handle multi-byte Unicode changes safely. This is important now that internationalised domain names are allowed.

How-to · Move your website to another server smoothly
top

## Step 6: Setting Up your Live Site

Now that we have imported the database, and all of our content should be uploaded, it is time to configure WordPress. At this time, your site should be showing an `Error Establishing Database Connection` error. To fix this, connect to your website using an FTP client and edit `wp-config.php` file. Provide the database name, user and password you created earlier in Step 3. Save the `wp-config.php` file and upload it back to your server. Visit your website, and it should be live now.

Login to your WordPress admin panel, and go to `Settings` › `General`. Click save Options. This will ensure that the site url is corrected anywhere else that needs to be. Then go to `Settings` › `Permalink` and click Save to ensure that all post links are working fine.

How-to
top

## How to use different visual set on a page

The theme Envision supports to use different visual sets on pages.

1. First, create a visual set.

2. Go to page editing, you will see `Custom Skins` section at the right-top of page. Select a different skin from your primary skin here to use it on the page.

How-to
top

## How to import custom icon set

Video Tutorial How to import custom icon set