Documentation

Welcome to Azra documentation. Azra is a powerful multi-purpuse WordPress theme with a plethora of options.

It comes with 3 premium plugins included.

• Visual Composer - 34$ - Drag and drop page builder with 30+ elements
• Viba Portfolio - 25$ - Complete portfolio solution with 60 included skins, 4 gallery types,youtube, vimeo & self-hosted videos, soundcloud & self-hosted audios, 3 pagination types, 3 filter types, 3 ajax types and many more awesome features
• Fivo Docs - 24$ - Advanced WordPress document managment plugin that helps you showcase your documents beatifully.

If there is something that isn't in the documentation or isn't clear to you go to theme support tab on themeforest.net. and ask your question.

Downloading from ThemeForest and unziping it, you will find the following files:

• azra.zip - actual theme
• azra-child.zip - child theme
• changelog.html - change log
• documentation - documentation files
• demos - import demo files

If you are planning to change themes code please use child theme to do that. To read more about child themes go here.

Note: Child themes allow you to make changes without affecting the original themes code, which makes it easy to update your parent theme without erasing your changes.

First thing you need to do is create 2 New Pages: Home and Blog (name it like you want, this names are only representing what on these pages will be).

Then go to Settings->Reading and select these pages for your blog and home page.

To get all features this theme offers you will need to install these plugins that come with the theme.

• Redux Framework - this plugin powers the theme options panel
• Fivo Docs - document managment plugin
• aSlider - slider plugin
• Viba Portfolio - advanced portfolio solution
• Visual Composer - drag and drop page builder
• Envato Market - theme updates

When you have installed the Redux Framework plugin a new option will be added to your admin panel.

Every page, post, product, portfolio or any other custom post type has its own custom options that you can set only for that page.

If you want to modify Header Options you will need check the option "Use Custom Header Options"

If you want to modify Title Options you will need check the option "Use Custom Title Options"

To setup navigation you will need to create your Menu in Appearance->Menus. If you don't know how to do that, please see this link

To get additional menu options click Screen Option and enable "Link Target" and "Description".

Azra adds new options for menu items that enable you to customize the menu.

To create a Mega Menu you need to set the Mega Menu columns for the parent and then arrange the items to the number of columns.

Shortcodes are powered with a Visual Composer - Drag and drop page builder plugin. To get custom elements you will need to intall the Apalodi Toolkit plugin. See install required plugins.

Learn more about how to use Visual Composer on their documentation site.

Azra adds only the sharing buttons. To customize how your shared content will look like you need to install some additionall plugin.

We recommend the NextGEN Facebook but you could also use some other plugins.

• NextGEN Facebook
• WP Facebook Open Graph wp-facebook-open-graph-protocol
• Facebook Open Graph, Google+ and Twitter Card Tags

You have an easy option to change the default text used on frontend. If you want to have a multilingual site you need to enable the Internationalization and use the textdomain "azra" to translate the text.

Note: Before importing products, portfolios and sliders you will need to have those plugins instaled first. See install required plugins.

To import demos you need to use WordPress default import option. In the demos folder you will find .xml files for import.

If you don't have a WordPress Importer installed you will see this dialog. Click Install Now and then activate the WordPress Importer plugin.

If the WordPress Importer is installed you will see this page.

You will need to install the Envato Market plugin first. See install required plugins. When the plugin is installed a new option will be added to your admin panel.

You will need to generate a personal token, insert it and save it. After that you will get a list of your themes and plugins you bought. When there is a new version available you will be notified.

You will need to install the aSlider plugin first. See install required plugins. When the plugin is installed you will have a new option added in your admin panel. Click create a new slider.

Add the slide info and click "Add Slide" to create a new slide.

Slider options.

To change theme colors go to Azra theme options panel and under colors you will find 200+ options to choose from.

To change theme fonts go to Azra theme options panel and under typography you will find 200+ options to choose from.

Portfolio is powered with a very powerful Viba Portfolio plugin with a selection of 60 different styles. See install required plugins.

To learn more about how to use Viba Portfolio check the plugins documentation page.

Shop is powered with WooCommerce WordPress Plugin. For more information how to add products check the plugins documentation page.

Title backgrounds work only when the advanced title is enabled.

To add a title background image for a page just add a "Featured Image".

To add a gallery or video go to Heading Options and select the images or video.

Don't forget to select also a Featured Image because that image will be used as a fallback background for browsers that don't support HTML5 vidoes and for mobile devices.

Row and Columns have the option to select backgrounds. Just click edit the column or edit the row option to get the dialog.

You can use the "Background" tab to select the image size and other background image options or set a video for the background.

You can also add a color overlay for your background image or video.

To enable parallax just select one of these options for parallax.

• Simple
• With content fade
• With content parallax
• With content parallax and fade

To create a full width rows first you will need to enable "Content Fluid Width" and remove the content paddings.

Then use the option to edit the row.

And choose from one of these Options

• Stretch row
• Stretch row and content
• Stretch row and content (no paddings)

In the admin panel options under General tab is a option to change image sizes.

Under theme options "Layout" tab you will find a "Container Width" option with 4 suboptions.

• Header Max Width
• Heading Layout Max Width
• Content Max Width
• Footer Max Width

This theme uses "mobile-first" approach. That means that the default values apply to mobile devices first and then scale to large screens. For example if we would change the 1180px for maximum content width to 600px then content on our mobile devices would still be 100% (because our mobile devices are smaller than 600px) but on screens larger than 600px the content is going to be only 600px.

We are using the min-width css option for breakpoints. If the breakpoint is 320 that means the options applys for screens that are at least 320px wide. If we would add another breakpoint, let's say 600, then that maximum width would apply only to screens that are 600px or larger.

Let's look at the example below for content width. We have 3 breakpoints.

• 320 (default one) - screens wider than 320.
• 600 - on screens 600px or wider content will have be only 550px wide.
• 1025 - on screens 1025px or wider content will have be 1180px wide. If the screen is 1100px wide than the content will fill the screen because maximum content size is 1180px. On screens larger than 1180px the content won't expand.