ANGA - Multipurpose Elegant Theme

Created: 20.04.2015

Latest Update: 20.04.2015
By: Umbrella
Email: info@umbrella.al

Anga Thumbnail

Anga means light. Anga is light. Built to make a difference, to be multi functional and elegant at the same time. We won’t promise that we’ll fulfill your magic wishes, but we do promise that Anga will fulfill it’s purpose, being an awesome showcase engine. Light weight? Yes. Customizable? Sure. Clean & minimal? Of course. These characteristics and unlimited possibilities make Anga well fit to build your online portfolio without the need of writing a single line of code. Sure we didn’t reinvent modules, theme options or visual composer, but we brought minimal features to the case studies that will change the way that you created and presented your work to your potential client. With it’s mockup modules Anga allows both creative and technical minds present their products and services without having to worry for .psd actions. Just upload and select the desired mockup. Anga comes in light and dark, we didn’t go crazy on the preset skins. We believe that will limit you.

Feature list

Home Pages
12 Customizable Home pages
Optional Custom Slider With Layered Device & Browser Mockups
Unlimited Layout Possibilities
10+ Custom Visual Composer Modules

Full Screen Home Slider
Custom Slider
Image
Video Embed (Youtube & Vimeo)
Hide Elements Button (Optional)
Thumbnails (Optional)
Auto-play (Optional)

Portfolio
One, Two or Multi Column view
Optional Margin Gaps

Project Case Study and Slider View
Builded with Modules
Slider
Grid
Gallery
Video Options
Images with Description (You Can easily create a Z-Pattern in your Single Portfolio)
Mockup Modules for Mobile, Tablet and Browser With Position, Color and Orientation Options
Unlimited Case Study Options

Gallery
Grid and Slide Album View
Three different layout types
Margins options
Masonry option
Full Width option

Blog
Three Different Post Grids With 5 Different Post Formats

Other features

3 Post types (Portfolio, Gallery, Post)
Builded With Visual Composer
Parallax Options
11 Page Templates
Powerful Option Panel (Main, Header, Footer, Branding options)
Responsive Design
Translation Ready (.mo and .po files included)
Video Support on Sliders (Youtube and Vimeo)
500+ Google
Fonts Social
Responsive Ready
Share Buttons
2 Different Menu Types (Normal and Fixed) with Full Width option
Different Hover styles
11 custom Modules for Portfolio post type
4 Custom widgets
3 Sidebars (Main, Alternative, Footer)
Including 404, Search, Archive Pages
2 types of logo (Image with retina display & text logo with font, color, size options)
Supports Post formats (Standard, Video, Audio, Image)
Short-code Generator (Build Short-codes easily using our UI)

Setup

Just upload anga.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-08-08_1820

 

Importing Content

We have placed a demo .xml file and you can use that to import the Demo content on your site. To do so we strongly recommend to have a fresh copy of WordPress with no Content at all, or you can download WordPress Reset plugin and reset your WordPress content.

This is because you might have Pages and Posts with the same ID (which usually occurs when you do the import process multiply times) and your current pages together with Demo pages will make your back-end a mess.

So go to Tools – Import and click WordPress, there should be a Dialog asking you for permissions to install the Import Plugin.

After the plugin get installed, on the File Dialog point the demo.xml file which is located at the Package File you got from Themeforest.After you pointed out the Demo XML click “Upload and Import”.

2014-10-13_1914

On the next screen, choose if you want to assign posts to an existing user, or create users which those posts where created originally at our Demo Server, and finally don’t forget to check the “Import Attachments” checkbox, in order to download images as well.

After the import is done, go to Appearance – Menu and the imported menu assign to the Main Menu.

PS : The import process requires some sort of Resources and some servers might be limited at this point, so if you process fails please contact your hosting provider and require memory and CPU increase of resources.

2014-10-13_1916

Theme Settings

Theme settings- Is separated in 4 section (Main, Header, Footer, Branding). In each of those section you can find specific options and configuration. Other options for pages are inside the specific area (pages, posts etc)

Main – is separated in 3 tabs (Options, 404, custom code)

options main
Option tab

Share Networks – Check in which social network to share post (Facebook, Twitter, Google+, LinkedIn, Stumble Upon, Pinit)

Disable Footer Sidebar – Checkbox to disable the footer sidebar for the hole website

Disable smooth scroll – Check to disable smooth scroll. This option allows you to use the visual composer smooth scroll

Disable loading – Disable loading animation on page start

404 tab

404 Text – Add the 404 text

Back To home page label – Add the “Back to Home Page” text label

Custom code Tab

Custom css – Add custom css

Custom Js – Add custom javascript

Header – Is separated into 2 tabs (Logo, Navigation)

options header

Logo Tab

Site Favicon – Add website favicon

