VANESSA Premium WordPress Theme Documentation

http://www.wplab.pro

Table of contents

1. Introduction

2. Premium Support

3. Requirements & Compatibility

4. Installation and basic WordPress setup

5. Demo Data

6. Theme Options

a. General Settings

b. Posts settings

c. Coming soon & Maintenance modes

d. Branding

e. Skins

f. Header

g. Content area

h. Buttons

i. Footer settings

j. Sidebar settings

k. Widget Areas

l. Social and search settings

m. WooCommerce & Shop

n. Tools

7. Custom post types

8. Menus

9. Pages, custom layouts and Visual Composer

10. Source and credits

1. Introduction Thank you for purchasing our theme. We hope that you will be satisfied with our work and it

will please you.

Theme Features:

Absolutely power of Visual Composer

Backend and front­end visual editor. Create unlimited number of layouts with WYSIWYG

interface with a few mouse clicks. You do not need to know anything about HTML or CSS

to create website of your dream.

17 custom widgets for VisualComposer included

Theme using a modern technology (SVG +Less) that allows you to create an unlimited

number of color schemes. All images used by the theme may change the color of your

choice.

7 skins are already included in the package (white and pink, dark skin, contrast skin,

wood, Brown and Blue, Triangle and Green, Soft and Aqua Green)

Change absolutely everything. (Knowledge of HTML / CSS is NOT required!). Change the

sizes, colors, fonts, font styles, rounded corners, margins of ANY theme element simply

through powerful admin panel.

8 styles of page preloaders in the box

Branding settings

Boxed and wide layout supported

Google map customizer

Header / footer / sidebar / content area / buttons, typography customizer

7 pre­defined layouts for your posts and content (one column / two columns / three

columns / four columns / timeline / masonry / full screen media)

Two version of homepage included

Unlimited number of widget areas (create your own!)

Powerful settings for each post or page

Visual pricing tables editor

Custom content types (Blog posts / Partners/Clients / Portfolio / Team members /

Benefits / Testimonials / Videos / Photo albums)

629+ font families from Google Fonts (and counting).

3 Pagination style (AJAX pagination supports browser history)

Widgetized and simple footer

Awesome Visual Effects

2 variations of header menu

1 to 1 demo data installer

Fully responsive and optimized for mobile devices. Designed for large desktops / small

desktops / tablets / phones (landscape and portrait modes).

Premium support. We will not leave you alone if you faced a problem

Well­documented

Custom post formats support: Aside; Gallery; Link; Image; Quote; Status; Video; Audio;

Chat

Translation ready

Lots of social icons

Captcha for comments and contact form

Maintenance and Coming Soon mode

PHP MVC code, easy to extend

HTML5 and CSS3. Comfortable with LESS? We support it

Full native Retina Displays support

Mail Chimp native integration

100% compatible with Gravity Forms and Contact Form 7

Full support of WooCommerce

LayerSlider 5 included (save $18)

Additional icon library (IcoMoon) included ($59 included at theme’s value). You do not

have enough FontAwesome icons? Forget about the shortage.

SEO­friendly markup. Social ready

Goggle, Facebook and Twitter will love your website. Open Graph and Schema.org

friendly HTML markup

Build­in login with social networks (google and facebook)

2. Premium Support Do you have any questions that are beyond the scope of this help file? Faced a problem? No

worries! We are sure that we can solve it. Please feel free to create support ticket here.

Support requests are being processed on business days in the order they were received.

Attention! Please note that we cannot provide the technical support until you specify your Item Purchase Code.

Where can you get it?

1. Go to downloads page and click the “Download” button, then click “License certificate &

purchase code”

2. Open the downloaded text file, and copy your item purchased code:

3. Requirements & Compatibility Vanessa WP is compatible with the WordPress versions 3.8 and later (PHP v.5.2.4 or greater;

MySQL v.5.0.15 or greater)

Most JavaScript enabled Browsers will make this theme work with no issues! It is designed for

desktop, tablet browsers and phones.

It has been tested on:

