General

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

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


Requirements For Avada

To use Avada, you must be running WordPress 3.1 or higher, PHP5.4 or higher, and mysql 5 or higher. 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

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.

What’s Included

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

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

Free Theme Support

All of our items come with free support, and we have an advanced 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 Receive Free 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, click the “Create A New Ticket” button in the right sidebar.

Click Here To Setup Your Support Account

How To Locate Your Purchase Code

ThemeForest API Key

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

Register Your Purchase

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

Registering your purchase needs to be completed for you to receive theme support and automatic updates. This is a three part process that is outlined below.

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

Step 1 – Signup For Support

Step 1 – Create an account with ThemeFusion by following this link.

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 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 click your username in the top right corner to access the dropdown.

Step 2 – Select the Settings tab from the dropdown.

Step 2 – The My Account page will load. Click the API Keys tab on the bottom 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 in the list above. Copy the key to use for Step 3 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 Purchase Code

Themeforest provides you with a purchase code for each item you purcahse. 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

purchase code

Guided Tour

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

Licensing

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

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, and our very own Fusion 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.
  • Fusion Plugins tab – This tab is where you will find new and exciting products made by ThemeFusion.
  • 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

Under the Support tab, you will 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 a link to our documentation, knowledgebase, and video tutorials. To gain access to our support forum and resources, you must first register your purchase.

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, Agency demo, Mobile App demo, Travel demo, Cafe demo, and Fashion demo. Before installing any of our demos, please make sure all our included plugins are installed and activated.

Fusion Plugins tab

Under the Fusion Plugins tab, you will find all the included Plugins with Avada. 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.

Hosting

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

Before You Submit A Ticket

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

Theme Customization

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

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

Downloading The Main Files Gives You All The Content Listed Below

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

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 to find 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 and activate the required & recommended plugins: Revolution Slider, Layer Slider and Fusion Core.

Step 6 – In the notification message, click the ‘Go Install Plugins’ button to go to the Fusion 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

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 and activate the required & recommended plugins: Revolution Slider, Layer Slider and Fusion Core.

Step 6 – In the notification message, click the ‘Go Activate Plugins’ button to go to the Fusion 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

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

Included Plugins With The Avada Theme

  • Fusion Core – This is our companion plugin that is required to use 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 plugin updates are provided with theme updates. When a theme update is ready, we will include the plugin updates with it.

Plugin Installation & Update Notification

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

Additional Plugins We Use On Our Demo

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

Common Issues & Questions

1. When I Activate The Plugins The Site Crashes

This is not a theme issue but a server configuration issue. If this ever happens it is most likely due to low PHP configurations on your server and it can be easily remedied by upping the values. Check out our Requirements For Avada post.

2. How Do I Update The Premium Sliders

All plugin updates, including the premium slider plugins (revolution slider, layer slider) are included with the new theme version. Since you purchased a theme that includes a license for these plugins, we have to issue plugin updates when we issue theme updates. The only way to update the plugins without getting a theme update is to purchase the slider plugins individually.

How To Update The Theme

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

Before You Update, Always Check The Important Update Information

Click Here To View The Important Update Information

Method 1: Using 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 your product, and we issue a theme update, you will receive a notification message in your WordPress admin Updates or Themes section. Please see below for steps on how to do this.

Auto Updating The Theme – Once you have setup the auto updater, you will get notified in the Updates and Themes section of your admin when a new theme update is ready to be installed. WordPress checks for new updates every 12 hours. Follow the onscreen prompts to update the theme.

auto updates

Auto Updating The Plugins – After you update the theme, you will see another notification message to update the plugins. Follow the on screen prompts to update the plugins. If the notification message was dismissed, navigate to Appearance > Install Plugins to complete the update process.

auto updates

IMPORTANT NOTE – You must first register your product to use the automatic theme updater. WordPress checks for updates only once every 12 hours.

Click Here To Find Out How To Register Your Product

Method 2: Traditional Update Method

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 next to it and either choose to download the Installable WordPress Theme, which is just the WordPress file, or choose to download the Main Files which is the entire package that contains everything.

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 Your Theme Via FTP

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

Step 2 – Retrieve the Avada.zip file from your new ThemeForest download and extract the file to get the 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. Choose to Replace the current one if you did not delete the old Avada theme folder.

Step 4 – Lastly, update the included plugins. You will see a notification message letting you know a new version of the plugins are available and need to be updated. Follow the onscreen prompts to update the plugins

IMPORTANT NOTE – If you upgrade through FTP, please visit your WP-admin so any new theme options can be registered. If you do not do this and also have wp-debug turned on, you may see php notices on the front end. They will disappear once you visit the WP admin.

How To Update Your Theme Via WordPress

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

Step 2 – Retrieve the new Avada.zip file from your ThemeForest download. If you downloaded the Main Files from ThemeForest, you need to unzip the archive file you received to get the Avada.zip file inside.

Step 3 – Upload the Avada.zip file to the Appearance > Themes section by clicking on the “Install Themes” tab at the top and then choosing to upload the zip file.

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

Step 5 – Lastly, update the included plugins. You will see a notification message letting you know a new version of the plugins are available and need to be updated. Follow the onscreen prompts to update the plugins

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

Avada 3.8 is a major update that has many added features, options and code improvements. Four beautiful new demos that can be imported with one click, true parallax sections that work on mobile, WooCommerce list view, all new sticky header design/setup, code refactoring that produces stunning performance improvements and so much more. Please carefully read the information below when updating. To view our important update information for past updates, click here.

If you are updating to Avada 3.8.2 from 3.8 or 3.8.1 and use a retina logo you will need to set the logo width and height dimensions. Due to a unforeseen conflict we had to add them back after removing them. Go to theme options > logo and enter the width and height of your regular 1X logo.

Avada v3.8 Important Information

1. Continued Refactoring / CSS Class Name Changes

Part of our code refactoring involved our CSS. We have renamed CSS selectors and updated HTML structure for headers, footers, blog, portfolio and few other areas to follow consistent naming conventions. This was a necessity that allows us to optimise and organize our code and reduces conflicts with other plugins.

For the areas mentioned above, also the core template files have been adjusted to make them consistent and easier to maintain. If you changed template files, please keep that in mind.

WHAT DOES THIS MEAN FOR YOU?
Please take care when updating if you have used a lot of custom CSS. The areas that were refactored are listed above. If you see changes, all it takes is to inspect the page with browser dev tools and find the new class name.

2. All New Sticky Header Setup

Sticky headers in Avada have had a design and setup change. The sticky header no longer has a delayed entrance and never leaves the viewport. This produces higher performance since the menu no longer has to be duplicated and also produces a much more clean look and animation. Each header (1-5) will accurately reflect itself in the sticky header.

WHAT DOES THIS MEAN FOR YOU?
A faster performing site with a cleaner sticky header animation/entrance. If you are using header 4 or 5, the menu will only show by default. If you wish to show the logo in the sticky header, there is a new theme option to activate it on the sticky header tab in theme options.

3. Brand New ilightbox!

We’ve made the switch to a more modern, feature rich lightbox called iLightbox. This is a $20 value that you receive for free. iLightbox is faster, more powerful and lightweight.

