General

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

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

WordPress Information

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


Requirements For Avada

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

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

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

What’s Included

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


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


files

Free Forum Support

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


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

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

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

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

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


Click Here To Setup Your Forum Account



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





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

Before You Post On Forum

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


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

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

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

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


Click Here To Setup Your Forum Account

Installation

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





Downloading The Main Files Gives You All The Content Listed Below

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

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

WordPress Installation

Follow the steps below to install via WordPress.

Step 1 – Navigate to Appearance > Themes.

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

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

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

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


“plugins”

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

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


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

FTP Installation

Follow the steps below to install via FTP.

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

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

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

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

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

ftpinstall

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

Plugin Installation

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


Included Plugins With The Avada Theme

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

Plugin Installation & Update Notification

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

Additional Plugins We Use On Our Demo

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

How To Update The Theme

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


Before You Update, Always Check The Important Update Information

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

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

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

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

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

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

auto updates

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

auto updates

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

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

Method 2: Traditional Update Method

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

How To Download New Theme Files From Themeforest

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

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

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

files_small


How To Update Your Theme Via FTP

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

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

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

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



How To Update Your Theme Via WordPress

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

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

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

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

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

Important Update Info

This is our biggest and best update in the history of Avada. Many new features, like the page builder, full control over site width, dual sidebars, 5-6 columns added and so much more. View our full changelog by clicking the button on the right side.

Avada v3.6 Important Information

1. Full Width Page Template Along With 2 Page Options (Page Full Width & Portfolio Full Width) Are REMOVED

We added dual sidebars in Avada v3.6, and with the new options this eliminates the need for a full width page template and the page and portfolio full width page options. There will be new page options for each page “Sidebar 1″ and “Sidebar 2″. If both of those fields are set to “NONE”, then the page will be full width. If you set a sidebar to show, then it will show the sidebar. This will allow any previously made “full width page template” pages to use the default page template instead, therefor we can simplify the offering and remove the full width page template.

What does this mean for you? When you update to v3.6, most likely any page that has full width page template assigned will have a default sidebar displaying. To fix this, simply edit the page and select “NONE” for both sidebar fields then save it. If you have a lot of posts or pages, you can use our new Global Sidebar Options in theme options > sidebar. You can also do this with the bulk field editor plugin for many pages at one time. Sidebar custom field name is “sbg_selected_sidebar_replacement” and leave its field empty for no sidebar or follow our knowledge article http://theme-fusion.com/knowledgebase/update-sidebars-bulk/ for instructions on how to set it to a specific sidebar.

Posts created pre using Avada: In case you have setup your site already before using Avad and you have created blog posts, please see the knowledgebase entry for a fix: http://theme-fusion.com/knowledgebase/avada-3-6-1-correct-sidebar-missing-single-blog-posts-created-pre-avada-usage/

2. Fusion Options Returns Error 404 Page

This is simply your browser cache. Please empty your browser cache to fix this.

3. Portfolio & Recent Work Image Size Changes

With our new site width options, you will be able to set the overall site width of Avada to any “px” or “5″ value, even up to 100%. Because of this, we’ve had to change how our portfolio thumbnails are used. Currently in Avada, the portfolio featured images are cropped on the portfolio column pages and the recent work short codes. This gives all images the same shape (no matter what the size). With the new site width options, this is no longer possible. It would cause way too many thumbnails to be generated to cover all sizes, and some would not be big enough to cover large sizes which leads to distortion and blur. In Avada v3.6, all portfolio column page templates and recent work shortcode (besides carousel layout) will show the full image ratio of the feature images you upload. This is honestly a good thing and many users have requested this for a long time.