1. Firefox 24 and later

2. Google Chrome 30 and later

3. Internet Explorer 9 and later

4. Opera 12 and later

4. Installation and basic WordPress setup Download & Install WordPress 3.8 or later. http://wordpress.org/download/

Upload theme.

Unzip the “wpl­vanessa­wp_v.zip” theme package. There you will find the theme installation file

(“wpl­vanessa­wp.zip”), manual and license folder.

To install the theme, in your WordPress Admin Panel (wp­admin) go to “Appearance > Themes

> Install Theme > Upload > Install theme in .zip format” (see a screenshot.) and choose the

theme installation file (vanessa­wp.zip).

Please note that some hosting providers have a restriction on the size of the file that you

are uploading. If you can't install the theme via the standard WP theme installer, please

install it via FTP. Simply unzip the "wpl­vanessa­wp_v.zip" file and upload the

"wpl­vanessa" folder via FTP into "your_site/wp­content/themes/"

Activate the theme

In “Appearance > Themes > Manage Themes > Available Themes” activate “Vanessa” theme

by hitting the correspondent “Activate” link (please see the screenshot).

After activating Vanessa WP you will notice a Theme options, Custom Post Types (Photo

Albums, Catalog, Portfolio, Pricing Tables, Partners / Clients, Team Members, Benefits,

Testimonials) and “thank you” notice in your WordPress admin panel.

This theme recommends the following plugins: Layer Slider WP, Visual Composer and

WooCommerce. You can install them by clicking at “begin installing plugins” link, but it is

not necessary if you are not going to use them. To hide the notice about plugins, click the

“dismiss this notice link”.

5. Demo Data If you are newbie in WordPress, we strongly recommend you to install demo data to learn

how the theme works. Simply go to “Theme options” ­> “Demo data” screen and click

“Click here to install demo data” button. This operation may take some time, so please do

not refresh this page until operation will be completed.

Important notes:

1. Demo data must be installed on a clear WordPress installation.

2. The Demo data installer will not import the images we have used in our live demos, due

to copyright / license reasons.

3. Do not run importer multiple times one after another, it will result in double content.

6. Theme Options A theme contains many options and settings that can help you make a

website such as you conceived it. Let's look at them closer.

General settings

1. High­DPI (retina) images. This option turns on support of Apple Retina displays. Disabling this option will reduce the space occupied

by the site, but some images will be blurred at high pixel density

displays.

2. Iconic fonts. Enable or disable additional libraries of iconic fonts.Enabling additional font libraries will add 1200+ premium icons,

but may affect site loading speed

3. Page preloaders. The theme comes with a variety of page preloaders. Here you can choose style of page preloader.

4. Rounded corners. Here you can set the radius of rounding corners for theme elements.

5. RSS Feed. This option enables or disables RSS feed on your website. Also you can customize the display of images in the feed without additional plug­ins.

6. Breadcrumbs. Enables or disables breadcrumbs (additional navigation) across website.

7. Captcha settings. Enables or disables mathematical captcha for a comments form. This will help protect your site from spam bots.

8. “Go Top” link. Enables or disables the link to the top of the page when you scroll down the site window.

9. Admin area. Here you can setup displaying admin bar for logged non­admins at front­end part and disable an access to WP admin for logged non­admin users

Posts settings This screen controls “about author” block (will be shown after post content) and “Related posts”

block for each post type.

Also, here you can customize the appearance of “related posts” block, enable / disable

thumbnails, excerpt, block footer etc.

Coming soon & Maintenance modes

We cared to get your site started to work immediately after purchasing of the theme. You

can enable “Coming soon” mode in few clicks at “Custom modes” tab, and then slowly fill

the site with information. Choose the planned opening date of website, custom background

image and all unregistered users will see the following page:

If you would like to notify your users about opening your site, you can setup MailChimp form at

this screen.

For this data to submit properly, there are a few key bits of code from your MailChimp

signup form that will need to be added to your hosted form. You'll want to ensure that sure

that the form action, user ID, list ID, and input name elements on your custom form match