WHAT DOES THIS MEAN FOR YOU?
Only good things! There are now 6 design skins you can choose from as well as navigation thumbnail locations and more. All of these new options are on the lightbox tab in theme options.

4. New Design & Features For All Carousels

Carousels have received a facelift. A design change has moved the images out to the edge and placed the navigation arrows on top of the images. This allows for more room, larger images and a cleaner look. In addition we have added several new options to customize the look of the carousels. Column spacing, column size, mouse click to drag scroll, navigation visibility and more! Because of these changes, we combined the client carousel and the image carousel into one builder element. There is no longer a need for both.

WHAT DOES THIS MEAN FOR YOU?
More beautiful carousel designs that are customizable in many ways. The image carousel element has all the new options built into it, and the same options can be used for for related posts/projects in theme options > extra. All previous used client carousels will be converted to image carousel when updating.

5. New Welcome Screen With Auto Updates, Product Registration, Demos, Plugins, System Status

We have drastically streamlined the user experience by adding a welcome screen that allows you to quickly register your product to receive auto updates, access our support links, install beautiful demos with one click, manage our plugins and check on your system status. All of these new sections make your life easier.

WHAT DOES THIS MEAN FOR YOU?
Auto updates and install demos are no longer located in the theme options panel. They have their own dedicated section in our Welcome Screen along with the ability to mange our plugins and check system status for any issues that may arise.

6. Lightbox Shortcode Combined With Image Frame Shortcode

There is no longer a need for a separate lightbox shortcode element. Any unique feature to the lightbox shortcode has been combined with our image frame shortcode for more flexibility.

WHAT DOES THIS MEAN FOR YOU?
All features and functionality are the same and any lightbox element you have on a page will be converted to an image frame element upon updating.

7. Facebook Widget Requires App ID On June 23rd

Facebook has changed the requirements for their widget. Starting on June 23rd you will need to create an app Id (similar to Twitter widget) to utilize the Facebook widget. We have already prepared for this and you can find instructions in our documentaiton here

WHAT DOES THIS MEAN FOR YOU?
By June 23rd you need to create a Facebook app so you can continue to use the Facebook widget. These changes are enforced by Facebook and must be followed to use the widget. In addition, Facebook has dropped the dark/light scheme so it can no longer be used with the new widget. This is imposed by Facebook.

General Update Information

1. It Is Always Recommended To 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. 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.

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

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

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

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

Click Here To View The Avada Change Log

Demo

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.

Import All Demo Content

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

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

Import Avada Agency Pages

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

How To Install The Contact Form 7 Forms

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 short code 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 (there are 2 total). 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.

Contact Form On Contact Page Contact Form Used In Modal

Alternate Demo Method

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, 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 – Download the alternate method demo backup file to your computer.

Step 4 – Using FTP, upload the backup file to wp-content/plugins/all-in-one-wp-migration/backups folder.

Step 5 – Navigate to WP Admin -> All-in-One WP Migration -> Backups page.

Step 6 – Click on the Restore button to start the import process. You will see a success message once it completes.

Step 7 – You will then be automatically logged out. You need to log back in to the WordPress admin area using the following username/password details:

Username: admin Password: admin

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

Manual Demo Import

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

You can find the demo files in the wp-content > themes > Avada > framework > plugins > importer file path. Here, there will be individual folders for each demo theme, and each folder contains their respective demo files. Each folder will have an XML file, the slider files, a theme_options.txt file and a widgets_data.json.

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 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 the Show Widgets Settings button.

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

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

Options are the backbone of Avada. They give you full control over your website and allows you to customize the design without touching a single line of code. There are three major groups of options you can set in Avada, the Fusion Theme Options, Fusion Page Options and Shortcode Options. Below are each options’ descriptions.

  • Fusion Theme Options – Located in Appearance > Theme Options, the Theme Options are considered global options because they can affect everything within the theme.
  • Fusion Page Options – Located individually within each page and post, the Page Options will only apply within the page or post that has them set.
  • Shortcode Options – Located within each builder element, the Shortcode Options will only affect the single shortcode instance that has them set.
IMPORTANT NOTE – Page Options and Shortcode Options will use the Theme Option 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 option example that has both a theme option and a page option.

Fusion Theme Options

Below is a screenshot of the header tab in Theme Options. The 100% Background Image option is checked, 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 tab 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.

Shortcode Options

In addition to Fusion Theme and Fusion Page Options, each individual shortcode has various options. Many of the Shortcode Options are only for the shortcode itself. However, some have corresponding global theme options, as well. The same rule applies here, if there is a global Fusion Theme Option, then the individual Shortcode Option will override it.

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

Avada has an advanced Fusion Theme Options panel that is loaded with options. We have the options organized into logical tabbed sections, and each option has a description of what it will do on the front end. Because of the sizable amount of options Avada provides, we cannot go over them in full detail here in our documentation. We encourage you to please take some time and navigate through each tab to see what we offer. Go to Appearance > Theme Options in your WordPress admin to access the Fusion Theme Options panel. You can also backup your theme options by clicking on the Backup tab. That is a great way to move your custom options from site to site. See below for screenshots and short descriptions of our Fusion Theme Options panel.

IMPORTANT NOTE – we are always adding new options so these screenshots may not reflect the most up to date options.
  • General Options – These options allow you to import demo content, select responsive options, and add tracking codes to your website.
  • Site Width Options – These options allow you to set the layout of your website, overall site width, sidebar width as well as your content’s width.
  • Header Options – These options affect your website’s header. Set your header’s position, size, layout, appearance, padding, and social icons.
  • Sticky Header Options – These options affect your website’s header. You can enable/disable a sticky header on desktop and mobiles and set it’s padding, font size, and logo width.
  • Logo Options – These options allow you to upload a regular or retina version of your logo and favicon to your website. You can also set your logo’s size, alignment and margins.
  • Menu Options – These options are applied to your menu. These options allow you to customize the various settings of the menu.
  • Page Title Bar Options – These options are applied to every page or post, but can be overridden by individual page or post options.
  • Sliding Bar Options – These options allow you to enable/disable the sliding bar as well as customize it.
  • Footer Options – These options affect your website’s footer. These options allow you to customize your website’s footer as well as add copyright and social icons.
  • Sidebar Options – These options allow you to activate global sidebars to your pages, portfolio posts, blog posts, woocommerce, bbpress, etc.
  • Background Options – These options allow you to set a global background image, color or pattern for your website.
  • Typography Options – These options affects your website’s fonts. These options allow you to upload a custom font or select and customize fonts for your menu, headings, and posts.
  • Styling Options – These options allow you to set background colors for your website’s headers, sidebars and page titles. You can also customize your font, element, and menu colors.
  • Shortcode Styling Options – These global options all affect your website’s shortcodes, but can be overridden by the shortcode’s individual settings.
  • Blog Options – These options are all applied to your blog archive pages, blog single post pages and blog meta options.
  • Portfolio Options – These options are all applied to your portfolio archive pages and portfolio single post pages.
  • Social Sharing Box Options – These options allow you to customize your social sharing box settings and enable them in your blog posts or portfolio items.
  • Social Media Options – These options allow you to link your social media accounts to your website, as well as to upload custom social media icons.
  • Slideshow Options – These options allow you to set how many featured images you can have in a post or portfolio item, as well as the speed of the slideshow.
  • Elastic Slider Options – These options affect the Elastic Slider on your website’s homepage.
  • Lightbox Options – These options allow you to customize and control various settings of the lightbox.
  • Contact Options – These options allow you to set google map options and styling for your contact page.
  • Search Page Options – These options affect the search results within your website.
  • Extra Options – These options include miscellaneous options. You can also customize the settings for the image rollover effect.
  • Advanced Options – These options allow you to enable or disable theme features and plugin support.
  • Woocommerce Options – These options assist with the integration between Woocommerce and Avada.
  • Custom CSS Option – This option is where you can add CSS customizations to your website.
  • Backup Options – These options allow you to backup and restore your custom settings and options. These options also allow you to transfer Fusion Theme Options data from site to site.
  • Auto Updates Options – These options allow you to receive automatic updates from ThemeForest.

