Vase Documentation

Get Support

Vase - Premium Theme

preview1

Created: 08.06.2016
Latest Update: 08.06.2016
By: Umbrella
Email: info@umbrella.al

 

Feature List

Vase Admin Panel (including: News Feed, Automatic Updates, Video Tutorials, Demo Installer, PSD files, Documentation and more)
Fully Customizable
Pixel Perfect
Responsive Design
Video Support on content and slider (Youtube Vimeo and html5 video)
Smooth Scroll
One Page
Theme Borders
Rounded and Square Buttons Styles
Favourite and Device Specific Icon and Colors (Fav Icon, IOS/Android Icon, IOS/Android Theme Color)
4 Types of Page Transitions
13 Loading Animation types (including: Custom Logo Loading Animation)
40 Social Networks (including custom link)
5 Different Google Map Styles
Powerful Header and Navigation Options with:
3 Header Positions (Top, Bottom, Left)
4 Navigation Styles (Classic Static, Top/Bottom Slide, Right Slide, Full Screen)
Global / Per Page Header background (Solid, Transparent, Image, None)
Global / Per Page Navigation Color (Nav Color, Nav Hover Color)
Custom Header height (for Header Top/Bottom)
2 Logo Types (Image, Text)
3 Different Image Logos to use on Different Background Color and Pages
Retina Logo
X Pre-set Skin types (which can be Easily Modified with Color Pickers)
Extra Color Classes
Manage Typography by using one of 800+ Google fonts or upload your own
Manage properties by your needs
Footer Sidebar (Widgetized area) with multiple column and full width option
Sidebar Alignment
Post Native Likes and social share
Customizable 404, search and archive page
2 Types of Coming Soon page including subscription form
Mail chimp Compatible subscription list
External Portfolios (Dribbble, Behance, Instagram, 500px)
Font Awesome Icon Pack
15 Page templates (Default Template, 01 Vase Slider, 02 Content Slider, 03 VC Content Slider, 04 Blog, 05 Projects, 06 Gallery, 07 External Portfolio, 08 Team, 09 Services, 10 Clients, 11 Contact, 12 Box One, 13 Box Two, 14 Box Three)
Multiple Portfolio Layouts and Grids
3 Post types (Post, Portfolio, Gallery) and 2 layout types
5 Post formats (Standard, Image, Gallery, Video, Audio)
2 Portfolio types
2 Gallery Types (including Lightbox and full screen slider)
7 Custom widgets (Behance, 500px, Dribbble, Instagram, Twitter feed, Information, Social Networks)
Shortcode Generator (Build Shortcodes easily using our UI)
Child Theme Ready
SEO friendly HTML5 Markup
Translation Ready (.mo and .po files included)
Video Support on sliders
Build with Bootstrap 3, Visual Composer, Advanced Custom Fields, Revolution Slider, Layer Slider, Isotope, animate.css, Swiper, ImagesLoaded, jMosaic, mCustomScrollbar, Midnight, Pace, Parallax Master, ScrollReveal, Smooth Scroll, Envato Tool-kit etc.
Compatible with: Contact Form 7, Gravity Forms.
Tons of VC modules: Dribbble, Behance, Instagram, 500px, Social Networks, Fancy Box, Fancy Box Slider, Title, Client, Button, Team, Subscribe Box, Map, Contact Form, Pricing/Compare Table, Blog, Portfolio and Gallery.
Tons of VC Templates: … Coming Soon …

Setup

Video Tutorial:

Just upload vase.zip via theme uploaded on your wp-admin and you’re ready to go.

If you get any error after you installed the theme than this could happen:

1.Because you uploaded the theme as a Folder and you where using FTP Text Mode, use Binary Mode instead

2.Or delete the Theme folder and install .zip file which is in this package

For any unknown reasons there is a problem uploading and installing the theme, please contact Umbrella support team.

2014-03-19_1447

Importing Content

Video Tutorial:

We have built a Dummy Content Installer to install the demos with a single click.

Start by locating Vase Panel and then select Demo Installer. From there you can choose the demo that you want to install

Make Sure that your system requirements are all in green. And you’re good to go.

Getting support

Video Tutorial:

 

To get support for our themes please open a ticket at http://support.umbrella.al

To Register on our support forum you need to create an account on our support forum using your Envato Account User name and The purchase code of the Theme.

sign-up-support

Most of the users are having problems finding the Purchase Code.
Click here to learn how to find it

Note: if you try to use a different User Name, it wont allow you to register so please double check the User Name before registering on forum.