those found on your MailChimp signup form.

To grab the fields, do the following:

1. Login into your MailChimp account and create the form.

2. Navigate to the Lists page

3. Click the drop down menu for the list whose forms you want to work with and choose

Signup forms

4. Click the General forms option

5. Highlight and copy the Subscribe Form URL, then paste it into the address bar of a

separate browser tab or window

6. In the new browser tab or window, right­click (control + click in Mac OSX) to view a

context menu in the browser

7. Select the option to view the page source

8. Find the form action and field information in the form's HTML

9. Copy/paste the form action code to your hosted form. The first value beneath the form

action URL is an identifier to link to your MailChimp account. The second value is your

list's unique id. Both values are necessary to make sure your form submits to the proper

list.

10. Locate each of the form's field inputs and copy/paste the "name" for each input to the

corresponding field in the theme settings.

Branding settings The fastest way to brand your theme. Here you can upload

your own website logo, favicon and apple touch icons in few

clicks.

Skins The theme comes with 7 beautiful skins and you can swith

between then at this screen. Here is a full list:

1. Default (white and pink)

2. Black (dark skin without textures)

3. Contrast (dark skin with textures)

4. Wood

5. Brown and blue

6. Triangle and Green

7. Soft and Aqua green

Choosing one of the skins on this page you can fully

customize its display panel in the admin theme. We will talk

about this at next section.

Header settings This is a control panel of your theme header settings. What you can change:

1. Header top bar. It can display additional information at page header like an address, phone, skype, email, working hours etc. It can be fully­customized to suit your needs.

Switch to “Customize top bar styles” ­> “Yes” and play with customizer:

2. Header menu. Here you can enable / disable scrolling of header menu, change menu

style and change fonts and colors of header menu by clicking “customize header styles”

Content area, Futtons, Footer, Sidebar customizer

Fonts settings, colors and backgrounds for any part of your website area. Customizer looks

similar for all sections of the theme and needs no further explanation.

Widget areas It is really simply create unlimited number of widget areas with Vanessa theme. Fill sidebar

name and click “Add” button, just like you create a category for blog post. Created sidebar

will be available for use immediately.

Social and Search

1. Tracking code. This field is for your tracking / analytics code. Will be placed at page

footer

2. Like buttons. Option will display popular social buttons after post content.

3. Social icons. Enter your social links here and use them at any part of theme like header / content or contacts template

4. Facebook / Google API Keys. Why you may need API setup Settings? The answer is

simple: if you want to use a quick registration and authorization of users at your website

­you are a stone's throw from the goal. The Vanessa theme supports login and signup

with social networks account in the box. For example, this will increase the number of

quality comments on your site, or the number of customers who do not want to once

again fill the registration form.

To setup authorization with Google account, you will need Google Client ID and Google Client

Secret code. To get them, go to Google Console page by clicking this link. You will see a

similar screen:

Let’s create our project by clicking “Create Project” button.

Fill the “Project name” field and press “create” button. After your project will be created, go to the

“APIs & auth” ­> “Credentials” screen.

Click the “Generate new client ID” button, fill the form, type the Redirect URL, it is

http://your­website.com/?wproto_action=oauth­run&provider=google then copy your Client

ID and Client Secret code into appropriate fields of theme settings

Press “Save settings” button at bottom of the page, and now your theme is ready to login

with google account.

How to setup Facebook OAuth: Go to Facebook APPs console by clicking at this link and create new application by clicking

“Apps” ­> “Create new application” like on a screenshot.

Fill the necessary fields and press “Create app” button.

After your application will be created, copy your App ID and Client Secret code from this

window to theme settings window.

Press the “Save settings” button. That’s all!

Tools This screen contains useful tools you may need.

Reset all settings. If you mess up in the settings, this feature will help you to reset all settings.

Flush rewrite rules. Update rewrite rules, if you have troubles with custom post types.

Thumbnails Rebuild. If you migrated from another wordpress theme, you need to regenerate existing thumbnails images

