General Info

We would like to thank you for purchasing Avada! We are very pleased you have chosen Avada for your website, you will not be disappointed! Before you get started, please be sure to always check out these documentation files. We outline all kinds of good information, and provide you with all the details you need to use Avada. Avada can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you do not, please see our section on WordPress to help you get started.

If you are unable to find your answer here in our documentation, we encourage you to search our Knowledgebase, watch our Video Tutorials, and also perform a Forum Search for your answer. Chances are your question or issue have been brought up already and the answer is waiting to be found. If you are unable to find it anywhere, then please go go our forum section and post up a new topic with all the details we need. Please be sure to include your site URL as well. Thank you, we hope you enjoy using Avada!

WordPress Information

To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex or you can watch the Instructional Video created by Woo Themes. Below are all the useful links for WordPress information.


Requirements For Avada

To use Avada, you must be running WordPress 3.1 or higher, PHP5 or higher, and mysql 5 or higher. We have tested it with Mac, Windows and Linux. Below are a list of items you should ensure your host can comply with.

  • Check to ensure that your web host has the minimum requirements to run WordPress.
  • Always make sure they are running the latest version of WordPress
  • You can download the latest release of WordPress from official WordPress website
  • Always create secure passwords FTP and Database
Hosting is more secure when PHP applications, like WordPress, are run using your account’s username instead of the server’s default shared username (www or www-data). The most common way for hosting companies to do this is using suPHP. Just ask your potential host if they run suPHP or something similar.

We recommend using WpEngine.com or A Small Orange for all your hosting needs.

What’s Included

When you purchase our theme from Themeforest, you need to download the Avada files from your Themeforest account. Navigate to your downloads tab on Themeforest and find Avada. Click the download button to see the two options. The Main Files contain everything, the Installable WordPress Theme is just the installable WordPress theme file. Below is a full list of everything that is included when you download the main files, along with a brief description of each item.


  • Avada Theme Folder – contains the Avada.zip and Avada-Child-Theme.zip wordpress theme. The child theme is only for users who make code changes.
  • Extras Folder – contains the developer documentation for Layer Slider & Revolution Slider. These are not ours, but the plugin developers docs.
  • Licensing Folder – this contains the licensing files, this is not your purchase code that you need to download from Themeforest.
  • PSD Folder – this contains all the layered PSD files for those developers or designers who want to customize the design further.


files

Free Forum Support

All of our items come with free support, and we have a dedicated support forum to handle your requests. Support is limited to questions regarding the theme’s features or problems with the theme. We are not able to provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your theme then you should enlist the help of a developer.


For free support, follow the steps or watch our video tutorial below.

Step 1Click Here To Create An Account, you will need your Themeforest purchase code which can only be received after buying the theme from Themeforest.net.

Step 2 – You need to enter your Themeforest Purchase Code, e-mail and a password. Your forum username will be the same username that purchased the theme on Themeforest.

Step 3 – Once you are signed up, you need to sign into the forum with your new account to start using the forum. Please use the search field first to find answers

Step 4 – To create a new topic, click the “Create A New Topic” button in the right sidebar.


Click Here To Setup Your Forum Account



Here is a screenshot that shows you how to find your purchase code.





Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

Before You Post On Forum

To help speed along your request, we require that you follow the steps below before posting a new topic on the forum. This is for the benefit of everyone and will help make the entire forum more efficient. It’s very important and we ask that everyone who posts follow these steps.


Step 1 – Always check the Documentation and the Knowledgebase Section. Most questions can be answered in those areas.

Step 2 – Always perform a Forum Search before you post, its very possible your issue has already been brought up and has been answered.

Step 3 – If your question has not been brought up, then please post a new topic. Always be as descriptive as possible. Our form for creating a topic requires that you enter the theme version number, and the live URL to your home page or the page that shows the issue in question. The form also has fields for WP and FTP login info. Those fields are not required, however providing us with your login information up front can save a lot of time for both parties. All login info stays private with our support team admins.

Step 4 – Patiently wait! We strive to get you answers as quickly as possible. Do not BUMP your thread, it will take 2X as long to get a reply because we answer threads from old to new.


Click Here To Setup Your Forum Account

Installation

You can install the theme in two ways: through WordPress, or via FTP. The Avada.zip file is the Installable WordPress Theme and what you need to use to get the theme installed. Please see the following sections for each method and watch our video tutorial on how to install Avada. But first, you need to download the Avada files from your Themeforest account. Navigate to your downloads tab on Themeforest and find Avada. Click the download button to see the two options. The Main Files and the Installable WordPress Theme. See below.





Downloading The Main Files Gives You All The Content Listed Below

  • Avada Theme Folder – contains the Avada.zip and Avada-Child-Theme.zip wordpress theme. The child theme is only for users who make code changes.
  • Extras Folder – contains the developer documentation for Layer Slider & Revolution Slider. These are not ours, but the plugin developers docs.
  • Licensing Folder – this contains the licensing files, this is not your purchase code that you need to download from Themeforest.
  • PSD Folder – this contains all the layered PSD files for those developers or designers who want to customize the design further.


Downloading The Installalable WordPress Theme Only Gives You The Avada.zip File

  • Avada.zip – this is the parent wordpress theme, install this via WordPress. If you install it via FTP then unzip it first and use the extracted folder.

WordPress Installation

Follow the steps below to install via WordPress.

Step 1 – Navigate to Appearance > Themes.

Step 2 – Click Install Themes and hit the upload button.

Step 3 – Navigate to find the “Avada.zip” file on your computer and click “Install Now”

Step 4 – Once uploaded, activate the theme. Go to Appearance > Themes and activate it.

Step 5 – Then you will see a notification message to activate the required & recommended plugins: Revolution Slider, Layer Slider and Fusion-Core. The only required plugin is Fusion-Core, the recommended plugins are Revolution and Layer Slider. Follow the steps to install and activate each plugin.


“plugins”

Common Install Error: Are You Sure You Want To Do This?

If you get the “Are You Sure You Want To Do This” message when installing Avada.zip file via WordPress, it means you have an upload file size limit. Install the theme via FTP if this happens, or call your hosting company and ask them to increase the limit.


Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

FTP Installation

Follow the steps below to install via FTP.

Step 1 – Log into your hosting space via an FTP software

Step 2 – Unzip the Avada.zip file and ONLY use the extracted Avada theme folder

Step 3 – Upload the extracted Avada theme folder into wp-content > themes folder

Step 4 – Activate the newly installed theme. Go to Appearance > Themes and activate it.

Step 5 – Then you will see a notification message to activate the required & recommended plugins: Revolution Slider, Layer Slider and Fusion-Core. The only required plugin is Fusion-Core, the recommended plugins are Revolution and Layer Slider. Follow the steps to install and activate each plugin.

ftpinstall

“plugins”
Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

Plugin Installation

Avada includes 3 plugins that will need to be installed and activated: Fusion-Core, Revolution Slider, Layer Slider. Only the Fusion-Core plugin is required for the theme to work, it contains all of our theme features like shortcodes and shortcode generator, fusion slider, elastic slider, portfolio and faq’s. The Layer and Revolution Slider are recommended plugins. When you install Avada, you will get a notification message in your WordPress admin telling you of the required and recommended plugins.


Included Plugins With The Avada Theme

  • Fusion Core – this is our companion plugin that is required to use. Please make sure this is always installed and activated.
  • Layer Slider – this is a premium slider plugin created by Kreatura.
  • Revolution Slider – this is a premium slider plugin created by ThemePunch

Plugin Installation & Update Notification

When you install Avada or update Avada, you will receive a WordPress notification message letting you know to install or update the required and recommended plugins. Please follow the on screen prompts to install, activate or update.

Additional Plugins We Use On Our Demo

  • WooCommerce Plugin – This plugin is free. If creating an online shop, we recommend using WooCommerce. Avada has full integration with this plugin.
  • bbPress Plugin – This plugin is free. If creating a forum, we recommend using bbPress. Avada has full integration with this plugin.
  • Contact Form 7 – This plugin is free. If needing to use forms on various pages, we recommend using Contact Form 7. Avada has full integration with this plugin.

How To Update The Theme

There are two ways to update your theme. The first and easiest method is to use our automatic theme updater that works with your Themeforest purchase code. The second is the traditional method that involves more steps. Before you update, it is best practice to always check our update notes and make a backup of your theme folder. See the information below for each method.


Before You Update, Always Check The Important Update Information

Method 1: Using The Automatic Theme Updater – THIS ONLY WORKS IF YOU ARE ON AVADA 3.5 OR HIGHER!!!

To use the automatic theme updater you must enter your Themeforest username, purchase code and API key into theme options. All 3 of these items can be quickly grabbed from your Themeforest account. They only need to be entered one time. Once they are entered and we issue a theme update, you will receive a notification message in your WordPress admin “Updates” or “Themes” section. Please see below for steps on how to do this.

Step 1 – Navigate to theme options > auto update and you will see 3 fields that require content from your Themeforest account. These must be filled in for auto updates to work.

Themeforest Username – This is your Themeforest username. Click Here To See.

Themeforest Secret API Key – Log into your Themeforest account and navigate to your settings tab. Click “API Keys” on the left side. Enter a name in the Label field and click “Generate API Key”. The new key will show above, copy and paste the full key into the “Themeforest Secret API Key” field in theme options > auto updates tab. Click Here To See.

Themeforest Purchase Code – Log into your Themeforest account and navigate to your downloads tab. Find the Avada purchase and click the “Download” button next to it. Choose “License Certificate & Purchase Code” which will download a text file. Open the text file and look for the “Purchase Code” inside. Copy and paste the code into the “Themeforest Purchase Code” field in theme options > auto updates tab. Click Here To See.

auto updates

Step 2 – Once your data is entered, you will get notified in the “Updates” and “Themes” section of your admin when a new theme update is ready to be installed. WordPress checks for new updates every 12 hours. Follow the onscreen prompts to update the theme.

auto updates

Step 3 – After you update the theme, you will see another notification message to update the plugins. Follow the on screen prompts to update the plugins. If the notification message was dismissed, navigate to “Appearance > Install Plugins” to complete the update.

auto updates
Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

Method 2: Traditional Update Method

This method does require more steps and manual work. First you need to manually download the new theme package from your Themeforest account. Once you have the new theme package, you can choose to upload the theme via WordPress or via FTP. Please see the information below for how to download new files, and install it via WP or via fTP.

How To Download New Theme Files From Themeforest

Step 1 – Log into your Themeforest account and navigate to your downloads tab. Find the “Avada” theme purchase.

Step 2 – Click the “download” button next to it and choose to download the “Installable WordPress Theme” which is just the WordPress file, or choose the “Main Files” which is the entire package that contains everything.

Step 3 – Then you need to decide if you want to install the update via FTP or via WordPress. Directions for both methods are below.

files_small


How To Update Your Theme Via FTP

Step 1 – Go to “wp-content > themes” location and backup your “Avada” theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost.

Step 2 – Retrieve the “Avada.zip” file from your new Themeforest download and extract the file to get the “Avada” theme folder.

Step 3 – Then simply drag and drop the new “Avada” theme folder into “wp-content > themes” location. Choose to “Replace” the current one if you did not delete it.

Step 4 – Lastly, update the included plugins. You will see a notification message letting you know the plugins have a new version and need to be updated. Follow the on screen steps.



How To Update Your Theme Via WordPress

Step 1 – You need to deactivate the current “Avada” theme in the “appearance > themes” section by simply activating a different theme. Once you activate a different theme, you can delete the Avada theme. Dont worry, your content will not be lost.

Step 2 – Retrieve the “Avada.zip” file from your new Themeforest download. If you downloaded the “Main Files” from Themeforest, then you need to unzip the archive file you received, the Avada.zip will be inside of it

Step 3 – Then simply upload the “Avada.zip” file in the “appearance > themes” section. Click on the “Install Themes” tab at the top and choose to upload the zip file.

Step 4 – Once it uploads, choose to activate the theme.

Step 5 – Lastly, update the included plugins. You will see a notification message letting you know the plugins have a new version and need to be updated. Follow the on screen steps.

Important Update Info

Each new update brings new features and we like to let our users know everything they can expect. The two sections below describe general update information that should be taken into account with any update, and then specific update information for our latest version.

Avada v3.5 Information

New Fusion Slider Replaces FlexSlider & ThemeFusion Slider – Removing features is always a tough decision, but we needed to simplify our slider offerings which led us to create the Fusion Slider. Upon updating to v3.5, you will no longer have the Flexslider plugin or Themefusion slider. The Fusion Slider replaces both of those and will require you to setup new slides if you were using the Flexslider or Themefusion slider. This is different than the “FlexSlider” shortcode, which is still available but is now called “Post Slider” to cut down on confusion.