Theme Updates

Video Tutorial

To configure automatic theme updates, you must install the plugin Envato Toolkit that we’ve put in the theme package.

Configuring the plugin to automatically update your theme you must enter your Envato API Key and your Envato Username.

After the login Themes tab will appear on the top and then click on Update Vase – Premium WP Theme v.x.x.x

Vase General Settings

General Options

You can find all these Options on Vase Settings > General Settings.

vase-options

Disable Smooth Scroll – Switch it ON to Make the Page Scroll smoother.

smooth-scroll

Smooth Scroll OFF

smooth-scroll_checked

Smooth Scroll ON

Enabling One Page Option – Switch it ON to make your website one page. Please check the One Page Section!

One Page OFF

One Page OFF

One Page ON

One Page ON

Theme Borders Settings – Enable Borders and Options for Border Size and Color will Appear. Note: To check the way they look on your Website please Log Out or check it on Incognito mode (to remove WP Admin Bar).

Borders OFF

Borders OFF

Borders ON

Borders ON

General Button Settings – You can Manage All Website Button Styles and choose to use Rounded or Square Buttons.

buttons-rounded buttons-square

Adding Favorite and Device Specific icon – You can add a Favicon from this field (recommended image size is 16x16px or 32x32px). For WordPress 4.3.x you can also use the WP Native Favicon Field which can be found on Appearance > Customize > Site Identity > Site Icon (recommended image size is 16x16px or 32x32px). If you Enable Apple and Android Icons you have to upload separated Icons and Color based on Device Requirements.

favicon


Page Transitions

You can find all these Options on Vase Settings > Page Transitions.

Changing Loading Animation – You can choose between 9 CSS Spiners, Custom Logo Image, Progress Bar and Percentage Loading Animations to appear while pages are loading the content. To disable it you can use None Option and it will show the content while it is Loading.

loaders

Changing Page Transition – Page Transitions are animations on how the Page will enter/exit after the loading is completed or another link is clicked. You can switch between Fade In / Fade Out, Fade Up, Fade Down and remove it by selecting None on this Options.

fadefadeDown fadeUp

Social Networks

This section will let you manage Social Media links that you want to use on your Website.

networks

Adding General Social Networks – This option is located on Vase Settings > Social Networks and all you need to do is add a new row for each Social Media Link, choose the one you want from Network Drop down and Add the URL of your Account. You can also link your RSS or add a Custom Link. To open the links on new tab/window be sure you turn the Net Tab Option ON.


Map Styles

You can change the Map Styles form this Option and all Maps you used on your Website will have the same styling to make it easier to manage them based on your Website Brand.

Changing Map Styles – You can change the style simply by clicking on one of Style Boxes on this section.
You can find this Option on Vase Settings > Map Styles.

map


Google Analytics and Custom Codes

Adding Your Google Analytic Track Code – Simply Copy and Paste the code provided by Google and you’re good to go. Check this tutorial to find out how to get the Google Track Code. This field is Located on Vase Settings > Google Analytics.

Customizing General CSS – You can add your Custom CSS rules here and it will be safe even if you Update the Theme. Note: to overwrite existing rules please use “!important”. This field is Located on Vase Settings > Custom CSS.

Customizing General JS – You can add your Custom JavaScript here to add more functionality or any other Front-End changes you need. Your code will be safe on Theme Updates and and it’s easier to manage. This field is Located on Vase Settings > Custom JS.

Branding

Logo Options

These Options are Located on Vase Settings > Branding.

Adding an Image or Text Logo – On Logo Type Option you can choose between Image and Text Logo.

branding1 branding2
To use an Image Logo you should upload at least upload an image on Default Logo field which appears after you select Image Logo Option. The Light and Dark Logo Options are used for Pages on which you want to use different Header Options and MidnightJS. Please check the Specific Page Header Options here and MidnightJS below.

Managing Logo via Midnight JS – As you can see on above images, when using midnight you have to add three logos (or colors for text logo) than while creating pages or rows on Visual Composer (link here) – you can choose which logo color should appear on that section.

You can change it on Page settings and VC Rows:

page-midnight

row-midnight
Make Logo use Retina Image – Retina option will use two times larger logo image and will make it look better on high resolution screens.

Retina OFF

Retina OFF

Retina ON

Retina ON

Colors

Changing and Managing Skins
There are 6 different theme colors: Brand Color, Background Color, Second Background Color, Text Color, Headings Color and Contrast Color.

1

We created some pre-set skins by combining 6 different theme colors. You can also edit them using color pickers for each theme color.