Fusion Page Options

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. These options override global options.
  • 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 Post Options

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.

IMPORTANT NOTE – we are always adding new options so these screenshots may not reflect the most up to date options.

Portfolio Post Options

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.

IMPORTANT NOTE – we are always adding new options so these screenshots may not reflect the most up to date options.

Typography Options

Within the Fusion Theme Options panel, Avada has a fully customizable Typography tab where you can set custom, Google, or standard fonts, font sizes and font line heights. Everything you need to adjust your website’s font styles and sizes, you will find under the Typography tab! To learn more about which areas are connected to which options, continue reading below.

Custom Font For Menus And Headings

The Custom Font tab lets you upload your custom font. This section requires all 4 files of your custom font, which are .WOFF, .TTF, .SVG and .EOT.

IMPORTANT NOTE – Filling out these options will override the Google Fonts and Standard Fonts settings.

Google & Standard Fonts

The Google Fonts tab lets you choose among the Google fonts that Google has made available. Filling out the Google font options will also override the Standard Fonts options. The Standard Fonts tab, on the other hand, lets you choose among the standard font families that are readily available in almost all computers. To view Google fonts, follow this link. To learn more about these options, continue reading below.

  • Select Body Font Family – Affects the font style of all text within your website that does not have a special, custom option. View a sample here.
  • Select Menu Font -Affects the font style of all navigation or menu items on your website. This does not include submenu items. View a sample here.
  • Select Headings Font – Affects the font style of all headings on your website. To view the complete list of items affected by the H1 – H6 Headings, keep reading below. View a sample here.
  • Select Footer Headings Font – Affects the font style of all footer headings on your website. View a sample here.
  • Select Button Font – Affects the font style of all button texts on your website. View a sample here.
IMPORTANT NOTE – Filling out the Google Fonts options will override the Standard Fonts settings. Set the Google Fonts settings to none to enable Standard Fonts settings.

Responsive Type

The Responsive Type checkbox allows you to enable or disable responsiveness for all headings. Please note this is based off a calculation of font size and screen width and is done automatically. This helps your layout look more proportionate on smaller sizes.


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.
  • Blog Post – Affects the font size of titles inside all Blog Posts. View a sample here.
  • Portfolio Post – Affects the font size of titles inside all Portfolio Posts. 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.
  • Author Title – Affects the font size of the Author Title Heading inside all Blog Posts. View a sample here.
  • Related Posts – Affects the font size of the Related Posts Heading inside all Blog Posts. View a sample here.
  • Leave A Comment – Affects the font size of the Leave A Comment Heading inside all Blog Posts. 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.
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.
  • 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.

View Our Font Weight Instructions

IMPORTANT NOTE – The custom font weight will correspond to the font weight of the uploaded files so these settings do not apply. When using a google font, make sure to load the font weight in the Google Font Settings field that corresponds to the one in parenthesis here. In general, Browser Standard fonts support only Normal (400) and Bold (700) font weights.

Font Letter Spacing

  • 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

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 Rollovers

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 Theme Options are located in Avada > Theme Options > Extras 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, the Image Rollover checkbox 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.

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

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

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

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

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

Disable Categories From Image Rollover – Illustrated as G on the screenshot, the Disable Categories From Image Rollover checkbox is used to enable or disable the categories from image rollovers. 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

Avada 3.8 now uses the revolutionary iLightbox for our lightboxes. 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 available only 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.

Lightbox Fusion Theme Options

Disable Lightbox – Illustrated as A on the screenshot, check or uncheck this checkbox to enable or disable the lightbox.

Disable Lightbox On Single Posts Pages Only – Illustrated as B on the screenshot, check or uncheck this checkbox to enable or disable the lightbox on single posts/blog posts and portfolio pages only.

Lightbox Behavior – Illustrated as C on the screenshot, 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 on the screenshot, this option allows you to set a skin for the lightbox. Choose from Light, Dark, Mac, Metro Black, Metro White, Parade, or Smooth.

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

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

Show Arrows – Illustrated as G on the screenshot, check or uncheck this checkbox to show or hide the navigation arrows.

Show Gallery – Illustrated as H on the screenshot, check or uncheck this checkbox to show or hide the gallery.

Autoplay The Lightbox Gallery – Illustrated as I on the screenshot, check or uncheck this checkbox to enable or disable autoplay for the lightbox gallery.

Slideshow Speed – Illustrated as J on the screenshot, this option allows you to enter a numerical value to set the slideshow speed if the Autoplay The Lightbox Gallery is enabled. For example, 1000 is equivalent to 1 second.

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

Show Title – Illustrated as L on the screenshot, check or uncheck this checkbox to show or hide the image title in the lightbox.

Show Caption – Illustrated as M on the screenshot, check or uncheck this checkbox to show or hide the image caption in the lightbox.

Social Sharing – Illustrated as N on the screenshot, check or uncheck this checkbox to show or hide the social sharing buttons in the lightbox.

Deeplinking – Illustrated as O on the screenshot, check or uncheck this checkbox to enable or disable deeplinking images in the lightbox.

Show Post Images In Lightbox – Illustrated as P on the screenshot, check or uncheck this checkbox to show or hide post images that are inside the post content area in the lightbox.


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.


Page Top & Bottom Padding

Each page you create in Avada will have a default top and bottom padding. These paddings start directly below the header, and then directly above the footer area. Please refer to our diagram below for a visual representation of these boundaries. 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 > Fusion Theme Options > Styling tab under the Layout Options section.

Fusion Page Options

You can also choose to set the top and bottom padding for individual pages in the Page tab in the Fusion Page Options.

Pages With Sliders

Sliders Added Via Fusion Page Options

If you add a Fusion, Revolution or a 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 a Layer Slider using one of the slider shortcodes inside the Fusion Builder, then the slider will sit below the top padding. This means that setting a Top Page Padding will affect the slider.


Diagram

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

Site Width

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

Site Width Options

These are the main options of the Site Width tab. Under here, you’ll find the Site Width option where you can set your site to display in 100% browser width, or your own desired width. You can also choose between the Boxed and Wide layouts in this section.

