Vavo Wordpress Theme Documentation

Vavo WordPress Theme Documentation

First of all, a big thank you for purchasing this theme. This document includes a how-to guide and helpful informations about options and features of the theme.

Support

Please read and search this documentation file before seeking support. If you have any questions that are beyond the scope of this document you can still contact us and open a support ticket here.

Do not use the comment section on the themeforest item page.
This will slow down the support process.

Please make sure that you are using the latest theme and plugin versions before asking for help.

Theme Installation See video tutorial

This theme requires the latest Wordpress version (5.2 and later).

There are 2 different ways to upload/install the theme.

FTP: Unpack the vavo.zip and upload the unpacked folder into the wp-content/themes/ folder
WordPress: Login into WordPress and go to Appearance > Add New Themes > Upload. Select the zipped theme file vavo.zip and click Install Now.

Once you have uploaded the theme you need to activate it. Go to Appearance > Themes and you should see the new Theme. Click Activate.

After activating the theme you will see a notice to install required plugins.
Click on "Begin installing plugin" and install them. Note that the installation process can take several minutes!

You can now import the demo content if wanted. (Recommended)

Import Demo See video tutorial

PHP Configuration limits

Make sure to fulfil at least these PHP configuration parameters before importing a demo. You can either increase these limits on your own, or contact your web host.

max_execution_time 200
upload_max_filesize 64M
memory_limit 96M
post_max_size 32M

You can import the demo content with just one click. Go to Appearance > Theme Options > Import Demo and choose the demo you want import. The importing process can take several minutes.

Update Theme

If you need to update the theme, there are 3 ways to do this:

WordPress (Envato Plugin): Install the Envato Market Plugin in order to always get notified when a new version is available and install it with just one click.
WordPress (manual): Deactivate the current theme by activating any other theme. Once the theme is not active you can delete this theme. After deleting it install the new updated theme and activate it. Don't worry, you won't lose your settings,options,content, ...
FTP: Delete the current theme folder 'vavo' in wp-content/themes/ and upload the new one.

NOTE You won't lose your settings,options,content, ... But if you did customizations to the theme files (edit/add code), they will of course be lost because the files are replaced by the new files.

Update Plugins

If one of the plugins needs an update, a message will appear to update this plugin. Click on "begin updating plugin" and update it.

If this doesn't work, there is a second method to update the plugin. Follow these steps:

Go to Plugins > Installed Plugins
Deactivate the plugin in question
Once deactivated, delete the plugin in question.
Now you will get a message again, for installing the plugin.

Customize Theme

If you want to make any customizations to the theme, it is recommended to use the child theme. You shouldn't change anything on the original files, because these changes will be lost on the next update.

Theme Options

The theme uses its own Theme options panel which you can access by navigating to Appearance > Theme Options. They give you full control over your website, and you can customize a design without using a single line of code.

Please go through all options to set up your site to the way you want it.

Adding Logo

Please upload your logo in 2 different version to the media library.

Dark logo
Light logo

SVG Logo

Do you want to use an svg logo? YOu first need to install and activate the plugin Safe SVG to make it possible to upload svg to the library.

Retina ready (if no svg)

If you want to make your logo retina ready you need to upload the @2x version of your dark + light logo. The @2x version should have double the size of the normal logo.
Example: your dark logo is called dark-logo.png (100px * 40px). Call your retina logo dark-logo@2x.png (200px * 80px) and upload it. It's very important that you upload both logos to the library at the same time/day.

Once you uploaded your logos to the library you can select your Logo in the Theme Options.

Go to Appearance > Theme Options > General
Add your Logo(s) by clicking on Upload Image
Choose your image on your Media Library OR upload a new image and click on Select Image. Make sure to select the normal logo version, not the @2x version.

Favicon

You can also upload a favicon to the them options panel. This will only have impact if you did not upload any Site Icon for your Site identity in Appearance > Customize > Site identity. It is recommended to upload a Site Icon instead of the theme option favicon.

Header

Set up your default header appearance layout in the theme options.

Typography

This themes gives you full control about your typography and fonts.

Choose your font and typography settings for the different parts and elements.

Additionally, you can also select different font sizes for different devices.

Font Manager

You can add fonts from Typekit or custom fonts. To do so scroll down to the font manager and add a new font.

Important It's very important that you enter the correct values for the "Family Name" and "Weights & Style".
Choose your type (Typekit,Custom Font,Google font). Only choose "Google font" when the font does not show in the Font list but is well available on the google font library.

Once you've added the font you can select it on the font list, add the very top.

Typekit

Add the font(s) to the font manager with the correct values and check the 'Typekit' type.
Put the ID / TOKEN (which you got from typekit) to the typekit field.

Important For typekit you need to use the familay name typekits gives you. For example:
Proxima Nova would be proxima-nova
Brandon Grotesque would be brandon-grotesque

Custom fonts