What does this mean for you? When you use a site width larger than the standard 940px, the portfolio featured images will not fill the container area. This is because they are generated cropped images. To fix this, choose “auto” for the “Portfolio Featured Image Size” option in theme options on the portfolio tab. This will produce varying sizes of portfolio featured images on the portfolio column page templates (1-6) and recent work shortcode. If you want all your featured images to still have the same size look, you will need to upload featured images that are the same size overall or at least the same ratio. Because of this, we’ve also added the new BOXED or UNBOXED option for the Portfolio TEXT layouts. We felt the text looked better in a box with varying image heights, so we added this option that you can choose globally, or in the recent work shortcode.

4. Portfolio Grid Page Template Will Be Removed In 3.7

Due to the site width changes that will affect portfolio column featured image sizes (see notes above in #2), the Portfolio Grid template is no longer needed because all of the other portfolio page templates (1-6 columns) can achieve the same effect.

What does this mean for you? Please prepare by changing your page template from Portfolio Grid to Portfolio 1-6 col after updating to Avada 3.6. As long as you do that, it will not affect you in in the future. If you forget to do that, when you update in the future, simply change the portfolio page template.

5. iPad Portrait Responsive Mode Changes

Most of our users choose to use the “fixed layout for iPad portrait” option which gives them a full desktop version on their ipad when viewing portrait mode. This option will still be there. However, the option does have drawbacks with the rev slider and menus on ipad portraits. We have enhanced our ipad portrait responsive mode in Avada 3.6 so it is more suited for the size of the ipad when the “fixed layout for iPad portrait” option is turned off.

What does this mean for you? Only good things! You can still use the “fixed layout for iPad portrait” option if you wish and it will act the same. If you turn that option off, then the theme will respond much better to the ipad portrait size.

6. Fusion Builder Conversion

Please refer to our documentation for various information on how to use it, converting old pages, items to look out for during conversion and more.

7. Languages folder moved from theme to main package

In 3.6, we have added the option of translating theme options labels, page options labels and more into the translation files. Due to this, the size of the theme package was increased by considerable amount to include all the languages by default. For this reason, we have decided to move languages from the theme package to the main package which is available for download from ThemeForest.

What does this mean for you? From the backup theme folder, copy and paste the language files back into wp-content/themes/Avada/languages folder or download and extract the main package from ThemeForest to find the new languages folder. You can copy the files within that lanaguages folder found in main package to wp-content/themes/Avada/languages folder.

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 theme options on the backup tab in appearance > theme options.

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, server cache when you update. Visual issues may happen, its only cache that needs emptied. Each browser allows you to remove cookies, history and other data. 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 on screen steps to install the plugin updates. Our Fusion-Core plugin is the only required plugin and it has to be installed and activated for theme features to work. Make sure you are always using the most recent version of the plugin. You will be prompted to install it upon installing or updating your theme. If you dismiss the prompt or do not see it, then you can go to Appearance > Install Plugins page and install the plugin that way. Every time you update the theme, the plugin also needs updated.


Click Here To Find Out How To Update Your Theme

Avada Changelog

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

Click Here To View The Avada Change Log

Demo

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

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

Method 2: Import Individual Pages – If you do not wish to import everything and only need a page or two, we include all the created demo pages here in our documentation. This allows you to import a single page at a time. This is perfect for those users who do not want all pages, sliders, widgets, etc. If you wish to import individual pages, you can do so with our Fusion Builder under the Pre-Built Templates tab, or from our the Import Individual Pages section in our documentation.


Please Note These Important Items About The Demo Content

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

Import All Demo Content

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


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

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

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

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

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

importer

Common Issues & Questions

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

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

2. Demo Import Fails or Times Out

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

3. Demo Content Still Will Not Import

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

4. Demo Content Duplicated

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

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

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

5. Demo Blog Posts Show Up In Your Blog Feed

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

6. Where Are The Rest of The Sliders?

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


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

Import Individual Pages

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

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

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

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


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

Options

Theme Options

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

This list below is incomplete, more coming soon!

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

  • Page Options

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


    Blog Post Options

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


    Portfolio Post Options

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


    Header

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



    Main Header Setup

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


    To Setup The Header, Follow The Steps Below.

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

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

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

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

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

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

    importer

    Header Theme Options

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

    Header Content Options

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

    Header Background Options

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

    Header Social Icon Options

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

    Sticky Header Setup

    Position & Transparency

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

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

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

    Adding The Logo & Favicons

    Setting Up The Menu

    Using The Mega Menu

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


    Follow The Steps Below To Create A Mega Menu

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

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

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

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

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

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

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

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

    megamenu2

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

    megamenu

    Setting Up The Sliding Bar

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


    To Setup The Sliding Bar, Follow The Steps Below.

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

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

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

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

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

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

    sliding bar


    sliding bar

    Setting Up Page Title Bar

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


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

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

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

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

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

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

    page title bar

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

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

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

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

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

    page title bar

    Pages

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

    Create A New Page

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


    Follow These Steps Below To Create A New Page

    Step 1 – Navigate to Pages and click Add New.

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

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

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

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

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

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





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

    Page Templates

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

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

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

    Setting Up Home Page

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


    To Set Your Home Page, Follow These Steps

    Step 1 – Navigate to Settings > Reading.

    Step 2 – Select “A Static Page” option.

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

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

    Setting Up One Page

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


    First Create A Custom Menu For Your One Page

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

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

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

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

    megamenu custom menu

    Next Create A New Page With Your Content And Anchor Points

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

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

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

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

    one page

    Setting Up Contact Page

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


    To Create The Contact Page, Follow The Steps Below.

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

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

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

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

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

    To Set Your reCAPTCHA Keys, Follow The Steps Below.

    Step 1CLICK HERE TO SET UP YOUR KEYS

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

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

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

    Common Issues & Questions

    1. Google Map Will not Display

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

    2. Ensure Content Is Correct

    Use a correct address and not google map embed code, or longitude/latitude. It has to be a written address, Ex: 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 theme to function properly. Please make sure to format the HTML correctly anywhere so that issues like this don’t happen. Click Here For An Example.

    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.


    Follow These Steps Below To Create A FAQ Page

    Step 1 – Navigate to Pages and click Add New.

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

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

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

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

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

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

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

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

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

    Setting Up Side Nav Page

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


    Follow These Steps Below To Create A Side Navigation Page

    Step 1 – Navigate to Pages and click Add New.

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

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

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

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

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

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

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

    Builder

    Avada includes our proprietary page builder called Fusion Builder. Fusion Builder is a WYSIWYG drag and drop page builder that allows you 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.



    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 then, simply click one or drag and drop them the page or inside of 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

    Thie trash can icon allows you to quickly delete the entire page contents. 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: 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 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 column 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 spot. If you drag it all the way to the left of the 2nd column, it will be placed in the 1st spot.

    3. Add Elements Into Columns

    Elements can be inside or outside of column boxes. Column boxes 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, 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, element boxes only shows 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.

    Please 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 Tempalte” navigation button and click “Save Layout As Template” button and 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 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 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 other 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.

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

    If you are using the “icon-boxed” layout for content boxes, then when you convert you may lost the background color. This is due to older shortcode formats. Simply edit the content box and add a background color. You also may 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 persons 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. Click on the Visual editing tab.

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

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


    To Use The Shortcode Generator, Follow The Steps Below.

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

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

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

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


    Click Here To Watch The Video Tutorial

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

    Shortcode Customization

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

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

    Example of Shortcode Customization

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

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

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

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

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

    Blog

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



    Creating Blog Posts

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


    Follow the Steps Below To Create A Blog Post

    Step 1 – Navigate to Posts in your WordPress admin.

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

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

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

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

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

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

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

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


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

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

    Blog Single Post Page

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


    1. Featured Images

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

    2. Featured Videos

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

    3. Featured Image Size

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

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

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

    4. Post Meta Information

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

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

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

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

    5. Using Fusion Builder

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

    6. Blog Single Post Page Options

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

    Click Here To View 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.


    Follow These Steps Below To Assign A Post Page

    Step 1 – Navigate to Pages and click Add New.

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

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

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

    Step 5 – Click Publish to save the page

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

    Theme Options For The Assigned Blog Page

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

    Blog Short Code

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


    Follow These Steps Below To Use The Blog Short Code

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

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

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

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

    Step 5 – Click Publish to save the page

    Theme Options For The Assigned Blog Page

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


    Click Here To View Our Complete Shortcode Documentation

    Recent Post Short Code

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


    Follow These Steps Below To Use The Recent Post Short Code

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

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

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

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

    Step 5 – Click Publish to save the page

    Click Here To View Our Complete Shortcode Documentation

    Blog Post Formats

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


    Portfolio

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



    Creating Portfolio Pages

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


    Follow These Steps Below To Create A Portfolio Page

    Step 1 – Navigate to Pages and click Add New.

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

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

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

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

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

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


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

    Portfolio Page Templates

    Avada includes two main designs for portfolio page templatess; 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 theme options, and individually per page in page options.

    Creating Portfolio Posts

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


    Follow the Steps Below To Create A Portfolio Post

    Step 1 – Navigate to Portfolio in your WordPress admin.

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

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

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

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

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

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

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

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

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


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

    Featured Image Information

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

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

    Portfolio Single Post Page

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


    1. Featured Images

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

    2. Featured Videos

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

    3. Featured Image Size On Single Post Page

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

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

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

    4. Selecting The Column Width Layout

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

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

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

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

    5. Project Description Section

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

    6. Project Details Section

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

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

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

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

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

    7. Using Fusion Builder

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

    8. Portfolio Single Post Page Options

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

    Click Here To View The Portfolio Post Options

    Recent Work Shortcode

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


    Follow These Steps Below To Use The Recent Work Short Code

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

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

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

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

    Step 5 – Click Publish to save the page

    Click Here To View Our Complete Shortcode Documentation

    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

    Featured images for portfolio page templates and recent work shortcodes have two distinct options; fixed (cropped images) or auto (full ratio images). This option can be selected globally, or individually per page or shortcode instance. Please see below for information on each of these options.


    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

    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

    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. Page option can override this.

    Page Options

    Create a new page or edit an exisiting portfolio page and look in the page options box. Click on the portfolio tab and choose fixed or auto. This will override 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 two methods to assigning a slider to a page. First you can assign a slider via our page options box. Doing it this way will always put the slider directly under the navigation. The second method is to insert the slider shortcode in the post content field. Read below for information on both methods.


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

    Step 1 – Create or edit any page or post.

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

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

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

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

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


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

    How To Assign A Slider Via Shortcodes

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

    Step 1 – Create or edit any page or post.

    Step 2 – Click on the Visual editing tab

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

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

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


    slider short code

    Import Our Demo Sliders

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

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

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

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

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


    Click Here To Download Our Slider Exports

    Slider Position

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

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

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

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

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

    Revolution Slider

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


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

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

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

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

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

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

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


    rev slider

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

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

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

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

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

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

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

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

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

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


    rev slider

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

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

    Layer Slider

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


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

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

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

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

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

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


    layer slider
    layer slider

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

    Step 1 – Click on the “Slides” tab.

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

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

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

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

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

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


    layer slider

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

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

    Fusion Slider

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

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


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

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

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

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

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

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

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

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

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


    fusion slider
    fusion slider

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

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

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

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

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

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

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

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


    fusion slider
    Background Type

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

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

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

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

    fusion slider
    Slider Content Settings

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

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

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

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

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

    fusion slider
    Slide Link Settings

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

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

    fusion link

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

    fusion slider

    How To Import / Export Fusion Sliders & Slides

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

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

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

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

    Elastic Slider

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


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

    Step 1 – Click on the Elastic Slider sidebar item

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

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

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

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

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


    elastic slider

    Elastic Slider Theme Options

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

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

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

    Other Slider Types

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

    Footer

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







    Adding Footer Widgets

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


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

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

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

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

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

    footer option


    footer widgets

    Translations

    Avada come with a bunch of included translation features for different kind 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 an additional plugin. Thanks to our users, Avada ships pre translated to 23 languages and there are new ones constantly added. From version 3.6 onwards, the theme also supports full translation capability for backend. This means that our Theme Options panel can be translated to your prefered 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, Polylang and qTranslate (mqTranslate).

    This amazing set of features makes Avada ready for every kind of project that include different languages you can think of. The following sections will cover the different areas of translating the theme and using multilanguage plugins.



    Translation Basics

    If you are new to translating WordPress, this is the right point to start. 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

    For WordPress 4.0 or 4.0+ Users

    Login to your FTP account and edit the wp-config.php file. In the wp-config.php file, look for WPLANG constant which looks like the following code:

    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. Examples: de_DE, nl_NL, es_ES (for more info see here: ISO language codes).

    E.g. for translating to Deutsch language, change the WPLANG constant will look like the following code:

    After the wp-config.php file is edited, login to WP-admin dashboard and navigate to Settings -> General Settings page. Make sure “Site Language” option is set correctly.

    Translating The Theme

    Within this section, you’ll find everything you need to localize and internationalize Avada theme into your language. It is split into several subsections to help you to easily find what you need.

    Avada theme and the fusion-core plugin (bundled with the theme) are translated separately. In the Avada theme translation files, the following features can be translated:

    1. 1. The frontend of the theme e.g. the contact form, the “All” string on portfolio filters, blog pages which are set as homepage or blog page from WordPress Reading settings (WP Admin -> Reading Settings).
    2. 2. The theme options
    3. 3. Fusion Options (Page/Post options)

    1. Theme Translation Basics

    Inside the Avada main theme folder you will find a folder called languages. If you have downloaded the installable package (clcik screenshot for a ThemeForest download representation), there will be two files in that folder: Avada.po and Avada.mo. The .po file is basically a list of all the text strings used in the theme files in English language and can contain a translation for each of them. The .mo file is just the compiled export from the .po file and is used by WordPress to translate the theme.

    tf_installable

    So these files can be used a base for your own translations. In order to make wordpress recognize the language to which you want to translate the theme, you will have to name the the language files accordingly. The names consist of locals, a combination of language and regional dialect. Examples: de_De, nl_NL, es_ES (for more info see here: ISO language codes). E.g. the filename for Detusch language would be de_DE.po and de_DE.mo respectively.

    Use one of our pre built translations

    To make your life easy, Avada ships with 23 pre created language files. To get those and to check if the langugae you need is included, please download the full package from your ThemeForest account (see screenshot on right). Inside the downloaded Avada_Full_Package folder you will find the Languages subfolder with all available translations. Just copy the .po and .mo files for your language to the Avada/languages folder of your theme install.

    tf_full_package

    All those have been contributed by our amazing users and the amount of translated strings might vary. To see the ongoing progess in our translation community or to become part of it yourself, please see this section: Help translating Avada to your language: our transifex project.

    My language is not included yet

    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 in languages folder, translate all text strings and save the .po file with your language code. The next subsection will explain this in detail. If you only want to change already translated strings in an included .po file the same steps apply.

    2. The Translation Process

    No matter if you are setting up a complete new language file or if you just want to edit a translation of one of the pre built language files, the steps to take are easy and more or less the same.

    A. Get POEdit

    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. You can get it here: Download POEdit

    B1. Start a new language file from scratch

    Step 1 – >Open the Avada.po in POEdit and you will find all English text strings in the left column (“Source Text”). Once you add translations those will show up in the right column (“Translation”).

    Step 2 – Choose the line you want to translate and then check the lower part of the POEdit window where you will find a textarea to add the correct translation.

    Step 3 – When you are done translating all needed strings save the file with your language code, for example: de_DE.po. The corresponding .mo file will be auto created. Make sure both are in Avada/languages folder. Everytime you update the .po file, make sure to upload both .po and the compiled .mo file in Avada/languages folder.

    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.

    po_src_vs_trans_1
    Source strings vs. Translations
    po_trans_field
    Textarea to insert your translation

    B2. Edit a pre built language file

    Step 1 – Open the .po file of your language in POEdit and search for the line you want to change. To do so select Edit > Find (windows) or Edit > Search (OSX) respectively from the menu (see screenshot on the right).

    Step 2 – In the search window type the string you are looking for. Once it is selected, delete the text from the “Translation” textarea in the lower part of the window and enter your prefered translation.

    Step 3 – Save the file. The updated .mo file will be auto created. Make sure both are in Avada/languages folder.

    po_search_string
    wp_site_lang

    3. Updating The Translations Catalogue

    This is usually not required. But if you want to keepyour customized language file and new strings have been added to a new version of the theme, you can update from the .pot file to get the new strings to your file.

    The second reason why you would do this is, if strings have been added or altered through a knowledgebase fix. You may have to update the catalouge of your existing .po file to reflect these changes.

    A. Updating from .po after 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 it in POEdit. Choose Catalogue > Update from POT file and in the opening file dialog choose the Avada.po file. The catalogue will be auto updated then with all new strings and your cutom ones will be preserved.

    Step 3 – Don’t forget to save the file once you are done updating and adding translations.

    po_update_pot

    B. Updating the catalogue after knowledgebase fixes

    Step 1 – After applying the fix(es) open your existing language file in POEdit and click on Catalog > Properties

    Step 2 – In the opening dialog, click the Sources Paths register (A in screenshot). Then click the second icon (B). Set the path to “../” (C).

    Step 3 – Change to Sources Keywords register (D). Then click the second icon (E). First add “__” and then “_e” (F).

    Step 4 – Click ok to close the window. On main screen now click Update icon. Now POEDit will search for all new strings in Avada. Once they are imported you can translate them to your language.

    po_update_cat_1
    po_update_catalogue_2

    po_update_button

    Translating Fusion Core

    Within this section, you’ll find everything you need to localize and internationalize Fusion Core plugin that is bundled within the theme into your language. It is split into several subsections to help you to easily find what you need. The process is very similar to translating the theme except for some naming conventions.

    Translation ability to the fusion core plugin features was added from version 3.6 of Avada.

    Within the Fusion Core plugin, the following items are translatable:

    1. 1. Frontend for the shortcodes including Blog Shortcode
    2. 2. Backend labels for Portfolio, FAQ’s, Elastic Slider, Fusion Slider Custom Post Types
    3. 3. Shortcode Generator
    4. 4. Fusion Page Builder

    1. Plugin Translation Basics

    Inside the fusion-core folder which is located in wp-content/plugins folder, you will find a folder called languages. Inside the languages folder, you will find fusion-core-en_US.po and fusion-core-en_US.mo. The .po file is basically a list of all the text strings used in the theme files in English language and can contain a translation for each of them. The .mo file is just the compiled export from the .po file and is used by WordPress to translate the theme.

    So these files can be used a base for your own translations. In order to make wordpress recognize the language to which you want to translate the plugin, you will have to name the the language files accordingly. The names consist of text-domain and locals, a combination of language and regional dialect. The text domain for our fusion core plugin is fusion-core. Examples: fusion-core-de_De, fusion-core-nl_NL, fusion-core-es_ES (for more info see here: ISO language codes). E.g. the filename for Detusch language would be fusion-core-de_DE.po and fusion-core-de_DE.mo

    My language is not included yet

    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 in languages folder, translate all text strings and save the .po file with your language code. The next subsection will explain this in detail. If you only want to change already translated strings in an included .po file the same steps apply.

    2. The Translation Process

    No matter if you are setting up a complete new language file or if you just want to edit a translation of one of the pre built language files, the steps to take are easy and more or less the same.

    A. Get POEdit

    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. You can get it here: Download POEdit

    B1. Start a new language file 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 (“Source Text”). Once you add translations those will show up in the right column (“Translation”).

    Step 2 – Choose the line you want to translate and then check the lower part of the POEdit window where you will find a textarea to add the correct translation.

    Step 3 – When you are done translating all needed strings save the file with your language code, for example: fusion-core-de_DE.po. The corresponding .mo file will be auto created. Make sure both are in fusion-core/languages folder. Everytime you update the .po file, make sure to upload both .po and the compiled .mo file in fusion-core/languages folder.

    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 fusio-core-en_US.po file. This is the preferred method for translation.

    po_src_vs_trans_1
    Source strings vs. Translations
    po_trans_field
    Textarea to insert your translation

    B2. Edit a pre built language file

    Step 1 – Open the .po file of your language in POEdit and search for the line you want to change. To do so select Edit > Find (windows) or Edit > Search (OSX) respectively from the menu (see screenshot on the right).

    Step 2 – In the search window type the string you are looking for. Once it is selected, delete the text from the “Translation” textarea in the lower part of the window and enter your prefered translation.

    Step 3 – Save the file. The updated .mo file will be auto created. Make sure both are in fusion-core/languages folder.

    po_search_string
    wp_site_lang

    3. Updating The Translations Catalogue

    This is usually not required. But if you want to keepyour customized language file and new strings have been added to a new version of the theme, you can update from the .pot file to get the new strings to your file.

    The second reason why you would do this is, if strings have been added or altered through a knowledgebase fix. You may have to update the catalouge of your existing .po file to reflect these changes.

    A. Updating from .po after 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 it in POEdit. Choose Catalogue > Update from POT file and in the opening file dialog choose the fusion-core-en_US.po file. The catalogue will be auto updated then with all new strings and your cutom ones will be preserved.

    Step 3 – Don’t forget to save the file once you are done updating and adding translations.

    po_update_pot

    B. Updating the catalogue after knowledgebase fixes

    Step 1 – After applying the fix(es) open your existing language file in POEdit and click on Catalog > Properties

    Step 2 – In the opening dialog, click the Sources Paths register (A in screenshot). Then click the second icon (B). Set the path to “../” (C).

    Step 3 – Change to Sources Keywords register (D). Then click the second icon (E). First add “__” and then “_e” (F).

    Step 4 – Click ok to close the window. On main screen now click Update icon. Now POEDit will search for all new strings in Avada. Once they are imported you can translate them to your language.

    po_update_cat_1
    po_update_catalogue_2

    po_update_button

    Help Translating Avada

    We use Transifex, a localization platform, to help us manage the translation contributions sent in by our amazing users.
    Please follow the steps below to help us translate Avada.

    1. Signup for Transifex

    Please visit to our project page: https://www.transifex.com/projects/p/avada/ and then click on “Help Translate Avada” button for signing up to Transifex.

    After signing up, visit our transifex project page again https://www.transifex.com/projects/p/avada/ and follow the steps below to help us contribute Avada.

    2. Contributing A New Language

    If you are interested in translating a language that is not already available in the project list, click on the “Request Language” button (see screenshots on the right) and select the language from the dropdown list. If the language is not available in the dropdown list, please read the next point about editing existing languages. After your request is approved, you will become the language coordinator and will be able to submit translations. Please keep reading for more info about submitting translations.


    3. Editing An Existing Language

    If you would like to contribute to a language that is already available in the project list, click on the language name to open up language details and then click on the “Join team” button. You request will be sent to the project administrators and maintainers for joining their language team. After your request is approved, you can start translating. Please keep reading for more info about submitting translations.



    Contributing Translations

    After your request is approved. You can contribute translations in two ways described below:

    1. Submitting a .po file

    From the language description page, click on the relevant translation resource to submit the translation file. For the theme, click on Avada.po. For the plugin, click on fusion-core.po.

    A popup will show up with resource details. Click on “Upload File” link and select the .po file from your computer to update the resource with the translations from your submission.


    2. Using the Web Interface

    You can use Transifex Web UI to translate strings. To do this, from the language description page, click on the relevant language resource. For the theme, click on Avada.po. For the plugin, click on fusion-core.po.

    From the popup, click on “Translate Now” button which will load Transifex web editor.

    From the left pane, select the strings that you would like to translate. Strings with green check are already translated. Strings without check (grey dot) needs to be translated.

    After selecting a string to translate from the left pane, use the right pane to translate the string. After you’re done translating, click the “Save” button to submit the translation.





    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.

    Using RTL Languages

    Avada is RTL Ready

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

    Sidebars

    Creating Sidebars

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


    To Create A Sidebar, Follow The Steps Below.

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

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

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

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

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

    Page Templates That Can Utilize A Sidebar

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

    Any sidebar that you create can be assigned to any page template that accepts sidebars, or for any post. Avada also offers dual sidebars so you can assign a sidebar on the left and on the right with your content in the middle. Please see below for information on how to assign sidebars to pages and posts.

    How To Assign A Sidebar To A Page / Post.

    Step 1 – Edit or create a new Page or Post in your WordPress Admin.

    Step 2 – Find the Fusion Options Box below the editing field and click the “Sidebars” tab.

    Step 3 – There are two sidebar dropdown fields; Sidebar 1 and Sidebar 2. To use a single sidebar, make a selection for Sidebar 1 and choose “No Sidebar” for Sidebar 2. To use dual sidebars, make a selection for both Sidebar 1 and Sidebar 2.

    Step 4 – Choose the “Sidebar Position”. This option only works with Sidebar 1. If using dual sidebars, Sidebar 2 will be placed on the opposite side of Sidebar 1.

    Step 5 – When finished, Publish the page or post to save the settings.

    sidebar

    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 theme options or individually per page or post. The page option overrides the theme option. However, the theme option will control the page option as long as the page option is set to “Default”. Default setting means it is pulling from 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.

    To Add Widgets, Follow The Steps Below.

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

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

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

    widgets

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

    footer widgets

    Flickr & Twitter Widgets

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

    To Setup The Twitter Widget, Follow The Steps Below.

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

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

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

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

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

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

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

    twitter

    To Setup The Flickr Widget, Follow The Steps Below.

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

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

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

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

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

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

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

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

    Extras

    Social Icons

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

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


    Social Media Tab In Theme Options – Links And Icon Sorting

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

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

    Social Icons In The Header

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


    Social Icons In The Footer

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


    Social Share Box

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

    Social Links ShortCode

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

    Social Links Widget

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

    Social Icon Style Options

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

    Social Icons Unboxed

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

    Social Icons Boxed

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

    Social Icon Custom Icon Color

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

    Social Icon Custom Box Color

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

    Social Icon Box Radius

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

    Social Icon Tooltip Hover Position

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

    Custom Font

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


    To Use A Custom Font, Follow The Steps Below.

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

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

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

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

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


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

    Retina Ready

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

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

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

    The WP Retina 2X Plugin For User Images

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

    Other Images Such As Logos and Favicons

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


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

    WooCommerce

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





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

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

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

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

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

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

    woocommerce

    2. How To Create Your Products

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

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

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

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

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

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

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

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

    woocommerce

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

    woocommerce

    3. How To Adjust WooCommerce Catalog Settings For Image Sizes

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

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

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

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

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

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

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

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

    woocommerce

    CSS, Javascript & Credits

    CSS Files:

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

    Javascript Files:

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

    Sources & Credits:

    Proudly Serving Over 90000 Satisfied Users!