Logo Type – Is a radio-button where the options are (image and text). With each of the option selected, different options will appear.
If the logo type is as image selected
Logo – Insert logo as Image
Retina – Make Logo Retina

If the logo type is as text selected
Logo – Insert Text Logo
Font – Choose logo font
Logo Color – Choose logo color
Logo Size – Add the logo size

Navigation Tab

Navigation – Choose the navigation style (Line Hover, Boxed Hover)

Full width – Full width menu
Fixed Menu – Allow the menu to be fixed so it can follow when you scroll down

Footer Options

options footer

Copyright Text – Add the footer copyright text

Social Networks – Add social networks

Branding Options

options branding

Default Brand – Use default brand color (Automatically resets the brand color to the default one)

Brand Color – Choose the brand color

Website font – Select the website font

Skins – Choose website skin (Light, Dark)

How to create the main menu

Anga has one (The main) menu that you can set.

The options for the main menu styles are in Theme options->Header

The steps to create a menu are:

Menus can be found in appearance->menus
1. Create a menu.
2. Add items to menus
3. Go to manage locations
4. Select the menu
5. Click save

Visual Composer

Anga uses VC so you can easily build your pages with many native and Anga elements (shortcodes) as well!
Visual Composer for WordPress is drag and drop frontend and backend page builder that will save you tons of time working on the site content.

Here is Visual Composer documentation link for further reference: https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

There are also third party add-ons for VC so you can extend it’s features (as well as theme features)!
Parallax Image and Video Background – This is one of VC’s add-on we used to build our Anga theme!
Here is Parallax Image and Video Background documentation link for further reference http://vc.wpbakery.com/addons/parallax-background/

VC Elements (shortcodes)
Visual composer has many elements that you can choose to create your layout than adding 11 more elements (VC Umbrella Elements) will give you tons of page alternatives.

VC Umbrella elements
Featured working – This element has a title and a dropdown menu with all work posts listed on it! Choose one to select it as your featured work!
Umbrella Post Grid – There already is a Post Grid element in VC but if you want to use the same style as on your blog page here comes Umbrella Post Grid as an alternative element. Add a title than you can choose to lists post only from categories by your choice (excluding any category). Choose how many items and which grid system you prefer and you’re good to go!
Services – This element can accept only Single Service element as it’s child.
Partners – This element can accept only Single Partner element as it’s child.
Recent Works – There are 4 pre-set layouts to present your recent works and you also need to add your portfolio link for “See more” button!
Team – This element will list all your team members, all you need is select the View to list them in slider (by two members) or list them all!
Contact info – Add your Horizontally or Vertically listed contact information. Each info can also have an icon so it can get attention easily.
Testimonial – Add testimonials it’s author, position and a company logo or author image!
Compare/Image table – Add a table and manage it’s content by WYSIWYG editor! You can also and an icon or image on top of it. (Note: If both are added, image will overwrite the icon)
Contact Form – Choose your contact form layout and fill all needed fields!
Umbrella Google map – There already is a Google Map element in VC but to make it more unique and also use Google Map API (that makes it more powerful) use our custom “Umbrella Google Map”.

VC Page Templates
VC Page templates are a combination of elements and options that will save your time so you don’t have to arrange them from the beginning.
Visual composer has many pre-set templates that you can choose to create your pages but we added 34 more so you can be more unique and give you more opportunity to create your website pages.

VC Extra Classes
We created some extra classes that will help you add some specific style to VC elements so you don’t have to write extra CSS.

height500 – makes the minimum element height 500
height400 – makes the minimum element height 400
height300 – makes the minimum element height 300
height200 – makes the minimum element height 200
backgroundRight – sets the background image position to Right
backgroundCenter – sets the background image position to Center
brandC-bg – set background color to brand color
brandC-text – sets the text color to brand color (not applied on heading tags)
brandC-h1 – sets the h1 color to brand color
brandC-h2 – sets the h2 color to brand color
brandC-h3 – sets the h3 color to brand color
brandC-h4 – sets the h4 color to brand color
brandC-h5 – sets the h5 color to brand color
brandC-h6 – sets the h6 color to brand color
bold-h3 – sets the h3 font weight to bold (700)
colorWhite – sets the text color to white and forces anchor tags to have a white hover (usually used on buttons)
fullHeight – sets the height to device height minus header height so the element that has this class will fit the screen
fullHeightWithIcon – sets the height to device height minus header height and also lets some room for icons to be set on the same element

Pages

Anga has 11 page templates. All of them has their own options and styles for you to create your own unique website.

For each template the options are listed below

Default template

Row Animation – Enable fade in animation when you reach each row by scrolling down

choosetemplate

Blog: Fix template

Display post – Choose to display all posts or filter them by categories you previously created

Blog: Multi Column template