No More Integrated Plugins – Fusion Core To The Rescue – This is now a requirement from Themeforest, and is the correct method. Plugins should not be integrated into the theme. When you install v3.5, you will receive a message to also install the Fusion Core plugin, Revolution Slider and Layer Slider. All of those plugins are still included, but are stand alone plugins. Fusion Core also now holds all of our features like shortcodes, shortcode generator, fusion slider, elastic slider, portfolio and faq’s. It is a required plugin and must be installed.

CSS Rewritten & Optimized – We have removed !important tags and rewritten a lot of the theme CSS. Many of the same classes were kept so this should not disrupt your custom CSS, but please keep this in mind if your site is heavily customized because you may see style changes that you need to fix with custom CSS.

Social Icon Colors – Social icons are no longer images, they are crisp vector font icons. We’ve also added several new styling options. The previous “light” and “dark” social icon color options will no longer work, you can now set any hex color for the icons.

Button Options – Buttons have several new options to choose from. Button border color is now grouped with a new option called “accent color” that controls the color of borders, dividers, icons and text. Depending on your current button setup, you may need to adjust the color options.

Spacing Differences With Separator Shortcode – Separator shortcode now has a top and bottom margin. The logic was changed on the shortcode so if you see additional space added or possibly elements that are overflowing each other, simply add or reduce the amount of margin to your preference.

Font Awesome Icons – We now use Font Awesome v4.1 which has changed icon names. So you may need to reset the names on your icons depending on which ones you used. This is not something we changed, the creators of Font Awesome have changed some of the names themselves. Also the new icon name format is icon=”fa-tablet” so if your icons are not showing, please add fa- to the name, like this “fa-iconname”.

Portfolio Featured Images And Videos Not Showing? – This is a new option we added to show or hide featured images and videos on single portfolio pages. When updating, there is not a way to have the option checked so you will need to go into theme options > portfolio tab and check the new “Featured Image / Video On Single Portfolio Pages”

Shortcode Developer Mode – Due to all the new shortcodes and options, we have removed developer mode so they only need to be maintained in one area. This is also done in preparation for our custom page builder coming in the future. Shortcodes are now centralized in our shortcode generator.

New Theme Options – Many new theme options have been added, if something seems off please check the theme option section to see if a new option can be set.

General Update Information

Backup Your Current Setup – Whenever you update the theme, just like upgrading any major software, it’s always a good idea to make sure that you have a current backup of your web site, including your wp-content folder, your wp-config,php file, and your .htaccess file in your WordPress installation folder, and a copy of your WordPress database. You can use these to revert back to your original site if something unforeseen happens during the update process. If you are not familiar with how to do this yourself, your in luck: There are several plugins available that completely automate that process for you, such as: UpDraft Plus and WordPress Backup Buddy

If you are using the Revolution Slider and have added custom css, please make a backup of the styles because those will be removed when you update. You can also backup your theme options on the backup tab in appearance > theme options.

Do Not Keep Older Copies of The Theme In WP Theme Folder – You should completely remove all previous Avada theme folders before adding the new updated theme folder, or you could end up with WP path issues, etc.

Do Not Rename The Theme Folder – If you rename your theme folder when you update, then the path is no longer valid. WordPress stores menus and widget settings and some other settings by folder path. You need to rename your theme folder back to what it was before, and your settings, menus, widgets will be restored. If you need to keep your previous theme folder, then simply make a copy of it before you upload the new theme

Reset Browser Cache - It is always recommended to reset your browser, plugin, server cache when you update. Visual issues may happen, its only cache that needs emptied. Each browser allows you to remove cookies, history and other data.

Reset Server Cache - If your theme or fusion core version is not updated after uploading the new files, it is due to a server-side caching system. Some hosting providers have server-side cache systems installed to optimize the speed of content delivery, please clear any server-side cache or ask your host to do it. This is also true for google pagespeed setups or cloudflare setups.

Required & Recommended Plugins Must Be Updated – When you update the theme, you will see a notification message in your admin telling you the required and recommended plugins need to be updated. Follow the on screen steps to install the plugin updates. Our Fusion-Core plugin is the only required plugin and it has to be installed and activated for theme features to work. Make sure you are always using the most recent version of the plugin. You will be prompted to install it upon installing or updating your theme. If you dismiss the prompt or do not see it, then you can go to Appearance > Install Plugins page and install the plugin that way. Every time you update the theme, the plugin also needs updated.


Click Here To Find Out How To Update Your Theme

Avada Changelog

Avada is constantly being updated with new features and adjustments. You can always view the most recent update information in the change log in the changelog.txt file inside the theme zip file. You can also view the full change log below.

Click Here To View The Avada Change Log

Demo Content

When you first install any wordpress theme, it will not contain all the extra content that you might of seen in the live demo. There are two ways you can import the Avada Demo Content. Usually you have to import an XML file which can be troublesome. We’ve made it easier by creating a Theme Options Demo Content Importer.

Method 1: Import All Demo Content – Now users can quickly and easily import our demo content with one click of the button. This is the preferred method because its the fastest and easiest way to get our demo content. Using this method will give you all our pages and posts, several sample sliders of each slider type, widgets, theme option settings and more. If you wish to use our Theme Options Demo Content Importer, please see the Import All Demo Content section in our documentation.

Method 2: Import Individual Pages – If you do not wish to import everything and only need a page or two, we include all the created demo pages here in our documentation. This allows you to import a single page at a time. This is perfect for those users who do not want all pages, sliders, widgets, etc. If you wish to import individual pages, please see the Import Individual Pages section in our documentation.


Please Note These Important Items About The Demo Content

  • Published Posts – Our demo content contains 6 published blog posts. If you import on a live site, plugins like JetPack will notice new posts and push them out into your blog feed. Please disable any plugin that may do that before you import. After the import, you can remove the posts or save them as drafts then turn your plugin back on.
  • Images – Our demo images are not included because those are license stock photos that are not allowed to be shared. Instead we include other images in their place
  • Sliders – We do not include all demo sliders, there are too many to import, but we do include enough examples. If you wish to download all demo sliders, please see this post
  • Blog / Portfolio – Our demo shows every possible portfolio & blog combination with & without sidebars. Including all of that in the demo content would be too much to import. Never fear! It only takes a few clicks to get the desired result of a different layout, column selection or sidebar selction.

Import All Demo Content

The fastest and easiest way to import our demo content is to use our Theme Options Demo Content Importer. Our importer will give you all pages and posts, several sample sliders, widgets, theme options, assigned pages, and more. This is recommended to do on fresh installs. It will not replace content like posts, pages, portfolio, etc , it will not delete current menus but configure our demo menus, it will replace theme options, it will not replace but add sliders, it will replace reading settings and widget settings. To import our demo content, please see the steps below.


Step 1 – Install and activate these plugins before you proceed: Revolution Slider, Layer Slider, Fusion-Core, WooCommerce. Woocommerce is only needed for an online shop.

Step 2 – Navigate to Theme Options > General tab and click the “Import Demo Content” button. Be sure to read the popup message.

Step 3 – It can take a few minutes to import everything. Please be patient and wait for it to complete. Once it loads, you will see a “Success” message at the top of theme options.

Step 4 – Then you will see a message to “Regenerate Thumbnails”. Click the link to install the plugin. Then go to “Tools > Regen. Thumbnails” and choose to “Regenerate All Thumbnails”. This may take a moment to complete depending on server speed.

Please Note – Step 4 is not required, the process takes the demo images and regenerates them into the appropriate sizes for various areas. However, all users replace our images with their own so this step can be skipped if you wish.

importer

Common Issues & Questions

1. Slider Alias or ID Not Found For Layer or Revolution Slider

If you already have sliders made or something goes wrong during the import due to low server memory, its possible that our demo sliders may not be applied to the pages. You may see an error such as “Revolution Slider Error: Slider with alias Avada_Full_Width not found” or “LayerSlider cannot be found”. Sliders are applied by the “Slider ID” and each slider gets its own unique ID and they are given in numerical order. If you open up a page after importing the content, and you see an error like that, you only need to edit the page and assign the slider to the page. To verify you have the sliders, go to the Layer or Revolution Slider section of your admin to see themm listed. If you do not see them, then you can import them separately

2. Demo Import Fails or Times Out

Whenever that happens its due to low server memory or execution time, and your host should definitely be willing to adjust that, they have it very low if the content will not import. Contact them and explain the issue, they should raise it for you. Please see some important links below dealing with this.

3. Demo Content Still Will Not Import

If your host will not make changes, or you cannot get the demo content to import, then you can import the individual elements located at “Avada > Framework > plugins > Importer > Data”. Inside of that location you will see XML files for Avada with Woo, and Avada without Woo, as well as the Layer Sliders, Revolution Sliders and Fusion Sliders. Theme Options can also be imported by copying the text file and pasting it into the “Transfer Theme Options Data” field on the backup tab in theme options. You can also import individual pages from our demo by visiting this section of our docs.

4. Demo Content Duplicated

When you import our demo content it can take several minutes depending on the speed of your server. Each time the button is clicked it will import the content, so if it is clicked twice it will import everything two times. There are two ways to get rid of duplicate content.

Method 1: WP Reset Plugin – This plugin is the fastest way to get rid of content. However, it will remove all content from your database and leave the default theme activated. It does not remove plugins, but will deactivate them and remove all pages, posts, menus, sliders, widget data, theme options, etc. Basically it removes all the content that you imported from our theme. Only do this if you are able to start over. Click Here To Download.

Method 2: Manual Removal – This method will take longer and simply involves manual removing of duplicate items. For example, go to the appearance > menus and delete and duplicate items one by one. Same thing for pages, post, sliders, etc.

5. Demo Blog Posts Show Up In Your Blog Feed

Our demo content contains 6 published blog posts. If you import on a live site, plugins like JetPack will notice new posts and push them out into your blog feed. Please disable any plugin that may do that before you import. After the import, you can remove the posts or save them as drafts then turn your plugin back on.

6. Where Are The Rest of The Sliders?

Our live demo contains dozens of sliders. The importer only imports a few samples of each slider due to overall file size, most servers would not be able to import more which would cause the import to fail. If you wish to download all the demo sliders, please see this post for further instructions.


Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

Import Individual Pages

If you do not wish to import all of our demo content, you can import individual pages. Below is the demo code for all the individual pages on our demo that were made with shortcodes. Please note, the blog, portfolio, contact, faq, sidebar pages are not included since those are not made with shortcodes. To create those pages, please refer to those individual sections of our documentation. To copy one of our demo pages, follow the step below.

Step 1: Click the button of the page you want to copy, then select the text and choose to copy it.

Step 2: Create a new page in your WordPress admin, then select a page template in the page attributes box. (default for sidebar page, full width for no sidebar, and 100% width for full width of browser window)

Step 3: Next click on the TEXT tab (not the VISUAL tab) and paste the content into the field. Publish the page and you’re done!


Home 1 Home 2 Home 3 Home 4 Home 5 Home 6 Home 7 Home 8 Home 9 Home 10 Home 11 Home 12 Home 13 Home 14 Home 15 Home 16 Home 17 Home 18 Home Blog 1 Home Blog 2 Home Shop 1 Home Shop 2 Home Portfolio 1 Home Portfolio 2 Home Magazine 1 Home Magazine 2 Home Magazine 3 One Page Parallax Example Page 1 Example Page 2 Our Office Product Launch About Us Page 1 About Us Page 2 About Me Page Meet Team Page Services Page 1 Services Page 2 Maintenance Mode Page Coming Soon Page Blank Page Shortcode Alert Shortcode Blog Shortcode Buttons Shortcode Counter Box Shortcode Counter Circle Shortcode Columns Shortcode Flip Boxes Shortcode Google Maps Shortcode Modal Shortcode Pricing Tables Shortcode Progress Bars Shortcode Popovers Shortcode Social Icons

Options

Theme Options

Avada has an advanced Theme Options panel that is loaded with options. We have the options organized into logical tabbed sections, and each option has a description of what it will do on the front end. There are too many options to go over in these docs but please take some time and navigate through each tab to see what we offer. Go to Appearance > Theme Options in your WordPress admin to access the theme options panel. You can also backup your theme options by clicking on the backup tab. That is a great way to move your custom options from site to site. See below for screenshots of our theme options panel. Please note: we are always adding new options so these screenshots may not reflect the most up to date options.

