General

03/10/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

05/14/2015

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


Requirements For Avada

05/20/2016

To use Avada, please make sure you are running WordPress 4.5 or higher, PHP 5.6 or higher, and MySQL 5.6 or higher (for legacy environments also PHP versions 4.5.x will work). 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

01/15/2016

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

  • Avada Theme Folder – Contains the Avada.zip and Avada-Child-Theme.zip WordPress theme. The child theme is only for users who make code changes.
  • Extras Folder – Contains the developer documentation for Layer Slider & Revolution Slider. These are not ours, but the plugin developers’ 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.

Guided Tour

05/03/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

03/10/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

05/03/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

05/03/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

05/03/2016
IMPORTANT NOTE – You must first install Avada 3.8 or higher to access this feature. For versions older than 3.8, please click here to see where to register the product.

After you’ve installed the Avada theme, registering your purchase needs to be completed for you to receive theme support and automatic updates. Below is a screenshot of the Product Registration tab once you’ve successfully installed Avada. To know more about the three part process of registering your product, please continue reading below.

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

Step 1 – Signup For Support

Step 1 – Create an account with ThemeFusion by following this link. If you do not have an account you will see boxes to signup.

Step 2 – Enter your ThemeForest Purchase code and click the “Submit Code” button. This retrieves your ThemeForest username and cannot be changed. Where Is My Purchase Code?

Step 3 – Enter the email address & password you wish to use for your account and confirm each of them.

Step 4 – Check the box to agree with our Terms of Services and Privacy Policy. This is required to create a support account.

Step 5 – Click the Register button to complete your registration.

IMPORTANT NOTE – Remember the email address you register with because this is how our Support Team will contact you when you submit a support ticket.


Step 2 – Generate an API Key

Step 1 – Log into your ThemeForest account and hover your username in the top right corner to access the dropdown.

Step 2 – Select the Settings tab from the dropdown.

Step 3 – The My Account page will load. Click the ‘API Keys’ tab which is the last tab on the left side of the screen.

Step 4 – Enter any name in the ‘Label’ field and click the ‘Generate API Key’ button. Your new API key will now appear in the list above. Copy the key to use for Step 3 found below.


Step 3 – Purchase Validation

Step 1 – Once you’ve completed all the steps above, Go to Avada > Product Registration tab.

Step 2 – Enter your ThemeForest Username, ThemeForest Purchase Code, and ThemeForest API Key into the corresponding fields.

Step 3 – Click the Submit button to complete your registration. You will see a success message once your registration is complete.


ThemeForest API Key

05/03/2016

ThemeForest allows you to generate an API key which can be used for various things, like receiving automatic theme updates. The API key can only be generated in your ThemeForest account. Please read below for instructions on how to generate an API key.

How To Generate Your API Key From ThemeForest

Step 1 – Log into your ThemeForest account and hover your username in the top right corner to access the dropdown. Select the ‘Settings’ link.

Step 2 – The ‘My Account’ page will load. Click the API Keys tab on the left side.

Step 3 – Enter a name in the ‘Label’ field, and click the ‘Generate API Key’ button. Your new API Key will now appear above.

ThemeForest Purchase Code

03/10/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

03/10/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

04/21/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 to receive auto updates.
  • Support tab – This tab is where you can find links to our documentation, knowledgebase, and community forum. You will also find a link to submit a support ticket.
  • Install Demos tab – This tab is where you can preview our pre-made demos, and install them to your own copy of Avada.
  • Plugins tab – This tab is where you will find Avada’s 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 various options.

Product Registration tab

Under the Product Registration tab, you will find 3 simple steps to get you started with the theme! Under this tab, you will also find three text fields; ThemeForest Username, ThemeForest Purchase Code, and the API key. Enter these values to officially register your Avada copy and gain access to automatic theme updates.

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 read our Avada Patcher article here. Also on this tab, you’ll find all the links you need to learn more about the theme, how to solve any issues you might run into, and how to get in contact with our Support Team. These links include; a link to submit a support ticket, a link to the community forum and Facebook group, and a link to our documentation, knowledgebase, and video tutorials. 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

Under the Install Demos tab, you will find all the Avada theme demos that we’ve created to get you started. These Avada theme demos include the Classic demo, Gym demo, Modern Shop demo, Classic Shop demo, Landing Page demo, Forum demo and much more. Before installing any of our demos, please make sure all our included plugins are installed and activated.

Plugins tab

Under the Plugins tab, you will find all the included Plugins with Avada such as Revolution Slider and Layer Slider. You can install, activate and deactivate these plugins on this tab, as well. Aside from Avada’s included plugins, you will also find all the exciting new products and projects by ThemeFusion! To stay tuned to any projects currently being created, sign up for our newsletter so you can be notified when they are released.

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

05/03/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

03/10/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

Support Desk

04/28/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 3 tabs; the tickets tab, the purchase codes tab, and the profile tab. Please view below to learn more about the new 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, then sign in with your username and password 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 3 tabs; the Tickets tab, the Purchase Codes 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.


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.


Theme Customization

03/10/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; Tweaky Works and WerkPress. Both have their own unique offerings and can provide the services you need to customize your theme. Click the images below and fill out the form to receive two custom quotes.

werkpress
tweaky

Installation

03/10/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

01/20/2016
IMPORTANT NOTE – This method involving the Welcome Screen is for Avada 3.8 or higher. You can still install via WP on older versions.

How To Install Avada via WordPress

Step 1 – Navigate to Appearance > Themes.

Step 2 – Click Install Themes and click the Upload button.

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

Step 4 – Activate the newly installed theme by going to Appearance > Themes and clicking the Activate button.

Step 5 – Once you activate Avada, you will be redirected to our Welcome Screen. You will then see a notification message to install the required plugin called Fusion Core.

Step 6 – In the notification message, click the ‘Go Install Plugin’ button to go to the Plugins tab where you can install and activate the required & recommended plugins.

Step 7 – Simply click the Install button on each plugin to start installing them. After you’ve installed them, an Activate button will appear which you can click to start activating them.


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

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

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

FTP Installation

01/20/2016
IMPORTANT NOTE – This method involving the Welcome Screen is for Avada 3.8 or higher. You can still install via FTP on older versions.

How To Install Avada Via FTP

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

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

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

Step 4 – Activate the newly installed theme by going to Appearance > Themes and clicking the Activate button.

Step 5 – Once you activate Avada, you will be redirected to our Welcome Screen. You will then see a notification message to install the required plugin called Fusion Core.

Step 6 – In the notification message, click the ‘Go Install Plugin’ button to go to the Plugins tab where you can install and activate the required & recommended plugins.

Step 7 – Simply click the Install button on each plugin to start installing them. After you’ve installed them, an Activate button will appear which you can click to start activating them.


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

Plugin Installation

04/18/2016

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

Plugins Included With The Avada Theme

  • Fusion Core – This is our companion plugin that is required to use Avada. Please make sure this is always installed and activated.
  • Layer Slider – This is a premium slider plugin created by Kreatura.
  • Revolution Slider – This is a premium slider plugin created by ThemePunch.
IMPORTANT NOTE
All included plugin updates are provided with theme updates. When the theme update is ready, you will be prompted via the Avada plugins tab.

Plugin Installation & Update Notifications

When you install or update Avada, you will receive a WordPress notification asking you to install or update the Fusion Core plugin. Please follow the on screen prompts to install, activate or update.

IMPORTANT NOTE
If you have updated Avada and are utilizing the Layer/Revolution Slider plugins, you will need to update these plugins. You will see a orange update notice for each of them in the Avada plugins tab.

Plugins Used in Various Demos

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

Common Issues & Questions

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

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

04/21/2016

There are two ways to update your theme. The first and easiest method is to simply register your purchase to make use of our automatic theme updater method. The second is the traditional method, using FTP, that involves manual steps. Before you update, it is best practice to always check our update notes and make a backup of your theme folder, files and database. See the information below for each method.

Before You Update, Always Check The Important Update Information

Click Here To View The Important Update Information

Method 1: The Auto Updater

IMPORTANT NOTE – This method is only for Avada 3.5 or higher.

The easiest way to update your theme is to use our Automatic Theme Updater, which can only be used after you register your product. Once you have registered the product and whenever we release a theme update, you will receive a notification message in your WordPress Dashboard > Updates tab. When the update is available, you will still need to select the Avada Theme and click the ‘Update button’ for the update process to be completed.

Auto Updating The Theme – Once you have setup the auto updater, you will be notified via the WordPress Dashboard > Updates tab when a new theme update is ready. WordPress auto checks for new updates every 12 hours, or you can click the ‘Check Again’ button to force WordPress to fetch all available updates.

Updating The Plugins – After you update the theme, you will see a notification message to update the required Fusion Core plugin. Follow the on screen prompts to update it. Navigate to the Avada > Plugins tab in your WordPress Dashboard to complete the process.


IMPORTANT NOTE
You must first register your product to use the automatic theme updater. WordPress auto checks for new updates every 12 hours, or you can click the ‘Check Again’ button to force WordPress to fetch all available updates.
Click Here To Find Out How To Register Your Product

Method 2: Manual Update

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

How To Download New Theme Files From ThemeForest

Step 1 – Log into your ThemeForest account and navigate to your Downloads tab. Find the Avada theme purchase.

Step 2 – Click the Download button choose to either download the ‘Installable WordPress file’, which is just the WordPress file, or choose to download ‘All Files & Documentation’ which is the entire package.

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


How To Update Avada Using FTP

IMPORTANT NOTE
First, backup your theme files and database and then delete your old theme folder. This ensures that any deprecated files are not present which could lead to update issues. Also make sure that the folder is named Avada

Step 1 – Log into your server and then navigate to the wp-content > themes folder and backup your Avada theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost or erased.

Step 2 – Retrieve the Avada.zip file from your new ThemeForest download and extract the file to get the updated Avada theme folder.

Step 3 – After extracting the updated Avada theme folder, simply drag and drop the new Avada theme folder into wp-content > themes folder location.

Step 4 – Lastly, update the Fusion Core plugin. You will see a notification message notifying you that a new version of the Fusion Core plugin is available and ready for update. Follow the onscreen prompt to complete the plugin update process.


How To Update Avada Via WordPress

IMPORTANT NOTE
Always backup your theme files and database before updating via the WordPress Dashboard

Step 1 – First you need to deactivate your current Avada theme located in the WP Dashboard > Appearance > Themes section. To deactivate, simply switch to a different theme for example the default WordPress Twenty Sixteen theme or any other.
Please note: Your content will not be lost or erased.

Step 2 – Now you are ready to delete the old Avada theme. To do this, hover with your mouse over the theme thumbnail, click ‘Theme Details’ and in the corresponding window click the red ‘Delete’ button.
Please note: Your content will not be lost or erased.

Step 3 – Retrieve the new ‘Avada.zip’ file from your ThemeForest account downloads section. If you have downloaded the Main Files from ThemeForest, you need to unzip the master file to access the secondary Avada.zip file.

Step 4 – To install the Avada update navigate to WordPress Dashboard > Appearance > Themes – click the ‘Add New’ button at the top of the screen, and then click ‘Upload Theme’ and then browse to select the Avada.zip file located on your computer.

Step 5 – Once the upload completes click to activate Avada.
Please note: Your content will not be lost or erased.

Step 6 – Lastly, update the Fusion Core plugin. You will see a notification message in the WordPress Dashboard prompting you to update the Fusion Core. Please follow the onscreen prompt complete the update process.


Common Issues & Questions

1. Are You Sure You Want To Do This?

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

2. Theme install failed ‘Destination Folder Already Exists’

This happens because WordPress only allows you to have one theme with the same name when uploading the theme via WordPress admin. We recommend you to setup the auto updater (see info above) to get around this, or you can update the theme via FTP.

Important Update Info

04/23/2016

Avada 4.0 is a major update with an incredible step forward in option management. It is now easier than ever to achieve your design ambitions using the brand new theme options panel. Fusion Theme Options are more intuitive, faster, easier to use and logically organized. And that’s not all, there are plenty of other features, options and code improvements packed into this amazing update. Please carefully 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 v4.0 Important Information

If theme features like Fusion Builder, Fusion Slider, Mega Menu, Font Awesome Icons, etc, are not working or displaying on your website after the update, please navigate to theme options > advanced > theme features and ensure the feature is turned on. You can also re-trigger migration on Avada > Support tab in the backend which will also turn them back on.

1. We Recommended Updating To v4.0 From v3.8 or Higher

We recommend to update to Avada v4.0 from Avada 3.8 or higher. It is not required, however significant changes have been made from 3.8 onward and have continued in Avada 4.0. with a new theme options panel. If you are below Avada 3.8, you can download Avada 3.9.4 from our support site to update to that version first, then update to version 4.0.

WHAT DOES THIS MEAN FOR YOU?
If you are on Avada v3.7.3 or lower, you can first update to Avada 3.9.4 by visiting this link in our community forum. This step is not required, only recommended.

2. Theme Option Migration & Fusion Core Update

Avada 4.0 has a brand new theme option panel powered by Redux. Due to the new panel, it is necessary for previous Avada installations to migrate options over to Redux. A migration screen will show once Avada 4.0 is active. The migration runs through steps and completes, then you must go and update the fusion core plugin.

WHAT DOES THIS MEAN FOR YOU?
When you update to Avada v4, your current theme option values will be copied and stored in your database for safe keeping. No data is lost this way. The extra copy of theme options is then migrated over to Redux so you can enjoy the new options panel. Always make sure you backup your current theme folder before you upgrade. This post explains more information about the migration. The migration can also be manually triggered on the Support tab in the Avada welcome screen. When migration is finished, you will see a large red button telling you to update Fusion Core plugin also. Click it and it will take you to the backend to update fusion core.

3. Theme Option Organization

Avada 4.0 brings an entirely new user interface for theme options. Many of the options that were previously spread out on several tabs are now combined into one control. Because of this, we’ve completely reorganized theme options into logical groupings according to page setup. This new setup makes it much easier to find options and provides faster editing. In addition, there is a new search field that can quickly pull up the option you need with a few keywords.

WHAT DOES THIS MEAN FOR YOU?
Better, more logical option organization that will allow you to make option edits faster and more efficiently. In addition, the search field allows you to quickly find an option based off a keyword. The best way to think about the organization is this … if you wish to find an option dealing with the menu, the option will be on the menu tab. This includes all colors, typography and styling options as well. The only exception are sidebars, all sidebars are controlled on one sidebar tab in theme options.

4. Theme Option Dependency

Theme options are now streamlined with dependent options, this means that only options that work with your current configuration will be displayed. An option that does not work with your current configuration will be hidden. An example of this is on the Header Content tab. If you select Header 1 layout, you will see it hides most of the content options that will not work, like tagline, banner code, etc.

WHAT DOES THIS MEAN FOR YOU?
More efficient editing! There is no longer a possibility of changing an option value and not seeing it take affect on the front end. Any option that will not work based on your other option selections, will be hidden. As a fallback, you can always see every option through an option search.

5. Social Icon Colors

Avada 4.0 has a new setup for social icons. Previously you could set one color value that applies to all icons, or set an individual color per icon. We’ve made this incredibly easier in 4.0 with our new color type option. The new color type option allows you to choose “Custom” or “Brand”. Custom allows you to enter one color value which is applied to all icons, just like in previous versions of Avada. Brand colors will automatically set a different color per icon and it pulls the exact color value for each network based on their brand guides.

WHAT DOES THIS MEAN FOR YOU?
A major increase in efficiency for creating custom social network colors. There is no longer a need to set an individual color per network by using #fff|#000|#eee, simply select “Brand” colors and the approved brand colors from each social networks will be applied.