Enable Sidebar – Choose this option to enable the main sidebar on this page (if footer sidebar is enabled it will be displayed on all but full screen pages)
Display post – Choose to display all posts or filter them by categories you previously created

blog multi

Blog: One Column template

Enable Sidebar – Choose this option to enable the main sidebar on this page (if footer sidebar is enabled it will be displayed on all but full screen pages)
Display post – Choose to display all posts or filter them by categories you previously created

Contact template

First Show – This template is based on two boxes (Contact details and Contact Form), so you have to choose which one is more important for first impression
Contact Form Name – Name the contact form (this name will be displayed on contact page)
Details Name – Name your contact information (this name will be displayed on contact page)

contact fields

Contact Form
Receivers email – Write down your e-mail address to receive e-mails from contact form (if the field is blank the e-mail will be directed to admin’s e-mail)
Name Placeholder – This text will be displayed on Name input field
E-mail Placeholder – This text will be displayed on E-mail input field
Message Placeholder – This text will be displayed on Message text area
Success email message – This is the text that users will get whenever their message is successfully sent
Failed email message – This is the text that users will get whenever their message can not be sent

contact form

Details
Description – Write a short description on your contact page
Details – You can add details such as your address phone number e-mail and add them some icons to get more attention
Map
Google Map – You can search directly for your location and if it is not precise enough, you can drag the pointer anywhere on the map
Map Zoom – Choose the Map Zoom Level (from 0 to 20)
Allow Zoom In – You can allow this option to make let the user change the zoom level by scrolling on it
Custom Marker – If you do not like the default Google Map Marker you can add your own. It can be any image (ex: your company logo)

Custom template

This template has a build in slider option and you can add your content by Visual Composer
Custom Slider Fields – Click on Add Row button to add a new slide
Content Slider
Background Image – Add an Image to this slide
Title – Add a Title to the slide
Content – Add some short content to the slide
Content move effect – Choose one of the Directions for the content to slide. Choose from: None, Top, Bottom, Left and Right.
Content move delay – Wright animation delay for the content (Note: this value should be given on milliseconds ex: 1000 for 1s)
Mockup – You can use one of the pre-set mock-ups like: Mobile Horizontal, Mobile Vertical, Tablet Horizontal, Tablet Vertical and Browser
When the mockup field is selected (Any other option but None), some new fields will appear:
Mockup Image – Add the image you want to be displayed on the Mockup
Mockup move effect – Choose one of the Directions for the content to slide. Choose from: None, Top, Bottom, Left and Right.
Mockup move delay – Wright animation delay for the content (Note: this value should be given on milliseconds ex: 1000 for 1s)
Mockuop position – You can select the order of content and mockup so when mockup position is set to one of left or right, the content will automatically be placed on the oposite direction

template custom
Row Animation – Enable fade in animation when you reach each row by scrolling down

Galleries template

Full Width – Change the default boxed layout of the page to full width layout
Display type – Choose to display all galleries or filter them by categories you previously created
Margins – Check the option to add a gap between images
Columns – Change the layout to display your galleries on 2, 3 or 4 columns
Masonry – If you want your images to display on original aspect ratio so the images will not be cropped try Masonry layout

galleryfields

Home: Slider template

Enable Hide Elements Button – Check this option if you want to let the user enjoy the images by hiding all the content but slider (including header, footer and slider overlay)
Autoplay – Check this option to make the slider Autoplay (the default interval is 9 seconds per slide)
Enable Overlay – Enabling this option will add more focus on slider content than the images and also make them more readable
Thumbs – Enable Thumbnail navigation so users can jump through slides
Effect – Change the slide effect to Slide or Fade
Slider – Click on Add Row button to add a new slide
Slide Type – Choose between Image or Embed Video option
Image – Add a Slider Image
Video
Video Type – Choose between YouTube or Vimeo hosted videos
Video URL – Add a video link and the slider will automatically get it-s thumbnail (Note: do not use short url or https)
Content – Add some short content to the slide

home slider fields

Portfolio: Multi Column template

Display type – Choose to display all project posts or filter them by categories you previously created
Margins – Check the option to add a gap between project posts
Columns – Change the layout to display your project posts on 3 or 4 columns

portfolio multi

Portfolio: Two Column template

Display type – Choose to display all project posts or filter them by categories you previously created
Margins – Check the option to add a gap between project posts

Portfolio: One Column template

Display type – Choose to display all project posts or filter them by categories you previously created
Margins – Check the option to add a gap between project posts

How to create posts

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

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.

How to create portfolios

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

Add the Portfolio title and its featured image as the portfolio cover

Add the description of the post in the content area

Portfolios have they own modules but you can also use visual composer’s modules. To use the visual composer modules you need to allow visual composer to be shown in the portfolios by going to settings->visual composer ->Content types (portfolio)