Image of pre-set skins here

Advanced: Extra Color Classes
Extra color can be used to override theme brand colors or whenever you need more colors.
These classes can be use as VC element classes:

3

Typography

Vase Theme has included a Typography section to manage fonts and also to upload your purchased (custom) fonts. In that section the Navigation, Logo, Body (general paragraph) and Headings can be changed with the options of fonts, sizes, letter spacing, line height and font weight.

Using Google Fonts – The section to change the default fonts to google fonts is in Vase Settings > Typography. Vase Default fonts is pre-selected, to change that just click on Custom Fonts then the options to change the Navigation, Logo, Body (general paragraph) and Headings sections will appear.
You can managed each section with the same or different fonts. In those options there is a filed called Font Types. Change that to Google and then just select the google font.

Using Your Purchased Font – To use a custom font, first you need to upload that font to WordPress. The section to do so is in Vase Settings > Typography.
Click on Custom fonts and then the uploader will appear. You can add as many fonts as you like by giving each a unique name and uploading the font.
The supported font formats are .ttf and .otf After uploading and adding the file into the uploader you must click save in order that WordPress to get the fonts and show them into the custom fonts. Then in the sections of Navigation, Logo, Body (general paragraph), and Headings you can choose that font to be used. In this case the font type must be at custom selected.

typography

Managing Typography Parameters – Parameters can be changed in the Typography settings located at Vase Settings > Typography.
Click on Custom fonts so options to change the Navigation, Logo, Body (general paragraph) and Headings sections will appear. Each section has its own parameters. Size, Letter spacing, Line height, Font weight and H1 to H6 sizes that can be changed.

typography2

Header Settings - Header and Nav

You can find this options on Vase Settings > Header Settings.
These are general header options that will work for all pages/posts on your website, but if you want any of pages have different settings you can change it from Header Options on each page.

Choosing Header Positions and Choosing Navigation Type – Choosing the Header Position does not necessary mean different Navigation Type (or navigation position).
Top and Bottom Position allows you to choose one of the four Navigation Types (Classic Static, Top/Bottom Slide, Right Slide and Full Screen) and the Left one uses it’s unique navigation design.

bottom_navigation left_navigation top_navigation

classic_static top-bottom_slideright_slidefull_screen

Changing Header Height – This option will give you the ability to change the default header height, useful for Larger Logo or creative image background.

Changing Header Branding Options – Global Header Branding includes Navigation Text Color and Header Background (choices: none, color, image).

navigation-text-colorheader-background

404 Page Settings

404 settings can be found at Vase Settings > 404 Page.

404

Managing The Logo on 404 Page – The 404 page does not heave a Menu but the logo is shown in the middle of the page. Vase theme supports 3 logos in where you can choose specific page to have different logos or in the same page to use all the logos depending on the row settings.
Here You can find on how to add the site logos. With this option you can choose which logo to display on the 404 page.

Page Background Options – With these options you can add a background image, it’s overlay and also choose the opacity of that.

Adding Text (Content) – This options allows you to add the error text of the 404 page and also a button to redirect visitors to Your Home Page which can be managed from Home Page Label field.

Coming soon

The coming soon page can be used while you are working on the site. So basically it can be an under construction page. Only when the admin is logged in the site can be viewed as normal.
Included in the coming soon page is also the subscription box. Where clients can subscribe to your site.
The coming soon page options can be found in Vase Settings > Coming soon.

comming-soon

Activate Coming Soon Page – This options activates coming soon
Choosing Layouts – There are 2 layouts that you can choose. Managing The Logo on Coming Soon Page – Here You can find on how to add the site logos. With this option you can choose which logo to display on the coming soon page.
Enabling Social Networks – This option enabled social networks on the coming soon page. Click here on how to add social networks.
Page Background Options – This group of options are for adding a background image and configuring the opacity of it.
Adding Text (Content) – Adds the text for the coming soon page. You can add the release date or other text to show to your clients.
Enabling Subscription – This options disables the subscription box in the coming soon page.

Access Tokens

Vase theme supports to post your portfolios or images from other sources like Dribbble, Behance, Instagram and 500px. Also it can get your latest tweets in a widget area.
Here (Link Here) you can learn on how to create your external portfolios. But before you get started you must configure the access tokens for those external sources.

Access Tokens are used by these sources to ensure that you are a trusted user and you are getting your own content and not violating any rules.
In some cases you can use our access tokens that we provide with the theme but we strongly recommend not to. Instead you can create your own. This will ensure that you will not have any time out connecting with that source.