6. Custom Social Icon Boxed Mode

With the new social icon setup in 4.0, custom icons must be uploaded with a box if you wish to use them boxed. Any custom icon uploaded will display exactly as you upload it regardless if you choose “boxed” in our settings. Only our built in icons can utilize the boxed mode since they are a icon font, and not an image.

WHAT DOES THIS MEAN FOR YOU?
If you are using a custom social icon and want it boxed, you will need to add a box to the image you upload. This keeps the interface simpler and shows a true result for what is uploaded. In addition, you can now upload unlimited custom icons, and custom fonts. And more social network icons are being added to the theme by default in the future. Xing has beed added in 4.0

7. Retina Width & Height Fields Removed

Previously you were required to enter the width and height of the normal 1x logo image so the 2x retina logo could display properly. In Avada 4.0 we have removed that requirement and auto calculate the correct size for you.

WHAT DOES THIS MEAN FOR YOU?
Only good things! There is no longer a need to manually enter values of the 1x logo. We automatically pull the correct values and ensure the size displayed is 100% correct for regular 1x and retina 2x logos.

8. Widget Sections Moved To Widget Area

Avada’s widget sections previously were located in their own section of the WordPress admin. Avada v4.0 has them directly at the top of the main WordPress widget area.

WHAT DOES THIS MEAN FOR YOU?
Faster, easier creating, editing, managing of widget sections and sidebars. Everythign is in one place!

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

05/09/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

03/22/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

05/06/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

05/17/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

Demo

03/10/2016

When you first install any WordPress theme, it will not contain all the extra content that you might have seen in the live demo. There are two ways you can import the Avada Demo Content; the entire demo with all settings through our Fusion Theme Options Importer, or only import individual pages. Usually you have to import an XML file, which can be troublesome. We’ve made it easier by creating a Fusion Theme Options Demo Content Importer.

Please Note These Important Items About The Demo Content

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

Avada Demos

04/29/2016

One of the best part that come with the Avada theme are the professionally designed Avada demos. We currently have several Avada demos in place and we are constantly adding new ones with each Avada update. We also have a Demo Installer that allows you to import any demo with a single click. Please continue reading below to learn more about our Avada demos.

Click Here To View All Our Live Demos

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.

Important Links

  • How To Import Avada Demos (Video) – Our tutorial video on how to import Avada Demos. Please watch in HD Quality and Fullscreen size for optimal viewing.
  • How To Import Avada Demos (Article) – Our documentation article on how to import Avada Demos. Please read for step by step instruction on how to import demos.
  • Alternative Demo Import – In the event that your demo import fails, please read our Alternate Demo Import article.
  • Manual Demo Import – In the event that both method above fails, please read our Manual Demo Import article.
  • Remove Demo Content – Read this article to learn how to properly remove old demo content in the event that you’d like to try a different demo.

Import All Demo Content

04/21/2016

The easiest way to import our demo content is to use our Demo Content Importer. 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 , it will not delete current menus but configure our demo menus, and it will not replace but add sliders. It will, however, replace Fusion Theme Options, Reading settings and Widget settings. To import our demo content, please see the steps below.

Important Items To Check Before Import

IMPORTANT NOTE 1: Check the System Status tab on the Welcome Screen to ensure your server meets all requirements for a sucessful import. Settings that need attention are listed in red.

IMPORTANT NOTE 2: 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.

Avada Offers Multiple Demos To Import

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

How To Import Avada Demos

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

Step 2 – Navigate to the Avada > Install Demos tab in your admin sidebar. Select the Avada demo you wish to import. Click the Preview button to view the live demo, or click the Install button to import it.

Step 3 – It can take a few minutes to import everything. Please be patient and wait for it to complete. Once it loads, you will see a Success message below the tabs.

Step 4 – You will then see a message to Regenerate Thumbnails. Click the link, then click the Install button to install the plugin. Then choose to activate the plugin.

Step 5 – Go to Tools > Regen. Thumbnails tab, and choose to Regenerate All Thumbnails. This may take a moment to complete, depending on server speed.

IMPORTANT NOTE – Step 4-5 is not required, it simply regenerates demo images into the appropriate sizes for various areas. However, all users replace our images with their own so this step can be skipped if you wish.


Common Issues & Questions

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

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

2. Demo Import Fails: “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.

3. 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. You can also choose to import the individual elements located at Avada > Framework > plugins > Importer with our Manual Demo Import Method.

4. Demo Content Duplicated

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

Method 1: WP Reset Plugin – This plugin is the fastest way to get rid of content. However, it will remove all content from your database and leave the default theme activated. It does not remove plugins, but will deactivate them and remove all pages, posts, menus, sliders, widget data, 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.

5. Demo Blog Posts Show Up In Your Blog Feed

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

6. Where Are The Rest of The Sliders?

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

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

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

Import Avada Classic Pages

07/17/2015

If you do not wish to import all of our Avada Classic Demo Content, you can import individual pages. This can be done in two ways; with our Fusion Builder under the Pre-Built Templates tab, or from the individual page links below. Below are the individual pages from the Avada Classic demo that were made with shortcodes. Please note, blog, portfolio, contact, faq, sidebar pages are not included since they are not made with shortcodes. To create those pages, please refer to those sections of our documentation. To copy a demo pages, follow the step below.

Important Things To Note

Fusion Page Options Will Not Be Set – These pages that you copy do not include Fusion Page Option selections that are set on our demo pages. For example, sliders will not be applied unless it is a slider shortcode in the page content, sidebars will not be assigned, page padding not applied, etc. This page content only includes the content in the post editor field. You will need to set any Fusion Page Options that you desire after you copy the page.

Page Template Will Not Be Set – The page template set in the page attributes box will need to be set. Please refer to this post to understand which page template you need to use. Most of the pages below use the 100% width Template or Default template.

How To Copy An Individual Demo Page

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

Step 2 – Create a new page in your WordPress admin, then select the page template you wish to have in the page attributes box.

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

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

Import Avada Agency Pages

04/18/2016

If you do not wish to import all of our Avada Agency Demo Content, you can import individual pages. Below are the individual pages from the Avada Agency demo that were made with shortcodes. To copy a demo pages, follow the step below.

Important Things To Note

Fusion Page Options Will Not Be Set – These pages that you copy do not include Fusion Page Option selections that are set on our demo pages. For example, sliders will not be applied unless it is a slider short code in the page content, sidebars will not be assigned, page padding not applied, etc. This page content only includes the content in the post editor field. You will need to set any Fusion Page Options that you desire after you copy the page.

Page Template Will Not Be Set – The page template set in the page attributes box will need to be set. Please refer to this post to understand which page template you need to use. Most of the pages below use the 100% width Template or Default template.

Contact Form 7 Plugin Is Used – You will need to download and install the free Contact Form 7 plugin if you wish to have the forms used on Avada Agency Demo. We cannot include that plugin with the theme so please do it separately. There are 2 forms we use on the demo. The form data and instructions for how to import them are below.

How To Copy An Individual Demo Page

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

Step 2 – Create a new page in your WordPress admin, then select the page template you wish to have in the page attributes box.

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

Home About Us Services Our Work Case Study 1 Case Study 2 Case Study 3 Blog Contact Us

Import Contact Form 7 Forms

09/23/2015

There are multiple Avada demos that utilize the Contact Form 7 plugin. There are two ways to import the forms, see below for information on how to import Contact Form 7 forms.

Method 1 – Import the Forms With The Full Demo Import

When you import one of our demos through the Avada > Install Demos section, the Contact Form 7 forms can also be included. To ensure they are included, you need to install and activate Contact Form 7 plugin before you import the demos. As long as that is activated before you import, the forms will also import.

Method 2 – Import Individual Forms

If you’re not able to import the entire demo and only need an individual form, you can copy the desired form data below, then paste it into a new form field using Contact Form 7.

Step 1 – Install and activate the free Contact Form 7 plugin. You will then see a “Contact” item in your admin sidebar.

Step 2 – Click on the Contact sidebar item and select Add New. Give your form a name. This name will be used in the shortcode that has to be inserted on the page you use it on.

Step 3 – Open the form content below of the form you wish to use. Copy the content and paste it into the field of the new form you just created. Click Save.

Step 4 – Once saved it will generate a short code. Copy that shortcode and insert it on the page that has the form. Be sure to use the exact short code that you generated.

Agency Contact Page Form Agency Popup Modal Form App Page Form Architecture Contact Page Form Architecture Popup Form Fashion Contact Page Form Hosting Contact Page Form Hotel Contact Page Form Hotel Newsletter Form Law Contact Page Form Law Ask An Expert Form Law Career Page Form Lifestyle Newsletter Form Lifestyle Sidebar Form Travel Contact Page Form

Alternate Demo Method

05/23/2016

This alternate demo import for Avada 4.x will be available soon

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 alternative method.

How To Import Demos Through The Alternate Method

Step 1 – Install the required and recommended plugins for the demo you want to import; Fusion Core, Revolution Slider, Layer Slider, WooCommerce, and Contact Form 7. Avada Classic demo requires all of the plugins. Agency, App, Cafe, Fashion and Travel demos only require Fusion Core and Contact Form 7 plugin.

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 WP Admin -> All-in-One WP Migration -> Import page.

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. You will then be automatically logged out and you will be asked to update the WordPress Database. Click the Update WordPress Database button.

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

Step 9 – Once logged back in, you can change your username/password back to your unique credentials. All done!


The Alternate Method Demo Backup Files:

Please note that the files below will only work for Avada versions 4.0 or higher.

Manual Demo Import

05/20/2016
IMPORTANT NOTE – This process only works for Avada versions 3.9.4 or lower. We’re currently working on fixing this for versions 4.0+.

In the event that your host will not make changes, or you cannot get the demo content to import, you can then import the individual elements manually. Continue reading below to learn how to manually import demo content.

Check The Following Plugins Before Import

  • Fusion Core – This plugin is required and must be installed and activated at all times.
  • Revolution Slider – This plugin is recommended and is only needed if you want to import revolution sliders.
  • Layer Slider – This plugin is recommended and is only needed if you want to import layer sliders.
  • Contact Form 7 – This plugin is recommended and is only needed if there are contact forms outside of contact page template on the demo.

Where To Find Demo Files

For this you will need to log into your server using FTP. To locate the demo files, please navigate to the wp-content > themes > Avada > includes > plugins > importer folder. Within the /importer/ folder you will see individual folders, one for each demo, each of them containing an XML file, the slider files, a theme_option.txt file and a widgets_data.json file.

IMPORTANT NOTE – Please make sure that you upload files from the same folder. For example, if you’d like to import the Agency demo, please only upload files from the agency_demo folder.

How To Import XML Files

Step 1 – In the Tools tab in your admin sidebar, click Import.

Step 2 – On the Import page, select WordPress from the list and install the WordPress Importer Plugin.

Step 3 – Click Choose File, then choose the avada.xml.gz file from your desired demo folder. For example, if you would like to install the Agency Demo, you would install the avada.xml.gz inside the agency_demo folder.

Step 4 – Once you’ve chosen the correct file, click the Upload File and Import button.

Step 5 – Select admin in the dropdown list, and don’t forget to check the ‘Download and Import File Attachments’ checkbox.

Step 6 – Wait until WordPress is finished importing, then click the Have Fun link to return to your dashboard.


How To Import Theme Options Text File

Step 1 – Open the theme_options.txt file from the same folder you got the XML file you’ve just imported.

Step 2 – Copy all of the text file’s contents.

Step 3 – Go to the Theme Options > Backup tab, and paste the text file’s contents into the ‘Transfer Theme Options Data’ field.

Step 4 – Click the Import Options button to import the Theme Options and to save it.


How To Import Slider .ZIPs

How To Import Widget Data

Step 1 – Install and activate the Widgets Settings Importer/Exporter plugin developed by Voce Communications.

Step 2 – In the Tools tab of your WordPress admin sidebar, select the Widget Settings Import option.

Step 3 – Click the Select A File button, and select the widgets_data.json file from the same folder you got the XML and theme option files you’e just imported.

Step 4 – Once you’ve selected the correct file, click Show Widgets Settings.

Step 5 – Click the Select All Active Widgets button first, then click the Import Widget Settings button.

Step 6 – You will receive a success message letting you know you’ve successfully imported the widget settings.


Options

03/10/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

04/18/2016

Options are the backbone of Avada. They 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 in Avada. The Fusion Theme Options, Fusion Page Options and Shortcode Options.

  • Fusion Theme Options – Located in WP Dashboard > Appearance > Theme Options these options are global options that affect everything within the theme.
  • Fusion Page Options – Located within each page and post. These options only apply to the page or post for which they are set.
  • Shortcode Options – Located within each builder element. These options will only affect the single shortcode instance for which they are set.
Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen
IMPORTANT NOTE
Page Options and Shortcode Options will use the Theme Options value if left empty or if the value is default. They will override Theme Options if any other value is entered. This setup gives users maximum flexibility for setting a global theme option, then being able to override it on a page/post/shortcode basis. Please see below for an example of an option that has both a theme option and a page option.

Fusion Theme Options

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

IMPORTANT NOTE
If you choose default for a page option, it will use the selection you have made in Theme Options. Select a different value to override the theme option.


Fusion Theme Options

Below is a screenshot of the Shortode Styling section in Theme Options. The Button Size option is set to Large, thereby all buttons on your website will be displayed as large unless the corresponding button shortcode option is set.

Shortcode Options

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

IMPORTANT NOTE
If you choose default value or leave the Shortcode Option blank, it will use the selection you have made in Theme Options. Insert a different value to override the Theme Option value.


Fusion Theme Options

04/18/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
– 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/Category – 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/Category – 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 Font – Upload as many custom fonts as you wish. Required font files -> .woff, .ttf, .svg, .eot. View here

Shortcode Styling Options – These options affect the Avada shortcodes globally, which can be overridden by each shortcode’s individual settings. 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 shortcode
  • 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 shortcode

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 page templates and portfolio archives, not the recent work shortcode
  • 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 link shortcode or person shortcode.
  • 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 shortcode.
    • 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 shortcode.

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 Options – 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 Option – Add your own custom CSS which will override the theme CSS. In some cases the !important tag may be needed. 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

05/03/2016

Avada is extremely powerful and a lot of that power comes from our individual page meta options, now called Fusion Page Options. Each page you create has a full set of options to choose from allowing you to customize each individual page. Each page you open in your WordPress admin will have a Fusion Page Options box that contains all the different settings. There are several different sections included in the Fusion Page Options box, each with its own title and purpose. Some settings will only work if you use a specific template, for example the Portfolio Options are only to be used if you select one of our portfolio page templates. 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.

IMPORTANT NOTE – we are always adding new options so these screenshots may not reflect the most up to date options.
  • Sliders Options – These options are applied to the slider on the current page. They allow you to select a slider and set it’s position. These options override global options.
  • Page Options – These options override global settings and allow you to individually customize the current page.
  • Header Options – These options override global settings and allow you to individually customize the current page’s header.
  • Footer Options – These options override global settings and allow you to individually customize the current page’s header.
  • Sidebars Options – These options are applied to the sidebars on the current page. They allow you to select a sidebar and set it’s position.
    IMPORTANT NOTE: The Global Sidebars option located in ‘Fusion Theme Options > Sidebars’ must be disabled for these options to take effect.
  • Background Options – These options override global settings and allow you to individually customize the current page’s bacground.
  • Portfolio Options – These options allow you to customize our portfolio page templates and are only to be used if you select one of them.
  • Page Title Bar Options – These options are applied to the page title bars on the current page. These options override global options.