This list below is incomplete, more coming soon!

  • General Blog Options – these are mainly for the assigned blog page because the blog shortcode has many of them built in. However some do apply, like date format.
  • Single Post Page Options – these options all apply to the single post page, not the main archive page. They apply for both assigned blog page, or the blog shortcode.
  • Meta Options – these options allow you to customize the meta data. These options will only work for the assigned blog page, the blog shortcode has its own set of meta options.
  • General Portfolio Options – these are global options that you can set for every portfolio page, however there are individual settings per portfolio page that can override them.
  • Portfolio Single Post Page Options – these options all apply to the single post page, not the main archive page.
  • Image Rollover Options – these are on the “Extras” tab in theme options. They allow you to customize and control various settings of the image rollover effect.
  • Footer Widget Area Options – these options will affect the main widget area of the footer.
  • Footer Copyright Options – these options affect the copyright area of the footer

  • Page Options

    Avada is super powerful and a lot of that power comes from our individual page meta options. Each page you create has a full set of options to choose from allowing you to customize each individual page. Each page you open in your WordPress admin will have a “Page Options Box” that contains all the different settings. There are several different sections included in the Page options box, each with its own title and purpose. Some settings will only work if you use a specific template, for example the Portfolio Options are only to be used if you select one of our portfolio page templates. Page options are powerful, and the best way to get familiar with them is to check them out while editing a page. Below are screenshots of each different section included in the Page Options box.


    Blog Post Options

    In addition to all the standard page options, Avada offers several post options for you to use for each blog post. These options allow you to set different settings for each individual post. When creating or editing a post, scroll below the WordPress editing field to find the “Post Options Box”. Inside that box are all the individual post settings, and page settings that can be set for each blog post. Below are screenshots of each different section included in the Post Options box for each blog post.


    Portfolio Post Options

    In addition to all the standard page options, Avada offers several post options for you to use for each portfolio post. These options allow you to set different settings for each individual post. When creating or editing a post, scroll below the WordPress editing field to find the “Portfolio Options Box”. Inside that box are all the individual post settings, and page settings that can be set for each portfolio post. Below are screenshots of each different section included in the Portfolio Options box for each portfolio post.


    Header

    The header is probably one of the first things you will want to setup. The header consists of pretty much everything above and including the menu, and we are also going to include the sliding bar and page title bar in this section. There are many different elements to the header and many ways to customize it including images, colors, content, design and more. All of this is done via our Fusion Admin Panel. The following sections will cover several different sections of the header that are listed below.



    Main Header Setup

    Avada includes a highly advanced theme options panel organized into sections that allows users to customize many different aspects of the theme. Inside theme options is a Header tab where you can set all the options for the normal header. Avada currently offers 5 different header layouts, each with its own unique design. There are also several options to customize the header and the content that can be inside of it. Some headers have their own unique options as well, for example headers 2-5 have a secondary top bar that can have social icons or a menu, header 4 can have a tagline and search box or a banner ad.


    To Setup The Header, Follow The Steps Below.

    Step 1 – Navigate to Appearance > Theme Options > Header to access the header options.

    Step 2 – Header 1 will be selected by default, select any of the 5 header options by clicking on the one you want.

    Step 3 – If you are using Headers 2-5, then you can choose the content that displays in the top left and right sections of the secondary bar. If you select contact info to show in one of the sections, then fill out the header phone number and email address fields. If you select social links to show, make sure you have your personal links the social sites setup on the Social Media tab in theme options. If selecting navigation to show, you can assign a custom menu to the Top Navigation Menu location in the menu section of your admin. Or you can choose to leave it empty and nothing will display.

    Step 4 – If you are using header 4, you have a few extra options. Header 4 can have a tagline, search box, tagline + search or a banner. Make your selections and fill out the corresponding fields.

    Step 5 – There are also several options for inserting a header background image if you wish to have one. And there are individual options per page and post that allow you to set a unique header background image or color per page/post. Access them in the individual page/post settings.

    Step 6 – Finally, there are header top and bottom margin settings that you can use to adjust the overall space above and below the header.

    importer

    Header Theme Options

    The header tab in theme options offers several different sets of options to customize the header. It is broken down into 3 sections: Header Content options, Header Background Options and Header Social Icon Options. See below for further descriptions on each section.

    Header Content Options

    This section is dedicated to the header content. This is where you choose header design 1-5, select slider position, transparent header, content in the top left or right section, enter contact information, taglines and banners.

    Header Background Options

    This section is for inserting a background image into the header. Upload an image and set it to 100% so it covers the area, choose various image repeat options and also modify the heading top and bottom padding.

    Header Social Icon Options

    This section allows you to customize the social icons that are displayed in the header. Choose boxed or unboxed, custom colors per icon or box or one color for the whole set, border radius and tooltip hover position.

    Sticky Header Setup

    Position & Transparency

    Avada includes an option to position the header above or below the main assigned slider, and also to have a transparent header. Both of these options can be selected globally in theme options or individually per page or post which will override the global theme option.

    Transparent Header – By default any header you choose will have a background color set, which can be changed to any color you desire. We also include an option to have no background color, we call this the “Transparent Header” option. There is a global theme option on the header tab, and there is an individual option in the page options box per page or post. By default, the page options box selection will be set to “Default” which uses the global theme option selection. To override this per page or post, simply select Yes or No in the drop down. When using a transparent header, the header background area height disappears and the slider below it will show behind the header in its place. This option works best with our default Header version 1. Also the transparent header will be removed on certain pages, like a search results page.

    Header / Slider Position – When assigning a slider to a page or post via the page options box, you can choose to have the header sit above the slider, or below the slider. There is a global theme option on the header tab, and there is an individual option in the page options box per page or post. This option is called “Slider Position”. By default, the page options box selection will be set to “Default” which uses the global theme option selection. To override this per page or post, simply select Above or Below in the drop down.

    Adding The Logo & Favicons

    Setting Up The Menu

    Using The Mega Menu

    Avada has a built-in mega menu that can be enabled in the main menu. It can have 1-4 columns, be full width, take any widget and have icons/images next to menu items. Please see below for information no how to set this up. If you need information on how to create a regular menu, please see the appropriate section of our documentation.


    Follow The Steps Below To Create A Mega Menu

    Step 1 – Navigate to Appearance > Menus section of your admin and select to create a new menu, or edit a current men that you already have.

    Step 2 – Only first level items can enable the Mega Menu. Click the “arrow icon” next to any parent level menu item to expand the option box. You will see an option to “Enable Fusion Mega Menu”, check the box.

    Step 3 – Select the “Mega Menu Number of Columns” that will be displayed. Also choose if you want “Full Width Mega Menu”.

    Step 4 – Each menu item can have a font awesome icon, or a custom image thumbnail next to it. If using font awesome icon, use “icon-” in the name. Ex: icon-camera. If using a custom image, click the “Set Thumbnail” button to upload an image.

    Step 5 – Second level menu item will show the title text above each column. To add a second level item inside the Mega Menu, select one of your pages on the left hand side and click “Add to Menu”, or add a post or a custom link from the left hand side. To make it a second level, drag the menu item into place, below and to the right of the first parent level.

    Step 6 – The Third level will be the smaller menu items in each column. To add a third level, repeat step 5 above and drag and drop the new menu item into place, below and to the right of the second level.

    Step 7 – Second & Third level menu items can have a widget area assigned. Create a new widget section by going to appearance > sidebars and clicking “+ Add New Sidebar”. Give the new widget area a name and save it. Then navigate to appearance > widgets to add widgets to the section. Once you add your widgets and save it, go back to the menu section and select the name of the new widget section in the “Mega Menu Widget Area” dropdown field.

    Step 8 – After setting up your menu, scroll down to the bottom of the page to assign the menu to the “Main Menu” location in the Theme Locations box. Once its all done, make sure you click the “Save” button.

    megamenu2

    Here is a screenshot that shows you the various areas and descriptions of the menu section described above.

    megamenu

    Setting Up The Sliding Bar

    Avada offers a sliding bar that sits at the top of the header. The sliding bar is a widgetized section that can collapse and expand by clicking the active icon. This is perfect for adding information and content for your viewers to see. The sliding bar can have 1-4 columns and take any widget inside each column.


    To Setup The Sliding Bar, Follow The Steps Below.

    Step 1 – Navigate to Appearance > Theme Options > Sliding Bar to access the options

    Step 2 – Check the box to enable the sliding bar.

    Step 3 – Choose between several other options, disable the bar on mobile, enable transparency, open on page load, number of columns to use, etc. The color options for the sliding bar are on the styling tab in theme options.

    Step 4 – To add content to the sliding bar, navigate to “Appearance > Widgets”

    Step 5 – You will see 4 widget sections on the right hand side, SlidingBar Widget 1-4. Your widgets are located on the left hand side.

    Step 6 – Simply drag and drop the widgets you want from the left side into the sliding bar widget sections on the right side. See the screenshot below.

    sliding bar


    sliding bar

    Setting Up Page Title Bar

    The page title bar is the horizontal bar that sits directly below the menu/header and contains the page title text, as well as breadcrumbs or search box. The page title bar can be completely displayed or hidden on every page or post globally, or you can display or hide it individually per page or post. There are also numerous options to customize the page title bar. The page title bar has global theme options, and individual page/post options that will override theme options.


    To Setup The Page Title Bar Globally, Follow the Steps Below.

    Step 1 – Navigate to Appearance > Theme Options > Page Title Bar to access options

    Step 2 – Check the box to enable the Page Title Bar

    Step 3 – Choose between several other options to set a background image, page title bar height, parallax background effect, colors, borders, etc.

    Step 4 – The right side of the page title bar can show either breadcrumbs or search box. If choosing breadcrumbs, there are several custom options to select as well.

    Step 5 – These settings will take effect for the page title bar on every page. To set different settings per page or post, please see the following section.

    page title bar

    To Set Different Settings Per Page/Post, Follow The Steps Below.

    Step 1 – Open up an individual page or post in your wordpress admin

    Step 2 – Scroll down the page to find the “Page or Post Options Box” and find the Page Title Bar Options section.

    Step 3 – There are numerous options that you can set to customize the page title bar per page or post. You can show or hide the bar per page/post, enter custom title text or subhead text, choose custom background image or color, set parallax effect and change the overall height of the bar. All of those options will take effect for the individual page or post you set them on.

    Step 4 – When finished, make sure to save the page or post

    page title bar

    Pages

    Pages are the backbone of your website, and most likely you will setup several of them. Pages are a blank canvas that allow you to add content with our shortcode elements. There are different page templates to choose from, each serving a purpose to help you build a finished site. The following sections will cover these different topics that are listed below.

    Create A New Page

    You can create any number of pages with content. Avada includes several page templates to choose from, and you will need to choose the page template that suits your needs. All of this is done in the pages section of your wordpress admin.


    Follow These Steps Below To Create A New Page

    Step 1 – Navigate to Pages and click Add New.

    Step 2 – Input a new name for your page, then find the Page Attributes box on right side.

    Step 3 – Set your Parent page; it’s usually set to No Parent

    Step 4 – Set your template from the dropdown list. See list of page templates below.

    Step 5 – Select any number of page options in the Page Options box

    Step 6 – Content for your page goes in the editing field, use the Visual or Text editor. Page content is mainly built using Shortcodes, see the Shortcodes section for how to use them. You can also use our demo content, see the corresponding section of this document for the demo code of each page

    Here is a screenshot that shows you the various areas and descriptions of the page settings described above





    Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

    Page Templates

    Avada includes several page templates to choose from, and you will need to choose the page template that suits your needs. For example, if you want a page that is 100% full width of the browser window, then you would select the 100% width page template. All of this is done in the pages section of your wordpress admin.

    Below are the page templates along with a description of each one

    • Default: this is the default page template that automatically has the sidebar with it. Choose this template for your blog
    • Contact: this is the contact page template that you should choose when you make your contact page with google map & contact form
    • FAQ: this is the FAQ page template. Choose this template when you make your FAQ page
    • Full Width – this is the full with page that is used for any page you want to be full width, examples are home pages, about us page, services, etc.
    • 100% Width: this is the full width 100% page template. Using this will allow your content to go full width of the browser window. And to contain content within the site width 940px, simply use the full width shortcode.
    • Portfolio Pages: these are all the portfolio page layout templates, choose grid, 1, 2, 3 or 4 columns depending on the layout you want.
    • Side Navigation: this is the side navigation page template. See the Side Navigation section of this document for more info.
    • Blank: this is the blank page template, when you use this the header and footer will be removed.

    Setting Up Home Page

    Setting up your home page is the same as setting up any other regular pages except that you need to specify in the settings which page will be your main home page. Avada includes several pre-designed home page options. Any of the layout options you see on our demo can be imported through our demo content importer, or from copying the individual page content from our docs in the “How To Import Individual Pages” section. However, you are not stuck with our pre-designed layouts, you can build any type of home page you desire using our shortcode elements. You can mix and match anyway you like.


    To Set Your Home Page, Follow These Steps

    Step 1 – Navigate to Settings > Reading.

    Step 2 – Select “A Static Page” option.

    Step 3 – Choose the page you want as your home page from the dropdown list.

    Step 4 – This is also the same spot you select the Blog page as the post page.

    Setting Up One Page

    Avada has the ability for you to make a one page site with a parallax scrolling menu. Most sites are traditionally setup with individual pages, each page with its own content. A one page site allows you to put all the content on one page, and the menu items will link to each different section of the page. Think of it as a full site but all on one page. A parallax one page site requires you to have a custom menu, a page with menu_anchors in the content and the custom menu assigned to the page. Please read below for information on how to set this up.


    First Create A Custom Menu For Your One Page

    Step 1 – Navigate to Appearance > Menus section of your admin and click “Create A New Menu” link and assign it a name.

    Step 2 – Each menu item you add needs a unique anchor name in the URL field. These names act as anchors, and will link to the corresponding anchor name in your page content. Use the “Links” box on the left hand side to add menu items. In the “URL” field type the anchor of your section, ex: #intro and then assign a name to the menu item. Click the “Add to Menu” button.

    Step 3 – Repeat step 2 for each menu item, giving each a unique #name.

    Step 4 – Once you have added your menu items, be sure to click the “Save” button.

    megamenu custom menu

    Next Create A New Page With Your Content And Anchor Points

    Step 1 – Navigate to the “Pages” section of your admin and click “Add New”.

    Step 2 – Scroll down to find the page options box and find the “Main Navigation Menu” dropdown and choose your newly created menu from above.

    Step 3 – Now its time to add your content and anchor points. Each menu item you created above is an “anchor” that will link to the different sections of the page. Add your content for each section, and insert the menu_anchor shortcode at the start of each section. There is a “menu_anchor” shortcode that can be used by itself or inside of the full_width shortcode. Both can be setup via the shortcodes generator that is invoked by hitting the ThemeFusion icon in the editor toolbar.

    For Example, if you created a menu item with #intro as the URL, then your menu anchor needs to read menu_anchor=”intro”.

    one page

    Setting Up Contact Page

    Avada includes a contact page with a built in contact form. We also have inlcuded integration with reCAPTCHA that gives users protection against spam. Users need to setup their reCAPTCHA key as well as other items for the Contact Us page.


    To Create The Contact Page, Follow The Steps Below.

    Step 1 – Create a new page and give it any name you wish.

    Step 2 – In the Page Attributes box on the right hand side, set the Template to Contact

    Step 3 – Insert your content you want into the editor field, such as a heading and text as our demo shows

    Step 4 – To insert the Google Map, email address and reCAPTCHA key for the form, please navigate to Appearance > Theme Options > Contact . The Contact tab also holds various options to customize the map and its various elements.

    Step 5 – Choose to use a sidebar or have no sidebar. Please refer to the Assigning Sidebars section of our documentation for instructions on how to use sidebars.

    To Set Your reCAPTCHA Keys, Follow The Steps Below.

    Step 1CLICK HERE TO SET UP YOUR KEYS

    Step 2 – Once you fill the form out, it will give you a Public and Private key

    Step 3 – Copy each of those keys and paste them into the corresponding fields located in Theme Options

    Step 4 – Save your settings when done, then the reCAPTCHA box will show up directly below your contact form

    Common Issues & Questions

    1. Google Map Will not Display

    If you have set all the correct settings for the google map and it will still not display, most likely the cause is a shared hosting account. A request is sent to google maps to decode the address and that API has a limit of 2500 requests / day. On a typical shared host, this limit can be exhausted very quickly and to fix this, google suggests that a unique API key is registered by the user. Please see this post for how to set this up.

    Setting Up FAQ Page

    Avada includes a Frequently Asked Questions (FAQ) page template that allows you to insert large amounts of content questions organized into categories using filters. These are very helpful for getting important information to your viewers.


    Follow These Steps Below To Create A FAQ Page

    Step 1 – Navigate to Pages and click Add New.

    Step 2 – Input a new name for your page, then find the Page Attributes box on right side.

    Step 3 – Select FAQ from the page template dropdown list, any FAQ post you make will show on the page.

    Step 4 – Select any number of page options in the Page Options box and add content in the editing field.

    Step 5 – Next you need to create FAQ posts, select the FAQs sidebar item in your admin section.

    Step 6 – FAQ’s work like regular posts, to add a new one, click Add New in the FAQs section of your admin.

    Step 7 – Create a title which will be the question, then insert copy in the editor field which will be the answer.

    Step 8 – On the right hand side is the Categories box, these are your filters to your FAQs.

    Step 9 – Click Add New Category and give it a name, then check the box to apply it to the FAQ post.

    Here is a screenshot that shows you the various areas and descriptions of the FAQ posts that are mentioned above

    Setting Up Side Nav Page

    Avada includes a Side Navigation page template that can be used to insert large amounts of content on a single page. You can also setup second level menu items on the Side Navigation page that will collapse by default and expand when the parent level is moused over or clicked, depending on how you set it in theme options. You create Side Navigation pages in sets. Each set always has to have a Parent page that will show at the top. Then you create additional pages and assign them to the parent page. All the pages assigned to the parent page will make one side navigation set.


    Follow These Steps Below To Create A Side Navigation Page

    Step 1 – Navigate to Pages and click Add New.

    Step 2 – Input a new name for your page, then find the Page Attributes box on right side.

    Step 3 – Select Side Navigation from the page template dropdown list

    Step 4 – Select any number of page options in the Page Options box and add content in the editing field.

    Step 5 – To add more pages to the side navigation set, create another new page and select your newly made page as the Parent page, and set the Template to Side Navigation

    Step 6 – Choose to have the side navigation set on the left or right side by selecting Left or Right from the Sidebar Position dropdown field in the page options box.

    Step 7 – Menu order is set alphabetically, change it by inserting a new order for each page in the Order field.

    Step 8 – Once you are done, be sure to Publish each of the pages

    Blog

    Avada is loaded with options for the blog. It offers many different options for you to present your blog posts, along with several different blog layouts. In addition there are numerous theme options and short code options that allow you to customize how posts are displayed. The Avada blog is extremely versatile and powerful. There are 3 ways to display your blog posts, we will cover each method as well as describe blog post types, post options and theme options. The following sections will cover each of these aspects of the blog that are listed below.



    Creating Blog Posts

    No matter which method or methods you use to display your blog posts, the first thing you need to do is create the blog posts. Avada offers several blog post types, image, image slideshows, video and more on the way. Each blog post you make will be able to be displayed using any of the 3 methods described above. And with the ability to assign custom categories to each post, you can easily display a set of posts based on category. See below for information on how to create blog posts.


    Follow the Steps Below To Create A Blog Post

    Step 1 – Navigate to Posts in your WordPress admin.

    Step 2 – Click on Add New to make a new post. Create a title and insert your post content in the editing field. You can use any of our short code builder elements inside the post.

    Step 3 – Add Categories from the right side. To assign it to the post, check the box next to the Category name.

    Step 4 – Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.

    Step 5 – For a single image, click the first Featured Image Box, select an image and click “Set Featured Image”.

    Step 6 – For a slideshow, insert more than one Featured Image, each image will be a slide in the slideshow. Five featured image boxes show by default, to add more change the “Post Image Slideshow” number in theme options > Slideshows tab.

    Step 7 – For a video post, paste the iFrame embed from either Youtube or Vimeo into the Video Embed Code field.

    Step 8 – Select any number of post options in the Post Options box.

    Step 9 – Once you are finished, click Publish to save the post.


    Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

    Here Is A Screenshot That Shows The Various Areas Of The Blog Post Page Described Above.

    Blog Single Post Page

    Every blog post you create gets a single post page. The single post page displays all the content of the post (the image, text, descriptions, etc). There are various setting for the single post page, please see below for information on each section.


    1. Featured Images

    Each post you create allows you to upload a featured image. Avada offers featured image boxes in the post editing page, this is where you upload your featured image. Each image you upload goes into a new box. If you only upload one featured image, then only one will show. If you upload two images, then a slideshow will automatically be created. 5 featured image boxes show by default, you can add more by going to theme options > slideshows tab and changing the value for “Posts Slideshow Images” option.

    2. Featured Videos

    Youtube and Vimeo Videos can be uploaded to show in the featured image location, or also used in a slideshow. To upload videos, insert the video embed code from your source into the “video embed code” field in the Fusion Options box. The video embed code is retrieved from Youtube or Vimeo. Each video there allows a sharing option, click the option to copy the embed code, and then paste it into the Avada video embed code field.

    3. Featured Image Size

    The featured image you upload to each post will show the full image ratio on the single post page by default. The width of the featured image will be set to the site width (or column width if using sidebars) and the height is set to auto so it displays the original height. In addition to this, you can set a custom featured image width and height to control the size of the image. This is useful in specific situations when you need a custom featured image size. The Custom featured image sizes works for single post page and the main blog page (this excludes grid and timeline layout).

    Featured Image Width – this option allows you to insert a custom pixel size (px) or percentage (%) for the width of the featured image. You can also use “auto” for automatic resizing if you add a specific value to height.

    Featured Image Height – this option allows you to insert a custom pixel size (px) or percentage (%) for the height of the featured image. You can also use “auto” for automatic resizing if you add a specific value to width.

    4. Post Meta Information

    There is various post meta information that you can add to each post you create. This includes tags, categories and post formats. Post format icons will display only when using the large or medium alternate layouts.

    Categories – this is meta information you create for the post. In the right hand sidebar of the post editing page is a “Categories” box that allows you to add a unique category to the post. For example: WordPress, Photoshop. Each category is a meta link that your viewer can click to view similar type of posts. You can also access and edit Categories from the “Post” sidebar item in your WP admin.

    Tags – this is meta information you create for the post. In the right hand sidebar of the post editing page is a “Tags” box that allows you to add tags to the post. For example: Photography, Design. Each tag is a link that your viewer can click to view similar type of posts. You can also access and edit Tags from the “Post” sidebar item in your WP admin.

    Formats – this helps display the type of post you created. For example, if its an image post, video post or slideshows post. Format information will only display when using the large or medium alternate layouts. The design allows for a post icon format to display with the post. Please see the post format section of our docs.

    5. Using Fusion Builder – NOT AVAILABLE YET

    Avada allows you to use the Fusion Builder on each single post page as well. Simply click the “Fusion Builder” button in the post editing page to use it. Any content added through the builder is treated exactly like content added to the WordPress post content field, it will display in the main post section of the single post page.

    6. Blog Single Post Page Options

    Avada offers several other options for the blog single post page. All of these can be found in the “Fusion Options” box of the single post page. We include settings to display both rollover icons or just one or none, insert a custom URL for the link icon, and show or hide related posts. You can also utilize all other page options like adding sliders, customizing headers and footer, add page backgrounds, customize the page title bar and more. All of these options are useful in different situations and allow you to customize the site to fit your needs.

    Click Here To View All The Portfolio Post Options

    Assigned Blog Page

    The first blog method we will cover is the standard WordPress method, setting up an assigned blog or “post” page. It’s as simple as making a new page, and then telling WordPress to use that page as the post page.


    Follow These Steps Below To Assign A Post Page

    Step 1 – Navigate to Pages and click Add New.

    Step 2 – Input a new name for your page, then find the Page Attributes box on right side.

    Step 3 – Select the Default page template from the dropdown list.

    Step 4 – Select any number of page options in the Page Options Box

    Step 5 – Click Publish to save the page

    Step 6 – To set the page as your post page, navigate to Settings > Reading and select your blog page name for the Posts Page. Doing this will automatically pull your blog posts and place them on the page.

    Theme Options For The Assigned Blog Page

    When using the assigned blog page as described above, all the options you can select for it are located in theme options on the blog tab. There are dozens of options to choose from like layout, sidebars, excerpts, full width, etc. There are general blog options, single post page options and blog meta options. Each one has title sand descriptions to help you better understand what they do. Any type of blog options you need to set will be set here in theme options when using the assigned blog page.

    Blog Short Code

    The second blog method we will cover is our custom blog short code. This is a fantastic method because it allows you to place your blog posts on any page, select any of our layouts, assign custom categories to display and so much more. Basically using the blog short code allows you to have multiple blog pages, each with a different set of categories, layouts and other blog settings. It’s also great to use to only display a few posts on a page with other content. The blog short code is very versatile.


    Follow These Steps Below To Use The Blog Short Code

    Step 1 – Navigate to Pages, click Add New or edit an existing page.

    Step 2 – Use the VISUAL editor tab and then click our Short Code icon on the top row.

    Step 3 – The short code generator window will popup, select “Blog” from the dropdown list

    Step 4 – Now you can select all the different options for the blog short code. These options will only pertain to this one instance of the blog short code. This allows major flexibility to use it on multiple pages with different options, or even multiple instances of it on the same page, like for a magazine style layout. Each instance of the blog short code allows for different settings.

    Step 5 – Click Publish to save the page

    Theme Options For The Assigned Blog Page

    When using the blog short code, the general theme options on the blog tab will not work. This is because each blog short code has its own set of options built directly into the short code. This allows you to set all the options per instance of the short code. The single post page options in theme options will still apply though


    Click Here To View Our Complete Shortcode Documentation

    Recent Post Short Code

    The third blog method we will cover is our custom recent post short code. This short code is unique in that it offers more compact design options that may work better on pages with other content. This short code is a fantastic method because it allows you to place your blog posts on any page, select various layouts, assign custom categories to display and so much more. You can use the short code as many times as you’d like, and on any page or post.


    Follow These Steps Below To Use The Recent Post Short Code

    Step 1 – Navigate to Pages, click Add New or edit an existing page.

    Step 2 – Use the VISUAL editor tab and then click our Short Code icon on the top row.

    Step 3 – The short code generator window will popup, select “Recent Posts” from the dropdown list

    Step 4 – Next select all the different options for the recent post short code. These options will only pertain to this one instance of the short code. This allows major flexibility to use it on multiple pages with different options, or even multiple instances of it on the same page, like for a magazine style layout. Each instance of the short code allows different settings.

    Step 5 – Click Publish to save the page

    Click Here To View Our Complete Shortcode Documentation

    Blog Post Formats

    Avada includes two blog layouts that show a post format icon, they are called Large Alternate and Medium Alternate layouts. A post format is a piece of meta information that can be used by a theme to customize its presentation of a post. For these two specific layouts in the Avada theme, we have added custom icons to represent each type of post format: Standard, Gallery, Link, Image, Quote, Video, Audio, Chat. When using the large or medium alternate layouts, you can select the type of post format so the correct icon shows in the design. When editing a blog post, click on “Screen Options” in the top right corner of your admin to ensure the “Format” box is checked. Once checked, you will see the Format box on the right side that allows you to choose the specific format for the post.


    Portfolio

    Avada is loaded with options for the portfolio. It offers many different options for you to present your portfolio posts, along with several different layouts. In addition there are numerous theme options and short code options that allow you to customize how posts are displayed. The Avada portfolio is extremely versatile and powerful. There are 2 ways to display your portfolio posts, we will cover each method as well as describe portfolio post types, post options and theme options. The following sections will cover each of these aspects of the blog that are listed below.



    Creating Portfolio Pages

    Avada includes advanced portfolio options that allows users to create as many portfolio pages as they wish. Each portfolio page you create can have a different set of categories, options, layouts and more. Let’s get started!


    Follow These Steps Below To Create A Portfolio Page

    Step 1 – Navigate to Pages and click Add New.

    Step 2 – Input a new name for your page, then find the Page Attributes box on right side.

    Step 3 – Select any of our various Portfolio page templates from the dropdown list, this will apply any portfolio post you create to the page. See the following step to find out how to specify a specific category per page.

    Step 4 – Scroll down to find the Page Options Box, inside is a Portfolio section where you can select which portfolio categories will show on this page. This option is what allows you to create multiple portfolio pages because each page can have a different set of posts assigned to it with the portfolio category option.

    Step 5 – Select any number of page options in the Page Options box and add content in the editing field. If you add content to the editing field, it will show above the portfolio posts.

    Step 6 – Once you are done, be sure to Publish each page you create.

    Please Note: You have to already have Categories setup in your Portfolio section for them to show up in the Portfolio Categroy list in the Page Options box. Only the Categories you have made will show up. You also need to have the Categories assigned to Portfolio posts for them to show up on your site. See the following sections for how to make Portfolio posts and categories.


    Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

    Creating Portfolio Posts

    After you have made your portfolio page, you need to create portfolio posts so they will show up on the portfolio pages. Avada offers several options for portfolio posts, and with the ability to assign custom categories to each post, you can easily display a set of posts based on category. Each portfolio post offers several ways to add tags, categories and skills. Categories are the filters you see above the post that allow the viewer to sort the posts. Skills and Tags are used to add additional meta info to the post. See below for information on how to create portfolio posts.


    Follow the Steps Below To Create A Portfolio Post

    Step 1 – Navigate to Portfolio in your WordPress admin.

    Step 2 – Click on Add New to make a new post. Create a title and insert your post content in the editing field. You can use any of our short code builder elements inside the post.

    Step 3 – Add Categories from the right side. To assign it to the post, check the box next to the Category name. These Categories are the filters that will sit above your portfolio images and allow you to filter the different types of projects.

    Step 4 – Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.

    Step 5 – Add Skills from the right side. Click Add New, type in your skill text and hit enter. To assign it to the post, check the box next to the Skill name.

    Step 6 – For a single image, click the first Featured Image Box, select an image and click “Set Featured Image”.

    Step 7 – For a slideshow, insert more than one Featured Image, each image will be a slide in the slideshow. Five featured image boxes show by default, to add more change the “Post Image Slideshow” number in theme options > Slideshows tab.

    Step 8 – For a video post, paste the iFrame embed from either Youtube or Vimeo into the Video Embed Code field.

    Step 9 – Select any number of Portfolio Options in the Portfolio Options box.

    Step 10 – Once you are finished, click Publish to save the post.


    Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

    Featured Image Information

    Featured images will react differently and have different settings for two main areas. Featured images on portfolio page templates (ex: column layout page templates) and featured images on single post pages. Please see the links to the right for information on each.

    Here Is A Screenshot That Shows The Various Areas Of The Portfolio Post Page Described Above.

    Portfolio Single Post Page

    Every portfolio item you create also gets a single post page. The single post page displays all the content of the post (the image, text, descriptions, etc). There are various setting for the single post page, please see below for information on each section.


    1. Featured Images

    Each post you create allows you to upload a featured image. Avada offers featured image boxes in the post editing page, this is where you upload your featured image. Each image you upload goes into a new box. If you only upload one featured image, then only one will show. If you upload two images, then a slideshow will automatically be created. 5 featured image boxes show by default, you can add more by going to theme options > slideshows tab and changing the value for “Posts Slideshow Images” option.

    2. Featured Videos

    Youtube and Vimeo Videos can be uploaded to show on the single post page, or also used in a slideshow. To upload videos, insert the video embed code from your source into the “video embed code” field in the Fusion Options box. The video embed code is retrieved from Youtube or Vimeo. Each video there allows a sharing option, click the option to copy the embed code, and then paste it into the Avada video embed code field.

    3. Featured Image Size On Single Post Page

    The featured image you upload to each post will show the full image ratio on the single post page by default. The width of the featured image will be set to the site width (or column width if using half width layout above) and the height is set to auto so it displays the original height. In addition to this, you can set a custom featured image width and height to control the size of the image. This is useful in specific situations when you need a custom featured image size. The Custom featured image sizes will only work for single post pages.

    Featured Image Width – this option allows you to insert a custom pixel size (px) or percentage (%) for the width of the featured image. You can also use “auto” for automatic resizing if you add a specific value to height.

    Featured Image Height – this option allows you to insert a custom pixel size (px) or percentage (%) for the height of the featured image. You can also use “auto” for automatic resizing if you add a specific value to width.

    4. Selecting The Column Width Layout

    Each post you create allows you to set the width of the columns for the featured image. This is called the “Width (Content Columns for Featured Image)” option and you can set it to be Full Width or Half Width. In addition to these two options, you can set the entire post to be 100% width of the browser window.

    Half Width – this option will set the featured image column on the left side and the project description and project details column on the right side. The size split of columns is about 70% for image, 30% for text.

    Full Width – this option will set the featured image up top full width and the project description and project details below that in two columns. The Project description is on left at about 70% and project details are on right at about 30%.

    100% Width Page – this option will allow the single post page to use the 100% width page template, allowing all content to go full width of the browser window.

    5. Project Description Section

    The project description section is any content you insert in the post content field through the WordPress editor. This is usually the text description of the project, but it can also contain any of our shortcode elements. This is where you should add any content you wish to help describe the project or display more information about it.

    6. Project Details Section

    The project details section contains meta information relating to the project. The project details is placed in a sidebar next to project description for full width layout, or below project description in the half width layout. Avada allows various information to be added to the project details section, see below for each item.

    Skills – this is meta information you create for the post. In the right hand sidebar of the post editing page is a “Skills” box that allows you to add skills to the post. For example: HTML, PHP. Each skill is a link that your viewer can click to view similar type of posts. You can also access and edit Skills from the “Portfolio” sidebar item in your WP admin.

    Categories – this is meta information you create for the post. In the right hand sidebar of the post editing page is a “Categories” box that allows you to add a unique category to the post. For example: WordPress, Photoshop. Each category is a meta link that your viewer can click to view similar type of posts. You can also access and edit Categories from the “Portfolio” sidebar item in your WP admin.

    Project URL – this option allows you to insert a custom URL for the project. This is perfect for when you have an external link to show the viewer, or an internal link to another page or post of your site.

    Copyright – this option allows you to insert a custom URL for the project copyright. This can be useful for a prject that might of been a collaboration with another person or company.

    7. Using Fusion Builder – NOT AVAILABLE YET

    Avada allows you to use the Fusion Builder on each single post page as well. Simply click the “Fusion Builder” button in the post editing page to use it. Any content added through the builder is treated exactly like content added to the WordPress post content field, it will display in the Project Description section of the single post page.

    8. Portfolio Single Post Page Options

    Avada offers several other options for the portfolio single post page. All of these can be found in the “Fusion Options” box of the single post page. We include settings to show or hide project description title, project details information, use the 100% width page template, show or hide the first featured image, display both rollover icons or just one or none, insert a custom URL for the link icon, open the link icon in a new window, and show or hide related posts. You can also utilize all other page options like adding sliders, customizing header and backgrounds, etc. All of these options are useful in different situations and allow you to customize the site to fit your needs.

    Click Here To View All The Portfolio Post Options

    Recent Work Shortcode

    The Recent Work short code allows you to display your portfolio posts on any page or post without needing to use one of the portfolio page templates. This short code has its own design options as well, and includes the same designs for portfolio page templates. This short code is a fantastic method because it allows you to place your portfolio posts on any page, select various layouts, assign custom categories to display and so much more. You can use the short code as many times as you’d like, and on any page or post.


    Follow These Steps Below To Use The Recent Work Short Code

    Step 1 – Navigate to Pages, click Add New or edit an existing page.

    Step 2 – Use the VISUAL editor tab and then click our Short Code icon on the top row.

    Step 3 – The short code generator window will popup, select “Recent Work” from the dropdown list

    Step 4 – Next select all the different options for the recent work short code. These options will only pertain to this one instance of the short code. This allows major flexibility to use it on multiple pages with different options, or even multiple instances of it on the same page. Each instance of the short code allows different settings.

    Step 5 – Click Publish to save the page

    Click Here To View Our Complete Shortcode Documentation

    Sliders

    Let’s face it, everyone loves sliders. They are the perfect way to catch your viewers attention by displaying your important content. Avada includes 4 amazing sliders; Revolution Slider, Layer Slider, Fusion Slider, Elastic Slider. We also include other slider types for pages/posts and carousels. Each slider can be used on any page or post and offers its own set of unique options. The following sections will cover several different sections of the slider that are listed below.




    How To Assign A Slider

    Once you have created your sliders, you need to assign them to a page, or use a shortcode if the slider offers one. There are two methods to assigning a slider to a page. First you can assign a slider via our page options box. Doing it this way will always put the slider directly under the navigation. The second method is to insert the slider shortcode in the post content field. Read below for information on both methods.


    How To Assign A Slider From The Page/Post Options Box.

    Step 1 – Create or edit any page or post.

    Step 2 – Find the Page or Post Options box below the editing field, inside you will see a “Slider Options” section.

    Step 3 – First select the Slider Type from the dropdown field.

    Step 4 – Then select the name of the slider under the corresponding slider dropdown field.

    Step 5 – To finish, click Publish to save the settings

    Step 6 – Finally, there are header top and bottom margin settings that you can use to adjust the overall space above and below the header.


    Please Note – There is a fallback image field in the slider options, if you have a fallback image inserted, it will override the slider on all responsive devices.

    How To Assign A Slider Via Shortcodes

    Sliders can also be assigned as a short code. The short code can be inserted on any page or post. Please see below for information on how to use slider short codes.

    Step 1 – Create or edit any page or post.

    Step 2 – Click on the Visual editing tab

    Step 3 – The Layer & Revolution sliders generate a slider short code with each slider you make. Go to the slider creation page for either slider and find the automatiaclly generated shortcode, then copy it and paste it into the page editing field.

    Step 4 – Other sliders like Client Carousel, Image Carousel, Slider, Flexslider and Woo Featured Slider can be used from our short code generator. Click the short code generator icon, then select the slider from the dropdown list and make your selections. Click Inert Shortcode and the short code will be inserted onto the page.

    Step 5 – To finish, click Publish to save the settings


    slider short code

    Import Our Demo Sliders

    Our Theme Options Demo Content Importer includes two sample sliders from both the Revolution Slider and Layer Slider, 3 Fusion Sliders and one Elastic Slider. To import them, navigate to theme options > general and click the Import Demo Data button. It can take a few minutes so please only hit it once or you will get duplicate content. Our demo contains many other sliders that we cannot include in the importer due to size. The sample sliders we give are a great representation of each slider. However, if you wish to have all of the layer, revolution and Fusion sliders, you can download them below. Please read each section carefully. The zip file you can download below includes three folders, one for Layer Slider, one for Revolution Slider and one for Fusion Slider. Each slider has its own method of importing, see below for each method.

    How To Import Revolution Sliders, Click For Full Details:
    First you need to create a new slider and save it. Then at the bottom of the slider settings page is an area to import and export data. Click the “Show Export/Import” button. Then you can choose a file to import. Select the slider you wish to import from our folder. Once you import it all the settings will change to the settings of the imported slider. Only one slider imports at a time repeat the process to get them all.

    How To Import Layer Sliders, Click For Full Details:
    Each slider is packaged into it’s own zip file. Select which zip file you want to import and click Import. Please Note: The layer slider also allows you to import 5 sample sliders from the developer of the slider. Simply click “Import Sample Sliders” and all 5 will be imported and they co include the images since its from the developer and they have built it into the plugin.

    How To Import Fusion Sliders, Click For Full Details:
    All the sliders are packaged up into one zip file. Navigate to your WordPress Admin and hover over the Fusion Slider item in your left sidebar. You will see an option to “Export / Import”. To import, click the “Choose File” button and select the fusion_slider.zip” file that is within the downloaded files below. It will import all the sliders and content in one step. once done, open the slides and sliders page to view them.

    Important Information – These exported sliders are mainly used to see our settings and see how we built the slides. You **may** need to replace the images with your own because the images are not included in the exported data. When you import this slider data below, you may need to replace each image with one of your own. Its very important that you replace each image with your own, the slider may not work if you miss one image so be careful when using these. Check each and every sublayer to ensure it does not have a missing image.


    Click Here To Download Our Slider Exports

    Slider Position

    Assigning a slider via page options versus using a slider shortcode will place the slider in a different position on the page. In addition, Avada offers an option to position a slider that is assigned via page options either above or below the header, and the header can be set to be transparent. All of this affects where the slider is positioned.

    Slider Position Assigned Via Page Options – When you assign a slider via page options, the slider position will always be directly underneath the header, and the top of the slider will align with the main menu drop down. There is no extra page padding or content that will interfere with the slider position when assigned via page options.

    Slider Position Assigned Via Short Code – When you insert a slider short code on a page or post, the slider will always be positioned where you place it in the post content field. This is the perfect method for when you do not want the slider directly below or above the header, but somewhere further down the page. If you place the slider short code at the top of the post content field, it will have the page top padding added to it, which is et to 55px by default. Content added to the post content field will have page padding applied. The page padding can be adjusted globally in theme options, or individually per page or post in the page options box.

    Slider Position When Using A Transparent Header – When assigning a slider to a page or post via the page options box, you can choose to have a transparent header. If transparent header is set to yes, the slider will be moved up to the top most part of the page and will be positioned behind the header. Most likely, you may need to adjust your slider hieght to accommodate the transparent header. This option works best with our default Header version 1.

    Slider Position Above or Below Header – When assigning a slider to a page or post via the page options box, you can choose to have the header sit above the slider, or below the slider. This option is called “Slider Position” and does exactyl as it says, the slider can be positioned above the header, or below.

    Revolution Slider

    Avada includes the popular Revolution Slider Created By ThemePunch. This slider is a beautifully animated slider that is 100% responsive and has some amazing options. We cannot cover everything here but we outline how to setup a slider and how to add slides to it. We also include a video tutorial walk through. If you download our main files from Themeforest, you will get the original documentation created by ThemePunch, which is located in the Extras folder.


    To Create A New Revolution Slider, Follow The Steps Below.

    Step 1 – Click on the Revolution Slider sidebar item in your admin section, then click the Create New Slider button.

    Step 2 – Insert a slider name and alias. The alias text will generate a shortcode that can be used in the editing field of pages or posts.

    Step 3 – Then select the Source Type. If you choose Posts or Specific Posts, please refer to the Revolution Slider Docs for information on how to set that up.

    Step 4 – Then select the Slider Layout type, each type will have its own settings. Set the Grid and Responsive settings here also. View the layout example diagram below this area to understand what each section is.

    Step 5 – On the right hand side are many other options you can set. All are self explanatory with descriptions. Test them out.

    Step 6 – Once you are done, click Create Slider and your new slider will be made.


    rev slider

    To Add Slides To Your Slider, Follow The Steps Below.

    Step 1 – Click the Edit Slides button in the Rev Slider settings.

    Step 2 – Click the New Slide or New Transparent Slide button.

    Step 3 – When done, you will see a new slide box, click Edit Slide to open the slide editing section. This is where you add all your slide content.

    Step 4 – The slide editing section has many different sections that allow you to customize the slide. We cannot cover them all, but please do check out each one.

    Step 5 – To add a text layer, click the “Add Layer” button that sits below the slider preview window. Enter your text in the Text/HTML field that shows in the Layer General Parameter box. To style it, select one of the styles from the dropdown or make your own by clicking “Edit Style”.

    Step 6 – To add an image or video, click the “Add Layer: Image” or “Add Layer: Video”.

    Step 7 – Below the slide preview box on the left hand side are 3 sections; Layer Parameters, Layer Animations, Layer Links & Advanced Parameters. Select the settings you wish to have, and click Preview Slide to see a preview of what will happen.

    Step 8 – On the right hand side below the slider preview box is the Layers Timing & Sorting box where you set the time it takes for each layer to show on the screen.

    Step 9 – When finished, click Update Slide to save it. Repeat process for more slides.


    rev slider

    Here Is A Screenshot That Shows You The Various Areas Of The Slider Creation Page Described Above.

    rev slider
    Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

    Layer Slider

    Avada includes the popular Layer Slider Created By Kreatura. This slider is a beautifully animated slider that is 100% responsive and has some amazing options. We cannot cover everything here but we outline how to setup a slider and add slides to it. We also include a video tutorial walk through. If you download our main files from Themeforest, you will get the original documentation created by Kreatura, which is located in the Extras folder.


    To Create A New Layer Slider, Follow The Steps Below.

    Step 1 – Click on the Layer Slider sidebar item in your admin section, then click the “Add New” button and give the slider a name.

    Step 2 – The “Slider Settings” tab will open and allow you to set the general settings for your slider such as the width, height, responsive, full width, and more. Check out each tab.

    Step 3 – On the Appearance tab is a Skin field, there are several to choose from including our own Avada skin.

    Step 4 – Once you are done, click “Save Changes” to save the slider. Next you can add slides, see the information below.

    Please Note – You can get Kreatura’s sample sliders by clicking the “Import Sample Sliders” button. It’s a good way to learn and see the different types of settings.


    layer slider
    layer slider

    To Add Slides To Your Slider, Follow The Steps Below.

    Step 1 – Click on the “Slides” tab.

    Step 2 – Slide #1 will already be created, add a background image for the slide, set thumbnails, transitions, links and more in the settings box above the slider preview window.

    Step 3 – Each slide you make can have multiple layers to it. The layers show up below the slider preview window. Click “Add New Layer” create a new layer. An editing section will display once clicked.

    Step 4 – The layer editing section has 5 tabs; Content, Transition, Link, Styles, Attributes. Content tab is where you add your content, Transition tab is where you set all the timings and animations, Link tab is where you can set the content to link, Styles tab is where you set custom styles, Attributes tab is where you can add custom id’s or classes.

    Step 5 – Click on the Content Tab and enter your text, image or video or custom HTML content. Then set your transitions, links, styles and attributes if needed.

    Step 6 – Click the “Enter Preview” button to view a preview of the slider and layers.

    Step 7 – When finished, click “Save Changes” to save it. Repeat process for more slides.


    layer slider

    Here Is A Screenshot That Shows You The Various Areas Of The Slider Creation Page Described Above.

    layer slider
    Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

    Fusion Slider

    Fusion Slider is a beautifully simplistic slider with amazing flexibility that produces stunning results. This responsive slider gives you full control of the slider width and height so you can easily create fixed, full width or full screen sliders. Create image and video slides with support for self hosted videos, youtube and vimeo. Add title and subhead text along with buttons, and control various styles and settings. Read below for information on how to use the Fusion Slider.

    Fusion Slider consists of sliders and slides. First create a slider, then create slides and assign them to the slider. Any slide you create can be assigned to any slider.


    To Create A New Fusion Slider, Follow The Steps Below.

    Step 1 – Click on the Fusion Slider sidebar item in your admin section, then click the “Add or Edit Sliders” option and give the slider a name.

    Step 2 – Each slider you make can be used as a shortcode in a page or post. Enter a shortcode name in the shortcode field.

    Step 3 – Enter the slider width in pixels or percentage. 100% width is full width of browser window. 940px is a fixed 940px.

    Step 4 – Check the full screen option box if you want the slider to be 100% width and 100% height of the viewing area.

    Step 5 – Check the parallax scrolling effect box for the parallax scrolling effect. Please note the specific notes for this option in the setting description.

    Step 6 – Select from the remaining options: display pagination and navigation elements, autoplay the slide, loop the slide, animation type and speed, and slideshow speed.

    Step 7 – Click “Add Slider” to save the new slider. once saved, it will show up on the right side of the page.

    Edit A Slider – To edit a slider, click the slider name on the right hand side of the page.


    fusion slider
    fusion slider

    To Create Slides For The Fusion Slider, Follow The Steps Below.

    Step 1 – Click the Fusion Slider sidebar item, then click the “Add or Edit Slides” option.

    Step 2 – Click the “Add New Slide” button and enter a name for the slide.

    Step 3 – Background type: Select image, self hosted video, youtube or vimeo slide. See details of each type below.

    Step 4 – Slider Content Settings: Enter headings, captions, buttons and more. See details of each setting below.

    Step 5 – Slide Link Settings: Choose to link a button, or the full slide. See details of each setting below.

    Step 6 – To assign the slide to a slider, select the slider name in the “Sliders” option box in the right sidebar. Any slide you create can be assigned to any slider.

    Step 7 – When finished, click “Publish” to save the slide


    fusion slider
    Background Type

    Image Slide – Enter your image in the featured image box on the right hand sidebar.

    Self Hosted Video Slide – MP4 and WedM files are required for self hosted videos along with hosting the video on a server. Enter the URL path for the MP4 and WebM files into their fields. OGV is optional but you will want to insert a video preview image for devices and old browsers that do not support these video types. There are also settings to mute, autoplay or loop the video, hide the controls add a color overlay to the video.

    Youtube Video Slide – Enter the youtube video ID. For example the Video ID for http://www.youtube.com/LOfeCR7KqUs is LOfeCR7KqUs. There are also settings to mute, autoplay or loop the video, hide the controls and add a color overlay to the video.

    Vimeo Video Slide – Enter the vimeo video ID. For example the Video ID for http://vimeo.com/75230326 is 75230326. There are also settings to mute, autoplay or loop the video and add a color overlay to the video.

    fusion slider
    Slider Content Settings

    Content Alignment – Select if the content is left, right or centered aligned.

    Heading Text, Font Size, Color – Enter the heading text that will display on the front end and control the font size and font color of the heading text.

    Heading Background – Display a semi-opague background behind the heading text.

    Caption Text, Font Size, Color – Enter the caption text that will display on the front end and control the font size and font color of the caption text.

    Caption Background – Display a semi-opague background behind the caption text.

    fusion slider
    Slide Link Settings

    Button Link – Use one or two buttons. Each button has a text field with a full set of button shortcode options. Enter the settings for each button to display two buttons, or clear out one of the button fields to only show one button.

    Slide Link – Enter a URL for the full slide background to link.

    fusion link

    Here Is A Screenshot That Shows You The Various Areas Of The Slider Creation Page Described Above.

    fusion slider

    How To Import / Export Fusion Sliders & Slides

    Click on the Fusion Slider sidebar item in your admin section, then click the “Export / Import” option to load the settings page.

    Export – All sliders and slides must be exported. Click the “Export All Sliders” button and a zip file will be automatically downloaded to your computer. The zip file contains a settings.json and sliders.xml file.

    Import – Click the “Choose File” button to select a zip file that has been exported already. Then click the “Upload File And import” button and wait for the process to complete.

    fusion slider export
    Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

    Elastic Slider

    Avada includes the stylish Elastic Slider. This slider is a great way to create beautiful slideshows with stylish captions that have simple animations. Its fully responsive and can be full width or can have a custom width and height set. Users can also customize other settings on the Elastic Slider tab in the Theme Options panel.


    To Create A New Elastic Slider, Follow The Steps Below.

    Step 1 – Click on the Elastic Slider sidebar item

    Step 2 – Click the Add New button at the top and enter a name for the slide.

    Step 3 – Find the Elastic Slide Options box where you set your slide Title and Caption

    Step 4 – To set your image, click on the “Set Featured Image” link in the Featured Image box and choose an image from your media library

    Step 5 – Then add the slide to a “Group”. Click on the empty field and enter a Group name then click “Add”

    Step 6 – Save the slide by clicking “Publish”. Repeat process to add more slides, be sure to add the same Group name to your slides if you want them all be in one set. You can manage your Groups by clicking on “Groups” in the left sidebar under the Elastic Slider menu item.


    elastic slider

    Elastic Slider Theme Options

    The Elastic Slider has its own tab in theme options. Navigate to “Appearance > Theme Options” and click on the Elastic Slider tab to set the custom settings such as; width, height, animation, font size, color, etc. All of it is controlled in theme options. You can create as many elastic sliders you want. Simply create a new “Group” of slides for each slider.

    Here Is A Screenshot That Shows You The Various Areas Of The Slider Creation Page Described Above.

    elastic slider
    Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

    Other Slider Types

    This section is coming soon and will go over the other slider types like post sliders, slider shortcode and carousels

    Shortcodes

    Avada includes all kinds of short codes that allow you to build unique layouts. Short codes provide major flexibility because you can use them anywhere. Avada includes all shortcodes inside the Fusion-Core plugin, this plugin must be installed and activated. Fusion-Core contains a Short Code Generator. The generator has a user interface that allows you to quickly and easily use short codes and all the options that go with them. All shortcodes are accessed in the Visual Editor field of your WordPress Admin. Each short code has its own unique options.

    The Fusion-Core plugin must be installed and activated for you to use Avada shortcodes.


    To Use The Shortcode Generator, Follow The Steps Below.

    Step 1 – Open a page or post and click on the Visual editing tab.

    Step 2 – In the editing toolbar, click the short code icon to initiate the generator.

    Step 3 – In the popup window, select the shortcode you want from the dropdown list.

    Step 4 – Make your selections from the short code options that load, then click “Insert Shortcode” and it will be inserted on the page. See the screenshot below.


    Click Here To Watch The Video Tutorial

    Click Here To View All Shortcode Options
    short codes
    Short Code Generator

    Shortcode Customization

    Every shortcode Avada includes has a class and id option. This allows you to further customize the shortcode outside of the options we provide. For example, if you need to setup a shortcode differently than what our options allow, you can add a custom class or id to the shortcode, and then create your custom CSS to target that.

    Please note that customizing our shortcodes with a class or id is not covered by our support. This goes beyond normal theme use and was added for advanced web developers.

    Example of Shortcode Customization

    Let’s assume you need to add a black background color to a column shortcode. Avada currently does not offer background colors on a per column basis, but this can be achieved through CSS customization by using a custom class or id then writing CSS for it. Please follow the steps below.

    Step 1 – Insert a column shortcode on the page and add a unique name in the class or id field. See the example below for a one half column.

    Step 2 – Navigate to theme options > custom CSS tab to write your custom CSS to change the background color.

    Step 3 – For this example, the CSS would be:

    Step 4 – Save theme options and then refresh your page to view the results.

    Footer

    The Avada footer consists of the widget area and the copyright area. Both of these areas can be configured in theme options on the Footer tab. The widget area consists of 4 total columns, and each column can have its own set of widgets. You can select to show 1, 2, 3 or 4 columns in the footer widget section, whichever column width you choose will allow the widget area to stretch the full width of the column. Footer widgets are added in the widget section of your admin. The following sections will cover each of these aspects of the footer that are listed below.







    Adding Footer Widgets

    The main top portion of the Avada footer is a a widgetized section that can display widgets in 1-4 columns. Widgets add various content or features to your site. They can be added, removed, and rearranged in the WordPress Administration Appearance > Widgets panel.


    To Add Widgets To The Footer, Follow The Steps Below.

    Step 1 – First make sure footer widgets are set to show, navigate to Appearance > Theme Options > Footer and check the “Footer Widgets” box. Also set the footer columns.

    Step 2 – To add widgets, Navigate to Appearance > Widgets

    Step 3 – You will see 4 widget sections on the right hand side, Footer Widget 1-4. Your widgets are located on the left hand side.

    Step 4 – Simply drag and drop the widgets you want from the left side into the sliding bar widget sections on the right side. See the screenshot below.

    footer option


    footer widgets

    Sidebars

    Creating Sidebars

    Avada allows you to create an unlimited amount of sidebars. Any sidebar can easily be applied to a page or post by selecting them in our Fusion Options list. It’s a great way to customize each page with a unique sidebar. Please see the steps below to understand how you create a sidebar.


    To Create A Sidebar, Follow The Steps Below.

    Step 1 – Navigate to Appearance > Sidebars and click the “Add New Sidebar” button, give it a name and save it. You can add as many sidebars as you need.

    Step 2 – Once you are done, you need to add Widgets to the sidebar you just created

    Step 3 – Navigate to Appearance > Widgets and find your sidebar on the right side

    Step 4 – On the left hand side you will see all the widgets you can use, simply drag and drop the widget you want into your sidebar on the right hand side

    Step 5 – Make sure you click Save to save the widgets added to your sidebar.

    Page Templates That Can Utilize A Sidebar

  • Default Page Template
  • Contact Page Template
  • FAQ Page Template
  • Side Navigation Page Template
  • Portfolio Page Templates (all variations)
  • Assigning Sidebars

    Any sidebar that you create can be assigned to any page template that accepts sidebars, or for any post. Please see below for information on how to assign sidebars to pages and posts.

    How To Assign A Sidebar To A Page / Post.

    After you have created your sidebar, inserted and populated it with widgets, you need to assign the Sidebar to display on your page or post. On each page is a Sidebar dropdown field in the page options box, select the Sidebar name that you want to show and then Publish the page to save it. Please note: if the page tempalte is set to Full Width, then the sidebar option will not work.

    sidebar

    Adding Widgets

    Avada includes several custom widgets. All widgets are accessed in the Widgets section of the WordPress admin. Widgets can be added to any sidebar, footer column or sliding bar column. Widgets can even be added on pages with the Widgets On Pages plugin (this is a 3rd party plugin that we do not support).There are various fields and settings to choose for each individual widget; all are self explanatory. You can put as many widgets as you want inside of a sidebar or footer/sliding bar column. Please read below for information on how to add widgets.

    To Add Widgets, Follow The Steps Below.

    Step 1 – Navigate to Appearance > Widgets to access the list of widgets and widget sections that they can be added to. The left hand side shows all the widgets you can use. The right hand side shows all the different sections you can add widgets to.

    Step 2 – Simply drag and drop the widget you want into the widget section you want on the right hand side.

    Step 3 – When finished, make sure to click Save in the widget editing box to save the widgets added to your sidebar.

    widgets

    Here Is A Screenshot That Shows The Various Areas Of The Widget Section Described Above.

    footer widgets

    Flickr & Twitter Widgets

    Most of the widgets that come with Avada are the default WordPress widgets do not require any setup. Some of our custom Avada widgets have various options, but all are self explanatory. However the Flickr and Twitter widgets are unique in that they require account setup to display correctly. Please read below for information no how to set each of these widgets up.

    To Setup The Twitter Widget, Follow The Steps Below.

    Step 1 – First go https://dev.twitter.com/apps and sign in with your own twitter ID.

    Step 2 – Click on the “Create A New Application” button.

    Step 3 – Fill out the required fields. The name and description can be anything, it does not have to be a certain name. You can leave the Callback URL field empty.

    Step 4 – After creating the app, click “Create My Access Token” button to generate the necessary codes.

    Step 5 – Then you will see all 4 items you need; consumer key, consumer secret, access token, access token secret.

    Step 6 – Copy and paste each of those items along with your Twitter ID (this is your twitter username) into the corresponding twitter widget fields in “appearance > widgets” of the Avada theme.

    Step 7 – Make sure you click Save, then please wait because Twitter has a 10 minute cache on their end, so changes can take that long to take effect.

    twitter

    To Setup The Flickr Widget, Follow The Steps Below.

    Step 1 – Go to Appearance > Widgets in your admin section.

    Step 2 – Find the Flickr widget and drag it to a sidebar or footer column of your choice.

    Step 3 – Click on “Get Your Flickr ID” link, http://idgettr.com

    Step 4 – Then enter your username in place of username in the field and click “Find” and it will generate your ID.

    Step 5 – Copy and paste the new ID into the corresponding field of the Flickr widget in the admin section.

    Step 6 – The default API key will already be filled in and it will work, but if you wish you can also generate your own by clicking the “Flickr App Garden” link.

    Step 7 – Make sure you click Save, then you’re all done!

    flickr
    Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

    Extras

    Social Icons

    Avada includes a large set of social icons that can be used all throughout the theme. These social icons are a custom font icon so will always be super crisp and not require any images. Using a font icon also allows us to have advanced color options. Social Icons can be used in several different areas and have multiple customization options. The following sections below will cover each of these areas and options to give you a clear understanding of our social icon integration in the Avada theme.

    • Social Media Tab In Theme Options – Links And Icon Sorting
    • Social Media Icon Sorter
    • Social Icons In The Header
    • Social Icons In The Footer
    • Social Share Box
    • Social Links ShortCode
    • Social Links Widget
    • Social Icon Style Options


    Social Media Tab In Theme Options – Links And Icon Sorting

    Social Media Links – The Social Media tab in theme options is where you will insert your custom social media links for each network you want to display. The URL’s you enter on this tab will apply to the social icons in the header, footer or social sharing box. For example, if you want to display the Facebook icon in the header, footer or social sharing box, you need to insert the URL of your Facebook page in the corresponding field. Avada also allows one custom social icon on the social media tab. The custom social icon has to be an image but is beneficial because it allows you to add a network that is not included with the theme.

    Icon Sorting – The Social Media tab in theme options also allows you to manually sort the social icons in the order you wish them to appear. Beside each social network field is a sorting arrow. Use your mouse to drag and drop the field into place. Set the order of icons you desire then click save. The order you set on this tab will apply to all social icons throughout the site: header, footer, social share box, social widget, social links shortcode, person shortcode.

    Social Icons In The Header

    The header social icons options are located in theme options > header tab. The options allow you to set the icons to display boxed or unboxed, set a custom social icon or box color as a whole or individually, set the box radius and tooltip hover position. To display social icons in the header, you need to first select Header design 2-5 because these header designs can accommodate social icons. Social icons can be placed in the top left or top right side of the top header section. Select which side to place them and make sure your custom URLs for the social networks you want to use are filled in on the Social Media tab. Any social network that has a URL inserted on the social media tab will display in the header.


    Social Icons In The Footer

    The footer social icons options are located in theme options > footer tab. The options allow you to set the icons to display boxed or unboxed, set a custom social icon or box color as a whole or individually, set the box radius and tooltip hover position. To display social icons in the footer, first make sure the “Display Social Icons on Footer of the Page” option is checked on the footer theme options tab. Secondly make sure your custom URLs for the social networks you want to use are filled in on the Social Media tab. Any social network that has a URL inserted on the social media tab will display in the footer.


    Social Share Box

    The social share box is designed to share a post, it contains a headline and the social icons that are compatible. Each social icon will share the post title, link and image with any of the social networks selected. The social share box is automatically displayed on each single blog or portfolio post, and can also be used as a short code in the post content field. Both blog and portfolio have the ability to enable or disable the social share box in their own respective theme options section. To select which social networks are used in your social share box, navigate to theme options > social share box tab. Check the box next to the networks you want to display, and ensure you have entered your custom URL for each network on the social media tab. The options also allow you to set the icons to display boxed or unboxed, set a custom social icon or box color as a whole or individually, set the box radius and tooltip hover position.

    Social Links ShortCode

    Social Icons can also be displayed anywhere on a page or post by inserting the Social Links shortcode inside the post content field. Select the social links shortcode element and select your options. The shortcode does not work with the custom URLs inserted in theme options, they have their own custom URL settings inside the shortcode. Enter your custom URLs for the social networks you wish to display. The options also allow you to set the icons to display boxed or unboxed, set a custom social icon or box color as a whole or individually, set the box radius and tooltip hover position. In addition to the social links shortcode, the person shortcode has the same social icon integration options.

    Social Links Widget

    Avada offers a social links widget that can be displayed in any sidebar or footer widget section. Navigate to appearance > widgets and drag the Avada Social Links widget to a widget section. The widget has its own custom URL fields and color options so it does not work with the custom URLs in theme options, they have their own custom URL settings inside the widget. Enter your custom URLs for the social networks you wish to display. The options also allow you to set the icons to display boxed or unboxed, set a custom social icon or box color as a whole or individually, set the box radius and tooltip hover position.

    Social Icon Style Options

    All of the icons that can be displayed throughout the theme allow for custom styling options. All of the various locations of icons (header, footer, social share box, widget, shortcodes) are controlled in theme options globally in their respective sections, and the shortcodes can override theme options when needed. See below for the various style options.

    Social Icons Unboxed

    Social icons can be unboxed which will only show the icon by itself. Choose “NO” for the Social Links Icons Boxed option in theme options or inside the short code.

    Social Icons Boxed

    Social icons can be boxed which will show the icon inside of a boxed background. Choose “YES” for the Social Links Icons Boxed option in theme options or inside the short code.

    Social Icon Custom Icon Color

    Social icons can be any color you wish. You can change the colors of the entire set by inserting one color value, or each icon can have its own unique color with multiple values.

    Social Icon Custom Box Color

    Social icon boxes can be any color. You can change the colors of all the boxes together by inserting one color value, or each box can have its own unique color with multiple values.

    Social Icon Box Radius

    When using boxed social icons, you can set the border radius of the boxes for square corners, rounded corners or insert a high value so the boxes turn into complete circles.

    Social Icon Tooltip Hover Position

    Each social icon will display a tooltip popup on mouse hover. You can set the hover tooltip position for the icons to popup on top, bottom, left or right.

    Custom Font

    Avada allows users to chooose from any of the 500+ Google Fonts, the Stadnard System Fonts, and also allows you to upload a Custom Font. The Custom Font will be applied to the headings and menu. On our demo, we use a custom font called “Museo Slab”, we have the “300″ version which is a paid version, but there is a “500″ version which is free. Click Here To Download Museo Slab 500 Font. Make sure you are selecting the “Museo Slab 500″ version, it is the only one that is $0. Or you can purchase the 300 version for about $17. Below you will find directions for how to use any custom web font. You will need to have the 4 required font files for the Custom font you want to use.


    To Use A Custom Font, Follow The Steps Below.

    Step 1 – First download your custom font and make sure you receive the 4 web font files, .woff, .ttf, .svg, .eot. Each one is needed.

    Step 2 – Navigate to Appearance > Theme Options > Typography Options and you will see 4 Custom Font fields, one for each of the 4 font files listed above.

    Step 3 – Upload the 4 individual font files into the corresponding field by clicking the “Upload” button and selecting each file.

    Step 4 – After you have uploaded all 4 custom font files, the custom font will be set for the headings and menu, and it overrides any of the other settings

    Step 5 – Make sure you click Save to publish your new settings.


    Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen
    custom font

    Retina Ready

    Avada is Retina Ready so the theme will look fantastic on High Resolution displays like the iPad or iPhone Retina devices. The most important thing to understand is that there are two different sets of images/graphics that can be Retina Ready. Please read below and watch our video tutorial to help understand how this process works.

    1. Theme Included Images or Icons: These are the images or icons that are included with the theme. All of the included theme images or icons are Retina Ready out of the box and do not require the user to do anything. They will look super sharp on Retina Ready screens.

    2. User Uploaded Images: The second set of images are called User Images, these are any images that the user will upload into their theme (ex: Blog Post Image). Wether or not the User Images are Retina Ready depends solely on you, the user. The general rule is that a Retina Ready image needs to be 2x the normal size. So if you have an image that is going in a space that is 100px x 100px, you would need to upload a 200px x 200px image. The easiest way to ensure that your User Images are Retina Ready is to use the WP Retina 2X Plugin created by Jordy Meow.

    The WP Retina 2X Plugin For User Images

    This is a fantastic plugin and is the best option for users to ensure their images are Retina Ready. It tells you if the images you are uploading are large enough to ensure Retina Resolution. And it can also convert your current media library to be Retina Ready. It will automatically create the necessary 2x images that are needed for every area of the site, and will warn you if your images are not large enough to be Retina Ready. Please watch our video tutorial below to see how the plugin works.

    Other Images Such As Logos and Favicons

    Some images such as the Logo and Favicons need to be uploaded via Theme Options. We have created the necessary fields to ensure those images are Retina Ready. Users will need to upload the extra files that are 2x the original size. For example, you will need to upload your regular size logo file in the Logo field, then upload the 2x Logo file in the Logo (Retina Version @2x) field. For the logo, you will also need to input the width x height of the original logo size, not the 2x size. This is important and part of the process the browsers uses to display the Retina Ready Images. Please watch our video tutorial below to see how this process works.


    Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

    WooCommerce

    Avada is compatible with WoCommerce and includes full design integration as well as custom shortcodes. To get started with creating your online shop, you need to install the free WooCommerce Plugin. This documenation on using WooCommerce is the very basic information you need to get started. Please take a look at the important links below that have additional information about using WooCommerce.





    1. How To Install WooCommerce And Setup The Default Shop Pages

    Step 1 – Go to your Plugin section of your WordPress admin and click on the “Add New” button at the top of the page.

    Step 2 – Enter “WooCommerce” in the search field and choose the first one called “WooCommerce – excelling eCommerce” and click on “Install Now”

    Step 3 – WooCommerce will install, then click the link that says “Activate Plugin”

    Step 4 – You will then see a WooCommerce Purple Notficication Bar at the top of the plugin page. Click the “Install WooComemrce Pages” button in the purple bar to install all the default pages

    Step 5 – WooCommerce automatically creates the necessary pages. If you need to reassign the pages to different WooCommerce page designations, you can do so in the WooCommerce settings page.

    woocommerce

    2. How To Create Your Products

    Step 1 – Click on the Products sidebar menu and click on “Add Product” button. Enter a name for your product at the top of the page.

    Step 3 – Enter the product description text into the post content field, this will be all the product information.

    Step 4 – The “Product Data” box is where you enter all the product details (price, SKU, shipping, and more).

    Step 5 – The “Product Short Description” box which will be the short intro copy that shows next to your main images.

    Step 6 – Set your main “Featured Image” in the right sidebar Featured Image box. This has to be done for every product.

    Step 7 – To use a gallery of images, insert more images in the “Product Gallery” box.

    Step 8 – Enter your categories in the “Product Categories” box and your Enter your tags in the “Product Tags” box.

    Step 9 – When all your data is entered, click “Publish” and the item will now show on your main shop page.

    woocommerce

    Here Is A Screenshot That Shows The Various Areas Of The Product Page Described Above.

    woocommerce

    3. How To Adjust WooCommerce Catalog Settings For Image Sizes

    WooCommerce includes settings to change the size of product images for catalog, single product and thumbnail images. When you install Avada, each of those settings will be set for the recommended sizes. If your product images are smaller than the image sizes set, then you may see some visual layout issues on the front end shop pages. This is not a bug, it is simply a correlation between the set image sizes vs your product images. It is preferred to upload larger product images to match our recommended image sizes in the WooCommerce settings. However, if this is not possible, you can fix it by changing the WooCommerce image sizes to match your product image sizes and then regeneraing thumbnails using the Regenerate Thumbnails plugin. This is important in having a consistent design/layout. Please see the steps below for how to change the WooCommerce image sizes.

    Step 1 – Click on the WooCommerce sidebar menu item and find Settings area.

    Step 2 – Click on “Catalog” tab at the top of the page. There is a “Catalog, Single Product & Product Thumbnail” image size box at the bottom of the page.

    Step 3 – Catalog Image is for your images on the shop page and for shortcodes. Single Product Image is for your images on the single product pages. Product Thumbnail is for your smaller product thumbnails for widgets.

    Step 4 – If you do not want the image cropped, leave the height field blank.

    Step 5 – When you make changes to the 3 various images sizes and save it, you may need to regenerate thumbnails using the Regenerate Thumbnails plugin

    Step 6 – Install the Regenerate Thumbnails plugin and go to your media section and choose to regenerate your image thumbnails so the larger size will be created.

    Please Note: Your catalog image size and single product image size need to be large enough to fit the size column you want to use. For example: if you want to use a shortcode in a one_half column and have it fill the full space, then you need to have a Catalog Image size of about 500px in width, and your product image needs to be at least 500px.

    woocommerce

    WPML Plugin

    We’ve worked directly with the WPML team to make Avada compatible with the popular WPML plugin. Below you will find documentation their team created for using WPML plugin with Avada. If you’ve purchased WPML and have any questions or issues, please check the links below.

    Translation & RTL

    We provide translation files for you to translate the theme into your language. The translation files Avada.mo and Avada.po are located in the languages folder inside your package. We also include a few languages that are already translated by our wonderful users, find those files in the same location.


    To translate the theme into your language, follow the steps below.

    Step 1 – Edit the Avada.po file using POEdit (you can also use qTranslate or WPML plugin).

    Step 2 – Use the translation field to make replacements.

    Step 3 – From the file menu, save file with your language name it, for example: de_DE.po. It will generate both a .po and .mo file for your translation.

    Step 4 – Next edit wp-config.php located in the root folder of wordpress and define the WPLANG prefix with your language name which should be similar to the translation file name.

    Step 5 – Then go to your server via FTP, navigate to the theme folder and find the “languages” folder, its located at wp-content > themes > Avada > languages.

    Step 6 – Upload the language files in the “languages” folder, then you’re done!

    Using Language Files For Specific Areas

    The language files can also be used if you only want to translate a small portion of the theme, or one specific area. You do not have to translate the entire theme, you can choose what you translate inside the Avada.po file. This is the preferred method for translation.

    Included Language Files With Avada

    We have included several languages already translated. To use one, make sure the language files are in the right location listed above, and then open the wp-config.php file and define the WPLANG prefix with your language name which should be similar to the translation file name. The languages we include are located in “avada > languages” folder.

    Avada is RTL Ready

    Avada is RTL ready and contains all the necessary styles. To use RTL, you have to install an RTL version of WordPress (like arabic or hebrew version), have the proper language files installed in wp-content > themes > avada > languages, and also specify the language in the wp-config file. Once you do that, your site will automatically be in RTL format. In addition, for testing you can also use a language plugin like RTL Tester.

    Help Translate Avada With Transifex!

    To help improve our Avada translations, we have decided to use Transifex, a translation management web application. The best thing about Transifex is the community aspect. You can easily contribute for the language(s) that you know and help make Avada better for the users of each language. Transifex lets us see progress of the translations available for Avada. You can then also contribute by requesting an invite to the language project and use their web interface to complete the translation for missing strings or, review and fix the mistakes of others.Contributing is very easy, go to our project page: https://www.transifex.com/projects/p/avada/ and click on Help Translate Avada button to signup. After signing up, go back to our project page: https://www.transifex.com/projects/p/avada/.

    Contributing A New Language - To contribute a language that is not already available in the list, click on the “Request Language” button and apply to be the coordinator for the language that you want using the dropdown list. After your account is approved, go back and select the language from the list, click on Avada.po link. From the popup box, you can select to upload the .po file that you have already translated locally or click on “View Strings Online” link to use the Web UI. From the Web UI, click on translation mode to translate and review available strings.

    Editing An Existing Language - To contribute to a language that is already available in the list, click on the language name, then click the “Join team” button. Your request will be sent to the language coordinator for joining the team. After your account is approved, go back and select the language from the list, click on Avada.po link. From the popup box, you can select to upload the .po file that you have already translated locally or click on “View Strings Online” link to use the Web UI. From the Web UI, click on translation mode to translate and review available strings.

    CSS, Javascript & Credits

    CSS Files:

    • all.css – Default CSS
    • prettyPhoto.css – Located in the css folder of the theme. CSS for lightbox.
    • style.css – Placeholder stylesheet
    • flexslider.css – CSS for the Flex Slider
    • ie.css – CSS to combat the quirks of Internet Explorer
    • media.css – CSS for the responsive framework

    Javascript Files:

    • js/jquery.cycle.lite.jsjQuery Cycle is used for slider shortcode.
    • js/jquery.prettyPhoto.jsjQuery PrettyPhoto is used for the lightboxes.
    • jquery.carouFredSel-6.2.1-packed.js – carousel javascript
    • jquery.fitvids.js – responsive videos javascript
    • jquery.flexslider-min.js – flexslider slider javascript
    • jquery.isotope.min.js – portfolio filtering / animation javascript
    • main.js – main file / avada code that utilizies all the the other javascript plugins
    • modernizr.js – browser features detection script
    • options-custom.js – custom script that fills in the colors in the theme options
    • respond.min.js – another browser feature detection script
    • upload.js – upload script for metaboxes
    • gmap.js – script for google maps
    • jquery.infinitescroll.min.js – script for allowing infinite scroll on blog
    • jquery.hoverIntent.minified.js – script for determining users intent with mouse

    Sources & Credits:

    Proudly Serving Over 80000 Satisfied Users!