To configure access tokens you must go to Vase Settings > Access Tokens.

acctokens

Dribbble – Allows to use umbrellas access tokens but to create your own please visit this link. Here is a tutorial on how to do it.

Behance – Allows to use umbrellas access tokens but to create your own please visit this link. Here is a tutorial on how to do it.

Instagram – Doesn’t allow to use our access tokens. Instead you must create your own. And you can grab only 20 posts (content) and of those that are in your sandbox allow list.
Please visit these links for further information:
Video Tutorial
Get Access Token
Sendbox

500px – Allows to use umbrella access tokens but to create your own please visit this link. Here is a tutorial on how to do it.

Twitter – Doesn’t have an access token but it has a Consumer Key, Consumer Secret, User Token and User Secret. It allows to use umbrella’s keys but to create your own please visit this link. Here is a tutorial on how to do it.

Subscription

The subscription can be used by the Coming Soon Page and also as a module for Visual Composer.
To configure the subscription box content you must go to Vase Settings > Subscriptions.

subscribe

Exporting Subscriptions are made through the Vase Panel.

Subscribe Box Content – You can edit the content, Labels and also the notifications when a user subscribes on the site.

Post Settings

For each type of post the settings can be found when you create that post. For more information on how to create a post please check here.
But some settings are global. So this settings effects all posts.
To configure global post settings go to Vase Settings > Post Settings

Blog Posts
Changing the Sidebar Position – Click the position of the sidebar. In here you can choose 2 different positions, left and right.
Choose which social share networks should appear on a blog posts. With this options you can share that post on that specific network.
Disabling Native Likes – This options disables the ability for users to like that post.
Adding Next/Precious Post Links – With this option you can add buttons that navigate through posts
Enable Tags – This options, shows post tags.

post-blog

Portfolio Posts
Choose which social share networks should appear on a portfolio posts. With this options you can share that post on that specific network.
Disabling Native Appreciate Button – This options disables the ability for users to like (appreciate) that post.

post-portfolio

Gallery Posts
Choose which social share networks should appear on a gallery posts. With this options you can share that post on that specific network.
Disabling Native Like Button – This options disables the ability for users to like that post.
Adding Next/Precious Post Links – With this option you can add buttons that navigate through posts
Enabling Image Titles – This options adds image titles for each image in the gallery post.

post-gallery

Theme Panel

Theme Panel –  Through the vase theme panel you will get announcements, tips and updates news about the theme and other products. This is our way communicating with our clients.
Also in the theme panel you can be guided to configure the website for automatic updates, go to our support forum, view tutorials, read the documentation, import demo content, download psd files and also you can rate and connect with us via social media.

panel

Exporting subscribers – When the theme panel opens, it will also expand the other options in the right admin bar menu to export subscribers.
This will open a new window with a list with all subscribers.
You can export and download the CSV file with all the email address and then import them to mail chimp or other apps.

subscribers

How to create main menu

Vase has one menu that you can set.

The global options for the main menu styles are in Vase Settings -> Header Options.

These options can be also found in every page so you can set different styles for every page

The steps to create a menu are:

Menus can be found in appearance->menus
1. Create a menu.

create-menu
2. Add items to menus
3. Go to manage locations
4. Select the menu

managelocations
5. Click save

Visual Composer

Visual Composer Elements

Vase has 18 Custom VC Elements and also is compatible with all native VC Elements (modules).
To use Visual Composer, just create or edit a page. Click on the Back-end Editor to activate Visual Composer or click on Front-End Editor if you want to add modules and view the page in the same time.
Click on Add Element to view all Visual Composer modules and then just click on a module to add it. Most of the modules have their own options for configuration.

Note: Visual Composer always adds rows and column for the layout.
Note: To add also use Visual Composer on single post types, go to Visual Composer > Role Manager. And change the option “Post Types” to Custom and check all post types that you want to enable VC.

vc-elements

For more information on how Visual Composer works, please check VC Documentation.

All external portfolio in order to work must have the access tokens configured. To learn how to do that please click here.