Blog and Portfolio Page Options
  • Blog OptionsDisplayed only on Blog posts. These options override global settings and allow you to individually customize them. View the Blog Options tab here.
  • Portfolio OptionsDisplayed only on Portfolio posts. These options override global settings and allow you to individually customize them. View the Portfolio Options tab here.

Blog Post Options

05/03/2016

In addition to all the standard Fusion Page Options, Avada offers several Post Options for you to use for each blog post. These options allow you to set different settings for each individual post. When creating or editing a post, scroll below the WordPress editing field to find the Post Options 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. Below is a screenshot of each different section included in the Post Options tab for each blog post.

Click Here To View All Fusion Page Options
IMPORTANT NOTE – we are always adding new options so these screenshots may not reflect the most up to date options.

Portfolio Post Options

05/03/2016

In addition to all the standard Fusion Page Options, Avada offers several Portfolio Options for you to use for each portfolio post. These options allow you to set different settings for each individual post. When creating or editing a post, scroll below the WordPress editing field to find the Portfolio Options 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 portfolio post. Below is a screenshot of each different section included in the Portfolio Options tab for each portfolio post.

Click Here To View All Fusion Page Options
IMPORTANT NOTE – we are always adding new options so these screenshots may not reflect the most up to date options.

Typography Options

05/19/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

04/18/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 shortcode options. Please read below to learn about each area that offers column spacing options.

Blog Shortcode With A Grid Layout

One of the shortcodes that includes column spacing settings is Avada’s Blog Shortcode. When setting the Blog Shortcode’s layout to Grid, you can set the column spacing of the blog grid posts by following these simple steps below.

How To Set Column Spacing For Grid Layout

Step 1 – Click the Edit Element icon on the Blog Shortcode, then set the Blog Layout option to Grid.

Step 2 – Locate the Grid Layout Column Spacing option. Set a numerical value (in pixels) that controls the space between blog posts. For example, 20.

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

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

Recent Works Shortcode With A Grid Layout

Another one of the shortcodes that includes column spacing settings is Avada’s Recent Works Shortcode that’s mainly used as a portfolio showcase. When setting the Recent Works Shortcode’s layout to Grid, or Grid with Excerpts, you can set the column spacing of the portfolio grid posts by following these simple steps below.

How To Set Column Spacing For Grid Layout

Step 1 – Click the Edit Element icon on the Recent Works Shortcode, then set the Layout option either to Grid, or Grid with Excerpts.

Step 2 – Locate the Column Spacing option. Set a numerical value (in pixels) that controls space between portfolio posts. For example, 20.

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

IMPORTANT NOTE
Column Spacing for the Recent Works Shortcode only works for the Grid, and Grid with Excerpts Layout.

Image Carousel Shortcode

The Image Carousel Shortcode has a setting for Column Spacing with Avada version 3.8 or above. This option allows you to set the spacing between items. You can set the column spacing for the Image Carousel Shortcode by following these simple steps below.

How To Set Column Spacing For Image Carousel

Step 1 – Click the Edit Element icon on the Image Carousel Shortcode.

Step 2 – Locate the Column Spacing option, then enter a numerical value to set the spacing between columns. For example, 13.

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

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

Column Shortcode

The Column Shortcode also has a setting for Column Spacing. This option plays an important role not just in organizing content, but in creating layouts, as well. You can set the column spacing for the Column Shortcode by following these simple steps below.

How To Set Column Spacing For Columns

Step 1 – Click the Edit Element icon on the Column Shortcode.

Step 2 – Locate the Column Spacing option, then set it to yes, or no. Setting this option to yes allows you to enter a manual pixel value for the padding, while setting this option to no eliminates all margin between columns.

Step 3 – Locate the Padding option, then set a pixel value that represents the padding. For example, 10px. Set a single pixel value to set the overall padding. To set individual padding starting from the top padding going clockwise, enter pixel values separated by spaces. For example, 10px 20px 30px 40px.

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

IMPORTANT NOTE
Setting the Column Spacing option to no strips all padding from the column.

WooCommerce Featured Products Shortcode

The WooCommerce Featured Products Shortcode also has an option for Column Spacing. To learn how to set this option, continue reading below.

How To Set Column Spacing For WooCommerce Featured Products Slider

Step 1 – Click the Edit Element icon on the Woo Featured Shortcode.

Step 2 – Locate the Column Spacing option, then enter a numerical value to set the spacing between columns. For example, 5.

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

WooCommerce Carousel Shortcode

The WooCommerce Carousel Shortcode also has an option for Column Spacing. To learn how to set this option, continue reading below.

How To Set Column Spacing For WooCommerce Carousel

Step 1 – Click the Edit Element icon on the Woo Carousel Shortcode.

Step 2 – Locate the Column Spacing option, then enter a numerical value to set the spacing between columns. For example, 5.

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

Related Posts / Projects

You can also choose to adjust the column spacing between Related Posts and Projects that are displayed below single blog or portfolio pages. You can set the column spacing for the Related Posts and Projects by following these simple steps below.

How To Set Column Spacing For Related Posts / Projects

Step 1 – Navigate to Avada > Theme Options > Extra tab.

Step 2 – Once in the Extra tab, locate the Related Posts / Projects Column Spacing option. Enter a numerical value to set the spacing between columns.

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

Portfolio Page Templates

You can also adjust the column spacing between posts when using any of Avada’s Portfolio Page Templates. You can set the column spacing for Portfolio Page inside the Fusion Page Options box, located below the content editor field.

How To Set Column Spacing For Portfolio Page Templates

Step 1 – In the Page Attributes box to the right, select a Portfolio Page Template in the Template dropdown list.

Step 2 – In the Fusion Page Options below the content editor field, switch to the Portfolio tab.

Step 3 – In the Portfolio tab, locate the Column Spacing option. Set a numerical value (in pixels) that controls space between portfolio posts. For example, 20.

IMPORTANT NOTE
Setting the Column Spacing option to no strips all padding from the column.

Fusion Theme Options

Inside the Fusion Theme Options which is located in Appearance > 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 Recent Works shortcode. Column spacing for the Blog and Recent Works shortcode must be set individually per shortcode.



Image Hover Effects

07/22/2015
IMPORTANT NOTE – This feature is only available in Avada 3.8.5 or higher. These are also different from the Image Rollover Effects for blog and portfolio items

In Avada 3.8.5, you can now add hover effects to images. Choose from Zoom In, Zoom Out or Lift Up. These are sleek and clean hover effects that will make your images feel dynamic. Below is a list of builder elements where the Hover Type option can be used.

  • Image Frame – You can use the Hover Type option to add a hover effect to an image inside the Image Frame.
  • Image Carousel – You can use the Hover Type option to add a hover effect to all images inside the Image Carousel.
  • Slider – You can use the Hover Type option to add a hover effect to all images in the slider.
  • Recent Posts – You can use the Hover Type option to add a hover effect to the featured image.
  • Person – You can use the Hover Type option to add a hover effect to the avatar image.

How To Use Hover Type Option

Step 1 – Add any of the above elements listed above to your page.

Step 2 – Click the Edit Element button on the top right corner of the element to bring up the options page.

Step 3 – Find the Hover Type option and choose the hover effect you’d like to use.

Step 4 – Once you’re finished, click the Save button.


Image Rollovers

05/02/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 > Extras > 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

Image Rollover – Illustrated as A on the screenshot, this option is used to enable or disable the rollover animation on all blog and portfolio images. This is a global option that affects all image rollovers.

Image Rollover Direction – Illustrated as B on the screenshot, this option allows you to set the starting direction of the rollover animation when activated. Choose between Fade, Left, Right, Bottom, Top, Center Horizontal, or Center Vertical. This is a global option that affects all image rollovers.

Image Rollover Icon Font Size – Illustrated as C on the screenshot, this option allows you to set a pixel value to control the font size of the icons in the rollover. For example, 15px. This is a global option that affects all image rollovers.

Image Rollover Link Icon – Illustrated as D on the screenshot, this option is used to enable or disable the link icon from image rollovers. This is a global option but can be overridden per post in the Fusion Page Options Box.

Image Rollover Zoom Icon – Illustrated as E on the screenshot, this option is used to enable or disable the image icon from image rollovers. This is a global option but can be overridden per post in the Fusion Page Options Box.

Image Rollover Title – Illustrated as F on the screenshot, this option is used to enable or disable the title. This is a global option that affects all image rollovers.

Image Rollover Categories – Illustrated as G on the screenshot, this option is used to enable or disable the categories from image rollovers. This is a global option that affects all image rollovers.

Image Rollover Icon Circle – Illustrated as H on the screenshot, this option is used to enable or disable the icon background circle. This is a global option that affects all image rollovers.

Image Rollover Gradient Top Color – Illustrated as I on the screenshot, this option allows you to choose a color for the top gradient. This is a global option that affects all image rollovers.

Image Rollover Gradient Bottom Color – Illustrated as J on the screenshot, this option allows you to choose a color for the bottom gradient. This is a global option that affects all image rollovers.

Image Rollover Element Color – Illustrated as K on the screenshot, this option allows you to choose a color for the text and the icon circular background. This is a global option that affects all image rollovers.

Image Rollover Icon Color – Illustrated as L on the screenshot, this option allows you to choose a color for the image rollover icon. This is a global option that affects all image rollovers.


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 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 > Page tab. You can choose which icons to display using this option. The Default value will pull from Theme Options, choose a different value to override that.


iLightbox

04/18/2016

The revolutionary iLightbox replaced the PrettyPhoto lightbox in Avada for version 3.8. Below, you will find a detailed description on each Fusion Theme Option for the lightbox, as well as the different shortcodes that utilize the lightbox. Find the different Fusion Theme Options for the lightbox in Avada > Theme Options > Lightbox tab.

IMPORTANT NOTE
iLightbox is only available for Avada Version 3.8 or higher. Older versions will continue to use PrettyPhoto. Once older versions are updated to 3.8 or higher, it will automatically switch to iLightbox.

Fusion Theme Options – Lightbox

Lightbox – Illustrated as A, this option allows you to turn the lightbox On or Off.

Lightbox On Single Posts Pages – Illustrated as B, this option allows you to turn the lightbox on single blog and portfolio pages On or Off.

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

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

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

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

Arrows – Illustrated as G, this option allows you to turn navigation arrows On or Off.

Gallery Start/Stop Button – Illustrated as H, this option allows you to turn the gallery start/stop button On or Off.

Autoplay The Lightbox Gallery – Illustrated as I, this option allows you to turn the lightbox gallery’s autoplay feature On or Off.

Slideshow Speed – Illustrated as J, this option allows you to enter a numeric value to set the slideshow speed if the ‘Autoplay The Lightbox Gallery’ option is turned on. For example, 1000 = 1 second.

Background Opacity – Illustrated as K, this option allows you to enter a numeric value to set the opacity for the background. For example: 0.1 which is transparent to 1 which is opaque.

Title – Illustrated as L, this option allows you to turn the image title in the lightbox On or Off.

Caption – Illustrated as M, this option allows you to turn the caption in the lightbox On or Off.

Social Sharing – Illustrated as N, this option allows you to turn the social sharing button in the lightbox On or Off.

Deeplinking – Illustrated as O, this option allows you to turn deep linking images in the lightbox On or Off.

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

Slideshow Video Dimensions – Illustrated as Q, controls the width and height for videos inside the lightbox. Enter values including any valid CSS unit. For example: 1280px width and 720px height.


Other Lightbox Options

Image Carousel Shortcode

In the Image Carousel Shortcode, 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 Shortcode

In the Image Frame Shortcode, 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 display an image in a lightbox, simply select Yes on the Image Lightbox option. To upload a different 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 one.


Post Slider Shortcode

In the Post Slider Shortcode, you can choose to display images in a lightbox, but only if the Post Slider is in the Attachment layout. To display an image in a lightbox, select Yes on the Lightbox on Click option.


Slider Shortcode

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


Fusion Page Options for Portfolio Pages

When adding or editing individual portfolio pages, you can add a Youtube or Vimeo video in a lightbox. To display a Youtube or Vimeo in a lightbox, enter the URL of the video in the Youtube/Vimeo Video URL for Lightbox field, which is found in the Fusion Page Options > Portfolio tab.


WooCommerce Options

04/18/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

04/18/2016

Each page you create with Avada will have default top and bottom padding applied. The page top padding start 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 global option can be overridden on page by page basis with 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. This will override the global option.

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 Shortcode Inside Page Builder

If you add a Fusion, Revolution or Layer Slider using one of the slider shortcodes 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.


Illustration

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

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

Responsive Breakpoints

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

Avada includes 3 Responsive Breakpoint options. The ability to change the Header, Site Content 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 3 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.

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


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

04/18/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.


Center Content In Columns

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

In Avada 3.8 or higher, each Column Shortcode now has a ‘Center Content Vertically’ option available. This option allows you to center your content vertically, and only works when the ‘Set Columns To Equal Heights’ option is set to Yes inside Full Width containers. Your content will be centered vertically according to the highest container. To learn how to center your content, continue reading below.

How To Center Content In Columns

Step 1 – Insert a Column Shortcode into the page and click the ‘Edit Element’ button to bring up the options window.

Step 2 – Set the ‘Center Content Vertically’ option to Yes.

Step 3 – Click the ‘Save’ button to apply your changes.

Step 4 – Repeat these steps for all the columns where you’d like your content to be vertically centered.


IMPORTANT NOTE – The ‘Center Content Vertically’ option only works with the ‘Set Columns To Equal Heights’ option inside Full Width containers. Please consider this when building your page.

Color Settings

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

We know that colors are an integral part of making your website look professional and polished, that 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 > Shortcode Styling section.

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

Step 3 – Drag the circle with your mouse, illustrated as A, 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. Hexcode 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 values automatically.

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


Responsive Headings

04/25/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

05/13/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 Font

05/13/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

05/13/2016

Avada includes a wide range of social icons that can be used in several locations on your site. These social icons are custom font icons which ensures that they will remain high quality, and can be customized to your liking. 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 Panel

In this panel, you will find a repeater field that accepts one network field at a time. You can add as many social links as you’d like. You can also add custom social links and icons here, which you can read more about here. 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 finished, 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 finished adding social media links, don’t forget to click the ‘Save Changes’ button.


Header Social Icons Panel

On this tab, you can customize the appearance of the social icons that will be displayed on your header such as its font size, color, layout and the like. Also in this section, we’ve 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 any layout from layout #2 – #5.

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.


How To Customize The Header Social Icons

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

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

Step 3 – After you’ve done your desired customizations, don’t forget to click the Save Changes button.


Footer Social Icons Panel

On this tab, you can customize the appearance of the social icons that will be displayed on your footer such as its font size, color, layout and the like. 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 And Customize Social Media Icons On 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 – After you’ve done your desired customizations, don’t forget to click the Save Changes button.


Social Sharing Box Panel

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 Customize The Social Sharing Box And Icons

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

Step 2 – On this tab, you will find multiple customization options for the social sharing box such as the tagline, background color. You’ll also find customization 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 Shortcode To A Page Or Post

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

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

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

Step 3 – Navigate to the Builder Elements tab, and locate the Sharing Box Builder Element. Click or drag it to the page or post to add it.

Step 4 – To customize the Sharing Box shortcode, click the Edit Element button to bring up the options window.

Step 5 – Once you’re finished customizing the Social Links shortcode, don’t forget to click the Save button to add it to the page or post.


Social Links Shortcode

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

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

Step 1 – Navigate to the page or post you’d like to add the social links shortcode to.

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

Step 3 – Navigate to the Builder Elements tab, and locate the Social Links Builder Element. Click or drag it to the page or post to add it.

Step 4 – To customize the Social Links shortcode, click the Edit Element button to bring up the options window.