Site Width

The Site Width option controls the overall site width. 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. There are also left/right padding options to control in our theme options panel for header, footer and main content area.

Layout

There are two layouts you can choose between for your website; Boxed, or Wide. These can be set in the Fusion Theme Options, and individually in Fusion Page Options which overrides Fusion Theme Options. The Boxed layout is meant to contain your website in a specific width, and usually has a background image, pattern or color behind it. The Wide layout, on the other hand, allows your website to span the full browser width.


Content + Sidebar Width Options

In this section, you’ll find the options for pages with one sidebar. Under here, you can set your sidebar’s width, as well as your content width.

  • Content Width – The Content Width option controls the width of the content area.
  • Sidebar Width – The Sidebar Width option controls the width of the sidebar.

IMPORTANT NOTE – The total value of your sidebar’s width and your content’s width must add up to 100.

Content + Sidebar + Sidebar Width Options

In this section, you’ll find the options for pages with two sidebars. Under here, you can set your sidebars’ widths, as well as your content width.

  • Content Width – The Content Width option controls the width of the content area.
  • Sidebar 1 Width – The Sidebar 1 Width option controls the width of sidebar 1.
  • Sidebar 2 Width – The Sidebar 2 Width options controls the width of sidebar 2.

IMPORTANT NOTE – If your sidebar has a color applied, you can set interior padding in theme options > styling > layout options so your content is not right on the edge of the sidebar.

WooCommerce Options

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

  • WooCommerce Number of Products Per Page – This option allows you to set how many products will display per page.
  • WooCommerce Number of Product Columns – This option allows you to set the number of columns for the main shop page.
  • WooCommerce Related/Up-Sell/Cross-Sell Product Number of Columns – This option allows you to set the number of columns for the related, up-sell and cross-sells.
  • WooCommerce Archive/Category Number of Product Columns – This option allows you to set the number of columns for the archive/category pages.
  • WooCommerce Product Tab Design – This option allows you to set the product tabs to be vertical or horizontal. Choose from horizontal, or vertical.
  • Disable WooCommerce Shop Page Ordering Boxes – This option allows you to show or hide the ordering boxes on the shop page.
  • Use WooCommerce One Page Checkout – This option allows you to enable or disable Avada’s one page checkout template.
  • Show WooCommerce Order Notes on Checkout – This option allows you to show or hide the order notes on the checkout page.
  • Show WooCommerce My Account Link in Secondary Menu – This option allows you to show or hide the My Account link on the secondary menu.
  • Show WooCommerce Cart Icon in Secondary Menu – This option allows you to show or hide the Cart icon on the secondary menu.
  • Show WooCommerce My Account Link in Main Menu – This option allows you to show or hide the My Account link on the main menu.
  • Show WooCommerce Cart Icon in Main Menu – This option allows you to show or hide the Cart icon on the main menu.
  • Show WooCommerce Social Icons – This option allows you to show or hide the social icons on the product pages.
  • Product Grid / List View – This option allows you to enable or disable the grid/list toggle on the main shop page and category/archive shop pages.
  • Account Area Message 1 – This option allows you to insert text that will appear on the first message box on the account page.
  • Account Area Message 2 – This option allows you to insert text that will appear on the second message box on the account page.

Center Content In Columns

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 option available. This option allows you to center your content vertically and horizontally, and works best when the Set Columns To Equal Heights option inside Full Width containers. To learn how to center your content, continue reading below.

How To Center Content In Columns

Step 1 – Insert a Column Shortcode and click the Edit Element button.

Step 2 – Set the Center Content option to Yes.

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


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

Color Settings