Dribbble – Adds the latest Dribbble images. You must add a user name, than you can select the layout (columns) and also enable/disable margins.
Behance – Adds the latest Behance images. You must add a user name, than you can select the layout (columns) and also enable/disable margins.
Instagram – Adds the latest Instagram images. You must add a user name, than you can select the layout (columns) and also enable/disable margins.
500px – Adds the latest 500px images. You must add a user name, than you can select the layout (columns) and also enable/disable margins.
Social Networks – To create social network first you must add the Social network wrapper (Container) Set the title and then inside the wrapper you have the abilities to add social networks.
Box Slider – Is a container that allows you to add fancy box, fancy box 2 and client elements and then with those elements it create a carousel slider.
Fancy Box – It’s a box containing an image with title and other style options, in which you can add description of a product.
Fancy Box 2 – It’s a box containing an image with title and other style options, in which you can add description of a product.
Titles – It adds a title to the row, and gives you the option to align the position of the text.
Clients – Gives you the option to add clients including the background image and client’s logo.
Button – Lets you add a button. You can choose the size, style and add a link to redirect to.
Team – Is a container that lets you add Team Members. Each of the members has their own name, position, social network fields.
Subscribe Box – Lets you add a subscription box. Check the link form more about Vase Subscribe feature (link here).
Map – Lets you add a map. Get the coordinates from Google and just paste them to show the map on your site. Map style will be inherited from Map Style section (Link Here).
Contact Form – Lets you add a contact form, choose the layout and add the receivers email address to receive emails for your clients.
Pricing/Compare Table – Adds Pricing/Compare tables.
Blog – Blog module is for displaying your latest blog articles, however you can choose how many to display.
To display all of your blog items add a large number like 999 or -1. Blog module also allows you to add a button to redirect to your blog page.
Portfolio – Portfolio module is for displaying your latest portfolio posts, however you can choose how many to display.
To display all of your portfolio items add a large number like 999 or -1. Portfolio module also allows you to add a button to redirect to your portfolio page.
Gallery – Gallery module is for displaying your latest gallery posts, however you can choose how many to display.
To display all of your gallery items add a large number like 999 or -1. Gallery module also allows you to add a button to redirect to your gallery page.
Icon scroll – Lets you add an icon scroll to the top of the page. Note: Only one per page is allowed.

Revolution Sliders

Video Tutorial

Some of the sliders on Vase are built with Slider Revolution, to edit them simply go to the page that contains the slider and on the admin bar will appear the Slider Revolution button, shortly after that will appear the name of the slider and by clicking on the Slider Name you will be redirected to the Slide Editor.

The second way to edit the slider is by locating Slider Revolution on the admin dashboard and then selecting the slider that you want to edit.

How to create a page

Go to Pages and create a new page post by clicking on “Add New” button.

Add the Page title and its featured image

Select the template for the page and start configuring the fields for that page.
Some options for the pages are in each template. This part covers all these options and also page specific fields for other templates.

create-a-page


General Page Options

Changing Page Specific Default Logo – This options changes the default logo for that page. On how to add site logos please check branding section. Also you can change the logo in each row of Visual Composer.
Changing Page Specific Header Styles – With this options you can change the header styles. When you click on the option “Custom”. The navigation Text Color options and Header Background options will open for you to change for that specific page.
Enabling Row Animations – This option adds row animation for Visual composer modules.
Enabling Footer Widgets – This option Enables/Disables footer widgets on that page. Please check here on how to create sidebars.

Adding Page Specific Custom CSS Rules
This options allows the advance user to add CSS for this specific page!


Specific Page Template Fields

Creating a page using Default Template

Top Margin – This options adds/removes a top margin on the top of the page. So the elements will not hide under the header. Options should be used when revolution slider or other sliders are added in the top of the page and the menu is transparent.
Container Type – Removes/Adds container margins.


Creating a page using 01 Vase Slider Template

This template has 2 other tab options beside the main page options!
Page Options Tab
Header Scroll – With this option you can choose the effect of the scroll from the header to the content. It has 3 options: None, Scroll and Peeling.
Parallax – This allows the header slider to use parallax effect.

Slider Options Tab
Auto Play – This options allows the slider to auto play. After this options is clicked, an other option will be shown for the milliseconds of the slide change
Slide Effect – This options changes the effect of each slide in the slider
Thumbs – This option adds thumbnails (pointers) of the slider
Nav Background – This option add a background under navigation of the slider
Scroll Down icon – This options adds a scroll down icon in the page. Useful for users to know that they must scroll down to see the content.

Slider Tab
This tab has the slider elements.
Use add row button to add slides. Each slide has its own options
Type – Choose the type of the slider. Keep in mind that the options change for video. So when Video is chosen, you must add the video type, the link ect.
Overlay Color – This option adds an overlay to the slide for the text to be more visible. Also you can choose the opacity of that overlay color
Content – Add the text of the slider
Content Box – Wraps the content in a box preset.
Content effect – The effect of the content when it fist shows.
Content Alignment – Choose where the content should appear on the slider.