Step 5 – In the options window, you can 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 you’re finished customizing the Social Links shortcode, don’t forget to click the Save button to add it to the page or post.


How To Customize The Social Links Shortcode Globally

IMPORTANT NOTE – On the Shortcode Styling panel, the Social Icon Shortcodes section controls the global options for both the Social Links shortcode and the Person shortcode.

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

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

Step 3 – Once you’ve finished applying your customizations, don’t forget to save your changes by pressing 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 – To insert a social links widget to a widget section, you must first create a widget section. To learn more about this, please refer to our Widgets Section article.

Step 2 – Once you’ve created a widget section, go to the Appearance > Widgets tab.

Step 3 – Under the Available Widgets section, locate the Avada: Social Links widget. Drag and drop the Social Links widget 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 you’re finished customizing it, don’t forget to click the Save button to save your changes.


Social Media Icons Styling

There are several customization options that you can use 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 customize a particular set of social media icons depends on the area where they’re found. For example, if you’d like to customize 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 like 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

03/10/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

04/18/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

04/18/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 does not display any content areas
Header #2, #3 & #5 displays content areas 1 & 2
Header #4 is unique and can display all 3 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 6 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 and 6 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.

Side Header Position

04/18/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

04/18/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

05/23/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

04/18/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

01/20/2016

Using The Mega Menu

05/06/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

04/18/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

01/20/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

01/20/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

04/18/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

04/18/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

04/18/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

03/10/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/22/2015

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

How To Create A New Page

Step 1 – Navigate to Pages in your admin sidebar and click Add New option.

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

Step 3 – Set your Parent page. It’s usually set to No Parent.

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

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

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


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

Page Templates

02/11/2015

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

Below are the Page Templates, along with a description of each one.

  • Default – This is the Default page template that automatically has the sidebar with it. Choose this template for your blog.
  • Contact – This is the Contact page template that you should choose when you make your contact page with Google Map & a contact form.
  • FAQ – This is the FAQ page template. Choose this template when you make your FAQ page.
  • 100% Width – This is the 100% Width page template. This will allow your content to go 100% of the browser width. To contain content within the site width, use the Full Width shortcode.
  • Portfolio Pages – These are all the Portfolio page layout templates. Choose grid, 1, 2, 3, 4, 5 or 6 columns depending on the layout you want.
  • Side Navigation – This is the Side Navigation page template. See the Side Navigation section of this document for more info.
  • Blank – This is the Blank page template, when you use this, the header and footer will be removed.

Setting Up Home Page

05/11/2015

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 One Page

04/18/2016

Avada has the ability for you to make a one page site with a parallax scrolling menu. Most sites are traditionally setup with individual pages, each page with its own content. A one page site allows you to put all the content on one page, and the menu items will link to each different sections of the page. Think of it as a full site, but all on one page. A parallax one page site requires you to have a custom menu, a page with menu_anchors in the content, and the custom menu assigned to the page. If you want to use a one page site as part of a larger, complex site, please see here on how to setup different menus for the different site parts: Setting Up The Menu.

Please read below for detailed information on how to set up a one page site with custom menu.

IMPORTANT NOTE – Please note that anchor links won’t work with the Header Layout #6 that comes with Avada version 4.0.

How To Create A Custom Menu For The One Page Site

Step 1 – Navigate to the Appearance > Menus tab on your WordPress admin panel. Once on the Menus tab, click the ‘Create A New Menu’ link, and assign it a name.

Step 2 – Each menu item you add needs a unique anchor name in the URL field. These names act as anchors, and will link to the corresponding anchor name in your page content. Use the ‘Custom Links’ box on the left hand side to add menu items. In the URL field, type the anchor of your section. For example, #intro and then assign a name to the menu item. Once finished, click the ‘Add to Menu’ button.

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

Step 4 – Don’t forget to assign your new menu to the main navigation location by checking the ‘Main Navigation’ checkbox under the Menu Settings box.

Step 5 – Once finished, be sure to click the ‘Save Menu’ button.

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.


How To Create A New Page With Your Content And Anchor Links

Step 1 – Create a new page or edit an existing one and insert your desired content to the page as normal.

Step 2 – Click the ‘Fusion Page Builder’ button, then switch the Builder Elements tab.

Step 3 – Find the ‘Menu Anchor’ shortcode then drag it to the beginning of a section on your page. For example, the beginning of your ‘About’ section.