Grab Google Fonts. To improve performance we cache list of Google fonts locally. As new fonts will be availabled at Google, you can download the new fonts list by clicking on the

button at right. You need to enter Google API key at theme's settings to get fonts from

Google.

It's all the theme settings! Now we can go to content.

7. Custom post types You will find a lot of custom post types after theme activation to store your website content:

1. Pricing tables

2. Partners / Clients

3. Portfolio

4. Team members

5. Benefits

6. Testimonials

7. Videos

8. Photo Albums

Storing data in the appropriate places is the basis of easy management of your web site. To add

your first blog record, navigate into “Posts” ­> “Add” section

Adding a Videos

If you have a lot of videos hosted on YouTube / Vimeo sites, you can quickly add them to your

site. Navigate into “Videos” ­> “Add new”, and simply paste your YouTube / Vimeo link into the

“Link to the video” field, then click “Get video” button.

The system automatically grab the data of your video and it will setup featured image for

your post. Now add some description, create category and press the “Publish” button.

That’s all! Now you can display all of your videos as wordpress posts (we will talk about this

in more detail further in the documentation).

Adding Photo Album / Portfolio work

Navigate into “Portfolio” ­> “Add Portfolio Item”. Fill “Title” and look at “Attached images”

metabox. Here you can add some pictures for that work by clicking “Add images” button.

These images will appear on a single work page

Adding a pricing table

It is easy to create complex pricing table by few clicks with our amazing pricing tables editor. It's

so simple that it needs no explanation, look at screenshot:

Add your packages / features by clicking corresponding buttons, fill the price, button title

and link URL and press the Publish button.

Now that you're familiar with the basic features of metaboxes, (and other features are very

easy to learn), we can get acquainted with menus, visual editor and custom layouts settings.

8. Menus Manage menu is almost indistinguishable

from the standard, but there are some

points which you should pay your

attention.

You will find some checkboxes that we

have developed for your convenience,

here are:

1. Menu icon. Here you can select an icon for each menu item

2. Do not display as link. Menu item will be displayed without

reference to anything

3. “One­page” external menu element. We discuss this more

in detail in the next section.

4. “Mega menu” style. Used to create a “mega” menu style

5. “Hide at...”. You can hide or show any menu item for different

resolutions of browser or mobile

devices

Creating “Mega Menu”

In this example we will use posts categories in our mega menu. Let’s create some of them.

Go to “Posts” ­> “Categories” screen and create a category with “Clothing” title. Then set

a featured image for it and set “Featured” flag. Click “Add category” button. This category

will be displayed wit image (on the right in our example picture).

Let's create our other categories for our mega menu, such as “Music”, “Albums”, “T­shirts” etc.

Do not select any additional parameters, these items will display as a simple list.

Now let's move on “Appearance” ­> “Menus” screen. Add a first­level menu item called

“Shop” and set “display as mega­menu” checkbox.

Then, add a child categories for it and save your menu. That’s all. Simply

Creating navigation for One-Page home

Let's look at a page from the theme demo data called “One Page Home”. Each section of

this page should have an unique anchor. One­page navigation is done according to this item.

Switch editor mode to Visual Composer “Backend editor”. Then find “edit row” link

Click at “Edit row” link and find an “Anchor” field

You must specify a unique anchor for each row on that page. They will be used in our menu.

Now let's create a new menu called “One page home” and add menu items for each row of

our page:

To add a menu item that does not belong to page row,

use «One­page» external menu element flag. In this

example, the “Blog” menu item will be linked on a

separate page, not for home page row:

Now save the menu and assign it for our One­page home at “home page template settings”

metabox (edit page screen):

That’s all.

9. Pages, Visual Composer and Custom Layouts Okay, we are ready to talk about page templates, visual composer and template settings. Let’s

create some pages! Go to “Pages” ­> “Add new” screen and look at it. A standard screen will

look like this:

Sidebar options metabox

Here you can set sidebar position for each page, enable / disable footer widget area and switch

between widget areas for each page.

Slider settings metabox

This metabox controls a slider for each page. Here you can choose slider position, slideshow