Follow these steps if you want to use a customwebfont

Make sure you have installed the Child theme.
Copy the folder/files that contain the web font to the Child theme.

Copy the @fontface CSS, and put it inside the style.css of the theme child, it should look something like the following code example.

@font-face{
font-family: 'MyWebFont';
src: url('folder/WebFont.eot');
src: url('folder/WebFont.eot?#iefix') format('embedded-opentype'),
url('folder/WebFont.woff') format('woff'),
url('folder/WebFont.ttf') format('truetype'),
url('folder/WebFont.svg#webfont') format('svg');
}

MyWebFont is the name you need also to use when adding the font to the font manager

Add the font(s) to the font manager with the correct values and check the 'Custom Font' type.

Portfolio Grid

Before you add any Portfolio item please add a Portfolio page (if not done yet).

Go to Page > Add New and give it a name
Enable the pagebuilder
Add a "Portfolio Items" Row to the pagebuilder and set up your options. You can now set up your different grid options (see below)

Actually, you can add your portfolio grid to any page you want.

Note As long as you don't have created any portfolio single item, your grid won't show anything of course.

Grid options

The Grid type gives you 2 possibilities. Grid / Masonry or Smart Scroll. Go through all other grid settings to get what you want.

Filter

Here you can decide which items you want to show. You can show all the items or only show specefic items by category.

The Count number value is the amount of items shown per page. Enter -1 if you want to show all items.

By enabling the Live Filter the visitors will have the possibility to filter your items on the page.

Captions / Hover

Set up the caption appearance (item name + category) and the hover effect.

Attention These settings can be individually overwritten in the portfolio single settings. You could for example choose a different caption appearance for a specefic item. By forcing these settings these individual settings won't have any impact.

Portfolio Single Item

Note The Vavo Core plugin must be installed to add portfolio items.

Create your different portfolio items by going to Portfolio > Add New.

The whole layout for your portfolio single page is done by the pagebuilder. Activate it and add the elements you want.

Add Featured Image

Featured Images are very important for this Theme. You should add a featured image to all your portfolio items. This is the image which will "represent" your project (on the grid, sharing, ...). To do so, click on Set featured image and choose your Image.

Go now to Appearance > Theme Options > Portfolio to set up the different options to enable sharing,pagination, etc.

Blog Setup

First of all, create a page where your Blog posts should be displayed. Once the page is created head to Settings > Reading and choose "A static page" and choose your Blog page you just created for "Posts Page". All your blog posts will be displayed on this page.

Note If you don't have selected a page for "Front Page" yet, you should select one. This is the main front page (home page) the visitor will see when it visits to your site.

Select also an amount for "Blog pages show at most". This is the amount of posts shown per page.

Head now to Appearance > Theme Options > Blog to setup your general blog layout appearance.
If you choose a layout with sidebar you can add your widgets for the sidebar in Appearance > Widgets.

Add blog posts to any page

The pagebuilder gives you the possibility easily add some posts in any page you want.

To do so, just add a "Blog Posts" Element to the pagebuilder and set up your options.

Blog Posts

To create blog posts, just go to Posts > Add New.
Select your post format and depending on the forma set up the different options related to your format.

Add now your content to the editor and save the post.

Note You will find further option like sharing, pagination, show date, ... in the theme options.

Add Featured Image

Featured Images are very important for this Theme. You should add a featured image to all your posts. This is the image which will "represent" your project (on the grid, sharing, ...). To do so, click on Set featured image and choose your Image.

Hero & Page TitleSee video tutorial

The Hero / Page Title is the first content of the page. It can contain a big image,video,slider,etc. or just the name of a page.

You can set up individual hero for each of your page/portfolio/post. Go to your page and scroll down to the "Page Title / Hero Settings".

For the hero, you can choose between different background options (color,image,video or slider).

Note If "Show Pagetitle" is off and no background option is selected for the "Hero Type", no pagetitle/hero will be showed and your page starts with the normal content.

Pagebuilder

This theme uses a build-in pagebuilder to handle it's content. Using Vavo's pagebuilder, you can create beautiful layouts with ease and control every part of your page.

To activate the Pagebuilder, click on the blue pagebuilder button on the default Wordpress editor.

Attention When you activate the Pagebuilder you will lose all the editor content.
Important Pagebuilder is can not be activated on blog posts yet. This might change in future.

You can now start adding your different rows and elements.

Shortcodes

The Shortcodes mainly are selfexplained. You can access the Shortcodes via the shortcode button (blue "+" button). This allows you to add some small elements like buttons, icons, tabs, etc.

Duplicate Pages, Posts, Projects

The theme does not have a build in duplicate option but there are tons of plugins which does this. The best plugin, and the one which is compatible with the Vavo theme, is the Duplicate Post Page Menu & Custom Post Type

Note After duplicating pages, I recommend to manually change the publication date of the duplicated item, in order to have a different date than the original page.