Portfolio options

portfolio details

Enable animation – options to enable fade in animation on rows (modules)

Content & Details options is a tab where you can configure the portfolio

Enable Slider Mode – Check to enable slider mode view for the current portfolio

Content on Slide Mode –  Check to add the content with the details in the slide view mode

Enable Post Navigation – Enable Navigation through portfolios

Same Cat – Navigate portfolios in same category (This option will appear only if “Enable Post Navigation” is selected)

Portfolio Details – Add portfolio details with icon, title, category, link.

Portfolio Modules

portolio modules

Line Separator – This module is used to add a line separator for separating the modules and it will not be displayed in the slider view of the portfolio

Content – This module will add a WP content so you can add text and other things

Image/Slider – This module can display a single/multiple images and videos

Grid Gallery – This module can display images and videos in grid view. The grid is customizable from full width to 4 columns

Image with description –  This module can present an image with its own description and can be configured as (left image / right description) and (right image / left description)

Mockup : Mobile vertical – This module has a mobile mockup (white, black). It accepts an image inside the mockup and description and can be configured as (top mockup / down description) and (top description / down mockup)

Mockup : Mobile horizontal – This module has a mobile mockup (white, black). It accepts an image inside the mockup and description and can be configured as (left mockup / right description) and (left description / right mockup)

Mockup : Tablet vertical  –  This module has a tablet mockup (white, black). It accepts image an inside the mockup and description and can be configured as (top mockup/ down description) and (top description / down mockup)

Mockup : Tablet horizontal – This module has a mobile mockup (white, black). It accepts an image inside the mockup and description and can be configured as (left mockup/ right description) and (left description / right mockup)

Mockup : Browser small – This module has a browser mockup. It accepts an image inside the mockup and description and can be configured as (left mockup/ right description) and (left description / right mockup)

Mockup : Browser big – This module has a browser mockup. It accepts an image inside the mockup and description and can be configured as (top mockup/ down description) and (top description / down mockup)

Note : All modules except “Line separator” have the ability to  show/hide in the slider view mode.

How to create galleries

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

gallery1

Add the gallery title and its featured image as the album cover

Optional – You can also add content as text to describe your album

Add images to the gallery field! All images are clickable and editable.  Edit the name of the image if you want to display a different name from the image file. The images can also be rearranged.

Image options – Choose how to display images in slider ( Fit if smaller, Fit, Fill, None).

Enable Post Navigation – Enable Navigation through albums

Same Cat – Navigate albums in same category (This option will appear only if “Enable Post Navigation” is selected)

Gallery Layout – Choose the gallery page layout (Grid, Slider)

gallery2

These options will appear only if “Grid” Layout is selected and effect only the “Grid” layout

Full Width – Display the gallery in full width

Masonry – Display the layout in masonry mode

Margins – Display galleries with margins

Columns – Choose how to display the gallery (2 Columns, 3 Columns, 4 Columns)

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.

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’, ‘um_lang’);

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, notifications just click on the icon in the content and the shortcode generator will appear.
Ex: If you want to create tabs, just click on the icon and when the shortcode generate appears click on “Add row” and the fields will appear. Fill those fields and when you are done just click on get shortcode.

7

Widgets

Anga has  4 custom widgets

widgets

Information  – In this widget you can display as many information as you want with the proper icon. It is basically used for contact information but it can be used also for other information details

Instagram – This widget will display your latest instagram images. It needs your user ID and the access token to connect with instagram. To get them please visit

https://instagram.com/developer/authentication/?hl=en

Social Network – In this widget you can display social networks and link them so the user can access them

Twitter widget – This widget will display the latest tweets form a twitter page. It need some authorization to connect with twitter. To get them please visit

https://dev.twitter.com/oauth/overview

UPDATE v1.1.0

Log:

1. Website title

2. Paragraph color fixed

3. Demo Content updated (added One Page demo content)

4. Compatible with “The Events Calendar” plugin

5. Compatible with PHP older versions

6. Slider loaders added

7. Footer widget margins fixed

8. (Dark skin) Slider Title fixed

9. (Dark skin) Menu Boxed hover border fixed

10. Slider arrows z-index fixed

11. Home Slider footer color fixed

12. Loading issues on row animation fixed

13. Visual Composer updated to v4.5

14. One Page support with VC v4.5

15. VC Template for One Page added

One Page

 

 

To create a One Page site you first have to check the “One Page” option located on Theme Options > Header > Navigation.

This Option will tell the menu to behave as One Page Menu!

For best view select boxed hover on Navigation option (optional).

 

To add links on your menu, use custom links than add the homepage URL and for each link and it’s sections unique ID.

Here is an example of the URL it should contain.

onepage

The same ID’s should be added on Visual Composer’s rows.