Did you know that you could change color options using different methods? You can change colors on almost all color options using Hex Codes ( #000000 ), or RGBA ( rgba(0,0,0,0) ) or you can enter transprent for no color. All colors have a corresponding Hex Code and RGBA (Red Green Blue Alpha) value. The main difference between the two is that RGBA has a transparency value, while Hex Codes do not. Continue reading below to learn how to change colors using the different methods.

How To Change Colors Using Hex Codes

Step 1 – Determine which color option you’d like to change. As an example, let’s change the Button Gradient Top Color option.

Step 2 – Click Select Color, then enter a specific Hex Code or drag the color picker around to generate a Hex Code for your chosen color.

Step 3 – Don’t forget to save your changes to apply them.


How To Change Colors Using RGBA

Step 1 – Determine which color option you’d like to change. As an example, let’s change the Button Gradient Top Color option.

Step 2 – Generate an RGBA value using this tool. Must be in this format: rgba(0, 0, 0, 0).

Step 3 – Click Select Color, and paste your RGBA value into the field. Notice how it will convert back to the hex code version of your selected color. Simply paste the RGBA value again to apply it.

Step 4 – Don’t forget to save your changes to apply them.


IMPORTANT NOTE – You must paste the RGBA value into the option field twice for the value to stay. The first time it will be converted to a hex code. Paste it again for it to accept it. In the future versions of Avada we will add opacity fields to each color so RGBA values will not longer be needed.

Responsive Headings

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

In Avada 3.8 or higher, there is a new Responsive Type option that also comes with it’s own customization options. These Responsive Type options are located and can be set gloablly in the Theme Options > Typography > Font Sizes section and also in each Fusion Slider setting. Continue reading below to learn more about each option and how to set them up.

  • Responsive Type – Enables site headings to change font size responsively.
  • Responsive Typography Sensitivity – Numerical value. For example, 6. Values below 1 decrease resizing, and values above 1 increase sizing.
  • Minimum Font Size Factor – Numerical value. For example, 1.5. Used to determine minimum distance between headings and body type by a multiplying value. ex: 1.5

How To Enable Responsive Type Globally In Theme Options

Step 1 – Go to the Theme Options > Typography tab.

Step 2 – Under the Font Sizes section, check the Responsive Type checkbox to enable it.

Step 3 – Enter the Responsive Typography Sensitivity and Minimum Font Size Factor settings to fit your needs.

Step 4 – Don’t forget to click Save All Changes when finished.

How To Enable Responsive Type Per Fusion Slider

Aside from the Fusion Theme Options, you can also set the Responsive Type options in each Fusion Slider. You must have the Responsive Type option in the Fusion Theme Options enabled for these options to work. Setting these options will overwrite the Fusion Theme Options for this particular Fusion Slider.

Step 1 – Go to Fusion Slider > Add/Edit Sliders section.

Step 2 – Select a slider already made or create a new one. At the bottom of the settings are the responsive typography options.

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

Step 4 – Don’t forget to Save your settings when done.



Common Issues & Questions

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

This means that your responsive settings are probably not set correctly. Please check the Responsive Typography Sensitivity and Mininum 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 sizing. Minimum Font Size Factor is used to determine the minimum distance between headings and body type by a multiplying value.

Header

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

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 3 sections; Header Content, Header Background, and Header Social Icons. See below for information on what each section contains.

Step 2 – Expand the Header Content section and select the desired Header Position. All options will automatically load based off your selection. Complete the set of options that go along with the header position or design you’ve selected.

Step 3 – Expand the Header Background section. Insert a header background image if you wish, and adjust the padding if needed.

Step 4 – Expand the Header Social Icon section. Make your selections for social icons, if your header is using them. Please make sure to insert your custom URLs for each social network on the Social Media tab in Fusion Theme Options.

Step 5 – Once complete, click the Save All Changes button.

header setup

Header Content Options

This section is dedicated to the header content. This is where you can choose header position, header designs 1-5, header content areas 1-3, select slider position, etc. The correct options will load based on your selections.

Header Background Options

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

Header Social Icon Options

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

Sticky Header Setup

Position & Transparency

Avada includes an option to position the header to the top, left or right of your website, and set the main assigned slider to be above or below the header. You can also choose to make your header’s background transparent. 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.

Header Position

In Avada > Theme Options > Header tab you will see a “Header Content” section. This section allows you to set the header position, style and other custom options for your header. Choose between Top, Right, or Left. Continue reading below for an explanation on how each position works.

  • Top Position – For Headers set to the top position, you will need to select a Header Layout. You can choose from 5 different layouts along with numerous options. Transparency and slider position will work when using a top header.
  • 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.
  • 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 box 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 a transparent header, the header background area height disappears and the slider below it will show behind the header in its place. This option works best with a page slider or large image so it moves up behind the header. Continue reading below to learn how to change your header’s background color and transparency.

How To Set Header’s Background Color And Transparency

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

Step 2 – Under the Background Colors section, find the Header Background Color and Opacity option.

Step 3 – Select a color by clicking the Select Color button. Enter the hexcode of your desired color or use our built in color picker tool.

Step 4 – Set the Opacity by entering a numerical value in the Opacity field just right of the Color field. Choose from 0, which makes it transparent, to 1, which makes it opaque.

Step 5 – To set the header’s background color and opacity individually per page or post, simply navigate to the Header tab in Fusion Page Options. These options override the Fusion Theme Options.

IMPORTANT NOTE – Transparency only works with Headers in top position, and does not work with right/left positions.


Adding The Logo & Favicons

Avada requires that you upload your logo as an image file. The logo can be any size and up to as large as the container it is in. It is only required to upload one logo, and that one logo will be used in every location. However, Avada is versatile and allows you to upload a unique logo for 3 different areas; default logo, sticky header logo and mobile logo. We allow unique logos in these areas because depending on your logo, the design may need a vertical or horizontal layout as well as other design reasons. Avada is also retina ready, so there are additional options to upload a retina 2x logo for high resolution devices. Please read below for information on each of these areas you can upload a logo as well as information on favicons.

Avada Offers 3 Unique Logo Uploads

  • Default Logo Fields – this is the default logo field. Any logo uploaded here will display in all areas unless a unique logo is uploaded in the other locations.
  • Sticky Header Logo Fields – these are the fields that allow you to upload a unique logo for the sticky header. It is not required, and the default logo will show if no logo is uploaded here.
  • Mobile Header Logo Fields – these are the fields that allow you to upload a unique logo for mobile devices. It is not required, and the default logo will show if no logo is uploaded here.

How To Insert A Default Logo

Step 1 – Navigate to Avada > Theme Options > Logo tab to access the logo options.

Step 2 – You will see two logo upload options under the Default Logo section. the Default Logo field is for standard desktop, and the Default Logo (Retina Version @2x) field is for retina ready devices. Click the Upload button and select your logo file.

Step 3 – If you are uploading a retina logo, you must enter the width and height of the Standard Logo in the Width and Height fields. Do not enter the Retina Logo’s width and height in these fields.

RETINA READY LOGO – If you are uploading a retina logo (not required), it needs to be exactly twice the size of the regular logo. For example, if the standard logo is 200×100, the retina logo should be 400×200.


How To Insert A Sticky Header Logo

Step 1 – Navigate to Avada > Theme Options > Logo tab to access the logo options.

Step 2 – You will see two logo upload options under the Sticky Header Logo section. the Sticky Header Logo field is for standard desktop, and the Sticky Header Logo (Retina Version @2x) field is for retina ready devices. Click the Upload button and select your file.

Step 3 – If you are uploading a retina logo, you must enter the width and height of the Standard Logo in the Width and Height fields. Do not enter the Retina Logo’s width and height in these fields.

RETINA READY LOGO – If you are uploading a retina logo (not required), it needs to be exactly twice the size of the regular logo. For example, if the standard logo is 200×100, the retina logo should be 400×200.


How To Insert A Mobile Logo

Step 1 – Navigate to Avada > Theme Options > Logo tab to access the logo options.

Step 2 – You will see two logo upload options under the Mobile Logo section. the Mobile Logo field is for standard desktop, and the Mobile Logo (Retina Version @2x) field is for retina ready devices. Click the Upload button and select your logo file.

Step 3 – If you are uploading a retina logo, you must enter the width and height of the Standard Logo in the Width and Height fields. Do not enter the Retina Logo’s width and height in these fields.

RETINA READY LOGO – If you are uploading a retina logo (not required), it needs to be exactly twice the size of the regular logo. For example, if the standard logo is 200×100, the retina logo should be 400×200.


Logo Settings

Avada offers various settings to help position and align your logo. All of these options are located in Avada > theme options > logo tab and will only affect the default logo that displays in the header on desktop mode.

  • Logo Alignment – This option allows you to set the main logo’s alignment between Left, Center, or Right. Center Alignment only works on Header #5 and on Side Headers.
  • Logo Left Margin – Enter a pixel value to set the default logo’s left margin.
  • Logo Right Margin – Enter a pixel value to set the default logo’s right margin.
  • Logo Top Margin – Enter a pixel value to set the default logo’s top margin.
  • Logo Bottom Margin – Enter a pixel value to set the default logo’s bottom margin.

Favicon Options

The Favicon Options are also on the Logo tab in Fusion Theme Options. Favicons are an icon associated with a URL that is variously displayed, such as in a browser’s address bar, or next to the site name in a bookmark list. Avada offers several fields to upload a favicon, Standard favicon, Apple iPhone favicon and Apple iPad favicon. Each one has its own unique size listed in the description. To add them, 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

Using The Mega Menu

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

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 menu that you already have.

Step 2 – Only First Level items can enable the Mega Menu. Click the Arrow icon next to any First Parent Level menu item to expand the Option box. You will see an option called Enable Fusion Mega Menu, check the box to enable the Mega Menu.

Step 3 – Set the Mega Menu Number of Columns options that will determine how many columns will be displayed. Also, choose if you want to enable the Full Width Mega Menu option.

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

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

Step 6 – The Third Level menu item 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 into place, below and to the right of the Second Level menu item.

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

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

megamenu2

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

megamenu

Mega Menu Width

Avada includes a fully 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 them up. To learn about 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 your whole site’s width. Take note that the Mega Menu’s full width option follows the value you’ve set in your Site Width option located in the Theme Options tab. For example, if you’ve set your Site Width to 1120px, the Mega Menu’s full width will only be 1120px. Setting your Mega Menu to full width also overrides the individual column widths set in your Second Level menu items.

How To Set The Mega Menu To Full Width

Step 1 – In the Menu tab, locate your First Level menu item, then make sure the Enable Fusion Mega Menu option is checked.

Step 2 – Under the same First Level menu item, make sure the Full Width Mega Menu option is also checked.

After these steps, your Mega Menu should now span the full width of your website.


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 – In the Menu tab, locate your First Level menu item, then make sure the Enable Fusion Mega Menu option is checked.

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.

After these steps, your Mega Menu should now have individual Column Widths set.


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


Setting Up The Sliding Bar

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

How To Setup The Sliding Bar

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

Step 2 – Check Enable Sliding Bar option to enable the sliding bar.

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

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

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

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

sliding bar
sliding bar

Setting Up Page Title Bar

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

How To Setup The Page Title Bar Globally

Step 1 – Navigate to Appearance > Theme Options > Page Title Bar to access the page title bar options.

Step 2 – Check the Page Title Bar option to enable the Page Title Bar.

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

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

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

page title bar

How To Set Different Settings Per Page/Post

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

Step 2 – Scroll down the page to find the Fusion Page Options and find the Page Title Bar tab.

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

Step 4 – When finished, make sure to save the page or post by clicking the Save Draft or Publish button.


Menu Navigation Heights

Being able to set your menu items’ heights is important to keeping your website organized and visually appealing, which is why Avada has made this as easy as just a few steps. Continue reading below to learn how to change your menu items’ heights.

How To Set Main Menu Navigation Heights

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

Step 2 – Under the Menu Options section, you will find the Main Nav Height option.

Step 3 – Enter your desired value in the Main Nav Height field. Use a value without px. For example, 10.


Main Menu Navigation Sample

How To Set Mobile Menu Navigation Heights

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

Step 2 – Under the Mobile Menu Options section, you will find the Mobile Menu Navigation Height option.

Step 3 – Enter your desired value in the Mobile Menu Navigation Height field. Use a value without px. For example, 10.


Mobile Menu Navigation Sample



Pages

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

Create A New Page

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

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

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

Page Templates

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

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

  • Default – This is the Default page template that automatically has the sidebar with it. Choose this template for your blog.
  • Contact – This is the Contact page template that you should choose when you make your contact page with Google Map & 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

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

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. Please read below for information on how to set this up.

Step 1: How To Create A Custom Menu For The One Page Site

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

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

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

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

megamenu custom menu

Step 2: How To Create A New Page With Your Content And Anchor Points

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

Step 2 – Scroll down to find the Fusion Page Options box, and find the Main Navigation Menu dropdown and choose your newly created menu from above.

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

one page
IMPORTANT NOTE – For example, if you created a menu item with #intro as the URL, then your menu anchor needs to read menu_anchor=”intro”.


Setting Up Contact Page

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

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

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

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

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

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

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

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

    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

    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.

    Full Width Element

    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

    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.

    Blog

    Avada is loaded with options for the blog. It offers many different options for you to present your blog posts, along with several different blog layouts. In addition there are numerous 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

    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.

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


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

    Blog Single Post Page

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

    1. Featured Images

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

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

    How To Assign A Post Page

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

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

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

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

    Step 5 – Click Publish to save the page.

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


    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

    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.

    How To Use The Blog 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 the Blog option from the dropdown list.

    Step 4 – Now you can select all the different options for the blog shortcode. These options will only pertain to this one instance of 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

    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.

    How To Use The Recent Post Shortcode

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

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

    Step 3 – The Shortcode Generator window will popup. Select the Recent Posts option from the dropdown list.

    Step 4 – Next, select all the different options for the Recent Post 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, like for a magazine style layout. Each instance of the shortcode allows different settings.

    Step 5 – Click Publish to save the page.


    Click Here To View Our Complete Shortcode Documentation

    Related Posts

    Related Posts are blog posts and appear below each active blog post, and they are posts that have similar categories as the one being currently viewed. Related Posts are a quick and easy way to show your viewers other articles that they may be interested in, based on the blog post they are currently reading. 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 Posts and its included options.

    How To Display Related Posts Globally

    Step 1 – Navigate to Avada > Theme Options > Blog to access the Blog options.

    Step 2 – Under the Blog Single Post Page Options section, check the Related Posts checkbox to display Related Posts.


    How To Display Related Posts Individually Per Post

    Step 1 – Navigate to the post, then to the Fusion Page Options box below the editor field.

    Step 2 – In the Post 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 Posts Options

    The various options for Related Posts are located at Avada > Theme Options > Extra. In the Extra tab, they are under the Related Posts / Projects section. These options also affect the Related Projects for Portfolio Posts. All of these options are global settings that cannot be overridden per post. Continue reading to learn more about each of these options.

    Number of Related Posts / Projects – Illustrated as A 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 B on the screenshot, this option allows you to set how many columns are displayed. Choose from 1, 2, 3, 4, 5, or 6.

    Related Posts / Projects Columns Spacing – Illustrated as C 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 Layout – Illustrated as D 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.

    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 enable or disable autoplay on the carousel.

    Related Posts / Projects Show Navigation – Illustrated as G on the screenshot, this option allows you to show or hide the navigation buttons on the carousel.

    Related Posts / Projects Mouse Scroll – Illustrated as H on the screenshot, this option allows you to enable or disable mouse drag control on the carousel. When this is enabled, the links on posts will be disabled.


    Blog Post Formats

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



    Portfolio

    Avada is loaded with options for the portfolio. It offers many different options for you to present your portfolio posts, along with several different layouts. In addition there are numerous 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

    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.

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

    Portfolio Page Templates

    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.


    Creating Portfolio Posts

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

    How To Create A Portfolio Post

    Step 1 – Navigate to Portfolio in your WordPress admin.

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

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

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

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

    Step 6 – For a single image, click the first Featured Image Box, select an image and click “Set Featured Image”. 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, each image will be a slide in the slideshow. Five featured image boxes show by default, to add more change the “Post Image Slideshow” number in Theme Options > Slideshows tab.

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

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

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

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


    Featured Image Information

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

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

    Portfolio Single Post Page

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

    1. Featured Images

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


    2. Featured Videos

    Youtube and Vimeo Videos can be uploaded to show on the single post page, or also used in a slideshow. To upload videos, insert the video embed code from your source into the “video embed code” field in the Fusion 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


    Recent Work Shortcode

    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

    Portfolio Filters

    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.

    Related Projects

    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 Avada > Theme Options > Portfolio to access the Portfolio options.

    Step 2 – Under the Portfolio Single Post Page Options section, check the Related Posts checkbox to display Related Posts.


    How To Display Related Projects Individually Per Post

    Step 1 – Navigate to the post, 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 at Avada > Theme Options > Extra. In the Extra tab, they are under the Related Posts / Projects section. These options also affect the Related Projects for Portfolio Posts. All of these options are global settings that cannot be overridden per post. Continue reading to learn more about each of these options.

    Number of Related Posts / Projects – Illustrated as A 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 B on the screenshot, this option allows you to set how many columns are displayed. Choose from 1, 2, 3, 4, 5, or 6.

    Related Posts / Projects Columns Spacing – Illustrated as C 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 Layout – Illustrated as D 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.

    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 enable or disable autoplay on the carousel.

    Related Posts / Projects Show Navigation – Illustrated as G on the screenshot, this option allows you to show or hide the navigation buttons on the carousel.

    Related Posts / Projects Mouse Scroll – Illustrated as H on the screenshot, this option allows you to enable or disable mouse drag control on the carousel. When this is enabled, the links on posts will be disabled.


    Featured Image Size Options

    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.

    There Are Two Options To Control The Portfolio Featured Image Size

    1. Fixed Featured Image Size

    The “fixed” size 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 on the right.

    Important Information – use a site width of 940px for the fixed featured image size to look the best. This “fixed” setting 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 size.

    Click the button below to see how fixed size will look on a site width larger than 940px.

    Click Here To See Fixed Size Larger Than 940px

    2. Auto Featured Image Size

    The “auto” featured image size 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 Information – 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 look consistent since they are the same 2 to 1 ratio.

    Click the button below to see how auto size can give a consistent look.

    Click Here To See Auto Size With Consistent Images


    Choose Fixed or Auto For Portfolio Featured Image In Three 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 option. Use the Fusion Builder or Shortcode Generator to make the selection.

    Sliders

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

    How To Assign A Slider

    Once you have created your sliders, you need to assign them to a page or use a shortcode, if the slider offers one. There are 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

    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

    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 Assigned Via Fusion Theme Options – All Sliders assigned to a page via Fusion Page Options will always follow the position set in Fusion Theme Options. If you would like the header to be in a different position for a particular page, the Fusion Theme Options can be overridden by setting a position inside Fusion Page Options, instead.

    Slider Position Assigned Via Fusion Page Options – When you assign a slider via Fusion Page Options, the slider position will always follow the position set in Fusion Theme Options unless otherwise specified in Fusion Page Options, and the top or bottom of the slider will align with the main menu drop down. There is no extra page padding or content that will interfere with the slider position when assigned via Fusion Page Options.

    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 the perfect method for when you do not want the slider directly below or above the header, but somewhere further down the page. If you place the slider shortcode at the top of the post content field, it will have the page top padding added to it, which is set to 55px by default. Content added to the post content field will have page padding applied. The page padding can be adjusted globally in Fusion Theme Options, or individually per page or post 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 version 1.

    Slider Position Above or Below Header – You can choose to have the header sit above the slider, or below the slider. This option is called Slider Position and does exactly as it says, the slider can be positioned above the header, or below. This option is both present in Fusion Theme Options and Fusion Page Options.


    Revolution Slider

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

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

    How To Create A New Revolution Slider

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

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

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

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

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

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

    rev slider

    How To Add Slides To Your Slider

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

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

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

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

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

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

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

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

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

    rev slider

    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. Insert fusion-revslider-mobile-padding in the “classes” field located in the “Layer Links & Advanced Params” section of the slider creation page.

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

    rev slider

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

    Layer Slider

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

    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 sidebar item in your admin section, then click the “Add New” button and give the slider a name.

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

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

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

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

    layer slider

    layer slider

    How To Add Slides To Your Slider

    Step 1 – Click on the “Slides” tab.

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

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

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

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

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

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

    layer slider

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

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

    Fusion Slider

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

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

    How To Create A New Fusion Slider

    Step 1 – Click on the Fusion Slider tab in your admin sidebar, then click the Add or Edit Sliders option. Give the slider a name.

    Step 2 – 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 3 – Enter the Slider Width in pixels or percentage, and the Slider Height in pixels. 100% width is full width of the browser window, while 940px is a fixed width.

    Step 4 – Check the Full Screen Slider checkbox if you want the slider to be 100% width and 100% height of the viewing area.

    Step 5 – Check the Parallax Scrolling Effect checkbox for the parallax scrolling effect. Please note the specific notes for this option in the setting description.

    Step 6 – There are also other remaining options to select; Slider Content Max Width, Display Pagination and Navigation elements, Autoplay the slide, Loop the slide, Animation Type and Speed, and Slideshow Speed.

    Step 7 – Click the Add Slider button at the bottom of the page to save the new slider. Once saved, it will show up on the right side of the page.

    IMPORTANT NOTE – Once a slider is created, you can choose to edit it by clicking the slider name on the right hand side of the page.


    How To Create Slides For The Fusion Slider

    Step 1 – Click the Add or Edit Slides option in the Fusion slider tab.

    Step 2 – Click the Add New Slide button at the top of the page, and enter a name for it.

    Step 3 – Customize the Background Type option. Select an image, a self hosted video, a Youtube or a Vimeo slide. See details of each type below and their options.

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

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

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

    Step 7 – When finished, click the Publish button to save the slide.


    Slide Options

    Background Type
    • Image Slide – Enter your image in the featured image box on the right hand sidebar.
    • Self Hosted Video Slide – MP4 and WedM files are required for self hosted videos along with hosting the video on a server. Enter the URL path for the MP4 and WebM files into their fields. OGV is optional but you will want to insert a video preview image for devices and old browsers that do not support these video types. There are also settings to mute, autoplay or loop the video, hide the controls add a color overlay to the video.
    • Youtube Video Slide – Enter the Youtube video ID. For example the Video ID for http://www.youtube.com/LOfeCR7KqUs is LOfeCR7KqUs. There are also settings to mute, autoplay or loop the video, hide the controls and add a color overlay to the video.
    • Vimeo Video Slide – Enter the Vimeo video ID. For example the Video ID for http://vimeo.com/75230326 is 75230326. There are also settings to mute, autoplay or loop the video and add a color overlay to the video.

    Slider Content Settings
    • Content Alignment – Select if the content is left, right or centered aligned.
    • Heading Text – Enter the heading text that will display on the front end. You can also choose to insert 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 (#000000).
    • Heading Background – Display a semi-opaque background behind the heading text.
    • 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 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 (#000000).
    • Caption Background – Display a semi-opaque background behind the caption text.
    • 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.
    • Slide Link – Enter a URL for the full slide background to link.

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

    fusion slider

    How To Import / Export Fusion Sliders & Slides

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

    • Export – All sliders and slides must be exported. Click the Export All Sliders button and a zip file will be automatically downloaded to your computer. The zip file contains a settings.json and sliders.xml file.
    • Import – Click the Choose File button to select a zip file that has been exported already. Then click the “Upload File And import” button and wait for the process to complete.

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

    Elastic Slider

    Avada includes the stylish Elastic Slider. This slider is a great way to create beautiful slideshows with stylish captions that have simple animations. Its fully responsive and can be full width or can have a custom width and height set. Users can also customize other settings on the Elastic Slider tab in the 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
    Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

    Premium Plugin Updates

    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

    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

    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

    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

    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

    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 at Avada > Theme Options > Footer, under the Footer Widgets Area Options section.

    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

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

    How To Add Widgets To The Footer

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

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

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

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

    footer option
    footer widgets

    Translations

    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

    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.


    Storing Translation Files

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


    Included Language Files

    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 the Avada’s Full Package from your ThemeForest account.

    Step 2 – Inside the downloaded Avada_Full_Package folder, locate a subfolder called Languages. Inside you will find all the available translations.

    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.

    Translating The Theme

    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 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 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/Avada 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

    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. Inside the Fusion-Core folder which is located in the wp-content/plugins folder, you will find a folder called Languages. 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/fusion-core 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

    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

    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 RTL Languages

    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.

    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

    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.


    Sidebars

    Creating Sidebars

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

    How To Create A Sidebar

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

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

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

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

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

    Page Templates That Can Utilize A Sidebar

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

    Avada offers both single and dual sidebars. Sidebars can be assigned globally (same sidebars everywhere) 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.

    Global Sidebars vs Individual Page Sidebars


    IMPORTANT: Global sidebars from Fusion Theme Options will override the individual sidebar options set in the Fusion Page Options box.

    Global Sidebars – Use these when you want every page to show the exact same sidebar. Global sidebars are assigned in Theme Options > Sidebars tab.

    Individual Sidebars – Use these when you want a unique sidebar or no sidebars on a page or post. Individual sidebars are assigned in the Fusion Page Options box of each page or post.

    There Are 9 Main Areas You Can Apply Global Sidebars

  • Page Templates – any page template except for the 100% width page template.
  • Portfolio Posts – the single post pages that are created for each portfolio post.
  • Portfolio Archive / Category Pages – any cat/arch pages created for portfolio posts.
  • Blog Posts – the single post pages that are created for each blog post.
  • Blog Archive / Category Pages – any cat/arch pages created for blog posts.
  • WooCommerce Products – the single post pages that are created for each product.
  • WooCommerce Archive / Category Pages – the cat/arch pages created for products.
  • bbPress Pages – any page, forum or topic post that is created from the bbPress plugin.
  • Search Page – the search results page that displays when a search is performed.
  • sidebar global settings

    How To Apply Global Sidebars

    Step 1 – Navigate to Theme Options > Sidebar tab. Select the section of the theme that you wish to apply global sidebars. For example, if you want all WooCommerce single product pages to have the same sidebar, select the WooCommerce Products section.

    Step 2 – Check the “Activate Global Sidebar” checkbox. This is important and must be done to use global sidebars. 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 sidebar you want to display for Sidebar 1 and for Sidebar 2. If you only want one sidebar, then leave Sidebar 2 set to “No Sidebar”.

    Step 4 – Select the sidebar position. The sidebar position controls Sidebar 1. If you are using Sidebar 2, it will be placed on the opposite side of Sidebar 1 automatically.

    Step 5 – Once finished, press Save Changes.

    sidebar global settings

    How To Apply Individual Sidebars With Fusion Page Options

    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. Inside is a Sidebar tab section

    Step 3 – Select the name of the sidebar you want to display for Sidebar 1 and for Sidebar 2. If you only want one sidebar, then leave Sidebar 2 set to “No Sidebar”.

    Step 4 – Select the sidebar position. The sidebar position controls Sidebar 1. If you are using Sidebar 2, it will be placed on the opposite side of Sidebar 1 automatically. Choose “default” for Fusion Theme Option setting.

    Step 5 – Once finished, press Save Changes.

    sidebar individual settings

    Single, Dual or No Sidebars

    Avada allows for single or dual sidebars, or no sidebars. There are two sidebar dropdown fields that allow you to make these selections; Sidebar 1 and Sidebar 2.

  • Single Sidebar – make a selection for Sidebar 1, choose “No Sidebar” for Sidebar 2.
  • Dual Sidebars – make a selection for both Sidebar 1 and Sidebar 2.
  • No Sidebars – select “No Sidebar” for both Sidebar 1 and 2. The page will be full width.
  • Note 1 – The Side Navigation 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

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

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

    Note 3 – For the Side Navigation template, the sidebar position option will affect the side navigation side, and Sidebar 2 will be placed on the opposite side.

    Adding Widgets

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

    How To Add Widgets

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

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

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

    widgets

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

    footer widgets

    Flickr & Twitter Widgets

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

    How To Setup The Twitter Widget

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

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

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

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

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

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

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

    twitter

    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
    Click Here To Watch The Video Tutorial – Watch It In HD & Fullscreen

    Facebook Widget

    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.


    Extras

    Avada is full with all kinds of features and settings. This section is going to cover the various items such as our Fusion Theme Options panel, retina ready feature, translation, plugin like WooCommerce and WPML and more. The following sections will cover several different sections of the header that are listed below.

    General Cache Information

    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 View How To Clear BlueHost Cache

    Site Optimization

    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.

    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

    Social Icons

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

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

    Social Media Tab In Fusion Theme Options – Links And Icon Sorting

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

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


    Social Icon Custom Colors

    To enable flexible customizations, we’ve included a Social Icon Custom Colors option on every area you can add social icons to, such as the header, footer, various shortcodes, and the like. Despite this, the process of changing the social icons’ colors remain the same throughout. To learn how to change the social icons’ colors, continue reading below.

    Social Icons Custom Color – You can choose one color for all social icons, or different colors per icon. To set a uniform color for all icons, simply input a hexcode into the Header Social Icons Custom Color field. For example, #AAAA00. To set individual colors per icon, input multiple hexcodes separated by a vertical bar. For example, #AAAA00|#AA0000|#ooooAA. Enter each color in the same order as your active social icons. For instance; if you have Facebook, Twitter and Linkedin active, your first hexcode in the sequence will affect the Facebook icon, your second hexcode will affect the Twitter icon, and the third hexcode will affect the Linkedin icon.


    Social Icons In The Header

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


    Social Icons In The Footer

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


    Social Share Box

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


    Social Links Shortcode

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


    Social Links Widget

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


    Social Icon Style Options

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

    Social Icons Unboxed

    Social icons can be unboxed which will only show the icon by itself. Choose no for the Social Links Icons Boxed option in Fusion Theme Options or inside the shortcode.

    Social Icons Boxed

    Social icons can be boxed which will show the icon inside of a boxed background. Choose yes for the Social Links Icons Boxed option in Fusion Theme Options or inside the shortcode.

    Social Icon Custom Icon Color

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

    Social Icon Custom Box Color

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

    Social Icon Box Radius

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

    Social Icon Tooltip Hover Position

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

    Using W3TC + Avada

    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.

    System Status

    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 these three plugins are 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 a required plugin. Please make sure it’s always active and up-to-date.
    • Revolution Slider – This plugin is created by ThemePunch, and is a required plugin. Please make sure it’s always active and up-to-date.

    How to Create Self-Hosted Videos

    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.


    Reducing Image Size Generation

    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.


    Videos In Lightbox

    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.


    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.

    Custom Font

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

    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.

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

    custom font

    Retina Ready

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

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

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

    The WP Retina 2X Plugin For User Images

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

    Other Images Such As Logos and Favicons

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

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

    WooCommerce

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

    How To Install WooCommerce And Setup The Default Shop Pages

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

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

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

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

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


    How To Create Your Products

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

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

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

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

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

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

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

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


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

    How To Adjust WooCommerce Catalog Settings for Image Sizes

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

    Step 1 – Click on the WooCommerce 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 Catalog Images, Single Product Images, and Product Thumbnails.

    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.

    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 your media section, and choose to regenerate your image thumbnails so the larger size will be created.

    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.


    Proudly Serving Over 125000 Satisfied Users!