Creating a page using 02 Content Slider Template

This template has 2 other tab options beside the main page options!
Page Options Tab
Header Scroll – With this option you can choose the effect of the scroll from the header to the content. It has 3 options: None, Scroll and Peeling.

Background Tab
In the background tab you can choose to add a video or an image as a background. Also you can add an overlay choosing the color and the opacity.
Note: Background video only supports hmtl5 videos.

Content Slider Tab
In this tab you can add 4 custom modules. (Content Editor, Buckets, Carousel and Info).
You can add modules by clicking on the “Add Row”. Also re-range them as you like and have more then one of the same modules. As the template name suggest it, a module will cover a page (slide).
Content Editor – Is the basic WYSIWYG editor providing with all the shortcode that we provide.
Bucket – A bucket can be a service providing a Title, link and a description. Also that link can be opened in a new tab. So buckets are description of a service that you do and if you have that service in another website, you can redirect them to it.
Carousel – Is a Carousel slider, it provides the ability for you to add images and they will be presented in a carousel mode.
Info – The info module provides the ability to show your contact information. Providing a description, mobile, email and social network information.


Creating a page using 03 VC Content Slider Template

This template is similar as Content Slider Template but the different is that with this template you can have Visual Composer modules as slider!
VC Content Slider Template stands for Visual Composer content slider so Visual Composer turns every row into a single slide.
Every row must be set as Full height in order to be configured correctly.
Also in this template you have the ability to set a background image or video with an overlay.
Note: Background video only supports hmtl5 videos.


Creating a page using 04 Blog Template

The blog page template has 3 layouts One Column (Classic), Column grid and Preset one.
Layout Tab
One column – can be used when you need the blog posts to be more visible. Also this layout look really good with a sidebar. This layout can me made also full screen.
Column Grid – displays posts in 4 column, 3 columns and 2 columns where you can choose to remove margins between posts and also make it full screen.
Preset one – Is a pre programmed preset where you have the ability to remove margins and make it full screen. More preset will come in the next updates

Page option Tab
Blog template has all the option as like the other pages but it includes also some specific options.
Page Slogan – Here you can add a slogan (Title) to show on the page
Load More Label – Here you can change the load more button label to your own language.
Filter – Enables/Disables filtering posts with categories
Categories – Here you can choose what kind of posts the page should display. You can choose all or some categories to be displayed.


Creating a page using 05 Projects Template

The Project page template has 4 layouts List Project, Column grid, Preset one and Preset two.
Layout Tab
List Project – Shows projects as list without any images. Here you have the ability to make them full screen
Column Grid – displays posts in 4 column, 3 columns and 2 columns where you can choose to remove margins between posts and also make it full screen.
Preset one and two – are pre programmed presets where you have the ability to remove margins and make them full screen. More preset will come in the next updates

Page option Tab
Project template has all the option as like the other pages but it includes also some specific options.
Page Slogan – Here you can add a slogan (Title) to show on the page
Load More Label – Here you can change the load more button label to your own language.
Filter – Enables/Disables filtering posts with categories
Categories – Here you can choose what kind of posts the page should display. You can choose all or some categories to be displayed.


Creating a page using 06 Gallery Template

Layout Tab
In gallery template you can choose to display galleryes in 4 column, 3 column, 2 column and 1 column grid
You can choose to make if full screen.

Page option tab
Gallery template has all the option as like the other pages but it includes also some specific options.
Page Slogan – Here you can add a slogan (Title) to show on the page
Load More Label – Here you can change the load more button label to your own language.
Filter – Enables/Disables filtering posts with categories
Categories – Here you can choose what kind of posts the page should display. You can choose all or some categories to be displayed.


Creating a page using 07 External Portfolio Template

External Portfolio Template is used to show your from other sources like Dribbble, Behance, Instagram and 500px
To connect to those sources, you need to configure the api keys and access tokens. Go here to learn how to configure access tokens.
The templates allows you to choose the type of source between Dribbble, Behance, Instagram and 500px. You also must add the user name of that source.
Note: For instagram you must use “self” or your user id to show your posts. If you have added someone to your sendbox then you can use his user id to show other posts.

Layout Tab
In this template you can choose to display posts in 4 column, 3 column, 2 column and 1 column grid
You can choose to make if full screen and also remove margins between posts.

Page Options Tab
Gallery template has all the option as like the other pages but it includes also some specific options.
Page Slogan – Here you can add a slogan (Title) to show on the page
Load More Label – Here you can change the load more button label to your own language.