Step 4 click the ‘Edit Element’ button on the Menu Anchor shortcode to bring up the options window. On the ‘Name Of Menu Anchor’ field, enter the appropriate anchor link for that specific section without the hashtag (#). For example, about.

Step 5 – Click ‘Save’ to save your changes, then repeat steps 3-4 for all the different sections and corresponding anchor links you’ve created.


One Page Menu with Multi-Page Links

04/18/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

01/22/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 FAQ Page

01/22/2016

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

How To Create A FAQ Page

Step 1 – Navigate to the Pages tab and click the Add New button.

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

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

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

Step 5 – Next you need to create FAQ posts. Select the FAQs tab in your admin sidebar section.

Step 6 – Click the Add New option in the FAQs tab in your admin sidebar section to add a new FAQ item.

Step 7 – Create a title, which will be the question. Then simply insert the answer for that question in the editor field.

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

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


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

Setting Up Side Nav Page

01/22/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

05/18/2016
IMPORTANT NOTE – The Fusion Builder is only available in Avada 3.6 or higher.

Avada includes our proprietary page builder called Fusion Builder. Fusion Builder is a WYSIWYG (What You See Is What You Get) drag and drop page builder that allows you to quickly and easily build pages using all the included elements. We’ve created Fusion Builder in a way that allows you to seamlessly switch between the builder interface and the regular WordPress interface, and it will automatically convert your previously made Avada page layouts into builder blocks. The following sections will cover several different sections of the header that are listed below.

In addition, we have made individual sections for a few of the more prominent builder elements, also known as shortcodes, that need detailed explanations. Find them below.

Builder Descriptions

02/12/2015

This section helps explain the main elements and aspects of the Fusion Builder with images and descriptions. Knowing the different areas, icons and tools we include will help you quickly build beautiful pages with Fusion Builder. Please read below for detailed information regarding each section.

Click the image to the right to see a representation of the 4 sections outlined below.


1. Fusion Builder Has 4 Main Sections To Navigate

A. Column Options

This section holds all of the column boxes as well as the full width shortcode. All of these elements are containers that hold other builder elements. They allow you to separate content into columns or sections to build visually pleasing pages.

B. Builder Elements

This section holds all of the shortcode elements that you use to build pages. Each shortcode has its own element and set of options. To use them, simply click one, or drag and drop them into the page or inside the column boxes.

C. Custom Templates

This section allows you to save your page layouts as custom templates, and then reload them at a later time. Any created page can be saved with a unique template name, then reloaded later to save you time and effort.

D. Pre-Built Templates

This section holds all of our pre-built pages that we include with Avada. These are pages you see on our live demo. Simply click the one you want and choose to load the content. This is a great way to quickly setup pages.

2. History / Trash Controls

A. Trash Can

The trash can icon allows you to quickly delete the entire content of the page. When you first click the icon, it will ask you if you are sure you want to delete all content. This action cannot be undone. Choose “OK” to delete all content and start over.

B. History States

These two arrows allow you to go back and forward in your history states. Fusion Builder stores up to 40 history states. Each time you add a new element, drag and drop elements, or make an edit in the element popup window, the history state is tracked. Click the left arrow to go back in time, and the right arrow to go forward.


3. Column Element Descriptions

A. Plus/Minus Icons

These icons allow you to change the size of the column box. Click + to increase the size, or – to decrease.

B. Column Size

This is a text description of the current column box size. This will actively change when you resize the box.

C. Edit Icon

This is the icon you click to edit the column. When you click it, the edit window shows allowing you to change settings.

D. Clone Icon

This is the clone icon. When you click this icon, it will clone the entire column box and everything inside of it.

E. Trash Icon

This is the trash icon. When you click this icon, it will delete the entire column box and everything inside of it.

F. Column Elements

These are all the column elements you can use to build pages. Each one is its own block to drag & drop into place.

4. Builder Element Descriptions

A. Builder Elements

These are all the builder elements you can use to build pages. Each one is its own block to drag & drop into place.

B. Edit Icon

This is the icon you click to edit the element. Click the icon to open the edit window and change settings.

C. Clone Icon

This is the clone icon. When you click this icon, it will clone the entire column box and everything inside of it.

D. Trash Icon

This is the trash icon. When you click this icon, it will delete the entire column box and everything inside of it.

Important Note About Some Builder Elements

You may notice that some of our shortcodes are missing from the builder elements, such as; tooltips, popovers, dropcaps, modal link, highlight. These are content based shortcodes that require other text or content to go with them. For example, you would not use a dropcap or highlight without other text. These content based shortcodes need to be used with other shortcodes. For example, you would use a text block element to add a dropcap or highlight. Add the text block element and then click the edit icon. In the content field, you can access the visual or text editor and our shortcode generator button. Click the generator button to select and use any of these content based shortcodes. Please refer to our Content Based Shortcode section for more details.

How To Use Builder

02/12/2015

Fusion Builder is a drag and drop page editing tool that allows you to quickly and easily build pages. We’ve built Fusion Builder from the ground up, catering it to Avada and our framework. What you see is what you get! Fusion Builder is intuitive, super fast and a pleasure to use. It works with all our shortcodes and allows you to save custom templates and use our pre-built templates. Please read below for information on how to use Fusion Builder.

To activate the builder, click the “Fusion Page Builder” button on a page or post.


View This General Image Below That Explains Fusion Builder Sections

1. Adding Column or Builder Elements

A. Drag And Drop From Top Bar To Content Area

One method to add columns or builder elements to the content area is to drag and drop them from the top element panel, into the content area. Fusion Builder is precise, and will accurately place the element where you have dropped it with the mouse. Hover the mouse over the element you want, click and hold the mouse down while dragging the element into the desired spot. Once you have it where you want it, let go of the mouse button and it will fall into place. The content area will be highlighted in blue with a border when you drag and drop into place.

B. Click To Add Element In Next Available Spot

A second method to add column or builder elements to the content area is to simply click the element you want. When you click the element, Fusion Builder will add it to the content area. This method will add the element into the next available spot. For precise location, please drag and drop the element using the mouse into the content area.


2. Drag And Drop Positioning

When you start to build pages, you will want to reposition elements and columns. Fusion Builder’s drag and drop functionality is superb for this. It is precise and will accurately place the element where you have dropped it with the mouse. Hover the mouse over the element or column box you wish to move, click and hold the mouse down while dragging the element into the desired spot. Once you have it where you want it, let go of the mouse button and it will fall into place. The content area will be highlighted in blue with a border when you drag and drop into place.

IMPORTANT NOTE – Make sure that the content area is highlighted in blue before you let go of the mouse. That signifies that the element is being moved. If you have a row of columns (1/3 + 1/3 + 1/3) and you need to drag the 3rd column into the 2nd column position, click and drag the 3rd column slightly above the center of the 2nd column. This will allow you to accurately place the 3rd box into the 2nd box’s spot. If you drag it all the way to the left of the 2nd column, it will be placed in the 1st box’s spot.


3. Add Elements Into Columns

Elements can be inside or outside of column boxes. Column and full width boxes are used to hold a group of elements to help separate the layout. To add elements inside of column boxes, simply drag and drop the element to the interior of the column box. The content area will be highlighted in blue with a border when you drag and drop into place. You can add as many elements as you wish inside of a column or full width box.


4. Edit, Clone, Or Delete Elements & Columns

Each element or column box you add has 3 icons in the top right corner that allow you to edit the element, clone the element or delete the element. Column boxes show these 3 icons by default, while element boxes only show the icons on hover. Simply click the icon you wish to use. If you clone a column box, it will clone the entire column and interior contents. Cloning the element box will only clone that element.


5. Using History States

Fusion Builder stores up to 40 history states. Each time you add a new element, drag and drop elements, or make an edit in the element popup window, the history state is tracked and the icons show blue to signal you can go back or forward. Click the left arrow to go back in time, and the right arrow to go forward.

IMPORTANT NOTE – When you edit an element in the popup window, the history state is tracked. When you undo or redo one of these history states, you will not see a notice, but the edit you made in the popup window will be reverted or added back.


6. Using Custom & Pre-Built Templates

A. Custom Templates

Any created page can be saved with a unique template name, then reloaded later to save you time and effort. Click on the Custom Template navigation button and click Save Layout As Template button, then give it a unique name. The template name will then show up on the right hand side allowing you to load it at a later time.

B. Pre-Built Templates

The pre-built templates are pages from our live demo. This is a great way to quickly setup pages. Click the Pre-Built Template navigation button and choose the template you wish to load. Please note that loading one of these templates will replace all the content on your page.


Converting Layouts

02/12/2015

Fusion Builder is backwards compatible. This allows you to convert pages built in older versions of Avada to builder block layouts. This also allows you to seamlessly switch between the builder and the regular WordPress editor.

To convert previous layouts to builder blocks, open the page and click the Fusion Page Builder button. The content will be processed into builder blocks. When it is finished, save the page. The process may take a moment depending on your server speed.


Regular Editor click to enlarge


Fusion Builder Blocks click to enlarge


Common Issues & Questions

1. Content Based Shortcodes (modal link, dropcap, popover, tooltip, highlight)

You may notice that after converting your page, some of our shortcodes are converted to a text block element. These are content based shortcodes that require other text or content to go with them. For example, you would not use a dropcap or highlight without other text. These content based shortcodes need to be used with other shortcodes. So the builder conversion will place them in a text block, or another element, depending on how they were used. Please refer to our Content Based Shortcode section for more details.

2. Checklist Icon Color

You may see a conversion issue with the checklist icon color. This is due to older shortcode formats. If you convert a page and you do not see the icons anymore, simply edit the checklist builder block and select an icon color, or choose Yes for Icon in Circle option.

3. Content Boxes “Icon-Boxed” Layout & Columns

If you are using the icon-boxed layout for content boxes, you may lose the background color when you convert. This is due to older shortcode formats. Simply edit the content box and add a background color. You may also notice that your content box columns have changed. If you were using an older format of content box shortcode that did not have the column attribute added, then it will default to 4 columns. Simply edit the content box and select the number of columns you wish to have.

4. Content From Other Sources Outside of Avada

Content that comes from outside of Avada, like maybe from another theme (normal text, HTML, non supported shortcodes, etc) will be wrapped in [fusion_text] element. Simply edit the text block to make changes to the content.

5. Person Shortcode Title Text

There was a typo in the class= attribute, which may cause the person’s name to convert to class= instead of the actual name. We apologize about this error, you will need to edit the shortcode and insert the correct name.

6. Tabs

Old version of tabs that do not have [fusion_tabs] as the wrapping element will convert but will be placed inside a regular text block element. They will still display properly, but if you wish, you can add a new tabs element and copy the data over so it displays as tabs in backend preview.

Content Based Shortcodes

02/12/2015

You may notice that some of our shortcodes do not have a specific builder element in Fusion Builder. These are content based shortcodes that require other text or content to go with them. These content based shortcodes need to be used with other shortcodes. Please read below for additional information on this topic.

Why Is This Setup This Way?

The reason why it is setup this way is because these shortcodes need to be used with other content. Let’s use a dropcap as an example. Anytime you use a dropcap, it has to go along with other text. If not, it would be one lonely dropcap sitting by itself. A dropcap would not be on a page by itself. So in this case, you would use the text block element in Fusion Builder to add your text and the dropcap. When you add a text block element or any other element that has a content field for text, you can access the shortcode generator in the Visual or Text editor when editing the element in the popup window. The dropcap shortcode will be inserted through the generator into the text field element. This process can be done for any element that offers the standard WP Visual or Text editing fields.

Please read the information below for step by step instructions.

Content Based Shortcode List

  • Tooltip Shortcode
  • Popover Shortcode
  • Dropcap Shortcode
  • Blockquote Shortcode
  • Highlight Shortcode
  • Modal Link Shortcode
  • One Page Text Link Shortcode
  • How To Use Content Based Shortcodes

    Step 1 – Add any element that allows for regular text to be inserted via the WordPress editing field (Visual or Text Editor). For example, the Text Block element.

    Step 2 – Click the Edit icon on the element box to bring up the popup window.

    Step 3 – Inside the popup editing window, you will see the standard Visual and Text content fields, along with the standard WordPress toolbar.

    Step 4 – You can then access our shortcode generator icon in the Visual or Text editor, click the icon to bring up our shortcode generator.

    Step 5 – Select the shortcode you wish to use along with the options for it. When done, click the Insert Shortcode button to insert the shortcode.

    Step 6 – When finished, save the page. You can re-edit the element as needed.


    Shortcode Generator

    05/07/2015

    Avada includes all shortcodes inside the Fusion Core plugin, this plugin must be installed and activated. Fusion Core contains a Shortcode Generator. The generator has a user interface that allows you to quickly and easily use shortcodes and all the options that go with them. All shortcodes are accessed in both the Visual Editor and Text Editor field of your WordPress Admin. Each shortcode has its own unique options.

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

    How To Use The Shortcode Generator

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

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

    Step 3 – In the popup window, select the shortcode yo’d like to use from the dropdown list.

    Step 4 – Customize your settings on the shortcode options that load, then click the Insert Shortcode button and it will be inserted on the page.

    Click Here To Watch The Video Tutorial

    Click Here To View All Shortcode Options


    Shortcode Customization

    05/12/2015

    Even when you find the perfect theme for your needs, chances are you are going to want something changed that will require some custom CSS. CSS is used to style your theme. Several styling options are already included with the theme in your Fusion Theme Options panel, or within the shortcodes or Fusion Page Options. But even with that plethora of styling options, you will probably come across something that does not have a built-in option. When this happens, you need to use custom CSS. Every shortcode Avada includes has a class and id option. This allows you to further customize the shortcode outside of the options we provide. For example, if you need to setup a shortcode differently than what our options allow, you can add a custom class or id to the shortcode, and then create your custom CSS to target that.

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

    How to Apply Custom CSS To A Shortcode Element

    Step 1 – To apply custom CSS to a specific element, you will need to give that element a unique class or ID. Most of the elements you can insert via the page builder will have an option to set both of these values. Note that you can use either, but both are not required.

    Custom CSS Class

    Step 2 – After you set the custom class or ID, we can then control the styling of that element by adding custom css that targets the class name. This CSS should be added to the the Custom CSS field in our Fusion Theme Options. 

    Theme Options -> Custom CSS 

    Custom CSS

    IMPORTANT NOTE – The style above will apply a black (#000000) background to the element with the class name ‘custom-class-name’. Please note the “.” before the class name. This is very important and if forgotten, will break any other styles that you have applied. If we were to use a custom ID instead of a class, we would simple replace the “.” with a “#” symbol. As we may be override existing styles, we use the “!important” value just before the “;”. This tells the browser that this style is to take priority over other CSS trying to set the same style.

    If you’re unsure about how to get the code for the color you wish to use, please use this online tool:

    http://www.colorpicker.com/

    Finding CSS Selectors by Inspecting Elements

    If you would like to override existing styles of an element, you will need to find the CSS selector that it is currently using. There is no better way to do that then to inspect your site with some kind of browser developer tool. Among other things, browser developer tools and extensions allow you to inspect the CSS of live sites and make changes to the CSS and view the live changes. These tools are invaluable and well worth the time it takes to learn them. There are several out there to use, see below for the different options we recommend.

    Firebug Extension

    Firebug is a browser extension that you can use with just about any browser. Its built for Firefox, but also has light versions for Safari, Chrome, and Internet Explorer. Firebug is an amazing tool that allows you to inspect the CSS and make changes to see how its affected. Its a great tool to learn! Download it for free at the link below, and watch the video tutorial. You can also Google other firebug video tutorials to learn more. Trust me, it will be well worth your time.

    Chrome Developer Tools

    If you use Chrome, or have Chrome available, you already have built in browser tools to help you inspect your site. There is a lot of information out there on the web about Chrome Developer tools, and I’ve included a few starter links below.

    Parent vs Child Level Settings

    07/17/2015
    IMPORTANT NOTE – This feature is only available in Avada 3.8.5 or higher.

    In Avada 3.8.5, a Settings Level option has been added to the content boxes. This option will eventually be added to other shortcodes, as well. There are two options you can choose, the Parent Level and Child Level setting.

    • Parent Level – allows you to set the styles of all elements globally, one time. Example: every icon will have the same color.
    • Child Level – allows you to set the styles for each element individually. Example: you can have a red icon, blue icon, and green icon.

    How To Use The Parent Level Setting

    Step 1 – Add a Content Box shortcode to the page. Click the Edit Element button on the top right to display the Options box.

    Step 2 – Find the Parent / Child Settings option, and select Parent Level Settings.

    Step 3 – Set your desired style options for all the Content Boxes in the set.

    Step 4 – When you add a new Content Box Item, you will notice that style options are removed from each content box. This is because you can now set the style for all boxes for the set in the main Content Box options.

    Step 5 – Once you’re happy with your settings, click Save.


    How To Use The Child Level Setting

    Step 1 – Add a Content Box shortcode to the page. Click the Edit Element button on the top right to display the Options box.

    Step 2 – Find the Parent / Child Settings option, and select Child Level Settings.

    Step 3 – Add a new Content Box Item, and set your desired style for this individual box. Take note that any style you set will only be applied to that box item.

    Step 4 – Keep repeating the process until you have your desired number of unique Content Boxes in a set.

    Step 5 – Once you’re happy with your settings, click Save.


    IMPORTANT NOTE – The default setting will be set to Child Level Settings due to backwards compatibility.

    Column Boxes

    07/22/2015

    When building your website, it’s essential that you’re able to organize your content in a neat way for your viewers. Columns are perfect for allowing you to achieve a clean and creative layout. You can insert any Builder Elements into a column. Continue reading below for a list of column sizes Avada has to offer, a guide on how to use them in our Fusion Builder, and a list of customization options.

    Different Column Sizes

    A column can be used on it’s own or inside a Full Width Container. Either way, it will always base it’s divisions on the container it’s in. Most of the time, this container will be the Site Width you’ve set in the Fusion Theme Options. For example, if you’ve set the Site Width to be 1000px, then a 1/2 column will be 500px wide (minus column spacing).

    • 1/1 – A one whole column is 100% of it’s container.
    • 1/2 – A one half column is 50% of it’s container.
    • 1/3 – A one third column is 33.33% of it’s container.
    • 2/3 – A two third column is 66.66% of it’s container.
    • 1/4 – A one fourth column is 25% of it’s container.
    • 3/4 – A three fourth column is 75% of it’s container.
    • 1/5 – A one fifth column is 20% of it’s container.
    • 2/5 – A two fifth column is 40% of it’s container.
    • 3/5 – A three fifth column is 60% of it’s container.
    • 4/5 – A four fifth column is 80% of it’s container.
    • 1/6 – A one sixth column is 16.66% of it’s container.
    • 5/6 – A five sixth column is 83.33% of it’s container.

    How To Use Columns in Fusion Builder

    Step 1 – In a new page, click the Fusion Page Builder button to access the Builder Elements and Column Elements.

    Step 2 – Click the Column Options tab to view all the available Column sizes you can add. Click you desired column size, or simply drag it into the page.

    Step 3 – Click the Edit Element on the top right corner of the Column Element to bring up the options page. Here, you can customize various settings for the column.

    Step 4 – To add content inside your column, switch to the Builder Elements tab and drag your desired element inside the column. Please note that you cannot have a column within a column.

    Step 5 – You can add another column to the row just as long as they add up to 100% of your site width. For example, you can have a 1/2 column + 1/2 column in a row.

    Step 6 – Once you’re finished, click Save Draft or Publish.


    Column Options

    Last Column – Illustrated as A on the screenshot to the right, the Last Column option allows you to set the column as last in the set. Choose between Yes, or No. Must be set to Yes for the last column in a set.

    Column Spacing – Illustrated as B on the screenshot to the right, the Column Spacing option allows you to eliminate the margin between columns. Choose between Yes, or No.

    Center Content – Illustrated as C on the screenshot to the right, the Center Content option allows you to center content horizontally and vertically. Choose between Yes, or No. This option only works if the column is within a Full Width Container with equal height set to yes.

    Hide on Mobile – Illustrated as D on the screenshot to the right, the Hide on Mobile option allows you to hide the column on mobile. Choose between Yes, or No.

    Background Color – Illustrated as E on the screenshot to the right, the Background Color option accepts a hexcode value that sets the column’s background color.

    Background Image – Illustrated as F on the screenshot to the right, the Background Image option lets you upload an image as the column’s background.

    Background Repeat – Illustrated as G on the screenshot to the right, the Background Repeat option allows you to set how the background image repeats. Choose between No Repeat, Repeat Vertically and Horizontally, Repeat Horizontally, or Repeat Vertically.

    Background Position – Illustrated as H on the screenshot to the right, this option allows you to set the position of the background image. Choose between Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center or Center Bottom.

    Border Position – Illustrated as I on the screenshot to the right, the Border Position option allows you to set the position of the column’s border. Choose between All, Top, Right, Bottom, or Left.

    Border Size – Illustrated as J on the screenshot to the right, the Border Size option accepts a pixel value that sets the size of the column’s border. For example, 25px.

    Border Color – Illustrated as K on the screenshot to the right, the Border Color option accepts a hexcode value that sets the column’s border color.

    Border Style – Illustrated as L on the screenshot to the right, the Border Style option allows you to set the style of the column’s border. Choose between Solid, Dashed, or Dotted.

    Padding – Illustrated as M on the screenshot to the right, the Padding option accepts a pixel value that sets the size of the column’s padding. For example, 25px.

    Margin Top – Illustrated as N on the screenshot to the right, the Margin Top option accepts a pixel value that sets the column’s top margin. For example, 25px.

    Margin Bottom – Illustrated as O on the screenshot to the right, the Margin Bottom option accepts a pixel value that sets the column’s bottom margin. For example, 25px.

    Animation Type – Illustrated as P on the screenshot to the right, this option allows you to set the type of animation on the column. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

    Direction of Animation – Illustrated as Q on the screenshot to the right, this option allows you to set the direction of animation on the column. Choose between Down Left, Right, Up, or Static.

    Speed of Animation – Illustrated as R on the screenshot to the right, this option allows you to set the speed of animation on the column. Choose between 0.1 to 1.

    CSS Class – Illustrated as S on the screenshot to the right, the CSS Class option allows you to add a class for the column.

    CSS ID – Illustrated as T on the screenshot to the right, the CSS ID option allows you to add an ID for the column.


    Full Width Element

    01/20/2016

    Avada includes an amazing Full Width Shortcode that is completely versatile and is a huge factor in building and designing a site using Avada. The Full Width Shortcode is basically a container that allows you to insert a plethora of content inside of it, including — but not limited to — full column sets, different shortcodes, and loads of information and content. With this useful shortcode, you can use full width sections that span the entire width of your browser window, or choose to keep content within your desired site width. Personalize your Full Width Shortcode by using our array of customisable settings, such as background images, videos, borders, colors, padding, positioning and so much more!

    Full Width Sizing

    While the Full Width Shortcode is mostly independent, some of it’s features rely on other factors on your site, such as the Site Width option located in the Fusion Theme Options panel, or the Page Template that it is being used on. Avada’s Full Width Shortcode enables the background color, image, or border to span 100% of the browser width. However, this depends on the Page Template it is being used on. Below are some examples of how the Shortcode reacts to different types of Page Templates.

    • Default Template – Content is contained to the Site Width set in Fusion Theme Options.
    • 100% Width – Content expands out to 100% width of the browser window.
    • Page Templates With A Sidebar – Content stops at the sidebar column.

    Full Width Shortcode Tab Options

    IMPORTANT NOTE – Some Full Width Container options listed below are only available in Avada 3.8 or higher.

    Inside the Full Width Shortcode’s options, you will find 3 tab groups. The Default tab, the Background tab, and the Design tab. Because of the amount of options you can set for the Full Width Shortcode, we’ve split them into three logical tabs so you can easily locate the option you’re looking for. Continue reading below for a full description of each tab, and the options within them.


    DEFAULT TAB

    Interior Content Width Options

    By default, any interior content placed inside the Full Width Shortcode will be contained within the width set in the Site Width options, located in the Fusion Theme Options panel. On the other hand, only the background image, color or border will extend out to 100% of the browser width when using the 100% Width Page as your page template. This setup allows you to have a cool background that extends 100% of the browser width, while the rest of your content is contained neatly to your site’s width.

    How To Enable 100% Interior Content Width

    Step 1 – Navigate to the Full Width Container Shortcode’s options page.

    Step 2 – Once in the options page, set the 100% Interior Content Width option to yes.

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

    Once you have finished these steps, your content now extends 100% of the browser’s width.


    Equal Column Heights

    By default, when using columns in a set, the height of the column is determined by the length of the content displayed inside it. However when designing, columns with equal heights — regardless of content — looks much cleaner and organised. This is why we’ve added an option called Equal Column Heights to Avada’s versatile Full Width Shortcode. When enabled, this option will make all columns in the set the same height according to the tallest column in the set.

    How To Enable Equal Column Heights

    Step 1 – Navigate to the Full Width Container Shortcode’s options page.

    Step 2 – Once in the options page, set the Equal Column Heights option to yes.

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

    Once you have finished these steps, your columns will now be equal in height.


    Name Of Menu Anchor – Illustrated as A on the screenshot to the right, the Name Of Menu Anchor option allows you to assign an Anchor to the Full Width container. The same Anchor can be used to reference that particular section in your one page menu.


    CSS Options

    CSS Class – Illustrated as A 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 B 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.


    BACKGROUND TAB

    Background Color Options

    Set a custom solid color for your Full Width Shortcode by entering a hexcode into the Background Color field, or use our Color Picker tool to choose your desired color.


    Background Image Options

    Background Image – Illustrated as A on the screenshot to the right, the Background Image option allows you to easily upload your desired image by clicking the Upload button.

    Background Parallax – Illustrated as B on the screenshot to the right, the Background Parallax option allows you to choose how the background image scrolls and responds. Choose between No Parallax, Fixed, Up, Down, Left, or Right.

    Parallax Speed – Illustrated as C to the screenshot to the right, the Parallax Speed option allows you to control the scrolling speed of the parallax effect. Accepts a numerical value from 0, which is the slowest, to 1, which is the fastest. For example, .4

    Enable Parallax on Mobile – Illustrated as D to the screenshot to the right, the Enable Parallax on Mobile option lets you enable or disable the parallax effect on your website to optimize it for mobile devices.

    Background Repeat – Illustrated as E on the screenshot to the right, the Background Repeat option sets how your background image repeats. Choose between No Repeat, Repeat Horizontally and Vertically, Repeat Horizontally, or Repeat Vertically.

    Background Position – Illustrated as F on the screenshot to the right, the Background Position option controls how your background image is positioned. Choose between Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, or Center Bottom.

    Fading Animation – Illustrated as G on the screenshot to the right, the Fading Animation option enables the background to fade and blur on scroll. This option is specifically for images only. Choose yes to enable the option, or no to disable it.


    Background Video Options

    Youtube/Vimeo Video URL or ID – Illustrated as A on the screenshot to the right, the Youtube/Vimeo Video URL or ID option lets you upload a Youtube or Vimeo video by entering the the video’s URL.

    Video Aspect Ratio – Illustrated as B on the screenshot to the right, the Video Aspect Ratio option allows you to input an aspect ratio, which the video will be resized to in order to prevent the video from showing any black bars.

    Video WebM Upload – Illustrated as C on the screenshot to the right, the Video WebM Upload option allows you to upload a .WebM format of your video file. For your video to render with cross browser compatibility, you must upload both .WebM and .MP4 files of your video. Make sure your video is in a 16:9 aspect ratio.

    Video MP4 Upload – Illustrated as D on the screenshot to the right, the Video MP4 Upload option allows you to upload a .MP4 format of your video file. For your video to render with cross browser compatibility, you must upload both .WebM and .MP4 files of your video. Make sure your video is in a 16:9 aspect ratio.

    Video OGV Upload – Illustrated as E on the screenshot to the right, the Video OGV Upload option allows you to upload a .OGV format of your video file. .OGV files are optional.

    Video Preview Image – Illustrated as F on the screenshot to the right, the Video Preview Image option allows you to upload a preview image that would be displayed in the event that your video does not display correctly.

    Video Overlay Color – Illustrated as G on the screenshot to the right, the Video Overlay Color option accepts a hexcode value that sets the overlay color to display over your video.

    Video Overlay Opacity – Illustrated as H on the screenshot to the right, the Video Overlay Opacity option accepts a numerical value from 0, which sets it to transparent, to 1, which sets it to opaque. For example, .4

    Mute Video – Illustrated as I on the screenshot to the right, the Mute Video option allows you to mute the video’s audio or not. Choose yes to enable the option, or no to disable it.

    Loop Video – Illustrated as J on the screenshot to the right, the Loop Video option allows you to loop the video or not. Choose yes to enable the option, or no to disable it.


    DESIGN TAB

    Background Border Options

    Border Size – Illustrated as A on the screenshot to the right, the Border Size option accepts a pixel value that sets the border’s thickness. You can choose to leave this option blank to enable Theme Option selection.

    Border Color – Illustrated as B on the screenshot to the right, the Border Color option accepts a hexcode value that sets the border’s color. You can also use our Color Picker tool to choose your desired color. Leave this option blank to enable Theme Option selection.

    Border Style – Illustrated as C on the screenshot to the right, the Border Style option controls the style of the border. Choose between Solid, Dashed, or Dotted.


    Padding Options

    Padding Top – Illustrated as A on the screenshot to the right, the Padding Top option accepts a numerical value that sets the padding of the top section of your Full Width Container. For example, 25.

    Padding Bottom – Illustrated as B on the screenshot to the right, the Padding Bottom option accepts a numerical value that sets the padding of the bottom section of your Full Width Container. For example, 25.

    Padding Left – Illustrated as C on the screenshot to the right, the Padding Left option accepts a numerical value that sets the padding of the left section of your Full Width Container. For example, 25.

    Padding Right – Illustrated as D on the screenshot to the right, the Padding Right option accepts a numerical value that sets the padding of the right section of your Full Width Container. For example, 25.


    IMPORTANT NOTE – Enabling 100% Interior Content Width will remove left and right padding.

    Modal Popup Element

    07/17/2015

    Avada includes a Modal Popup Shortcode that can be used to neatly display additional content on a page, without sacrificing space. You can set up a modal by using our Fusion Builder, or the Fusion Shortcode Generator. Modal boxes are hidden by default and can only be triggered by a button shortcode or a modal text link shortcode, which can be either text or an image. Any of our other shortcodes can be used inside it so you can organize your content however you wish.  To view the modal popup and it’s variations, visit our live demo by following this link.

    How To Create A Modal Popup Shortcode

    Step 1 – Insert the Modal element onto your page with Fusion Builder.

    Step 2 – Edit the Modal element by clicking the edit icon on the top right corner of the element box.

    Step 3 – IMPORTANT: Enter a lowercase unique identifier to the Name of Modal field. This same identifier has to be used in your modal trigger. For example, mymodal.

    Step 4 – Once finished, click the Save button to insert it into the page.

    After these steps, you must then setup a trigger element (button, text link or image) with the same unique identifier. See the following sections for how to setup a trigger.


    How To Create A Modal Button Trigger

    Step 1 – Insert the Button element onto your page with the Fusion Builder.

    Step 2 – Edit the Button element by clicking the edit icon on the top right corner of the element box.

    Step 3 – In the options window, locate the Modal Window Anchor field. Enter the exact name you entered into the Name of Modal field from Step 4 above. For example, mymodal.

    Step 4 – Once you’re finished adding content, select the Save button. You can now view the modal on the frontend by clicking the button you’ve just created.


    How To Create A Modal Text Link Trigger

    Step 1 – This method requires using the Shortcode Generator within a Text Block element. Select the Text Block element and add it to the page via the Fusion Builder.

    Step 2 – Click the edit icon on the top right corner of the element box. In the Content section, select the Shortcode Generator icon.

    Step 3 – In the popup window, select Modal Text Link from the dropdown menu. In the Name of Modal field, enter the exact name you entered into the Name of Modal field from Step 4 of the Modal Popup section. For example, mymodal.

    Step 4 – Once you’re finished adding content, Select the Insert Shortcode button. Then Save or Publish the page. You can now view the modal on the frontend by clicking the text link.


    IMPORTANT NOTE – Aside from the Text Block builder element, you can add a Modal Text Link shortcode to any builder element where content can be added, such as Titles, Tabs, and Toggles to name a few.

    How To Create A Modal With The Shortcode Generator

    Creating a Modal Popup using the Shortcode Generator is very much similar to the method described above. In the Shortcode Generator, select the Modal option from the dropdown menu. Now you can set the Modal box’s unique identifier and modify the settings to your preference. Then create your modal trigger by linking it to a button, text link or image.

    Modal Box Settings

    • Name Of Modal – Set your Modal box’s unique identifier here. This is used for linking the Modal box to triggers such as buttons, text, and images.
    • Modal Heading – Set your Modal box’s heading text here.
    • Size of Modal – Set the size of your Modal box here.
    • Background Color – Set the background color of your Modal box here.
    • Border Color – Set the color of your Modal box’s borders here.
    • Show Footer – Set if your Modal box will show the footer with the close button or not.
    • Contents of Modal – Enter your desired content here.
    • CSS Class – Add a class to the wrapping HTML element.
    • CSS ID – Add an ID to the wrapping HTML element.
    IMPORTANT NOTE – Two Modal boxes cannot have the same identifier.

    Image Frame Element

    05/23/2016

    Avada includes a flexible and functional Image Frame element that allows you to showcase images on your site flawlessly. Continue reading below to learn more about our Image Frame element.

    Image Frame Element

    The Image Frame element can be used with any of our column shortcodes. This allows you to better control how it displays on your page. This element also has numerous shortcode options, as well as a couple of global theme options. This element also features a lightbox option where you can display a single or multiple image frame elements.

    How To Insert An Image Frame Element

    Step 1 – Create a new page or edit an existing one.

    Step 2 – Click the ‘Fusion Page Builder’ button above the editor, then switch to the ‘Builder Elements’ tab.

    Step 3 – Locate the Image Frame shortcode, then click it to add it to the page, or drag it into place.


    How To Insert An Image

    Step 1 – Once you’ve added an Image Frame shortcode into the page, click the ‘Edit Element’ icon on the upper right corner of the element to bring up the options.

    Step 2 – Locate the ‘Image’ option. Click the ‘Upload’ button and select or upload the image you’d like to display inside the image frame.

    Step 3 – Set the ‘Image Lightbox’ option to Yes to open the same image in a lightbox. If you’d like to set a different lightbox image, go ahead and upload the image in the ‘Lightbox Image’ option.

    Step 4 – You can also link the image inside the image frame to an external link by adding the URL to the ‘Picture Link URL’ option. Please note that this will not work if you have a Lightbox image uploaded.

    Step 5 – Once finished, click the ‘Save’ button to add it to the page.


    How To Use ‘Gallery ID’ Option

    Click Here To Read More About Creating A Gallery Using Image Frames

    The ‘Gallery ID’ option allows you to combine any number of image frame elements on the page to display in the same lightbox gallery. Continue reading below to learn how to use this option.

    Step 1 – Insert an Image Frame element into the page, and click the ‘Edit Element’ button to bring up the options window.

    Step 2 – Insert an image to display using the ‘Image’ option, and set the ‘Image Lightbox’ option to Yes. If you’d like to set a different lightbox image, assign one using the ‘Lightbox Image’ option.

    Step 3 – Locate the ‘Gallery ID’ option and insert a unique name for the lightbox gallery that this image frame should belong to. For example, Products.

    Step 4 – Repeat steps 1 – 3 for all the Image Frame elements you’d like to include in the lightbox gallery.


    Image Frame Element Options

    Image Frame Shortcode Options

    The Image Frame Shortcode Options are available for every instance of the Image Frame element you create.

    Frame Style Type – Illustrated as A, this option allows you to select a frame style type. Choose from None, Glow, Drop Shadow, or Bottom Shadow.

    Hover Type – Illustrated as B, this option allows you to select the hover effect type. Choose from None, Zoom In, Zoom Out, or Lift Up.

    Border Color – Illustrated as C, this option allows you to set the border’s color. Accepts a hexcode ( #000000 ).

    Border Size – Illustrated as D, this option allows you to set the border’s size. Accepts a pixel value.

    Border Radius – Illustrated as E, this option allows you to set the border’s radius. Accepts a pixel value.

    Style Color – Illustrated as F, this option allows you to set the color for all styles expect the border. Accepts a hexcode ( #000000 ).

    Align – Illustrated as G, this option allows you to choose how to align the image. Choose between None, Left, Right, or Center.

    Image Lightbox – Illustrated as H, this option allows you to show the image in a lightbox. Choose between Yes, or No.

    Gallery ID – Illustrated as I, this option allows you to set a name for the lightbox gallery the image frame belongs to.

    Lightbox Image – Illustrated as J, this option allows you to upload a different lightbox image.

    Image – Illustrated as K, this option allows you to upload an image to display.

    Image Alt Text – Illustrated as L, this option allows you to set an alternative information in the event the image cannot be viewed.

    Picture Link URL – Illustrated as M, this option allows you to set a URL which the picture will link to when clicked.

    Link Target – Illustrated as N, this option allows you to set how the link opens. Choose between _self or _blank.

    Animation Type – Illustrated as O, this option allows you to set the animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

    Direction Of Animation – Illustrated as P, this option allows you to set the direction of the animation. Choose between Top, Left, Right, Bottom, or Static.

    Speed Of Animation – Illustrated as Q, this option allows you to set the speed of animation. Accepts a numerical value.

    Offset Of Animation – Illustrated as R, this option allows you to set when the animation will start.

    Hide On Mobile – Illustrated as S, this option allows you to hide the image frame on mobile devices. Choose between Yes or No.

    CSS Class – Illustrated as T, this option allows you to add a custom class to the wrapping HTML element.

    CSS ID – Illustrated as U, this option allows you to add a custom ID to the wrapping HTML element.


    Image Frame Fusion Theme Options

    The Image Frame options in the Fusion Theme Options are located under the Shortcode Styling panel. These options will affect all your Image Frame shortcode instances unless other wise specified within their individual shortcode options.

    Image Frame Border Color – Illustrated as A, this option allows you to set the border’s color. Accepts a hexcode ( #000000 ).

    Image Frame Border Size – Illustrated as B, this option allows you to set the border’s size. Accepts a pixel value.

    Image Frame Border Radius – Illustrated as C, this option allows you to set the border’s radius. Accepts a pixel value.

    Image Frame Style Color – Illustrated as D, this option allows you to set the color of the glow and drop shadow of the image frame. Accepts ( #000000 ).


    Creating A Gallery With Image Frames

    05/23/2016

    The Image Frame element allows you to create a photo gallery on a page or post through the ‘Gallery ID’ option. In this article, we’ll show you how to use the ‘Gallery ID’ option to add multiple Image Frame shortcodes into the same lightbox gallery. To learn about these, continue reading below.

    Click Here To Read Our Image Frame Article View The Image Frame Gallery In Action Here

    How To Insert An Image Frame Shortcode

    Step 1 – Create a new page or edit an existing one.

    Step 2 – Click the ‘Fusion Page Builder’ button then switch to ‘Builder Elements’ tab.

    Step 3 – Locate the ‘Image Frame’ shortcode then click it to add it to the page, or drag it into place. You can also choose to put it inside a Column shortcode so it fits better on your page.

    Step 4 – Insert an image to display using the ‘Image’ option, and set the ‘Image Lightbox’ option to Yes. If you’d like to set a different lightbox image, assign one using the ‘Lightbox Image’ option.

    Step 5 – Customize the Image Frame shortcode to your liking. You can adjust options such as the border, alignment, hover type, and animations.

    Step 6 – Add more Image Frame shortcodes by repeating Steps 3 – 5. If you’d like to retain the styling options you’ve chosen previously, then simply click the ‘Clone Element’ icon on the first instance of the Image Frame shortcode then just change the assigned image.


    Using ‘Gallery ID’ Option

    Step 1 – Once you’ve added all your Image Frame shortcodes and laid them out as you’d like, you can start determining which Image Frames you’d like to add to your lightbox gallery.

    Step 2 – Edit one of the Image Frames you’d like to add, then locate the ‘Gallery ID’ option. In this option, insert a unique gallery ID. For example, Travel.

    Step 3 – Keep repeating Step 2 until you’ve added your unique gallery ID to all the Image Frames you’d like to add to your lightbox gallery. You can add your gallery ID to only a few of your Image Frames, or to all of them.

    Step 4 – Click ‘Save Draft’ or ‘Publish’ to save your changes.


    Blog

    03/10/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

    03/02/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

    08/24/2015

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

    1. Featured Images

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

    2. Featured Videos

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

    3. Featured Image Size

    The featured image you upload to each post will show the full image ratio on the single post page by default. These settings can be found in the Fusion Page Options > Posts tab within all Blog Posts. The width of the featured image will be set to the site width, or column width if using sidebars, and the height is set to auto so it displays the original height. In addition to this, you can set a custom featured image width and height to control the size of the image. This is useful in specific situations when you need a custom featured image size. The Custom featured image sizes works for single post page and the main blog page, which means this excludes the grid and timeline layouts.

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

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


    4. Post Meta Information

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

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

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

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


    5. Using Fusion Builder

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

    6. Blog Single Post Page Options

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

    Click Here To View The Blog Post Options


    Assigned Blog Page

    05/03/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.

    Second Method: Blog Shortcode Third Method: Recent Posts Shortcode

    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.

    Blog Shortcode

    05/03/2016

    There are three methods you can use to display your blog posts. To view the 1st and the 3rd method, please click on the buttons below. The second blog method we will cover is our custom blog shortcode. This is a fantastic method because it allows you to place your blog posts on any page, select any of our layouts, assign custom categories to display and so much more. Basically, using the blog shortcode allows you to have multiple blog pages, each with a different set of categories, layouts and other blog settings. It’s also great to use to only display a few posts on a page with other content. The blog shortcode is very versatile.

    First Method: Assigned Blog Page Third Method: Recent Posts Shortcode

    How To Use The Blog Shortcode

    Step 1 – Navigate to the ‘Pages’ tab on your WP Admin Sidebar, then create a new page or edit an existing one.

    Step 2 – Click the ‘Fusion Page Builder’ page to switch to the Fusion Builder.

    Step 3 – Click the ‘Builder Elements’ tab, then select the ‘Blog’ shortcode from the list of elements.

    Step 4 – Click the ‘Edit’ icon on the Blog shortcode to bring up the Options window. Here, you can select different options for the blog shortcode. This allows major flexibility to use it on multiple pages with different options, or even multiple instances of it on the same page, like for a magazine style layout. Each instance of the blog shortcode allows for different settings.

    Step 5 – Click ‘Publish’ to save the page.


    Fusion Theme Options For The Assigned Blog Page

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

    Click Here To View Our Complete Shortcode Documentation

    Recent Post Shortcode

    05/03/2016

    There are three blog methods you can use to display blog posts. To view the other two methods, please click the buttons below. The third blog method we will cover is our custom Recent Post Shortcode. This shortcode is unique in that it offers more compact design options that may work better on pages with other content. This shortcode is a fantastic method, because it allows you to place your blog posts on any page, select various layouts, assign custom categories to display and so much more. You can use the Recent Post Shortcode as many times as you’d like, and on any page or post.

    First Method: Recent Posts Shortcode Second Method: Blog Shortcode

    How To Use The Recent Post Shortcode

    Step 1 – Navigate to the ‘Pages’ tab on your WP Admin Sidebar, then create a new page or edit an existing one.

    Step 2 – Click the ‘Fusion Page Builder’ page to switch to the Fusion Builder.

    Step 3 – Click the ‘Builder Elements’ tab, then select the ‘Recent Post’ shortcode from the list of elements.

    Step 4 – Click the ‘Edit’ icon on the Recent Post shortcode to bring up the Options window. Here, you can select different options for the Recent Post shortcode. Each instance of the Recent Post shortcode allows for different settings.

    Step 5 – Click ‘Publish’ to save the page.

    Click Here To View Our Shortcode Documentation


    Related Posts

    04/18/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

    08/25/2014

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



    Portfolio

    03/10/2016

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

    Creating Portfolio Pages

    03/02/2016

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

    How To Create A Portfolio Page

    Step 1 – Navigate to Pages and click Add New.

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

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

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

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

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


    Common Issues & Questions

    1. Portfolio Posts Are Not Loading

    If you have created portfolio posts but they are not loading on the portfolio page template or category/archive pages, it is most likely due to missing featured images. Each portfolio post must have a featured image uploaded for it to display on those pages.

    2. Categories Are Not Showing In Fusion Page Options

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

    Creating Portfolio Posts

    03/02/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 Page Templates

    04/18/2016

    Avada includes two main designs for portfolio page templates; Classic and Text. Each of these design options come in column sizes from 1-6. There are also various settings to control featured image size, text excerpts, image rollovers and more.



    Classic Portfolio Page Templates

    • 1 Column Classic: one image column on left and text excerpt on the right.
    • 2 Column Classic: two columns of images with no text.
    • 3 Column Classic: three columns of images with no text.
    • 4 Column Classic: four columns of images with no text.
    • 5 Column Classic: five columns of images with no text.
    • 6 Column Classic: six columns of images with no text.

    Text Portfolio Page Templates

    • 1 Column Text: one image column on left and text excerpt on the right.
    • 2 Column Text: two columns of images with text excerpt below.
    • 3 Column Text: three columns of images with text excerpt below.
    • 4 Column Text: four columns of images with text excerpt below.
    • 5 Column Text: five columns of images with text excerpt below.
    • 6 Column Text: six columns of images with text excerpt below.

    Portfolio Text Layouts Can Be Boxed or UnBoxed

    The portfolio text layouts have an option to be boxed or unboxed. Depending on the type of featured image size you are using (auto or fixed), or based on design preference, you should experiment with both options to see which looks better in your situation. This option can be selected globally in Fusion Theme Options, and individually per page in Fusion Page Options.


    How To Get The Old Portfolio Grid Layout

    The previous “Portfolio Grid” layout template we had is no longer needed due to our new featured image size options. Now you can use any of our 1-6 column portfolio templates to achieve this look. Simply set the “featured image size” option to “auto” which will allow the original image ratio to show. For additional information on the featured image sizes, please see this section of our documentation.


    Portfolio Single Post Page

    02/16/2015

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

    1. Featured Images

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


    2. Featured Videos

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


    3. Featured Image Size On Single Post Page

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

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

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


    4. Selecting The Column Width Layout

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

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

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

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


    5. Project Description Section

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


    6. Project Details Section

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

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

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

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

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


    7. Using Fusion Builder

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


    8. Portfolio Single Post Fusion Page Options

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

    Click Here To View The Portfolio Post Options


    Portfolio Single Post Page Extended

    04/18/2016

    If you’d like to take your portfolio posts further, you can choose to 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.

    Single Post Page Elements Can Be Controlled In Two Locations

    • Fusion Theme Options – these are global options that will affect every portfolio post that is not overridden by Fusion Page Options. View additional information here.
    • Fusion Page Options – these are options that will only affect the individual post they are applied to. When set, they will override the global theme options. View additional information here.

    Single Post Page Elements In Fusion Theme Options

    These options are found under the Avada > Theme Options > Portfolio > Portfolio Single Post sub-panel. Customizing these options will affect all Portfolio posts and pages but can be overridden by the Fusion Page Options on each portfolio post you create.

    Previous/Next Pagination – Illustrated as A on the screenshot, this option allows you to turn the previous/next post links on or off.

    Featured Image/Video on Single Post Page – Illustrated as B on the screenshot, this option allows you to turn featured images and videos on single post pages on or off.

    First Featured Image – Illustrated as C on the screenshot, this option allows you to turn only the first featured image on single post pages on or off.

    Featured Image Column Size – Illustrated as D on the screenshot, this option allows you to choose if the featured image is full or half width. Choose between Full Width or Half Width.

    100% Width Page – Illustrated as E on the screenshot, this option allows you to turn the 100% width page feature for portfolio posts on or off.

    Project Description Title – Illustrated as F on the screenshot, this option allows you to turn the project description title on or off.

    Project Details – Illustrated as G on the screenshot, this option allows you to turn the project details on or off.

    Open Post Links In New Window – Illustrated as H on the screenshot.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 on the screenshot, this option allows you turn the comments on or off.

    Author – Illustrated as J on the screenshot, this option allows you to turn the author name on single portfolio posts on or off.

    Social Sharing Box – Illustrated as K on the screenshot, this option allows you to turn the social sharing box on or off.

    Related Posts – Illustrated as L on the screenshot, this option allows you to turn the related posts on or off.


    Single Post Page Elements In Fusion Page Options

    The options listed below are located under the Fusion Page Options > Portfolio box inside every individual portfolio page. Customizing these options will affect all Portfolio posts and pages but can be overridden by the Fusion Page Options.

    Width (Content Columns for Featured Image) – Illustrated as A on the screenshot, this option allows you to choose if the featured image is full or half width. Choose between Default, Full Width or Half Width.

    Use 100% Width Page – Illustrated as B on the screenshot, this option allows you to choose to display the post at 100% browser width. Choose between Default, Yes or No.

    Show Project Description Title – Illustrated as C on the screenshot, this option allows you to show or hide the project description title. Choose between Default, Yes or No.

    Show Project Details – Illustrated as D on the screenshot, this option allows you to show or hide the project details text. Choose between Default, Yes or No.

    Disable First Featured Image – Illustrated as E on the screenshot, this option allows you to disable the first featured image on single post pages. Choose between Default, Yes or No.

    Video Embed Code – Illustrated as F on the screenshot, this option allows you to insert a Youtube or Vimeo embed code.

    Youtube/Vimeo Video URL for Lightbox – Illustrated as G on the screenshot, this option allows you to insert the video URL that will display in a the lightbox.

    Project URL – Illustrated as H on the screenshot, this option allows you to insert the URL the project text links to.

    Project URL Text – Illustrated as I on the screenshot, this option allows you to insert custom project text.

    Copyright URL – Illustrated as J on the screenshot, this option allows you to insert the URL the copyright text links to.

    Copyright URL Text – Illustrated as K on the screenshot, this option allows you to insert custom copyright text.

    Featured Image Width – Illustrated as L on the screenshot, this option allows you to use a percentage or pixel value to set the featured image’s width. For example, 100px or 100%.

    Featured Image Height – Illustrated as M on the screenshot, this option allows you to use a percentage or pixel value to set the featured image’s height. For example, 100px or 100%.

    Image Rollover Icons – Illustrated as N on the screenshot, this option allows you to choose which rollover icons to display. Choose between Default, Link + Zoom, Link, Zoom or No Icons.

    Link Icon URL – Illustrated as O on the screenshot, this option allows you to insert a URL that the link icon links to.

    Open Post Links In New Window – Illustrated as P on the screenshot, this option allows you to choose to open the single posts page, project url, and copyright url links in a new window. Choose between Default, Yes or No.

    Show Related Posts – Illustrated as Q on the screenshot, this option allows you to show or hide the related posts. Choose between Default, Yes or No.

    Show Social Share Box – Illustrated as R on the screenshot, this option allows you to show or hide the social share box. Choose between Default, Yes or No.

    Show Previous/Next Pagination – Illustrated as S on the screenshot, this option allows you to show or hide the post navigation. Choose between Default, Yes or No.


    Portfolio Filters

    07/22/2015

    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.

    Recent Work Shortcode

    07/22/2015

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

    How To Use The Recent Work Shortcode

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

    Step 2 – Use the visual or text editor tab and then click our Shortcode Generator icon on the top row.

    Step 3 – The shortcode generator window will popup, select Recent Work from the dropdown list

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

    Step 5 – Click Publish to save the page


    Click Here To View Our Complete Shortcode Documentation

    Featured Image Size Options

    04/18/2016

    Every portfolio post you create requires a featured image. This feature image will display on the main portfolio page, archive/category page, single post page, and in the recent work shortcode and widget. Avada has different settings to control the size of the featured image that is displayed. Please see the below information regarding the two different size options.

    Portfolio Featured Image Size Options

    Fixed Featured Image Size

    The Fixed option will crop each featured image to be the same size on the portfolio page template or recent work shortcode. This gives a consistent look because each image is cropped to have the same width & height. See the image sample image on the right.

    IMPORTANT NOTE – Use a site width of 940px for the fixed featured image size to look the best. This Fixed option has to generate a predetermined image size for several conditions, and the sizes are based off a site width of 940px. We cannot generate a predetermined size for all site width possibilities, so this option works best with 940px site width. If you use a site width larger than 940px, use the Auto option.

    Click Here To See Fixed Option On A Site Width Larger Than 940px


    Auto Featured Image Size

    The Auto option will allow each featured image to show at the original ratio (not cropped) on the portfolio page template or recent work shortcode. This produces a grid look because most of the time each image you upload is not the exact same size. See the image sample on the right.

    IMPORTANT NOTE – You can still get a consistent look for your images with the Auto setting. To do this, you need to make sure the featured images you upload 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. Or 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 Auto Option With Consistent Sized Images


    Portfolio Featured Image Option Locations

    Fusion Theme Options

    Navigate to Theme Options > Portfolio tab to find this selection. This is a global setting that will apply to all portfolio page templates. Fusion Page Option can override this.

    Fusion Page Options

    Create a new page or edit an existing portfolio page and look in the Fusion Page Options box. Click on the portfolio tab and choose fixed or auto. This will override Fusion Theme Options.

    Recent Work Shortcode Option

    The recent work shortcode can be used on any page or post, so it has its own dedicated options for each shortcode instance. Use the Fusion Builder or Shortcode Generator to make the selection.

    Related Projects

    04/18/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.


    Sliders

    03/10/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

    05/13/2015

    Once you have created your sliders, you need to assign them to a page or use a shortcode, if the slider offers one. There are three methods to assigning a slider to a page. First, you can assign a slider via our Fusion Page Options. Doing so will always put the slider directly under the main navigation. The second method is to insert the slider via our Fusion Page Builder using Builder elements, and the third method is to use our Shortcode Generator and insert it in the post content field. Read below for information on these methods.

    How To Assign A Slider Using The Fusion Page Options

    Step 1 – Locate the Fusion Page Options box below the editing field. Here, you will find a Sliders tab.

    Step 2 – In the Slider tab, locate the Slider Type option and select your desired slider from the dropdown field.

    Step 3 – Then select the name of the slider you’d like to display under the corresponding Slider dropdown field. For example, if you opted to use a Fusion Slider, then select a name from the Select Fusion Slider field.

    Step 4 – There are also various options you can set, such as the position of the slider, the fallback image, and also an option to disable any Avada Styles for Revolution Slider.

    Step 5 – Once finished, click Publish to save the settings.

    IMPORTANT NOTE – There is a Slider Fallback Image field in the slider options. If you have a fallback image inserted, it will override the slider on all responsive devices.


    How To Assign A Slider Using Builder Elements

    Step 1 – Click the Fusion Page Builder button just above the page editing field.

    Step 2 – Go to the Builder Elements tab, which is where all our shortcodes are located.

    Step 3 – Locate the Slider shortcode you’d like to use. You can click the shortcode to add it to the page, or simply drag and drop it to your desired position.

    Step 4 – Click the Edit Element button on the upper right corner of the builder element to bring up the options page, then select the name of the corresponding slider.

    Step 5 – Once you’re finished customizing your slider, click the Save button to apply the changes you made.


    How To Assign A Slider Using The Shortcode Generator

    Step 1 – Make sure you’re on the Visual editing tab.

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

    Step 3 – Other sliders like Client Carousel, Image Carousel, Slider, Flexslider and Woo Featured Slider can be used from our Shortcode Generator. Click the Shortcode Generator icon, then select the slider from the dropdown list and make your selections.

    Step 4 – Click Insert Shortcode button once you’re finished customizing the slider to add it to the page.

    Step 5 – Once finished, click the Publish to save your changes.


    Import Our Demo Sliders

    02/16/2015

    Our Fusion Theme Options Demo Content Importer includes two sample sliders from both the Revolution Slider and Layer Slider, 3 Fusion Sliders and one Elastic Slider. Our demo contains additional sliders that we cannot include in the importer due to the overall size. The sample sliders we give are a great representation of each slider. However, if you wish to have all of the layer, revolution and Fusion sliders, you can download them below. Please read each section carefully. Each slider has its own method of importing, see below for each method.

    Common Questions & Issues

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

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

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

    Click Here To Download Our Slider Exports

    Slider Position

    04/18/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.

    Revolution Slider

    04/29/2016

    Avada includes the popular Revolution Slider Created By ThemePunch. This slider is a beautifully animated slider that is 100% responsive and has some amazing options. We cannot cover everything here but we outline how to setup a slider and how to add slides to it. We also include a video tutorial walk through.

    View ThemePunch Documentation Purchase Plugin For Auto Updates* View Import/Export Docs
    * Your purchase of Avada includes a copy of the Revolution Slider. If you wish to receive auto updates and plugin support from ThemePunch, it requires a separate purchase of the plugin.

    Revolution Sliders & Slides

    How To Create A New Revolution Slider

    Step 1 – Click on the ‘Revolution Slider’ 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 Revolution Slider 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 Revolution Sliders 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.





    Revolution Slider 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

    fusionrevslidermobilepadding in the ‘Classes’ field located in the ‘Attributes’ section of the slider creation page.

    Revolution Slider Overview

    Layer Slider

    04/27/2016

    Avada includes the popular Layer Slider Created By Kreatura. This slider is a beautifully animated slider that is 100% responsive and has some amazing options. We cannot cover everything here but we’ve outlined how to setup a slider and add slides to it. We’ve also included a video tutorial walk through.

    View Documentation From Kreatura Purchase Plugin To Receive Auto Updates*
    * 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.

    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 make can have multiple layers 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 Creation Page Overview

    Fusion Slider

    04/18/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, hide the video controls 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

    03/02/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

    10/11/2015

    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

    04/13/2015

    Aside from our amazing list of Premium Featured Sliders, Avada also features other slider types such as the Slider and Post Slider shortcode, Portfolio and Blog Post Slider, Image and Client Carousels, WooCommerce Featured Products Slider, and finally, the WooCommerce Products Slider.

    Slider Shortcode

    Our Slider Shortcode is ideal for users who prefer a simpler, and more basic slider to showcase their website’s images because it’s very quick and easy to upload image or video slides.

    How To Create A Slider Shortcode

    Step 1 – Insert the Slider element onto your page with the Fusion Builder.

    Step 2 – Edit the Slider element by clicking the edit icon on the top right corner of the element box.

    Step 3 – Set the slider width and height. Setting it to 100% will fill the area of the surrounding container.

    Step 4 – Select the Slider Item 1+ box to edit the first slide.

    Step 5 – Select the Slide Type: image, or video. For images, click the Upload button and select the image. For videos, insert the Youtube or Vimeo shortcode.

    Step 6 – To add more slides, select the Add New Slide button.

    Step 7 – Once finished, click the Save button to insert the shortcode into the page.


    Post Slider Shortcode

    Avada’s Post Slider Shortcode automatically pulls your blog posts, titles and excerpts into a slideshow. To view live samples of this shortcode, visit our live demo by following this link.

    How To Create A Post Slider Shortcode

    Step 1 – Insert the Post Slider element onto your page with the Fusion Builder.

    Step 2 – Edit the Post Slider element by clicking the edit icon on the top right corner of the element box.

    Step 3 – Customize your settings such as the Layout, Category, Number of Slides, etc.

    Step 4 – Once finished, click the Save button to insert the shortcode into the page.

    POST SLIDER SHORTCODE 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.

    IMPORTANT NOTE – Only posts with Featured Images will be displayed in the Post Slider.

    Portfolio and Blog Post Slider

    Portfolio and Blog Post Sliders aren’t shortcodes, 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 Carousels

    Avada’s Image Carousel shortcode 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.

    How To Create An Image Carousel Shortcode

    Step 1 – Insert the Image Carousel element onto your page with the Fusion Builder.

    Step 2 – Edit the Image Carousel element by clicking the edit icon on the top right corner of the element box.

    Step 3 – Click the Image Carousel Item 1+ box to edit the first image.

    Step 4 – If you’d like to add another image, simply click the Add New Image button below.

    Step 5 – Once finished, click the Save button to insert the shortcode into the page.


    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.

    WooCommerce Featured Products Slider

    The WooCommerce plugin provides a WooCommerce Featured Products Slider shortcode 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.

    How To Create A WooCommerce Featured Products Slider

    Step 1 – Insert the WooCommerce Featured Products Slider element onto your page with the Fusion Builder.

    Step 2 – To set a product as featured, set the item as Starred in the WooCommerce Products list inside the Products tab located in your admin panel.


    WooCommerce Products Slider

    Another feature that the WooCommerce plugin provides is the WooCommerce Products Slider shortcode. This Slider/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.

    How To Create A WooCommerce Products Slider Shortcode

    Step 1 – Insert the WooCommerce Products Slider element onto your page with the Fusion Page Builder.

    Step 2 – Edit the WooCommerce Products Slider element by clicking the edit icon on the top right corner of the element box.

    Step 3 – Customize your settings such as the Layout, Category, Number of Slides, etc.

    Step 4 – Once finished, click the Save button to insert the shortcode into the page.


    Purchase Codes For Premium Sliders

    03/09/2015

    When purchasing Avada, you’ll be provided with a unique Purchase Code that you can use to receive auto-updates for the Avada theme, as well as to sign up at our support center. The purchase code you receive can only be used for the Avada theme.

    The Avada purchase code cannot be used to register or receive auto-updates from the Revolution Slider or Layer Slider

    You can only register the 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.

    Conditional Script Loading

    04/27/2015

    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

    03/10/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

    04/18/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

    04/18/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

    03/10/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. From version 3.6 onwards, 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

    03/13/2015

    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 Users

    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:

    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:

    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 or 4.0+ Users

    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:

    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:

    Step 4 – After the wp-config.php file is edited, login to WP-admin dashboard and navigate to the Settings tab, then to the General Settings page.

    Step 5 – In the General Settings page, make sure the Site Language field is set to your desired language.


    Included Language Files

    01/27/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 Avada’s language files from our GitHub Repo here.

    Step 2 – Click the ‘Download ZIP’ button on the upper right corner to download the language files.

    Step 3 – Copy the .po and .mo files of your selected language and paste it to the wp-content/languages/themes folder of your theme install.

    Step 4 – Rename the files and add Avada- in the beginning. For example, Avada-de_DE.po and Avada-de_DE.mo.

    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 Deutsch from the dropdown.

    Storing Translation Files

    01/20/2016

    Storing translation files in the right directory is very important to make sure the translations you’ve downloaded, created or edited remains functional and intact. The best way to do this is store it 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/fusion-core/ folder. If you don’t have the languages and plugins folder, simply create the languages folder, and the plugins 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 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

    02/02/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 Core plugin, that’s 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 Core plugin. View our article about Translating Fusion Core here.
    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. 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 these files in the Languages folder:

    • Avada.po – 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.
    • Avada.mo – This file is the complied export from Avada.po file and is used by WordPress to translate the theme.

    In the event that your language isn’t included in the pre-created language files, these files can be used as a reference for your own translations. In order for WordPress to recognize the language to which you want to translate the theme, you must name the Language files 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.


    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.po located in the Languages folder, translate all text strings, then save the .po file with your language code. 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 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.po in POEdit by selecting the Create New Translation button. 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 in wp-content/languages/themes folder and that they have the correct file name. 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

    Step 1 – Copy your existing Custom Language folder from your current theme version to the updated version’s Language folder.

    Step 2 – Open your Custom Language folder in POEdit. 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.po file. 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 Knowledgebase Fixes

    Step 1 – After applying the Knowledgebase fix or fixes, open your existing Language file in POEdit and click Catalog in the toolbar, then select the Properties option.

    Step 2 – In the Opening 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

    01/21/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:
    • Frontend – The Frontend for the shortcodes, including the Blog shortcode.
    • Backend – The Backend labels for Portfolio, FAQ’s, Elastic Slider, Fusin Slider and Custom Post Types.
    • Shortcode Generator -T he Shortcode Generator along with it’s items.
    • Fusion Page Builder – The Fusion Page Builder along with it’s builder elements.
    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. The language files for Fusion Core are located in the wp-content/plugins/fusion-core/languages folder. Inside the Languages folder, you will find these files:

    • fusion-core-en_US.po – 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.
    • fusion-core-en_US.mo – This file is the complied export from fusion-core-en_US.po file and is used by WordPress to translate the plugin.

    In the event that your language isn’t included in the pre-created language files, these files can be used as a reference for your own translations. In order for WordPress to recognize the language to which you want to translate the plugin, you must name the Language files accordingly using the ISO Language Codes. The text domain for our Fusion Core plugin is fusion-core. For example, if you wanted to translate the Fusion Core plugin to the Deutsch language, the filenames would be fusion-core-de_DE.po and fusion-core-de_DE.mo.


    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 fusion-core-en_US.po located in the Languages folder, translate all text strings, then save the .po file with your language code. 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 plugin, or one specific area. You do not have to translate the entire plugin, you can choose what you translate inside the fusion-core-en_US.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-en_US.po in POEdit and 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 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 Theme Update

    Step 1 – Copy your existing Custom Language folder from your current theme version to the updated version’s Language folder.

    Step 2 – Open your Custom Language folder in POEdit. 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-en_US.po file. 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 Knowledgebase Fixes

    Step 1 – After applying the Knowledgebase fix or fixes, open your existing Language file in POEdit and click Catalog in the toolbar, then select the Properties option.

    Step 2 – In the Opening 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

    01/20/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

    01/20/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

    01/20/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

    01/20/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

    01/20/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

    04/20/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

    11/11/2015

    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

    04/20/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

    04/20/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

    04/20/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

    04/18/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

    04/20/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.

    Widget Area Shortcode

    04/18/2016
    IMPORTANT NOTE – The Widget Area Shortcode is available only in Avada version 3.9 or higher.

    Avada includes 5 areas of the theme that are widget ready, which means they can display widget sections. One of them being the Fusion Builder widget shortcode. Adding this shortcode to any area on your page or post creates a custom widget section for which you can assign any widget section created in here -> WP Dashboard > Appearance > Widgets. Before you can use the widget area shortcode, you must first create a widget section.

    Click Here To Read Our Creating Widget Sections Article

    How To Add a Widget Area Shortcode

    Step 1 – Create a new or edit an existing page/post.

    Step 2 – Click the ‘Fusion Page Builder’ button to switch to the page builder.

    Step 3 – Click on the Builder Elements tab, then locate the Widget Area shortcode.

    Step 4 – Once you’ve located the Widget Area shortcode, click it to add it to the page or drag and drop it into the desired position in the page/post.

    Step 5 – Click the Edit Element icon on the upper right corner of the shortcode to bring up the options window.

    Step 6 – Select the widget section you’d like to display from the ‘Widget Area Name’ dropdown box.

    Step 7 – Once done, click ‘Save’.


    Twitter Widget

    04/18/2016
    IMPORTANT NOTE – This new and improved Twitter widget is only available in Avada 3.8.7 or higher.

    In Avada 3.8.7 or higher, a new and improved Twitter widget is available to use on any sidebars and footer columns, in the slidingbar and also the widget shortcode. The Twitter widget comes in 3 styles, the Twitter Preconfigured Style, 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 will import the settings you’ve set in Twitter’s Widgets Configurator. You only need to enter the Twitter Widget ID to import your preconfigured Twitter widget. To learn how to use this style, please continue reading below.

    Twitter Style – This style will import only your tweets from Twitter’s Widgets Configurator. You then have to set the different options found under this style to customize your Twitter widget. To learn how to use this style, please continue reading below.

    Avada Style – This is the classic Avada style, the widget had before Avada 3.8.7. It requires you to create a new app via http://apps.twitter.com/. You will then be requested to enter several Keys and Access Tokens. To learn how to use this style, please continue reading below.


    How To Find Your Twitter Widget ID

    Step 1 – Once you’ve created a new widget using Twitter’s Widget Configurator, you can find the Twitter Widget ID in two areas.

    Step 2 – To make sure you find your Twitter Widget ID in both areas, you must click ‘Create Widget’ first.

    Step 3 – The first area where you can find your Twitter Widget ID is in your address bar. It will be the long string of numbers just between /widgets/ and /edit?focus_textarea. Please view the screenshot below to view a sample.

    Step 4 – The second area where you can find your Twitter Widget ID is in the text area just below the Preview section. Scroll to the left, and you will find a parameter called data-widget-id and it will contain your Twitter Widget ID. For example, data-widget-id=”641750882904731648″. You can also view the screenshot to the left to view a sample.


    How To Use Twitter Preconfigured Style

    Step 1 – First go to https://twitter.com/settings/widgets/new/user and sign in with your own twitter account.

    Step 2 – Once logged in, you will be redirected to Twitter’s Widget Configurator.

    Step 3 – Configure the options to your liking. There is a Preview window on the right to show you what your widget will look like.

    Step 4 – Once you’re happy with your settings, click the Create Widget button.

    Step 5 – When you click Create Widget, the URL will change and will include your Twitter Widget ID. See above on How To Find Your Twitter Widget ID.

    Step 6 – Copy and paste your Twitter Widget ID into the provided field.

    Step 7 – Once you’re finished, don’t forget to click save.


    How To Use Twitter Style

    Step 1 – First go to https://twitter.com/settings/widgets/new/user and sign in with your own twitter account.

    Step 2 – Once logged in, you will be redirected to Twitter’s Widget Configurator.

    Step 3 – You can configure the widget in Twitter’s Widget Configurator, however this widget style will only import your tweets and not the customizations. Once finished, click the Create Widget button.

    Step 4 – When you click Create Widget, the URL will change and will include your Twitter Widget ID. See above on How To Find Your Twitter Widget ID.

    Step 5 – Copy and paste your Twitter Widget ID into the Twitter Widget ID field. Fill in the rest of the fields such as Twitter Username, Number of Tweets, etc.

    Step 6 – Once you’re finished, don’t forget to click save.


    How To Use Avada Style

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

    Step 2 – Once you’ve logged in, click the ‘Create New App’ button.

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

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

    Step 7 – Make sure you click Save. Please wait a while due to Twitter’s 10 minute cache on their end, so changes can take a while to take effect.


    Facebook Widget

    04/18/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

    04/18/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

    01/29/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

    05/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

    05/15/2016

    If your site is not running as fast as you’d like, there could be a few different issues. Our live demo is a representation of how fast your site should be. 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

    05/15/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 thetheme 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.

    Using W3TC + Avada

    05/15/2016

    W3 Total Cache is a third party cache plugin that provides easy optimization for your website. Installing the W3TC plugin on your website has a lot of benefits, such as improving your website’s overall performance, reducing page load time, and improving you web server’s performance. To learn more about the W3TC plugin, follow this link to the W3TC Website. Continue reading below to find out how W3TC works with Avada.

    How To Install the W3TC Plugin

    Step 1 – Navigate to the Plugins tab in your admin sidebar, then to the Add New option.

    Step 2 – Search for W3 Total Cache in the search bar and click the Install Now button.

    Step 3 – After the plugin finishes installing. Make sure to click the Activate Plugin button.


    W3TC Configuration

    Depending on your server, you may need to configure the W3TC plugin specifically to fit your website. To learn more about configuring the W3TC plugin, please read this in depth article; Configuring W3 Total Cache: An Introduction.

    Pre-Configured W3TC Settings & Files From The Avada Demo

    If you don’t know where to start with configuring W3TC, you can choose to import our settings that we use on our demo. Please note that these settings are not a one size fits all. W3TC interacts with your server, and each situation can be different. Please contact your host if issues arise.

    To download our exported W3TC Plugin settings, follow this link to our Kowledgebase article.

    IMPORTANT NOTE – These exported settings are only for Avada 3.2 and higher.

    Common Issues & Questions

    1. My site breaks when I use the W3TC plugin.

    If you activate W3TC plugin and then your site no longer works, it is because jquery.js and jquery-migrate.js files need to be excluded from magnification. Please view our Knowledgebase article here to learn how to solve this issue.

    2. My website is still slow even after installing the W3TC plugin.

    If your site is not running as fast as you’d like, there could be a few different issues. Our live demo is a representation of how fast your site should be. Please view our Knowledgebase artice here to learn what factors may cause your website’s slow speed.

    Install & Setup WooCommerce

    05/10/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

    04/18/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

    01/20/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 3.7.

    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 excerpt 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 or Miro Video Converter. Please see the links below for information on how to do this.

    View Handbrake documentation. View Miro Video Converter 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 or Miro Video Converter. Firefogg only works in Firefox. If you’re using a different browser, we recommend downloading Miro Video Converter instead

    Step 2 – If you choose to use Firefogg, you can simply upload your .MP4 video and it will automatically convert it to .WEBM format. If you choose to use Miro Video Converter, you must first download the software before you can convert a .MP4 video to .WEBM format.

    IMPORTANT NOTE – Handbrake, Miro Video Converter 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

    05/06/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

    01/20/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

    02/16/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

    02/16/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

    01/20/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

    05/10/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: