General

06/15/2016

We would like to thank you for purchasing Avada! We are very pleased that you have chosen Avada for your website, you will not be disappointed! Before you get started, please be sure to always search our Documentation and Knowledgebase, and also watch our Video Tutorials. The large search field at the top of each page allows you to quickly and easily search through our resources to find answers. 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 follow this link to see our section on WordPress to help you get started.

WordPress Information

11/02/2016

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. Below are all the useful links for WordPress information.


Requirements For Avada

10/17/2016

To use Avada, please make sure you are running WordPress 4.6 or higher, PHP 5.6 or higher, and MySQL 5.6 or higher (for legacy environments also PHP versions 5.3.x will work but it is recommended to be on at least PHP 5.6). We have tested it with Mac, Windows and Linux. Below is 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 for 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 WP Engine or Blue Host for all your hosting needs.

Recommended PHP Configuration Limits

Many issues that you may run into such as; white screen, demo content fails when importing, empty page content with Fusion Builder and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

  • max_execution_time 180
  • memory_limit 128M
  • post_max_size 32M
  • upload_max_filesize 32M

How To Verify Your Current PHP Limits

IMPORTANT NOTE – This feature is only available in Avada 3.8 or higher.

You can verify your PHP configuration limits in the System Status tab in the Welcome Screen area. Look in the left sidebar for the Avada > System Status tab. You can also check them by installing a simple plugin found here. In addition, you can always contact your host and ask them what the current settings are and have them adjust them if needed. Please note though that many hosts will try to keep the PHP limits low without reason. However you are paying for it, and therefore should be getting your money’s worth.

Recommended Hosting Companies

bluehost_docs
wpengine_docs

What’s Included

10/28/2016

When you purchase our theme from ThemeForest, you can download the Avada files via the ‘Downloads’ tab on your ThemeForest account. When you download Avada, you can either choose the ‘All Files & Documentation’ option or the ‘Installable WordPress File Only’ option. The former includes the theme files and supporting documents, while the latter only includes the theme’s installable WordPress file. The latter is recommended when you’re only looking to update/install the theme manually.

Aside from the digital files you get when you purchase the theme, you also obtain exclusive services that will help you as you use the theme. Below is a full list of everything that is included when you purchase the theme and download all the included files.

How To Download Avada From ThemeForest

Step 1 – Login to your ThemeForest account and navigate to the ‘Downloads’ tab.

Step 2 – Locate your Avada purchase, and click the Download button. Choose between ‘All Files & Documentation’ or ‘Installable WordPress File Only’.

Included Files From Your Themeforest Purchase

  • Avada.zip – Located inside the Avada Theme folder, this is the installable WordPress file you’ll need to install or update Avada manually.
  • Avada-Child-Theme.zip – Located inside the Avada Theme folder, this is a child theme you can use to make changes to Avada’s core theme files.
  • Extras Folder – Contains the developer documentation for Layer Slider & Revolution Slider. These are not ours, but the plugin developers’ documentations.
  • Languages Folder – This contains all the language files used to translate Avada, Fusion Core and Fusion Builder. You can also download them from here.
  • PSD Folder – This contains all the layered PSD files of the Classic demo for those developers or designers who want to customize the design further.

Guided Tour

06/15/2016
IMPORTANT NOTE – Some features outlined in this video is only available in Avada 3.8 or higher.

Welcome to Avada! If this is your first time using the Avada theme, please take a moment to watch our guided tour video linked below. The video briefly covers a general overview of the theme; including Avada’s key features, navigating the theme, and how to set basic parts of your website. Please click on the button below to watch our Guided Avada Tour video.

Click Here To Watch The Guided Tour – Watch It In HD & Fullscreen

Avada Theme Support

06/15/2016

All of our items come with 6 months of included support and free lifetime updates for your theme. Once the 6 months of included support is up, you have the opportunity to extend support coverage up to 6 or 12 months further. If you choose to not extend your support, you will still be able to submit bug reports via email or item comments and still have access to our online documentation knowledge base and video tutorials.

Envato clarifies item support here http://themeforest.net/page/item_support_policy

We have an advanced, secure ticket system 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, we suggest enlisting the help of a developer.

How To Start Receiving Support

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 – Once you are signed up, you need to sign into our support center with your new account.

Step 3Follow these steps before you submit a support ticket.

Step 4 – To create a new ticket, visit this page

Click Here To Setup Your Support Account

How To Locate Your Purchase Code

Extending And Renewing Envato Item Support

06/15/2016

On September 1st, 2015, Envato changed their terms and conditions for item support and introduced paid item support for Themeforest and CodeCanyon. When you purchase a theme, you will be granted an inclusive 6 months of hands on support for that item. When this expires you can choose to extend your item support for a further 6/12 months at a fee. Please continue reading below to learn more about item support, or click the button below to read Envato’s ‘What Is Item Support?’ article.

Click Here To Read Envato’s ‘What Is Item Support?’ Article

How To Renew or Extend Support

You are eligible to renew or extend your support subscription if you have less than 6 months support remaining and the author is still supporting the item. The cost of purchasing support can vary according to the different periods of your subscription. For example, extending your support subscription while it’s still active costs less than renewing it when it has expired. To learn more about this, please read Envato’s ‘Extending and Renewing Item Support’ article found here.

Step 1 – Login to your ThemeForest account and go to the Downloads tab.

Step 2 – Locate your Avada purchase. On there, you’ll see how many months of support you have remaining, and beside it there’s an ‘Extend Now’ link. Click here to view an example.

Step 3 – Click the ‘Extend Now’ link, and it will redirect you to the Avada Theme’s item page.

Step 4 – On the right hand side, click the ‘Extend Now and Save’ button.

Step 5 – Once you click the ‘Extend Now and Save’ button, you’ll be redirected to the checkout page. Confirm your payment details and follow the on screen prompts to finish purchasing the extension.


What Will Happen If I Do Not Renew The Item Support?

The only thing that changes is that you will not be granted access to hands on support. You will however continue to receive theme updates that contain bug fixes, patches and new features and access to our online documentation, help files, video tutorials and the community forum.

When Can I Renew The Item Support?

There are 3 scenarios for when you can extend or renew item support; At the time of purchase, during your support period, and after your item support has expired.

At the time of purchasing the item. This will cost 30% of the list price, or 37.5% on the item price.

  • Support Upgrade – At the time of purchasing the item. This will cost 30% of the list price, or 37.5% on the item price.
  • Support Extension – Extend item support before it expires. This will cost 50% of the list price, or 62.5% on the item price.
  • Support Renewal – Renew item support once it has expired. This will cost 70% of the list price, or 82.5% on the item price.

Grandfathered Support

Grandfathered Support applies to any customer that will have purchased Avada PRIOR September 1, 2015. This entitles qualifying customers to continue receiving hands on support via our system for as long as we continue to develop and maintain Avada.

Click Here To Read More About Our Grandfathered Support

Grandfathered Support

06/15/2016

Envato started a paid initiative for item support on September 1st, 2015. Any item purchased includes 6 months of support with paid options to extend. This new policy applies to all purchases, past or present. ThemeFusion is fully committed to our customers and took the initiative to introduce Grandfathered support for any purchases made before September 1st, 2015. Purchases made before September 1st, 2015 are eligible for our Grandfathered support policy. Purchases made after September 1st, 2015 must follow the new paid support initiative introduced by Envato. It is important to note that paid support is an Envato initiative, while Grandfathered Support, with the agreement of Envato, is an initiative that we (ThemeFusion) created.

What Is Grandfathered Support?

Grandfathered Support is simply a term we are using for purchases made before September 1st, 2015. The level of support given is the same as we have always provided. Grandfathered Support applies to any customer that purchased Avada BEFORE September 1, 2015. This entitles qualifying customers to continue receiving hands on support via our system for as long as we continue to develop and maintain Avada.

IMPORTANT NOTE – Grandfathered support is only valid on sites that are using a license purchased before September 1, 2015.

Envato’s System Versus ThemeFusion’s System

It is important to note that ThemeFusion’s support system does not synchronize with Envato’s system. If you are qualified for Grandfathered Support, when you view your account on ThemeForest you will most likely see a “Support Expired” badge because you were only eligible for support 6 months after the purchase date. This is how Envato’s system works because they do not have a Grandfathered system. ThemeFusion’s support system is where you will receive Grandfathered support. Simply login to our support site and you will be able to access all support resources and our ticket system.

Do I Qualify For Grandfathered Support?

To qualify for Grandfathered Support, you need to have purchased a copy of the Avada Theme from ThemeForest before September 1st, 2015. Continue reading below to learn how to verify your purchase date.

How To Verify Your Purchase Date

To know if you’re qualified for Grandfathered Support, you must first verify your purchase date. Please see below for instructions on how to view the exact purchase date of your Avada Theme license.

Step 1 – Login to your ThemeForest account and go to the Downloads tab.

Step 2 – Locate the Avada theme copy you’d like to verify, then download the License Certificate and Purchase Code file. You can choose to download either the .PDF or the .TXT file.

Step 3 – Inside the License Certificate and Purchase Code file, you’ll find your Purchase Date information for that particular copy of Avada.


How Do I Make A Support Account

Many of you already have a support account and can login on our home page. If you do not have an account yet, please follow the steps outlined in this post to get setup.

I Already Have An Account I Need To Setup An Account

Register Your Purchase Via Token Key

10/19/2016
IMPORTANT NOTE – The Token Registration method is only applicable for Avada version 5.0+

As of Avada version 5.0 the 3-step Product Registration process has been replaced with a new Token Registration method. This change was precipitated due to Envato soon deprecating their old API in favor of new and improved API management. This new setup allows for a faster, more reliable and secure setup. Token Registration will be required to receive automatic updates, Avada demos and premium plugins (to install and update the Revolution and Layer Sliders).

How Does This Affect Users Updating To Avada 5.0 From Avada 4.0.3 and Older?

If you had previously registered your purchase to receive auto theme updates, in Avada 4.0.3 or older, you will still see the update notice in the WP Dashboard > Updates section of your WordPress Dashboard when Avada 5.0 is released. However, once you have updated to Avada 5.0 you will have to re-register your product using the new Token Registration method to receive automatic updates, Avada demos and premium plugins (to install and update the Revolution and Layer Sliders).

Click Here To Read Our Auto Updates Article Click Here To Learn How To Manually Update The Theme

Generating A Personal Token

Please follow the instructions provided below closely and carefully. Make sure to also read all the notices that you’ll encounter throughout the process. If you encounter an error when entering your Personal Token into the Product Registration field, please see our ‘Invalid Token?’ section below.

Registering The Theme Gives You Access To The Following:
IMPORTANT NOTE – You must be logged into the ThemeForest account that was used to purchase the Avada theme.

How To Generate A Personal Token

Step 1 – Login to the ThemeForest account that was used to purchase the Avada theme.

Step 2 – Click on the Generate A Personal Token link provided to be directed to the Token Creation page.

Step 3 – Enter a name in the ‘Token Name’ field. You can use any name that will be easy to remember and associate, for example: Avada.

Step 4 – Under the ‘Permissions Needed’ section, make sure the following checkboxes are checked:

  • View Your Envato Account Username
  • Download Your Purchased Items
  • List Purchases You’ve Made
  • Verify Purchases You’ve Made

IMPORTANT NOTE – By not checking all four checkboxes may cause your Personal Token to invalidate. Any other checkboxes aside from the four mentioned above are optional.

Step 5 – Check the ‘Terms and Conditions’ checkbox, then click ‘Create Token’. You’ll now see the ‘Success!’ page with your Personal Token displayed.

Step 6 – Copy and save your Personal Token to a safe place and log into your website’s Avada > Product Registration tab and paste your Personal Token into the provided field. Click the ‘Submit’ button to verify.

Step 7 – If you see a green check mark beside your Personal Token, you have successfully registered your product. Having issues? Check our ‘Invalid Token?’ section.


Managing Your Personal Tokens

Make sure that you save and store any tokens that you generate, in a safe place. Copy them to a plain text file or word document and store in a secure folder on your PC/Mac. Envato displays a notice of acknowledgement that you’ve copied your Personal Token key and have stored it safely and that you understand that if you lose it, you’ll need to re-generate a new token. This notice also informs you that Envato isn’t going to store this key for you because of security reasons. Once you check the checkbox, click ‘Woohoo! Got it’ to be redirected to the ‘My Apps’ page. Here, you can edit your Personal Tokens’ permission settings or delete them. You can also view the applications you’ve registered or granted access to on this page.


IMPORTANT NOTE – Be careful not to delete Personal Tokens that are currently in use. Deleting a Personal Token is irreversible and will render it invalid.

Invalid Token?

If you encounter the error above after entering your Personal Token into the Product Registration field, you may have missed a step in generating your Personal Token. Please continue reading below for the likely causes of why your Personal Token may be invalid. If you’ve checked all the likely causes below and you’re still getting the ‘Invalid Token’ error, please do send us a support ticket so our team can have a look.

1.) The Token Doesn’t Have Access To The Required Permissions

When generating a new token, make sure the following Permissions are checked; View Your Envato Account Username, Download Your Purchased Items, Verify Purchases You’ve Made and List Purchases You’ve Made. We require these permissions in order to verify if your Avada purchase is valid and to be able to download automatic updates for the theme. If you’re already using an existing Personal Token, you can go to your ‘My Apps’ page and edit the token’s permissions from there. Simply click the ‘Edit’ button and check the required permissions.

2.) Missing Characters When Copied From ThemeForest

When copying your Personal Token key, make sure you don’t miss any characters. It’s a simple thing to miss, but it still happen frequently. If you’re copying your Personal Token from a text editor program like MS Word or Notepad, make sure you don’t copy any extra characters such as spaces, as well.

3.) The Personal Token In Use Has Been Deleted

Make sure the Personal Token you’re using still exists in your ‘My Apps’ page. If it has been deleted or no longer exists, you’ll need to generate a new Personal Token and use that in your Product Registration instead.

4.) Token In Use Is Registered Under The Wrong ThemeForest Account

If you have access to multiple ThemeForest accounts, make sure you’re logged into the correct account that you’ve purchased Avada with. Generating a Personal Token using an account that doesn’t have Avada purchased will render the token invalid when used in Avada’s Product Registration field.

Fallback Methods

If you’re experiencing difficulty with downloading and installing the offloaded plugins and demos, then please see the fallback methods below.

1.) Contact Your Hosting Provider First

If you’re experiencing issues with Token Registration and are certain that you followed the new Token Registration process fully, please contact your hosting provider and have them check to see if they are blocking our server. (These URL’s must not be blocked :: api.envato.com | https://theme-fusion.com | https://updates.theme-fusion.com) If your hosting provider confirms that they are not blocking our service, please submit a support ticket to our team so that we can investigate this further.

2.) Fallback Method for Premium Plugins

If Token Registration continues to fail and you can’t install the premium plugins, an alternative is to go to your Support Desk, then switch to the Product Registration tab. In the provided field, enter your Personal Token Key and click ‘Submit Code’. You’ll see a success notification and buttons to download the Revolution Slider and Layer Slider plugins.

3.) Fallback Method For Demos

For an alternative method to download and install the Avada Demos, please see our Alternate Demo Import Method help file.

Register Your Purchase For Avada Version 4.0.3 or Lower

10/19/2016
IMPORTANT NOTE – This Registration Process is for Avada version 4.0.3 or lower only. If you’re on Avada version 5.0 or higher, please follow this Registration Process.

If you’re on Avada version 4.0.3 or lower, you will need to fill out three fields to register your purchase. These fields are your ThemeForest Username, Purchase Code and an API Key. To learn how to go through this process, please continue reading below. If you’re on Avada version 5.0 or higher, then please follow this Registration Process, instead.

How To Register Your Purchase

Step 1 – Navigate to the Avada > Product Registration tab on your WordPress admin sidebar.

Step 2 – Before registering your purchase, you need to get your ThemeForest Username, your Purchase Code, and your unique API Key. Click on the respective links here to learn how to retrieve each of them.

Step 3 – Once you’ve retrieved your ThemeForest Username, your Purchase Code and your unique API Key, please enter them in their respective fields.

Step 4 – Once finished, click ‘Submit’. You’ll see a success message when your registration is complete.


ThemeForest Purchase Code

06/15/2016

Themeforest provides you with a purchase code for each item you purchase. This purchase code is used for verification so you can receive theme support and also fully register your product. Please read below for instructions on how to download your purchase code.

How To Download Your Purchase Code From ThemeForest

Step 1 – Log into your ThemeForest account and click your username in the top right corner to access the dropdown. Select the “Downloads” link.

Step 2 – Find the Avada Purchase in the list of items you have bought.

Step 3 – Click the “Download” button to activate the dropdown menu. Select to download the license certificate and purchase code as a PDF or Text file. Open the file to find the purchase code. Example Purchase Code: 91d36x28-ddd5-4q70-a109-c9wc8aac6a16

Licensing

06/15/2016

When purchasing Avada from ThemeForest, you have two licensing options. The Regular License, and the Extended License. The billing, licensing terms and process is purely handled by Envato (the company who owns ThemeForest), and we have no control over these aspects. To learn more about what each License is for and which one to purchase, continue reading below.

Click Here To View License Information Buy Another Avada license!

Common Questions

1. If I need to use Avada on a second site, do I need a second license?

Yes. One purchase of Avada allows you to use the theme on one finished site. If you need to use it on a second site, it requires you to make a second license purchase.

2. Can I use Avada on a test site, then move it to a live site when finished?

Yes, you can. You can keep the theme on a test site to build it, then move it to the live site once you’re finished.

3. Can I keep a test site and a live site with one Regular License purchase?

According to the licensing rules set by Envato, this is not allowed. If it is installed in two places permanently, then it requires two licenses.

Welcome Screen

10/19/2016
IMPORTANT NOTE – This feature is only available in Avada 3.8 or higher.

In Avada 3.8, we’ve implemented a new welcome screen unique to Avada. In this welcome screen, you can easily find important options split into tabs, such as Product Registration, Support links, Demo Installations, A Handy System Status, and Included Plugins. You can also access our Fusion Theme Options under this Avada tab. Continue reading below for more information on how to navigate our new welcome screen, as well as everything you need to know to about it!

  • Product Registration tab – This tab is where you can register your purchase via Token Registration to receive auto updates, install included plugins and import demos.
  • Support tab – This tab is where you can find links to our support system; such as articles and our support ticket form. You’ll also find our Avada Patcher here.
  • Install Demos tab – This tab is where you can preview our pre-made demos, and import them to your own copy of Avada.
  • Plugins tab – This tab is where you will find Avada’s required and included plugins.
  • System Status tab – This tab is where you will find the different System Status information of your site.
  • Fusion Theme Options tab – This tab is where you will find the Fusion Theme Options, where you can set a majority of Avada’s global options.

Product Registration tab

IMPORTANT NOTE – The Token Registration method is for Avada version 5.0 or higher only. Read about the old Product Registration here.

Under the Product Registration tab, you’ll find the new Token Registration method for Avada 5.0 or higher. The Token Registration requires 1 Token Key to register your purchase. Once you’ve registered your product, you can then access auto-updates, install our included plugins, as well as import our various available demos. To learn more about Token Registration and how to create a token key, please click the button below.

Click Here To Learn More About Token Registration

Support tab

IMPORTANT NOTE – The Avada Patcher feature is only available in Avada 4.0 or higher.

Under the Support tab, you will find the Avada Patcher which allows you to apply available patches or bug fixes. To learn more about the Avada Patcher, please click the button below. Also on this tab, you’ll find all the links you need to learn more about the theme, how to solve issues you might run into, and how to get in contact with our Support Team. To gain access to our support forum and resources, you must first register your purchase.

Click Here To Learn More About The Avada Patcher

Install Demos tab

IMPORTANT NOTE – Before you can import Avada demos, you must first register your purchase via Token Registration.

Under the Install Demos tab, you will find all the Avada theme demos that we’ve created to get you started. New demos are constantly being added as the theme is updated. Before you can import our demos, you need to register your purchase first. Also, please make sure all required plugins are installed and activated before importing a demo.

Plugins tab

IMPORTANT NOTE – The Fusion Builder plugin is only available on Avada version 5.0 or higher. Before you can import Avada’s included premium plugins, you must first register your purchase via Token Registration.

Under the Plugins tab you will find Avada’s required plugins, the Fusion Core plugin and the Fusion Builder plugin. These two plugins need to be installed and activated for the theme to work properly. Here you’ll also find our included premium plugins, which are Revolution Slider and Layer Slider. You’ll need to register your purchase via Token Registration to install these premium plugins. Lastly, you can also install and activate Avada’s recommended plugins here such as Layer Slider, WooCommerce, Events Calendar, etc. You don’t need to register your purchase to download these.

Click Here To Learn More About The Fusion Builder Plugin

System Status tab

Under the System Status tab, you will find the various system status information of your website. You can also generate a System Report which will give you a full summary of your system status information. You can also choose to copy this report and include it in any support tickets so our support team can find a solution for your issue quicker.

Click Here To Learn More About The System Status

Fusion Theme Options tab

The Fusion Theme Options tab is located under the Avada tab in your admin sidebar. This is where you will find all options and settings for the theme. The Theme Options section is organized into tabs and sections so you can easily find what you’re looking for.

Before You Submit A Ticket

06/15/2016

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

Please Check The Following Before You Create A Ticket

Click Here To Submit A Ticket

Hosting

06/15/2016

Our themes require that you have WordPress installed and running on a web hosting account. We recommend you use a host trusted by WordPress that has quality products and service. Many users ask us who we recommend and we have two companies to share with you. Please note that while we receive a small commission if you choose one of the companies below, our recommendation is based on the quality of their products and is not based on compensation.

wpengine_docs
bluehost_docs

Theme Customization

07/11/2016

Our support covers getting setup with the theme, theme related questions and bugs or issues that occur when using the theme. Customization can be any work you need done to the theme that is not covered by the scope of our support. In most cases, this is anything that falls outside of the options the theme offers. We work with two amazing customization partners to choose from. Both have their own unique offerings and can provide the services you need to customize your theme. Click the button below to go to the theme customization page.

View Our Theme Customization Page

Support Desk

10/19/2016

We’ve added a new Support Desk to your ThemeFusion account that will help you track and manage your support details. The Support Desk has 4 tabs; the Tickets tab, the Purchase Codes tab, the Product Registration tab and the Profile tab. Please view below to learn more about the Support Desk and the different tabs within it.

How To Access The Support Desk

Step 1 – Go to the ThemeFusion website.

Step 2 – Navigate to the ‘Support’ page and sign in with your login credentials.

Step 3 – In the Support page sub-menu, navigate to the ‘My Account’ page.

Step 4 – Once you’re on the ‘Support Desk’ page, you’ll see 4 tabs; the Tickets tab, the Purchase Codes tab, the Product Registration tab and the Profile tab.


Tickets Tab

This tab allows you to view your ticket history. On this tab, you’ll see the status, title and date for each of your ticket. Your support tickets are organized from oldest to newest and each page displays 25 tickets at a time.

IMPORTANT NOTE – You cannot reply to tickets here, you can only view their status. To reply to a ticket, please reply to it via the assigned email.

STATUS DEFINITIONS
  • Staff Replied – Your ticket will show this status when a support representative has replied to your ticket or if it has been resolved and closed.
  • In Progress – Your ticket will show this status when your ticket hasn’t been replied to by a support representative yet, or if you’ve replied to the ticket last.

Purchase Codes Tab

This tab allows you to view and add purchase codes to your account. To learn how to get your purchase code, please read our ThemeForest Purchase Code article here.

How To Add A Purchase Code

Step 1 – Retrieve the purchase code you’d like to add. To learn how to retrieve your purchase code, please read our ThemeForest Purchase Code article here.

Step 2 – Enter the purchase code in the provided Field, then click the ‘Submit Code’ button to submit it.

Step 3 – Once you click the ‘Submit Code’ button, your purchase code will be verified. If the purchase code is valid, you will see it successfully added under the ‘Purchase Code Registered’ section.


Product Registration Tab

This tab allows you to enter your Product Registration key as a fallback method if registration through the theme fails. It’s important to register your purchase to receive auto updates, avada demo import and premium plugins. To learn more about registering your purchase, please read our Register Your Purchase article here.

How To Add A Product Key

Step 1 – Generate a Personal Token from Envato. To learn how, please closely follow the instructions outlined on the Product Registration tab, or in the Register Your Purchase article here.

Step 2 – Once you’ve generated a Personal Token, enter it into the field provided on this tab. Once done, click ‘Submit Code’.

Step 3 – If successful, you’ll see a success message saying that your Personal Token is valid. Download buttons for both premium plugins (Revolution Slider and Layer Slider) will then be available for you to click.


Profile Tab

This tab allows you to edit your account’s details. You can change your name, contact info, and biographical info. Finally, you can change your password and your assigned email address where we send support ticket replies.


Installation

06/15/2016

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. There are two ways to install Avada, via WordPress or via FTP. Click here for the WordPress method video tutorial, and here for the FTP method video tutorial. 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’ documentations.
  • Language Folder – This contains all the language files that are fully or partially translated.
  • PSD Folder – This contains all the layered PSD files for those developers or designers who want to customize the design further.

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

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

WordPress Installation

10/13/2016
IMPORTANT NOTE – The Welcome Screen is for Avada versions 3.8 or higher.

There are two ways you can install the Avada theme. You can choose to install it via WordPress, which is what will be outlined in this article, or via FTP. Before you can install Avada, you need download the necessary theme files from your ThemeForest account. Continue reading below for more information.

Downloading Avada Theme Files From ThemeForest

If this is your first time downloading the theme from ThemeForest, we recommend downloading the Full Theme Package to receive additional files such as Revolution and Layer Slider documentation and the classic demo .PSD files only. If you’ve downloaded the Full Package before and already have these files, then you can just the WordPress Installable File which is smaller in size.

How To Download The Avada Theme Files

Step 1 – Login to your ThemeForest account and navigate to your ‘Downloads’ tab and then locate your Avada theme purchase.

Step 2 – Click the ‘Download’ button and choose to either download the ‘Installable WordPress file only’, which is just the WordPress installable file, or choose to download ‘All Files & Documentation’ which is the full Avada theme package.

Step 3 – For instructions on how to install the theme via WordPress, click here.


How To Install Avada via WordPress

Step 1 – Navigate to WordPress Dashboard > Appearance > Themes.

Step 2 – Click the ‘Add New’ button on top of the page, then the ‘Upload Theme’ button.

Step 3 – Click ‘Choose File’ and find the theme files you’ve just downloaded. If you’ve downloaded the installable WordPress file, then you do not need to unzip the file. If you’ve downloaded the Full Theme Package, you have to unzip the master Avada.zip file, therein you will see a secondary Avada.zip file, this is the one you select to install.

Step 4 – Once the file has uploaded, to activate Avada go to WordPress Dashboard > Appearance > Themes and click the Activate button.

Step 5 – Once you activate Avada, you will be redirected to our Welcome Screen. You’ll find a prompt to install Avada’s required plugins, Fusion Core plugin and the Fusion Builder plugin. Click here to learn how to install Avada’s required plugins.

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


Troubleshooting

1.) ‘Are You Sure You Want To Do This?’ Error

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 that is set by your host. If this happens, please install the theme via FTP or contact your hosting company and ask them to increase the limit.

FTP Installation

10/13/2016
IMPORTANT NOTE – The Welcome Screen is for Avada versions 3.8 or higher.

There are two ways you can install the Avada theme. You can choose to install it via FTP, which is what will be outlined in this article, or via WordPress. Before you can install Avada, please download the necessary theme files from ThemeForest first. Continue reading below for more information on these.

Downloading Avada Theme Files From ThemeForest

If this is your first time downloading the theme from ThemeForest, we recommend downloading the Full Theme Package to receive additional files such as Revolution and Layer Slider documentation and the Avada classic demo .PSD files only. If you’ve already downloaded the Full Packages, then you can just use the WordPress Installable File.

How To Download The Avada Theme Files

Step 1 – Login to your ThemeForest account and navigate to your ‘Downloads’ tab and then locate your Avada theme purchase.

Step 2 – Click the ‘Download’ button and choose to either download the ‘Installable WordPress file only’, which is just the WordPress installable file, or choose to download ‘All Files & Documentation’ which is the full Avada theme package.

Step 3 – For instructions on how to install the theme via FTP, continue reading below.


How To Install Avada Via FTP

Step 1 – Log into your server installation via FTP. You can use software such as Filezilla for this.

Step 2 – If you have downloaded the Full Theme Package from ThemeForest, please unzip the master Avada.zip file and then unzip the secondary Avada.zip file which will give an Avada folder.

Step 3 – Upload the extracted Avada folder to the wp-content > themes folder on the server. Make sure the folder name is -> ‘Avada’.

Step 4 – Log in to your WordPress Dashboard and navigate to Appearance > Themes and clicking the ‘Activate’ button, for the Avada theme.

Step 5 – Once activated, you will be redirected to our Welcome Screen. You’ll see a prompt to install Avada’s required plugins, which is the Fusion Core and Fusion Builder plugins. Click here to learn how to install Avada’s required plugins.

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


Plugin Installation

10/18/2016
IMPORTANT NOTE – The Fusion Builder plugin is only available in Avada version 5.0 or higher.

Avada requires two essential plugins to operate. These plugins are the Fusion Core plugin and the Fusion Builder plugin. Aside from these two, Avada also comes with two premium plugins; the Revolution Slider, and the Layer Slider. We also recommend several free plugins that we use on our demos, but these aren’t required and you can install them only when necessary. All these plugins can be accessed through our Avada tab.

Avada’s Required, Included & Recommended Plugins

It’s important to note the differences between Avada’s required, included and recommended plugins. Required plugins, like the Fusion Core and Fusion Builder, are very important and must be installed and activated at all times for Avada to work properly. Avada’s included plugins are Premium Plugins that are bundled with the theme. Before you can install both required and included plugins, you must register your purchase first. Lastly, there’s Avada’s recommended plugins which are plugins that we use in our demos and are fully integrated with Avada. You can choose not to install these plugins if you’re not going to use them.

Avada’s Required Plugins

These plugins must be installed and activated at all times for Avada to work.

  • Fusion Core – This plugin is Avada’s companion plugin.
  • Fusion Builder – This plugin powers the new Fusion Builder.
Avada’s Included Plugins

These plugins are premium plugins that are bundled with Avada.

  • Revolution Slider – This is a premium slider plugin developed by ThemePunch.
  • Layer Slider – This is a premium slider plugin developed by Kreatura.
Avada’s Recommended Plugins

These plugins are used on our demos and are optional to install/activate.

  • 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.
  • The Events Calendar Plugin – This plugin is free but also has a Pro version. If creating a site that showcases events, we recommend using The Events Calendar plugin.

Plugin Installation & Update Notifications

IMPORTANT NOTE – You must register your purchase via Token Registration to access Avada’s required and included plugins.

How To Install Plugins

Step 1 – To access Avada’s required plugins and included Premium plugins, you must first register your purchase via Token Registration. For Avada’s recommended plugins, you don’t have to register your purchase to install and activate them because they are 3rd party plugins.

Step 2 – Navigate to the Avada > Plugins tab. Here you’ll find Avada’s required, included and recommended plugins.

Step 3 – To install a plugin, simply click the ‘Install’ button. Wait for it to finish installing and activating, then click the ‘Return to Required Plugins Installer’ link to return to the Plugins page.

Step 4 – When installing Avada’s required plugins, you must follow a specific order. Please read our ‘Fusion Builder Plugin’ article to learn more about this.

Step 5 – Repeat steps 2 – 3 until you’ve installed and activated all your desired plugins.


How To Update Plugins

Step 1 – To access Avada’s required plugins and included Premium plugins, you must first register your purchase via Token Registration. For Avada’s recommended plugins, you don’t have to register your purchase to install and activate them because they are 3rd party plugins.

Step 2 – Navigate to the Avada > Plugins tab. Here you’ll find Avada’s required, included and recommended plugins.

Step 3 – You’ll see an update notification on plugins that have an update available. This notice will be similar to the image on the right.

Step 4 – Click the ‘Update’ button to apply the update.

Step 5 – With regards to Avada’s included Premium plugins, please keep in mind that updates for included plugins are only available when the Avada theme is updated. If you’d like to get instant updates as they are released, you will need to purchase your own plugin license. Please read our ‘Updating Premium Plugins’ article to learn more about this.

Step 6 – Repeat steps 2 – 4 until you’ve updated all your desired plugins.


Troubleshooting

1.) Why Can’t I Install The Required & Included Plugins?

If the ‘Install’ button on the required plugins (Fusion Core and Fusion Builder) and on the included plugins (Revolution Slider and Layer Slider) are grayed out, this is because you have to register your purchase via Token Registration first. Once you’ve registered your purchase successfully, you’ll be able to install and activate these plugins.

2.) When I Activate The Plugins The Site Crashes

This will be due to your servers PHP configuration limits and will require that these configurations limits be increased. For most, these limits can be increased without having to contact your hosting provider, however, in rare cases some hosts can restrict manual intervention and that will require you to contact your hosting provider to increase the limits for you. Here is a detailed help file explaining how to update the PHP configuration limits.

3.) How Do I Update The Premium Sliders?

Avada does include updates for our premium slider plugins (Revolution Slider and Layer Slider) however, this does not mean that you will receive an individual license for these Premium Sliders. Due to Envato’s licensing rules, we can only issue updates for these plugins when we issue a theme update. This also ensures that we fully test the plugin to make sure there are no critical bugs that will conflict with our own update.

How To Update The Theme

10/12/2016
IMPORTANT NOTE – This article has been updated to reflect changes made for Avada version 5.0.

There are two ways to update your theme. The first method is to use our Auto Update feature which requires you to register your purchase via Token Registration. The second is the upload the theme manually, either via FTP or WordPress. This is the traditional method and this method requires you to download the theme files from ThemeForest first. Before you update, it’s best practice to always check our Important Update Information article which is updated for each new version, and to make a full backup of your theme folder, files and entire database, just in case.

Important Update Information

Before you update to a new version of the theme, it’s important to always check our Important Update Information article. this article is regularly updated and changes every time a new version is released. Please click the button below to read our Important Update Information article.

Click Here To View The Important Update Information

Updating To Avada 5.0 From Avada 4.0.3 Or Older?

For Avada 5.0, significant and positive changes have been made to Product Registration. The old method, which requires your Purchase Code, ThemeForest Username and API Key has been changed, due to Envato soon deprecating their old API. Avada 5.0 users are now required to register their product using the new Token Registration process which only requires 1 key instead of 3.

What If I’ve Registered My Product Before v5.0?

If you had previously registered your purchase to receive auto theme updates, in Avada 4.0.3 or older, you will still see the update notice in the WP Dashboard > Updates section of your WordPress Dashboard when Avada 5.0 is released. However, once you have updated to Avada 5.0 you will have to re-register your product using the new Token Registration method to receive automatic updates, Avada demos and premium plugins (to install and update the Revolution and Layer Sliders).

Auto Update Method

IMPORTANT NOTE – Avada v5.0+ will require the new Token Registration to receive our auto updates.

The easiest way to update your theme is to use our Automatic Update feature, which will require you to register your product by Token Registration. Once you have registered the product and an Avada update is released, you will receive an update notification in the WordPress Dashboard > Updates section of your installation and requires user acknowledgement to complete the update.

Click Here To Learn How To Register Your Purchase

How To Update Via The Auto Update Method

IMPORTANT NOTE – We highly recommend backing up your theme, files and database before updating.

Step 1 – Register your purchase by Token Registration

Step 2 – Navigate to the WordPress Dashboard > Updates section of your installation.

Step 3 – Under the ‘Themes’ section, you’ll see the Avada update notification. If you don’t see the update and know one available, click the ‘Check Again’ button on top of the page to refresh the updates list.

Step 4 – Check the checkbox beside the Avada update, then click the ‘Update Themes’ button to start the update.

Step 5 – Wait for the update to complete. A success notification will be displayed once the theme is updated successfully.

Step 6 – Don’t forget to update the required plugins


Manual Update Method

With the Manual Update Method, you can either choose to upload the theme files manually via FTP or WordPress. Before you can update manually, you have to download the theme files from ThemeForest. Continue reading below for instructions on how to download the theme files and how to upload them.

How To Download The Avada Theme Files From ThemeForest

Step 1 – Login to your ThemeForest account, navigate to your ‘Downloads’ tab and locate your Avada theme purchase.

Step 2 – Click the ‘Download’ button and choose to either download the ‘Installable WordPress file only’, which is just the WordPress installable file or choose to download ‘All Files & Documentation’ which is the full Avada theme package.

Step 3 – After downloading the files, you need to decide if you want to upload the theme files via FTP or WordPress. For instructions on both methods, please continue reading below.


How To Update Avada Via FTP

Uploading the theme files via FTP requires you to delete your old theme folder entirely. This is to ensure that any deprecated theme files that could cause update issues are removed completely.

IMPORTANT NOTE – We highly recommend backing up your theme, files and database before updating.

Step 1 – Log into your server using FTP and navigate to the wp-content > themes folder. Here you’ll find a folder called ‘Avada’.

Step 2 – Backup the ‘Avada’ theme folder by saving it to your computer, or simply delete it. Your content such as pages, options, images and posts will not be lost or erased by doing this. However, any customizations to the theme’s core files, such as PHP files will be lost unless you’re using a child theme.

Step 3 – Retrieve the theme files you’ve just downloaded. If you’ve downloaded the installable WordPress file, then you only need to extract it once to get to the ‘Avada’ folder. If you’ve downloaded the Full Theme Package you must extract it once to access the secondary ‘Avada.zip’ file, and then extract the secondary ‘Avada.zip’ file to get to the ‘Avada’ folder.

Step 4 – Once extracted you can drag and drop the new Avada theme folder into wp-content > themes folder location. Make sure the folder is named Avada.

Step 5 – Don’t forget to update the required plugins


How To Update Avada Via WordPress

IMPORTANT NOTE – We highly recommend backing up your theme, files and database before updating.

Step 1 – First you need to deactivate your current Avada theme located in the WordPress Dashboard > Appearance > Themes section of your Installation. To deactivate, simply switch to a different theme. For example, the default WordPress Twenty Sixteen theme.

Step 2 – After deactivating you can go ahead and delete it. To do this, hover over the theme thumbnail then click ‘Theme Details’. In the bottom right corner of the window, click the ‘Delete’ button. Your content such as pages, options, images and posts will not be lost or erased by doing this. However, any customizations to the theme’s core files, such as PHP files will be lost unless you’re using a child theme.

Step 3 – Retrieve the theme files you’ve just downloaded. If you’ve downloaded the installable WordPress file, then you do not need to extract it. If you’ve downloaded the Full Theme Package, you have to extract it once to access the secondary ‘Avada.zip’ file.

Step 4 – To install, navigate to the WordPress Dashboard > Appearance > Themes section of your installation, once again, and click the ‘Add New’ button near the top of the page. Click the ‘Upload Theme’ button.

Step 5 – Click on the ‘Choose File’ button and select the Installable ‘Avada.zip’ file and upload. Once uploaded, click ‘Install Now’.

Step 5 – When this has completed successfully, re-activate the theme by clicking the ‘Activate’ link.

Step 6 – Don’t forget to update the required plugins


Installing The Required Plugins

IMPORTANT NOTE – The brand new Fusion Builder, released with and only available for Avada version 5.0+, is officially a stand alone plugin packed with new and innovative features and options.

Avada has 2 required plugins, the Fusion Core plugin and the Fusion Builder plugin. Without these plugins, the theme won’t work properly. With every theme update, there’s almost always a required plugins update. Make sure you update the required plugins after updating the theme to ensure that you don’t run into any compatibility issues. To learn how, please click the button below.

Click Here To Read Our ‘Plugin Installation’ Article

Troubleshooting

1.) ‘Are You Sure You Want To Do This?’ Error Message

If you get the “Are You Sure You Want To Do This” message when installing the ‘Avada.zip’ file via WordPress, it means your server has an upload file size limit, which is set by your host. If this happens, install the theme via FTP, or call your hosting company and ask them to increase the limit.

2.) Theme Install Failed ‘Destination Folder Already Exists’

You may be getting this error because you have a duplicate ‘Avada’ folder. This error happens because WordPress only allows you to have one theme with the same name when uploading the theme via WordPress admin. We recommend updating the theme via the Auto Update method to get around this, or you can update the theme via FTP.

Demo & Plugin Offloading

10/19/2016

For Avada 5.0 we have officially reduced the size of the Avada install package. We have done this to prevent common theme installation failures as a result of many hosting providers that limit their servers Maximum File Upload Size and although easily rectified, it is a lengthy and cumbersome process for many especially newcomers to WordPress and premium themes. To achieve the smaller install package and improve the overall user experience, we have offloaded all demo content and premium plugins (Revolution and Layer Slider) by creating a new and improved way to install.

What Does Offloading Mean?

Do not worry, the Layer and Revolution Sliders and all demos can still installed via the Avada tab in the WordPress Dashboard, we have simply improved how they are installed. It is better, smoother and faster to install because they will be served from our own dedicated server instead of included in the Avada.zip install package from ThemeForest.

How To Install Demos & Premium Plugins

Before you can download and install demo content and the included plugins, you will be required to register your purchase via the new Token Registration method. This is an important step for new and existing users of Avada, regardless of wether you are installing Avada for the first time or updating to Avada 5.0. To learn more about Token Registration please read this help file.

Fallback Methods

If you’re experiencing difficulty with downloading and installing the offloaded plugins and demos, then please see the fallback methods below.

1.) Contact Your Hosting Provider First

If you’re experiencing issues with Token Registration and are certain that you followed the new Token Registration process fully, please contact your hosting provider and have them check to see if they are blocking our server. (These URL’s must not be blocked :: api.envato.com | https://theme-fusion.com | https://updates.theme-fusion.com) If your hosting provider confirms that they are not blocking our service, please submit a support ticket to our team so that we can investigate this further.

2.) Fallback Method for Premium Plugins

If Token Registration continues to fail and you can’t install the premium plugins, an alternative is to go to your Support Desk, then switch to the Product Registration tab. In the provided field, enter your Personal Token Key and click ‘Submit Code’. You’ll see a success notification and buttons to download the Revolution Slider and Layer Slider plugins.

3.) Fallback Method For Demos

For an alternative method to download and install the Avada Demos, please see our Alternate Demo Import Method help file.

Important Update Info

10/13/2016

We are so excited to bring you the culmination of several months of development, Avada 5.0. The main focus of this update is the brand new Fusion Builder. To make Fusion Builder into the page builder that everyone requests, and the codebase our team envisions, we needed to rebuild it from the ground up. The new Fusion Builder is intuitive, performance enhanced, user friendly and packed with features. Fusion Builder plays a major role in site creation and is a vital part of the Avada ecosystem. It allows for quick and easy site creation. And that’s not all, Avada 5.0 brings plenty of other features, options and code improvements to the table that will change your outlook on what a theme and page builder can do. Please read the information below when updating.

To view all the important update information for past updates, click here.
To view details about the amazing new features for this update, click here.

Avada 5.0 Important Update Information

Avada 5.0 includes a new Fusion Builder that has been entirely rebuilt from the ground up, requiring conversion of your previous content. A conversion splash screen will automatically trigger the first time you visit the WP admin area. This process converts previous Fusion Builder content to the new Fusion Builder structure. You can also retrigger this process in the system status area of the Avada Welcome Screen.

It is always best practice and recommended to complete a full database backup before you update any software.

1. Avada 5.0 Conversion

The new Fusion Builder structure, which will eventually allow us to release it for every theme on the market, requires your current Fusion Builder content to be converted. When you update to Avada 5.0 and visit the WP admin area, you will be presented with a splash screen that explains the details of conversion. The process is simple and runs automatically once you trigger it by checking the box and clicking the button. The process ensures the content you created with the previous Fusion Builder is structured for the new Fusion Builder.

WHAT DOES THIS MEAN FOR YOU?
First, it is always good practice to make backups of your database before you upgrade any type of software, the same is true here. When you see the splash screen, please read through the content. All Avada elements are now prefixed with fusion- to avoid conflicts with 3rd-party plugins in the future, generic names have been removed. Check the box at the bottom, then click the button to start conversion. The conversion process speed will depend on the size of your site, but please make sure to let it run and do not close the window once you have started it. If you are on a multi-site, each site will be run individually when visiting each sites admin area.

In addition, if you are on an older version of Avada (pre 4.0) we do recommend that you first update to Avada 4.0+, then to 5.0. You can download Avada 4.0.3 by visiting this link in our community forum. This step is not required, but recommended.

2. Fusion Builder Is Now It’s Own Plugin

Previous versions of Avada only required one plugin, Fusion Core. We’ve now separated out the new Fusion Builder into it’s own plugin as it should be. This allows us to continue and expand upon the plugin, build add ons, allow it to be used with any theme, and keep the overall package lighter and better organized. .

WHAT DOES THIS MEAN FOR YOU?
Only great things! When you install or update to Avada 5.0, you will need to install / update both Fusion Core and Fusion Builder plugins, both are required to use with Avada. Breaking Fusion Builder off into it’s own plugin has allowed us to rebuilt it from the ground up for speed & performance, extendibility, better user interface and so much more. It will continue to be developed and enhanced from our amazing community.

3. Fusion Builder Backend Welcome Screen With Global Options

Fusion Builder now has it’s own set of global options that allow you to do many things. Once you install Fusion Builder, you will see a new menu item in the WP admin area called Fusion Builder that has it’s own Welcome Screen area with informational pages, support, faqs, global settings and future add ons!

WHAT DOES THIS MEAN FOR YOU?
Better organization and future offerings! With Fusion Builder being it’s own plugin, we are now able to truly expand upon it and build it into the best page builder on the market, through add ons, top notch support and continued development. Global settings allow you to disable any single Fusion Builder element in case you are not using it, which gives you a performance boost; they also allow you to enable Fusion Builder on any registered post type; import and export any and all saved content from the Fusion Builder Library and more.

4. New Product Registration Method For Auto Updates / Avada Demos / Premium Plugins

The previous product registration for the auto theme update system was based off the old Envato API, which is soon to be retired. Therefor, we needed to update our product registration method with the new Envato API token key method. This is very simple and only requires one token key generated on the Envato site. With this, we have been able to simplify and enhance the registration process. Avada 5.0 now offloads both Avada Demos and the premium plugins (Slider Revolution + Layer Slider) that are included with the theme via token key registration. They are no longer packaged with the theme zip but offloaded from a server. This has allowed us to give you the lightest version of Avada ever that will easily install on pretty much any host without having to increase PHP configs or FTP the theme folder.

WHAT DOES THIS MEAN FOR YOU?
Any previous product registration is no longer active because the old Envato API is being removed. If you are already registered for auto updates on Avada v4+, then you will see an auto update to Avada 5.0. However that will be the last one, you need to register again once on 5.0 under the new token method. To receive auto updates, Avada demos (both full demo imports and the new Fusion Builder single page imports) and the included premium plugins (Slider Revolution + Layer Slider), you need to register your product on the Product Registration Tab in the Avada Welcome Screen area. Open the toggle for easy instructions on how to get your key. Once complete, you will have access to auto theme updates, all Avada Demos and the Revolution Slider and Layer Slider.

5. Avada Demos + Premium Plugins Can Only Be Used After Product Registration

Yep, we just mentioned this in #4 above, but we want to make sure you fully understand. In Avada 5.0, there is a new product registration method that is required for you to receive Avada Demos, the Revolution Slider and the Layer Slider. The process is easy to complete, and allows the theme zip to be 70% smaller than what it was, which drastically reduces overall resources on the server and allows customers to easily upload the theme via WP admin.

WHAT DOES THIS MEAN FOR YOU?
A lighter, faster, easier to install theme zip, that still includes everything you are familiar with. As mentioned above, just make sure you register your product via the Envato token key to receive auto theme updates, Avada demos, Revolution Slider and the Layer Slider.

6. Specific Changes To Fusion Builder Structure

The new Fusion Builder has a completely new structure. This means a certain format is needed to build pages, which is a great thing. This allows the builder to work with any theme in the future once we are ready to release it outside of Avada. Everything now goes into containers. The process to follow is ‘container > columns > elements’. The intuitive user interface leads you into this process naturally without even having to think about it. And don’t worry, your previous pages will be converted to this format as described in #1 above. In addition, the new structure and user interface allows you to add any type of container, column or element anywhere on the page!

WHAT DOES THIS MEAN FOR YOU?
The process of building pages will always start with adding a container, then columns, then an element. The intuitive user interface makes this extremely fast by adding the container + columns sets automatically when you click the + Container or + Column button. The + Elements, + Container & + Columns actions are always present, as well as the main control bar which is always present and available anywhere you scroll on the page.

7. Shortcode Styling Panel Is Now Called Fusion Builder Elements in Fusion Theme Options

Fusion Builder is now a separate plugin, yet will always have tight integration for our beloved Avada users. Previously to edit global shortcode options from Fusion Builder, you went to Avada > Theme Options > Shortcode Styling tab. Now the tab is named, Fusion Builder Elements.

WHAT DOES THIS MEAN FOR YOU?
This is only a name change to be more accurate for what the product offers. Fusion Builder consists of several elements, and the global options for them are located at Avada > Theme Options > Fusion Builder Elements.

8. Portfolio and FAQ Page Templates Removed In Place of More Efficient Fusion Builder Elements

Previous versions of Avada had page templates for both Portfolio and FAQ post types. Each post type had their own page templates you needed to specifically use. This is very limiting when it comes to creative page building, so we removed the page templates and converted both of them to Fusion Builder Elements that can be used on any page or post, anytime, anywhere! Conversion from #1 above takes care of any current pages that use these templates and converts them to the proper Fusion Builder Element with the correct options set.

WHAT DOES THIS MEAN FOR YOU?
More flexibility and creative layouts! You are no longer stuck to a specific page template which always places the post type at the top, and any other page content below. Now with the Portfolio and FAQ Fusion Builder Elements, you can place them anywhere on your pages or posts, in columns or widgets, anywhere you choose. This is a big improvement and gives you creative freedom.

9. General Questions & Support

Avada 5.0 is our biggest update to date and includes over 80+ new features including the new Fusion Builder. We are fully dedicated to you, our customers and will be working around the clock to help you with any questions you may have after updating.

WHAT DOES THIS MEAN FOR YOU?
It means we are here for you, always! Any questions or issues you have only requires you to submit a ticket through our support site and our friendly staff of experts will gladly help answer it for you. You can also choose to browse the Avada Documentation Archive and the Fusion Builder Documentation Archive. Simply enter your issues’ keywords into the search bar to bring up all related articles.

General Update Information

1. Always Backup Your Current Setup

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, 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 Fusion Theme Options on the Backup tab in Appearance > Theme Options > Backup.

2. Always Clear Various Forms of Cache

This is very important. When you update your theme files, it is possible that browser, plugin or server cache can be responsible for loading old files or settings. This can cause visual issues that may appear to be a major problem, but are not. Always make sure to clear all forms of cache from your browser, server or plugins like W3 Total Cache. View our general cache information that describes the various forms of cache and how to clear them.

3. 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.

4. 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. Make a copy of your current theme folder before you upload the new theme.

5. Reset Browser Cache, Server Cache And Plugin Cache

It is always recommended to reset your browser, plugin, and server cache when you update. Visual issues may happen and more often than not, its caused by caches, and they need to be emptied. Each browser allows you to remove cookies, history and other data. 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.

6. Update Child Theme

If you have copied template files from parent theme to child theme. Please make sure to revert to parent theme first to confirm if the issue exists there too. If it doesn’t, please update the templates copied to child theme with the parent theme.

7. 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 onscreen prompts 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 Fusion Core 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 Patcher

06/15/2016
IMPORTANT NOTE – This feature is only available in Avada 4.0 or higher.

In Avada 4.0, we’ve introduced a new Avada Patcher feature that greatly streamlines the process of applying bug fixes and patches to the theme. Users can now use the Avada Patcher to automatically apply patches without having to go through a long manual process. This reduces the margin of error when manually applying patches and ensures the necessary files are replaced and modified. Whenever our team creates a patch for a theme issue, it will show in the Avada Patcher tool allowing you to easily apply it to your install with a single click of a button. To learn more about the Avada Patcher, please continue reading below.

IMPORTANT NOTE 1 – Some patches may need to be applied in order like this. It’s very important to apply the patches in order when requested because some patches update the same files and it must be done in the proper order or issues can occur.
IMPORTANT NOTE 2 – Some unique servers with specific permission setups will not allow patches to be applied. However it will appear the patch is applied in the backend. If the patch did not work, it is probably due to your server permissions. Please send in a support ticket with a note in regards to this and we can take care of it with FTP access.

How To Find And Apply Avada Patches

Step 1 – Navigate to the WordPress Dashboard and go to the Avada > Support tab.

Step 2 – Look at the bottom of the tab for the Avada Patcher box. All available patches for the latest version will be listed and have a title, description, patch number and date to help you identify the issue and determine if you need to apply it.

Step 3 – Click the Apply Patch button for the patch you wish to apply. All necessary changes will be automatically applied to the theme files for you.

Step 4 – Once the patch is applied, you will see a green checkmark in the Status column that confirms the patch was applied.

Avada Changelog

06/15/2016

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
Buy Avada Now

Backing Up Your Site & Theme Options

06/15/2016

Backing up your site is an essential practice to ensure that you don’t lose any data during major changes or updates. Continue reading below to learn how to backup your site and your settings.

Backing Up Your Site

Backing up your website is highly recommended and is very important. There are several reasons why backing up your site is a good idea, and one of the primary reasons is to preserve your data in case of malicious attacks such as DDOS attacks, SQL injection attacks, trojan and malware injection, and the like. To learn more, please read our ‘How And Why You Need To Setup WordPress Backup’ blog article here. We’ve listed out some great plugins below to get you started.

Recommended Plugins To Use

  • VaultPress – A monthly subscription based service developed by Automattic, the company behind WordPress.com.
  • BackupBuddy – A paid and premium WordPress backup and site restore plugin developed by iThemes
  • BackWPup – A free WordPress backup plugin with a paid Pro version, as well.

Backing Up Theme Options

The plugins mentioned above will backup your entire site, but if you’d like to export and backup just your Theme Option settings located in the Avada > Theme Options tab, then please follow the steps below. You can also fetch your Theme Options’ Export URL on one site and use them to import the same Theme Options settings on another site.

Step 1 – Navigate to the Avada > Theme Options > Import / Export tab.

Step 2 – Find the ‘Export Options’ section, and choose one of the three available options. Click the ‘Copy Data’ button to copy the Theme Options data directly. Click the ‘Download Data File’ button to download the .JSON file. Finally, click the ‘Copy Export URL’ button to copy and paste your site’s Export URL.

Step 3 – To import your backup Theme Options, find the ‘Import Options’ section and click the ‘Import Contents From File’ button and paste the contents of the .JSON file you’ve exported. Alternatively, you can also click the ‘Import From URL’ button and paste the Export URL of another site to copy those Theme Option settings.


General Cache Information

06/15/2016

Sometimes issues that should not normally exist on your webpage are simply because of your own cache and can be quickly removed by clearing the cache out. There are three types of caches that may affect how your website is performing. These caches are Browser Cache, Plugin Cache and Server Cache. Please read below to learn how to clear each type of cache.

  • Browser Cache – this is cache stored by your browser to allow your page content to load faster.
  • Plugin Cache – this is cache specifically from a 3rd party WordPress plugin.
  • Server Cache – this is cache imposed by your hosting company directly from your server.

How To Clear Browser Cache For Each Browser

Your browser cache, also called Temporary Internet Files for some browsers, serves as a folder where some items such as images, photos, or even entire websites are stored or cached. This is so visiting frequent websites takes less time and allows them to load much faster. There are times when simply refreshing the page is not enough, and you have to clear your browser cache to solves some issues.

For Mozilla Firefox

Step 1 – Cllck the Open Menu icon found on the upper right corner of the browser. The icon will look similar to three stacked bars.

Step 2 – Click the Preferences option, and switch to the Advanced tab.

Step 3 – Once in the Advanced tab, switch to the Network tab.

Step 4 – In the Cached Web Content section, Click the Clear Now button to clear your browser cache.


For Google Chrome

Step 1 – Click the Customize icon found on the upper right corner of the browser. The icon will look similar to three stacked bars.

Step 2 – Click the Settings option, and switch to the History tab on the left side.

Step 3 – Click the Clear Browser Data… button.

Step 4 – Select The Beginning of Time option from the dropdown menu, make sure that only the Cached Images and Files option is checked.

Step 5 – Click the Clear Browsing Data button to clear your cache.


For Apple Safari

Step 1 – Click the Safari option in the top menu bar.

Step 2 – Click the Preferences… option, then the Preferences window will pop up.

Step 3 – In the Preferences window, switch to the Advanced tab. Once there, make sure the Show Developer Menu In Menu Bar is checked.

Step 4 – In the top menu bar of Apple Safari browser, you will now see a Developer option.

Step 5 – Click the Developer option, then select Empty Caches option to clear your cache.


For Internet Explorer

Step 1 – Click the Tools icon found on the upper right corner of the browser. The icon will look similar to a gear.

Step 2 – Click the Internet Options option from the dropdown menu. This will bring up the Internet Options window.

Step 3 – In the General tab, click the Delete… button under the Browsing History section.

Step 4 – Make sure that the Temporary Internet Files and Website Files option is checked.

Step 5 – Click the Delete button to clear your cache.


IMPORTANT NOTE – If you’re browser is not included above, please visit this website for more information.

How To Clear Plugin Cache

If you’ve installed a 3rd party cache plugin, such as W3TC, or WP Super Cache, then this may also interfere with how your website is functioning and may cause unexpected issues. To clear your plugin cache, please continue reading below.

For W3TC

Step 1 – In the top menu bar of your WordPress Panel, you will find a Performance tab.

Step 2 – Under the Performance tab, click the Clear Cache option to clear your W3TC plugin cache completely.


For WP Super Cache

Step 1 – In the Settings tab of your WordPress Panel, locate the WP Super Cache option.

Step 2 – In the WP Super Cache tab, click the Delete Cache button under the Delete Cached Pages section to clear your plugin cache.


IMPORTANT NOTE – If your 3rd party cache plugin is not included above, please check the documentation for that plugin on their website.

Server Cache

In some cases, your Web Hosting may have server caching software installed which may also be the cause of issues on your website. You also need to clear this to solve those issues and to preview any new changes you make on your website. One of the most common Web Hosts to use a caching software are WPEngine, and Bluehost.

Click Here To View How To Clear WPEngine Cache Click Here To Visit Bluehost’s Support Desk

Avada Speed & Performance

10/27/2016

Avada is created with speed and performance in mind. On it’s own, Avada is highly optimized and provides you with the ability to get extremely high speed test scores on tools like GTMetrix, Google PageSpeed Insights, and Web Page Speed Test. Having said this, your site’s speed and performance does not entirely rely on the theme and what you put into it also has a great impact on your speed scores. Continue reading below to learn more about site optimization.

Avada Optimization Intro Paragraph

Site Optimization

When it comes to optimization, Avada plays a much smaller part than you would imagine. Avada is optimized so that it’s fast on it’s own, but ultimately, user content will dictate how fast your site will perform. Images play a huge factor in speed results, as well as hosting, server, extra plugins, content and more.

For example, if you have a site that’s 1100px wide and upload a 2000px image on a page, your page speed score will drop heavily. This is because places like Google or GTMetrix will see a 1100px container that unnecessarily has an image on it that is twice it’s size.

Important Links About Site Optimization

Avada Speed Scores



Demos

10/20/2016

When you first install Avada, it won’t contain all the extra content that you might have seen in the live demo. If you would like to import an Avada demo, there are two ways you can do so. You can import the entire demo content through our Demo Content Importer, or you can import individual pages from any demo through our new Fusion Builder Library. If you run into any issues using these methods, you can also import demos manually which requires a bit more effort.

Important Details About Demos

  • Published Posts – Our demo content contains 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 re-activate the plugin.
  • Images & Videos – Our demo images and self hosted videos are not included because they are licensed stock resources that are not allowed to be distributed. Instead, we include other images in their place. To learn more about this, please see our ‘How To Get Stock Images Used On Demos’ article.
  • Sliders – We do not include all demo sliders because there are too many to import. However, we do include several examples. If you wish to download all demo sliders, please see our ‘How To Get Our Demo Sliders’ article.
  • Blog / Portfolio – Our Classic Demo shows every possible portfolio & blog combination, with & without sidebars. If you choose to import the Classic Demo, please be aware that not all portfolio and blog pages will be included due to the huge amount of pages and it’s resulting file size.

What Is An Avada Demo?

An Avada Demo is a showcase or an example of what’s possible with the Avada theme. Each demo represents a specific industry such as Church, Fashion, Photography, and more. This is to demonstrate how flexible the theme can be. These demos are fully completed and built by professional designers using our advanced network of options alone, no customizations needed.

How Are Demos Useful?

Avada demos can be useful when you don’t know where to begin. If you’re new to building websites, demos can be a great starting point because all the pages and content are laid out for you. You can then go in and tweak it to your liking, or experiment with Avada’s various capabilities and options. If you’d like to try another demo, you can reset your website and simply import another one.

View All Our Available Demos Here

Import Avada Demos

11/02/2016
IMPORTANT NOTE – To access Avada demos in version 5.0 or higher, you must first register your purchase via Token Registration.

The easiest way to import our demo content is to use our Demo Content Importer, which you can access after you register your purchase via Token Registration. Our importer will give you all pages and posts, several sample sliders, widgets, Fusion Theme Options, assigned pages, and more. This is recommended to do on fresh installs. It will not replace content like posts, pages, portfolio, etc. and it will not delete current menus or sliders. It will, however, configure and use our demo menus, add sliders and replace Fusion Theme Options, Reading Settings and Widget Settings.

Before Importing Avada Demos

Before you import any of our available demos, please make sure to check the items listed below. All of these are important and will ensure that your demo import goes smoothly. In case something does go wrong with your demo import, please see our Troubleshooting section below.

  • Product Registration – Please make sure to register your product via Token Registration to be able to access and import our demos.
  • Required Plugins – Install Avada’s required plugins, Fusion Core and Fusion Builder. Also make sure you’ve installed the recommended plugins listed on each demo.
  • System Status – Check the System Status tab to ensure your server meets all requirements for a sucessful import. Settings that need attention are listed in red.
  • ZipArchive Extensions – You must install and activate the ZipArchive extensions on your server in order for the Layer Slider and Revolution Slider to import demo sliders correctly.

Importing Avada Demos

IMPORTANT NOTE – This method is available for Avada versions 3.8 or higher.

How To Import Avada Demos

Step 1 – Navigate to the Avada > Install Demos tab in your admin sidebar.

Step 2 – Select the Avada demo you wish to import. Before installing one, make sure to install and activate the required plugins listed on the demo you’d like to import. You can find them on the notice that will pop up when you click ‘Install’. You can also preview the demo by clicking ‘Preview’.

Step 3 – Once you’ve checked all necessary components for importing demos, click the ‘Install’ button to import your selected demo.

Step 4 – 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 below the tabs.

Step 5 – This is an optional step, especially if you’re planning to replace the demo images with your own. After importing, You’ll then see a message to Regenerate Thumbnails. Install and active the plugin then go to the Tools > Regen. Thumbnails tab and choose ‘Regenerate All Thumbnails’. This will regenerate all images and adapt them to the demo’s image dimensions. This may take a moment to complete.

Click Here To Watch A Video Tutorial On Importing Demos – Watch It In HD & Fullscreen


Troubleshooting

If you encounter errors during or after importing a demo, please see below for possible solutions. If you don’t find what you’re looking for below, please don’t hesitate to submit a support ticket to our support team.

1.) Missing demos in the ‘Install Demos’ tab

If the demos aren’t appearing on the Avada > Install Demos tab, then your purchase may not have been registered via Token Registration. Please register your product first to access our various Avada demos.

2.) 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. 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 them listed. If you do not see them, then you can import the sliders separately

3.) Demo Import Fails: “Sorry but your import failed.”

If you receive this message Sorry but your import failed. Most likely, it cannot work with your webhost. You will have to ask your webhost to increase your PHP max_execution_time (or any other webserver timeout to at least 300 secs) and memory_limit (to at least 196M) temporarily. it is 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.

4.) Demo Content Still Will Not Import – Try Alternative Methods

If your host will not make changes, or you cannot get the demo content to import, then please try our Alternative Demo Import Method.

5.) 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, Fusion 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 manually removing duplicate items. For example, go to the Appearance > Menu and delete and duplicate items one by one. Same thing for pages, post, sliders, etc.

6.) 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.

7.) 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.

8.) Setting Up Mega Menu

When you import our demo content through our Fusion Theme Options Importer, the Mega Menu will not be enabled. This is due to a limitation in WordPress, because it does not allow custom menu settings to import. But we have it setup so you can quickly enable the Mega Menu. See this post for instructions on how to set it.

Import Single Demo Pages

10/14/2016

If you do not want to import an entire demo, you can import individual pages from any Avada demo via the Fusion Builder Library section. Importing a single demo page is different than importing a full demo. Importying single pages is only done to receive the skeleton layout. If you wish to import everything from a demo, you need to import the full demo on the Avada > Install Demos tab. Please read below for important information about importing single demo pages.

Important Information For Importing Single Pages

Importing a single demo page will show differences in style and layout compared to the online demos due to the items that cannot import. The items that import are the builder layout, page template, fusion page options and image placeholders. If you wish to import everything from a demo, you need to import the full demo on the Avada > Install Demos tab. The items that do not import are listed below:

  • Importing a single demo page is to receive the skeleton layout only
  • You will not receive demo images
  • You will not receive fusion theme options
  • You will not receive custom post types
  • You will not receive sliders
  • How To Import Single Pages From Fusion Builder

    Alternate Demo Method

    11/24/2016

    IMPORTANT: When using the alternate demo method, after importing a demo you must load the Fusion Theme Options Panel and save it. See Step 9 below.

    Avada comes with several demos to import with one click through our demo importer. This method relies on the proper server configurations, please check the System Status tab to view any areas of concern marked in red. There could be rare occasions when the importer will not work and you need to try an alternate method. Please read below for information on how to import demos through our alternate method.

    WARNING: Your site database will reset entirely using this alternative import method.

    How To Import Demos Through The Alternate Method

    Step 1 – Install the required and recommended plugins for the demo you want to import. For example, Fusion Core, Revolution Slider, Layer Slider and others that may be listed.

    Step 2 – Install and Activate All-in-One WP Migration plugin.

    Step 3 – Below is a list of our demo backup files. Download your desired alternate method demo backup file to your computer.

    Step 4 – Navigate to the All-in-One WP Migration > Import tab on your WordPress admin sidebar.

    Step 5 – Click on the Import From button, and choose File. Select the demo backup file you’ve just downloaded.

    Step 6 – Once your import is finished, you will receive a warning that says the import process wil overwrite your entire site database. Click the Continue button to proceed.

    Step 7 – You will receive a success message once you’ve successfully imported the data. Click the ‘Close’ button to return to the plugin page.

    Step 8 – Once the update is complete, click Continue. You need to log back into the WordPress admin area using the following username/password details:

    Username: admin Password: admin

    Once logged back in, you can change your username/password back to your unique credentials.

    Step 9 – Navigate to Avada > Theme Options and click SAVE CHANGES to ensure the styles are set properly. All done!


    If you experience any issues with the import, such as broken styling and the like, please view our Frequently Asked Questions section below.

    The Alternate Method Demo Backup Files:

    Frequently Asked Questions

    1.) My demo pages have styling issues. How do I fix this?

    If you’re experiencing styling issues, such as incorrect fonts, broken columns or unaligned sections, this may be because the Theme Options haven’t loaded properly. Fortunately, this is very easy to fix. Go to the Avada > Theme Options panel, and refresh the page. After refreshing the page, re-save the Theme Options panel by clicking the ‘Save Changes’ button. You don’t need to change any settings. After that, don’t forget to clear all your caches.

    If that doesn’t work, try going through the process of refreshing the Theme Options panel and resaving it. If you’re still experiencing issues after one or two tries, please don’t hesitate to send us a support ticket.

    2.) My menu item links are returning 404 errors. How do I fix this?

    After importing a demo using the alternate method, you’ll need to re-save your permalinks. To do this, go to the Settings > Permalinks tab on your WordPress admin panel. Once there, click the ‘Save Changes’ button at the bottom of the page to re-save your permalinks. After that, don’t forget to clear all your caches. If you’re still experiencing issues, please don’t hesitate to send us a support ticket.

    Options

    06/15/2016

    Avada is managed through a network of options called Fusion Theme Options, Fusion Page Options, and Fusion Builder Options. The Fusion Theme Options are located in Avada > Theme Options and contain a plethora of theme options organized into tabs. These options are all global options which means any option set in Fusion Theme Options will affect your entire website. If you want to set more specific options for a particular page or post, you can set them in Fusion Page Options, which is located in every page or post. Fusion Page Options will only affect the page or post you set them in, and will also override any theme options it overlaps with. Use the Fusion Page Options to fine tune your website to just the way you like it. Avada also has Fusion Builder Options which are options set inside individual shortcode elements. These options only affect the shortcode they’re set in and override any overlapping theme options set in the Shortcode Styling tab.

    Any Fusion Page Option or Fusion Builder Option set to Default will take on it’s corresponding Fusion Theme Option. If you do not want this, simply set that particular option to another setting other than Default.

    How Options Work

    10/12/2016

    The Advanced Options Network is the backbone of Avada. These options give you full control over your website and allow you to customize the design without touching a single line of code. There are three major groups of options you can utilize within Avada, Fusion Theme Options, Fusion Page Options and Fusion Builder Element Options.

    Avada’s Advanced Options Network

    Avada is and has been for a fairly long time the only theme available on the market with a well established and highly flexible advanced options network, that gives you maximum design flexibility and freedom without the need for code. Continue reading below to learn about each one.

    • Fusion Theme Options – Located under the Avada > Theme Options tab on your WordPress admin sidebar. These options are global options that affect your entire site.
    • Fusion Page Options – Located within every page and post. These options only apply to the page or post they’re set in.
    • Fusion Builder Element Options – Located within each fusion builder element. These options will only affect the single element instance they’re set in.
    Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

    How Avada’s Option Network Relate To Each Other

    Fusion Page Options and Fusion Builder Element Options will use the Fusion Theme Options value if left empty or if the value is set to default. They will override Fusion Theme Options if any other value is set. This setup gives users maximum flexibility for setting a global theme option, then being able to override it on a per page/post/element basis. Please see below for an example of a setting that is both present in Fusion Theme Options and in Fusion Page Options, as well as an example of a Fusion Builder Element that has a corresponding Fusion Theme Option setting.

    IMPORTANT NOTE
    If you choose default for a page option or an element option, it will use the selection you have made in Fusion Theme Options. Select a different value to override the corresponding Fusion Theme Option selection.
    Fusion Theme Options

    Below is a screenshot of the Header panel in Fusion Theme Options. The ‘100% Background Image’ option is set to On, which means your header background image will cover 100% width on all the pages throughout your site, unless otherwise specified in Page Options.


    Fusion Page Options

    Below is a screenshot of the Header panel in Fusion Page Options. The 100% Background Image option is set to No which means on this particular page, you are overriding the global theme option and your header background image will not display at 100% width.


    Fusion Theme Options

    Below is a screenshot of the ‘Fusion Builder Elements’ tab in Theme Options. The ‘Button Size’ option is set to Large, thereby all buttons on your website will be displayed as such unless the corresponding button element option is set.


    Fusion Builder Element Options

    Below is a screenshot of the Button Element inserted into a page via the Fusion Builder. Each individual element has it’s own set of options. This element option will override its corresponding option in Fusion Theme Options.


    Advanced Option Network Correlation

    IMPORTANT NOTE – This feature is only available in Avada version 5.0 or higher.

    When building your page, we understand that it’s important to have a seamless experience. This is why we’ve implemented a new feature called Advanced Option Network Correlation. This feature allows you to view what default option you’ve set in Fusion Theme Options for specific Fusion Page and Element options. If you would like to change it, you can simply click on the link to be automatically redirected to that Theme Option. Click the button below to learn more about this feature.

    Click Here To Learn More About Advanced Option Network Correlation

    Option Network Dependencies

    IMPORTANT NOTE – This feature is only available in Avada version 5.0 or higher.

    Avada’s Option Network consists of Fusion Theme Options, Page Options, Builder options and each of them have dependent options ON by default. This means the only options you see are the only ones currently available for your selection, this is intended to keep opitons as stream lined as posible and avoid visual clutter. The dependent options are hidden/visible according to your current site’s configuration. For example, if you have a side header active, then all options that aren’t relevant to side headers like top header options, will be hidden from view. This allows you to concentrate only on the options that will affect your current set up. This feature can be disabled in Theme Options > Advanced > Theme Features > Avada’s Option Network Dependencies. To learn more about Dependent Options, please see our article below.

    Click Here To Learn More About Dependent Options

    Fusion Theme Options

    10/20/2016

    Avada has an advanced Fusion Theme Options panel that is loaded with options. The options are organized into logical tabbed sections, and each option has a description of what it will do on the front end. Because of the number of options Avada available, we cannot go over them in full detail here. We encourage you to take some time and navigate through each section to familiarize yourself with the options. Go to Avada > Theme Options in your WordPress admin to access the Fusion Theme Options panel. The Import/Export section makes it easy for you to backup, restore or transfer the Fusion Theme Options data when you migrate an installation. See below for screenshots and short descriptions of our Fusion Theme Options panel.

    IMPORTANT NOTE
    – This list has been updated for Avada version 5.0.
    – Theme Options are fully conditional and will only show the available options based off your current configurations. If you do not see an option, it could be due to a parent option being disabled. We are always adding new options so these screenshots may not reflect the most up to date options.
    – 3rd Party Plugin Options labeled in GREEN are only available when you have the corresponding plugin activated. This eliminates irrelevant options to your current setup if not in use.

    Avada Theme Options

    Layout Options – Manage the site layout, site width, padding, column margins, and sidebars. View here.

    Menu Options – Manage various aspects of your main menu, flyout menu, secondary, mobile and mega menu

    • Main Menu – Styling, layout and typography options. View here
      • Flyout Menu – Styling, font size and menu direction options. View here
      • Secondary Top Menu – Styling, layout and typography options. View here
      • Mobile Menu – Menu Design, styling and typography options. View here
      • Mega Menu – Layout options. View here

    Responsive Options – Enable responsive design on your site, set responsive breakpoints, and enable responsive type. View here

    Color Options – Choose a predefined theme skin, a predefined color scheme or set a custom primary color. View here.

    Header Options – Manage the header and sticky header. Choose the position, size, layout, appearance, padding, styling, slider position and header content.

    • Header Content – Header position, header layout, slider position and header content options. View here
    • Header Background Image – Upload a header background image. View here
    • Header Styling – Header padding, shadow, width and background color options. View here
    • Sticky Header – Visibility, Mobile visibility, animation, color, padding and font size options. View here

    Logo Options – Manage a regular, retina, sticky header, mobile logo and a favicon.

    • Logo – Alignment, margins, default, retina, sticky header and mobile logo options. View here
    • Favicon – Regular, Apple iPhone and iPad favicon options. View here

    Page Title Bar Options – Manage the layout, visibility, styling, font size, alignment, a background image and animation. These options are applied globally to pages and posts, but can be overridden by individual page or post fusion options.

    • Page Title Bar – Visibility, styling, a background image, parallax and animation. View here
      • Breadcrumbs – Visibility, styling and layout options. View here

    Sliding Bar Options – Manage visibility, columns, styling and font size options. View here

    Footer Options – Manage widgets, columns, content alignment, special effects, copyright text, a background image and styling.

    • Footer Content – Enable/disable widget visibility, number of columns, content alignment, special affects like parallax and sticky footer and the copyright bar. View here
    • Footer Background Image – Upload a footer background image. View here
    • Footer Styling – 100% Width, padding, border color and size. View here

    Sidebar Options – Manage sidebar styling, and sidebars for pages, portfolio, blog, the search page and Woocommerce. Here you can activate the sidebars globally which will override the Fusion options.

    • Sidebar Styling – Padding, background color, widget title background color, widget heading color and widget heading font size. View panel here.
    • Pages – Activate global sidebar for pages, choose 1 or 2 sidebars and the sidebar position. View here
    • Portfolio Posts – Activate global sidebar for portfolio posts, choose 1 or 2 sidebars and the sidebar position. View here
    • Portfolio Archive – Choose 1 or 2 sidebars and the sidebar position. View here
    • Blog Posts – Activate global sidebar for blog posts, choose 1 or 2 sidebars and the sidebar position. View here
    • Blog Archive – Choose 1 or 2 sidebars and the sidebar position. View here
    • Search Page – Choose 1 or 2 sidebars and the sidebar position. View here
    • WooCommerce Products – Activate global sidebar for blog posts, choose 1 or 2 sidebars and the sidebar position. View here
    • WooCommerce Archive – Choose 1 or 2 sidebars and the sidebar position. View here
    • Events Calendar Posts – Activate global sidebar for events calendar posts, choose 1 or 2 sidebars and the sidebar position. View here
    • bbPress/BuddyPress – Activate global sidebar for bbPress/BuddyPress, choose 1 or 2 sidebars and the sidebar position. View here

    Background Options – Manage styling, background images and a background pattern.

    • Main Content Background – Main content background color, background image for main content area. View here
    • Boxed Mode Background – Boxed mode background image, boxed mode background color and a background pattern. View here

    Typography Options – Manage font families, size, weight, line heights, letter spacing, font color, header margins and link color for body and headers. Choose either standard fonts, Google fonts or add your own custom fonts.

    • Body Typography – Font family, weight, style, subsets, size, line height, letter spacing, font color and link color. View here
    • Headers Typography – Headers H1-H6 font family, weight, style, subsets, size, line height, letter spacing, header margins, font color and post title size and line height. View here
    • Custom Fonts – Upload as many custom fonts as you wish. Required font files -> .woff, .ttf, .svg, .eot. View here

    Blog Options – Manage the layout, pagination type, grid columns, grid spacing, excerpts, featured image, date, single post options and the blog meta.

    • General Blog – Title bar, blog title, layout for WordPress default or archive, pagination type, grid columns and spacing, excerpt, blog archive featured image/video visibility and the date. View here
      * The general blog options only control the assigned blog page in WP settings >> reading or the blog archives, not the blog element
    • Blog Single Post – 100% width page, blog single post featured image/video visibility, pagination, post title, author, social sharing, related posts and comments. View here
    • Blog Meta – Post meta visibility, various meta options and meta data font size. View here
      * The on/off meta options in this section only control the assigned blog page in WP settings >> reading or the blog archives, not the blog element

    Portfolio Options – Manage the items per page, layout, pagination type, column spacing, excerpts, text layout, portfolio slug, featured images size and various portfolio single post options.

    • General Portfolio – Items per page, archive layout, excerpt, pagination type, text layout, slug and the featured image size. View here
      * The options in this section only control the portfolio archives, not the portfolio element
    • Portfolio Single Post – Single post featured image/video visibility, pagination, featured image column size, 100% width page, author, social sharing, related posts and comments. View here

    Social Media Options – Manage your social media options for the header, footer, social sharing box and upload as many custom social media links as you wish.

    • Social Media Icons – Default and custom social links. View here
      * The default and custom social link added here will only display in the header and footer, they will not display in the Avada social widget, social links element or person element.
    • Header Social Icons – Social icon size, tooltip position, social icon color type, social icon color and boxed. View here
      • Footer Social Icons – Icon visibility, social icon size, tooltip position, social icon color type, social icon color and boxed. View here
      • Social Sharing Box – Sharing box tagline, sharing box styling, social icon size, tooltip position, social icon boxed, border radius, padding and sharing box links. View here

    Slideshows Options – Manage the number of post slideshow images, autoplay, smooth height, speed, pagination and navigation options. View here

    Elastic Slider Options – Manage the slider dimensions, animation, autoplay, interval, speed and typography styling. View here

    Lightbox Options – Manage the general lightbox behavior, skin, navigation visibility and gallery start/stop. View here

    Contact Form Options – Manage the email address, comments area position, ReCaptcha, Google map options and Google map styling.

    • Contact Form – Email address, comment area position, ReCaptcha settings. View here
      * The options on this tab are only for the contact form that displays on the ‘Contact’ page template.
    • Google Map – Map type, map dimensions, margins, map address, zoom level, pin visibility, pin animation, popup, scrollwheel, map scale and controls. View here
      * The options on this tab are only for the google map that displays on the ‘Contact’ page template, they do not control the google map element.
      • Google Map Styling – Map styling type, overlay color, infobox content, infobox styling and a custom marker icon. View here
        * The options on this tab are only for the google map that displays on the ‘Contact’ page template, they do not control the google map element.

    Search Page Options – Manage the search results layout, content, excerpt visibility, number of results per page, feature image visibility and the search field position. View here

    Extra Options – Manage miscellaneous options for your site including for related posts/projects, featured image rollovers, pagination, forms styling and grid box styling.

    • Miscellaneous – Side navigation template menu behavior, image placeholders, excerpt type, excerpt link method, comments visibility on pages, feature image visibility on pages, FAQ feature images and FAQ filters. View here
    • Related Posts / Projects – Layout, number of posts/projects, max. columns, column spacing, image size, autoplay, speed, navigation, mouse scroll and scroll items. View here
      • Featured Image Rollover – Image rollover visibility, direction, icon size, link behavior and rollover styling options. View here
        • Pagination – Padding and previous/next text visibility. View here
          * The options on this tab apply to all pagination throughout the site, including the 3rd party plugins that Avada has design integration with.
          • Forms Styling – Form input and select height, background color, text color and border color. View here
            * The options on this tab apply to all forms throughout the site, including the 3rd party plugins that Avada has design integration with.
            • Grid Box Styling – Grid box and element color. View here
              * The options on this tab apply to grid boxes throughout the site; blog grid and timeline, portfolio boxed layout and WooCommerce boxes.

    Advanced Options – Manage tracking code, Javascript and HTML added before </head> or before </body>, various theme features and dynamic CSS.

    • Code Fields – Tracking code (IE: Google Analytics), Javascript code wrapped in <script> tags and HTML markup. View here
    • Theme Features – WordPress jpeg quality, smooth scrolling, enable/disable the Fusion Builder, code block encoding and enable/disable various scripts, sliders, rich snippets and activate developers mode. View here
      • Dynamic CSS – Activate the CSS compiler, enable database caching for dynamic CSS and cache server IP. View here

    bbPress & BuddyPress Options – Manage the form header background color, header font color and border color. View here

    WooCommerce Options – Manage general Woo configuration options and styling.

    • General WooCommerce – Products per page, columns, one page checkout, order notes, my account menu link, cart icon, social icons, product grid/list view, gallery slider and account area messages. View here
    • WooCommerce Styling – Product box design, tab design, various color options and icon size. View here

    Events Calendar Options – Manage general calendar styling and single calendar post options.

    • General Events Calendar – General styling options, feature image hover type and image background size for list view. View here
    • Events Single Posts – Social sharing box visibility, sidebar background color, padding, widget sidebar styling and font sizes. View here

    Custom CSS Options – Add your own custom CSS which will override the theme CSS. In some cases the !important tag may be needed. View here

    Fusion Builder Elements Options – These options affect the Avada elements globally, which can be overridden by each element’s individual settings. View here

    Import/Export Options – Backup, restore or transfer Fusion Theme Options data when you migrate your installation. View here

    IMPORTANT NOTE
    3rd Party Plugin Options labeled in GREEN are only available when you have the corresponding plugin activated. This eliminates irrelevant options to your current setup if not in use.

    Fusion Page Options

    11/02/2016

    Avada is extremely powerful and a lot of that power comes from our individual page and post options called Fusion Page Options. Fusion Page Options will override global options set in Fusion Theme Options. Each page you create will have a Fusion Page Options box with organized tabs and full set of options to choose from, allowing you to customize each individual page. Fusion 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 and short descriptions of each different section included in the Fusion Page Options box. To learn more about Avada’s Option Network System, click the button below.

    Click Here To Learn More About Avada’s Options Network System
    IMPORTANT NOTE – Fusion Page Options will override the global options set in Fusion Theme Options.

    Normal Page Options

    When creating a page, these are the Fusion Page Options you will see below the editor field. Continue reading below to learn more about each tab.

    Blog, Portfolio and FAQ Single Post Options

    Blog, Portfolio and FAQ are custom post types. When you create a new post for each of these 3 items, you will see a new Page Options tabs available dedicated to that particular post type. Continue reading below to learn more about each tab.

    Option Network Correlations

    11/02/2016
    IMPORTANT NOTE – This feature is only available on Avada version 5.0 or higher.

    In Avada 5.0 we have added a new feature called Advanced Option Network Correlation. This option allows you to intuitively see the relationship between global Fusion Theme Options settings and your individual Element Options and Page Options settings. When you edit a single page or post, in the Fusion Options section of the page, you will see what has been set for the corresponding option within the Theme Options. No more switching back and forth or trying to remember what you previously set in the Theme Options Continue reading below to learn how this feature works.

    Advanced Option Network Correlation

    Avada has the most advanced options system of any theme on the market! With Avada you can set global options which affect your entire site using Fusion Theme Options, but also the flexibility to fine tune your settings on a individual page or element basis by using Fusion Page Options and Fusion Builder Options.

    Because the options network consist of globals vs overrides, it’s vital to know what is set globally. Our Advanced Option Network Correlation feature makes it clear what is currently set globally within Fusion Theme Options.

    This feature is located in all Fusion Builder Options and Fusion Page Options that have a corresponding option in the Fusion Theme Options. Simply click the link in the description to be redirected to the corresponding global option in Fusion Theme Options, or with the knowledge of what is set globally, change the Fusion Option to override the Theme Option.


    Fusion Builder Options

    11/02/2016

    Fusion Builder is a vital part of Avads’s ecosystem because it allows you to quickly and easily build professional pages through a drag and drop user interface. It’s intuitive, powerful and flexible. More importantly, the options it contains work in tandem with Avada’s Option Network. Fusion Builder has it’s own documentation section where you can learn all about it, in addition, there is a Fusion Builder API that allows you to build add ons for it. We’ve listed out the each Fusion Builder Element and the options it contains below along with links to learn more about Fusion Builder.

    View The Fusion Builder Documentation Learn More About The Fusion Builder API

    IMPORTANT NOTE – Fusion Builder Element Options will override the global options set in Fusion Theme Options.

    Fusion Builder Element Options

    Fusion Builder has dozens and dozens of elements you can use to build professional pages through an intuitive user interface. Each element has a set of options for customization, that also work in tandem with Avada’s Option Network. The list item below shows you each available element for Fusion Builder along with the options it contains.

  • Fusion Builder Element Options – Located within each fusion builder element. These options will only affect the single element instance they’re set in.
  • Fusion Builder Global Settings

    Fusion Builder is it’s own plugin and contains a set of global options for the plugin itself. These options are only for Fusion Builder itself and are not related to the Avada Options System, but are individual for the Fusion Builder plugin itself.

  • Fusion Builder Global Settings – Located in the WordPress admin area, these options will only affect the Fusion Builder plugin..
  • Option Network Dependencies

    10/20/2016

    Dependent options are options that are shown or hidden according to your current setup. For example, if your site currently has the ‘Responsive Design’ setting turned off, then all options related to the Responsive Design setting, such as Responsive Breakpoints, will be hidden from the Theme Options Panel.

    This is because these options are now unnecessary to your current setup and will not affect it in any way. This will minimize confusion and errors resulting from incorrect option settings. Continue reading below to learn about dependent options in the Fusion Theme Options, Fusion Page Options and the Fusion Builder Element Options.

    Avada’s Option Network Dependencies

    While Avada’s Option Network Dependencies are useful, you may want to see all the option the Avada theme has to offer so you can quickly visualize what’s possible with the theme. If you’d like to turn the dependency feature off, you can do so by following the steps below.

    Step 1 – Navigate to Avada > Theme Options > Advanced > Theme Features tab.

    Step 2 – On this tab, you’ll find the ‘Avada’s Option Network Dependencies’ option. Toggle this option to Off to disable dependent options in all three locations; Fusion Theme Options, Fusion Page Options, and Fusion Builder Options.

    Step 3 – Once finished, click ‘Save Changes’ and refresh the page.


    Dependent Options in Fusion Theme Options

    Below is an example of dependent options in action in the Fusion Theme Options panel. When you turn Responsive Heading Typography On, you’ll be able to view all it’s dependent options. When you turn it Off, they will become hidden because they’re no longer necessary.

    Responsive Heading Typography Disabled


    Responsive Heading Typography Enabled


    Dependent Options in Fusion Page Options

    Below is an example of dependent options in action in the Fusion Page Options panel. When you select a slider from the ‘Slider Type’ option in the Sliders tab, you’ll be able to view all that particular slider’s dependent options.

    No Slider Type Selected


    Fusion Slider Type Selected


    Dependent Options in Fusion Builder Element Options

    Below is an example of dependent options in action in Fusion Builder Elements. When you select an animation type from the ‘Animation Type’ option under the Animations tab, you’ll be able to view all the animation’s dependent options.

    No Animation Type Selected


    Bounce Animation Type Selected


    Typography Options

    10/20/2016
    IMPORTANT NOTE – This feature is only available on Avada version 4.0 or higher.

    On the new Theme Options panel that comes with Avada version 4.0 or higher, we’ve logically combined options that affect a specific section of your site into their own panel. This also includes customization options such as layout, colors and typography. For example, if you’d like to customize your header, then you’ll find all the options you’ll need under the header tab in Theme Options. Continue reading below to learn more about the new typography options.

    Typography Options Locations

    All typography options are located within their specific Theme Options panel. For example, if you’d like to customize your main menu typography settings, then you would find those options in the Menu > Main Menu tab, under the ‘Main Menu Typography’ section. If you don’t find the typography settings for a specific feature, it may be because it’s been combined into a header typography option.

    • Body Typography Options – To customize the Body Font, navigate to the Avada > Theme Options > Typography > Body Typography where all the Body Typography options such as font family, weight, size, etc. are found.
    • H1 – H6 and Post Title Typography Options – To customize the Headers and Post Titles Font, navigate to the Avada > Theme Options > Typography > Headers Typography where all the Headers and Post Titles Typography options such as font family, weight, size, etc. are found.
    • Specific Typography Options – To customize specific typography options, such as Menu, Page Title bar, Sliding Bar, Footer, and the like, navigate to their specific panels to access their different typography options such as font family, weight, size, etc.

    Specific Typography Options

    • Main Menu Typography Options – Navigate to the Avada > Theme Options > Menu > Main Menu panel, then go to the Main Menu Typography section. View here.
    • Flyout Menu Typography Options – Navigate to the Avada > Theme Options > Menu > Flyout Menu panel. View here.
    • Secondary Top Menu Typography Options – Navigate to the Avada > Theme Options > Menu > Secondary Top Menu panel. View here.
    • Mobile Menu Typography Options – Navigate to the Avada > Theme Options > Menu > Main Menu panel, then go to the Mobile Menu Typography section. View here.
    • Page Title Bar Typography Options – Navigate to the Avada > Theme Options > Page Title Bar panel, then go to the Page Title Bar Styling section. View here.
    • Breadcrumbs Typography Options – Navigate to the Avada > Theme Options > Page Title Bar > Breadcrumbs panel. View here.
    • Sliding Bar Typography Options – Navigate to the Avada > Theme Options > Sliding Bar panel, then go to the Sliding Bar Styling section. View here.
    • Footer Typography Options – Navigate to the Avada > Theme Options > Footer > Footer Styling panel, then go to the Footer Typography section. View here.
    • Sidebars Typography Options – Navigate to the Avada > Theme Options > Sideabrs > Sidebar Styling panel. View here.
    • Button Shortcode Typography Options – Navigate to the Avada > Theme Options > Shortcode Styling panel, then go to the Button Shortcode section. View here.
    • Content Box Shortcode Typography Options – Navigate to the Avada > Theme Options > Shortcode Styling panel, then to the Content Box section. View here.
    • Counter Boxes Shortcode Typography Options – Navigate to the Avada > Theme Options > Shortcode Styling panel, then to the Counter Boxes section. View here.
    • Blog Meta Typography Options – Navigate to the Avada > Theme Options > Blog > Blog Meta panel. View here.
    • Elastic Slider Typography Options – Navigate to the Avada > Theme Options > Elastic Slider panel. View here.
    • Pagination Typography Options – Navigate to the Avada > Theme Options > Extra > Pagination panel. View here.
    • Form Typography Options – Navigate to the Avada > Theme Options > Extra > Form Styling panel. View here.
    • bbPress & BuddyPress Typography Options – Navigate to the Avada > Theme Options > bbPress & BuddyPress panel. View here.
    • WooCommerce Typography Options – Navigate to the Avada > Theme Options > WooCommerce > WooCommerce Styling panel. View here.
    • Events Calendar Typography Options – Navigate to the Avada > Theme Options > Events Calendar > General Events Calendar panel. View here.
    • Events Single Post Typography Options – Navigate to the Avada > Theme Options > Events Calendar > Events Single Posts panel. View here.

    Typography Options Setup

    Font Family – Illustrated as A on the screenshot, this option allows you to select a font family to use.

    Backup Font Family – Illustrated as B on the screenshot, this option allows you to select a backup font family to use incase the primary font doesn’t load correctly.

    Font Weight and Style – Illustrated as C on the screenshot, this option allows you to select a font weight and style to use.

    Font Subsets – Illustrated as D on the screenshot, this option allows you to select which subset to use.

    Font Size – Illustrated as E on the screenshot, this option allows you to set the size of the text on display.

    Line Height – Illustrated as F on the screenshot, this option allows you to set the spacing between lines.

    Letter Spacing – Illustrated as G on the screenshot, this option allows you to set the spacing between letters.

    Margin Top – Illustrated as H on the screenshot, this option allows you to set the top margin of the text.

    Margin Bottom – Illustrated as I on the screenshot, this option allows you to set the bottom margin of the text.

    Font Color – Illustrated as J on the screenshot, this option allows you to set the color of the text.


    Custom Fonts

    Along with the new Typography options, you can also upload as many custom fonts as you want. You can upload custom fonts by navigating to the Avada > Theme Options > Typography > Custom Fonts tab. If you’d like to learn how to upload custom fonts, please read our ‘Custom Fonts’ article linked below.

    Click Here To Read Our ‘Custom Fonts’ Article

    Responsive Heading Typography

    IMPORTANT NOTE – This option is located in the Theme Options > Responsive tab in Avada 3.8.8 and up.

    The Responsive Heading Typography option allows you to enable or disable responsiveness for all headings. Please note that this is based on a calculation of font size and screen width and is done automatically. This helps your layout look more proportionate on smaller sizes. You can also use the ‘Responsive Typography Sensitivity’ option and the ‘Minimum Font Size Factor’ option to further adjust the responsiveness.


    Font Sizes

    Heading Font Size H1
    • Page Title Bar – Affects the font size of titles inside all Page Title Bars. View a sample here.
    • Title Shortcode – Affects the font size of text set to H1 inside all Title Shortcodes. View a sample here.
    Heading Font Size H2
    • Tagline Box Shortcode – Affects the font size of titles inside all Tagline Box Shortcodes. View a sample here.
    • Content Box Shortcode – Affects the font size of the titles inside all Content Box Shortcodes. View a sample here.
    • Flip Box Shortcode – Affects the font size of the Frontside Heading inside all Flip Box Shortcodes. View a sample here.
    • Title Shortcode – Affects the font size of text set to H2 inside all Title Shortcodes. View a sample here.
    Heading Font Size H3
    • Pricing Table Shortcode – Affects the font size of titles inside all Pricing Table Shortcodes. View a sample here.
    • Modal Popup – Affects the font size of titles inside all Modal Popup windows. View a sample here.
    • Title Shortcode – Affects the font size of text set to H3 inside all Title Shortcodes. View a sample here.
    Heading Font Size H4
    • Flip Box Shortcode – Affects the font size of the Backside Heading inside all Flip Box Shortcodes. View a sample here.
    • Person Shortcode – Affects the font size of the Name Option inside all Person Shortcodes. View a sample here.
    • Person Shortcode – Affects the font size of the Title Option inside all Person Shortcodes. View a sample here.
    • Popover Shortcode – Affects the font size of titles inside all Popover Shortcodes. View a sample here.
    • Recent Posts Shortcode – Affects the font size of titles inside all Recent Work Shortcodes. View a sample here.
    • Tabs Shortcode – Affects the font size of titles inside all Tabs Shortcodes. View a sample here.
    • Toggles Shortcode – Affects the font size of titles inside all Toggles Shortcodes. View a sample here.
    • Title Shortcode – Affects the font size of text set to H4 inside all Title Shortcodes. View a sample here.
    • Image Rollover – Affects the font size of titles on all Image Rollovers. View a sample here.
    • FAQ Titles – Affects the font size of titles on all FAQ items. View a sample here.
    Heading Font Size H5
    • Sharing Box Shortcode – Affects the font size of titles inside all Sharing Box Shortcodes. View a sample here.
    • Title Shortcode – Affects the font size of text set to H5 inside all Title Shortcodes. View a sample here.
    Heading Font Size H6
    • Title Shortcode – Affects the font size of text set to H6 inside all Title Shortcodes. View a sample here.

    Other Font Sizes

    • Body Font Size – Affects the font size of all text within your website that does not have a special, custom option. View a sample here.
    • Main Menu Font Size – Affects the font size of all navigation or menu items on your website. This does not include submenu items. View a sample here.
    • Main Menu Dropdown Font Size – Affects the font size of all submenus of menu items on your website. This includes mega menus. View a sample here.
    • Secondary Menu & Top Contact Info Font Size – Affects the font size of all text in the top bar when using Header designs #2 – #5. View a sample here and here.
    • Side Menu Font Size – Affects the font size of all sidebar navigation items on your website. View a sample here.
    • Mobile Menu Font Size – Affects the font size of menu items in mobile devices. View a sample here.
    • Breadcrumbs Font Size – Affects the font size of breadcrumbs inside all Page Title Bars. View a sample here.
    • Sidebar Widget Heading Font Size – Affects the font size of all sidebar widget headings on your website. View a sample here.
    • Sliding Bar Widget Heading Font Size – Affects the font size of all Sliding Bar widget headings in your sliding bar. View a sample here.
    • Footer Widget Heading Font Size – Affects the font size of all footer widgets in your footer. View a sample here.
    • Copyright Font Size – Affects the font size of copyright text on the very bottom of your website. View a sample here.
    • Post Titles Font Size – Affects the font size of titles inside all Blog and Portfolio Posts. View a sample here and here.
    • Post Titles Extras Font Size – Affects the Comment, Related Posts, Related Projects and Author Titles inside all Blog Posts. View a sample here, here and here.
    • Header Tagline Font Size – Affects the font size of headlines in the top menus found in Header design #3. View a sample here.
    • Meta Data Font Size – Affects the font size of all meta data on your website. View a sample here.
    • Page Title Font Size – Affects the font size of titles inside all Page Title Bars. View a sample here.
    • Page Title Subheader Font Size – Affects the font size of subheaders inside all Page Title Bars. View a sample here.
    • Pagination Font Size – Affects the font size of all paginations on your website. View a sample here.
    • WooCommerce Icon Font Size – Affects the font size of the add to cart and details on your shop page. View a sample here and here.

    Font Line Heights

    Heading Font Line Height H1
    • Page Title Bar – Affects the font line height of titles inside all Page Title Bars. View a sample here.
    • Title Shortcode – Affects the font line height of text set to H1 inside all Title Shortcodes. View a sample here.
    Heading Font Line Height H2
    • Tagline Box Shortcode – Affects the font line height of titles inside all Tagline Box Shortcodes. View a sample here.
    • Blog Post – Affects the font line height of titles inside all Blog Posts. View a sample here.
    • Portfolio Post – Affects the font line height of titles inside all Portfolio Posts. View a sample here.
    • Content Box Shortcode – Affects the font line height of titles inside all Content Box Shortcodes. View a sample here.
    • Flip Box Shortcode – Affects the font line height of the Frontside Heading inside all Flip Box Shortcodes. View a sample here.
    • Author Title – Affects the font line height of the Author Title Heading inside all Blog Posts. View a sample here.
    • Related Posts – Affects the font line height of the Related Posts Heading inside all Blog Posts. View a sample here.
    • Leave A Comment – Affects the font line height of the Leave A Comment Heading inside all Blog Posts. View a sample here.
    • Title Shortcode – Affects the font line height of text set to H2 inside all Title Shortcodes. View a sample here.
    Heading Font Line Height H3
    • Pricing Table Shortcode – Affects the font line height of titles inside all Pricing Table Shortcodes. View a sample here.
    • Modal Popup – Affects the font line height of titles inside all Modal Popup windows. View a sample here.
    • Title Shortcode – Affects the font line height of text set to H3 inside all Title Shortcodes. View a sample here.
    Heading Font Line Height H4
    • Flip Box Shortcode – Affects the font line height of the Backside Heading inside all Flip Box Shortcodes. View a sample here.
    • Person Shortcode – Affects the font line height of the Name Option inside all Person Shortcodes. View a sample here.
    • Person Shortcode – Affects the font line height of the Title Option inside all Person Shortcodes. View a sample here.
    • Popover Shortcode – Affects the font line height of titles inside all Popover Shortcodes. View a sample here.
    • Recent Posts Shortcode – Affects the font line height of titles inside all Recent Work Shortcodes. View a sample here.
    • Tabs Shortcode – Affects the font line height of titles inside all Tabs Shortcodes. View a sample here.
    • Toggles Shortcode – Affects the font line height of titles inside all Toggles Shortcodes. View a sample here.
    • Title Shortcode – Affects the font line height of text set to H4 inside all Title Shortcodes. View a sample here.
    • Image Rollover – Affects the font line height of titles on all Image Rollovers. View a sample here.
    Heading Font Line Height H5
    • Sharing Box Shortcode – Affects the font line height of titles inside all Sharing Box Shortcodes. View a sample here.
    • Title Shortcode – Affects the font line height of text set to H5 inside all Title Shortcodes. View a sample here.
    Heading Font Line Height H6
    • Title Shortcode – Affects the font line height of text set to H6 inside all Title Shortcodes. View a sample here.
    Body Font Line Height
    • Default Body Content – Affects the font line height of all text within your website that does not have a special, custom option. View a sample here.
    Secondary Menu Line Height
    • Top Menu Headline – Affects the font line height of headlines in the top menus found in Header design #3. View a sample here.

    Font Weights

    • Select Body Font Weight – Affects the font weight of all text within your website that does not have a special, custom option. View a sample here.
    • Select Menu Font Weight – Affects the font weight of all navigation or menu items on your website. This does not include submenu items. View a sample here.
    • Select Headings Font Weight – Affects the font weight of all headings on your website. View a sample here.
    • Select Footer Headings Font Weight – Affects the font weight of all footer headings on your website. View a sample here.
    • Select Button Font Weight – Affects the font weight of all button texts on your website. View a sample here.

    Font Letter Spacing

    • Heading H1 – H6 Letter Spacing – Affects the letter spacing of all H1 – H6 Headings on your website.
    • Menu Letter Spacing – Affects the letter spacing of all navigation or menu items on your website. This does not include submenu items. View a sample here.
    • Button Letter Spacing – Affects the letter spacing of all button texts on your website. View a sample here.

    Font Margins

    Under the Typography tab, you can also adjust the Top and Bottom margins of H1 to H6 headings. These options are especially useful if you’d like to manually tweak your headings to fit your website better. Take note that these options accept em units instead of pixel units.

    Column Spacing

    10/20/2016

    Column spacing plays a huge factor in designing a creative website. Avada gives you the freedom to choose the amount of column spacing that shows between columns. There are global options, and element options. Please read below to learn about each area that offers column spacing options.

    Blog Element With A Grid Layout

    Step 1 – Add a Blog Element by clicking the ‘+ Element’ button in a column.

    Step 2 – Click the ‘Element Settings’ icon on the Blog Element, then set the ‘Blog Layout’ option to Grid.

    Step 3 – Locate the ‘Grid Layout Column Spacing’ option. Drag the slider to your desired column spacing value, or simply enter it in the text box provided. For example, 20.

    Step 4 – Once finished, click ‘Save’.

    IMPORTANT NOTE
    Column Spacing for the Blog Element only works for the Grid Layout.

    Portfolio Element With A Grid Layout

    Step 1 – Add a Portfolio Element by clicking the ‘+ Element’ button in a column.

    Step 2 – Click the ‘Element Settings’ icon on the Portfolio Element, then set the Layout option either to Grid, or Grid with Text.

    Step 3 – Locate the ‘Column Spacing’ option. Set your desired column spacing value in the text box provided. For example, 20. You can also click the ‘Use Default Value’ radio field to use the default value set in Theme Options.

    Step 4 – Once finished, click ‘Save’.

    IMPORTANT NOTE
    Column Spacing for the Portfolio Element only works for the Grid, and Grid with Text Layout.

    Image Carousel Element

    Step 1 – Add an Image Carousel Element by clicking the ‘+ Element’ button in a column.

    Step 2 – Click the ‘Element Settings’ icon on the Image Carousel Element.

    Step 3 – Locate the ‘Column Spacing’ option. Set your desired column spacing value in the text box provided. For example, 13.

    Step 4 – Once finished, click ‘Save’.

    IMPORTANT NOTE
    This option is only available with Avada version 3.8 or above.

    Column Element

    Step 1 – Click the ‘Column Settings’ icon on the Column Element.

    Step 2 – Locate the ‘Column Spacing’ option. Set your desired column spacing value in the text box provided. For example, 20.

    Step 3 – Once finished, click ‘Save’.

    WooCommerce Featured Products Element

    Step 1 – Add a Woo Featured Element by clicking the ‘+ Element’ button in a column.

    Step 2 – Click the ‘Element Settings’ icon on the Woo Featured Element.

    Step 3 – Locate the ‘Column Spacing’ option. Set your desired column spacing value in the text box provided. For example, 13.

    Step 4 – Once finished, click ‘Save’.

    WooCommerce Carousel Element

    Step 1 – Add a Woo Carousel Element by clicking the ‘+ Element’ button in a column.

    Step 2 – Click the ‘Element Settings’ icon on the Woo Carousel Element.

    Step 3 – Locate the ‘Column Spacing’ option. Set your desired column spacing value in the text box provided. For example, 13.

    Step 4 – Once finished, click ‘Save’.

    Step 1 – Navigate to Avada > Theme Options > Extra > Related Posts / Projects tab.

    Step 2 – On this tab, locate the ‘Related Posts / Projects Column Spacing’ option. Drag the slider to your desired column spacing value, or simply enter it in the text box provided. For example, 44.

    Step 3 – Once you’re happy with your settings, click the ‘Save Changes’ button.

    Fusion Theme Options

    Inside the Fusion Theme Options which is located in Avada > Theme Options, there are also options for column spacing specifically in the Blog and Portfolio tab. These options only affect the Blog Grid and Portfolio pages, but not the Blog and Portfolio elements. Column spacing for the Blog and Portfolio elements must be set individually per element.

    To access this, navigate to Avada > Theme Options > Blog > General Blog.


    To access this, navigate to Avada > Theme Options > Portfolio > General Portfolio.


    FAQ Post Options

    11/02/2016

    In addition to all the standard Fusion Page Options, Avada offers several exclusive options for you to use for each individual FAQ item. When creating or editing a portfolio post, scroll below the WordPress Content Editor to find the FAQ tab inside the Fusion Page Options box. Inside that tab are all the individual FAQ settings, and page settings that can be set for each FAQ item. In addition, we’ve listed the rest of the tabs you will see when editing a portfolio post.

    IMPORTANT NOTE – Fusion Page Options will override the global options set in Fusion Theme Options.
    Click Here To Learn More About Avada’s Options Network System

    Image Rollovers

    10/20/2016
    IMPORTANT NOTE – These Image Rollovers are different from the Image Hover Effect for regular images.

    Image Rollovers are stylish overlays for your blog and portfolio images. They come with numerous customization options that allow you to control styling, visibility, actions and more. The Image Rollover options are located in Avada > Theme Options > Extra > Featured Image Rollover tab. You can also set some options individually under the Fusion Page Options in each blog or portfolio post. Continue reading below for more information on these options.

    Image Rollover Fusion Theme Options

    Located in the Avada > Theme Options > Extra > Featured Image Rollover tab. See our How Options Work article to learn more.

    Image Rollover – Illustrated as A, this option lets you enable or disable Image Rollovers. Choose On or Off.

    Image Rollover Direction – Illustrated as B, this option lets you set the rollover animation’s starting direction when activated. Choose between Fade, Left, Right, Bottom, Top, Center Horizontal, or Center Vertical.

    Image Rollover Icon Font Size – Illustrated as C, this option accepts a pixel value that sets the icon’s font size. For example, 15px.

    Image Rollover Link Icon – Illustrated as D, this option lets you show or hide the image rollover’s Link Icon. Choose On or Off.

    Image Rollover Zoom Icon – Illustrated as E, this option lets you show or hide the image rollover’s Zoom Icon. Choose On or Off.

    Image Rollover Title – Illustrated as F, this option lets you show or hide the title. Choose On or Off.

    Image Rollover Categories – Illustrated as G, this option lets you show or hide the categories. Choose On or Off.

    Image Rollover Icon Circle – Illustrated as H, this option lets you display the image rollover icons in a circular background. Choose On to display it in a circular background, or Off to display just the icons.

    Image Rollover Gradient Top Color – Illustrated as I, this option accepts a hexcode value that sets the top gradient color.

    Image Rollover Gradient Bottom Color – Illustrated as J, this option accepts a hexcode value that sets the bottom gradient color.

    Image Rollover Element Color – Illustrated as K, this option sets the text and icon background colors.

    Image Rollover Icon Color – Illustrated as L, this option sets the icon’s color.


    Image Rollover Fusion Page Options

    If you do not want the same global settings for each post, you can set them individually under the Fusion Page Options box in each blog or portfolio post. Navigate to the post you’d like to change, then locate the ‘Image Rollover Icons’ option in the Fusion Page Options > Post tab or the Fusion Page Options > Portfolio tab. You can choose which icons to display using this option. The Default value will pull whatever option is set in Fusion Theme Options. To override this, simply choose an option other than Default.


    iLightbox

    10/20/2016
    IMPORTANT NOTE
    iLightbox is only available for Avada versions 3.8 or higher. Older versions will continue to use PrettyPhoto. Once older versions are updated to 3.8 or higher, Avada will automatically use the new iLightbox.

    The revolutionary iLightbox has now replaced the PrettyPhoto lightbox in Avada version 3.8. Below you’ll find a detailed description on each Fusion Theme Option available for the lightbox, as well as the Lightbox element and the other elements that utilize the lightbox.

    Lightbox Theme Options

    To access these options, Navigate to Avada > Theme Options > Lightbox.

    Lightbox – Illustrated as A, this option lets you enable or disable the lightbox. Choose between On or Off.

    Lightbox On Single Posts Pages – Illustrated as B, this option lets you enable or disable the lightbox on single blog and portfolio pages. Choose from On or Off.

    Lightbox Behavior – Illustrated as C, this option lets you set what the lightbox will display for portfolio and blog posts. Choose between First Featured Image of Every Post, or Only Featured Image of Individual Post.

    Lightbox Skin – Illustrated as D, this option lets you set a lightbox skin. Choose between Light, Dark, Mac, Metro Black, Metro White, Parade or Smooth.

    Thumbnails Position – Illustrated as E, this option lets you set the position of the thumbnails in the lightbox. Choose between Right or Bottom.

    Animation Speed – Illustrated as F, this option lets you set the animation speed. Choose between Fast, Slow or Normal.

    Arrows – Illustrated as G, this option lets you enable or disable navigation arrows. Choose from On or Off.

    Gallery Start/Stop Button – Illustrated as H, this option lets you enable or disable the gallery start/stop button. Choose from On or Off.

    Autoplay The Lightbox Gallery – Illustrated as I, this option lets you enable or disable the lightbox gallery’s autoplay feature. Choose from On or Off.

    Slideshow Speed – Illustrated as J, this option lets you enter a numerical value that sets the slideshow speed if the ‘Autoplay The Lightbox Gallery’ option is enabled. For example, 1000 = 1 second.

    Background Opacity – Illustrated as K, this option lets you enter a numerical value that sets the background opacity. For example, 0.1 (transparent) or 1 (opaque).

    Title – Illustrated as L, this option lets you enable or disable image titles in the lightbox. Choose from On or Off.

    Caption – Illustrated as M, this option lets you enable or disable the image captions in the lightbox. Choose from On or Off.

    Social Sharing – Illustrated as N, this option lets you show or hide the social sharing button in the lightbox. Choose from On or Off.

    Deeplinking – Illustrated as O, this option lets you enable or disable deep linking image in the lightbox. Choose from On or Off.

    Show Post Images In Lightbox – Illustrated as P, this option lets you show or hide post images that are inside the post content area of the lightbox. Choose from On or Off.

    Slideshow Video Dimensions – Illustrated as Q, this option accepts a pixel value that lets you control the width and height of videos inside the lightbox. For example, 600px.


    Lightbox Element Options

    To access the Lighbox Element options, you must first add a Lightbox Element via the Element Generator found in the WordPress Content Editor toolbar. Learn more about Content Based Elements here.

    Full Image – Illustrated as A, this option lets you upload an image to display.

    Thumbnail Image – Illustrated as B, this option lets you upload a thumbnail image. Clicking this image will open the lightbox.

    Alt Text – Illustrated as C, this option lets you enter alternative text in case the full image cannot be displayed.

    Lightbox Description – Illustrated as D, this option lets you enter a description for the lightbox that will appear underneath the image.

    CSS Class – Illustrated as E. Add a class to the wrapping HTML element.

    CSS ID – Illustrated as F. Add an ID to the wrapping HTML element.


    Other Lightbox Options

    Image Carousel Element

    In the Image Carousel Element, you can choose to display your images in a lightbox. To display images in a lightbox, simply select Yes on the Image Lightbox option.


    Image Frame Element

    In the Image Frame Element, you can choose to upload and display an image in a lightbox, different from the image you choose to display inside the Image Frame. To enable that, simply select Yes on the Image Lightbox option. To upload a different display image to display on the lightbox, click the Upload button in the Lightbox Image field and select an image from your Media Library or upload a new one.


    Post Slider Element

    In the Post Slider Element, you can choose to display images in a lightbox, only if the Post Slider is set to the Attachment layout. To enable that, select Yes on the Lightbox on Click option.


    Slider Element

    In the Slider Element, you can choose to display your slider images in a lightbox. To enable that, select Yes to the Lightbox option in each slider item tab.


    Page Options for Portfolio Pages

    When editing portfolio pages, you can add a YouTube or Vimeo video to a lightbox. Enter the URL of the video in the Youtube/Vimeo Video URL for Lightbox field located in the Fusion Page Options > Portfolio section.


    WooCommerce Options

    10/20/2016

    Below is a detailed list of the various options Avada has for WooCommerce on the Fusion Theme Options panel. Continue reading below to learn more about the different WooCommerce Fusion Theme Options.

    IMPORTANT NOTE
    This panel is visible only when the WooCommerce plugin is activated. This eliminates irrelevant options to your current setup if not in use.

    Fusion Theme Options – WooCommerce

    The WooCommerce options are located in the Avada > Theme Options > WooCommerce section.

    General WooCommerce Options

    WooCommerce Number of Products Per Page – Illustrated as A, this option allows you to set the number of products per page. (1-50/page)

    WooCommerce Number of Product Columns – Illustrated as B, this option allows you to set the number of columns for the main shop page. (1-6 columns)

    WooCommerce Related/Up-Sell/Cross-Sell Product Number of Columns – Illustrated as C, this option allows you to set the number of columns for the related products, up-sell products on single posts and cross-sells on cart page. (1-6 columns)

    WooCommerce Archive Number of Product Columns – Illustrated as D, this option allows you to set the number of columns for the archive pages. (1-6 columns)

    WooCommerce Shop Page Ordering Boxes – Illustrated as E, this option allows you to turn the shop page ordering boxes On or Off.

    WooCommerce Shop Page Crossfade Image Effect – Illustrated as F, this option allows you to turn the crossfade effect on product images on the shop page On or Off.

    WooCommerce One Page Checkout – Illustrated as G, this option allows you to turn the one page checkout template On or Off.

    WooCommerce Order Notes on Checkout – Illustrated as H, this option allows you to turn the order notes on the checkout page On or Off.

    WooCommerce Menu Cart Icon Counter – Illustrated as I, this option allows you to turn the WooCommerce cart counter circle On or Off.

    Woocommerce My Account Link in Main Menu – Illustrated as J, this option allows you to turn the “My Account” link in the main menu On or Off. Not compatible with Ubermenu.

    WooCommerce Cart Icon In Main Menu – Illustrated as K, this option allows you to turn the cart icon in the main menu On or Off. Not compatible with Ubermenu.

    Woocommerce My Account Link in Secondary Menu – Illustrated as L, this option allows you to turn the “My Account” link in the secondary menu On or Off. Not compatible with Ubermenu.

    WooCommerce Cart Icon In Secondary Menu – Illustrated as M, this option allows you to turn the cart icon in the secondary menu On or Off. Not compatible with Ubermenu.

    WooCommerce Social Icons – Illustrated as N, this option allows you to turn the social icons on single product posts On or Off.

    WooCommerce Product Grid / List View – Illustrated as O, this option allows you to turn the grid/list toggle on the main and archive shop pages On or Off.

    Avada’s WooCommerce Product Gallery Slider – Illustrated as P, this option allows you to turn Avada’s product gallery slider On or Off.

    WooCommerce Account Area Message 1 – Illustrated as Q, this option allows you to insert custom text that will appear in the 1st message box on the account page.

    WooCommerce Account Area Message 2 – Illustrated as R, this option allows you to insert custom text that will appear in the 2nd message box on the account page.


    WooCommerce Styling

    WooCommerce Product Box Design – Illustrated as A, this option allows you to Control the design of the product boxes. Choose from Classic or Clean.

    WooCommerce Product Tab Design – Illustrated as B, this option allows you to control the design of the single product post tabs. Choose from these options: Horizontal Tabs or Vertical Tabs.

    WooCommerce Quantity Box Background Color – Illustrated as C, this option allows you to control the background color of the WooCommerce quantity box.

    WooCommerce Quantity Box Hover Background Color – Illustrated as D, this option allows you to control the hover color of the WooCommerce quantity box.

    WooCommerce Order Dropdown Background Color – Illustrated as E, this option allows you to control the background color of the WooCommerce cart dropdown.

    WooCommerce Order Dropdown Text Color – Illustrated as F, this option allows you to control the color of the text and icons in the WooCommerce cart dropdown.

    WooCommerce Order Dropdown Border Color – Illustrated as G, this option allows you to control the border color in the WooCommerce cart dropdown.

    WooCommerce Cart Menu Background Color – Illustrated as H, this option allows you to control the bottom section background color of the WooCommerce cart dropdown.

    WooCommerce Icon Font Size – Illustrated as E, this option allows you to control the font size of the WooCommerce icons. Enter a value including CSS unit (px, em, rem), example: 12px.


    Page Top & Bottom Padding

    10/20/2016

    Each page you create with Avada will have default top and bottom padding applied. The page top padding starts directly below the header, and the page bottom padding directly above the footer area as illustrated below. Aside from the main header, there are also some elements on your page that may sit above the top padding, such as the Page Title Bar, and Sliders in some cases.

    Page Padding Options

    Fusion Theme Options

    You can set a global top and bottom padding for the page content in Avada > Theme Options > Layout tab under the Layout section. This can be overridden on individual pages via the Fusion Page Options.

    Fusion Page Options

    You can choose to set the top and bottom padding for individual pages in the Page tab in the Fusion Page Options box. This will override the global option set in the Fusion Theme Options.

    Pages With Sliders

    Sliders Added Via Fusion Page Options

    If you add a Fusion, Revolution or Layer slider using the Fusion Page Options, then the slider will sit above the top padding. This means that setting a Top Page Padding will not affect the slider.


    Sliders Added Via Builder Elements

    If you add a Fusion, Revolution or Layer Slider using one of the slider elements in the Fusion Builder, then the slider will sit below the top padding. This means that setting a Top Page Padding will affect the slider.


    IMPORTANT NOTE – If your page does not have a Page Title Bar, the top padding will start directly under the main header.

    Responsive Breakpoints

    10/20/2016
    IMPORTANT NOTE – This option is only available in Avada version 3.8.8 or higher.

    Avada includes 4 Responsive Breakpoint options. The ability to change the Header, Site Content, Sidebars and Grid Responsive Breakpoint. These options are located in the Theme Options > Responsive tab. Continue reading below to learn what a responsive breakpoint is, and what these 4 options do.

    What Is A Responsive Breakpoint?

    A responsive breakpoint is a specific pixel value that allows the normal layout to change to the responsive layout. For example, if you enter 800px for the ‘Header Responsive Breakpoint’ option, then your header will change to the responsive mobile header at 800px wide.

    Responsive Breakpoint Options

    Grid Responsive Breakpoint – Illustrated as A, this option controls when blog/portfolio grid layouts start to break into smaller columns. Further breakpoints are auto calculated. Accepts a numeric value in pixels (px). For example, 1000.

    Header Responsive Breakpoint – Illustrated as B, this option controls when the desktop header changes to the mobile header. For side headers, the recommended breakpoint is 800px + the side header width. Accepts a numeric value in pixels (px). For example, 800.

    Site Content Responsive Breakpoint – Illustrated as C, this option controls when the site content area changes to the mobile layout. This includes all content below the header including the footer. If you are using a side header, the breakpoint value you enter will automatically include the side header width. Accepts a numeric value in pixels (px). For example, 800.

    Sidebar Responsive Breakpoint – Illustrated as D, this option controls when the sidebars change to the mobile layout. Accepts a numeric value in pixels (px). For example, 800.

    How To Set The Responsive Breakpoint Options

    Step 1 – Navigate to the Avada > Theme Options > Responsive tab on your WordPress admin sidebar.

    Step 2 – Find the Responsive Breakpoint option that you’d like to set.

    Step 3 – Enter a numeric value in pixels (px) to set as your breakpoint or drag the slider left/right. For example, 800. If you’re entering a Mobile Header Responsive Breakpoint, please note that for side headers, the recommended breakpoint is 800 plus the side header width. For example, if your side header width is 250px the recommended breakpoint would be 1050.


    Site Width

    10/20/2016

    Avada includes various options that control the overall Site Width, Content and Sidebar Width. You can also choose between a boxed or wide layout for your pages. All these options are located under Appearance > Theme Options > Layout. To learn more about these various options, keep reading below.

    Layout Options

    The Theme Options layout section makes it easy for you to manage your sites layout type, width, padding and sidebar layouts. Choose between Boxed and Wide layouts, set page content padding, 100% width pages’ left and right padding, adjust the top and bottom margins for all column sizes and single and dual sidebar layouts.

    Layout – Illustrated as A. Choose between: Boxed or Wide for your site. These are global Theme Options and can be overridden by individual page Fusion Options on a page by page basis. The Boxed option will restrict your sites width to the value set in the site width option, using any valid CSS unit for example: 1170px – In boxed mode it is possible to set a background image, background pattern or a background color for your site. The Wide option will display your site at the width set in the site width option, using any valid CSS unit for example: 1170px or 100% width of the browser window.

    Site Width – Illustrated as B. This option allows you to set the overall site width in boxed or wide layout. You can use a pixel value (px), or a percentage (%). If you’d like your site to span the full browser width enter 100% as a value. If you’d prefer a set size, you can enter something like 1170px. To further customize your site’s layout, we also have left and right padding options for the Header, Footer and Main Content Area found in Theme Options.

    Page Content Padding – Illustrated as C. These options control the top and bottom padding for all your page content. To learn more about this option, please read our ‘Page Content Padding’ article.

    100% Width Left/Right Padding – Illustrated as D. This option controls the left and right padding for page content when using 100% site width or 100% width page template. Enter value including any valid CSS unit, for example: 30px

    Column Margins – Illustrated as E. This option controls the top and bottom margin for all column sizes. Enter value including any valid CSS unit, for example: 0px 20px


    Single and Dual Sidebar Layouts

    Here you can control single and dual sidebar layouts for your site.

    Single Sidebar Width – Illustrated as A. This option controls the width of a single sidebar on all pages. Enter value including any valid CSS unit, for example: 23% – Click here to see a demo example of a single sidebar layout.

    Dual Sidebar Width 1 – Illustrated as B. This option controls the width of sidebar 1 when dual sidebars are present. Enter value including any valid CSS unit, for example: 21% – Click here to see a demo example of a dual sidebar layout.

    Dual Sidebar Width 2 – Illustrated as C. This option controls the width of sidebar 2 when dual sidebars are present. Enter value including any valid CSS unit, for example: 21% – Click here to see a demo example of a dual sidebar layout.


    Color Settings

    10/20/2016
    IMPORTANT NOTE – This feature is only available in Avada version 4.0 or higher

    Color management is an integral part of designing and maintaining your website design and branding, this is why we have improved our color selector feature to allow you to manage your color settings with ease. We’ve added a simple transparency slider that allows you to set a transparent or semi-transparent color for different elements such as backgrounds, dividers, borders, and the like. Continue reading below to learn about the new color selector.

    How To Use The Color Selector

    IMPORTANT NOTE – Options like font and icon colors do not accept transparent settings.

    Step 1 – Decide which color option you would like to adjust. For this example, let’s look at the ‘Button Gradient Top Color’ option located in the Avada > Theme Options > Fusion Builder Elements section.

    Step 2 – To bring up the color selector, click the ‘Select Color’ button.

    Step 3 – Drag the circle, illustrated as A, with your mouse over the spectrum to choose a color. If you have a particular color in mind, you can instead add the unique hexcode in field provided, illustrated as B. For example, #000000

    Step 4 – Control the saturation of the spectrum by moving the first slider on the right up or down, illustrated as C. The lower the slider, the less saturated the colors.

    Step 5 – Control the transparency of your chosen color by moving the rightmost slider up or down, illustrated as D. Adding transparency converts the hexcode to RGBA.

    Step 6 – Press the ‘Default’ button to revert the color back to the default color.


    Responsive Headings

    10/20/2016
    IMPORTANT NOTE – This feature is only available in Avada 3.8 or higher.

    As of Avada 3.8, we included new Responsive Heading Typography options. These are global options that can be set in the Theme Options > Responsive section. Responsive Typography options have also been built into the Fusion Slider. Continue reading below to learn more about each option and how to set them up.

    • Responsive Heading Typography – Turn on for headings to change font size responsively.
    • Responsive Typography Sensitivity – Values below 1 decrease resizing, values above 1 increase sizing, in pixels.
    • Minimum Font Size Factor – Minimum font factor is used to determine the minimum distance between headings and body font by a multiplying value, in pixels.

    How To Manage Responsive Options Globally In Theme Options

    Located here -> Theme Options > Responsive > Responsive Heading Typography

    Step 1 – Switch the Responsive Heading Typography option to ‘On’ to enable and to display the ‘Responsive Typography Sensitivity’ and ‘Minimum Font Size Factor’ options.

    Step 2 – Adjust the Responsive Typography Sensitivity by dragging the slider left to a value below 1 to decrease resizing and right to a value above 1 to increase resizing. and Minimum Font Size Factor settings to fit your needs.

    Step 3 – Adjust the Minimum Font Size Factor by dragging the slider left or right to determine the minimum distance between headings and body font by a multiplying value, in pixels.

    Step 4 – Click the ‘Save Changes’ to save your settings.


    How To Manage Responsive Type For A Fusion Slider

    Aside from the Fusion Theme Options, you can also set the Responsive Type options in each Fusion Slider.

    IMPORTANT NOTE
    The Fusion Slider responsive typography settings are independent of the Theme Option settings and only apply to the individual Fusion Slider.

    Located here -> Fusion Slider > Add/Edit Sliders

    Step 1 – Select an existing slider or create a new one. At the bottom of the settings you will see the Responsive Typography Sensitivity options.

    Step 2 – Enter the Responsive Typography Sensitivity and Mininum Font Size Factor settings to suit your needs.

    Step 3 – Click the ‘Update’ to save your settings.


    Common Issues & Questions

    1. My headings are too big for mobile and are being cut off

    This means that your responsive settings are probably not set correctly. Please check the Responsive Typography Sensitivity and Minimum Font Size Factor settings in theme options and ensure the values are correct. Responsive Typography Sensitivity will increase or decrease the amount of resizing. Values below 1 decrease resizing, and values above 1 increase resizing, in pixels. Minimum Font Size Factor is used to determine the minimum distance between headings and body type by a multiplying value, in pixels.

    How To Set Font Weights and Styles

    10/20/2016
    IMPORTANT NOTE – This feature is only available on Avada version 4.0 or higher.

    With the new Typography options in the Theme Options panel, it’s now easier than ever to set font weights and styles. All available font weight and styles for each font are automatically available for you to choose. Please continue reading below to learn how to set font weights and styles for fonts.

    How To Set Font Weights and Styles

    Step 1 – Navigate to the Avada > Theme Options panel, then go to the font you’d like to customize. For example, the body text found in the Avada > Theme Options > Typography > Body Typography panel.

    Step 2 – Once you’ve found the font you’d like to customize, simply select the font weight and style you’d like to use under the Font Weight & Style option.

    Step 3 – When you’re happy with the changes you’ve made, don’t forget to click the ‘Save Changes’ button to save them.


    Custom Color Schemes

    10/20/2016
    IMPORTANT NOTE – This feature is only available in Avada version 5.0 or higher.

    In Avada 5.0, we’ve introduced a new feature that lets you save your site’s current color scheme. This includes all the color settings you’ve set in the Fusion Theme Options panel, such as your menu, link, hover, button colors and the like! This feature also lets you update, export and import your settings with ease. Continue reading below to read more about Custom Color Schemes and how to use them.

    Custom Color Schemes

    IMPORTANT NOTE – Please keep in mind that this feature only saves global color settings set in the Fusion Theme Options panel.

    The Custom Color Schemes option is located in the Avada > Fusion Theme Options > Colors tab under the ‘Predefined Color Scheme’. This feature allows you to save, update, delete, import and export your site’s custom color schemes with ease. It also allows you to experiment with color themes without having to painstakingly change each color setting over and over again. To learn about each option further, continue reading below.


    Custom Color Schemes In Elements

    Once you create a new Color Scheme, you can then use it in certain elements such as the Button Element. This allows you to use the color scheme exclusively on the element. Using a custom color scheme will only affect the element it’s used on and won’t affect any other color options.


    Using Custom Color Schemes

    You can load, save, update, delete, import and export your custom color schemes. Continue reading below for a detailed explanation on how to go through each option.

    How To Save Custom Color Schemes

    Saving your site’s color schemes have never been easier! Once you’ve built your site and are happy with your color settings, simply give it a unique name and click ‘Save’.

    Step 1 – Navigate to the Avada > Fusion Theme Options panel.

    Step 2 – Customize the color settings as desired, such as your menu colors, typography colors, element colors and the like.

    Step 3 – Once you’re happy with your color settings, save your Theme Options panel.

    Step 4 – Navigate to the Colors tab and locate the ‘Predefined Color Scheme’ option.

    Step 5 – Click the ‘Save’ button and more options will appear. Give your new color scheme a unique name, then click the ‘Save’ button beside it.

    Step 6 – Wait for it to finish saving. You’ll then see your new color scheme as a square rainbow palette.


    Loading Custom Color Schemes

    Once you’ve saved your custom color scheme, you can load and switch between predefined color schemes as often as you wish. This allows you to view or your site in the different predefined color schemes without loosing your original saved custom color scheme settings.

    Step 1 – Navigate to the Avada > Fusion Theme Options > Colors panel.

    Step 2 – Determine which color scheme you’d like to switch to. You can identify them by hovering over a palette which will display their respective labels.

    Step 3 – Choose your color scheme. Once loaded, save your Theme Options panel.

    Step 4 – Repeat steps 1 – 3 to load a different color scheme.


    Updating & Deleting Custom Color Schemes

    If you’ve already saved a color scheme and decide you’d like to change some color settings but don’t want to start over, you can simply update your saved color scheme.

    How To Update Custom Color Schemes

    Step 1 – Configure your color settigns in the Fusion Theme Options panel, once done, save your Theme Options panel.

    Step 2 – Navigate to the Theme Options > Colors panel and locate the ‘Predefined Color Scheme’ option. Click ‘Update’ to bring up the update options.

    Step 3 – Select the custom color scheme you’d like to update from the dropdown field provided, then click ‘Update’.

    Step 4 – Wait for it to finish updating, then save your Theme Options panel again.

    How To Delete Custom Color Schemes

    Step 1 – To delete custom color schemes, click ‘Delete’ to bring up the delete options.

    Step 2 – Select the color schemes you’d like to delete. You can select more than one color scheme at a time. To deselect, simply click the color scheme palette again or click ‘Cancel Selection’.

    Step 3 – Once you’ve selected the color schemes you’d like to delete, click ‘Delete’.


    Importing & Exporting Custom Color Schemes

    With our import and export options, it’s incredibly simple to export all your custom color schemes and import it to another Avada site.

    How To Export Custom Color Schemes

    Step 1 – Navigate to the Avada > Theme Options > Colors panel and find the ‘Predefined Color Scheme’ option.

    Step 2 – Click the ‘Export’ button to generate the export code. This code contains the data of all your custom color schemes.

    Step 3 – Copy the entire code and paste it into a text editing software, like notepad. From here, you can just save it as a backup or you can use it to import your custom color schemes to another Avada installation.

    How To Import Custom Color Schemes

    Step 2 – To Import custom color schemes, click the ‘Import’ button.

    Step 3 – In the text field provided, paste the export code that you’ve retrieved from exporting your custom color schemes, then click ‘Import’.


    Custom Font

    10/20/2016

    For Avada Versions 4.0 or Higher

    In Avada 4.0 or higher, you can now upload unlimited custom fonts to your site and assign them to any area of the site that has a font-family option. To learn how to upload and use custom fonts, please continue reading below.

    How To Upload A Custom Font

    Step 1 – Download the custom font you’d like to use and make sure you receive all 4 web font files; .woff, .ttf, .svg, and .eot. Each one is required.

    Step 2 – Navigate to the Avada > Theme Fusion > Typography > Custom WebFont Panel.

    Step 3 – In this panel, there will be a repeater field where you can upload each of the 4 web font files you’ve downloaded. For example, upload the .woff font file to the ‘WOFF’ field, and so on.

    Step 4 – Once you’ve uploaded all the required font files to their respective fields, click the ‘Save Changes’ button then refresh the page. After you refresh the page, you will now be able to select your new custom fonts. They will be listed under ‘Custom Fonts’ on any Font Family option dropdown.

    Step 5 – To add another custom font, simply click the ‘Add’ button on the lower right side and repeat step 1 to step 4.

    Step 6 – To delete a custom font, expand the custom font that you’d like to delete, then click the ‘Delete’ button.


    For Avada Versions 3.9.3 Or Lower

    Avada allows users to choose from any of the 500+ Google Fonts, the Standard 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.

    How To Use A Custom Font

    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 tab 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.

    custom font

    Social Icons

    10/20/2016

    Avada includes a wide range of social icons that can be used in several locations on your site. All social icons are CSS based font icons which ensures that they are high quality, and can be configured using the available options. Continue reading below to learn more about how to set up the social icons, how to customize different settings, and how to display and integrate them.

    Social Media Icons

    In this panel, you will find a repeater field to which you can add one social network field at a time. You can add as many social links as you require. You can also add custom social links and icons here, which you can read more about below. To learn more about the Social Media Icons panel, please continue reading below.

    IMPORTANT NOTE – The social media icons and links that you insert on this tab will be the icons that will be displayed on your header or footer.

    How To Add Social Media Icons

    Step 1 – Navigate to Avada > Theme Options > Social Media > Social Media Icons.

    Step 2 – In the repeater field dropdown, select the social network that you’d like to add an icon for. For example, Facebook.

    Step 3 – Under the ‘Link (URL)’ field, enter the URL you’d like the social media icon to link to. For example, http://www.facebook.com/avada.

    Step 4 – Once done, click the ‘Add’ button to add it to the list.

    Step 5 – To add another social media icon, simply repeat Step 2 to 4.

    Step 6 – To delete a social media icon, expand the social media icon tab you’d like to delete, then click the ‘Delete’ button on the lower right side.

    Step 7 – To rearrange the order of the social media icons, simply drag and drop each tab until you achieve your desired order.

    Step 8 – Once you’re done adding social media links, don’t forget to click the ‘Save Changes’ button.


    Header Social Icons

    On this tab, you can configure the appearance of the social icons that will be displayed on your header such as the font size, color, layout etc. We’ve also included a quick guide on how to enable/disable social icons for your header. Please continue reading below to learn about social media icons on your header.

    IMPORTANT NOTE – For social media icons to appear on your header, you must enable it and have the appropriate social media links set in the Social Media Icons tab.

    How To Display Social Media Icons On Your Header

    Step 1 – Navigate to Avada > Theme Options > Header > Header Content.

    Step 2 – Choose a header layout #2 – #5 (not available for header layouts 1, 6, 7).

    Step 3 – Under ‘Header Content 1’ or ‘Header Content 2’ dropdowns, select the Social Links option to display social links on the header.

    Step 4 – Don’t forget to save your changes by clicking the ‘Save Changes’ button.


    The Header Social Icons Styling

    Step 1 – Navigate to Avada > Theme Options > Social Media > Header Social Icons.

    Step 2 – On this tab, you will find configuration options such as font size, tooltip position, color, and layout.

    Step 3 – When you are done, click the Save Changes button.


    Footer Social Icons

    Here you can configure the appearance of the social icons that will be displayed on your footer such as its font size, color, layout etc. Please continue reading below to learn how to customize and display social media icons on your footer.

    IMPORTANT NOTE – For social media icons to appear on your footer, you must enable it and have the appropriate social media links set in the Social Media Icons tab.

    How To Display Social Media Icons In Your Footer

    Step 1 – Navigate to Avada > Theme Options > Social Media > Footer Social Icons.

    Step 2 – Locate the ‘Display Social Icons In The Footer’ option and select On.

    Step 3 – Under this tab, there are also some options that you can use to customize the appearance of the footer social media icons.

    Step 4 – When finished, click the ‘Save Changes’ button.


    The Social Sharing Box

    The social sharing box allows your viewers to share any blog or portfolio post using several social media networks. This feature can be enabled or disabled on any blog or portfolio single post page. On this tab, you can customize the social sharing box itself and the social media icons within it. Also in this section, we’ve included a quick guide on how to enable/disable the social sharing box on blog and portfolio posts. Please continue reading below to learn about the social sharing box.

    How To Enable Social Sharing Box In All Single Blog Post Pages

    Step 1 – Navigate to Avada > Theme Options > Blog > Blog Single Post.

    Step 2 – Locate the Social Sharing Box option, and select ‘On’ to enable the Social Sharing Box.

    Step 3 – Don’t forget to save your changes by clicking the ‘Save Changes’ button.

    How To Enable Social Sharing Box In One Single Blog Post Page

    Step 1 – Navigate to the blog post you’d like to enable the Social Sharing Box in.

    Step 2 – Under Page Options > Post tab, locate the Show Social Share Box option and set it to ‘Show’.

    Step 3 – Don’t forget to save your changes by clicking the Save Draft or Publish.

    How To Enable Social Sharing Box In All Single Portfolio Post Pages

    Step 1 – Navigate to Avada > Theme Options > Portfolio > Portfolio Single Post.

    Step 2 – Locate the Social Sharing Box option, and select ‘On’ to enable the Social Sharing Box.

    Step 3 – Don’t forget to save your changes by clicking the ‘Save Changes’ button.

    How To Enable Social Sharing Box In One Single Portfolio Post Page

    Step 1 – Navigate to the portfolio post you’d like to enable the Social Sharing Box in.

    Step 2 – Under Page Options > Portfolio tab, locate the Show Social Share Box option and set it to ‘Show’.

    Step 3 – Don’t forget to save your changes by clicking the Save Draft or Publish.

    How To Style The Social Sharing Box And Icons

    Step 1 – Navigate to Avada > Theme Options > Social Media > Social Sharing Box.

    Step 2 – Here you will see multiple options for the social sharing box such as the tagline, background color. You’ll also find options for the Social Sharing Box Icons such as font size, tooltip position, etc.

    Step 3 – Under the Social Share Box Links section, you can select which social links to display on the Social Sharing Box. Simply choose ‘On’ for the corresponding social link option that you’d like to show. For example, if you’d like your viewers to be able to share your portfolio or blog post on Facebook, then you will need to set the Facebook option to On.

    Step 4 – Don’t forget to save your changes by clicking the ‘Save Changes’ button.


    How To Add The Sharing Box Element To A Page Or Post

    IMPORTANT NOTE – For social links to appear on the sharing box element, you must first set them in the Avada > Theme Options > Social Media > Social Sharing Box panel.

    Step 1 – Navigate to the page or post where you’d like to add the sharing box element.

    Step 2 – Activate the Fusion Builder by clicking the ‘Use Fusion Builder’ button.

    Step 3 – Add a new Container to the page, and select your desired column layout.

    Step 4 – Click the ‘+ Element’ button to bring up the ‘Elements’ window. Find the Sharing Box element then click it to add it to the page and bring up it’s options window.

    Step 5 – Customize the Sharing Box element to your liking.

    Step 6 – Once finished, click ‘Save’.


    Social Links Element

    The Social Links Element can be inserted in any page or post you create. To learn how to add and customize the Social Links Element, please continue reading below.

    How To Add The Social Links Element To A Page Or Post

    Step 1 – Navigate to the page or post you’d like to add the Social Links element.

    Step 2 – Activate the Fusion Builder by clicking the ‘Use Fusion Builder’ button on the top of the content editor.

    Step 3 – Add a new Container to the page, and select your desired column layout.

    Step 4 – Click the ‘+ Element’ button to bring up the ‘Elements’ window. Find the Social Links element then click it to add it to the page and bring up it’s options window.

    Step 5 – Add links to the respective social network fields you’d like to display. For example, if you’d like to display the Facebook social icon, you need to add a Facebook link to the Facebook field provided.

    Step 6 – Once finished, click ‘Save’.


    How To Configure Social Links Element Globally

    IMPORTANT NOTE – On the ‘Fusion Builder Elements’ panel, the ‘Social Icon Elements’ tab controls the global options for both the Social Links element and the Person element.

    Step 1 – Navigate to the Avada > Theme Options > Fusion Builder Elements panel.

    Step 2 – On this panel, you’ll find the ‘Social Icon Elements’ tab. Under this tab, you’ll find several options that allow you to customize the appearance of the Social Links element globally. Please keep in mind that this tab also controls the global options for the Person element.

    Step 3 – Once done, click the ‘Save Changes’ button.


    Social Links Widget

    You can use the Social Links widget to insert social links to any widget-ready areas of your site; such as the footer, sliding bars, sidebars, mega menu columns, and the like. The Social Links widget does not have any global options in Fusion Theme Options and it only uses the values entered in the widget fields. If fields are left blank, then a hard coded value is inserted. To learn how to add a Social Links widget to widget sections, please continue reading below.

    How To Add A Social Links Widget To Widget Sections

    Step 1 – Navigate to the Appearance > Widgets tab on your WordPress admin sidebar.

    Step 2 – You must first create a widget section. To learn more about this, please refer to our Widgets Section article.

    Step 3 – Under the Available Widgets section, locate the ‘Avada: Social Links’ widget. Then, drag and drop it to the widget section you’d like to add it to.

    Step 4 – Once you add it to a widget section, the widget will automatically expand and display all the available customization options. Using these options, you can customize the widget and add your desired social links to their corresponding social network fields. For example, if you’d like to display a Facebook link, then enter that link under the ‘Facebook Link’ field.

    Step 5 – Once done, click ‘Save’.


    Social Media Icons Styling

    There are several configurable options that makes it easy to style your social media icon’s appearance. These options are found in the respective areas where social icons can be displayed. To learn how these options affect the social icons, please continue reading below.

    IMPORTANT NOTE – The options to configure a particular set of social media icons depends on the area where they’re found. For example, if you’d like to change the social media icons displayed on the header, then you will need to go to the Avada > Theme Options > Social Media > Header Social Icons tab.

    Social Icon Font Size

    Use this option to increase or decrease the size of the social media icon. For example, 18px.

    Social Icon Tooltip Position

    Can be Top, Right, Bottom, Left or None. Choose the tooltip’s position.

    Social Icon Color Type

    Can be Custom Colors or Brand Colors. Sets each icon’s color to it’s brand colors or custom colors.

    Social Icon Boxed

    Can be On or Off. Use this option to display the social icons in boxes or just icons.

    Social Icon Boxed Radius

    If the ‘Social Icon Boxed’ option is set to On, then this option controls the roundness of the box.

    Social Icon Boxed Padding

    If the ‘Social Icon Boxed’ option is set to On, then this option controls the interior padding of the icon.

    Custom Social Media Icons

    Adding custom social media icons allows you to display social networks that are not included on the list. You can also choose to add custom social media icons for existing social networks if you’d prefer to use your own icons. You can add as many custom social media icons as you’d like. To learn how to add custom social media icons, please continue reading the instructions below.

    How To Add Custom Social Media Icons

    Step 1 – Go to the Avada > Theme Options > Social Media > Social Media Icons panel.

    Step 2 – In the repeater field, select ‘Custom’ from the dropdown. The ‘Custom’ option is the last option in the dropdown.

    Step 3 – Once ‘Custom’ is selected, the options on the repeater field will change.

    Step 4 – Add your custom URL link in the ‘Link (URL)’ option.

    Step 5 – Add your custom tooltip name in the ‘Custom Icon Title’ field.

    Step 6 – Upload your custom icon image by clicking the ‘Upload’ button, then choose the appropriate image from your computer or media library.

    Step 7 – Once you’re finished, don’t forget to click the ‘Save Changes’ button.


    Header

    06/15/2016

    The header is probably one of the first things you will want to setup. The header consists of pretty much everything above, including the menu. We are also including the Sliding Bar and Page Title Bar in this section. There are many different elements to the header and many ways to customize it. These elements include images, colors, content, design and more. All of this is done via our Fusion Theme Options. The following articles listed below will cover several different sections of the header.

    Main Header Setup

    06/15/2016
    IMPORTANT NOTE – Top Header Position Layout style #6 is only available on Avada version 4.0 or higher.

    Avada currently offers 5 different Header Layouts, each with its own unique design and set of options. In addition, the header can be positioned on the top, left or right. There are several options to customize the header, as well as the content within it. Please read below to learn how to setup the header.

    How To Setup The Header

    Step 1 – Navigate to Appearance > Theme Options > Header to access the header options. You will see 4 sub-panels; Header Content, Header Background Image, Header Styling, and Sticky Header. See below for information on what each section contains.

    Step 2 – Expand the Header Content sub-panel and select your desired Header Position setting.

    Step 3 – If you’ve selected Top as your Header Position, don’t forget to choose your Header Layout and Slider Position. See below for more information.

    IMPORTANT NOTE – Depending on the Header Position and Header Layout you choose, their respective dependent options will load and appear accordingly.

    Step 4 – If you’ve selected Left or Right as your Header Position, don’t forget to set your Header Content details. See below for more information.

    Step 5 – If you’d like to upload a background image for your header, then you can do so by going to the Header > Header Background Image sub-panel.

    Step 6 – To customize your header’s appearance and styling, then you can do so by going to the Header > Header Styling sub-panel.

    Step 7 – If you’d like to enable a Sticky Header and customize it, you can do so by going to the header > Sticky Header sub-panel. To learn more about the Sticky Header, please read our Sticky Header article.

    Step 8 – Once complete, click the Save Changes button.


    Header Positons

    As mentioned above, you can set your header position to Top, Left or Right. Depending on the position you set, you will be presented with different options. To learn more about each header position, please check the links provided here.

    Click Here To Read About The Top Header Position Click Here To Read About The Side Header Position

    Header Sub-Panels

    Each Header sub-panel contains specific options that pertain to different sections and aspects of your header. There are 4 sub-panels under the Header panel located in the Avada > Theme Options > Header tab. These sub-panels are the Header Content sub-panel, Header Background Image sub-panel, Header Styling sub-panel, and the Sticky Header sub-panel. Continue reading below to learn about each sub-panel.

    Header Content Sub-Panel

    Under this panel, you can select your Header Position, Header Layout, and Slider Position settings. Depending on the options you select here, their respective dependent options will load and appear. For example, if you select the Top header position, then the Header Layout options will load and appear.

    Header Background Image Sub-Panel

    Under this panel, you can upload a background image for your header. If you have a Top Header set, then the Header Opacity located in Header > Header Styling must be set to 1 for the background image to display. If you have a Side Header set, then the Header Opacity must be set to transparent for the background image to display.

    Header Styling Sub-Panel

    Under this panel, you can customize your main header’s appearance and style. For top headers, setting the background color’s opacity to below 1 will remove the header height completely. For side headers, setting the background color’s opacity to below 1 will add a color overlay over the background image.

    Sticky Header Sub-Panel

    Under this panel, you can enable or disable a sticky header and customize it’s features and appearance. You can choose to enable it on tablets and mobiles, enable the sticky header animation, set a header background color, set the sticky header menu item padding, and the sticky header navigation font size. Read more about it here.

    Header Social Icons

    You can choose to display social media icons on your header to make it easier for your viewers to connect with you. To learn how to enable and customize the social media icons on your header, please read our Social Icons article linked on the button below.

    Click Here To Read Our Social Icons Article

    Top Header Position

    10/21/2016
    IMPORTANT NOTE – The top header layout #6 is only available in Avada version 4.0 or higher.

    When setting up a header in Avada, you can choose to set the position to Top, Left or Right. In this article, we’ll be focusing on the Top Header Position and the different layouts and options you can set for them. We’ll also cover some styling options and how this affects your site. Continue reading below to learn more about the top header position. If you’d like to read about Headers in general, please refer to our Main Header Setup article.

    Click Here To Read Our Main Header Setup Article

    Top Header Position Setup

    Setting your header to the Top position displays it and the menu items horizontally on your site. This also allows you to choose header layouts (6 to choose from) that are available only when you set your header to the Top position.

    Step 1 – Go to Avada > Theme Options > Header

    Step 2 – Locate the Header Position option and select Top.

    Step 3 – Once you’ve set your Header Position to Top, the dependent options for the top header position will be displayed.

    Step 4 – Thereafter you can change the slider position, header content, phone number and email address for contact info. For a more in depth description of these options, please continue reading below.

    Step 5 – Click ‘Save Changes’

    * Remember you can also change the Header Background Image, Header Styling and Sticky Header options for your chosen header.


    Top Header Content Areas

    Avada includes 3 different content areas for top position headers. The corresponding header content areas will load and be accessible based on the header layout you choose.

    • Header #1, #6 & #7 does not display any content areas.
    • Header #2, #3 & #5 displays content areas 1 & 2.
    • Header #4 is unique and can display all three header content areas.

    Top Header Styling

    For header styling options please go to Avada > Theme Options > Header > Header Styling. You can add a background image to your top header here Avada > Theme Options > Header > Header Background Image.

    For your background image to be visible your header opacity must be set to 1. If the opacity is set to anything less than 1, your background image will no longer be visible and your header height will be removed completely.


    Top Header Layouts

    Below are the 7 Top Header layouts to choose from. Each layout is unique and offers different content area settings. Header layouts 2 – 5 allow additional content areas via the Header Content options 1 – 3. Header version 1, 6 and 7 does not display any of the content areas. Please continue reading below to learn more about each layout.

    IMPORTANT NOTE – The header padding and logo margin options will auto adjust based on your selection for ideal aesthetics.
    Top Header Layout #1

    This layout includes your main menu items and your logo.

    Top Header Layout #2

    This layout includes your main menu items, your logo, header content area #1 (top left), header content area #2 (top right), and a stylish top color bar that is the same color as the primary color you’ve set. You can choose which content to display in the header content areas. You can also change the background color of the top bar here Avada > Theme Options > Header > Header Styling.

    Top Header Layout #3

    This layout includes your main menu items, your logo, header content area #1 (top left) and header content area #2 (top right). You can choose which content to display in the header content areas and you can change the background color of the top bar here Avada > Theme Options > Header > Header Styling.

    Top Header Layout #4

    This layout includes your main menu items, your logo, header content area #1 (top left), header content area #2 (top right) and header content area #3 (lower right). You can choose which content to display in the header content areas and you can change the background color here Avada > Theme Options > Header > Header Styling.

    Top Header Layout #5

    This layout includes your main menu items, your logo center aligned, header content area #1 (top left) and header content area #2 (top right) . You can choose which content to display in the header content areas and you can change the background color in the Avada > Theme Options > Header > Header Styling.

    Top Header Layout #6

    This layout is a desktop version of a mobile menu. It includes your logo, a search icon, and a hamburger icon. When you click the hamburger menu, your parent level menu items will appear center aligned on the page with a full screen background color. This layout works from desktop to mobile and behaves the same way. You can customize the Flyout Menu by going to Avada > Theme Options > Menu > Flyout Menu.

    IMPORTANT NOTE – Top Header layout #6 only displays the Parent Level menu items. Any Child Level menu items will not be displayed. Mega Menu features are also disabled on this layout.
    Top Header Layout #7

    This layout features a centered logo and distributes your menu items evenly on each side. It is recommended to have an even number of menu items so the design is balanced.

    Side Header Position

    06/15/2016

    When setting up a header in Avada, you can choose to set the position to Top, Left or Right. In this article, we will focus on the Side Header Position (Left or Right) and the different options you can set for them, including the styling options. Continue reading below to learn more about the side header position. If you’d like to read about Headers in general, please refer to our Main Header Setup article.

    Click Here To Read Our Main Header Setup Article

    Side Header Position Setup

    Setting the header to the Left or Right position displays it and the menu items vertically on your site. You won’t be able to choose any header layouts when your header is set to the side, but you can still add header content and adjust the styling.

    IMPORTANT NOTE – The header padding and logo margin options will auto adjust based on your Header Position selection for ideal aesthetics.

    Step 1 – Go to the Avada > Theme Options > Header tab.

    Step 2 – In the Header Content sub-panel, set the ‘Header Position’ option to Left or Right to display the header on the side.

    Step 3 – You can choose to add content to your side header using the Header Content options. Simply choose the content you’d like to display from the dropdown boxes.

    Step 4 – Under the Header Styling sub-panel, Set the ‘Header Width For Left/Right Position’ option that controls the width of the left or right side of the header. This option accepts a numerical value. For example, 280. You can also customize your side header’s appearance on this sub-panel.

    Step 5 – Click the ‘Save Changes’ button to apply your changes.


    IMPORTANT NOTE – The Header Content 1-3 options will only show on desktop for the side header layouts. They will be hidden on mobile view.

    Side Position Content Areas

    Avada includes 3 different content areas for headers, but access to these content areas depends on which header version you choose. Setting a side header allows you access to all 3 Header Content options. Simply select from the dropdown the content you’d like to display, such as Contact Info, Social Links, Navigation, and the like. If you do not want to display any of the Header Content options, simply select the Leave Empty option. Along with these, there are also fields that allow you to enter your own contact details and tagline to be displayed.


    Side Header Position Styling

    You can customize your header’s appearance by going to the Avada > Theme Options > Header > Header Styling sub-panel. If you would like to add a background image to your side header, then you can do so by going to the Avada > Theme Options > Header > Header Background Image sub-panel. For your background image to appear, your header opacity must be transparent or set to below 1. If you set your header opacity to below 1, then your side header will display a color overlay on your background image.


    Sticky Header Setup

    06/15/2016

    In addition to a choice of header layouts, Avada also has a sticky header option. For improved usability, as the user scrolls down a page, the sticky header activates ensuring the website’s main menu is always accessible. To manage the sticky header, Avada includes several options for styling, as well as visibility options to enable or disable it on various screen sizes.

    How To Setup The Sticky Header

    Step 1 – Navigate to Avada > Theme Options > Header > Sticky Header.

    Step 2 – To enable/disable the Sticky Header, find the ‘Sticky Header’ option and set it to On or Off.

    Step 3 – On this tab are also options to enable/disable the sticky header on tablets or mobile devices.

    Step 4 – Customize your sticky header’s appearance using the available options.

    Step 5 – Click the ‘Save Changes’ button.

    Sticky Header Logo – Upload a custom logo unique to the sticky header. You can do this in the Avada > Theme Options > Logo > Sticky header Logo tab.

    Sticky Header Custom Menu – You can add a custom menu unique to the sticky header in the Appearance > Menus panel in the WP admin panel. Create a new menu and assign it to the sticky header by checking the ‘Sticky Header Navigation’ checkbox under the Menu Settings.

    Sticky Header Transition – The Sticky Header never leaves the viewport. When you scroll down, the Sticky Header “sticks” to the top of the window and depending on the header layout you’ve set, the sticky header will display different elements of your header as you scroll down the page.


    Important Sticky Header Information

    Sticky Header with Header Layouts #1 & #6

    Header layouts #1 and #6 are straight forward in layout; logo to the left and menu items on the same row, to the right. Only the logo and main menu will be displayed in the sticky header as you scroll down the page.

    Sticky Header with Header Layouts #2 & #3

    Header layouts #2 and #3 include a top secondary header with your logo and main menu items on a row below that. Only the logo and main menu will be displayed in the sticky header as you scroll down the page, and not the top secondary header.

    Sticky Header with Header Layouts #4 & #5

    Header layouts #4 & #5 includes a top secondary header, logo, and menu which are all on different rows. By default, only the logo and menu will be displayed in the sticky header as you scroll down the page. You can change what displays with the ‘Sticky Header Display For Headers 4 – 5’ option. Choose ‘Menu Only’ or ‘Menu + Logo Area’

    Sticky Header Theme Options

    Below is a list of all the available theme options for the Sticky Header. These options are located in Avada > Theme Options > Header > Sticky Header. Certain options are dependent, and will only be visible when specific options or header layouts are enabled.

    Sticky Header – Illustrated as A. Turn sticky header On or Off.

    Sticky Header on Tablets – Illustrated as B. Turn sticky header on tablets On or Off.

    Sticky Header on Mobiles – Illustrated as C. Turn sticky header on mobile On or Off.

    Sticky Header Animation – Illustrated as D. Turn on to allow the sticky header to animate to a smaller height when activated. Note: Only visible when header layout #1, #2, #3 or #6 is enabled.

    Sticky Header Display For Headers 4-5 – Illustrated as E. Control what displays on the sticky header when using header layouts #4 or #5. Note: Only visible when header layout #4 or #5 is enabled.

    Sticky Header Background Color – Illustrated as F. Choose a background color for the sticky header.

    Sticky Header Menu Item Padding – Illustrated as G. Controls the space between each menu item in the sticky header, in pixels (0px-200px).

    Sticky Header Navigation Font Size – Illustrated as H. Controls the font size of the menu items in the sticky header. Enter value including CSS unit (px, em, rem), for example: 13px


    Position & Transparency

    06/15/2016

    Avada includes an option to position the header to the top, left or right of your website, and set the main assigned slider position above or below the header. You can also choose to make your main header’s background transparent, or your top header too. All of these options can be selected globally in Fusion Theme Options, or individually per page or post with the Fusion Page Options, which will override the global Fusion Theme Options.

    Click Here To Read Our Main Header Setup Article

    Header Position

    The Avada > Theme Options > Header > Header Content options allows you to set the header position, header layout and other custom options for your header. Choose between Top, Right, or Left. Continue reading below for an explanation on each position.

    • Top Position – For Headers set to the top position, you will need to select a Header Layout. You can choose from 6 different layouts. Transparency and slider position will work when using a top header. Read more about Top Headers here.
    • Right/Left Position – For Headers set to either the right or left position, you do not have to select a Header Layout. Every header content option will work with left/right header positions. Transparency and slider position will not work with left/right header. Read more about Side Headers here.
    • Slider Position – You can choose to globally position the main assigned slider either above or below the header in the Fusion Theme Options. The Slider Position option in Fusion Theme Options is only available when the Header is set to the top position. You can also set the slider’s position individually in the Fusion Page Options in each page or post.

    IMPORTANT NOTE – To have a static Right/Left Header, make sure the content is not higher than your screen size. Otherwise, the header will scroll to ensure that no content is cut off.


    Header Transparency

    By default, any header layout you choose will have a background color set. Please note that when using top header position and have the opacity set to anything below 1 (0-.9) the header background area height disappears and the slider below it will show behind the header in its place. This option works best with a page slider or large image so it moves up behind the header as illustrated in this demo example. Continue reading below to learn how to change your header’s background color and transparency.

    IMPORTANT NOTE – Transparent headers are disabled on all archive pages including search pages because there is not an option to assign a slider or full width container background image to those pages, therefor the page content would be covered up by the header.

    How To Set Header’s Background Color And Transparency

    Step 1 – Navigate to Avada > Theme Options > Header > Header Styling

    Step 2 – Locate the Header Background Color option

    Step 3 – Click the ‘Select Color’ button and choose a color from the palette or you can enter the hexcode of your desired color manually.

    Step 4 – You can set the opacity of the background color by adjusting the opacity bar on the right. Set it to 0 to make it transparent or to 1 to make it a solid color.

    Step 5 – To set the header’s background color and opacity individually per page or post, navigate to the Header tab in Fusion Page Options located on every page or post you create. These options override the global Fusion Theme Options.

    IMPORTANT NOTE – Transparency only works with Headers in the top position, and does not work with the right/left positions.


    Adding The Logo & Favicons

    06/15/2016

    You can upload an image file of any size as your logo in 3 different areas; the default logo, the sticky header logo and the mobile logo. This gives you the flexibility to adjust your logo depending on where it’s displayed. Avada is also retina ready, so there are additional options to upload a retina 2x logo for high resolution devices. Please read below for more information on logos and the different areas you can display them in, favicons, as well as the styling options available.

    IMPORTANT NOTE
    Avada allows logos to be retina ready, however they are not required to be used. If you do not upload a retina logo, then the default normal logo will be used on all screens.

    Available Logo Areas

    • Default Logo Fields – Upload a default logo that will be displayed in all areas (Default/Sticky/Mobile) unless a unique logo is uploaded to the sticky header and/or the mobile header logo option.
    • Sticky Header Logo Fields – Upload a unique logo that will only appear on your sticky header. This is optional.
    • Mobile Header Logo Fields – Upload a unique logo that will only appear on mobile devices. This is optional.

    How To Upload A Default Logo

    Step 1 – Navigate to WP Dashboard > Avada > Theme Options > Logo > Default Logo

    Step 2 – Locate the ‘Default Logo’ option and click the ‘Upload’ button to upload your logo image file.

    Step 3 – This step is optional. You can upload a default retina logo for retina ready devices using the ‘Retina Default Logo’ option.

    Step 4 – Click ‘Save Changes’

    IMPORTANT NOTE
    The retina default logo dimensions must be exactly twice that of your standard logo. For example, if your standard logo is 100px x 100px, the retina version of your logo must be 200px x 200px


    How To Upload A Sticky Header Logo

    IMPORTANT NOTE
    Uploading a sticky header logo is optional. If no unique logo for the sticky header is uploaded, the default logo will be displayed instead.

    Step 1 – Navigate to WP Dashboard > Avada > Theme Options > Logo > Sticky Header Logo

    Step 2 – Locate the ‘Sticky Header Logo’ option and click the ‘Upload’ button to upload your logo image file.

    Step 3 – This step is optional. You can upload a sticky header retina logo for retina ready devices using the ‘Retina Sticky Header Logo’ option.

    Step 4 – Click ‘Save Changes’

    IMPORTANT NOTE
    The retina sticky header logo dimensions must be exactly twice that of your standard logo. For example, if your standard logo is 100px x 100px, the retina version of your logo must be 200px x 200px


    How To Upload A Mobile Logo

    IMPORTANT NOTE
    Uploading a mobile logo is optional. If no unique logo for mobile devices is uploaded, then the default logo will be displayed instead.

    Step 1 – Navigate to WP Dashboard > Avada > Theme Options > Logo > Mobile Logo

    Step 2 – Locate the ‘Mobile Logo’ option and click the ‘Upload’ button to upload your logo image file.

    Step 3 – This step is optional. You can upload a retina mobile logo for retina ready devices using the ‘Retina Mobile Logo’ option.

    Step 4 – Click ‘Save Changes’

    IMPORTANT NOTE
    The retina mobile logo dimensions must be exactly twice that of your standard logo. For example, if your standard logo is 100px x 100px, the retina version of your logo must be 200px x 200px


    Logo Settings

    Avada offers various settings to help position and align your logo. These options are located in the WP Dashboard > Avada > Theme Options > Logo > Logo section and will only affect the default logo that displays in the header on desktop mode.

    • Logo Alignment – Controls the logo alignment. “Center” only works on Header 5 and Side Headers.
    • Logo Margins – Controls the top/right/bottom/left margins for the logo. Enter values including any valid CSS unit, for example: 31px, 31px, 0px, 0px

    Favicon Options

    The Favicon Options are located in the WP Dashboard > Avada > Theme Options > Logo > Favicons section. A favicon is an icon typically displayed in the address bar of a browser accessing the site or next to the site name in a list of saved bookmarks. Avada offers several fields to upload different types of favicons. Each one has its own unique size listed in the description.

    To add favicons, simply click the ‘Upload’ button next to the appropriate field, then select the favicon file you would like to use.

    • Favicon – The main favicon for your website. Image must be 16px x 16px.
    • Apple iPhone Icon – For Apple iPhones. Image must be 57px x 57px.
    • Apple iPhone Retina Icon – For Apple iPhones Retina. Image must be 114px x 114px.
    • Apple iPad Icon – For Apple iPads here. Image must be 72px x 72px.
    • Apple iPad Retina Icon – For Apple iPads Retina. Image must be 144px x 144px.

    Setting Up The Menu

    08/03/2016

    Using The Mega Menu

    06/15/2016

    Avada has a built-in mega menu that can be enabled on every First Level menu item in the Appearance > Menus tab. It can have 1-6 columns, span the full site width, have custom column width settings, take any widget, have icons or images next to menu items and more. Please see below for information on how to set the mega menu up. If you need information on how to create a regular menu, please read our Setting Up The Menu article here.

    How To Create A Mega Menu

    Step 1 – Navigate to Appearance > Menus section of your admin sidebar and select the ‘Create A New Menu’ link to create a new menu, or edit a current one.

    Step 2 – Only First Level items can enable the Mega Menu. Click the Arrow icon next to any First Level menu item to expand the Options box. Check the ‘Enable Fusion Mega Menu’ checkbox to enable the mega menu.

    Step 3 – Set the ‘Mega Menu Number of Columns’ option that will determine how many columns will be displayed. Also, check the ‘Full Width Mega Menu’ option if you want your mega menu to span the full site width. The mega menu can go 100% width but only if the site width is 100% width. The ‘Full Width Mega Menu’ option is based on the overall site width option in ‘theme options > layout’ tab.

    Step 4 – Each menu item can have a font awesome icon, or a custom image thumbnail next to it. If using a Font Awesome icon, use fa- in the name. For example, fa-camera. If using a custom image, click the ‘Set Thumbnail’ button to upload an image.

    Step 5 – Second Level menu items will display as a title for columns. To add a Second Level item inside the Mega Menu, select a custom link on the left hand side and click the ‘Add to Menu’ button. To make it a Second Level menu item, drag the menu item below and to the right of the First Level menu item.

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

    Step 7 – Second & Third level menu items can have a widget section assigned. Note that assigning a widget to a menu item replaces the menu item link and only displays the assigned widgets. Learn how to create Widget Sections and how to add Widgets to it here. Once you’re done creating a new Widget Section, return 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 the Menu Settings section. Check the ‘Main Navigation’ checkbox to assign your new menu as the main navigation.

    Step 9 – Once finished, click the ‘Save Menu’ button.


    Mega Menu Interface Overview

    megamenu

    Mega Menu Width

    06/15/2016

    Avada includes a flexible Mega Menu that you can use to completely personalize your website. One of it’s customization features is the option to set it to full width, or to customize each column’s width, which we will be talking about in detail below. Before reading this article, we recommend reading our introductory article on Using The Mega Menu and how to set this up. For more info on the Mega Menu’s width settings, please continue reading below.

    Mega Menu Full Width

    You can choose to set your Mega Menu’s width to span the full site width. Please note that the Mega Menu’s full width option adheres to the value set here -> Avada > Theme Options > Layout > Site Width. For example, if you’ve set your Site Width to 1120px the Mega Menu’s full width will equal 1120px. Setting your Mega Menu to full width overrides the individual column widths set in your Second Level menu items.

    How To Set The Mega Menu To Full Width

    Step 1 – Go to WP Dashboard > Appearance > Menus, locate your First Level menu item and select the ‘Enable Fusion Mega Menu (only for main menu)’ option.

    Step 2 – Under the same First Level menu item, make sure the Full Width Mega Menu option is also checked.

    Step 3 – Click ‘Save Menu’


    Mega Menu Column Width

    You can also choose to set your Mega Menu’s individual column widths. This gives you more control over your Mega Menu and how you want to display it. You can set each column’s width by entering a percentage. For example, 30%. Remember that 100% is equivalent to the value you’ve set in your Site Width option located in Fusion Theme Options. So if you make it so your column widths equal to 100%, you will have a Full Width Mega Menu. For example, if you have 2 columns in your Mega Menu and you set them to 70%, and 30%, you will end up with a Full Width Mega Menu.

    How To Set Column Widths Individually

    Step 1 – Go to WP Dashboard > Appearance > Menus, locate your First Level menu item and select the ‘Enable Fusion Mega Menu (only for main menu)’ option.

    Step 2 – Under the same First Level menu item, make sure the Full Width Mega Menu option is unchecked. Having this option checked will not show the Mega Menu Column Width options.

    Step 3 – In your Second Level menu item, enter the percentage value for your Column Width under the Mega Menu Column Width field.

    Step 4 – Repeat Step 3 for all your Second Level menu items until you’ve set their respective Column Widths.

    Step 5 – Click ‘Save Menu’


    IMPORTANT NOTE – Make sure the Full Width Mega Menu option is unchecked in order for the Mega Menu Column Width option to appear.

    Mega Menu Max-Width

    The Mega Menu Max-Width option is located in Avada > Theme Options > Menu > Mega Menu panel. This option allows you to set a maximum width for the mega menu drop down that is different from the overall site width. For example, if you want your site width to be 100% but your mega menu to be smaller, you could enter 1100px for Mega Menu Max Width setting.

    As long as the Site Width value is in pixels, and not in percentage (%), then the Mega Menu width will automatically match the Site Width if the Mega Menu Max-Width field is empty.

    The Mega Menu needs a pixel value to work correctly, and it cannot take a percentage (%) value. However, the Site Width can take both pixel and percentage (%) values.


    Adding Buttons To The Menu

    06/15/2016
    IMPORTANT NOTE – This feature is only available in Avada 3.8.5 or higher.

    In Avada 3.8.5, you can now add buttons to your main, secondary and side navigations by simply customizing a setting inside the Menu tab in your WP admin sidebar. Note that this setting is only available for Parent level items and that the buttons will pull the styles set in Fusion Theme Options. Continue reading below to learn how to add buttons to the menu.

    How To Add Buttons To The Menu

    Step 1 – Navigate to the Appearance > Menus tab.

    Step 2 – Create a Parent level item and click the small arrow on the right to expand the Parent Level menu item.

    Step 3 – Find the Menu First Level Style setting, and select Button Small, Button Medium, Button Large, or Button XLarge.

    Step 4 – The button styles (color, shape, etc) will be pulled from the Fusion Theme Options selections.

    IMPORTANT NOTE – This setting is only available for Parent Level menu items.


    Menu Settings

    06/15/2016

    To utilize the menu completely, you should be familiar with the various settings and options that come with it. There are 2 levels of menu items, the Parent Level (or the First Level menu items) and the Child Level (or sub-level menu items below the Parent Level menu item). There can be up to 4 child levels with Avada. Continue reading below for a list of settings for each level.

    This post refers to the options located at “Appearance > Menus” section of the WordPress admin. There are additional Avada menu options in the Fusion Theme Options panel.

    Parent Level Menu Settings

    Navigation Label – Illustrated as A on the screenshot, the Navigation Label option allows you to add a name to your menu item.

    Title Attribute – Illustrated as B on the screenshot, specifies the Alternative (‘Alt’) text for the menu item. This text will be displayed when a user’s mouse hovers over a menu item.

    Menu First Level Style – Illustrated as C on the screenshot, the Menu First Level Style option allows you to make the menu item regular text or a button. Choose between Default Style which is regular text, Button Small, Button Medium, Button Large, Button xLarge. This is only available in Avada 3.8.5+

    Menu Icon – Illustrated as D on the screenshot, the Menu Icon option allows you to add a Font Awesome icon to the menu item. For example, fa-bed.

    Enable Fusion Mega Menu – Illustrated as E on the screenshot, the Enable Fusion Mega Menu option allows you to enable the Fusion Mega Menu. This option also reveals several Mega Menu options.

    Full Width Mega Menu – Illustrated as E1 on the screenshot, this option allows you to make the Mega Menu full width, which uses the site width option from Fusion Theme Options. This option is only available if the Enable Fusion Mega Menu option is enabled.

    Mega Menu Number of Columns – Illustrated as E2 on the screenshot, this option allows you to set the number of Mega Menu columns. Choose between Auto or 1 to 6. This option is only available if the Enable Fusion Mega Menu option is enabled.

    Set Thumbnail – Illustrated as E3 on the screenshot, this button allows you to add an image thumbnail to the menu item. This option is only available if the Enable Fusion Mega Menu option is enabled.

    Remove Image – Illustrated as E4 on the screenshot, this option allows you to remove the image thumbnail. This option is only available if the Enable Fusion Mega Menu option is enabled.

    Move – Illustrated as F on the screenshot, the Move option allows you to move the menu item to various positions on the Menu Structure.

    Original – Illustrated as G on the screenshot, the Original option allows you to view the page which the menu item links to.

    Remove – Illustrated as H on the screenshot, the Remove option allows you to remove the menu item from the Menu Structure.

    Cancel – Illustrated as I on the screenshot, the Cancel option allows you to collapse the menu item.

    URL – Illustrated as J on the screenshot, the URL option allows you to add a custom link to the menu item. This option is for Link/Custom menu types only.


    Child Level Menu Settings

    The below example assumes you have Fusion Mega Menu enabled on the parent level item, illustrated as D on the screenshot. This allows additional options to show for child level items.

    Navigation Label – Illustrated as A on the screenshot, the Navigation Label option allows you to add a name to your menu item.

    Title Attribute – Illustrated as B on the screenshot, the Title Attribute option allows you to add a name to your menu item.

    Menu Icon – Illustrated as C on the screenshot, the Menu Icon option allows you to add a Font Awesome icon to the menu item. For example, fa-bed.

    Enable Fusion Mega Menu – Illustrated as D on the screenshot, the Enable Fusion Mega Menu option on the Parent Level menu item reveals several Mega Menu options.

    Mega Menu Column Width – Illustrated as D1 on the screenshot, this option allows you enter a percentage value to determine the Mega Menu’s column width. This option is only available if the Enable Fusion Mega Menu option in the Parent Level item is enabled. For example, 30%. View additional documentation here.

    Disable Mega Menu Column Title – Illustrated as D2 on the screenshot, this option allows you to disable the Mega Menu column title. This option is only available if the Enable Fusion Mega Menu option in the Parent Level item is enabled.

    Mega Menu Widget Area – Illustrated as D3 on the screenshot, this option allows you to add a widget to the menu item and is only available for the first child level item. This option is only available if the Enable Fusion Mega Menu option in the Parent Level item is enabled.

    Set Thumbnail – Illustrated as D4 on the screenshot, this button allows you to add an image thumbnail to the menu item. This option is only available if the Enable Fusion Mega Menu option in the Parent Level item is enabled.

    Remove Image – Illustrated as D5 on the screenshot, this option allows you to add remove the image thumbnail. This option is only available if the Enable Fusion Mega Menu option in the Parent Level item is enabled.

    Move – Illustrated as E on the screenshot, the Move option allows you to move the menu item to various positions on the Menu Structure.

    Original – Illustrated as F on the screenshot, the Original option allows you to view the page which the menu item links to.

    Remove – Illustrated as G on the screenshot, the Remove option allows you to remove the menu item from the Menu Structure.

    Cancel – Illustrated as H on the screenshot, the Cancel option allows you to collapse the menu item.

    URL – Illustrated as I on the screenshot, the URL option allows you to add a custom link to the menu item. This option is for Link/Custom menu types only.


    Menu Navigation Heights

    06/15/2016

    Setting the main navigation height is important in keeping your website organized and visually appealing. Avada gives you the options to manage this with ease. Continue reading below to discover how to manage your websites main navigation height.

    How To Set The Main Menu Navigation Height

    Step 1 – Go to WP Dashboard > Avada > Theme Options > Menu > Main Menu > Main Menu Height

    Step 2 – Enter a numeric value in pixels (px) to adjust the ‘Main Menu Height’ or drag the slider left/right.

    Step 3 – Click ‘Save Changes’


    How To Set The Mobile Menu Navigation Height

    Step 1 – Go to WP Dashboard > Avada > Theme Options > Menu > Mobile Menu > Mobile Menu Dropdown Item Height

    Step 2 – Enter a numeric value in pixels (px) to adjust the ‘Mobile Menu Dropdown Item Height’ or drag the slider left/right.

    Step 3 – Click ‘Save Changes’




    Setting Up Page Title Bar

    06/15/2016

    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 the 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 options found in the Avada > Theme Options > Page Title Bar panel, and individual options in the Fusion Page Options found in all pages and posts that will override global settings.

    How To Setup The Page Title Bar Globally

    Step 1 – Navigate to the Avada > Theme Options > Page Title Bar panel to access the page title bar options.

    Step 2 – Locate the ‘Page Title Bar’ dropdown and select either the Show Bar and Content or Show Content Only option to enable the Page Title Bar.

    Step 3 – In the Page Title Bar panel, you can also customize other options such as page title bar styling, background image, and the like.

    Step 4 – The right side of the page title bar can display breadcrumbs or a search box. To choose which one, navigate to the Avada > Theme Options > Page Title Bar > Breadcrumbs sub-panel and locate the ‘Breadcrumbs Content Display’ option.

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


    How To Set The Page Title Bar Per Page/Post

    Step 1 – Create a new page or post or edit an existing one.

    Step 2 – Scroll down the page to find the ‘Fusion Page Options’ box and find the ‘Page Title Bar’ tab.

    Step 3 – In this tab, there are numerous options that you can set to customize the page title bar per page or post. You can show or hide the page title 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 by clicking the ‘Save Draft’ or ‘Publish’ button.


    Setting Up The Sliding Bar

    06/15/2016

    The Avada sliding bar is positioned above the sites header and 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. You can choose between 1-6 columns and to each column add the widgets of your choosing.

    How To Setup The Sliding Bar And Add Widgets

    Step 1 – Navigate to Avada > Theme Options > Sliding Bar

    Step 2 – The Slider Bar can be enabled/disabled on desktop and mobile using the ‘Sliding Bar on Desktops’ and ‘Sliding Bar On Mobile’ options.

    Step 3 – Decide whether if sliding bar opens on page load by default and the number of columns (1-6).

    Step 4 – Click ‘Save Changes’

    Step 5 – To add widget sections to the sliding bar, navigate to WP Dashboard > Appearance > Widgets

    Step 6 – You will see a ‘Slidingbar Widget X’ section on the right hand side for each Sliding Bar column (from 1-6 columns) selected in theme options. To add the widgets, drag and drop the widgets you want from the left side into the sliding bar widget sections on the right side. See the ‘Widget Sections Overview’ screenshot below.


    Sliding Bar Styling

    Step 1 – Navigate to Avada > Theme Options > Sliding Bar > Sliding Bar Styling.

    Step 2 – You can choose a background color, background color opacity, toggle color, heading font size, font color and more.

    Step 3 – Click ‘Save Changes’


    Widget Sections Overview

    Pages

    06/15/2016

    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

    10/13/2016

    Creating pages is the foundation of creating your site. You can create any number of pages for your site and add as much content into them as you’d like. Avada includes page templates which you can choose from and each template fulfils a specific function. Continue reading below to learn how to create a new page.

    Page Templates

    Page templates are templates that you can use to tailor the page according to your needs. For example, if you’d like a certain page to span the 100% of the browser width, then you would have to set the page template to ‘100% Width’. Learn more about each type of page template available and how to set them by clicking the button below.

    Click Here To Learn More About Page Templates

    How To Create A New Page

    Step 1 – Navigate to the ‘Pages’ tab in your WordPress admin sidebar and click the ‘Add New’ option.

    Step 2 – Give your page a name by entering it in the Title field.

    Step 4 – Locate the Page Attributes box and set the Parent option and the Page Template option. Learn more about Parent settings here, or learn more about Page Templates here.

    Step 6 – Add content to your page using the editor field. You can enter text or common HTML markups to add content, or you can click the ‘Use Fusion Builder’ button to use our Fusion Builder and add Fusion Builder elements to the page. Learn more about the Fusion Builder here.

    Step 5 – Set individual options for the page in the Fusion Page Options box. Settings options here will affect the current page only. If you’d like to set global options for your entire site, then you have to use the Fusion Theme Options. Learn more about the Fusion Theme Options here.


    Page Templates

    11/03/2016

    Avada includes a few Page Templates that you can choose from. Each Page Template caters to user’s specific 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.

    Page Templates

    • Default – This page template uses the Site Width that you’ve set in Fusion Theme Options.
    • 100% Width – This page template displays your content in full browser width. To contain content within the site width, use the Container element.
    • Blank Page – This is the Blank page template, when you use this, the header and footer will be removed.
    • Contact – This is the Contact page template that you should choose when you make your contact page with Google Map & a contact form.
    • Side Navigation – This is the Side Navigation page template. See the Side Navigation section of this document for more info.

    How To Select A Page Template

    Step 1 – Create a new page or edit an existing one.

    Step 2 – On the right side of the page, you’ll find the ‘Page Attributes’ box.

    Step 3 – Under the ‘Template’ option, choose your desired Page Template from the dropdown field. To learn more about what each page template is for, please refer to the section above.

    Step 4 – Once finished, click ‘Save Draft’ or ‘Publish’.


    Missing Page Templates?

    IMPORTANT NOTE – In Avada 5.0, we’ve removed the Portfolio and FAQ page templates.

    With Avada version 5.0’s release, we’ve decided to deprecate the Portfolio and FAQ page templates due to redundancy. To create portfolio or FAQ pages, please use our Portfolio shortcode element and our FAQ shortcode element. These shortcode elements provide more in depth options and flexibility when building your page. If you’d like to read more about this change and why we decided to do this, please click the button below.

    Click Here To Learn More About The Deprecated Portfolio & FAQ Page Templates

    Setting Up Home Page

    06/15/2016

    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 Fusion 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 documentation 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 them anyway you like.

    How To Set Your Home Page

    Step 1 – Navigate to Settings > Reading tab.

    Step 2 – Select A Static Page option.

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

    Step 4 – This is also the same spot you select the blog page as the Posts page.


    Setting Up A One Page Site

    10/19/2016

    Avada gives you the flexibility to create a modern one page site with a scrolling menu. To get an idea of how one page sites work and look, please see our Landing Product demo here. A one page site lets you consolidate all your site’s information into one page that’s split into multiple sections. Please read below for detailed information on how to set it up.

    IMPORTANT NOTE – Please note that anchor links won’t work with the Header Layout #6 (Flyout Menu) that comes with Avada version 4.0.

    Creating Content For One Page Sites

    When creating content for your One Page site, you’ll need to organize your content into sections and use the ‘Name Of Menu Anchor’ option present in the Container Element or the Menu Anchor Element at the beginning of every section. This is so you can reference each section in your menu. Your menu will serve as a way for your viewers to quickly scroll to a section they’d like to view. For example, clicking the About menu item will automatically scroll the page to the About section.

    Step 1 – Create a new page or edit an existing one.

    Step 2 – Click the ‘Use Fusion Builder’ button to access the Fusion Builder, then create your page content and layout as normal.

    Step 3 – Once you’re finished laying out the page and creating your content, determine the different sections on your page. For example, the About section, the Contact section, and the like.

    Step 4 – Once you’ve decided on the different sections of your page, it’s time to reference each section. If your section is in the beginning of a Container Element, Use the ‘Name Of Menu Anchor’ option in the Container Element. If your section is in the middle of a Container, use the Menu Anchor Element.

    Step 6 – If you’re using the ‘Name Of Menu Anchor’ option, then simply insert the unique Menu Anchor ID for the section. If you’re using the Menu Anchor Element, click the ‘Element Settings’ and enter a unique Menu Anchor ID for the section in the ‘Name’ field. For example, about.

    Step 7 – Click ‘Save’ to save your changes, then repeat steps 4-6 and create separate Menu Anchors for all the different sections that you have.


    Custom Menu

    A Custom Menu is important because this is how your viewers jump to different sections of your page. Instead of normal links, your One Page site’s custom menu will have Anchor Links that link and scroll automatically to each section on the page.

    How To Create A Custom Menu

    Step 1 – Navigate to the Appearance > Menus tab on your WordPress admin panel.

    Step 2 – Click the ‘Create A New Menu’ link. Give it a name, then click the ‘Create Menu’ button.

    Step 3 – On the left side, expand the ‘Custom Links’ tab.

    Step 4 – In the ‘URL’ field, enter the Menu Anchor ID you’ve assigned to a section on your page. For example, if this menu item links to your About section, then it would be about. Please note that you have to enter it with a hashtag (#) in order to scroll to the section properly. For example, #about.

    Step 5 – Once you’ve added the Anchor Name ID to the ‘URL’ field, enter a name for the ‘Link Text’ field. This is simply the menu item’s text. For example, About.

    Step 6 – When finished filling in those fields, click the ‘Add To Menu’ button.

    Step 7 – Repeat steps 4-6 and create a menu item for each section you have.

    Step 8 – Under the ‘Menu Structure’ section, you’ll find all the menu items you’ve just created. You can expand each menu item and edit its settings if you need to.

    Step 9 – Don’t forget to assign your new menu. To learn how, see ‘Assigning A Custom Menu To A One Page Site’ and ‘Assigning A Custom Menu To A Multi-Page Site’ below.

    Step 9 – Once you’re done creating your custom menu, click ‘Save Menu’.

    IMPORTANT NOTE – If you want to create a link that lets the page scroll back up to the top, you can simply use #home, as this anchor is already preset in the theme.


    Assigning A Custom Menu To A One Page Site

    Step 1 – If you’re creating a One Page site, you can assign a custom menu by going to the Appearance > Menus tab.

    Step 2 – Select the custom menu you’ve just created from the dropdown, then click ‘Select’ to load it.

    Step 3 – Once you’ve loaded your custom menu, go to the ‘Menu Settings’ section and check the ‘Main Navigation’ checkbox. This will assign the custom menu you’ve created as your One Page site’s main menu.


    Assigning A Custom Menu To A Multi-Page Site

    Step 1 – If you’re creating a page similar to a One Page site on your Multi-Page site, you can assign a custom menu to it by editing the page.

    Step 2 – Underneath the editor field, you’ll find the Fusion Page Options box.

    Step 3 – Switch to the ‘Header’ tab and locate the ‘Main Navigation Menu’ option. In the dropdown field, select the custom menu you’ve just created. This will make your custom menu the menu for the Landing Page only.

    Step 3 – Once finished, click ‘Save Draft’ or ‘Publish’.


    One Page Menu with Multi-Page Links

    06/15/2016

    When creating a menu for a website that has anchor links as well as normal links to other pages, you may find that your menu items with anchor links may not work or behave as expected. If you’d like to know more about why this is, and how to properly create a menu with a combination of absolute and relative links, please continue reading our detailed guide below.

    IMPORTANT NOTE – Please note that anchor links won’t work with the Header Layout #6 that comes with Avada version 4.0.

    Absolute Vs. Relative Links

    To fully understand the process of of creating a menu with anchor links and normal links, we first need to understand the difference between absolute links and relative links. Please continue reading below for a brief description of each type of links and how they work.

    Absolute Links

    An absolute link contains your full site URL. For example, http://www.theme-fusion.com or http://www.theme-fusion.com/about#team. As you can see from the second example, an absolute link may also contain an anchor that is located on another page. Unlike a relative link, using an absolute link as a menu item to point to an anchor on another page will always work, regardless of which page on the website you’re currently on.

    Relative Links

    A relative link is a link that only works on the current page you’re on and is appended to the current URL. For example, if the About page contains a specific anchor tag, such as #team, then a menu item that has the #team anchor as a link will only work on the About page. Another example would be how a /wp-admin link would only work on the home page because /wp-admin would then be added to http://www.website.com which is a valid link.

    Creating A Multi-Page Menu

    The proper way to create a menu that has both relative and absolute links would be to create two separate menus. One menu to act as your Main Menu, and one menu specifically tailored for the page that contains the anchor links. You’ll then assign your main menu normally, and the specific menu to the corresponding page using Fusion Page Options. Below is a detailed guide on creating both menus.

    How To Create Your Main Menu

    Step 1 – Go to the Appearance > Menus tab and create a new menu.

    Step 2 – Build your menu as you normally would. For the links that you’d like to point to an anchor on a specific page, insert a ‘Custom Link’ and use the absolute link of the anchor. For example, if the anchor you’d like to point to is on the About page, then your URL will look like this: http://www.website.com/about#team

    Step 3 – Keep repeating Step 2 until all your menu items that point to an anchor on another page all contain their respective absolute links.

    Step 4 – Set this menu as your Main Navigation by checking the ‘Main Navigation’ checkbox under Theme Locations.

    Step 5 – Save all your changes by clicking the ‘Save Menu’ button.


    How To Create Your Specific Menu

    Step 1 – Go to the Appearance > Menus tab and create a new menu. Give it a unique name. For example, About Page Menu.

    Step 2 – Build your specific menu identical to your main menu. This time, instead of putting absolute links in the menu items that point to an anchor on another page, you’ll insert their relative link. For example, if the absolute link is http://www.website.com/about#team, then you’ll replace it with just #team.

    Step 3 – Keep repeating Step 2 until all your menu items that point to an anchor on another page all contain their respective relative links.

    Step 4 – Save all your changes by clicking the Save Menu button.

    Step 5 – Navigate to the specific page that contains the anchor links.

    Step 6 – Go to Fusion Page Options > Header and select your specific menu from the dropdown on the Main Navigation Menu option.

    Step 7 – Save all your changes by clicking ‘Save Draft’ or ‘Publish’.


    Why Create A Multi-Page Menu This Way?

    Creating two menus is the proper way to create a multi-page menu because it’s the best way to display relative links. If you only use one menu and only use relative anchor links for your menu items, then those menu items will not work unless you’re in the specific page where those anchors are found. This is because WordPress just appends the anchor to the current URL.

    On the other hand, If you only use absolute links, then all your menu items containing the anchor links will all be highlighted when you’re in the specific page where those anchors are found. This is because as far as WordPress is concerned, you’re already on that anchor because you’re on the specific page they’re located.

    Setting Up Contact Page

    06/15/2016

    Avada includes a Contact page with a built in contact form. We also have included 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.

    How To Create The Contact Page

    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 option to Contact from the dropdown menu.

    Step 3 – Insert your content into the editor field, such as a heading and text.

    Step 4 – To insert Google Maps, your 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.


    How To Set Your reCAPTCHA Keys

    Step 1Click Here To Register Your Domain In reCAPTCHA.

    Step 2 – Once you register your website using the form, it will give you a Site key and a Secret key.

    Step 3 – Under the reCAPTCHA Spam Options in Appearance > Theme Options > Contact, copy the Site key into the ReCaptcha Site Key field, and the Secret key into the ReCaptcha Secret Key field.

    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

    There could be a few reasons for this, please see this post for each one.

    2. Ensure Content Is Correct

    Use a correct address and not a Google Map embed code, or longitude/latitude. It has to be a written address. For example, 775 New York Ave, Brooklyn, Kings, New York 11203.

    3. Valid Copyright Information

    The copyright text has to have complete, valid HTML markup. Valid HTML is required for the theme to function properly. Please make sure to format the HTML correctly anywhere so that issues like this don’t happen.

    4. 3rd Party Plugin Conflict

    Third party plugins may be conflicting with the map feature. Please disable any plugins that were not included with Avada to see it if fixes the issue. If it does, enable the plugins one by one to find the culprit.

    Setting Up A FAQ Page

    11/02/2016
    IMPORTANT NOTE – The FAQ Page Templates have been deprecated for Avada 5.0 in favor of an FAQ element, for improved design/layout flexibility and is only available in Avada version 5.0 or higher.

    Avada includes a Frequently Asked Questions (FAQ) element that enables you to insert a FAQ posts anywhere within a page, multiple pages, anywhere on your site. A FAQ section is useful for when you’d like to display common questions or information about products or services you offer which your users frequently ask about. The FAQ post can be organized into categories and can be filtered by your users. To learn how to create individual FAQ posts and how to create a FAQ section on the page, continue reading below.

    Creating A FAQ Post

    Before adding a FAQ element to page, you should first create one or more individual FAQ posts. FAQ posts are the common questions that you’d like to provide answers to, for your users. Continue reading below for more information on how to create a FAQ post.

    Step 1 – Navigate to the ‘FAQ’ tab on your WordPress Admin Sidebar and select ‘Add New’ to add a new FAQ post.

    Step 2 – In the ‘Title’ field, enter the question you’d like to provide an answer for. For example, if you’re selling physical products, a good question could be How much does shipping cost, to the US?.

    Step 3 – In the WordPress Content Editor, enter the answer to the question in the ‘Title’ field. You can use the Fusion Builder to design, layout add elements to the content of the FAQ.

    Step 4 – Assign a category to the FAQ post. This will allow your users to filter the FAQ posts according to their category. To assign a category to a FAQ post, locate the ‘FAQ Categories’ box on the right side of the page, and click the ‘+Add New Category’. Alternatively, if the category already exists, simply check the corresponding checkbox.

    Step 5 – Once done, click ‘Publish’.


    Creating A FAQ Section on Your Website

    Once you’ve created your FAQ posts, you will use the FAQ element to display anywhere within a page, multiple pages of your website. This element has a number of options for you to configure and can be used with any column element. Continue reading below to learn how to deploy the FAQ element.

    Step 1 – Create a new page or edit an existing one.

    Step 2 – Add a new container, or add a column to an existing container. The FAQ element can be used with any column size, such as 1/1 or 1/2 etc.

    Step 3 – For the column you’d like to add the FAQ element to, click the ‘+ Element’ to bring up the ‘Elements’ window. Locate the FAQ element and click it to open it’s options window.

    Step 4 – Configure the options to your preference. You can for example choose which categories to include or exclude, display or hide featured images, element visibility, and more.

    Step 5 – Once done, click ‘Save’.


    Setting Up Side Nav Page

    06/15/2016

    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 Fusion 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 and click save.

    Step 4 – 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 5 – 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 Fusion Page Options box.

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

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


    Builder

    10/12/2016
    IMPORTANT NOTE – The Fusion Builder is now a separate plugin included with your Avada Purchase from v5.0 and up.

    For Avada 5.0, we have fully redeveloped the Fusion Builder from the ground up as a stand alone plugin with tons of new features, a brand new user interface and excellent 3rd party compatibility. Please visit the links below to view the new Fusion Builder docs and videos and make sure to update to Avada 5.0 to to be able to take full advantage of the Fusion Builder plugin.

    Fusion Builder Docs Fusion Builder Videos

    Blog

    06/15/2016

    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 Fusion Theme Options and Shortcode 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, Fusion Post Options and Fusion Theme Options. The following sections will cover each of these aspects of the blog that are listed below.

    Creating Blog Posts

    06/15/2016

    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 can 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.

    How To Create A Blog Post

    Step 1 – Navigate to Posts in your WordPress admin sidebar.

    Step 2 – Click on the Add New option to make a new post. Create a title, and insert your post content in the editing field. You can use any of our shortcode 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 the Set Featured Image button.

    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 option 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.


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

    Blog Single Post Page

    10/12/2016

    Every blog post you create has has it’s own single post page. The single post page displays the entire blog post, featured images, author details, comments, etc. In this article, we’ll be outline all the relevant sections in a single post page and how you can configure the post page using the global Theme Options, Fusion Options and use the Fusion builder to create dynamic post content. If you’d like to display an archive of your blog posts on one page, you can use the Blog Element or the Recent Posts Element. Here is a demo of our Blog Single Post page.

    Uploading Featured Images

    • Featured Image Box – For each post you create you can upload one or more featured images (the default is 5). Avada provides Featured Image Boxes on the right side of the post editing page and this is where you upload your Featured Image/s. You can only upload one image per ‘Set Featured Image’ option.
    • Featured Image Slideshow – If you upload more than one featured image Avada generates a featured image slideshow on the single post page. View a an example here.
    • Number Of Featured Images Per Post – By default you can upload 5 featured images per post, however that can be changed globally by going to Theme Options > Slideshows > Post Slideshow Images and increasing/decreasing the number (min. 1 – max. 30).

    Featured Image Dimensions

    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, using the in-post Fusion Options. The Custom featured image sizes works for single post page and the main blog page, which excludes the ‘Grid’ and ‘Timeline’ layouts.

    The ‘Featured Image Dimensions’ option (Image width and height) is located in the Fusion Page Options > Posts section of the posts page. Values are set in pixels or percentage, ex: 100% or 100px. Or Use “auto” for automatic resizing if you added either width or height.


    Featured Videos

    You can upload a Youtube or a Vimeo video to be displayed in the featured image section of the post. You can also have a combination of videos and images, displayed as a slideshow on the single post page. Read below to learn how to upload a Youtube or a Vimeo video.

    How To Upload A Youtube/Vimeo Video

    Step 1 – Go to the ‘Posts’ tab on your WordPress admin sidebar and clicking ‘Add New’ to add a new post.

    Step 2 – Give your blog post a title and add your content as normal.

    Step 3 – In the Fusion Page Options, select the ‘Post’ tab and then locate the ‘Video Embed Code’ option.

    Step 4 – Enter the Youtube or Vimeo embed code into the provided field. You can find the embed code by clicking the ‘Embed’ option on Youtube, and the ‘Share’ option on Vimeo.

    Step 5 – Click ‘Save Draft’ or ‘Publish’.


    Post Meta Information

    There are various post meta information that you can add to each post you create. Namely tags, categories and post formats. The Post Format icons will only display if you’re using the ‘Large’ or ‘Medium Alternate’ blog layouts.

    • Categories – Categories are pre-defined taxonomies used to sort content into different sections. This makes it easier for the user to filter relevant Blog posts they’d like to view. On the right side of the page you’ll see the ‘Categories’ box. Here you can assign multiple unique categories to the post. For example, WordPress, Photoshop, and the like. Categories can be clicked by the user to view all posts assigned to that particular category. You can also access and edit Categories from the Posts > Categories tab on your WP admin sidebar.
    • Tags – This is meta information you create to help further define your Blog posts. Underneath the ‘Categories’ box you’ll see the ‘Tags’ box. Here you can add tags to the post. For example, Photography, or Design. Each tag is a meta link that your viewer can click to view posts with the same tags. You can also access and edit Tags from the Posts > Tags tab on your WordPress admin sidebar.
    • Blog Post Formats – This helps display the type of post you’ve created. For example, if its an Image post, Video post or Slideshows post. Blog Post Format information will only display when using the ‘Large’ or ‘Medium Alternate’ blog layouts on the Blog element. Those layouts allow for a post icon format to display with the post. For more information, please see the Blog Post Format article.

    Using The Fusion Builder

    You can use the Avada Fusion Builder to create dynamic content for each of your posts. Click the ‘Use Fusion Builder’ button above the WordPress Content Editor to enable the Fusion Builder. Any elements and content added to the post is treated exactly like regular page content. Click the button below to learn more about the Fusion Builder.

    Click Here To Learn More About The Fusion Builder

    Single Posts

    Fusion Post Options

    Avada provides a host of options that you can use to configure a single post, located below WordPress Content Editor. Navigate to the Fusion Page Options > Posts. All options set within an individual Blog post will override the corresponding Theme Options global option that has been set.

    Click Here To View The Blog Single Post’s Fusion Page Options

    Fusion Theme Options

    In the Theme Options you can set Blog Single Post options which will affect your Blog posts globally. You then have the choice of setting in-post Fusion Options on a post by post basis, that will override the corresponding global Theme Options See below for the available Fusion Theme Options for Blog Single Posts.

    100% Width Page – Illustrated as A, this option lets you display blog posts at 100% browser width. Turn Off to follow the site width, instead.

    Featured Image/Video On Single Blog Post – Illustrated as B, this option lets you show or hide Featured images or video on blog single posts.

    Previous/Next Pagination – Illustrated as C this option lets you show or hide the previous/next pagination on single blog single posts.

    Post Title – Illustrated as D this option lets you set the position of the title relative to the Featured image. Choose between Below, Above or Disabled.

    Author Info Box – Illustrated as E this option lets you show or hide the Author Info box below blog single posts.

    Social Sharing Box – Illustrated as F this option lets you show or hide the Social Sharing Box below blog single posts.

    Related Posts – Illustrated as G this option lets you show or hide Related Posts.

    Comments – Illustrated as H this option lets you show or hide the comments.


    Assigned Blog Page

    10/20/2016

    There are three blog methods you can use to display blog posts. The first blog method we will cover is the standard WordPress method which is 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. Before you can display blog posts, you must first create them.

    Second Method – Blog Element Third Method – Recent Posts Element

    How To Assign A Post Page

    Step 1 – Create a new page by navigating to the ‘Pages’ tab in your WordPress admin sidebar. Once here, click the ‘Add New’ button at the top of the page.

    Step 2 – Input a new name for your page, then find the ‘Page Attributes’ box on right side. Under the Template section, select the ‘Default Template’ option from the dropdown list.

    Step 3 – You can choose to customize the page using options located under the Fusion Page Options box below the editor. When you’re done, click ‘Publish’ to save the page.

    Step 4 – To set a page as your main blog page, navigate to Settings > Reading and find the ‘Posts Page’ option, then select the page from the dropdown list. Doing this will automatically pull your blog posts and place them on the assigned page.


    Fusion 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 > 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 titles and descriptions to help you better understand what they do. Any type of blog options you need to set will be set in Fusion Theme Options when using the assigned blog page.

    Related Posts

    06/15/2016

    Related Posts are blog posts and appear below each active post on the single post page. The related posts that you will see are associated with the active post, by category. It is a quick and easy way to show your viewers related articles and engage your readers. You can choose to activate it globally in the Fusion Theme Options, or individually per post, using the Fusion Page Options. Continue reading below to learn more about Related Posts and its available options.

    How To Display Related Posts Globally

    Step 1 – Navigate to WP Dashboard > Avada > Theme Options > Blog > Blog Single Post > Related Posts

    Step 2 – Choose On to enable or Off to disable.

    Step 3 – Click ‘Save Changes’


    How To Display Related Posts Per Post

    Step 1 – Edit any post and go to Fusion Page Options > Post > Show Related Posts – below the content editor.

    Step 2 – Set the ‘Show Related Posts’ option to Default, Show, or Hide. The Default setting will keep the Fusion Theme Option global setting. Show or Hide will override the Fusion Theme Option global setting for that post.

    Step 3 – Click ‘Update’


    Related Posts Options

    You can manage the Related Posts options here WP Dashboard > Avada > Theme Options > Extra > Related Posts/Projects. These options also affect the Related Projects for Portfolio Posts. Continue reading to learn more about each of these options.

    IMPORTANT NOTE
    These options are global only and affect Blog posts and Portfolio posts alike.

    Related Posts / Projects Layout – Illustrated as A. Controls the layout style for related posts and related projects. Choose between title on rollover, or title below image to control where the titles are placed.

    Number of Related Posts / Projects – Illustrated as B. Controls the number of related posts and projects that display on a single post. Manually enter a value (1-30) or drag the slider left/right

    Related Posts / Projects Maximum Columns – Illustrated as C. Controls the number of columns for the related posts and projects layout. Manually enter a value (1-6) or drag the slider left/right

    Related Posts / Projects Columns Spacing – Illustrated as D. Controls the amount of spacing between columns for the related posts and projects, in pixels. Manually enter a value (0-300) or drag the slider left/right

    Related Posts / Projects Image Size – Illustrated as E. Controls if the featured image size is fixed (cropped) or auto (full image ratio) for related posts and projects. IMPORTANT: Fixed works best with a standard 940px site width. Auto works best with larger site widths.

    Related Posts / Projects Autoplay – Illustrated as F. Turn on to autoplay the related posts and project carousel.

    Related Posts / Projects Speed – Illustrated as G. Controls the speed of the related posts and project carousel, for example: 1000 = 1 second. Manually enter a value (1,000-20,000) or drag the slider left/right

    Related Posts / Projects Show Navigation – Illustrated as H. Turn on to display navigation arrows on the carousel.

    Related Posts / Projects Mouse Scroll – Illustrated as I. Turn on to enable mouse drag control on the carousel.

    Related Posts / Projects Mouse Scroll Items – Illustrated as J. Controls the number of items that scroll at one time. Set to 0 to scroll the number of visible items. Manually enter a value (0-15) or drag the slider left/right


    Blog Post Formats

    06/15/2016

    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.



    Blog Post Options

    11/02/2016

    In addition to all the standard Fusion Page Options, Avada offers several exclusive options for you to use for each individual blog post. When creating or editing a blog post, scroll below the WordPress Content Editor to find the Post tab inside the Fusion Page Options box. Inside that tab are all the individual post settings, and page settings that can be set for each blog post. In addition, we’ve listed the rest of the tabs you will see when editing a portfolio post.

    IMPORTANT NOTE – Fusion Page Options will override the global options set in Fusion Theme Options.
    Click Here To Learn More About Avada’s Options Network System

    Portfolio

    10/13/2016
    IMPORTANT NOTE – All FAQ and Portfolio Page Templates have been deprecated for Avada 5.0

    In Avada version 5.0 we decided to remove all FAQ and Portfolio Page Templates from the theme. Do not worry, nothing changes, all of the layout and configuration options previously available in page templates have been retained in the new FAQ and Portfolio Elements. This is a step in the right direction and does make Avada more flexible, intuitive and extensible. Please continue reading below for more information regarding this development and to learn how this affects you and your site.

    Avada is loaded with options for Portfolio items. It offers many different options for you to present your portfolio posts, along with several different layout choices. In addition there are numerous Fusion Theme Options and Element Options that allow you to configure how posts are displayed. The Avada portfolio is highly versatile and powerful. The following sections below will cover each aspect of the Portfolio page and it’s corresponding items.

    Displaying Portfolio Posts

    12/01/2016

    Once you’ve created your portfolio items, you can now display and showcase them on the page. To display your Portfolio posts, you have to use the Portfolio element. The Portfolio element is an excellent and flexible tool to display your portfolio items with. It comes with extensive design options and settings that allows you to build your ideal portfolio page. Continue reading below to learn more about how to display your portfolio posts.

    Portfolio Element

    IMPORTANT NOTE – The Portfolio Element (previously known as Recent Works Element) has been updated in Avada 5.0.

    The Portfolio element gives you maximum flexibility and allows you to display your portfolio posts any way you wish. This has its own design and layout options, works perfectly with all column layouts, and lets you assign specific categories to display. These options make this element a fantastic way to display your Portfolio posts. Before you can use the Portfolio Element, you must first create your portfolio items. To learn how, click the button below.

    Click Here To Learn How To Create Portfolio Items

    How To Add A Portfolio Element

    Step 1 – Create a new page, or edit an existing one.

    Step 2 – Click the ‘Use Fusion Builder’ button to activate the Fusion Builder.

    Step 3 – Add a container and select your desired column layout. Alternatively, you can add a column by clicking the ‘+ Column’ button on an existing container.

    Step 4 – Click the ‘+ Element’ button on the column to bring up the ‘Elements’ window.

    Step 5 – Locate the Portfolio element and click it to open it’s options window. Customize the element to your liking.

    Step 6 – Once finished, click ‘Save’.


    Portfolio Element and Fusion Theme Options

    Element Options

    The options below are found in every instance of the Portfolio element. These options only affect the single instance of the Portfolio element you set them on, and these options also override global options set in the Fusion Theme Options panel. Choose Default on the options that have them to keep the Fusion Theme Options settings. Element Options also features Advanced Option Network Correlation for your convenience.

    General Tab

    Layout – Illustrated as A, this option lets you select the portfolio’s layout. Choose between Carousel, Grid or Grid With Text.

    Picture Size – Illustrated as B, this option lets you select the featured image’s size. Choose between Default, Fixed, or Auto. Choose Fixed to force the featured images to display in the same width and height. Choose Auto to use the featured image’s original height and width.

    Grid With Text Layout – Illustrated as C, this option lets you select the excerpts’ layout. Choose between Default, Boxed, or Unboxed.

    Columns – Illustrated as D, this option lets you select the number of columns to display.

    Content Position – Illustrated as E, this option lets you set the content alignment and only works with Grid With Text layout and the number of Columns set to 1. Choose between Below Image, or Next To Image.

    Column Spacing – Illustrated as F, this option lets you set the column spacing.

    Posts Per Page – Illustrated as G, this option lets you set how many portfolio items to display on the page. Set to -1 to display all portfolio items.

    Portfolio Title Display – Illustrated as H, this option lets you select how to display the portfolio post title and categories. Choose between Default, Title and Categories, Only Title, Only Categories, or None.

    Portfolio Text Alignment – Illustrated as I, this option lets you set the text alignment for titles, categories and excerpt text. Choose between Default, Left, Center or Right.

    Portfolio Text Layout Padding – Illustrated as J, this option accepts a pixel value that sets the text layout’s top, bottom, left and right padding. For example, 25px.

    Show Filters – Illustrated as K, this option lets you show or hide category filters. Choose between Yes, Yes without “All”, or No.

    Categories – Illustrated as L, this option lets you select which categories to display on the page. Only portfolio items tagged under these categories will be shown. Leave blank to display all categories.

    Exclude Categories – Illustrated as M, this option lets you select which categories to hide from the page. Only portfolio items tagged under these categories will be hidden. Leave blank to hide all categories.

    Pagination Type – Illustrated as N, this option lets you select the pagination type. Choose between Default, Pagination, Infinite Scrolling, Load More Button, or None.

    Post Offset – Illustrated as O, this option lets you set how many portfolio items to skip before showing posts on the page.

    Content Display – Illustrated as P, this option lets you select how to display the portfolio item’s content. Choose between Default, Excerpt, or Full Content.

    Excerpt Length – Illustrated as Q, this option lets you set the number of words/characters to display on the excerpt.

    Strip HTML – Illustrated as R, this option lets you strip HTML from the post excerpt. Choose between Default, Yes, or No. Choose Yes to strip HTML, or No to keep it.

    Carousel Layout – Illustrated as S, this option lets you set the carousel’s layout. Choose between Title Below Image, or Title On Rollover.

    Carousel Scroll Items – Illustrated as T, this option accepts a numerical value that sets how many items to scroll. Leave blank to scroll number of visible items.

    Carousel Autoplay – Illustrated as U, this option lets you enable or disable the carousel’s autoplay feature. Choose between Yes or No.

    Carousel Show Navigation – Illustrated as V, this option lets you show or hide the carousel’s navigation. Choose between Yes or No.

    Carousel Mouse Scroll – Illustrated as W, this option lets you enable or disable the carousel’s mouse drag control. Choose between Yes or No.

    Element Visibility – Illustrated as X, this option lets you select which screen sizes to display the element in. Choose between Small Screen, Medium Screen, or Large Screen. You can choose one or more settings.

    CSS Class – Illustrated as Y, lets you add a class to the wrapping HTML element.

    CSS ID – Illustrated as Z, this option lets you add an ID to the wrapping HTML element.


    Animation Tab

    Animation Type – Illustrated as A, this option lets you select what type of animation to use. Choose between None, Bounce, Fade, Flash, Rubberband, Shade, Slide, or Zoom.

    Direction of Animation – Illustrated as B, this option lets you select the animation’s incoming direction. Choose between Top, Right, Bottom, Left, or Static.

    Speed of Animation – Illustrated as C, this option lets you set the speed at which the animation plays.

    Offset of Animation – Illustrated as D, this option lets you set at what point the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.


    Fusion Theme Options

    These options are located in the Avada > Theme Options > Portfolio > General Portfolio tab on your WP admin panel. These options are global options and will affect all Portfolio elements. To override these global settings, simply select different options in the Portfolio element itself.

    Portfolio Archive Layout – Illustrated as A, this option lets you select the portfolio archive’s layout. Choose between Portfolio One – Six Column, Portfolio One – Six Column Text, or Portfolio Grid.

    Number of Portfolio Items Per Page – Illustrated as B, this option lets you set how many portfolio items to display on the page.

    Portfolio Column Spacing – Illustrated as C, this option lets you set the spacing between columns.

    Portfolio Content Display – Illustrated as D, this option lets you select how to display the portfolio items’ content. Choose between Excerpt, or Full Content.

    Excerpt Length – Illustrated as E, this option lets you set the number of words/characters to display on the excerpt.

    Strip HTML from Excerpt – Illustrated as F, this option lets you strip HTML from the post excerpt. Choose between On, or Off. Choose On to strip HTML, or Off to keep it.

    Pagination Type – Illustrated as G, this option lets you select the type of pagination to display on the page. Choose between Pagination, Infinite Scroll, or Load More Button.

    Load More Posts Button Color – Illustrated as H, this option lets you select the Load More button’s color.

    Portfolio Slug – Illustrated as I, this option lets you set a custom permalink when you use the %postname% permalink option. This cannot be the same name as a page name or the layout will break.

    Portfolio Featured Image Size – Illustrated as J, this option lets you select the featured image’s size. Choose between Fixed, or Auto. Choose Fixed to force the featured images to display in the same width and height. Choose Auto to use the featured image’s original height and width.

    Portfolio Title Display – Illustrated as K, this option lets you select how to display the portfolio post title and categories. Choose between Title and Categories, Only Title, Only Categories, or None.

    Portfolio Text Layout – Illustrated as L, this option lets you select the excerpts’ layout. Choose between Boxed, or Unboxed.

    Portfolio Text Alignment – Illustrated as M, this option lets you set the text alignment for titles, categories and excerpt text. Choose between Left, Center or Right.

    Portfolio Text Layout Padding – Illustrated as N, this option lets you set the padding for the portfolio text layout when using Boxed mode.


    Creating Portfolio Posts

    06/15/2016

    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.

    How To Create A Portfolio Post

    Step 1 – Navigate to the Portfolio tab in your WordPress admin.

    Step 2 – Click on the Add New button to create a post. Insert a titl, then insert your post content in the editing field. You can use any of our shortcode builder elements inside the post.

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

    Step 4 – Add Tags from the right side. Type the name of the tag in the field and 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’. IMPORTANT: you must upload a featured image to each post for the post to load on portfolio pages.

    Step 7 – For a slideshow, insert more than one Featured Image and 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 options for the portfolio post in the Fusion Page Options box.

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


    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 As Described Above.

    Portfolio Single Post Page

    10/12/2016

    Each portfolio item you create also generates a corresponding Portfolio Single Post page. The single post page is the full portfolio post and associated content such as featured images, project details, Project URL text, Copyright URL text, etc. In this article, we’ll be explaining all the relevant sections in a single post page and how you to configure it to your preference. If you’d like to display all your portfolio items on a single page, you can use the Portfolio Element. You can see a demo of our Portfolio Single Post page here.

    Upload Featured Images

    • Featured Image Box – For each post you create you can upload one or more featured images (the default is 5). Avada provides Featured Image Boxes in the post editing page and this is where you upload your portfolio or project Featured Image/s.
    • Featured Image Slideshow – If you upload more than one featured image Avada generates a featured image slideshow on the single post page. View a sample here.
    • Number Of Featured Image Boxes – By default you can upload 5 featured images per post, however that can be changed globally by going to Theme Options > Slideshows > Post Slideshow Images and increasing/decreasing the number (min. 1 – max. 30).

    Featured Image Dimensions

    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 the column width if you’re using a Half Width layout 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 ‘Featured Image Dimensions’ option (Image width and height) is located in the Fusion Page Options > Portfolio section of the posts page. Values are set in pixels or percentage, ex: 100% or 100px. Or Use “auto” for automatic resizing if you added either width or height.


    Featured Videos

    You can upload a Youtube or a Vimeo video to be displayed in the featured image section of the portfolio post. You can also have a combination of videos and images, displayed as a slideshow on the portfolio single post page. Read below to learn how to upload a Youtube or a Vimeo video.

    How To Upload A Youtube/Vimeo Video

    Step 1 – Go to the ‘Portfolio’ tab on your WordPress admin sidebar and clicking ‘Add New’ to add a new post.

    Step 2 – Give your portfolio post a title and add your content as normal.

    Step 3 – In the Fusion Page Options box, switch to the ‘Portfolio’ tab, then find the ‘Video Embed Code’ option.

    Step 4 – Enter the Youtube or Vimeo embed code into the provided field. You can find the embed code by clicking the ‘Embed’ option on Youtube, and the ‘Share’ option on Vimeo.

    Step 5 – Click ‘Save Draft’ or ‘Publish’.


    Selecting The Column Width Layout

    Each Portfolio post you create allows you to set the width of the Featured Image’s column. This option is called the ‘Width (Content Columns for Featured Image)’ option and you can set it to be Full Width or Half Width. You can also set the entire Portfolio post to display 100% of the browser width.

    These options are located in Fusion Page Options > Portfolio section of the posts page.

    • Default – This is the global value that is set in Fusion Theme Options > Portfolio > Portfolio Single Post > Featured Image Column Size
    • Half Width – This option lets you set the Featured Image column on the left side of the screen, and the Project Description and Details column on the right side. View an example of a Half Width layout here.
    • Full Width – This option lets you set the Featured Image to display full width on top of the page, and the Project Description and Details below it in two columns. View an example of a Full Width layout here.
    • 100% Width Page – This option lets you display the entire Portfolio Single Post page in 100% of the browser width. View an example of a 100% Width layout here.

    Project Description

    The Project Description section is any content you insert in the WordPress Content Editor. This is usually the text description of the project, but it can also contain any of our elements. This is where you can any descriptive content detailing your project.

    Project Details

    The Project Details section contains meta information relating to the project. For Full Width layouts, the Project Details are placed in a sidebar next to the Project Description. For Half Width layouts, they’re displayed below the Project Description. Avada allows information to be added to the Project Details section. See below for each type of information you can add.

    • Categories – Categories are pre-defined taxonomies used to sort and group content into different sections and making it easier for the user to filter and select the relevant portfolio items they prefer to view. On the right side of the page, you’ll find the ‘Categories’ box. Here you can add unique portfolio categories to the post and posts can be assigned to one or more categories. For example, Web Development, Web Design etc. You can also access and edit Categories from the Portfolio > Portfolio Categories tab on your WordPress admin sidebar.
    • Skills – This is meta information you create to help further define your portfolio posts. On the right side of the page, you’ll find the ‘Skills’ box. Here you can add unique skill tags to the post. For example, HTML, PHP, Illustration. Each skills tag is a meta link that your viewer can click to view similar type of portfolio posts. You can also access and edit Skills from the Portfolio > Skills tab on your WordPress admin sidebar.

    These Project Detail options are located in the Fusion Page Options > Portfolio tab.

    • Project URL & URL Text – This option lets you insert a Custom URL and text 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 URL & URL Text – This option lets you insert a Custom URL and text for the Project Copyright. This can be useful for a project that might have been a collaboration with another person or company.


    Using The Fusion Builder

    Avada allows you to use the Fusion Builder on each single post page, as well. Simply click the ‘Use Fusion Builder’ button above the WordPress Content Editor to access the Fusion Builder. Any elements and content added to the post is treated exactly like regular page content. Click the button below to learn more about the Fusion Builder.

    Click Here To Learn More About The Fusion Builder

    Portfolio Single Post Options

    Fusion Page Options

    Avada offers several other options for the Portfolio Single Post page in the Fusion Page Options box below the WordPress Content Editor. Navigate to the Fusion Page Options > Portfolio tab to access these options. All of these Fusion Page options are useful in different situations and allow you to customize each page individually.

    Click Here To View The Portfolio Single Post’s Fusion Page Options

    Fusion Theme Options

    Aside from the Fusion Page Options which allows you to customize individual pages separately, you can opt to use the Portfolio Single Post’s Fusion Theme Options which allow you to set global options for all Portoflio Single Posts pages. Click the button below to view all the available Fusion Theme Options for Portfolio Single Post pages.

    Click Here To View The Portfolio Single Post’s Fusion Theme Options

    Portfolio Single Post Page Extended

    10/13/2016

    If you’d like to take your portfolio posts further, you can choose to enable or disable the various Single Post Page elements, such as project details, project description, and more. By doing this, you can turn a simple portfolio post page into a fully designed and customized page such as this one on the Agency Demo. Continue reading below to learn how to enable/disable the different Single Post Page elements.

    Portfolio Single Post Theme Options & Portfolio Single Post Page Options

    The Portfolio Single Post Theme Options are global options and any corresponding Portfolio Single Post Page Options set will override the global options. The available Portfolio Single Post Page Options are more comprehensve, allowing you to tailor your single post page to suit your needs, on a post by post basis. Continue reading below to learn more about each location, and how it affects your Single Portfolio Post Pages.

    • Fusion Theme Options – Located in the Avada > Theme Options tab on your WordPress admin. These options are global options that will affect every Single Portfolio Post Page. These options can be overridden on a per-page-basis by using the Fusion Page Options. View additional information here.
    • Fusion Page Options – Located in the ‘Fusion Page Options’ box on every portfolio post you create. These are options that will only affect the individual post they are applied to. When set, they will override the global Fusion Theme Options settings. View additional information here.

    Single Portfolio Post Page Options

    Fusion Theme Options

    These options are located in Avada > Theme Options > Portfolio > Portfolio Single Post. Configuring these options will affect all Single Portfolio posts globally but can be overridden by the Fusion Page Options on a post by post basis.

    Previous/Next Pagination – Illustrated as A, this option lets you turn the previous/next pagination links on or off.

    Featured Image/Video on Single Post Page – Illustrated as B, this option lets you turn featured images and videos on single portfolio post pages on or off.

    First Featured Image – Illustrated as C, this option lets you show or hide the first featured image on single post pages. Choose On to hide the first featured image, or Off to show it.

    Featured Image Column Size – Illustrated as D, this option lets you choose the featured image’s layout. Choose between Full Width or Half Width.

    100% Width Page – Illustrated as E, this option lets you display the single portfolio posts in 100% the browser width. Choose between On or Off.

    Project Description Title – Illustrated as F, this option lets you show or hide the project description title. Choose between On or Off.

    Project Details – Illustrated as G, this option lets you show or hide the project details. Choose between On or Off.

    Open Post Links In New Window – Illustrated as H, Choose On to open the single post page, project url and copyright url links in a new window. Choose No to open them in the same window.

    Comments – Illustrated as I, this option lets you show or hide comments. Choose between On or Off.

    Author – Illustrated as J, this option lets you show or hide the author name. Choose between On or Off.

    Social Sharing Box – Illustrated as K, this option lets you show or hide the social sharing box. Choose between On or Off.

    Related Projects – Illustrated as L, this option lets you show or hide related projects. Choose between On or Off.


    Fusion Page Options

    These options are located in Fusion Page Options > Portfolio, within individual portfolio page. Configuring these options will only affect the individual portfolio single post they’re set for and will override any global options set in Fusion Theme Options. Choose Default on the options that have them to keep the Fusion Theme Options settings. The Fusion Page Options also features Advanced Option Network Correlation for your convenience.

    Width (Content Columns for Featured Image) – Illustrated as A, this option lets you choose the featured image’s layout. Choose between Default, Full Width or Half Width.

    Use 100% Width Page – Illustrated as B, this option lets you display the single portfolio posts in 100% the browser width. Choose between Default, Yes or No.

    Show Project Description Title – Illustrated as C, this option lets you show or hide the project description title. Choose between Default, Yes or No.

    Show Project Details – Illustrated as D, this option lets you show or hide the project details. Choose between Default, Yes or No.

    Disable First Featured Image – Illustrated as E, this option lets you show the first featured image on single post pages. Choose between Default, Yes or No. Choose Yes to hide the first featured image, or No to show it.

    Featured Image Dimensions – Illustrated as F, this option lets you use a percentage or pixel value to set the featured image’s width and height. For example, 100px or 100%. You can also set a value for only the height or width, and set the other to Auto for automatic resizing. For example, 100px for the width and auto for the height.

    Video Embed Code – Illustrated as G, this option lets you insert Youtube or Vimeo embed code.

    Youtube/Vimeo Video URL for Lightbox – Illustrated as H, this option lets you insert the URL of the video that you’d like to display in a Lightbox.

    Project URL – Illustrated as I, this option lets you insert the URL the project text links to. For example, http://www.yoursite.com.

    Project URL Text – Illustrated as J, this option lets you insert custom project text.

    Copyright URL – Illustrated as K, this option lets you insert the URL the copyright text links to. For example, http://www.yoursite.com.

    Copyright URL Text – Illustrated as L, this option allows you to insert copyright text.

    Image Rollover Icons – Illustrated as M, this option lets you choose which rollover icons to display. Choose between Default, Link + Zoom, Link, Zoom or No Icons.

    Link Icon URL – Illustrated as N, this option lets you insert a custom URL that the ‘link’ icon links to. Leave blank for post URL.

    Open Post Links In New Window – Illustrated as O, this option lets you choose to open the single posts page, project url, and copyright url links in a new window. Choose between Default, Yes or No. Choose Yes to open the links in a new window, or No to open them in the same window.

    Show Related Projects – Illustrated as P, this option lets you show or hide the related projects. Choose between Default, Show or Hide.

    Show Social Share Box – Illustrated as Q, this option lets you show or hide the social sharing box. Choose between Default, Show or Hide.

    Show Previous/Next Pagination – Illustrated as R, this option lets you show or hide the previous/next pagination links. Choose between Default, Show or Hide.


    Portfolio Filters

    06/15/2016

    Portfolio Filters are most commonly used to sort your Portfolio items. You can use categories that you’ve assigned to posts as filters, and you can show filters on any portfolio layout. These filters allow your viewers to view your works in an organized manner, and to sort through your portfolio content on a particular page based on the filter they’re interested in. Continue reading below to learn how to apply filters, and how they work.

    Portfolio filters are Portfolio categories. Each portfolio category you create automatically creates a filter. If you have not created portfolio categories yet, please first click the button below.

    How To Create Portfolio Categories

    How To Add Portfolio Filters To Recent Works Shortcode

    Step 1 – Edit the Recent Works shortcode by clicking the Edit Element button.

    Step 2 – In the Show Filters option, you can choose Yes, Yes Without “All”, and No.

    Step 3 – In the Categories field, enter all the categories of the specific posts you’d like to display. Leave this option blank to display all categories.

    Step 4 – In the Number of Posts option, enter a numerical value to set how many posts are displayed in the shortcode.


    How To Add Portfolio Filters To Your Portfolio Page

    Step 1 – In the Pages tab of your admin sidebar, select the Portfolio page, and click the title to edit the page.

    Step 2 – Below the content editor field, you’ll find the Fusion Page Options. Navigate to the Portfolio tab.

    Step 3 – In the Portfolio tab, choose which categories you’d like to display on the page in the Portfolio Type field. Leave this field blank to display all categories.

    Step 4 – Make sure to select Show or Show Without “All” in the Show Portfolio Filters option to display filters.


    Show Portfolio Filters Options

    • Yes / Show – Selecting this option will show all the categories of the posts currently being displayed. This option also includes an All filter.
    • Yes Without “All”/ Show Without “All” – Selecting this option will show all the categories of the posts currently being displayed. This option does not include an All filter.
    • No / Hide – Selecting this option will hide all filters entirely.

    Important Portfolio Filter Information

    Filters will only work for posts that are actively on the current page. For example, a filter on page 1 cannot pull posts from page 2. Please see other important information below about filter behavior.

    “All” Filter

    You can choose to display an All filter to display all your posts, along side all the filters of the posts currently being displayed. On the other hand, you can also choose to just display the filters of the posts being displayed without the All filter. If the All filter is not used, the first filter is auto activated and only portfolio posts belonging to that category will be displayed on the page.

    Number of Portfolio Items Per Page

    When setting the number of posts that are displayed on the page with the Number of Portfolio Items Per Page option, keep in mind that the only filters that will appear on a page are the filters from the currently displayed posts. For example, if you have a total of 10 filters, and there are only 4 posts on a page with 4 filters, only those 4 filters will appear on that page. Filters cannot display posts from other pages.

    Infinite Scrolling

    Currently, only filters from the categories of the first batch of posts that load on your page will appear above your posts. We’ve made it so when you scroll down the page to load more posts, the filters will automatically update to include any categories it may have excluded beforehand. Also, when you’re viewing a certain filter and load more posts, only posts within that filter will be shown.

    Featured Image Size Options

    10/13/2016

    Every portfolio post you create requires a featured image. The feature image that you upload for a portfolio post will display on it’s Single Post Page, the Portfolio Element, Archive/Category Page, and also the Recent Works widget. Avada has different settings to customize the featured image that is displayed. Please see below for more information regarding the two different size options.

    Portfolio Featured Image Size Options

    Fixed Setting For Featured Image Sizes

    The Fixed setting will crop each featured image to be the same size on the when displayed on the Portfolio Element. This gives a consistent look because each image is cropped to have the same width & height. See the sample image on the right.

    A Site Width of 940px will best display featured images set to Fixed. This option has to generate a predetermined image size for several conditions, and the sizes are based off of a 940px site width. We cannot generate a predetermined size for all site width possibilities, so we chose to base it off a more common site width setting of 940px. If you use a site width larger than 940px, use the ‘Auto’ setting which is explained below.

    Click Here To See How Fixed Featured Images Look On A Site Width Larger Than 940px


    Auto Setting For Featured Image Sizes

    The Auto setting will allow each featured image to show at their own respective original ratio (not cropped) on the Portfolio Element. This results in a Masonry layout since the images you’re uploading may not be exactly the same size as one another. See the sample image on the right.

    If you want a consistent Grid layout using the Auto setting, simply make sure the images you’re uploading are the same size dimensions, or the same ratio. For example, if all the images are 1000px x 500px, they will look consistent in width and height and therefore give you a Grid layout. Alternatively, if some images are 1000px x 500px and others are 500px x 250px, they will still look consistent since they are the same 2 to 1 ratio.

    Click Here To See How The Auto Setting Works With Same Sized Featured Images


    Portfolio Featured Image Option Locations

    Fusion Theme Options

    Navigate to Theme Options > Portfolio > General Portfolio panel to find the ‘Portfolio Featured Image Size’ option. This is a global setting that will affect all Portfolio Element instances. To override this setting on a per element basis, simply set a different setting on the Portfolio Element itself.


    Portfolio Element Options

    The Portfolio Element can be used on any page or post where the Fusion Builder is enabled. This element has a ‘Picture Size’ option that overrides the ‘Portfolio Featured Image Size’ option in Fusion Theme Options. To keep the global settings in Fusion Theme Options, select ‘Default’ in the Element options.


    Related Projects

    06/15/2016

    Related Projects are portfolio posts and appear below each active portfolio post, and they are posts that have similar categories as the one being currently viewed. Related Projects are a convenient way to show your viewers other projects that they may be interested in, based on the one they are currently viewing. You can choose to activate it globally under the Fusion Theme Options, or individually per post under the Fusion Page Options. Continue reading below to learn more about Related Projects and its included options.

    How To Display Related Projects Globally

    Step 1 – Navigate to the Avada > Theme Options > Portfolio > Portfolio Single Post sub-panel to access the portfolio single posts options.

    Step 2 – Find the ‘Related Posts’ option and switch it to On to display Related Posts on portfolio projects globally.


    How To Display Related Posts Individually Per Post

    Step 1 – Navigate to the portfolio post you’d like to display Related Projects in, then to the Fusion Page Options box below the editor field.

    Step 2 – In the Portfolio tab, set the Show Related Posts field to Default, Show, or Hide. The Default setting will keep the Fusion Theme Option setting. Show or Hide will override the Fusion Theme Option settings for the current post.


    Related Project Options

    The various options for Related Posts are located in the Avada > Theme Options > Extra > Related Posts / Projects sub-panel. These options also affect the Related Posts for Blog Posts. All of these options are global settings that cannot be overridden per post. Continue reading to learn more about each of these options.

    Related Posts / Projects Layout – Illustrated as A on the screenshot, this option allows you to choose the layout of the related posts / projects title text. Choose from title on rollover, or title below image to control where the titles are placed.

    Number of Related Posts / Projects – Illustrated as B on the screenshot, this option allows you to set how many related posts / projects are displayed on each single portfolio or blog post. Accepts a numerical value. For example, 5.

    Related Posts / Projects Maximum Columns – Illustrated as C on the screenshot, this option allows you to set how many columns are displayed. Choose from 1 to 6.

    Related Posts / Projects Columns Spacing – Illustrated as D on the screenshot, this option allows you to set the amount of spacing between items. Accepts a numerical value. For example, 5.

    Related Posts / Projects Image Size – Illustrated as E on the screenshot, this option allows you to set how your images are displayed. Choose between fixed, which will crop the image, or auto, which will display it at the original image ratio (not original image size).

    Related Posts / Projects Autoplay – Illustrated as F on the screenshot, this option allows you to turn the autoplay feature on the carousel On or Off.

    Related Posts / Projects Speed – Illustrated as G on the screenshot, this option allows you to control the speed of related posts and projects carousel. Accepts a numerical value. For example, 1000. 1000 is equal to 1 second.

    Related Posts / Projects Show Navigation – Illustrated as H on the screenshot, this option allows you to turn the navigation buttons on the carousel On or Off.

    Related Posts / Projects Mouse Scroll – Illustrated as I on the screenshot, this option allows you to turn the mouse drag control feature on the carousel On or Off. When this is On, the links on posts will be disabled.

    Related Posts / Projects Scroll Items – Illustrated as J on the screenshot, this option allows you to control the number of items that scroll at one time. Accepts a numerical value. For example, 5. Set to O to scroll the number of visible items.


    Portfolio Post Options

    11/02/2016

    In addition to all the standard Fusion Page Options, Avada offers several exclusive options for you to use for each individual portfolio post. When creating or editing a portfolio post, scroll below the WordPress Content Editor to find the Portfolio tab inside the Fusion Page Options box. Inside that tab are all the individual portfolio settings, and page settings that can be set for each portfolio post. In addition, we’ve listed the rest of the tabs you will see when editing a portfolio post.

    IMPORTANT NOTE – Fusion Page Options will override the global options set in Fusion Theme Options.
    Click Here To Learn More About Avada’s Options Network System

    Sliders

    06/15/2016

    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

    10/12/2016

    There are two methods you can use to assign a slider to a page. You can assign a slider to a page using the Avada Fusion Page Option, and second, you can insert the slider via our Fusion Page Builder using Builder elements. Read below for more information on each method.

    Assign A Slider Via Fusion Page Options

    When assigning a Slider using the Fusion Page Options, the Slider will always be displayed directly below the main menu as this is the default setting. This ensures that the Slider isn’t affected when adjusting your sites Page’s Top Padding.

    By default, all slider types have the option to choose the position of the slider – Default / Below / Above. The slider type you choose will determine what Fusion Page Options are available to configure for the slider; For example: The Revolution Slider has the option to Enable / Disable Avada styles, the other slider choices do not have this option, etc.

    For Revolution, Layer and Elastic Sliders on mobile devices, there is a ‘Slider Fallback Image’ field in the Fusion Page Options that lets you upload a Fallback Image which will override the slider on all responsive devices. A Fallback Image option is not available for the Fusion Slider (unless you choose to upload a self hosted video and set the ‘Video Preview Image’ located in Fusion Slider > Add or Edit Slides).

    How To Assign A Slider Via The Fusion Page Options

    Step 1 – Locate the Fusion Page Options box below the WordPress Content Editor and select the ‘Sliders’ tab.

    Step 2 – Locate the ‘Slider Type’ option and select your desired slider from the dropdown field. For example, Fusion Slider.

    Step 3 – Once you’ve selected a slider, the options relating to that slider type will be visible. Select the name of the slider you’d like to display under the corresponding dropdown field. If you select ‘Fusion Slider’, then select a name from the corresponding ‘Select Fusion Slider’ field.

    Step 4 – Once done, click ‘Save Draft’ or ‘Publish’.


    Avada Slider Elements

    When you assign a Slider Element to a page or post, via the Fusion Builder, it’ll be treated as a normal element. You can add it to Columns, save it as a Custom Content Template etc. When added to a page, adjusting your Page’s Top and Bottom Padding will affect the Slider. Lastly, because it’s inserted using an element, you can also set it’s visibility settings for mobile, tablet and desktop devices.

    Slider Elements

    • Fusion Slider – Insert your Fusion Sliders into a page or post using the Fusion Slider Element.
    • Layer Slider – Insert your Layer Sliders into a page or post using the Layer Slider Element.
    • Revolution Slider – Insert your Revolution Sliders into a page or post using the Revolution Slider Element.

    How To Assign A Slider Element

    Step 1 – Create a new page or post, or edit an existing one.

    Step 2 – Click the ‘Use Fusion Builder’ button to activate the Fusion Builder.

    Step 3 – Insert a Container into the page and select your desired column layout.

    Step 4 – Click the ‘+ Element’ section to open the Elements window. Locate the Slider Element you’d like to add, then click it to open the options window. For example, the Fusion Slider Element.

    Step 5 – Select the specific Slider you’d like to activate, from the dropdown field provided. For the Fusion Slider element, it’s called the ‘Slider Name’ field; For Layer and Revolution Slider elements, it’s called the ‘Select Slider’ field.

    Step 6 – Once you’ve determined which Slider you’d like to display, you can then start configuring the styling options to your liking.

    Step 7 – Once done, click ‘Save’ to add it to the page.


    Import Our Demo Sliders

    11/18/2016

    Avada includes various sliders to use. When you import a full demo, sliders on that demo will import as long as you have the slider plugins activated before you import the demo. Customers can also import individual sliders if they wish. Each slider has its own method of importing so please read each section below carefully.

    Click Here To Download The Slider Exports

    Common Questions & Issues

    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. 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 them listed. If you do not see them, then you can import the sliders separately

    2. Folder Structure

    The zip file you 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 the links above for each method.

    3. Slider Names

    Each slider has a unique name to help identify which one it is in relation to our live demo. The names are based on the first slide in each slider and are usually a descriptive representation.

    4. Slider Images

    These demo sliders are mainly used to see our settings and see how we built the slides. You need to replace the images with your own because the images are not included in the exported data. 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.

    Slider Position

    06/15/2016

    Assigning a slider via Fusion 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 an assigned slider via Fusion Page Options either above or below the header, and the header can be set to be transparent. You can also set a global position for Sliders in Fusion Theme Options.

    Slider Position Above or Below Header

    You can choose to have the slider sit above the header, or below the header. This option is called ‘Slider Position’ and can be found in Fusion Themes Options and Fusion Page Options. To set it globally for all sliders, use the Fusion Theme Options. If you’d like to set individual slider positions for each page or post, then use the Fusion Page Options. Continue reading below for more in depth information.

    Slider Position Assigned Via Fusion Theme Options

    All assigned sliders on pages or posts will always follow the Slider Position set in Fusion Theme Options located under the Avada > Theme Options > Header > Header Content sub-panel. To set the Slider Position individually for each page or post, you can do so using the Fusion Page Options located on each page or post you create.

    Slider Position Assigned Via Fusion Page Options

    By default, when you assign a slider via Fusion Page Options, the slider position will always follow the position set in Fusion Theme Options. To change the slider position for individual pages or posts, find the ‘Slider Position’ option under the Fusion Page Options > Sliders and choose a different setting other than Default.

    Slider Position Assigned Via Shortcode

    When you insert a Slider Shortcode on a page or post, the slider will always be positioned where you place it in the post content field. This is best for when you want the slider further down the page. If you place the slider shortcode at the top of the post content field, it will have the page content top padding added to it, which is set to 55px by default. The page content top padding can be adjusted globally in Fusion Theme Options or individually in the Fusion Page Options box.

    Slider Position When Using A Transparent Header

    When assigning a slider to a page or post via the Fusion Page Options box, you can choose to make your header transparent. If you add any value of opacity to your header, 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 height to accommodate the transparent header. This option works best with our default Header Layout #1. Read more about Header Transparency here.

    Slider Revolution

    11/14/2016

    Avada includes the popular Slider Revolution 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.

    View ThemePunch Documentation Purchase Plugin For Auto Updates* View Import/Export Docs
    * Your purchase of Avada includes a copy of Slider Revolution. If you wish to receive auto updates and plugin support from ThemePunch, it requires a separate purchase of the plugin.

    Slider Revolution Sliders & Slides

    How To Create A New Slider Revolution Slider

    Step 1 – Click on the ‘Slider Revolution’ tab on your WP admin sidebar. Once on this tab, click the ‘New Slider’ button.

    Step 2 – Select the content source type from the 1st section called ‘Content Source’. If you choose ‘Post-Based Slider’ or Specific Posts, please refer to the Slider Revolution Docs for information on how to set up Content Source types.

    Step 3 – Insert a slider name and alias from the 2nd section called ‘Slider Title & Shortcode’. The alias text will generate a shortcode that can be used in the editing field of pages or posts.

    Step 4 – Select a layout in the 3rd section called ‘Select a Slider Type’ and each type will have its own settings. Once you’ve selected a Slider Type, you can also choose to load a preset from that Slider Type.

    Step 5 – Set the layout and resolution settings from the 4th section called ‘Slide Layout’. Here, you can set different heights and widths for your slider when viewed on different mobile screens or viewports.

    Step 6 – On the right hand side, you’ll find many more options you can set for you slider, such as General, Layout & Visual, Navigation, etc. Each option will have a self-explanatory description, so feel free to explore each tab and test the options out.

    Step 7 – Once you are done, click the green ‘Save Settings’ button at the very bottom of the page, or the green save icon on the top of the screen.



    How To Add Slides To Your Slider

    Step 1 – Go to the Slider Revolution tab on your WP admin sidebar and select the Slider you’d like to add slides to from the Slider Revolution section.

    Step 2 – Hover over the ‘Add Slide’ button and select the type of slide you’d like to add. Once selected, it will create a new blank slide.

    Step 3 – You can change the title of your new slide by hovering on it, and clicking the name field. Enter your new name, then click the pencil icon right beside it to save your new slider name.

    Step 4 – Before you reach the Slide Editor, you’ll find additional tabs that allows you to set the slide’s Main Background, General Settings, Thumbnail, Slide Animation, Link & SEO, etc. We won’t go into detail on what each option in these tabs do, but please feel free to check out each option.

    Step 5 – Below the page is the Slide Editor. To add a new layer, hover over the blue ‘Add Layer’ button on the top left side of the canvas and select which type of layer you’d like to add. You can add a Text/HTML layer, an Image layer, a Video layer, a Button layer, a Shape layer, etc.

    Step 6 – Once you add a layer, You can customize it further by using the tabs on top of the canvas. These tabs are the Style tab, Animation tab, Loop tab, Visibility tab, Behaviour tab, etc. We won’t go into detail on what each option in these tabs do, but feel free to check out each option.

    Step 7 – You can switch to and from layers using the dropdown beside the ‘Add Layer’ button. On this toolbar, you’ll also find the image icon, resize icon, delete icon and duplicate icon.

    Step 8 – If you enable the ‘Custom Grid Size’ options under the ‘Slide Layout’ section in the Slider Settings, you’ll also find viewport icons where you can change between viewports and adjust how the slider is displayed on each.

    Step 9 – Below the canvas is the Animation Timeline. Here, you can see all the layers you currently have. You can rearrange layers here, and you can also click the Play button to Preview the slide’s animations.

    Step 10 – Once finished, click the green save icon on the upper right part of the screen. Keep repeating this process for any new slides you’d like to create.





    Slider Revolution Mobile Padding Class

    When using a 100% width slider, content may need to sit directly on the edge of the site width so it aligns with the logo and other page content. However on mobile devices, the logo and other page content has padding applied so it is not right on the screen edge. If you want your slider content to also have the same padding on mobile so it aligns with other content, you can use a custom class on each layer in your slider. Select any layer and insert fusion-revslider-mobile-padding in the ‘Classes’ field located in the ‘Attributes’ section of the slider creation page.

    Slider Revolution Overview

    Layer Slider

    11/21/2016

    Avada includes the popular Layer Slider Created By Kreatura. It is slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects, even from your WordPress posts and pages. We cannot cover everything here but we’ve outlined how to setup a slider and add slides to it. We’ve also included a video tutorial walk through.

    Click Here To Learn Install and Activate the Layer Slider Plugin

    Purchase The Layer Slider Plugin To Receive Auto Updates And Plugin Support
    * Your purchase of Avada includes a copy of the Layer Slider. If you wish to receive auto updates and plugin support from Kreatura, it requires a separate purchase of the plugin.

    Layer Slides And Sliders

    How To Create A New Layer Slider

    Step 1 – Click on ‘the Layer Slider’ tab on your WP Admin panel, then click the ‘Add New’ button on the top of the page, give the slider a name, then click ‘Add Slider’ to add it to the list.

    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. Please Check out each tab.

    Step 3 – On the Appearance tab there is a ‘Skin’ field. There are several to choose from including our own Avada skin which is called Avada.

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

    IMPORTANT NOTE – You can get Kreatura’s sample sliders by clicking the ‘Import Sample Sliders’ button next to the ‘Add New’ button. It’s a good way to learn and see the different types of settings.


    How To Add Slides To Your Slider

    Step 1 – Open the Slider you’d like to add slides to, then click on the ‘Slides’ tab at the top of the page.

    Step 2 – Slide #1 will already be created. Add a background image for the slide, set thumbnails, transitions, links and more in the Slide Options box above the Slider Preview window.

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

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

    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 the ‘Save Changes’ to save it.

    Step 8 – Add more slides by clicking the ‘+’ icon.


    Layer Slider Interface Overview

    Fusion Slider

    09/30/2016

    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.

    The Fusion Slider consists of sliders and slides. You must first create a slider, then create slides and assign them to the slider. Any slide you create can be assigned to any slider. Continue reading below to learn about Fusion Sliders and Slides.

    Fusion Sliders

    Before you can display your Fusion Slider on your site, you must first create a slider for your slides. In this section, we’ll be covering how to create a slider, the options you can use to customize it, and some important information.

    How To Create A New Fusion Slider

    Step 1 – Navigate to the Fusion Slider > Add or Edit Sliders tab on your WordPress admin panel.

    Step 2 – Give your slider a name by entering it in the ‘Name’ field.

    Step 3 – Each slider you make can be used as a shortcode in a page or post. Enter a unique shortcode name in the ‘Shortcode’ field.

    Step 4 – Under the ‘Slider Size’ option, you can enter your slider’s width and height.

    Step 5 – If you would like your slider to be full width of the browser window, then you can set your slider’s height to 100%. Otherwise, set it to any pixel value to display a fixed width.

    Step 6 – If you would like your slider to be full screen, then you can check the ‘Full Screen Slider’ checkbox. This enables your slider to display 100% width and 100% height of the viewing area.

    Step 7 – If you’d like your slider to have a parallax scrolling effect, then you can check the ‘Parallax Scrolling Effect’ checkbox. Please make sure to read the important information for this option below in the Fusion Slider Options section.

    Step 8 – There are may other options you can customize, such as the navigation options, autoplay, slide loop, animation, and the like. Please continue reading below for a description about each setting.

    Step 9 – Once you are finished customizing your slider, click the ‘Add Slider’ button at the very bottom to save your slider.


    Fusion Slider Options

    Name – Illustrated as A on the screenshot, this option allows you to set a name for your slider.

    Shortcode – Illustrated as B on the screenshot, this option allows you to set a shortcode name that can be used in the post content area. This is usually all lowercase and contains only letters, numbers and hyphens.

    Slider Size – Illustrated as C on the screenshot, these options allow you to set a width and height value for your slider. You can set your slider width to 100% to display it as full width on your site.

    Slider Content Max Width – Illustrated as D on the screenshot, this option allows you to set a maximum width value for your slider’s content. For example, 850px. Leave blank to follow your site width value.

    Full Screen Slider – Illustrated as E on the screenshot. You can check this checkbox to display your slider as full screen. Your slider will be 100% width and 100% height of your screen.

    Parallax Scrolling Effect – Illustrated as F on the screenshot. Check this checkbox to enable a parallax scrolling effect on your slider. This effect only works when assigning the slider in Fusion Page Options. This effect won’t work if you are using a Slider Shortcode.

    IMPORTANT NOTE – When this option is enabled, the slider height you input will not be exact due to negative margin which is based on the overall header size. For example, if you have a header side of 50px, and you’ve set your slider to have a height of 500px, then your slider will be 450px high when displayed on the front end of your site. Please take this into consideration.

    Display Navigation Arrows – Illustrated as G on the screenshot. Check this checkbox to display the navigation arrows on each side of the slider.

    Navigation Box Size – Illustrated as H on the screenshot, these options allow you to set a pixel value for the width and height of the navigation box. For example, 40px.

    Navigation Arrow Size – Illustrated as I on the screenshot, this option allows you set a pixel value for the size of the navigation arrows. For example, 25px.

    Display Pagination Circles – Illustrated as J on the screenshot. Check this checkbox to display the pagination circles on the slider.

    Autoplay – Illustrated as K on the screenshot. Check this checkbox to enable the autoplay feature on the slides.

    Slide Loop – Illustrated as L on the screenshot. Check this checkbox to enable the loop feature and have your slides loop infinitely.

    Animation – Illustrated as M on the screenshot, this option allows you to set an animation type for slide transitions. Choose between Fade or Slide.

    Slideshow Speed – Illustrated as N on the screenshot, this option allows you to set a numerical value that controls the speed of your slideshow. For example, 1000. 1000 is equal to 1 second.

    Animation Speed – Illustrated as O on the screenshot, this option allows you to set a numerical value that controls the speed of the slide transition. For example, 1000. 1000 is equal to 1 second.

    Responsive Typography Sensitivity – Illustrated as P on the screenshot, this option allows you to set the responsive typography sensitivity on the slider. To learn more about this, please read our Responsive Headings article.

    Minimum Font Size Factor – Illustrated as Q on the screenshot, this option allows you to set the minimum distance between headings and body text on the slider. To learn more about this, please read our Responsive Headings article.


    Fusion Slides

    Once you’ve created a Slider, you can now create Slides which you can assign to any existing Slider. Slides are where you create your and upload your content to be displayed on the Slider. In this section, we’ll be covering how to create slides, the options you can use to customize them, and some important information.

    How To Create A New Fusion Slide

    Step 1 – Navigate to the Fusion Slider > Add or Edit Slides tab on your WordPress admin panel.

    Step 2 – Click the ‘Add New Slide’ button at the top of the page.

    Step 3 – Once you create a new Slide, don’t forget to give it a name.

    Step 4 – Choose what Background Type you’d like to use. You can choose from Image, Self-Hosted Video, Youtube or Vimeo. Read more about each Background Type below.

    Step 5 – Customize the Slider Content settings. Enter headings, captions, buttons and more. Read more about the Slider Content settings below.

    Step 6 – Customize the Slide Link Settings. Choose to link a button, or the full slide. Read more about the Slider Content settings below.

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

    Step 8 – When finished, click the ‘Publish’ button to save the slide.


    Fusion Slide Options

    Background Type
    • Image Slide – Enter the background image you’d like to display in the Featured Image box on the right hand sidebar.
    • Self Hosted Video SlideMP4 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 respective fields. OGV is optional. You’ll 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, loop the video, hide the video 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, loop the video, hide the video controls 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, loop the video and add a color overlay to the video.

    Slider Content Settings
    • Content Alignment – Select if the content is left, right or center aligned.
    • Heading Area – Enter the heading text that will display on your slider. You can also choose to insert HTML markup and Fusion shortcodes, such as a separator, into the text field.
    • Heading Font Size – Adjust the font size of the heading text by entering a numerical value. For example, 60.
    • Heading Color – Select a color for the heading font by entering a hexcode. For example, #000000.
    • Heading Background – Choose to display a semi-transparent background behind the heading text. Choose between Yes or No.
    • Heading Background Color – Select a color for the heading background by entering a hexcode. For example, #000000.
    • Caption – Enter a text caption for your slide. You can also choose to insert HTML markup and Fusion shortcodes, such as a separator, into the text field.
    • Caption Font Size – Adjust the font size of the caption text by entering a numerical value. For example, 60.
    • Caption Color – Select a color for the caption font by entering a hexcode. For example, #000000.
    • Caption Background – Choose to display a semi-transparent background behind the caption text. Choose between Yes or No.
    • Caption Background Color – Select a color for the caption background by entering a hexcode. For example, #000000.

    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.
    • Full Slide Link – Enter a URL where your full slide background will link. You can also choose to open the link in a new window or not.

    Fusion Slider Creation Page Overview

    Fusion Slider Import, Export and General Options

    Under this section, we’ll be covering how to import or export Fusion Sliders, as well as how to edit, delete or clone a Fusion Slide or Slider. Continue reading below for detailed instructions for each of these processes.

    How To Edit, Delete or Clone A Slide Or Slider

    Step 1 – Navigate to the Fusion Slider > Add or Edit Sliders tab on your WordPress admin panel to access your sliders, or navigate to Fusion Slider > Add or Edit Slides to access your slides.

    Step 2 – On these pages, you will see a list of all your existing slides or sliders. Hover over the slide or slider you’d like to customize, and a set of options will appear.

    Step 3 – These options are Edit, Quick Edit, Delete or Clone. Edit allows you to edit the slide or slider, Quick Edit allows you quickly edit important options without leaving the page, Delete allows you to delete the slide or slider, and Clone allows you to duplicate the slide or slider.

    Step 4 – Simply click on the specific action you’d like to do.

    Step 5 – Alternatively, if you’re already editing a slide or slider, there will be a ‘Clone This Slide’ or ‘Clone This Slider’ button directly under the Title field.


    How To Import / Export Fusion Slides & Sliders

    Step 1 – Navigate to the Fusion Slider > Export / Import tab on your WordPress admin panel.

    Step 2 – To export all your Fusion Slides and Sliders, simply click the ‘Export All Sliders’ button. Once you click this button, a file named fusion_slider.zip will be downloaded. This file contains all your slide images, a settings.json file, and a sliders.xml file.

    Step 3 – To upload all your Fusion Slides and Sliders, click the ‘Choose File’ button and select the .zip file that you received after exporting your Fusion Sliders. Once you have the correct file chosen, click the ‘Upload File and Import’ button.

    Step 4 – Wait until the import is finished, then go to the Fusion Slider tab on your WordPress admin panel to see your newly imported slides and sliders.


    Elastic Slider

    06/15/2016

    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 Fusion Theme Options panel.

    How To Create A New Elastic Slider

    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 Fusion Theme Options

    The Elastic Slider has its own tab in Fusion 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 Fusion 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

    How To Update The Premium Plugins

    06/15/2016

    Please note that Avada does include updates for our Premium Sliders (Revolution Slider and Layer Slider), however, this does not mean that you will receive an individual license for these Premium Sliders. Due to Envato’s licensing rules, we can only issue updates for these plugins when we issue a theme update. Please continue reading below for further information on the process of how these updates are given.

    Premium Sliders Update Process

    When you purchase a theme that bundles Revolution Slider and Layer Slider, such as Avada, you get to use these Premium Sliders with the theme. However, your purchase of Avada does not give you an individual license for the Revolution Slider and Layer Slider to use or download as you wish.

    Due to license rules, we can only issue new plugin updates when we issue new theme updates. So anytime Avada is updated, the latest plugin for the Revolution Slider and Layer Slider will be included. This is according to the licensing rules enforced by Envato, and is something out of our control and must abide by.

    In addition, this also ensures that we fully test the plugin to make sure there are no critical bugs that will conflict with our own update. This is a benefit that we also test any version we give with our theme before our customers get it.

    How To Get Auto Plugin Updates

    Due to the license rules stated above, the only way to get automatic plugin updates is to purchase the plugins individually through CodeCanyon. Doing this provides you with a regular license for the plugin and a purchase code that can be used for Automatic Theme Updates.

    Purchase LayerSlider To Receive Auto Updates Purchase Revolution Slider To Receive Auto Updates

    Other Slider Types

    10/12/2016

    Aside from our amazing Premium Sliders, Avada also features various other slider types such as the Slider Element, Post Slider Element, Portfolio and Blog Post Slider, Image Carousels, WooCommerce Featured Products Slider, and finally, the WooCommerce Products Slider. Continue reading below to learn more about our other Slider types. If you’d like to learn about our Premium Sliders, please click the button below.

    Click Here To Learn About Our Premium Sliders

    Slider Element

    Our Slider Element is ideal for users who prefer a simpler, and more basic slider to showcase their website’s images. This element makes uploading images and videos slides simple and easy.

    Step 1 – Create a new page or post, or edit an existing one.

    Step 2 – Insert a Container and select your desired column layout.

    Step 3 – Click the ‘+ Element’ section to bring up the Elements window. Locate the ‘Slider’ element and click it to open the options window.

    Step 4 – On the right side of the element, you’ll see parent settings which affect the entire element. On the left side, you’ll see individual slide items. To edit a slide, click the ‘Edit Item’ icon on the slide you’d like to edit.

    Step 5 – To add a new slide, click the ‘+ Slide’ button.

    Step 6 – You can duplicate existing slide items by clicking the ‘Clone Item’ icon. Also, you can re-arrange them dragging them into place.

    Step 7 – After adding a new slide item, select its ‘Slide Type’ to determine if the slide is an Image Slide or a Video Slide. Once you’re done editing the slide, click ‘Save’ to save your changes.

    Step 8 – Once you’re finished adding slides and configuring the element, click ‘Save’ to add it to the page.


    Post Slider Element

    IMPORTANT NOTE – Only posts with Featured Images will be displayed in the Post Slider.

    Avada’s Post Slider Element automatically pulls your blog posts, titles and excerpts into a sleek and modern slideshow. It includes configuration options such as layout, categories, etc. To view this element in action, visit our live demo here.

    Post Slider Element Layouts

    • Post With Titles – Displays your post’s title over a featured image.
    • Post With Excerpt & Titles – Displays post’s title and excerpt over a featured image.
    • Attachments (Images Only) – Displays images uploaded to page or post.

    How To Create A Post Slider Element

    Step 1 – Create a new page or post, or edit an existing one.

    Step 2 – Insert a Container and select your desired column layout.

    Step 3 – Click the ‘+ Element’ section to bring up the Elements window. Locate the ‘Post Slider’ element and click it to open the options window.

    Step 3 – Configure your settings to your preference. You can configure the element’s layout, which category to display, or how many slides to display.

    Step 4 – Once done, click the ‘Save’ button.


    Portfolio and Blog Post Sliders

    Portfolio and Blog Post Sliders aren’t elements, they’re simply pre-set Post Sliders created by adding featured images to a blog or a portfolio post. To view the Portfolio Post Slider in action, view our live demo by following this link. Alternatively, if you want to view the Blog Post Slider, follow this link instead.

    View Information About Portfolio Post Slider View information About Blog Post Slider

    Image Carousel Element

    IMPORTANT NOTE – If you have the Image Lightbox option enabled, you cannot link the image to another website. You must place your image’s URL in the Image Website Link field, instead.

    Avada’s Image Carousel Element can be used to conveniently showcase any type of image. Each image can have a custom link or open in a lightbox. To view the Image Carousel and it’s many uses, please view our live demo by following this link.

    Step 1 – Create a new page or post, or edit an existing one.

    Step 2 – Insert a Container and select your desired column layout.

    Step 3 – Click the ‘+ Element’ section to bring up the Elements window. Locate the ‘Image Carousel’ element and click it to open the options window.

    Step 4 – On the right side of the element, you’ll see the parent settings which affect the entire element. On the left side, you’ll see the individual slide items. To edit a slide, click the ‘Edit Item’ icon on the slide you’d like to edit.

    Step 5 – To add a new Image slide, click the ‘+ Image’ button.

    Step 6 – You can duplicate existing slide items by clicking the ‘Clone Item’ icon. Also, you can re-arrange them dragging them into place.

    Step 7 – Once you’re done adding slides and configuring the element, click ‘Save’ to add it to the page.


    WooCommerce Featured Products Shortcode Element

    The WooCommerce plugin provides a WooCommerce Featured Products element that automatically pulls your featured products from WooCommerce. This Slider features a beautiful design that will surely grab your customer’s attention. To view the WooCommerce Featured Products Slider, please view our live demo by following this link.

    IMPORTANT NOTE – To set a product as ‘Featured’, navigate to the ‘Products’ tab on your WP Admin Sidebar and click the ‘Star’ icon.

    Step 1 – Create a new page or post, or edit an existing one.

    Step 2 – Insert a Container and select your desired column layout.

    Step 3 – Click the ‘+ Element’ section to bring up the Elements window. Locate the ‘Woo Featured’ element and click it to open the options window. Configure the shortcode element to your preference.

    Step 4 – Once done, click ‘Save’ to add it to the page.


    WooCommerce Products Carousel Element

    Another feature that the WooCommerce plugin provides is the WooCommerce Products Carousel Element. This Carousel allows you to display your products neatly. You have the option to show only one category, a combination of them, or to show all of them. You can also choose to show or hide information such as category, price and buttons.

    Step 1 – Create a new page or post, or edit an existing one.

    Step 2 – Insert a Container and select your desired column layout.

    Step 3 – Click the ‘+ Element’ section to bring up the Elements window. Locate the ‘Woo Carousel’ element and click it to open the options window. Configure the shortcode element to your preference.

    Step 4 – Once done, click ‘Save’ to add it to the page.


    Purchase Codes For Premium Sliders

    11/18/2016

    When purchasing Avada, you’ll be provided with a unique Purchase Code that you can use to receive auto-updates, theme support and more for the Avada theme. The purchase code you receive can only be used for the Avada theme, not for the included 3rd party plugins.

    The Avada purchase code cannot be used to register the Revolution Slider or Layer Slider

    You can only register the Layer & Revolution Slider plugins if you have purchased them individually from CodeCanyon. Although the status of the plugins state that the site is not authorized to receive updates, this is no cause for alarm. Rest assured that these messages can be ignored and that with every new version of Avada we release, we always make sure to include the latest available versions of the plugins that come bundled with the theme.

    Below are the various areas you will see these messages. They can be ignored unless you wish to purchase the plugins individually for their own auto updates and premium author support.

    Purchase a separate license for Slider Revolution or Layer Slider

    As explained above, you do receive both the Layer Slider and Revolution Slider with your Avada purchasde. However, both of these plugins offer auto updates and premium support if you buy it directly from them. This will give you an individual purchase code for their plugin

    Purchase Slider Revolution Plugin For Auto Updates And Plugin Author Support* Purchase Layer Slider Plugin For Auto Updates And Plugin Author Support*

    * Your purchase of Avada includes a copy of Slider Revolution and Layer Slider. However, if you wish to receive auto updates and plugin support from the individual plugin authors, it requires a separate purchase of their plugin.

    Conditional Script Loading

    06/15/2016

    If you have the Layer or Revolution Slider installed, their scripts will load on each and every page of your site, even if the slider is not assigned to one of those pages. This is the default behavior of both of these sliders, and is not related to the theme. The good news is that both of them offer a way to only load the scripts on pages that have the slider on them. Continue reading below to learn how to set this feature up.

    How To Configure The Revolution Slider

    Step 1 – Go to the Revolution Slider tab in your admin sidebar.

    Step 2 – In the upper right corner, click the Global Settings button.

    Step 3 – Switch the ‘Include RevSlider Libraries Globally’ option off. You can also choose to manually add which pages to include RevSlider libraries.

    Step 4 – Click the Update button to save all your changes.


    How To Configure The Layer Slider

    Step 1 – Go to the LayerSlider WP tab in your admin sidebar.

    Step 2 – Expand the ‘Troubleshooting & Advanced Settings’ section.

    Step 3 – Switch the ‘Conditional Script Loading’ option on.

    Step 4 – Click the Save Changes button to save all your changes.


    IMPORTANT NOTE – On page speed test like Google Page Speed, loading scripts on all pages can result in Render Blocking errors. Using the above option will reduce those errors on pages that do not have a Layer or Revolution Slider. However, using these options can cause other conflicts. If you see issues, it is recommended to keep them on.

    Footer

    06/15/2016

    The Avada footer consists of the widget area and the copyright area. Both of these areas can be configured in Fusion 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.

    Footer Special Effects

    06/15/2016
    IMPORTANT NOTE – This feature is only available in Avada 3.8 or higher.

    Avada includes a flexible footer than you can customize in various ways. Avada’s Footer allows you to insert various widgets, social icons, copyright text, and much more. You can also apply different effects to it, which we will go into detail below. Continue reading to learn more about the Footer Special Effects options and their descriptions.

    • None – This option allows you to disable any special effects.
    • Footer Parallax Effect – This option allows you to enable or disable a fixed footer with a parallax scrolling effect.
    • Parallax Background Image – This option allows you to enable or disable a parallax effect on the background image selected in Background Image For Footer Widget Area field.
    • Sticky Footer – This option allows you to enable or disable a sticky footer and set a sticky footer height value.
    • Sticky Footer and Parallax Background Image – This option allows you to enable or disable a sticky footer with a parallax effect on the background image.

    Footer Parallax Effect

    Checking this radio box will enable the Footer Parallax effect. This effect will apply a parallax scrolling effect on the footer. When you scroll down, the footer will be hidden behind the page content, then it is revealed as you scroll to the bottom of the page.

    Parallax Background Image

    Checking this radio box will enable the Parallax Background Image effect. The Parallax effect will be applied to the image selected in the Background Image For Footer Widget Area field in the Avada > Theme Options > Footer > Footer Background Image sub-panel.

    Sticky Footer

    Checking this radio box will enable the Sticky Footer effect. This allows the footer to always stick to the bottom of the browser window, even on pages with little content. IMPORTANT: For this effect to work, the Sticky Footer Height field must be filled in. View below to find out how to find your correct footer height.

    Sticky Footer & Parallax Image

    Checking this radio box will enable a combination of the Sticky Footer and Parallax Background Image effect. IMPORTANT: For this effect to work, the Sticky Footer Height field must be filled in. View below to find out how to find your correct footer height. Once the correct height is entered, when the page loads the footer will be stuck to the bottom of the browser window.

    How To Find Your Sticky Footer Height

    When using the sticky footer option above, you must enter the correct sticky footer height for it to work. Every footer will have a different height, and the only way to determine your footer height is to use browser dev tools and inspect.

    Sticky Footer must have the correct height of the entire footer (widget area + copyright area) to work correctly.

    Step 1 – The height of the footer will changed based on content so always set your footer up first with widgets and any other content you wish to display.

    Step 2 – Once your footer is complete, open up your web page and use browser dev tools (Firefox, Safari, Chrome) to inspect the footer.

    Step 3 – Scroll to your footer and right click on the background area and choose “Inspect Element” to bring up the dev tool inspector in your chosen browser.

    Step 4 – In the dev tools popup window, look in the dom tree (markup structure) for div class=“fusion-footer” then click on it to highlight it.

    Step 5 – The entire footer area will be highlighted and show you the exact width and height. Enter the height shown into the “Sticky Footer Height” field in theme options.

    Adding Footer Widgets

    06/15/2016

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

    How To Add Widgets To The Footer

    Step 1 – First, make sure that you’ve enabled footer widgets on your site. To do this, navigate to the Appearance > Theme Options > Footer panel and switch the ‘Footer Widgets’ option to On. Set how many columns you’d like to display by customizing the ‘Number Of Footer Columns’ option.

    Step 2 – Once you’ve enabled footer widgets, navigate to Appearance > Widgets to access the widgets and footer widget sections.

    Step 3 – You will see a ‘Footer Widget X’ section on the right hand side for each footer column you selected to have in Fusion Theme Options.

    Step 4 – On the left hand side are your widgets, simply drag and drop the widgets you want from the left side into the ‘Footer Widget’ sections on the right side. See the screenshot below.


    Translations

    11/04/2016

    Avada comes with a bunch of included translation features for different kinds of purposes. It is possible to translate every single string that the theme outputs on the frontend to any language you like. This can be done without any additional plugin. Thanks to our users, Avada ships pre-translated to 23 languages and there are new ones constantly being added. Since version 3.6, the theme also supports full translation capability for backend. This means that our Fusion Theme Options panel can be translated to your preferred language.

    Apart from the already built-in functionality, Avada also supports the use of the best and most widely used multi-language plugins, like WPML and Polylang. To know more about these language plugins, click here for  WPML and here for Polylang.

    These amazing set of features make Avada ready for every kind of project that includes any languages you can think of. The following sections will cover the different areas of translating the theme and using multi-language plugins.

    Click Here To Buy WPML Plugin

    Translation Basics

    11/04/2016

    If you are new to translating WordPress, you’re in the right place! In general, internationalization and localization (commonly abbreviated as i18n and l10n respectively) are terms used to describe the effort to make WordPress available in languages other than English for people from different locales. The actual localization is done using the GNU gettext framework, which is used by WordPress itself including the themes and plugins.

    In order to make WordPress recognize the language to which you want to translate the core WordPress, the theme or the plugins, you have to define the language within the wp-config.php file or change a setting within the dashboard. The process is dependent on the WordPress version and is described below:

    For Pre-WordPress 4.0 versions

    To Translate WordPress, Avada Or Plugins, Follow These Steps.

    Step 1 – Login to your FTP account and edit the wp-config.php file.

    Step 2 – In the wp-config.php file, look for WPLANG constant which looks like:

    define('WPLANG', '');

    If the constant is not available in the wp-config.php file, please add it anywhere in a new line.

    Step 3 – Define the WPLANG constructor by adding the ISO Language code of your language. The names consist of locals, a combination of language and regional dialect. For example, if you were translating to Deutsch language, change the WPLANG constant to look like the following code:

    define('WPLANG', 'de_DE');
    IMPORTANT NOTE – First 2 characters of a language code define the Language, the last 2 characters define the Country. Click here for more information on the ISO Language Codes.

    For WordPress 4.0 and above

    To Translate WordPress, Avada Or Plugins, Just Follow This Step.

    Step 1 – Change the language in the admin settings screen, Settings > General > Site Language, to your desired language.


    Included Language Files

    11/04/2016

    Before attempting to make your own translations, we suggest checking the pre-created language files that ships with Avada. All these files have been contributed by our amazing users and the amount of translated strings might vary.

    How To Use A Pre-Created Language File

    Step 1 – Download language files from our GitHub Repo here.

    Step 2 – Click the ‘Clone or download’ button on the upper right corner and choose ‘Download ZIP’ to download the language files.

    Step 3 – The download contains three sub folder: Avada, fusion-core and fusion-builder. The Avada folder contains the main translation files for the theme, while the other folders contain those for the corresponding required plugins.

    Step 4 – Copy the .po and .mo files of your selected language to your WordPress install. For Avada language files, paste them to the wp-content/languages/themes folder. For plugin language files, paste them to the wp-content/languages/plugins folder. For detailed explanation of the storage locations, take a look here: Storing Translation Files.

    Step 5 – Login to WP-admin dashboard and navigate to the Settings > General tab.

    Step 6 – Find the Site Language option and select the language you’ve just added from the dropdown. For example, if you’ve added Avada-de_DE.po and .mo, you would select ‘German’ (Deutsch) from the dropdown.

    Storing Translation Files

    11/04/2016

    Storing translation files in the right directory is very important to make sure the translations you’ve downloaded, created or edited remain functional and intact. The best way to do this is store them inside the languages folder located inside the wp-content folder.

    Storing Inside The wp-content Folder

    How To Store Theme Translation Files

    Place your theme translation files inside wp-content/languages/themes folder. If you don’t have the languages and themes folder, simply create the languages folder, and the themes folder inside it.

    Updating the theme will not overwrite the wp-content folder. Storing your translation files here will ensure they stay intact during updates.

    When storing your language files, remember that the file structure is different and must include the theme name, as well. For example, if the language files are in the Deutsch language, the file names would be Avada-de_DE.mo and Avada-de_DE.po.


    How To Store Plugin Translation Files

    Place your plugin translation files inside wp-content/languages/plugins/ folder. If you don’t have the languages and plugins folder, simply create the languages folder, and the plugins folder inside it.

    Updating the plugin will not overwrite the wp-content folder. Storing your translation files here will ensure they stay intact during updates.

    When storing your language files, remember that the file structure is different and must include the plugin name, as well. For example, if the language files are in the Deutsch language, the file names would be fusion-core-de_DE.mo and fusion-core-de_DE.po.


    Translating The Theme

    11/04/2016

    Within this section, you’ll find everything you need to localize and internationalize the Avada theme into your language. It is split into several subsections to help you easily find what you need. The Avada theme and the Fusion Builder and Fusion Core pluginw, that are bundled with the theme, are translated separately. Let’s take a look at translating Avada first.

    IMPORTANT NOTE – To fully translate the theme, please take note that you must also translate Fusion Builder and Fusion Core plugin. View our articles about Translating Fusion Builder and Translating Fusion Core.
    In the Avada theme translation files, the following features can be translated:
    • Frontend– The Frontend of the theme; such as the Contact form, the “All” string on Portfolio filters, Blog pages set as the Home page, or Blog pages from WordPress’ Reading Settings.
    • Fusion Theme Options – The Fusion Theme Options and all the options included in it; such as General options, Site Width options, Header options and the like.
    • Fusion Page Options -The Fusion Page Options and all the options included in it; such as Post options, Page options, Sliders options and the like.

    Theme Translation Basics

    This section will explain where you can find the files needed for translation and what these files are for. Avada comes with a steadily growing number of available languages, which can be downloaded from our public GitHub Repo. These are pre-defined translations, powered by our user base. You can see usage details here: Included Language Files

    If your language is not already part of our repository, you can easily create your own translation files. Inside the Avada main theme folder, you will find a folder called languages. If you have downloaded the Installable WordPress Package file, you will find this file in the languages folder:

    • Avada.pot – A list of all the text strings used in the Theme files. These text strings are in the English language, and can contain a translation for each text string.

    This file can be used as a starting point to create your own translations, using e.g. a third party tool like POEdit.

    In order for WordPress to recognize the resulting language files, you must name them accordingly using the ISO Language Codes. For example, if you wanted to translate Avada to the Deutsch language, the filenames would be Avada-de_DE.po and Avada-de_DE.mo.

    Please see the next sections for detailed instructions on how to do so.


    Language Code

    Using the correct language code is an important factor to successfully translating the theme. If you are using Avada 3.8 or higher, we have added a System Status tab where you can easily see which language code you’re using. Please continue reading below for more information on how this is done.

    How To Identify The Language Code You’re Using

    Step 1 – Go to the Avada > System Status tab.

    Step 2 – Under the WordPress Environment section, you will find a field called Language. the code located in this field is your language code. For example, en_US.

    IMPORTANT NOTE – This feature is only for Avada 3.8 or higher.


    The Translation Process

    If your language is not already included, the only thing you have to do is to create a new .po file from the original Avada.pot located in the languages folder, translate all text strings, then save the .po file with your language code and make sure the corresponding .mo is created, which can be read by WordPress. The next subsection will explain this in detail. If you only want to change translated strings in an included .po file, the same steps apply.

    Either you are setting up a completely new language file or you just want to edit translated pre-built language files, the steps to take are easy and more or less the same.

    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.

    How To Edit The .po file With 3rd Party Software

    There are different editors out there for the purpose of editing .po and .pot files, but POEdit is easy to use, it is available for all platforms and it is freeware. To download POEdit, follow this link.

    How To Start A New Language From Scratch

    Step 1 – Open the Avada.pot in POEdit by selecting ‘New from POT/PO file…’. Once it has loaded, you will find all English text strings in the left column called Source Text. Once you add translations, they will show up in the right column under Translation.

    Step 2 – Choose the line you want to translate. In the lower right section of the POEdit window, you will find a text area where you can add the correct translation.

    Step 3 – When you are done translating all the needed text strings into your desired language, save the file with the theme name and your language code. For example, if you were translating to the Deutsch language, you would save it as Avada-de_DE.po. The corresponding .mo file will be auto created.


    How To Edit A Pre-Built Language File

    Step 1 – Open the .po file of your preferred language in POEdit and search for the line you want to change. To do this, select the Edit button, then select the Find option.

    Step 2 – In the Search Window, type the text string you are looking for. Once it is selected, replace the text in the Translation text area in the lower part of the window with your prefered translation.

    Step 3 – If you’d like to edit another text string, just repeat Steps 1 to 2.

    Step 4 – Once you’re happy with your translations, Save the file. The updated .mo file will be auto created.


    IMPORTANT NOTE – Everytime you update the .po file, make sure to upload both .po and the compiled .mo file to the correct folder, which is wp-content/languages/themes. Also make sure that they have the correct file names. The correct file name is the theme name and your language code. For example, Avada-de_DE.po.

    Updating The Translations Catalogue

    Updating the Translations Catalogue usually isn’t required. However, if you want to retain your customized Language file, and new strings have been added to a new version of the theme, then you can choose to update from the .pot file to include the new strings to your current Language file. Another reason why updating the Translation Catalogue might be a good idea is if text strings have been added or edited through a Knowledgebase fix. You may need to update the catalogue of your existing .po file to reflect these changes.

    How To Update From The .po File After A Theme Update in POEdit

    Step 1 – Open the .po file of the desired language in POEdit.

    Step 2 – Choose ‘Catalogue’ from the options in the toolbar, then select ‘Update from POT file’ option.

    Step 3 – In the opening file dialog, choose the Avada.pot file in Avada/languages/ folder. The catalogue will then be auto updated with all the new text strings, and your custom ones will be preserved.

    Step 4 – Don’t forget to Save the file once you are done updating and adding translations.


    How To Update The Catalogue After Downloading Patches in POEdit

    Step 1 – After applying patches, open your existing language file in POEdit and click ‘Catalogue’ in the toolbar, then select the Properties option.

    Step 2 – In the opening file dialog, click the Sources Paths tab. Click the New Item icon. After that, Set the path to “../” (two periods and a backslash) as illustrated in the screenshot below.

    Step 3 – In the Sources Keywords tab, click the New Item icon. First add “__” (two underscores) and then “_e” (an underscore and the letter e) as illustrated in the screenshot below.

    Step 4 – Click OK to close the window. Once you’re in the main screen, click Update icon. Now POEdit will search for all new strings in Avada. Once they are imported, you can translate them to your desired language.



    Translating Fusion Builder

    11/04/2016

    Within this section, you’ll find everything you need to localize and internationalize the Fusion Builder Plugin that is bundled along with the theme into your language. It is split into several subsections to help you easily find what you need. The process of translating the Fusion Builder plugin is very similar to translating the Avada theme, except for some naming conventions. Let’s take a look at translating the Fusion Builder plugin!

    IMPORTANT NOTE – To fully translate the theme, please take note that you must also translate Avada. View our article about Translating The Theme here.
    In the Fusion Builder plugin files, the following features can be translated:
    • Frontend – The Frontend for the shortcodes, including the Blog shortcode.
    • Shortcode Generator – The Shortcode Generator along with it’s items.
    • Fusion Page Builder – The Fusion Page Builder along with it’s builder elements.
    IMPORTANT NOTE – The stand alone version of Fusion Builder Plugin was added in Avada version 5.0.

    Plugin Translation Basics

    To further understand how translating the plugin works, we’ve included this section to explain where you can find the files needed for translation and what these files are for. Fusion Builder comes with a steadily growing number of available languages, which can be downloaded from our public GitHub Repo. These are pre-defined translations, powered by our user base. You can see usage details here: Included Language Files

    If your language is not already part of our repository, you can easily create your own translation files. Inside the Fusion Builder main plugin folder, you will find a folder called languages, and inside of it this file:

    • fusion-builder.pot – This file is basically a list of all the text strings used in the Plugin files. These text strings are in the English language, and can contain a translation for each text string.

    This file can be used as a starting point to create your own translations, using e.g. a third party tool like POEdit.

    In order for WordPress to recognize the resulting language files, you must name them accordingly using the ISO Language Codes. For example, if you wanted to translate Fusion Builder to the Deutsch language, the filenames would be Avada-de_DE.po and Avada-de_DE.mo.

    Please see the next sections for detailed instructions on how to do so.


    Language Code

    Using the correct language code is an important factor to successfully translating the plugins. If you are using Avada 3.8 or higher, we have added a System Status tab where you can easily see which language code you’re using. Please continue reading below for more information on how this is done.

    How To Identify The Language Code You’re Using

    Step 1 – Go to the Avada > System Status tab.

    Step 2 – Under the WordPress Environment section, you will find a field called Language. the code located in this field is your language code. For example, en_US.

    IMPORTANT NOTE – This feature is only for Avada 3.8 or higher.


    The Translation Process

    If your language is not already included, the only thing you have to do is to create a new .po file from the original fusion-builder.pot located in the languages folder, translate all text strings, then save the .po file with your language code and make sure the corresponding .mo is created, which can be read by WordPress. The next subsection will explain this in detail. If you only want to change translated strings in an included .po file, the same steps apply.

    Either you are setting up a completely new language file or you just want to edit translated pre-built language files, the steps to take are easy and more or less the same.

    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 plugin, you can choose what you translate inside the Avada.po file. This is the preferred method for translation.

    How To Edit The .po file With 3rd Party Software

    There are different editors out there for the purpose of editing .po files, but POEdit is easy to use, it is available for all platforms and it is freeware. To download POEdit, follow this link.

    How To Start A New Language From Scratch

    Step 1 – Open the fusion-builder.pot in POEdit by selecting ‘New from POT/PO file…’. Once it has loaded, you will find all English text strings in the left column called Source Text. Once you add translations, they will show up in the right column under Translation.

    Step 2 – Choose the line you want to translate. In the lower right section of the POEdit window, you will find a text area where you can add the correct translation.

    Step 3 – When you are done translating all the needed text strings into your desired language, save the file with the theme name and your language code. For example, if you were translating to the Deutsch language, you would save it as fusion-builder-de_DE.po. The corresponding .mo file will be auto created.


    How To Edit A Pre-Built Language File

    Step 1 – Open the .po file of your preferred language in POEdit and search for the line you want to change. To do this in Windows, select the Edit button, then select the Find option. To do this in OSX, select the Edit button, then select the Search option.

    Step 2 – In the Search Window, type the text string you are looking for. Once it is selected, replace the text in the Translation text area in the lower part of the window with your prefered translation.

    Step 3 – If you’d like to edit another text string, just repeat Steps 1 to 2.

    Step 4 – Once you’re happy with your translations, Save the file. The updated .mo file will be auto created.


    IMPORTANT NOTE – Everytime you update the .po file, make sure to upload both .po and the compiled .mo file in wp-content/languages/plugins folder and that they have the correct file name. The correct file name is the plugin name and your language code. For example, fusion-builder-de_DE.po.

    Updating The Translations Catalogue

    Updating the Translations Catalogue usually isn’t required. However, if you want to retain your customized Language file, and new strings have been added to a new version of the plugin, then you can choose to update from the .pot file to include the new strings to your current Language file. Another reason why updating the Translation Catalogue might be a good idea is if text strings have been added or edited through a Knowledgebase fix. You may need to update the catalogue of your existing .po file to reflect these changes.

    How To Update From The .po File After A Plugin/Theme Update in POEdit

    Step 1 – Open the .po file of the desired language in POEdit.

    Step 2 – Choose ‘Catalogue’ from the options in the toolbar, then select ‘Update from POT file’ option.

    Step 3 – In the opening file dialog, choose the fusion-builder.pot file in fusion-builder/languages/ folder. The catalogue will then be auto updated with all the new text strings, and your custom ones will be preserved.

    Step 4 – Don’t forget to Save the file once you are done updating and adding translations.


    How To Update The Catalogue After Downloading Patches in POEdit

    Step 1 – After applying patches, open your existing language file in POEdit and click ‘Catalogue’ in the toolbar, then select the Properties option.

    Step 2 – In the opening file dialog, click the Sources Paths tab. Click the New Item icon. After that, Set the path to “../” (two periods and a backslash) as illustrated in the screenshot below.

    Step 3 – In the Sources Keywords tab, click the New Item icon. First add “__” (two underscores) and then “_e” (an underscore and the letter e) as illustrated in the screenshot below.

    Step 4 – Click OK to close the window. Once you’re in the main screen, click Update icon. Now POEdit will search for all new strings in Avada. Once they are imported, you can translate them to your desired language.



    Translating Fusion Core

    11/04/2016

    Within this section, you’ll find everything you need to localize and internationalize the Fusion Core Plugin that is bundled along with the theme into your language. It is split into several subsections to help you easily find what you need. The process of translating the Fusion Core plugin is very similar to translating the Avada theme, except for some naming conventions. Let’s take a look at translating the Fusion Core plugin!

    IMPORTANT NOTE – To fully translate the theme, please take note that you must also translate Avada. View our article about Translating The Theme here.
    In the Fusion Core plugin files, the following features can be translated:
    • Backend – The Backend labels for Portfolio, FAQ’s, Elastic Slider, Fusin Slider and Custom Post Types.
    IMPORTANT NOTE – The ability and features to translate the Fusion Core plugin was added in version 3.6 of Avada.

    Plugin Translation Basics

    To further understand how translating the plugin works, we’ve included this section to explain where you can find the files needed for translation and what these files are for. Fusion Core comes with a steadily growing number of available languages, which can be downloaded from our public GitHub Repo. These are pre-defined translations, powered by our user base. You can see usage details here: Included Language Files

    If your language is not already part of our repository, you can easily create your own translation files. Inside the Fusion Core main plugin folder, you will find a folder called languages, and inside of it this file:

    • fusion-core.pot – A list of all the text strings used in the Theme files. These text strings are in the English language, and can contain a translation for each text string.

    This file can be used as a starting point to create your own translations, using e.g. a third party tool like POEdit.

    In order for WordPress to recognize the resulting language files, you must name them accordingly using the ISO Language Codes. For example, if you wanted to translate Fusion Core to the Deutsch language, the filenames would be Avada-de_DE.po and Avada-de_DE.mo.

    Please see the next sections for detailed instructions on how to do so.


    Language Code

    Using the correct language code is an important factor to successfully translating the plugin. If you are using Avada 3.8 or higher, we have added a System Status tab where you can easily see which language code you’re using. Please continue reading below for more information on how this is done.

    How To Identify The Language Code You’re Using

    Step 1 – Go to the Avada > System Status tab.

    Step 2 – Under the WordPress Environment section, you will find a field called Language. the code located in this field is your language code. For example, en_US.

    IMPORTANT NOTE – This feature is only for Avada 3.8 or higher.


    The Translation Process

    If your language is not already included, the only thing you have to do is to create a new .po file from the original fusion-core.pot located in the languages folder, translate all text strings, then save the .po file with your language code and make sure the corresponding .mo is created, which can be read by WordPress. The next subsection will explain this in detail. If you only want to change translated strings in an included .po file, the same steps apply.

    Either you are setting up a completely new language file or you just want to edit translated pre-built language files, the steps to take are easy and more or less the same.

    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 plugin, you can choose what you translate inside the Avada.po file. This is the preferred method for translation.

    How To Edit The .po file With 3rd Party Software

    There are different editors out there for the purpose of editing .po files, but POEdit is easy to use, it is available for all platforms and it is freeware. To download POEdit, follow this link.

    How To Start A New Language From Scratch

    Step 1 – Open the fusion-core.pot in POEdit by selecting ‘New from POT/PO file…’. Once it has loaded, you will find all English text strings in the left column called Source Text. Once you add translations, they will show up in the right column under Translation.

    Step 2 – Choose the line you want to translate. In the lower right section of the POEdit window, you will find a text area where you can add the correct translation.

    Step 3 – When you are done translating all the needed text strings into your desired language, save the file with the theme name and your language code. For example, if you were translating to the Deutsch language, you would save it as fusion-core-de_DE.po. The corresponding .mo file will be auto created.


    How To Edit A Pre-Built Language File

    Step 1 – Open the .po file of your preferred language in POEdit and search for the line you want to change. To do this in Windows, select the Edit button, then select the Find option. To do this in OSX, select the Edit button, then select the Search option.

    Step 2 – In the Search Window, type the text string you are looking for. Once it is selected, replace the text in the Translation text area in the lower part of the window with your prefered translation.

    Step 3 – If you’d like to edit another text string, just repeat Steps 1 to 2.

    Step 4 – Once you’re happy with your translations, Save the file. The updated .mo file will be auto created.


    IMPORTANT NOTE – Everytime you update the .po file, make sure to upload both .po and the compiled .mo file in wp-content/languages/plugins folder and that they have the correct file name. The correct file name is the theme name and your language code. For example, fusion-core-de_DE.po.

    Updating The Translations Catalogue

    Updating the Translations Catalogue usually isn’t required. However, if you want to retain your customized Language file, and new strings have been added to a new version of the plugin, then you can choose to update from the .pot file to include the new strings to your current Language file. Another reason why updating the Translation Catalogue might be a good idea is if text strings have been added or edited through a Knowledgebase fix. You may need to update the catalogue of your existing .po file to reflect these changes.

    How To Update From The .po File After A Plugin/Theme Update in POEdit

    Step 1 – Open the .po file of the desired language in POEdit.

    Step 2 – Choose ‘Catalogue’ from the options in the toolbar, then select ‘Update from POT file’ option.

    Step 3 – In the opening file dialog, choose the fusion-core.pot file in fusion-builder/languages/ folder. The catalogue will then be auto updated with all the new text strings, and your custom ones will be preserved.

    Step 4 – Don’t forget to Save the file once you are done updating and adding translations.


    How To Update The Catalogue After Downloading Patches in POEdit

    Step 1 – After applying patches, open your existing language file in POEdit and click ‘Catalogue’ in the toolbar, then select the Properties option.

    Step 2 – In the opening file dialog, click the Sources Paths tab. Click the New Item icon. After that, Set the path to “../” (two periods and a backslash) as illustrated in the screenshot below.

    Step 3 – In the Sources Keywords tab, click the New Item icon. First add “__” (two underscores) and then “_e” (an underscore and the letter e) as illustrated in the screenshot below.

    Step 4 – Click OK to close the window. Once you’re in the main screen, click Update icon. Now POEdit will search for all new strings in Avada. Once they are imported, you can translate them to your desired language.



    Help Translating Avada

    06/19/2016

    We at ThemeFusion value all our users’ input and contributions, and are always listening to them. Thanks to the amount of contributions sent in by our amazing users, Avada ships to 23 different languages and counting. If you would like to help translate Avada, please follow our translation documentation instructions and then submit the files to us through our ticket system. Create a new ticket and include your translated files as an attachment. Our team will receive it and include it in the next theme update that is issued.

    Using WPML With Avada

    06/15/2016

    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.

    Click Here To Buy WPML Plugin

    Using Polylang With Avada

    06/15/2016

    Polylang is a free plugin that allows you to create a bilingual or multilingual WordPress site. Below you will find documentation that the Polylang team created for using the Polylang plugin. If you’ve purchased Polylang and have any questions or issues, please check the links below.

    Click Here To Buy WPML Plugin

    Using RTL Languages

    06/15/2016

    We aim to make Avada convenient and available to as much users as we can, which is why Avada is RTL (Right to Left) ready. Avada contains all the necessary styles you’ll need to make your website RTL, and it’s as easy as 3 steps to set up! Once you finish these steps, your site will automatically be in RTL format. In addition, for testing you can also use a language plugin like RTL Tester. To download RTL Tester, follow this link.

    IMPORTANT NOTE – These steps are only required if you are not using WPML. If you have WPML installed, then you can skip these steps.

    How To Use RTL

    Step 1 – Install an RTL version of WordPress, such as the Arabic or Hebrew version.

    Step 2 – Have the proper Language files installed in the languages directory, which you can locate by following this path: wp-content > themes > avada > languages.

    Step 3 – Specify the language you’d like to use in the wp-config.php file.

    Adding Language Switchers

    06/15/2016

    If your running a multi-lingual website, being able to switch languages is a key factor. Having a language switcher will make it easier on your users to switch between languages whenever they like. Multi-lingual plugins such as WPML and Polylang offer ways to add language switchers to the theme. We’ll outline how to do this for each plugin below.

    How To Add A Language Switcher Using WPML

    Step 1 – Navigate to the WPML > Languages tab.

    Step 2 – Under the Language Switcher options, you can choose to set a number of options such as where the Language Switcher widget will be placed, the order of languages, whether to display flags, and much more.


    How To Add A Language Switcher Using Polylang

    Step 1 – Navigate to the Appearance > Menus tab.

    Step 2 – A Language Switcher option will be available. Check the Language Switcher checkbox, and click the Add to Menu button.

    Step 3 – Customize the Language Switcher by expanding the Language Switcher under the Menu Structure section.


    Widgets

    06/15/2016
    IMPORTANT NOTE – Since Avada version 3.8.7, The Appearance > Sidebars tab on the WordPress admin panel has been changed to the Widget Sections that is now located in the Appearance > Widgets tab on the WordPress admin panel.

    A WordPress Widget is a small block that performs a unique function. Widgets can then be added to widget-ready areas of the theme called widget sections. Avada has some pre-made widget sections and also allows you to create an unlimited amount of custom widget sections. Widgets are a great way to further customize your site. Please see below for different articles that detail widgets and widget sections in Avada.

    Widget vs Widget Section

    06/15/2016

    It’s important to understand the difference between a widget and a widget section. Please see the below information to help understand the difference between the two.

    Widget – A WordPress Widget is a small block that performs a unique function. Avada includes several custom widgets such as the Avada Twitter widget, Avada Social Links, or the Avada Recent Work widget. In addition, there are several default widgets that WordPress includes such as Recent Posts or Recent Comments. Widgets will always go inside a widget section.

    Widget Sections – A Widget Section is a container that holds widgets. Widgets must go inside a widget section to be able to display on the site. Avada includes 2 pre-made widget sections (footer columns, sliding bar columns) and also allows you to create custom Widget Sections which can be applied to the 5 widget-ready areas of the theme. It’s a great way to customize your site.

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

    Pre-made vs Custom Widget Sections

    06/15/2016

    Avada includes 5 areas of the theme that are widget ready, which means they can display widget sections. Two of these areas are the footer and sliding bar. These areas already have pre-made widget sections for you to add widgets in. The other 3 sections are sidebars, the mega menu, and the fusion builder widget element. These areas do not have pre-made widget sections and can take any pre-made or custom widget section you create.

    Pre-Made vs Custom Widget Section

    Pre-Made Widget Section – Pre-made widget section are readily created widget sections for certain areas of the theme. Therefore, you don’t need to create a widget section for them, you can simply add widgets to the pre-made widget sections directly. The footer columns and sliding bar columns both have pre-made widget sections based on the number of columns you choose to display. You can set how many columns to display for the footer in the Avada > Theme Options > Footer panel, and in the Avada > Theme Options > Sliding Bar panel for sliding bar.

    Custom Widget Section – Custom widget sections are widget sections you can create yourself in the Appearance > Widgets tab on your WordPress admin panel. These custom widget sections can be assigned to sidebars, mega menu columns and the fusion builder widget element. In addition, sidebars, mega menu columns and the fusion builder widget element areas can also take pre-made widget sections if you wish.

    The 5 Widget Ready Areas in Avada

    • Footer Columns – Footer columns have pre-made widget sections based on the number of footer columns you choose in the Avada > Theme Options > Footer panel. See our Adding Footer Widgets article for more information.
    • Sliding Bar Columns – Sliding bar columns have pre-made widget sections based on the number of sliding bar columns you choose in the Avada > Theme Options > Sliding Bar panel. See our Setting Up The Sliding Bar article for more information.
    • Sidebars – You can assign widget sections to both single and dual sidebars. See our Assigning Sidebars article for more information.
    • Mega Menu Columns – You can assign widget sections to mega menu columns. See our Using The Mega Menu article for more information.
    • Fusion Builder Widget Area Element – You can assign any widget section to any page or post using the Fusion Builder Widget Area element. Simply add the element to your page, then select the widget section you wish to display from the dropdown menu. See our Widget Area Shortcode article for more information.

    Creating Widget Sections

    06/15/2016
    IMPORTANT NOTE – For Avada version 3.9.3 or lower, the widget sections are located at the Appearance > Widget Section tab on your WordPress admin panel.

    Avada allows you to create unlimited amount of widget sections, and these widget sections can be assigned to several areas of the site such as the sidebars, footer columns, sliding bar columns, mega menu columns and the Fusion Builder Widget Area element. To learn more about widget ready areas, please see this article. Please see the steps below to understand how to create a widget section.

    How To Create A Widget Section

    Step 1 – Navigate to Appearance > Widgets and click the ‘Add New Widget Section’ button. Give it a name then save it. You can add as many widget sections as you need.

    Step 2 – Once created, you’ll see your new widget section on the right side.

    Step 3 – On the left side, you will see all the widgets you can use.

    Step 4 – Simply drag and drop the widget you want into your widget section. You can then customize the widget to your liking.

    Step 5 – You can rearrange the order of widgets on a widget section by simply dragging the widgets to place.

    Step 5 – Make sure you click the ‘Save’ button to save the widgets added to your widget section.


    Adding Widgets To Widget Sections

    06/15/2016

    Avada includes a wide array of custom widgets in addition to the default widgets WordPress offers. All widgets are found in the Appearance > Widgets tab on your WordPress admin panel. There are various customization options and fields for each individual widget, and they are all self explanatory. You can put as many widgets as you want inside of a widget section. Please read below for information on how to add widgets to widget sections.

    How To Add Widgets To Widget Sections

    Before you can add widgets to widget sections, you must first create your widget sections. To learn how to create widget sections, please see our Creating Widget Sections article here. Once that’s done, you can then assign widgets. Each widget has their own options which you can customize once you assign them to a widget section.

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

    Step 2 – Simply drag and drop the widget you’d like to add into your chosen widget section on the right side.

    Step 3 – To rearrange widgets on a widget section, just drag and drop the widgets into the order you’d like.

    Step 3 – When finished, make sure to click the ‘Save’ button in the widget editing box to save your changes.


    IMPORTANT NOTE – Once you’ve created widget sections and added widgets to them, you can then assign them to different areas of your site. Please see our Assigning Widget Sections article.

    Widgets Area Overview

    Assigning Widget Sections

    06/15/2016

    Avada has 5 widget ready areas. These widget ready areas are the footer columns, sliding bar columns, sidebars, mega menu columns, and the fusion builder widget area element. These areas are where you can assign a widget section. These areas can take both pre-made widget sections and custom widget sections. Please continue reading below for detailed instructions on how to assign widget sections to each widget ready area.

    Footer Columns

    You can enable footer columns and select how many to display by going to the Avada > Theme Options > Footer panel. You can display up to 6 columns on your footer. Please click the button below to read more about assigning widgets to the footer.

    Click Here To Read Our ‘Assigning Footer Widgets’ Article

    Sidebars

    Sidebars are containers that accept widget sections. You can enable sidebars on different sections of your site in the Avada > Theme Options > Sidebars panel, or on the Fusion Page Options on each page or post.

    Click Here To Read Our ‘Assigning Widget Sections To Sidebars’ Article

    Sliding Bar Columns

    You can enable sliding bar columns and select how many to display by going to the Avada > Theme Options > Sliding Bar panel. You can display up to 6 columns. Please click the button below to read more about assigning widgets to the sliding bar.

    Click Here To Read Our ‘Sliding Bar Setup’ Article

    Mega Menu Columns

    You can enable the mega menu in the Appearance > Menus tab on your WP admin panel. You can have up to 6 columns on your mega menus. Please click the button below to read more about how to assign widgets sections to your mega menu.

    Click Here To Read Our ‘Using The Mega Menu’ Article

    Fusion Builder Widget Area Element

    You can use the Fusion Builder Widget Area Element to add widget sections to any page or post you create. You can use the widget area element with any of the column elements to format the page. Please click the button below to learn more about the widget area element.

    Click Here To Read Our ‘Widget Area Shortcode’ Article

    Assigning Widget Sections To Sidebars

    06/15/2016

    Avada offers both single and dual sidebars. Sidebars can be assigned globally (same sidebars sitewide) or individually (different sidebars per page or post). Avada includes a powerful set of options to achieve this throughout the theme. Please read below to understand where sidebars can be applied and how to do this globally or individually.

    IMPORTANT NOTE – Sidebars are containers that accept widget sections. You must first create a widget section and assign widgets to it before you can assign it to a sidebar. To learn how to create widget sections and assign widgets, please read refer to our Widgets section linked here.

    Global Sidebars vs Individual Page Sidebars

    Global Sidebars – Global sidebars will override the individual sidebar options set in the Fusion Page Options box. You can enable global sidebars for each different sections of your site such as pages, portfolio posts, blog posts and the search results page. Use this when you want every page to show the exact same sidebar. Global sidebar options can be found in the Avada > Theme Options > Sidebars panel.

    Individual Sidebars – If global sidebars are disabled, then you can use individual sidebars when you want a unique sidebar or no sidebars on a page or post. Individual sidebars can be assigned in the Fusion Page Options box of each page or post.

    Global Sidebar Areas

    There are 9 sections of your site where you can enable global sidebars. Some of these areas require the respective plugins to be installed and activated. Continue reading below to learn about each section.

    IMPORTANT NOTE – The WooCommerce Product and Archive / Category Pages options will appear only if the WooCommerce plugin is installed and activated. The same goes for the Events Calendar Posts and the bbPress Pages options. The Events Calendar plugin and the bbPress plugin must be installed and activated for those options to appear.
    • Page Templates – All page template except for the ‘100% Width’ page template.
    • Portfolio Posts – Single post pages that are created for all portfolio post.
    • Portfolio Archive / Category Pages – All arch/cat pages created for portfolio posts.
    • Blog Posts – Single post pages that are created for all blog post.
    • Blog Archive / Category Pages – All arch/cat pages created for blog posts.
    • WooCommerce Products – Single post pages that are created for all Woo products.
    • WooCommerce Archive / Category Pages – All arch/cat pages created for products.
    • Events Calendar Posts – All single posts pages created for Events Calendar posts.
    • bbPress Pages – Any forum/topic post that is created using the bbPress plugin.
    • Search Page – The search results page that displays when a search is performed.

    How To Apply Global Sidebars

    Before applying a global sidebar for a section of your site, you must first create a widget section, assign widgets to it, then you can assign it to the sidebar you’d like to use as a global sidebar. To learn how to create widget sections, please refer to our Creating Widget Sections article.

    Step 1 – Navigate to the Avada > Theme Options > Sidebar panel. Select the sub-panel of the section of the theme that you wish to apply a global sidebar. For example, if you want to assign a global sidebar to all page templates, then go to the Theme Options > Sidebars > Pages sub-panel.

    Step 2 – Enable global sidebars by setting the ‘Activate Global Sidebar’ option to On.

    IMPORTANT NOTE – Category and Archive pages do not have this option because they do not have individual page options like other pages.

    Step 3 – Select the name of the widget section you’d like to display for Sidebar 1 and Sidebar 2. If you only want one sidebar, then set the ‘Sidebar 2’ option to No Sidebar.

    Step 4 – You can also select a position for Sidebar 1. If you’re also using Sidebar 2, it will automatically be placed on the opposite side of Sidebar 1.

    Step 5 – Once finished, press the ‘Save Changes’ button.


    How To Apply Individual Sidebars Using Fusion Page Options

    If you don’t want to use global sidebars and would rather assign a specific sidebar for specific pages, then you can do so using our Fusion Page Options which is located in every page or post you create.

    IMPORTANT NOTE – You must have Global Sidebars deactivated for your individual sidebars to appear. For example, if you’d like to assign individual sidebars for specific pages, then the ‘Activate Global Sidebars’ option under the Theme Options > Sidebars > Pages panel must be set to Off.

    Step 1 – Create a new page or post or edit an existing one.

    Step 2 – Scroll below the main content field and find the Fusion Page Options box. On this section, you’ll find the Sidebars tab.

    Step 3 – Select the name of the widget section you’d like to display for Sidebar 1 and Sidebar 2. If you only want one sidebar, then set the ‘Sidebar 2’ option to No Sidebar.

    Step 4 – Select a position for Sidebar 1. If you’re also using Sidebar 2, it will automatically be placed on the opposite side of Sidebar 1.

    Step 5 – You can also choose a background color for the sidebar. Simply enter the hexcode of the color you’d like to display in the ‘Sidebar Background Color’ option. For example, #000000.

    Step 5 – Once finished, click the ‘Save Draft’ or ‘Publish’ button to save your changes.


    Single, Dual or No Sidebars

    Avada allows for single, dual or no sidebars. There are two sidebar dropdown fields that allow you to make these selections; Sidebar 1 and Sidebar 2. You can also set the position for Sidebar 1, and Sidebar 2 will automatically be set to the opposite side. Continue reading below for more information.

    • Single Sidebar – To achieve a single sidebar, assign a widget section to the ‘Sidebar 1’ option, then set the ‘Sidebar 2’ option to No Sidebar.
    • Dual Sidebars – To achieve dual sidebars, assign a widget section to both ‘Sidebar 1’ and ‘Sidebar 2’ options.
    • No Sidebars – To disable sidebars, select No Sidebar for both ‘Sidebar 1’ and ‘Sidebar 2’ options. The page will be full width.

    IMPORTANT NOTE – The ‘Side Navigation’ page template can have dual sidebars. Sidebar 1 will be placed underneath the side navigation set, Sidebar 2 will be placed on the opposite side.

    Sidebar Position

    Avada offers a sidebar position option for Sidebar 1, this can be chosen globally in Fusion Theme Options or individually per page or post. The Fusion Page Option overrides the Fusion Theme Option. However, the Fusion Theme Option will control the Fusion Page Option as long as the Fusion Page Option is set to Default. Default setting means it is pulling from Fusion Theme Options.

    IMPORTANT NOTE – The sidebar position option only works with Sidebar 1. If using dual sidebars, Sidebar 2 will be placed on the opposite side of Sidebar 1. For the Side Navigation page template, the sidebar position option will affect the side navigation side, and Sidebar 2 will be placed on the opposite side.

    Twitter Widget

    08/01/2016
    IMPORTANT NOTE – The Twitter Widget’s ‘Twitter Preconfigured Style’ option is deprecated due to Twitter’s recent update. This style will be removed in the next few version updates.

    The Twitter widget is available to use on any Sidebar, Widget Section or Widget shortcode. The Twitter widget comes in 3 styles, the Twitter Preconfigured Style (Deprecated), Twitter Style and the Avada Style. Each style has it’s own setup instructions and options. Continue reading below to learn more about the new Twitter widget and the available styles.

    Twitter Widget Styles

    Twitter Preconfigured Style – This style is deprecated and will be removed in the next few version updates. This style will only work if you’ve already created a twitter widget using Twitter’s old Widgets Configurator.

    Twitter Style – This style will only import your tweets. You have to set the different options found under this style to customize your Twitter widget.

    Avada Style – This is the classic Avada style. It requires you to create a new app via http://apps.twitter.com/. You will then be requested to enter a few Keys and Access Tokens.


    Twitter Widget Styles

    How To Use ‘Twitter Preconfigured Style’ Style

    IMPORTANT NOTE – The ‘Twitter Preconfigured Style’ option is deprecated and will be removed in the next few version updates.

    This style was specifically for Twitter’s old Widgets Configurator page. It’s now been replaced with the Twitter Publish page. You can continue using this style, however, if you’ve already created a widget using Twitter’s old Widgets Configurator page.

    Step 1 – Log into your Twitter account. Click your avatar, then select the ‘Settings’ tab.

    Step 2 – Switch to the ‘Widgets’ tab located on the left side. Here you’ll find a list of the old widgets you’ve created with Twitter’s Widget Configurator page. Select the one you’d like to use and click the ‘Edit’ button.

    Step 3 – Adjust the Configuration options to your liking. Once finished, click ‘Save Changes’. You can also find your Twitter Widget ID in the URL of this page.

    Step 4 – Go to the Appearance > Widgets tab on your WP Admin Sidebar, and add a new Twitter Widget to your selected Widget Section.

    Step 5 – Select Twitter Preconfigured Style in the ‘Widget Style’ option, then enter the Twitter Widget ID in the field provided.

    Step 7 – Once finished, click ‘Save’.


    How To Use ‘Twitter Style’ Style

    IMPORTANT NOTE – Please update to Avada version 4.0.3 and apply Patch #408051 to update the Twitter Widget. Learn about the Avada Patcher here.

    Step 1 – First go to https://twitter.com/settings/widgets/new/user and sign in with your Twitter account.

    Step 1 – Navigate to the Appearance > Widgets tab on your WP Admin Sidebar.

    Step 2 – Add a new Twitter Widget into your chosen Widget Section.

    Step 3 – In the ‘Widget Style’ option, select Twitter Style.

    Step 4 – Enter your Twitter Username into the provided field, then customize the widget’s styling as you’d like.

    Step 5 – Once finished, click ‘Save’.


    How To Use The ‘Avada Style’ Style

    IMPORTANT NOTE – Please update to Avada version 4.0.3 and apply Patch #408451 to update the Twitter Widget. Learn about the Avada Patcher here.

    Step 1 – Navigate to https://apps.twitter.com/ and sign in with your Twitter account.

    Step 2 – Once you’ve logged in, click the ‘Create New App’ button.

    Step 3 – Fill out the required fields. You can leave the ‘Callback URL’ field empty.

    Step 4 – Don’t forget to check the ‘Yes, I agree’ checkbox in the Developer Agreement window. Then click the ‘Create Your Twitter Application’ button.

    Step 5 – In the top section, click the ‘Key and Access Tokens’ tab. Then you will see the Consumer Key and Consumer Secret. To receive your Access Token and Access Token Secret, click on the ‘Create My Access Token’ button.

    Step 6 – Copy and paste each of those items along with your Twitter username into the corresponding fields in the Twitter widget in the Appearance > Widgets tab.

    Step 7 – Once finished, click ‘Save’. Please wait 10 minutes for the changes to take effect. This is due to Twitter’s cache.


    Facebook Widget

    06/15/2016

    Facebook has a new setup that requires each user to create an APP ID to display correctly on your website. Please continue reading below for more information on how to set this up.

    How To Create A Facebook APP ID

    Step 1 – Go to this link, and log in with your Facebook credentials.

    Step 2 – Click the Register button, and accept Facebook’s Terms and Conditions.

    Step 3 – You will then be asked to Add a New App. Select Website from the list.

    Step 4 – In the upper right corner, click the Skip and Create App ID button.

    Step 5 – Fill in the required fields and choose a category. Once you’re done, click the Create App ID button.

    Step 6 – Once you click the Create App ID button, you will be asked to enter a captcha. After answering the captcha, click the Submit button.

    Step 7 – You will be redirected to the app’s dashboard. Here you will find your App ID, and your App Secret Key.


    Flickr Widget

    06/15/2016

    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 widget is unique in that they require account setup to display correctly. Please read below for information no how to set each of the Flickr widget.

    How To Setup The Flickr Widget

    Step 1 – Go to the 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

    Extras

    06/15/2016

    Avada is full of all kinds of features and settings. This section is going to cover the various items such as general cache information and site optimization, image sizing guides, system status values, child theme, hooks and filters, retina ready feature, and finally, plugins like WooCommerce, WP Retina 2x, Events and W3TC.

    CSS Compiler

    06/15/2016

    In Avada version 3.8, the CSS Compiler is introduced. The CSS Compiler is a great way to optimize the dynamic CSS in your site by compiling styles into one file providing a performance boost. Please continue reading below to learn more about the CSS Compiler.

    What Is The CSS Compiler?

    The CSS Complier is a great tool that complies the dynamic CSS within the head tag into a single file which the browser loads. If the compiler is off, then all dynamic styles are placed into the head tag. Most of the information complied are your Theme Option settings. Each page or post will have it’s own separate file that will be stored inside the wp-content > uploads > avada-styles folder.

    Why Should I Use The CSS Compiler?

    The CSS Compiler cleans up your head tag on each page or post. Additionally, when used with the Dynamic CSS Caching feature can greatly improve the loading time of your site but could slightly increase the size of your database. This is when the Dynamic CSS Caching feature comes into play. Read more about Dynamic CSS Caching.

    How To Enable or Disable The CSS Compiler

    IMPORTANT NOTE
    In Avada 4+ the CSS Compiler option is enabled by default.

    Step 1 – Navigate to the Theme Options > Advanced > Dynamic CSS panel.

    Step 2 – Find the Dynamic CSS option and turn it on to enable or off to disable. Please note, the Dynamic CSS Caching option is also in this location.


    What Does The Head Tag Look Like With And Without The Compiler

    Page Source Without CSS Compiler


    Page Source With CSS Compiler


    Important Note About Server Cache

    For unique cases where you are using cloud flare and a cache server, like varnish cache. Enter your cache server IP to clear the theme options dynamic CSS cache. If you do not do this you may not see your changes instantly on refresh. Consult with your server admin to find out your server IP address.


    Site Optimization

    10/03/2016

    If your site is not running as fast as you’d like, there could be a few different issues. Our main live demo is a representation of how fast your site should be because it’s our largest and most resource intensive demo. To test this, go to GTMetrix.com and insert our home page url of https://avada.theme-fusion.com into the main field to test the live score of Avada. Your own results will vary depending on the items below. This post will outline the common issues that can sow down your site.

    1. Plugins – When you have multiple plugins installed and activated on your site, it can slow it down. The more plugins you use, the slower it will be. If you are experiencing a slow site, please disable all the plugins except for the ones that we include with our theme. Disable the extra plugins, then clear your browser cache and see if it speeds it up. Most likely it will, then you can reenable the plugins one by one and check the site speed each time to try and find out if its one specific plugin. Unfortunately there are plugins out there that can slow down your site, if you happen to find one please contact the plugin developer and report it to them.

    2. Images / Content – It is very critical that your images be optimized for the web. Having a large image or several of them can drastically slow down your site speed. Do not upload larger images than what is needed. For example, if you have an image that needs to be a featured blog image that will have a sidebar, then the image area is only about 670px wide. Make sure your image is not larger than 670px. We also recommend using an image editing tool like Photoshop to “Save For Web” to optimize images and reduce the overall file size.

    A great tool to cpmress jpegs and png files is Compressor.io, it allows you to easily upload a file and then will auto compress it for you.

    Comprehensive Guide On Image Optimization

    3. Server / Hosting – Sometimes slow speed can be a result of your hosting service. Some hosting services used shared hosting which can have an effect on speed. This is a very broad topic but the general idea is that some hosts are better than others. If you have checked the above two items and the site is still slow, the most likely it is a server/hosting issue. Contact your host and discuss it with them.

    4. Disable Features You Are Not Using In Theme Options – We include several options to disable features in theme options. On the “Extras” tab are several options to toggle on/off, if you are not using some then disable them to reduce loading times.

    5. Use A Cache Plugin Like W3TC – A cache plugin is necessary for a premium theme,your speed will certainly increase when you use one. We recommend using W3TC becasue we feel it is the best one out there. Please click the button below for details on using W3TC with Avada.

    Click Here To Learn About W3TC & Avada

    Image Enhancements – WP “srcset” in Avada

    08/03/2016
    IMPORTANT NOTE – To take advantage of this, you have to use the Regenerate Thumbnails plugin for images that are already in your media library. Any new images uploaded will be fine, but old images will need to be regenerated.

    Responsive Images in WP 4.4+

    WP 4.4 since introduced ‘responsive images’. It was implemented by using srcset and sizes attributes inside img tags. Every image in WordPress that is displayed through the usage of the_post_thumbail() or get_the_post_thumbnail() will get these attributes added to them automatically. What happens internally is that WordPress checks for available versions of the image that have been added through add_image_size(). The sizes attribute was set in a way that by default you wouldn’t recognize any changes on the front end. They did so as to not break any sites.

    Avada 4.0 Adaptation

    We improve that method a lot for any automatically added images that use full image sizes. So all parts that uses cropped images, like blog medium layouts or portfolio pages with fixed images are not affected as they are already performance optimized. We added 5 uncropped image sizes, with the widths of 200px, 400px, 600px, 800px and 1200px. (At the same time we removed 4 of our cropped sizes to make sure the theme does not create too many image sizes.) This way, we have images for almost all column amounts and also for retina needs. We remove all srcset images that WordPress automatically adds for full sizes images, and add these new image sizes instead. Also the sizes attribute is changed. Instead of the WordPress default values, we use the correct column break points as set by the user in Theme Options (and auto calculated downwards). This is to make sure that the browser has all the information needed to choose the correct image.

    Areas Making Use Of Improvements So Far

    Blog (main page and shortcode)

    • Grid Layout
    • Timeline Layout
    • Large Layouts without a sidebar

    Portfolio

    • All portfolio pages that use auto sized images
    • Portfolio Archives that use auto sized images
    • Recent works shortcode

    Performance Enhancements

    We change the actual src attribute of the img tags. This means instead of the full resolution image, we check how much space the image will take on the desktop layout and use the best fitting image size then. This helps a lot in passing Google PageSpeeds. All in all, the new setup will reduce the downloaded image size tremendously for every full sized image that is loaded in the areas said above.

    Install & Setup WooCommerce

    06/15/2016

    Avada is compatible with WooCommerce 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 documentation 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.

    IMPORTANT NOTE
    If you’ve imported one of our WooCommerce demos, such as the Modern Shop or Classic Shop, then you can safely skip the Woo Onboarding Wizard process because our demo importer will handle that setup for you. To skip the Woo Onboarding Wizard process, simply click the ‘Not Right Now’ button.

    How To Install WooCommerce

    Step 1 – Go to Avada > Plugins and locate the WooCommerce plugin.

    Step 2 – Click the ‘Install’ button.

    Step 3 – Once it’s finished installing, click the ‘Return to Required Plugins Installer’ link. Find the WooCommerce plugin again then click the ‘Activate’ button.

    Step 4 – After activating the plugin, the WooCommerce Onboarding Wizard setup will appear. If you’re importing one of our Woo demos, such as Modern Shop or Classic Shop, you can safely skip this process. To skip, click the ‘Not Right Now’ button. If you’re not importing one of our Woo demos, then click the ‘Let’s Go!’ button to proceed with the setup.

    Step 5 – Follow the onscreen prompts and instructions to go through the process and fill in your store’s necessary information. Once finished, you can proceed to creating your first product by clicking the ‘Create Your First Product’ button, or return to the WordPress Dashboard by clicking the link below the setup window.


    How To Create Your Products

    Step 1 – Go to the Products > Add Product tab on your WP Admin sidebar.

    Step 2 – Enter the name of your product at the top of the page.

    Step 3 – Enter the product description text into the post content field. This section will display all the product information.

    Step 4 – In the ‘Product Data’ box, enter all the product details. For example, Price, SKU or Shipping.

    Step 5 – In the ‘Product Short Description’ box, enter a short description that will display next to your main images.

    Step 6 – Set your main featured image under the ‘Product Image’ box on the right hand side. 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 – In the ‘Product Categories’ box, enter your product’s categories. In the ‘Product Tags’ box, enter your product’s appropriate tags.

    Step 9 – Once you’ve entered all the necessary date, click ‘Publish’ and the item will now appear on your main shop page.


    Product Creation Overview

    IMPORTANT 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 fully filled, then you must have a Catalog Image size of about 500px in width, and your product image must be at least 500px.

    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 regenerating 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’ tab on your admin sidebar, and select the ‘Settings’ tab.

    Step 2 – Click on the ‘Products’ tab at the top of the page. Directly below those options, switch to the ‘Display’ tab.

    Step 3 – Under the ‘Product Images’ section, you will find the Catalog Images, Single Product Images, and Product Thumbnails options.

    Step 4 – 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. Enter your desired width and height value.

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

    Step 6 – 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 7 – Install the Regenerate Thumbnails plugin and go to the tools tab, and choose to regenerate your image thumbnails so the larger size will be created.


    How To Use The Events Calendar With Avada

    06/15/2016

    The Events Calendar plugin developed by Modern Tribe is a plugin designed to create and manage events on your website with ease. This section details how to install the plugin, the customization options that will affect the plugin, and the like. If you would like to learn how to use this plugin with Avada, please continue reading below.

    The Events Calendar Plugin Pro Version Vs. Free Version

    The Events Calendar plugin offers a Pro versions as well as a Free version. If you only want to use The Event Calender plugins core features, then the free version will suffice. However, if you want to receive premium support and additional features, then you can purchase the Pro version. To see the list of features and differences for each version, please go here.

    Click Here To Purchase The Events Calendar Pro

    How To Install And Activate The Events Calendar

    Step 1 – Navigate to the Plugins > Add New tab on your WordPress admin panel.

    Step 2 – Once on the ‘Add Plugins’ page, search for ‘The Events Calendar’ plugin using the search field on the upper right corner.

    Step 3 – When the search is done, you’ll see The Events Calendar plugin developed by Modern Tribe in the list of results. Once you find the correct pluin, click the ‘Install Now’ button. Make sure to install the correct plugin.

    Step 4 – Once it’s finished installing successfully, click the ‘Activate Plugin’ link.


    Main Events Page

    When you install The Events Calendar plugin, it creates and registers a slug to showcase your events at /events. It is important to understand that while the /events page on the front end appears to be a regular page, it is not an actual page you can edit in the backend. To learn how to change this slug, continue reading below.

    How To Change The Main Events Page Slug

    Step 1 – Navigate to the Events > Settings tab on your WordPress admin panel.

    Step 2 – On the ‘General’ tab, locate the ‘Events URL Slug’ option. By default, it’s set to events. Simply change it to the slug you’d wish to use.

    Step 3 – You can also change the ‘Single Event URL Slug’ option to change the slug for single event pages. By default, it’s set to event. Simply change it to the slug you’d wish to use. Ideally, the the Events URL slug should be plural, and the Single Events URL slug singular.

    Step 4 – Once finished, don’t forget to click the ‘Save Changes’ option.

    IMPORTANT NOTE – If the option is unavailable, it may be because your permalinks aren’t set correctly. Your permalinks must be set to any setting except Plain. You can customize your permalinks by going to the Settings > Permalinks on your WordPress admin panel.


    Events Calendar Plugin Options In Fusion Theme Options

    In the Fusion Theme Options, there’s an Events panel that has 2 sub-panels. Those 2 sub-panels are the General Events Calendar sub-panel which contains general options for the Events Calendar plugin and the Events Single Posts that contain specific options for the events single posts. There are also options for Events Calendar sidebars under Theme Options > Sidebars > Events Calendar Posts panel.

    General Events Calendar Sub-Panel

    Events Primary Color Overlay Text Color – Illustrated as A on the screenshot, this option controls the color for the text when the primary color is in the background.

    Events Filter Bar Background Color – Illustrated as B on the screenshot, this controls the color for the background of the events calendar filter bar.

    Events Filter Bar Text Color – Illustrated as C on the screenshot, this option controls the color of the event filter bar text.

    Events Monthly Calendar Heading Background Color – Illustrated as D on the screenshot, this option controls the background color for the numbered heading.

    Events Monthly Calendar Background Color – Illustrated as E on the screenshot, this option controls the background color for each day in the calendar.

    Events Tooltip Background Color – Illustrated as F on the screenshot, this option controls the background color for the event tooltip.

    Events Tooltip Body Text Color – Illustrated as G on the screenshot, this option controls the color for the body text on the tooltip.

    Events Border Color – Illustrated as H on the screenshot, this option controls the color for the border around the events calendar.

    Events Featured Image Hover Type – Illustrated as I on the screenshot, this option allows you to set the hover type for the featured image. Choose between None, Zoom In, Zoom Out or Lift Up.

    Events Image Background Size For List View – Illustrated as J on the screenshot, this option allows you to select if the event image displays auto or covered in the list view. Choose between Cover and Auto.


    Events Single Post Sub-panel

    Events Social Sharing Box – Illustrated as A on the screenshot, this option allows you to turn the social sharing box on single events posts On or Off.

    Events Sidebar Background Color – Illustrated as B on the screenshot, this option controls the background color of the single event post sidebars.

    Events Sidebar Padding – Illustrated as C on the screenshot, this option controls the background color of the single event post sidebars.

    Events Sidebar Widget Heading Font Size – Illustrated as D on the screenshot, this option controls the background color of the single event post sidebars.

    Events Sidebar Widget Title Background Color – Illustrated as E on the screenshot, this option controls the background color of the single event post sidebars.

    Events Sidebar Widget Headings Color – Illustrated as F on the screenshot, this option controls the background color of the single event post sidebars.

    Events Sidebar Text Font Size – Illustrated as G on the screenshot, this option controls the background color of the single event post sidebars.

    Events Sidebar Text Color – Illustrated as H on the screenshot, this option controls the background color of the single event post sidebars.

    Events Sidebar Link Color – Illustrated as I on the screenshot, this option controls the background color of the single event post sidebars.

    Events Sidebar Divider Color – Illustrated as J on the screenshot, this section contains options to activate and assign global sidebars.


    Events Calendar Posts Sub-panel

    IMPORTANT NOTE – The Events Calendar Posts sub-panel is located in the Avada > Theme Options > Sidebars panel.

    Activate Global Sidebar For Events Calendar Posts – Illustrated as A on the screenshot, this option allows you to turn global sidebars for Events Calendar posts On or Off.

    Global Events Calendar Post Sidebar 1 – Illustrated as B on the screenshot, this option allows you to select which widget section to display as the 1st sidebar. Select to None to hide the 1st sidebar.

    Global Events Calendar Post Sidebar 2 – Illustrated as C on the screenshot, this option allows you to select which widget section to display as the 2nd sidebar. Select to None to hide the 2nd sidebar.

    Global Events Calendar Sidebar Position – Illustrated as D on the screenshot, this option allows you to control the position of the 1st sidebar. If a 2nd sidebar is selected, it will be displayed on the opposite side.


    Events Shortcode Options

    The Events Shortcode can be found within the Builder Elements when creating any page or post. Please continue reading below for the list of options for this shortcode.

    Categories – Illustrated as A on the screenshot, this option allows you to select categories to include. Leave blank to include all categories.

    Number of Events – Illustrated as B on the screenshot, this option allows you to select the number of events to display.

    Maximum Columns – Illustrated as C on the screenshot, this option allows you to select the maximum number of columns to display.

    Picture Size – Illustrated as D on the screenshot, this option allows you to choose the size of your picture. Choose between cover which will scale the image to cover the container, or auto which will adjust the container’s width and height to fit the image.

    CSS Class – Illustrated as E on the screenshot to the right, the CSS Class option allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

    CSS ID – Illustrated as F on the screenshot to the right, this option allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.


    Various Documentation For The Events Calendar Plugin

    Below is a list of articles and resources that you can use to better learn how to use The Events Calendar plugin.

    How to Create Self-Hosted Videos

    11/02/2016

    Aside from images and text, videos are a great way to showcase content on your website. With Avada’s premium sliders such as the Fusion Slider, Revolution Slider, and Layer Slider, you have the option to upload videos from Youtube, Vimeo and even Self-Hosted videos. Self hosted videos require a few steps to create and a few file formats per video.This step by step article below will cover the various file formats of self hosted videos, how to make the two required file formats, areas of Avada that can use the videos, and how to use the videos in those areas.

    IMPORTANT NOTE – The ability the set a video as a background of a full-width container is only available in Avada version 3.7 or higher.

    A Self Hosted Video Consists of 4 File Formats

    • .MP4 – A required file format for uploading Self-Hosted videos. This file works for all browsers except for Firefox.
    • .WEBM – A required file format for uploading Self-Hosted videos. This file is specifically for Firefox browser
    • .OGV – An optional file format for uploading Self-Hosted videos.
    • Video Preview Image – The image that will be seen in place of your video on older browsers or mobile devices.

    The Only Required Formats Are MP4 and WEBM

    Self hosted videos require two file formats to display correctly in all browsers. MP4 is used for all major browsers except for Firefox, which uses the WEBM format. With these two formats, your video will display correctly in all major browsers. These steps below assume that you already have a video to use. Videos come in many different formats, so the idea is that you need to convert your current video format to MP4 and WEBM files, which can then be uploaded and used on your website.

    How To Create A MP4 File

    Step 1 – After creating your video, make sure to save it in .MP4 format. The video must also be in 16:9 Aspect Ratio.

    Step 2 – If you are unable to save your video in .MP4 format, you must convert it to .MP4 format via a 3rd party software, like Handbrake. Please see the links below for information on how to do this.

    View Handbrake documentation.

    How To Create A WEBM File

    Step 1 – Once you have a video in .MP4 format, you can now convert it to .WEBM format. You can do this with Firefogg. Firefogg only works in Firefox.

    Step 2 – If you choose to use Firefogg, you can simply upload your .MP4 video and it will automatically convert it to .WEBM format.

    IMPORTANT NOTE – Self hosted videos can be very large in size, which is not good for a website. Conversion tools like Handbrake and Firefogg will drastically reduce file size. Handbrake and Firefogg are 3rd party applications and are not affiliated with ThemeFusion.

    Areas You Can Use Self-Hosted Videos

    • Fusion Slider – Using the Fusion Slider, you can insert Self-Hosted videos into your slides.
    • Full Width Container – Using the Full Width Container, you can set a Self-Hosted video as the background.
    • Layer Slider – Using the Layer Slider, you can insert Self-Hosted videos into your slides.
    • Revolution Slider – Using the Revolution Slider, you can insert Self-Hosted videos into your slides.
    IMPORTANT NOTE – Each areas have slightly different ways to add them. However, all of them require the same files.

    How To Use The MP4 And WEBM Files

    Once you have your video in .MP4 and .WEBM formats, you’re now ready to upload them.

    Step 1 – Choose the area of the site you want to use Self-Hosted videos. Each area described above has slightly different upload methods, but all require the same files.

    Step 2 –  In your chosen area, simply upload the correct file format to the correct field. For example, upload the .MP4 file format to the .MP4 Upload field. There will be a field for each required file format.

    Step 3 – If there is just a simple text field with no video uploader button, like in Full Width Containers, you will need to upload the files to the Media Section then copy the URL.

    Step 4 – If your media files are too big to upload through the Media Manager, you will need to upload them to your server via FTP.


    Image Size Guide

    06/15/2016

    Below is a general guide on how to gauge how big or small your images should be to fit your website, as well as to look crisp and high definition on your viewer’s screens. The sizes of your images hugely depends on several factors, such as your site width, sidebars, and sliders among others. Continue reading below to learn more about these factors as well as how to view the image sizes we use on our demo sites. Also consider reading our handy ‘A Comprehensive Guide To WordPress Image Optimization’ blog article to learn the basics of image optimization.

    IMPORTANT NOTE – Generally speaking, image sizes will be unique to your own site setup. There is never a “perfect size” for all sites, it depends on many factors and is unique to each person’s site.

    Factors That Influence Image Sizes

    • Site Width – Located in the Theme Options > Layout panel. This setting allows you to set the overall width of your site, which can affect how big or small your images will be. This also affects your columns, which will affect any images you display inside them.
    • Sidebars – Located in the Theme Options > Layout panel. Having a sidebar allows you to set a sidebar width, which can affect image sizes. Content width is automatically calculated.
    • Dual Sidebars – Located in the Theme Options > Layout panel. You also have the option to have 2 sidebars on each side of your website, and this can greatly affect image sizes, as well.
    • Individual Spacing – Image sizes greatly depend on individual elements’ spacing such as paddings and margins. A good example is column spacing that affects how wide columns are displayed on the page, which in turn affects how big your images in columns will display.

    Slider Image Sizes

    • Fixed Width – If you’re using a fixed width slider, then the appropriate image size for your slider would be your slider width and height. For example, if you have a slider width of 1100px and a slider height of 500px, then your image size should be 1100px wide and 500px high.
    • 100% Width – As for siders that are 100% width, the image size you should use depends on a few factors such as the screen it’s being viewed on, or the slider height. As a general rule, we use images that are 2000px wide for our demos which is usually big enough to make images look great on all general screen sizes. The height of the image depends on the pixel value you’ve set for the slider. For example, if you have a slider that is 100% wide and 500px high, then your image size should be around 2000px wide and 500px high.
    • Full Screen Slider – Images for Full Screen sliders fully depend on the screen it’s being viewed on. Because it’s difficult to tell what screen your viewers are viewing your site on, it’s best to use a general size that is big enough for all general screen sizes. As a guide, we use images that are around 2000px wide and 1100px high for full screen sliders on our demos.

    Demo Image Sizes

    If you’ve recently imported a demo and would like to know the size of a certain image on the demo, you can either check the Media Library for the corresponding image, or check the image on the front end directly. To view the images directly on the front end, please follow the instructions below.

    How To View Demo Image Sizes

    Step 1 – Locate the image you’d like to see the size of. For example, blog images on the Classic demo.

    Step 2 – Right click the image, and select the ‘Open Image in New Tab’ option.

    Step 3 – Once the image has opened in a new tab, you will see the size beside the image’s name on the tab. For example, imagename.jpg (500×500). If you cannot see the size, simply hover over the tab and after a while, the image name and the size will be displayed here.

    Step 4 – Once you figure out the size of the image, you can then create your own image in that size then upload it to your site.


    How To View Demo Image Sizes (Alternative)

    In the event that you’d like to view the size of a full width container background, or other images that cannot simply be viewed by right clicking it and selecting the ‘Open Image in New Tab’ option, then please follow the steps below.

    Step 1 – If the ‘Open Image in New Tab’ option is not available, click the ‘Inspect’ option instead.

    Step 2 – The Developer Console will appear on the right hand side of the screen. A portion of code will also be highlighted, which represents an area on your website. Hover over each block of code until the whole background is highlighted. Please refer to this image as an example.

    Step 3 – Once you’ve found the block of code that represents the area you’d like to inspect, click on the block of code. In the Styles section below the Developer Console, find the ‘background-image’ section and you will see a URL. Hover over this URL to see the image thumbnail and the image size. Please refer to the image on the right as an example.


    Full Width Element Image Sizes

    When uploading a background image to a full width element, you may notice that only a portion of your image is displayed when viewed on mobile or tablets. This is how the theme naturally handles background images and is not a responsive issue. The background image is first centered, then it will resize proportionally until the image’s width or height is equal to the container’s width or height (whichever is greater). For example, if you have a 500px x 500px image and a 100px x 350px container, then your background image will be resized to 350px x 350px. Please refer to the examples below for a visual representation of this.

    Portfolio Featured Image Sizes

    Each portfolio post that you create requires you to upload at least 1 featured image for the post to display. To learn more about the Portfolio’s Featured Image settings, please click the button below.

    Click Here To Read Our ‘Featured Image Size Options’ Article

    Attachment Display Settings

    When uploading an image into the page content, such as through shortcodes, you’ll find the ‘Attachment Display Settings’ section. This section affects how your images display on the page. Please continue reading below to learn more about this section.

    Step 1 – When you upload an image into the page content, the Media Library window will appear.

    Step 2 – Select or upload your desired image. To the right side of the window, find the ‘Attachment Display Settings’ section.

    Step 3 – Under this section, you’ll find the ‘Size’ option. Using this option, you can select which size to use when uploading an image. You can choose between Thumbnail, Medium, Large or Full Size.

    Step 4 – Set the ‘Size’ option to Full Size to guarantee that the image you’re uploading will appear crisp and high quality.


    Reducing Image Size Generation

    06/15/2016

    The Avada theme generates image sizes for the most important areas, so that images of fitting sizes can be loaded on the frontend instead of always loading the full image size. It may seem like a lot of images, but this reduces loading time considerably on the front end for your viewers. We feel the performance increase is well worth the extra image files. If you would like to change this to your needs, please read the information below.

    How To Reduce Image Size Generation

    Step 1 – Go to the Avada > includes file path and open the class-avada-init.php.

    Step 2 – Inside the class-avada-init.php file, locate the add_image_size calls there. Comment out any size you don’t want to include by adding a double backslash ( // ) before them.

    Step 3 – Once finished, don’t forget to save your changes.

    Step 4 – Run the Force Regenerate Thumbnails plugin to regenerate your thumbnails. After doing this, all sizes you don’t want included will be removed.


    System Status

    06/15/2016
    IMPORTANT NOTE – This feature is only available in Avada 3.8 or higher.

    The System Status tab contains a collection of relevant data that will help you debug your website quicker and more efficiently. In this tab, you can also generate a System Report, which you can include in your support tickets to help our support team find solutions for your issues much faster. This tab is divided into three sections; the WordPress Environment section, the Server Environment section, and the Active Plugins section. The System Status tab is located under Avada > System Status in your WordPress admin area. Continue reading below for more information on each section.

    WordPress Environment

    This section displays all the relevant data that has to do with your WordPress environment.

    • Home URL – This item displays the URL of your site’s homepage.
    • Site URL – This item displays the root URL of your site.
    • WP Version – This item displays the version of WordPress installed on your site.
    • WP Multisite – This item displays whether or not you have WordPress Multisite enabled.
    • WP Memory Limit – This item displays the maximum amount of memory (RAM) that your site can use at one time.
    • WP Debug Mode – This item displays whether or not Debug Mode for WordPress is enabled.
    • Language – This item displays the current language used by WordPress.

    Server Environment

    This section displays all the relevant data that has to do with your server environment.

    • Server Info – This item displays information about the web sever that is currently hosting your site.
    • PHP Version – This item displays the version of PHP installed on your hosting server.
    • PHP Post Max Size – This item displays the largest file size that can be contained in one post.
    • PHP Time Limit – This item displays the amount of time (in seconds) that your site will spend on a single operation before timing out.
    • PHP Max Input Vars – This item displays the maximum number of variables your server can use for a single function to avoid overloads.
    • SUHOSIN Installed – This item displays whether or not SUHOSIN is installed.
    • MySQL Version – This item displays the version of MySQL installed on your hosting server.
    • Max Upload Size – This item displays the largest file size that can be uploaded to your WordPress installation.
    • Default Timezone is UTC – This item displays the default timezone for your server

    Active Plugins

    This section displays all your active plugins. The Fusion Core, LayerSlider WP, and Revolution Slider are the three plugins included with the theme. Please ensure that the Fusion Core plugin is always active and up-to-date.

    • Fusion Core – This plugin is created by ThemeFusion, and is a required plugin. Please make sure it’s always active and up-to-date.
    • LayerSlider WP – This plugin is created by Kreatura Media, and is an included plugin.
    • Revolution Slider – This plugin is created by ThemePunch, and is an included plugin.

    Red and Green Values

    In the System Status tab, some values may appear as green or red. These values are the WP Memory Limit, PHP Time Limit, and the PHP Max Input Vars. If a value appears as green, this means that the value satisfies the minimum requirements needed to run the theme. If a value appears as red, this means that the value is below the minimum requirements and needs to be adjusted. Please click the button below to read about how to increase these limits.

    Click Here To Learn How To Adjust System Status Limits

    System Status Limits

    06/15/2016
    IMPORTANT NOTE – Please know that each hosting service is different, and the methods mentioned below may or may not work for you. Before trying these methods to increase your system status limits, it’s always best to contact your respective hosts first and ask them if they can make these adjustments for you.

    Under the Avada > System Status tab, you’ll find a few values in red that you may need to increase or adjust for your site to function optimally. Below you’ll find some of the most common values that users encounter issues with. Continue reading below to learn more about what these values are, why they need to be adjusted and how you can go about adjusting them.

    WP Memory Limit

    What Is The WP Memory Limit?

    The WP Memory Limit is the maximum amount of memory (RAM) that your site can use at one time. When you reach your Memory Limit, you’ll encounter a fatal error. Several things consume memory, such as WordPress itself, the theme you’re using, and the plugins installed on your site. Basically, the more content and features you add to your site, the bigger your memory limit has to be.

    Why Do I Need To Increase My WP Memory Limit?

    There are a number of factors that may affect how much memory your website will need such as content, themes, plugins, etc. The default memory limit for WordPress is 32MB. If you’re only running a small site with basic functions, this default value is more than enough. However, once you start encountering ‘Fatal Error: Memory Size Exhausted…, it may be time to adjust your memory limit.

    How To Increase The WP Memory Limit

    To increase your memory limit, you’ll need to access and modify certain files such as the php.ini, wp-config.php, and .htaccess files. Most hosts won’t grant you full access to modify the PHP.ini file because it affects the whole server and all the websites hosted on it. Please contact your host first to find out if they can adjust it for you.

    For advanced users who have their own server setups and full access to the php.ini file, please go ahead and try Method 1 first before the other methods. For standard users, we encourage you to try Method 2 and Method 3 instead.

    Method 1: Change Your PHP Memory Limit in php.ini File

    IMPORTANT NOTE – Many shared hosts prohibit you from having direct access to the PHP.ini file. Only do this method if you have direct access to your PHP.ini file or if you’re on your local host or own server setup. Please note that this won’t change the red WP Memory Limit value reflected in your System Status tab since this method adjusts your PHP memory limit.

    Step 1 – Locate your PHP.ini file. If you can’t find it, then you can create your own PHP.ini file in the root folder of your WordPress installation.

    Step 2 – If you find your existing PHP.ini, open the file and locate the following line of code (xx represents a number): memory_limit = xxM;. Then change xxM to your desired limit. For example, 256M.

    Step 3 – If you created your own PHP.ini file, then add the same code inside it: memory_limit = 256M;. Simply change the value to the recommended value. For example, 256M.

    Step 4 – Save your changes, and reboot your local host or server.


    Method 2: Change Your WordPress Memory Limit in WP-config.php File

    IMPORTANT NOTE – This is the value that you see displayed on the WP Memory Limit status on the System Status page. Changing this value to the recommended value (256M) will turn the WP Memory Limit status to green on your System Status page.

    Step 1 – Locate your wp-config.php file in the root folder of your WordPress installation.

    Step 2 – Open the wp-config.php with a text editor program (Notepad or TextEdit) and add the following line of code after ‘define(‘WP_DEBUG’, false);: define (‘WP_MEMORY_LIMIT’, ‘256M’);. Simply change the value to the recommended value. For example, 256M.

    Step 3 – Save the file and refresh your System Status tab. If the WP Memory Limit turns green, then you have successfully increased your WP Memory Limit.


    Method 3: Change Your PHP Memory Limit in .htaccess File

    IMPORTANT NOTE – Make sure to back up your .htaccess file before editing. This is another method to change your PHP memory limit. This will not affect the value displayed in WP Memory Limit on the System Status page.

    Step 1 – Locate your .htaccess file which is usually in the root folder of your WordPress installation. If you can’t find it, it may be because it’s hidden. Here’s a tutorial for Windows and a tutorial for Mac on how to reveal hidden files.

    Step 2 – Open the .htaccess file with a text editor program (Notepad or TextEdit) and add the following line of code: php_value memory_limit 256M;. Simply change the value to the recommended value. For example, 256M.

    Step 3 – Save the file and refresh your website.


    PHP Time Limit

    What Is The PHP Time Limit?

    the PHP Time Limit is the amount of time (in seconds) that your site will spend on a single operation before timing out. This is also to avoid server lockups. The default value for the PHP Time Limit is 40 seconds. When an operation reaches the time limit set, then it will return a fatal error that looks like this Fatal error: Maximum execution time of xx seconds exceeded….

    Why Do I Need To Increase My PHP Time Limit?

    Because the default value is only 40 seconds, you will most likely receive a fatal error when running complicated operations. For example, installing our Classic Demo requires a PHP Time Limit value of 300 seconds due to the amount of content it has. We recommend changing your PHP Time Limit to at least 180 seconds, or to 300 seconds if you’d like to import the Classic Demo.

    How To Increase The PHP Time Limit

    To increase your PHP time limit, you’ll need to access and modify certain files such as the php.ini, wp-config.php, and .htaccess files. Most hosts won’t grant you full access to modify the PHP.ini file because it affects the whole server and all the websites hosted on it. Please contact your host first to find out if they can adjust it for you.

    For advanced users who have their own server setups and full access to the php.ini file, please go ahead and try Method 1 first before the other methods. For standard users, we encourage you to try Method 2 or Method 3 instead.

    Method 1: Change Your PHP Time Limit in PHP.ini File

    IMPORTANT NOTE – Many shared hosts prohibit you from having direct access to the PHP.ini file. Only do this method if you have direct access to your PHP.ini file or if you’re on your local host.

    Step 1 – Locate your PHP.ini file. If you can’t find it, then you can create your own PHP.ini file in the root folder of your WordPress installation.

    Step 2 – If you find your existing PHP.ini, open the file and locate the following line of code (xx represents a number): max_execution_time = xx; Then change xx to your desired limit. For example, 300.

    Step 3 – If you created your own PHP.ini file, then add the same code inside it: max_execution_time = 300; Simply change the value to the recommended value. For example, 300.

    Step 4 – Save your changes, and reboot your local host or your server.


    Method 2: Change Your PHP Time Limit in WP-config.php File

    Step 1 – Locate your wp-config.php file in the root folder of your WordPress installation.

    Step 2 – Open the wp-config.php with a text editor program (Notepad or TextEdit) and add the following line of code after ‘define(‘WP_DEBUG’, false);: set_time_limit(300);. Simply change the value to the recommended value. For example, 300.

    Step 3 – Save the file and refresh your System Status tab. If the PHP Time Limit turns green, then you have successfully increased your PHP Time Limit.


    Method 3: Change Your PHP Time Limit in .htaccess File

    IMPORTANT NOTE – Make sure to back up your .htaccess file before editing.

    Step 1 – Locate your .htaccess file which is usually in the root folder of your WordPress installation. If you can’t find it, it may be because it’s hidden. Here’s a tutorial for Windows and a tutorial for Mac on how to reveal hidden files on your computer.

    Step 2 – Open the .htaccess file with a text editor program (Notepad or TextEdit) and add the following line of code: php_value max_execution_time 300. Then just put in the recommended value. For example, 300.

    Step 3 – Save the file and refresh your website.


    PHP Max Input Vars

    What Is The PHP Max Input Vars?

    The PHP Max Input Vars is the maximum number of variables your server can use for a single function to avoid overloads. The default value of the PHP Max Input Vars is 1000, while the recommended value is 1540. This limitation will truncate some post data such as your menu items which causes issues like your menu items aren’t saving or being left off.

    Why Do I Need To Increase My PHP Max Input Vars?

    You may need to increase your PHP Max Input Vars if you’re running into issues with your menu. If your menu items aren’t saving properly, or if the last few menu items are being left off, this is most likely because your PHP Max Input Vars value is too low. We recommend your PHP Max Input Vars to be 1540 in order to load all the Classic Demo’s menu items.

    How To Increase The PHP Max Input Vars

    Like the other values above, you’ll need to access and modify either the php.ini or the .htaccess files. Most hosts won’t grant you full access to modify the PHP.ini file because it affects the whole server and all the websites hosted on it. Please contact your host first to find out if they can adjust it for you.

    For advanced users who have their own server setups and full access to the php.ini file, please go ahead and try Method 1 first before the other method. For standard users, we encourage you to try Method 2 instead.

    Method 1: Change Max Input Vars in PHP.ini File

    IMPORTANT NOTE – Many shared hosts prohibit you from having direct access to the PHP.ini file. Only do this method if you have direct access to your PHP.ini file or if you’re on your local host.

    Step 1 – Locate your PHP.ini file. If you can’t find it, then you can create your own PHP.ini file in the root folder of your WordPress installation.

    Step 2 – If you find your existing PHP.ini, open the file and locate the following line of code (xx represents a number): max_input_vars = xx; And set it to your desired limit. For example, 1540.

    Step 3 – If you created your own PHP.ini file, then add the same code inside it: max_input_vars = 1540; Simply change the value to the recommended value. For example, 1540.

    Step 4 – Save your changes, and reboot your local host or your server.


    Method 2: Change Max Input Vars in .htaccess File

    IMPORTANT NOTE – Make sure to back up your .htaccess file before editing.

    Step 1 – Locate your .htaccess file which is usually in the root folder of your WordPress installation. If you can’t find it, it may be because it’s hidden. Here’s a tutorial for Windows and a tutorial for Mac on how to reveal hidden files on your computer.

    Step 2 – Open the .htaccess file with a text editor program (Notepad or TextEdit) and add the following line of code: php_value max_input_vars 1540. Simply change the value to the recommended value. For example, 1540.

    Step 3 – Save the file and refresh your website.


    Videos In Lightbox

    06/15/2016

    The lightbox we use is called iLightbox and it is compatible with both Youtube and Vimeo videos. You can also have an image on your page that opens into a video in a lightbox when clicked. However, to make them display at the correct size, the correct link must be used in the Video URL Lightbox field. Please continue reading below for information on where this can be done and how to do it properly.

    Locations You Can insert Videos In A lightbox

    • Portfolio Posts – Each portfolio post has a Youtube/Vimeo Video URL For Lightbox field in the Fusion Page Options that allows a video to be loaded.
    • Add Media To Page/Post – Any image inserted onto a page can open in a lightbox to play a video or show another image.

    How To Insert Videos In The Lightbox For Portfolio Posts

    Step 1 – Open the portfolio post you’d like to add a video to, or create a new one.

    Step 2 – In the Fusion Page Options, locate the ‘Youtube/Vimeo Video URL for Lightbox’ field and paste your video’s link URL. For example, https://vimeo.com/63534746.

    Step 3 – Once you’re finished making changes, click Save Draft or Publish/Update.

    IMPORTANT NOTE – Make sure to use the link URL ( https://vimeo.com/63534746 ) and not the embed URL ( http://player.vimeo.com/video/63534746 ).


    How To Insert Videos In The Lightbox For Regular Media

    Step 1 – Open the page or post you’d like to add a video to, or create a new one.

    Step 2 – Click the Add Media button in the upper left area of the page editor, just below the Fusion Builder button.

    Step 3 – Click the Insert from URL link in the left side and paste your video’s link URL in the URL field. For example, https://vimeo.com/63534746.

    Step 4 – Once you’ve inserted the link URL, click the Insert to Post button on the lower right corner.

    Step 5 – After you insert the video, you must add rel=”iLightbox” to the link tag. As an example, please refer to the image to the right.


    How To Set Video Size in Fusion Theme Options

    Step 1 – Navigate to the Avada > Theme Options tab.

    Step 2 – Go to the Lightbox tab, and locate the Slideshow Video Width and Height options. Set the width and height of your video by entering a pixel value into the corresponding setting. For example,1280px for the width and 720px for the height.


    Common Issues or Questions

    1.) My Youtube or Vimeo video is too large?

    This issue is because you’re using the embed URL instead of the link URL.

    Avada Child Theme

    07/13/2016

    A WordPress child theme allows you to apply custom code changes to your site. Using a child theme ensures that all your customizations will not be overwritten even when you update the parent theme. Continue reading below to learn how to setup your own child theme.

    SUPPORT POLICY ON CHILD THEMES

    While child themes are a great way to add custom changes to Avada, there are generally used to customize core code from the parent theme. Because of this, please be aware that customizations of this nature fall outside our scope of support and we will be unable to assist you with issues that may arise from it.

    What Is A Child Theme?

    A child theme is a theme that has all the functionality and styling of another theme called the parent theme, which in our case, is Avada. Child themes are the recommended way of modifying the code of an existing theme because a child theme preserves all custom code changes and modifications even after a theme update. If you modify code directly from a parent theme, then update the parent theme, your changes will be lost. Always use a child theme if you are modifying core code. Child themes can also be used for a number of things, such as custom CSS applications, template file modifications, and custom PHP functions and/or hooks. There are a couple of methods to modify a child theme. Child themes don’t guarantee that an update of custom code on the parent theme will not require further maintenance. This is especially true if you copy files from the parent theme to your child theme.

    Downloading and Installing Avada Child Theme

    Before anything else, you must first download and install the Avada child theme to begin making your customizations. The Avada child theme comes with downloading Avada’s Full Package from ThemeForest, and the method of installing it is exactly the same as installing the Avada theme. Please follow the detailed steps below on how to download and install the Avada child theme.

    How To Download Avada Child Theme

    Step 1 – Login to your ThemeForest account and go to your Downloads tab.

    Step 2 – Locate your Avada purchase, and click Download. Choose the ‘All Files & Documentation’ option.

    Step 3 – Once the .ZIP file is finished downloading, locate it on your computer and extract it. You will then have a folder called
    Avada_Full_Package.

    Step 4 – Navigate to Avada_Full_Package > Avada Theme and you will see an Avada.zip file and an Avada-Child-Theme.zip file.

    Step 5 – You must first install Avada.zip file because that is the parent theme. Once that’s done, you can then install the child theme which follows the exact process of installing the parent theme. Choose to install the theme zip files via WP upload or via FTP upload.


    3 Methods Of Modifying A Child Theme

    There are a couple of methods you can use to modify a child theme, but we’ll only be explaining 3 methods of modification. These methods are copying files from a parent theme, pluggable functions, and actions and filters. To learn more about each one, please continue reading below.

    Method 1: Copying Files From Parent Theme

    Copying files from the parent theme to child theme is a common method to make code customizations. This is the easiest method available but there are limitations to it. Due to the limitations, we recommend only modifying the files inside the templates folder from the parent theme into the child theme.

    1. You can only copy some files to the child theme. In Avada, we have made a decision to make sure that core logical code which can break the theme is not copied in the child theme. This includes the files inside the includes folder.
    2. It is not update-safe (sometimes). Whenever we make major changes to a certain file e.g. header.php in the parent theme, you’ll have to copy the theme file from parent theme again and apply the customizations again. If you don’t do this, there’s a chance that the related feature might not work anymore.

    Method 2: Pluggable Functions

    Pluggable functions are PHP functions that can be changed inside a child theme or a even a plugin. If a function is wrapped inside a function_exists call within the parent theme, you can create the same function in the child theme which will overwrite the original function from the parent theme. You can copy the function in functions.php of the child theme and modify the output of page title bar contents within the child theme.

    EXAMPLE OF A FUNCTION WRAPPED INSIDE A CHILD THEME:
    if( ! function_exists( 'avada_get_page_title_bar_contents' ) ) {
    	function avada_get_page_title_bar_contents( $post_id, $get_secondary_content = TRUE ) {
    
    		if ( $get_secondary_content ) {
    			ob_start();
    			if ( fusion_get_option( 'page_title_bar_bs', 'page_title_breadcrumbs_search_bar', $post_id ) != 'none' ) {
    				if ( ( 'Breadcrumbs' == Avada()-&gt;settings-&gt;get( 'page_title_bar_bs' ) &amp;&amp; in_array( get_post_meta( $post_id, 'pyre_page_title_breadcrumbs_search_bar', true ), array( 'breadcrumbs', 'default', '' ) ) ) || 'breadcrumbs' == get_post_meta( $post_id, 'pyre_page_title_breadcrumbs_search_bar', true ) ) {
    					fusion_breadcrumbs();
    				} elseif ( ( 'Search Box' == Avada()-&gt;settings-&gt;get( 'page_title_bar_bs' ) &amp;&amp; in_array( get_post_meta( $post_id, 'pyre_page_title_breadcrumbs_search_bar', true ), array( 'searchbar', 'default', '' ) ) ) || 'searchbar' == get_post_meta( $post_id, 'pyre_page_title_breadcrumbs_search_bar', true ) ) {
    					get_search_form();
    				}
    			}
    			$secondary_content = ob_get_contents();
    			ob_get_clean();
    		} else {
    			$secondary_content = '';
    		}
    
    		$title    = '';
    		$subtitle = '';
    
    		if ( '' != get_post_meta( $post_id, 'pyre_page_title_custom_text', true ) ) {
    			$title = get_post_meta( $post_id, 'pyre_page_title_custom_text', true );
    		}
    
    		if ( '' != get_post_meta( $post_id, 'pyre_page_title_custom_subheader', true ) ) {
    			$subtitle = get_post_meta( $post_id, 'pyre_page_title_custom_subheader', true );
    		}
    
    		if ( '' == get_post_meta( $post_id, 'pyre_page_title_text', true ) || 'default' == get_post_meta( $post_id, 'pyre_page_title_text', true ) ) {
    			$page_title_text = Avada()-&gt;settings-&gt;get( 'page_title_bar_text' );
    		} else {
    			$page_title_text = get_post_meta( $post_id, 'pyre_page_title_text', true );
    		}
    
    		if ( is_search() ) {
    			$title = sprintf( __( 'Search results for: %s', 'Avada' ), get_search_query() );
    			$subtitle = '';
    		}
    
    		if ( ! $title ) {
    			$title = get_the_title();
    			
    			if ( is_home() ) {
    				$title = Avada()-&gt;settings-&gt;get( 'blog_title' );
    			}
    
    			if ( is_404() ) {
    				$title = __( 'Error 404 Page', 'Avada' );
    			}
    
    			if ( class_exists( 'Tribe__Events__Main' ) &amp;&amp; ( ( tribe_is_event() &amp;&amp; ! is_single() &amp;&amp; ! is_home() ) || is_events_archive() || ( is_events_archive() &amp;&amp; is_404() ) ) ) {
    				$title = tribe_get_events_title();
    			} elseif ( is_archive() &amp;&amp; ! is_bbpress() &amp;&amp; ! is_search() ) {
    				if ( is_day() ) {
    					$title = sprintf( __( 'Daily Archives: %s', 'Avada' ), '&lt;span&gt;' . get_the_date() . '&lt;/span&gt;' );
    				} else if ( is_month() ) {
    					$title = sprintf( __( 'Monthly Archives: %s', 'Avada' ), '&lt;span&gt;' . get_the_date( _x( 'F Y', 'monthly archives date format', 'Avada' ) ) . '&lt;/span&gt;' );
    				} elseif ( is_year() ) {
    					$title = sprintf( __( 'Yearly Archives: %s', 'Avada' ), '&lt;span&gt; ' . get_the_date( _x( 'Y', 'yearly archives date format', 'Avada' ) ) . '&lt;/span&gt;' );
    				} elseif ( is_author() ) {
    					$curauth = get_user_by( 'id', get_query_var( 'author' ) );
    					$title   = $curauth-&gt;nickname;
    				} elseif ( is_post_type_archive() ) {
    					$title = post_type_archive_title( '', false );
    
    					$sermon_settings = get_option( 'wpfc_options' );
    					if ( is_array( $sermon_settings ) ) {
    						$title = $sermon_settings['archive_title'];
    					}
    
    				} else {
    					$title = single_cat_title( '', false );
    				}
    			}
    
    			if ( class_exists( 'WooCommerce' ) &amp;&amp; is_woocommerce() &amp;&amp; ( is_product() || is_shop() ) &amp;&amp; ! is_search() ) {
    				if ( ! is_product() ) {
    					$title = woocommerce_page_title( false );
    				}
    			}
    		}
    
    		if ( ! $subtitle &amp;&amp; is_home() ) {
    			$subtitle = Avada()-&gt;settings-&gt;get( 'blog_subtitle' );
    		}
    
    		if ( ! is_archive() &amp;&amp; ! is_search() &amp;&amp; ! ( is_home() &amp;&amp; ! is_front_page() ) ) {
    			if ( 'no' == $page_title_text &amp;&amp; ( 'yes' == get_post_meta( $post_id, 'pyre_page_title', true ) || 'yes_without_bar' == get_post_meta( $post_id, 'pyre_page_title', true ) || ( 'hide' != Avada()-&gt;settings-&gt;get( 'page_title_bar' ) &amp;&amp; 'no' != get_post_meta( $post_id, 'pyre_page_title', true ) ) ) ) {
    				$title    = '';
    				$subtitle = '';
    			}
    		} else {
    			if ( 'hide' != Avada()-&gt;settings-&gt;get( 'page_title_bar' ) &amp;&amp; 'no' == $page_title_text ) {
    				$title    = '';
    				$subtitle = '';
    			}
    		}
    
    		return array( $title, $subtitle, $secondary_content );
    	}
    
    }

    Method 3: Actions and Filters

    The correct and safe way of updating or modifying theme functions within a child theme is using actions and filters. Apart from the actions and filters built-in within Avada, you can use the default WordPress actions and filters to modify the theme’s functionality.

    A simple example would be changing the image size generated for blog large layout thumbnails in the Avada theme. The correct way to re-register within the child theme is to use after_setup_theme action in the child theme functions.php, remove the image size and then re-register the image size.

    EXAMPLE OF AN ACTION

    add_action( 'after_setup_theme', 'my_child_theme_image_size' );
    function my_child_theme_image_size() {
    	remove_image_size( 'blog-large' );
    	add_image_size( 'blog-large', 1000, 500, true );
    }

    Useful Documentation On Child Themes

    If you’d like to learn and read even more about child themes, please follow the links below.

    Change Image Sizes in Child Themes

    06/15/2016

    Click Here To Learn More About Child Themes Click Here To View The WordPress Codex Docs

    Locate Current Image Sizes

    Before you can modify your image sizes on your child theme, you must first locate them on the parent Avada theme so you know the exact image slug to target.

    Step 1 – Go to the Avada > inlcudes folder and open the class-avada-init.php file.

    Step 2 – Scroll down to line 143 to view all the available image slugs.

    Step 3 – Choose which one you’d like to change, and take note of the image slug. For example, blog-large


    Modify Your Child Theme

    Once you’ve determined the image slug of the image size you’d like to change, you can then modify your child theme.

    Step 1 – Go into your child theme folder and open the functions.php file. If you don’t have this file, simply create one with the same filename.

    Step 2 – At the very bottom, add this action:

    add_action( 'after_setup_theme', 'my_child_theme_image_size' );
    function my_child_theme_image_size() {
    	remove_image_size( 'blog-large' ); 
    	add_image_size( 'blog-large', 1000, 500, true );
    }

    Step 3 – Replace the ‘blog-large’ value inside remove_image_size( ‘blog-large’ ); with the image slug of your desired image size.

    Step 4 – In add_image_size( ‘blog-large’, width, height, true );, replace the values with the exact same image slug, your desired width and height values respectively. For example, ‘blog-large’, 1000, 500

    Step 5 – If you’d like to change more than one image size, copy these actions and paste them inside the same function my_child_theme_image_size() class and change the necessary values accordingly:

    remove_image_size( 'blog-large' ); 
    add_image_size( 'blog-large', 1000, 500, true );

    Avada Hooks: Actions and Filters

    11/03/2016

    Actions and Filters are provided by WordPress to allow your plugin to ‘hook into’ the rest of WordPress; the same concept is used by Avada to allow hooking into Avada specific functionality so that you can modify it in a child theme or even a plugin.

    How To Use a Hook Or A Filter?

    So, let’s assume you want to add a banner ad before the entire header. There are three ways to do that:

    1. Edit the parent theme’s code and add the code in the header file
    2. Copy the header file into the child theme and modify the code in that file
    3. Use an action in a child theme’s functions.php

    With the #1 and #2 above, there is a high possibility that the edit would be lost during an update. By using an action, you don’t edit or overwrite the core code which is why, your code will rarely need to be changed.

    To add a banner ad before the entire header, we need to use the avada_before_header_wrapper action in the functions.php of the child theme. Following is an example code:

    add_action( 'avada_before_header_wrapper', 'avada_add_banner' );
    function avada_add_banner() {
        echo '<img src="http://domain.com/ad.png" alt="Ad Banner" />';
    }
    

    Filters are similar to the actions but instead of ‘hooking’ into the code, you are simply changing the final output. You can read more about the difference difference between actions and filters from the beginner’s guide.

    How To Add Code After The Opening Body Tag

    To add code, such as GTM script, after the opening <body> tag, you will have to use the avada_before_body_content filter. If you’re not familiar with editing child theme files or you don’t have a child theme installed, you can install the Code Snippets plugin then add this code in it:

    function my_custom_head_function_for_avada() {
    ?>
    
    ADD YOUR CONTENT HERE
    
    <?php
    }
    add_filter( 'avada_before_body_content', 'my_custom_head_function_for_avada' );

    Conversion For Child Themes

    If you’d like to learn how to convert Child Themes and your own Custom Post Types, please click the button below and follow the instructions in the article.

    Click Here To Read About Converting Child Themes and Custom Post Types

    Actions List

    ACTIONS
    FILE NAME
    DESCRIPTION
    avada_before_header_wrapper avada/templates/header.php
    avada/templates/side-header.php
    This hook is executed before the div that wraps the entire header (includes main header and top header).
    ARGUMENTS: None
    avada_header avada/templates/header.php By default, this hook outputs the header, including top header and the main header.
    ARGUMENTS: None
    avada_after_header_wrapper avada/templates/header.php
    avada/templates/side-header.php
    This hook is executed after the div that wraps the entire header (includes main header and top header).
    ARGUMENTS: None
    avada_before_body_content avada/header.php This hook is executed right after the <body> tag.
    ARGUMENTS: None
    avada_header_inner_before avada/templates/side-header.php This hook is executed only when side header is used and before any kind of content including logo.
    ARGUMENTS: None
    avada_header_inner_after avada/templates/side-header.php This hook is executed only when side header is used and after all content. An example usage would be to insert a widget area in the side header after all the content.
    ARGUMENTS: None
    avada_logo_prepend avada/templates/logo.php This hook is executed directly before the logo html.
    ARGUMENTS: None
    avada_logo_append avada/templates/logo.php This hook is executed directly after the logo html.
    ARGUMENTS: None
    avada_override_current_page_title_bar avada/header.php This hook will override the existing page title bar.
    ARGUMENTS: $c_pageID
    avada_before_main avada/header.php This hook is executed before the div id #main. An example usage would be to add AdSense before the content area.
    ARGUMENTS: None
    avada_author_info avada/author.php This hook is executed on the author info page to add author info.
    ARGUMENTS: None
    avada_after_content avada/archive-avada_portfolio.php
    avada/archive-wpfc_sermon.php
    avada/archive.php
    avada/author.php
    avada/bbpress.php
    avada/buddypress.php
    avada/contact.php
    avada/page.php
    avada/search.php
    avada/side-navigation.php
    avada/single-avada_portfolio.php
    avada/single-wpfc_sermon.php
    avada/single.php
    avada/taxonomy-portfolio_category.php
    avada/taxonomy-portfolio_skills.php
    avada/taxonomy-portfolio_tags.php
    avada/taxonomy-wpfc_bible_book.php
    avada/taxonomy-wpfc_preacher.php
    avada/taxonomy-wpfc_sermon_series.php
    avada/taxonomy-wpfc_sermon_topics.php
    avada/includes/woo-config.php
    avada/sensei/wrappers/wrapper-end.php
    This hook is executed after the #content div primarily to add sidebars.
    ARGUMENTS: None
    avada_footer_copyright_content avada/footer.php This hook is executed to add copyright content in the copyright content area.
    ARGUMENTS: None
    avada_save_options cant find? This hook is executed after saving theme options.
    ARGUMENTS: None
    avada_rollover avada/templates/avada-functions.php This hook is executed to add rollovers over images.
    ARGUMENTS:
    $post_id
    $post_permalink
    $display_woo_price
    $display_woo_buttons
    $display_post_categories
    $display_post_title$gallery_id
    avada_blog_post_date_and_format avada/templates/blog-layout.php This hook is executed to add blog and post format boxes to medium alternate layout.
    ARGUMENTS: None
    avada_after_main_content avada/footer.php This hook is executed to display custom Content right after #Content and .sidebar Containers, but still inside #main container.
    ARGUMENTS: None
    avada_after_main_container avada/footer.php This hook is executed to display custom Content just before the footer, outside of #main container.
    ARGUMENTS: None
    avada_before_comments avada/comments.php This hook is executed to display custom Content just after the page contents, but before the comment section is displayed.
    ARGUMENTS: None
    avada_blog_post_content avada/templates/blog-layout.php This hook renders the actual post content. Custom content can be displayed before or after the post content.
    ARGUMENTS: None
    avada_portfolio_post_content avada/templates/portfolio-archive-layout.php
    avada/templates/portfolio-layout.php
    This hook renders the actual portfolio content. Custom additions can be displayed before or after it by setting the corresponding hook priority.
    ARGUMENTS:
    $archive_id
    $current_page_id
    avada_placeholder_image avada/templates/featured-image-first.php This hook is used create a placeholder markup. Different markup can be used, when removing the theme action and adding a custom one.
    ARGUMENTS: $post_featured_image_size

    Filters List

    FILTERS
    FILE NAME
    DESCRIPTION
    avada_faq_all_filter_name avada/includes/deprecated.php Applied to the “All” text on the portfolio filters.
    DEFAULT VALUE: __( ‘All’, ‘Avada’ )
    avada_blog_read_more_excerpt avada/includes/fusion-functions.php Applied to the blog Read More title text.
    DEFAULT VALUE: […]
    avada_viewport_meta avada/header.php Applied to the viewport meta.
    DEFAULT VALUE: none
    avada_set_placeholder_image_height avada/includes/avada-functions.php Applied to the placeholder image height.
    DEFAULT VALUE: 150
    avada_breadcrumbs_defaults avada/includes/class-avada-breadcrumbs.php Applied to the default values of breadcrumb.
    DEFAULT VALUE:
    array(
    ‘home_prefix’ => $this->options[‘breacrumb_prefix’],
    ‘separator’ => $this->options[‘breadcrumb_separator’],
    ‘show_post_type_archive’ => $this->options[‘breadcrumb_show_post_type_archive’],
    ‘show_terms’ => $this->options[‘breadcrumb_show_categories’],
    ‘home_label’ => __( ‘Home’, ‘Avada’ ),
    ‘tag_archive_prefix’ => __( ‘Tag:’, ‘Avada’ ),
    ‘search_prefix’ => __( ‘Search:’, ‘Avada’ ),
    ‘error_prefix’ => __( ‘404 – Page not Found’, ‘Avada’ ),
    );
    avada_ipad_portrait_styles Avada/includes/dynamic_css.php Applied to the css styles for iPad Portrait.
    DEFAULT VALUE: $ipad_portrait
    avada_dynamic_css_array Avada/includes/dynamic_css.php Applied to the dynamic CSS array.
    DEFAULT VALUE: $css
    avada_dynamic_css Avada/includes/dynamic_css.php Applied to the final compiled CSS from dynamic CSS.
    DEFAULT VALUE: $css
    avada_load_more_pots_name avada/includes/deprecated.php Applied to the text for the load more button.
    DEFAULT VALUE: __( ‘Load More Posts’, ‘Avada’ )
    avada_header_separator avada/templates/header.php Separator for top header content, not menu.
    DEFAULT VALUE: |
    avada_header_contact_info_email avada/templates/header.php Applied to the email address in top header.
    DEFAULT VALUE: %s
    fusion_sharing_box_tagline avada/includes/avada-fucntions.php Sets a custom sharing box tagline. This will override the setting in Theme Options.
    DEFAULT VALUE: “Share This Story!” (can be set in Theme Options)

    Grid Column Resizing

    06/15/2016

    For Portfolio and Blog Grid Columns, the amount of columns can be freely selected and range from 1-6 columns. However, the amount of columns that will display depends entirely on the available width of the page. This is general responsive behavior and is completely normal. For example, if you select Portfolio 5 Column and have a site width of 1100px, then you will see 5 columns of images when viewing it on normal size desktop screens, but will see less when viewing it on smaller screen sizes.

    The theme will continuously recalculate the size of the columns when you resize the window until it reaches a breakpoint. When it reaches a breakpoint, it will automatically move 1 column to the next row. So 5 columns breaks down to 4 columns, then 3 columns, then 2 columns and all the way down to 1 column on mobile sizes. This is normal.

    Grid Framework Responsive Breakpoint

    As explained above, the theme will continuously recalculate the size of the columns when you resize the window until it reaches a breakpoint. You can manually set a responsive breakpoint for the grid to control when it will start to break into smaller amount of columns. Please take note, however, that further breakpoints are calculated automatically. To learn more about this option, please view our Responsive Breakpoints article.



    WP Retina 2x

    06/15/2016

    The WP Retina x2 plugin by Jordy Meow is a useful plugin and the best method to ensure images are Retina Ready. Below is a brief overview of the plugin’s interface, as well as a guide on how to upload an image and generate Retina Ready versions. In addition, you can check out the WP Retina 2x website for extra information and FAQ’s.

    What Is Retina?

    The basic concept of a Retina image is that an image twice the size of a standard web image will be displayed on screen. On a non-retina device an image will be 100px X 100px whereas a Retina device will display the same image but at 200px X 200px. Apple devices use this branded concept for Retina devices like iPad’s, iPhones and Laptops having approximately twice the pixel density of a non-retina device. According to the plugin developer, this plugin has also been tested and does work on High-DPI devices.

    IMPORTANT NOTE – Before proceeding, please ensure you have installed and activated the WP Retina x2 plugin. You will then see a RETINA option under the WP Media dropdown in the left sidebar.

    WP Retina x2 Interface

    A. Bulk Generate Button – Auto-generate Retina Ready versions of all your images that fit the size requirement.

    B. Bulk Delete Button – Delete all Retina Ready versions that have been generated by the plugin.

    C. Media Sizes Column – In this column, you can find the various areas where your image may appear. Just hover your cursor over the various boxes, and wait until the name of the area pops up. These small squares can also be different colors, which represent different statuses; Blue, Red and Yellow.

    • Blue means a Retina Ready version of the image is already available.
    • Yellow means that there is a Retina Ready version available, however, you still need to generate it.
    • Red means a Retina Ready version cannot be generated from the uploaded image.

    D. Generate Button – Generates the Retina Ready version, if available.

    E. Ignore Button – Ignore any issues related with the image and remove it from the Issues tab.

    F. Details Button – Shows details about the image. Please note that this is available for Pro Versions only.

    How To Generate Retina Ready Versions

    Step 1 – Upload a new image by going to Media > Add New. To ensure all 16 image sizes are retina ready, you would need to upload an image that is at least 2048×2048. However, if you are only using an image in a specific area, then you can only upload an image for that size and ignore the other sizes. This purely depends on how and where you will use each image.

    Step 2 – Go to Media > Retina to access the plugin.

    Step 3 – Locate the image you’ve just uploaded in the Thumbnail and Base Image Columns. In the same row, you will see small boxes that represent each 16 Retina Image included with the theme under the Media Sizes column. Make sure all the boxes are Blue. If any are Red, this means your image is not large enough to generate a Retina Image for that area. You can hover over the box to find out which area this is.

    Step 4 – If any of the small boxes are Yellow, Press the Generate button to generate the Retina Ready image. Once this is done, the same box should now be Blue, which means a Retina Ready image has been generated.


    Retina Settings

    You can also access more settings for the WP Retina x2 plugin by going to Settings > Retina on your WP Admin sidebar. Once there, you’ll find 3 tabs named Basics, Advanced and Pro. Continue reading below to learn about the settings within each tab.

    Basics

    A. Disabled Sizes – Check the corresponding boxes of the sizes that will not have their retina equivalent generated.

    B. Auto Generate – Check this box if you would like to generate retina images automatically when images are uploaded or re-generated. The sizes checked under the ‘Disabled Sizes’ option will be skipped.

    C. Full Size RetinaThis is only available in the Pro Version. A retina version for the full size image will be considered required.

    Advanced

    Most settings here are recommended for regular image uploads and can be left to the default settings. Some settings are also only available if you’re using the Pro Version of WP Retina x2 plugin. Settings here include the method of how retina images are delivered, the quality of Image Compression, PictureFill, Admin Screen and Mobile settings.

    Pro

    The Pro tab is where you can enter your Pro Version serial number, if you have one. If you would like to get the Pro version of the WP Retina x2 plugin, you can follow this link.


    Fixed Mode For iPad Portrait

    06/15/2016
    IMPORTANT NOTE – This option has been removed for Avada version 3.8.7.
    The Use Fixed Layout for iPad Portrait option located inside the General tab in Theme Options was deprecated in versions 3.8.6 and 3.8.6.1 and has now been removed in Avada version 3.8.7. For those who wish to still use the iPad fixed mode option, we have moved it into an external plugin that you can download below. Please continue reading below for more information on alternatives you can use.

    Alternatives To The Fixed Layout Option:

    • It is highly recommended to use the ‘Responsive Design’ option located in Theme Options > General tab. This option enables the responsive design features globally and allows the site to adapt to the exact size of the iPad orientation.
    • Alternatively, you can uncheck the ‘Responsive Deisgn’ option to use the fixed layout which will show the regular desktop version on all devices, in other words the non-responsive mode.
    • If you’d still like to use this feature, you can download our plugin below.
    Download Our Plugin Here

    Retina Ready

    06/15/2016

    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 continue reading below for more information about Retina images.

    Two Sets Of Images That Can Be Retina Ready

    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.

    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). Whether or not the User Images are Retina Ready depends solely on you, the user.

    Blog/Portfolio Retina Featured Images

    In WordPress version 4.4, they’ve introduced ‘Responsive Images’. In Avada version 4.0, we improve this feature even further for automatically added images that use full featured image sizes for blog grid, blog timeline, blog large without a sidebar and portfolio grid that uses “auto” image sizes. These changes have also been added to recent work shortcode, and the related posts and related projects. For blog medium or large layouts, or portfolio pages with “fixed” images, they’re not affected as they are already performance optimized due to being specific cropped image sizes. To learn more about this, please read our WP srcset Changes In Avada article here.

    The WP Retina 2X Plugin For User Images

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

    Click Here To View WP Retina 2x Plugin Information

    Other Images Such As Logos and Favicons

    Some images such as the Logo and Favicons need to be uploaded via the Avada > Theme Options > Logo panel. 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 Retina Logo field.

    How To Re-Order Posts

    06/15/2016

    By default, WordPress orders posts and custom posts types by their publish date. These include blog posts, portfolio posts, FAQs, and the like. The Avada theme also reinforces this order with Fusion sliders and Elastic sliders. To learn how to re-order posts and custom post types, please continue reading below.

    Posts & Custom Post Types

    Below are the posts and custom post types that you can re-order.

    • Blog Posts – Blog posts found in the ‘Posts’ tab.
    • Media Posts – Media posts found in the ‘Media’ tab.
    • Portfolio Posts – Portfolio posts found in the ‘Portfolio’ tab.
    • FAQ Posts – FAQ posts found in the ‘FAQs’ tab.
    • Orders – WooCommerce orders found in the ‘WooCommerce’ tab.
    • Coupons – WooCommerce coupons found in the ‘WooCommerce’ tab.
    • Fusion Slides – Fusion slides found in the ‘Fusion Slider’ tab.
    • Elastic Slides – Elastic slides found in the ‘Elastic Slider’ tab.
    • Events – Events Calendar events found in the ‘Events’ tab.
    • Venues – Events Calendar venues found in the ‘Events’ tab.
    • Organizers – Events Calendar organizers found in the ‘Events’ tab.

    Re-Order Posts Manually

    Because the posts are ordered by their publish date by default, you can manually manipulate your posts publish dates to get them in the order you’d prefer. The post with the oldest date appears last, and the post with the earliest date appears first.

    Step 1 – Navigate to the posts you’d like to re-order. For example, blog posts in the ‘Posts’ tab.

    Step 2 – Hover over a post, and you’ll see the ‘Quick Edit’ link. Click this to bring up the main details of a post, such as title, slug, date, and the like.

    Step 3 – In the ‘Date’ field, change the date and time accordingly.

    Step 4 – Repeat steps 2-3 for all the posts you’d like to re-order.


    Using Post Types Order Plugin

    If you have a lot of posts to re-order and can’t do it manually, you can use the Post Types Order plugin. This plugin is very useful and can let your re-order most posts and custom post types. Continue reading below to learn how to install and use this plugin.

    How To Install The Post Types Order Plugin

    Step 1 – Go to the Plugins > Add New tab of your WP admin sidebar.

    Step 2 – In the search bar on the upper right side of the screen, search for ‘Post Types Order’. It’ll be the first search result and the plugin created by Nsp Code.

    Step 3 – Once you’ve found the correct plugin, click the ‘Install Now’ button.

    Step 4 – Wait for the plugin to finish installing. Once it’s finished, click the ‘Activate Plugin’ link and wait for the plugin to finish activating.


    How To Use The Post Types Order Plugin

    Step 1 – Go to Settings > Post Types Order tab on your WP admin sidebar to bring up the options for the plugin.

    Step 2 – On this page, you can set which interface to enable or disable. For example, you can choose ‘Hide’ for the Post option to disable the re-order feature on blog posts.

    Step 3 – To re-order posts, hover on the tab of the post you’d like to re-order, then select ‘Re-Order’. For example, if you’d like to re-order your Portfolio posts, hover on the ‘Portfolio’ tab on your WP admin sidebar and select the ‘Re-Order’ option.


    Anchor Scrolling

    10/13/2016

    Using anchors in Avada is a great way to direct your user’s attention to important information at the click of a link. The intention is that when a user clicks the anchor link they will be scrolled smoothly to the information further up/down the page. If the action is not smooth, this means that the JavaScript code isn’t firing and the anchor isn’t set up correctly. Please continue reading below to learn how to set up anchors properly.

    Adding Anchor IDs To Sections

    Before we can talk about Anchor Scrolling, you must first set up your Anchor IDs. Anchor IDs allow you to specifically target a section of a page by adding them to the start of those sections. There are 2 common ways of adding Anchor IDs depending on the section you’d like to target. To learn about these two methods and when to use each one, continue reading below.

    ‘Name Of Menu Anchor’ Option In Containers

    The first method of adding Anchor IDs is to use the ‘Name Of Menu’ option located in Container elements. This option lets you add an Anchor ID into the Container itself. When using this method, the user will scroll to the beginning of the Container. If you just want to generally point your users to a section, then use this method.

    Step 1 – Create a new page or post, or edit an existing one.

    Step 2 – Add your content by adding Containers and selecting your desired column layouts, then adding the Elements into the columns. Keep going until you’ve added all your desired content.

    Step 3 – Now determine which Containers you’d like to target. On your chosen Container, click the ‘Container Settings’ icon to bring up it’s options window.

    Step 4 – Under the ‘General’ tab, locate the ‘Name of Menu Anchor’ option. In the text field, enter a unique Anchor ID. For example, aboutsection.

    Step 5 – Once finished, click ‘Save’. Repeat steps 3-4 for all the different Containers you’d like to target.


    Menu Anchor Element

    The second method of adding Anchor IDs is to use the Menu Anchor element, this allows you to target a specific section. For example, if you’d like to target specific content, then you would place a Menu Anchor element directly above it. That way, the user scrolls directly to the content you’d like them to see rather than just the beginning of the section it’s part of.

    Step 1 – Create a new page or post, or edit an existing one.

    Step 2 – Add your content as normal then determine the content on the page you’d like to target.

    Step 3 – Now we need to add the Menu Anchor element. To do this, add a ‘1/1’ Column directly above the content you’re targeting by clicking the ‘+ Columns’ button on the lower right side of the Container.

    Step 4 – Once you’ve added the ‘1/1’ column, click the ‘+ Elements’ button to bring up the Elements window. Locate the ‘Menu Anchor’ element and click it to bring up it’s options window.

    Step 5 – In the ‘Name’ field, enter a unique Anchor ID. For example, aboutme.

    Step 6 – Once finished, click ‘Save’. Repeat steps 3-5 for all the different content you’d like to target.


    Once you’re finished adding your Anchor IDs, it’s time to add your Anchor links. There are multiple ways to add Anchor Links into your content depending on where you’d like to place them. Continue reading below to learn more about each method, and when to use them.

    When you use anchors on your menu items, it will always automatically scroll to the corresponding section. To learn how to create one page websites or how to use anchors on your menus correctly, please read our Setting Up One Page article. If you want to use anchor links as well as normal links on your site, please read our One Page Menu With Multi-Page Links article.

    You can add anchor links using the One Page Text Link element. This element is a Content Based Element and can be inserted via the WordPress Content Editor. It can be used with any basic HTML elements like plain text and images. Continue reading below to learn how to add a One Page Text Link element.

    Step 1 – Set up your Menu Anchors as instructed in the ‘Adding Anchor IDs To Sections’ section above.

    Step 2 – Add any element that allows for regular text to be inserted via the WordPress Content Editor. For example, the Text Block element.

    Step 3 – Click the ‘Settings’ icon on the Text Block element to bring up the Element Settings window.

    Step 4 – Locate the WordPress content editor field. On the toolbar, you’ll find the Element Generator icon which looks like the Fusion Builder logo. Click the Element Generator to bring up the selection window.

    Step 5 – Locate the ‘One Page Text Link’ element, then click it to bring up it’s options window.

    Step 6 – In the ‘Name Of Anchor’ option, enter the anchor name of the section you’d like to link to with a hashtag ( # ). For example, if your anchor is aboutme, then you’ll need to enter #aboutme.

    Step 7 – Once finished, click ‘Insert’. You can then add content into the Text Block element as normal. Once you’re done, click ‘Save’ to save your changes.


    Adding Anchor Links As Classes

    When you’re not using menu items or can’t use a One Page Text Link element, then you can try adding a custom class to the anchor itself. There are two classes you can add for different circumstances. These two classes are fusion-one-page-text-link or fusion-menu. Continue reading below to learn when to use each one.

    fusion-one-page-text-link class

    You can add the fusion-one-page-text-link class to any link you add to Text Block elements, Checklist elements, Slider elements, etc. Basically, anytime you add a <a href></a> tag, you can also add class=”fusion-one-page-text-link” into the <a href></a> tag. For example:

    <a href="#aboutme" class="fusion-one-page-text-link">Click Me!</a>

    fusion-menu class

    You can use the fusion-menu class if you’re adding anchor links to elements that has a ‘Link’ option available. For example, elements such as Image Frames, Countdowns, Image Carousels, Content Boxes and etc. To set this up, insert the anchor link into the ‘Link URL’ option then the fusion-menu class in the ‘Class’ option. To illustrate, refer to the image to the left.


    Linking To A Section On Another Page

    If you’re linking to a section on another page from another page, website, or an email, the process is mostly similar, however you’ll need to insert an Absolute Link rather than just a Relative Link. Continue reading below to learn how to correctly link to a section on another page.

    Step 1 – Set up your Menu Anchors as instructed in the ‘Adding Anchor IDs To Sections’ section above.

    Step 2 – Choose the method of how you’ll insert the anchor link. Choose via a menu item, One Page Text Link element, or manually adding classes and follow the corresponding steps above.

    Step 3 – Instead of simply entering the anchor name ( #aboutme ), you’ll need to enter the entire URL, your anchor name, then an underscore ( _ ) after the hashtag ( # ). For example, http://www.yoursite.com/#_aboutme.

    Step 4 – Pay special attention to the underscore ( _ ) in the URL because it won’t scroll to the targeted section properly without it.


    Setting Up A Staging Site

    06/15/2016

    A staging site is a local setup on your own machine where you can build your site, or where you can make test changes. Having a staging site is an important process that allows you to experiment with your ideas in a local environment. Please continue reading below for more information on staging sites and how to set it up.

    How Is A Staging Site Useful?

    If you’re just starting to build a site, a staging site allows you to experiment with the design and layout of your site. If you already have a live site, you can create a staging site that is an identical copy of your live site, and test your changes there. Having a staging site allows you to test major layout and content changes without affecting your live site. You can also test plugin and theme updates. If there are any issues or any section of your site breaks, you don’t have to worry about your live site breaking and having some downtime. Once you’re happy with the changes you’ve made to your staging site and would like to make those changes live, you can simply migrate your local staging site to your live one.

    How Does Licensing Work For A Staging Site?

    Please refer to our Licensing article to learn more about Envato’s licensing policies.

    Important Links

    Below are important links and detailed articles that will help you setup a staging site and how to move it to your live site. Please read them carefully to learn more about staging sites.

    Setting Up Google Maps API Key

    06/24/2016

    As of June 2016, Google has issued a new update to the Google Maps APIs Standard Plan. In the new update, Google no longer supports keyless access (any request that doesn’t include an API Key) and has made all future product updates only available for requests made with an API Key. Also included in this update are functionality and performance enhancements. To read Google’s official statement, please read this article.

    How To Generate An API Key

    For your Google Maps to display on your page, you now need to use the Google Maps JavaScript API key. To generate a new API key, please click the button below for Google’s ‘Get A Key/Authentication’ article. Please read it carefully as there are different methods for Standard API users and Premium Plan users.

    Read Google’s ‘Get a Key/Authentication’ Article Here

    Where To Add API Key

    IMPORTANT NOTE – Patch #406523 is only available in Avada version 4.0.3. Please update to this version to be able to apply the patch, or update to the latest version when available.

    Step 1Apply Patch #406523 if you’re on Avada version 4.0.3, or update to the latest available Avada version.

    Step 2 – Go to the Avada > Theme Options > Contact Form > Google Map panel.

    Step 3 – Locate the ‘Google Maps API Key’ option and enter your generated API key.


    Encountering An Error/Warning?

    If you’re Google Maps aren’t displaying correctly or are returning errors despite following the above instructions, then something may have gone wrong during the process. To pinpoint what went wrong more accurately, try checking your browser’s console for errors.

    How To Check Your Console For Errors

    For you to be able to accurately diagnose why your Google Map isn’t displaying correctly, you may need to check your browser’s console for errors. To learn how, please see Google’s ‘Checking Errors In Your Browser’ article below.

    Read Google’s ‘Checking Errors In Your Browser’ Article Here

    How To Resolve Errors

    Once you’ve checked your console for errors and determined the specific error message you’re getting, please check Google’s ‘Error Messages’ article for their suggested solution. For example, if you’re getting the InvalidKeyOrNotAuthorizedMapError error, simply look for it on the table provided and you’ll see what the error means under the ‘Message’ column. You can then follow the steps under the ‘Description’ column to solve it.

    Read Google’s ‘Error Messages’ Article Here

    ‘RefererNotAllowedMapError’ Error Message

    If you’ve checked your console and you’re receiving this error message, then the problem may be with the URL you’ve provided when setting up the API Key. When adding a key, you’ll most likely have to include asterixes so all pages on your domain will work. For example, *.example.com/*. See a visual example here.

    Proudly Serving Over 260000 Satisfied Users!