Creating a page using 08 Team Template

The team template has 3 layout types Singe Team slider, Single Large Team slider and Carousel Team slider.
Page Options Tab
Header Scroll – With this option you can choose the effect of the scroll from the header to the content. It has 3 options: None, Scroll and Peeling.
Page Type – Here you can select the layouts of the page.

Background Tab
In the background tab you can choose to add a video or an image as a background. Also you can add an overlay choosing the color and the opacity.
Note: Background video only supports hmtl5 videos.

Team Tab
Here you can add team members by clicking “add row”. You can add as many team members as you need.
When adding a team members you must add their image, full name, position, description and add their social networks.


Creating a page using 09 Services Template

The Services template has 3 layout types Multiple Services, Single large service slider and single service slider
Page Options Tab
Header Scroll – With this option you can choose the effect of the scroll from the header to the content. It has 3 options: None, Scroll and Peeling.
Page Type – Here you can select the layouts of the page.

Background Tab
In the background tab you can choose to add a video or an image as a background. Also you can add an overlay choosing the color and the opacity.
Note: Background video only supports hmtl5 videos.

Services Tab
Here you can add services by clicking “add row”. You can add as many services as you need.
When adding services you can choose to display them by image or with an icon (font awesome). You must add their title and content.


Creating a page using 10 Clients Template

With this template you can present your partners or clients.

Page Options Tab
Header Scroll – With this option you can choose the effect of the scroll from the header to the content. It has 3 options: None, Scroll and Peeling.

Background Tab
In the background tab you can choose to add a video or an image as a background. Also you can add an overlay choosing the color and the opacity.
Note: Background video only supports hmtl5 videos.

Clients/Partners Tab
Here you can add clients/Partners by clicking “add row”. You can add as many Clients/Partners as you need.
You must add an image, logo, title and a link for each of the Clients/Partners.


Creating a page using 11 Contact Template

The contact template has 2 types Boxed Form and Overlay Map.

Page Options Tab
Header Scroll – With this option you can choose the effect of the scroll from the header to the content. It has 3 options: None, Scroll and Peeling.

Map Tab
Here you can add a marker to your location in the google map, choose the zoom level and change the marker to your custom image.

Contact Form Tab
Contact Form Type – This option allows to use a plugin contact form
Layout Type – Choose the layout (Boxed Form and Overlay Map)
Receivers Email Address – Add the email which will receive all the contact forms emails.
Field Labels – Add all the contact form labels (Name, Email, Phone, Message, Send, Successful message, failed message, view map, view form)
Details – Add your contact details


Box Templates

The box templates are created to be home pages.


Creating a page using 12 Box One Template

Page Options Tab
Header Scroll – With this option you can choose the effect of the scroll from the header to the content. It has 3 options: None, Scroll and Peeling.

Background Tab
In the background tab you can choose to add a video or an image as a background. Also you can add an overlay choosing the color and the opacity.
Note: Background video only supports hmtl5 videos.
The box template allows you to add content in the background

Boxes Tab
Add Custom boxes by clicking “add row”. These boxes can be projects, posts or external links. Add their image, content and link to redirect them to their content.


Creating a page using 13 Box Two Template

Page Options Tab
Header Scroll – With this option you can choose the effect of the scroll from the header to the content. It has 3 options: None, Scroll and Peeling.

Slider Tab
Configure slider auto play, delay and effect.
Add a slider elements by clicking “add row”. A slider element can be an image or a video. Add the content for that element and choose its position.

Boxes Tab
Add Custom boxes by clicking “add row”. These boxes can be projects, posts or external links. Add their image, content and link to redirect them to their content.


Creating a page using 14 Box Three Template

Page Options Tab
Header Scroll – With this option you can choose the effect of the scroll from the header to the content. It has 3 options: None, Scroll and Peeling.

Background Tab
In the background tab you can choose to add a video or an image as a background. Also you can add an overlay choosing the color and the opacity.
Note: Background video only supports hmtl5 videos.
The box template allows you to add content in the background

Boxes Tab
Add Custom boxes by clicking “add row”. The boxes can be images or videos.

How to create a post

Go to posts and create a new post by clicking on “Add New” button.
Add a post title and it’s content. Be sure to add a featured image to each post so they can be listed on blog page.
From the right sidebar you can select the format of the post. It can be Standard, Image, Video and audio.
Post Formats

postFormat

Each post format has its own fields that are used for that post

