Avoc Wordpress Documentation

Thanks

First of all, a big thanks for purchasing this template. This document includes a guide and general information about the template.

Support

Please read the documentation and take a look at the FAQ before seeking support. If you have any questions that are beyond the scope of this document you can still contact me via the Support Page.
Do not use the comment section on the themeforest item page. This will slow down the support process

Important: Theme support does not include any sort of customizations for you or your client.

Video Tutorials

Take a look at the video tutorials.

• Install Theme & Import Demo Content
• Hero Options
• Pagebuilder
• Portfolio Options

Installation

This theme requires the latest Wordpress version (4.2 and later).
There are 2 different ways to upload the theme.

1. FTP: Unpack the avoc.zip and upload the unpacked folder into the wp-content/themes/ folder
2. WordPress: Login into WordPress and go to Appearance > Add New Themes > Upload. Select the zipped theme file avoc.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 activating plugin" and install them!

You can now import the demo content if wanted. (RECOMMENDED)
See Import Demo

Update Theme

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

• WordPress: 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 loose your settings,options,content, ...
• FTP: Delete the current theme folder 'pond' in wp-content/themes/ and upload the new one.

NOTE: you won't loose 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.

Import Demo

Before uploading the demo you need to know that wordpress create a sample page and a sample post when installing wordpress. You can delete them.

You can import the demo content with just one click. Go to Appearance > Theme Options > Import Demo. Choose a demo and click on the image to import. The importing action can take some seconds. That's it.

This will import pages,posts,portfolio,menu,images,theme options,wordpress-settings, etc.

After importing the demo you probably need to adapt the footer widget area to your needs.
See video tutorial. Video Tutorial

Theme Options

The theme uses its own Theme options panel which you can access by navigating to Appearance > Theme Options.

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

Adding your Logo

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

• logo light for dark backgrounds
• logo dark for light backgrounds

If you want to make your logo retina ready you need to upload the @2x version for your dark+light logo.
Example: your light logo is called light-logo.png. Call your retina logo light-logo@2x.png and upload it. It's very important that you upload both logos at the same time/day

Once you uploaded your logos to the libraray you can easily change your Logo in the Theme Options.

1. Go to Appearance > Theme Options > General
2. Add your Logo by clicking on Add Image
3. Choose your image on your Media Library OR upload a new image and click on Insert into Post
   

Please make sure that you've choosen Full Size.
Proceed the same way for the other Logos needed (light,dark,favicon,etc.).

Setting Up Your Menu

1. Go To Apperance > Menu
2. Create A New Menu by clicking on create a new menu
3. Add your menu items by selecting them on the left side
4. Choose "Primary Menu" as location
   
   

Create Pages

If you're building your site from scratch, you should create at least 2 pages. One for the Home Page and one for the blog page.
Although you don't need any blog page it's recommended to create one.

After you created these Pages go to Settings > Reading and choose your Home Page as Front Page and your Blog Page as Posts Page

If you want the Blog page to be your front page (start page) you need to choose Your latest posts.

Template choice

When creating/editing a page you can choose between 2 Page templates

As the name it says, the "Default tempalte" is used for all default pages and the "Portfolio" template is used if you want to show the portfolio grid.

Hero / Page Title

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 the page.

You can set up individual hero for each page/portfolio/post.
As said, you have the following options for the Hero.

Please have a look at the video tutorial to see how the hero section work.

Revolution Slider

Since version 1.2 you have also the possibility to include a Slider from the Revolution Slider plugin. Just install and activate the plugin, set up your sliders and choose it on the hero option.

ATTENTION The plugin is not inlcuded into the theme, this means, you need to buy it (if you don't got it yet). This has the advantage (for you) that you have access to full support and all updates immediately. This wouldn't be the case if I included it to the theme.

Pagebuilder

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

The builder uses 2 main building blocks: Rows and Elements.

Rows

There are different Row Types to choose from. Once you define a Row Type, you can then place the elements. The Horizontal Section is the only type which can have nested rows.

Elements

Elements are the visual elements that make up your website.

Getting started

When creating a page you will first see the default WordPress editor. Scroll down and you should see the button Activate Pagebuilder. By clicking this button the pagebuilder will be activated and the default WordPress editor will be hidden.
Attention: You will loose the content on the default WordPress editor.

You can now start adding your rows and elements.

While adding your different rows and elements, you will notice 3 different colored rows.

• Column Row
• Horizontal Section
• Wolf Parallax

Column Row

You will be able to choose from a selection of column types. Into these columns you can add the wanted elements and shortcodes.

Horizontal Section

A horizontalsection is a fullwidth section with some kind of background have a background (color,image,video) to seperate some specific content from other content. The horizontal section can contain any other row (column,wolf,gallery,etc.)

Wolf Parallax

The Wolf Parallax section is the unique touch of this theme. Add some wolf items with overlaying text and a nice parallax effect.
Play around with the different settings to see how it works.

Note:
All smaller elements (button,icon,contact form, accordion,skills,...) are added via the Shortcodes.
Choose the Text / Editor Element and add them via the SHortcode generator.

Featured Images

Featured Images are very important for this Theme. You must know how to add a featured image to your posts + portfolios.
Please add a featured image to all posts and portfolios items!

1. Click on Set featured image.
   
2. Choose your image on your Media Library OR upload a new image and click on use as featured image.
   

Attention: This theme uses custom thumbnail size. All images which have been uploaded before installing the theme can't apply these new sizes. Therefore you need to regenerate the thumbnails.
Go to Plugins > Add new and search for regenerate thumbnails.
Install and activate the first Plugin (Regenerate Thumbnails by Viper007Bond).
Go now to Tools > Regen. Thumbnails and click on Regenerate All Thumbnails.

Portfolio

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

1. Go to Page > Add New
2. Enter your Title for this portfolio Page
   Attention: if you use the name "Portfolio" your slugname will be portfolio which will lead to some conflict if pagination is active. You can keep your title "Portfolio" but you need to edit the slugname of the page. ("work" for example)
   
3. Choose the right template Portfolio
4. You can choose the categories you want to show (default is All).
   By holding shift or ctrl you can select multiple categories.
   
5. Activate the filter if wanted. If it's activated it will add a filter betwwen the selected categories.
   

Adding Portfolio Item

1. Go to Portfolio > Add New
2. Add your Featured Image --> important
3. Enter your Content. (Hero,content,etc.)
4. Assign categories to each portfolio item for a possible filter.

Sorting: The portfolio items are automatically ordered/sorted by the publication date. You can at any time edit the publication date for all items.

Wolf Portfolio

If you choosed the "Wolf Grid" in the Theme options, you will have some additional options for each portfolio item to individually style your captions.

NOTE: The wolf grid is very creative and dynamic. So in some situation (screensizes) you may not get what you expect/want. You need to play around with the different options to get something that suits your needs.

Shop

Make sure to have the WooCommerce plugin installed. If not, go to Appearance > Install Plugins and install & activate it.

You will now get a message to "Run the Setup Wizard". If you plan to import one of the shop demos, it is not recommended to run the wizard, because this will create double pages for 'cart','checkout','my account'. So in this case you should skip it.

This wizard will take you through the first steps for WooCommerce. It will create the needed pages (please check if they do not already exist, otherwhise you can skip this step) and setup the different options like taxes, currency, etc. You can at any time change these settings afterwards.

Now you are ready to go and add your products, set up all the woocommerce settings and the theme options.

Slider

Please have a look at the hero section to know how to add a slider.

Videos

The theme gives you multiple ways to show your videos

• Background videos
• Lightbox video
• Inline videos
• Classic video integration
• Selfhosted Videos

Background Video

The background video option is only possible for the hero section and/or for the horizontal fullwidth section on the pagebuilder. Please have a look at these part of the documentation for more information.

NOTE: Background videos are done with selfhosted video file (mp4,ogv,webm).
Mobile devices doesn't support background videos so it will display the image you can choose in the settings.

Lightbox Video

You can put lightbox videos to any content with the Button Shortcode. Open the shortcode generator and choose "Button". You will see the option "Go To". You have the possibility to add a video from youtube/vimeo or a selfhosted video.

Inline Video

An inline video first displays an image with a play button, and the video is loaded after the play button is pressed. This is interesting because the video is not loaded on page load which will lead to a better page loading speed compared to the classic integration.

You can add an inline video via the shortcodes or/and on the hero section.
Inline videos are only possible with youtube/vimeo videos.

Classic video integration

Go to your vimeo/youtube video and copy the embedded iframe code in the share option. Just put this iframe code in the editor.

Example:
<iframe src="http://player.vimeo.com/video/44253174" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Selfhsoted Videos

You can add selfhosted videos via the shortcode generator. The videos will automatically adapt to it's parent container (columns).

Shortcodes

The Shortcodes mainly are selfexplained. You will find some infos & tips for some shortcodes below.
You can access the Shortcodes via the shortcode button.

Attention: If the popup window don't show the Shortcodes options, you need to adapt the file permissions via ftp. Please make sure that all theme files has 777 permissions.

Contact Form

Enter the Recepient Email, Subject and Submit Button. Add now the fields you want to enable in the contact form.
Make sure that you add at least 3 fields for Name, Email and Message.
The slugnames of these fields MUST BE name, email and message. This very important. Fieldname/Label can be any custom name.
For further fields you can use own labels and slugnames. Just keep in mind to use only lowercase and letters for the slugnames.

Retina Display

This theme is retina ready which means that all icons the theme uses are optimized for retina displays.

To enable this option for your uploaded images I recommend to use a plugin.
There are several plugins for this, but I tested this plugin which works fine: WP Retina 2x

To install the plugin go to Plugins > Add New and enter the keyword "retina". Search for WP Retina 2x and click Install Now. After you've installed the plugin activate it.
You can now generate your retina images and set up the plugins options.

1. Plugins Seetings: Settings > WP Retina 2x
2. Generate Images: Media > WP Retina 2x

I also recommend to choose the Server side option for the Method in the advanced settings.
Leave all thumbnail sizes unchecked. So the plugin tries to genrate the retina sizes for all custom thumbnails.

Here's a tutorial of the plugin. Totoro Times
FAQ of the plugin. WP Retina 2x faq

Logo: Your logo needs to be uploaded in normal size and in retina size! Add the @2x to your image name.
Example: your normal logo is called logo.png. Call your retina logo logo@2x.png and upload it.
It's very important that you upload both logos at the same time/day

Note: Just be sure to upload large enough images when you set up your site using the theme

Font Manager

Since version 2.0 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

1. Add the font(s) to the font manager with the correct values and check the 'Typekit' type.
2. Put the embedding script (which you got from typekit) to the typekit textarea.
   
   

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

1. Make sure you have installed the Child theme.
2. Copy the folder/files that contain the web font to the Child theme.
3. 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
4. Add the font(s) to the font manager with the correct values and check the 'Custom Font' type.

Multilingual / WPML

Avoc is tested and certified by the WPML official team. WPML is the best known WordPress plugin for multi-language websites. WPML makes it easy to build multilingual sites and run them. It’s powerful enough for corporate sites, yet simple for blogs.

Have a look at the WPML Website for more information and documentation.

How to setup WPML with Avoc theme

After you installed the wpml plugin, go through the wpml setup. In the "language Switcher" step, it is recommended to NOT add the switcher to the menu,widget or footer. Instead, activate the Theme switcher in Theme Options > Header/Menu > WPML

Duplicate pages,post for translation

The duplicate option is the recommended option to create the translations for your pages. Because, if you're using the '+' icon to add translation, it will not duplicate the content, and for pages,posts with a lot of pagebuilder elements, you will need to recreate all these elements and structure. So instead, use the duplicate option.
This is the only way you can copy/duplicate the pagebuilder content.

To do so, go to your page,post,portfolio you want to translate and check the Duplicate checkbox of all the languages you want to translate and click on the "Duplicate" button.

Once you've done this the page has been duplicated and you can now edit the wanted language of this page.

When you decide to provide any page,posts,portfolio project in different language, WPML will duplicate this page,post,project for each of your language. This means, If you decide to deactivate the wpml plugin any time later, you will have multiple/duplicated pages,posts,projects.

Translate the theme related words/strings

When making your site multilingual, you will see some theme related words/senteces which you can't change. For example "Next Project" in the single portfolio navigation. You need to install the "WPML String Translation" plugin. Thanks to this you can translate any theme related string.

Ressources

• latest jquery version: jQuery from John Resig
  http://jquery.com/
• jquery.isotope.min.js: Isotope from David DeSandro
  http://isotope.metafizzy.co/
• jquery.easing.1.3.js: Easing from George Smith
  http://gsgd.co.uk/sandbox/jquery.easIng.php
• jquery.owlcarousel.min.js: Owlcarousel from Bartosz Wojciechowski
  http://owlgraphic.com/owlcarousel/index.html
• jquery.fitvids.min.js: Video Fits
  http://fitvidsjs.com/
• jquery.visible.min.js: Check the visibility
  https://github.com/teamdf/jquery-visible/
• tweenMax.js: animation script from Greensock
  http://greensock.com/tweenmax
• jquery.lightcase.min.js: lightbox script from Cornel Bopp Art
  http://cornel.bopp-art.com/lightcase/
• jquery.pace.js: preloader script from HubSpot
  http://github.hubspot.com/pace/docs/welcome/
• jquery.visible.min.js: visible by CustomD
  https://github.com/customd/jquery-visible

All other scripts are done by SpabRice and are only allowed to use within this theme.

Frequently asked question / Trouble Shooting