and enable / disable slider for each page.

Appearance options metabox

It controls page breadcrumbs and page title. Here you can show or hide them.

Page redirect metabox

Here you can configure redirect for each page, choose

redirect type and redirect code.

Page attributes metabox

This is a very important part of the theme, which controls additional metaboxes of the

theme. Let's look at an example. Suppose you need to display your portfolio posts as

“timeline”.

Create a new page and call it as “Our portfolio”. Then choose “2. Portfolio” template at

“Page attributes” metabox.

You will see additional metabox called “Layout settings”. Choose “Timeline” layout and setup additional options like “Pagination style”, “Posts per

page”, “Posts order” etc. Save your page. This page will display your portfolio records at

front­end part.

You can choose any type of post to display in the same manner, like “Blog posts”,

“Portfolio”, “Photo Albums”, “Videos” etc.

Visual Layout Editor You can create unlimited number of layouts you can imagine with useful layout editor in

two ways ­ backend and front end editor. Look at the two buttons at the top of the page

under the heading:

Let's try to create a new template with three columns and add some useful widgets with

“Backend editor”. Click to “Backend editor” button and you will see an editor.

Backend Layout Editor

Let's add our first row by clicking “Add row” button. Then click at “Row layout” button and

choose “⅓ + ⅓ + ⅓” layout type.

You will see that the number of columns changes

Now click on “+” and choose “text block” widget:

Add some text and click “Save” button:

Let's add another block of text next, having done the same operation.

Now add the widget with the logos of our customers:

Update the page and look at result. Simply, right?

Editing a page in “Front­end editor” differs only in that you can immediately see the result

of your actions. Click “Front­end editor” button.

That’s all. I hope this documentation was useful to you!

10. Source and credits WordPress Plugins:

Layer Slider Plugin ­

http://codecanyon.net/item/layerslider­responsive­wordpress­slider­plugin­/1362246

Visual Composer ­

http://codecanyon.net/item/visual­composer­page­builder­for­wordpress/242431

These plugins are NOT A FREEWARE! They are distributed and can be used only as a part of Vanessa WP theme. (This means that you cannot use it apart from Vanessa WP template,

unless you purchased the appropriate license on its official site).

JavaScript: Color Picker: http://colpick.com/plugin

Swiper: www.idangero.us/sliders/swiper/

jQuery Appear: http://code.google.com/p/jquery­appear/

jQuery Cookie: https://github.com/carhartl/jquery­cookie

jQuery Easing: http://gsgd.co.uk/sandbox/jquery/easing/

FS Scroller: https://github.com/benplum/Scroller

Selecter: https://github.com/benplum/Selecter

iCheck: http://git.io/arlzeA

LiquidSlider: http://liquidslider.com

OnePageNav: http://github.com/davist11/jQuery­One­Page­Nav

NivoSlider: http://nivo.dev7studios.com

ScrollTo: http://flesler.blogspot.com

Sequence Slider: https://github.com/IanLunn/Sequence

Serialize Object: https://github.com/macek/jquery­serialize­object

jQuery Tipsy: https://github.com/jaz303/tipsy

Touch Swipe: https://github.com/mattbryson/TouchSwipe­Jquery­Plugin

UI ToTop: http://www.mattvarone.com/web­design/uitotop­jquery­plugin

WaitForImages: https://github.com/alexanderdickson/waitForImages

LESS JS: http://lesscss.org

Masonry: http://masonry.desandro.com

NivoLightbox: http://dev7studios.com/nivo­lightbox

Numinate: https://github.com/greenball/numinate

OWL Carousel: https://github.com/OwlFonk

VEX: http://github.hubspot.com/vex/docs/welcome/

Fonts: Font Awesome ­ http://fontawesome.io/

IcoMoon ­ http://icomoon.io/

Google Fonts ­ http://www.google.com/fonts

Once again, thank you so much for purchasing our theme.

As we said at the beginning, we'd be glad to help you with any questions you might have

regarding this theme.

Best regards,

WPlab