Categories
Create categories by pressing on “+ Add New Category”.
Then check any or multiple categories for the post. Categories will be used to filter posts and also manage the posts by categories.
Tags
You can also add tags to posts to make them more SEO friendly and help users while surfing on your site.

Here are some general post fields:

post-layout

page-options-collapsed

 

How to create a portfolio post

Go to Portfolio and create a new portfolio post by clicking on “Add New” button.

Add the Portfolio title, content and its featured image

Options for project posts are listed below:

 

portfolio-layout portfolio-slider

How to get the psd files

There are two options to get the psd files.

Go to http://themes.umbrella.al/psd/
And add the purchase key.

Having problems finding the Purchase Code ?
Click here to learn how to find it!

Or contact the umbrella support team and request the PSD files.

How to translate the theme

First you need to know if you want to use multilingual or just in one language.

If you want to use the theme with multi languages the best choice would be wpml plugin
If you want just to translate the theme then you can use the po files.

To use the po files you need to use the poedit application and open the po file that is located in the lang folder.
After the translation is done save the file and you need to define that translation in wp-config.php so the next time the site loads it will load with the new translation
It needs a line of code in wp-config.php
define (‘WPLANG’, ‘vase’);

How to use the short-code generator

In every content from WordPress created or custom content (WYSIWYG) you can use our short code generator.
If you want to add toggles, tabs, buttons etc just click on the icon in the content and the short-code generator will appear.

Vase theme offers these shortcode to help you build your layout

Accordion – Click on the Accordion shortcode, add the title and content. To add more accordions use the button “Add row”. When you are done just click on “Get shorcode” and update the page

accordion
Toggle – Click on the Toogle shortcode, add the title and content. To add more Toggle use the button “Add row”. When you are done just click on “Get shortcode” and update the page
Tabs – Click on the Tab shortcode, add the title and content. To add more Tab use the button “Add row”. When you are done just click on “Get shortcode” and update the page
Alert – Click on the Alert Shortcode, choose the type, add the tittle and message and click on the “Add notification”. When your are done just update the page.
Highlight – When clicked on Highlight Shortcode the shortcode will be adding. [highlight][/highlight]. Add the text that you want to highlight inside like this: [highlight]TEXT HERE[/highlight]. Or just select the written text and click on the highlight shortcode to automatic wrap the text.
Button – Click on Button shortcode, add the url, text, select color, icon aliment ect. Click on “Add button” so the shortcode will be created in the content area.

button
DropCap – When clicked on DropCap the shortcode will be added. [dropcap][/dropcap]. Add the character that you want to be dropcap. Or you can just select the character and then click the short code dropcap to automatically wrap that character
Layout – Click on the box of layout shortcode. Select the layout that you want. There are 5 layout types. Full Width, Half Width, One Third, One Forth and One sixth.

Here are some example on how to add the text inside the layout

Full Width:

[layout_btn]
[layout_group]
[full_width]
Text Here
[/full_width]
[/layout_group]
[/layout_btn]

Half Width:

[layout_btn]
[layout_group]
[half_width]
Text Here
[/half_width]
[half_width]
Text Here
[/half_width]
[/layout_group]
[/layout_btn]

And so on…

One Page

Here are steps you shout take to create One Page Site:

1) Header Settings

To create a One Page site you first have to check the “One Page” option located on Vase Settings.
This Option will tell the menu to behave as One Page Menu!

2) Creating Sections

Creating Sections for the one page with Visual Composer by adding the Row ID to the Sections(Rows).

anga-one-page-1

All the Sections (Row ID’s) will look similar to this

vase-one-page-2

 

3) Adding Sections on the Menu

By adding Custom Links at Appearance > Menus you create Menu Items that will scroll the page to the desired section.

On the URL Sections you must add the same Section ID (Row ID) that you have set on the Visual Composer Section Row at the page.

anga-one-page-3

Configure PHP Limits

Editing php.ini

If you use cPanel, go to the Files section and click on the File Manager button. Make sure the checkbox for Show Hidden Files is checked and then click Go.

Select your wp-admin folder and find a file called php.ini or php5.ini. If you don’t see it, create one by clicking the New File button in the top left-hand corner. Name the file php.ini and click the Create File button on the pop-up.

The same steps must be applied if you are using FTP Client applications like FileZilla.

Once the file php.ini is open, add or edit the following lines and then save and close.

 

Editing .htaccess

If that addition to your php.ini file doesn’t do the trick, try editing your .htaccess file and add or edit the following code at the very bottom:

How to find API Key

How to find your Purchase Code