ThemeFusion-Documentation File

Avada Wordpress Documentation v2.0.5

## Thank You For Purchasing One of Our Premium Items!

Below is all the information you will need to setup and use your theme. We have taken extra time and effort to make these docs as detailed as possible with instructions and video tutorials. If you have any questions that are beyond the scope of this help file, please visit our support forum where we handle all support. Directions for how to setup your free support account are below. Thanks so much!

support forum Visit Us Online Follow On Evanto other themes

## Table of Contents

1. Free Forum Support
2. Installation
   1. Wordpress Installation
   2. FTP Installation
3. Museo Slab 500 Font
4. Migrating From A Theme
5. Importing the Demo Data
6. Setting Up New Pages
7. Setting Up The Menu
8. Setting Up The Home Pages

9. Setting Up The Blog Page
   1. Blog Post Types
10. Setting Up The Portfolio Page
    1. Portfolio Post Types
11. Setting Up The About Us Page
12. Setting Up The Services Page
13. Setting Up The Contact Page
14. Setting Up The FAQ Page
15. Setting Up The Side Nav Page
16. Creating Custom Sidebars

17. Setting Up The Sliders
    1. Revolution Slider
    2. Layer Slider
    3. ThemeFusion Slider
    4. FlexSlider
18. Advanced Theme Options
19. Custom Widgets
20. Shortcodes
21. How To Translate
22. CSS, Javascript & Credits

Back To Top

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

### To access our forum, you need to create a free account. To create an account, you need to use 3 things.

- The same Themeforest username that you bought our item with.
- The same email address that is associated with your Themeforest username.
- Your purchase code which is located in the license certificate.txt file (see below for where to get this)

click here to setup your free support account

Once you log into your account, it may take you to a wordpress admin page, simply move your mouse over the "ThemeFusion" name in the top left corner and a dropdown menu will appear, click the "visit site" and head over to the forum. Before you post a topic, please read our General Guidelines & Support Policy. It will save you time and hassle.

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

Back To Top

## B. Installation

To install this theme you must have a working version of WordPress already installed. For information on installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress. Upon downloading the "package.zip" file from Themeforest, you'll have all files you need inside. Extract the "package.zip" file and inside you will find the theme zip file called "Avada.zip", that is the file you need to install.
Please Note: You can install the theme in two ways: through Wordpress, or via FTP. If you have trouble installing the theme via Wordpress, please proceed with installing it via FTP and you will be able to get around the issue.

Back To Top

## B1. Wordpress Installation

### Follow the steps below to install via Wordpress.

- Navigate to Appearance > Themes.
- Click Install Themes and hit the upload button.
- Navigate to find the "Avada.zip" file on your computer and click "Install Now" button.
- The theme will be uploaded and installed.
- Activate the newly installed theme. Go to Appearance > Themes and activate the installed theme. The included plugins are now integrated into the theme so you do not have to manually install them, all will be ready to use when you install the theme

### Watch Video Tutorial - Make sure you watch it in HD or Fullscreen

Back To Top

## B1. FTP Installation

### Follow the steps below to install via FTP.

- Log into your hosting space via an FTP software
- Unzip the Avada.zip file and ONLY use the extracted Avada theme folder
- Upload the extracted Avada theme folder into
  wp-content > themes in your wordpress installation
- Activate the newly installed theme. Go to Appearance > Themes and activate the installed theme. The included plugins are now integrated into the theme so you do not have to manually install them, all will be ready to use when you install the theme

Back To Top

## C. Museo Slab Font

Museo Slab 500 is the font used for all headings in our demo. It is a free font, but it is not allowed to be distributed commercially. Please download it below, make sure you are selecting the "Museo Slab 500" version, it is the only one that is $0.
DOWNLOAD LINK FOR MUSEO SLAB 500 FONT

### After downloading the font, follow the steps below to install it via theme options

- Make sure the Avada theme is already installed
- Unzip the Font file you receive from the download
- You will need the .woff, .ttf, .svg, .eot font files
- Navigate to Appearance > Theme Options > Typography Options
- You will see 4 Custom Font fields, one for each of the 4 font files listed above
- Upload the 4 individual font files into the corresponding field by clicking the Upload button
- 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

### Watch Video Tutorial - Make sure you watch it in HD or Fullscreen

Back To Top

## D. Migrating From Another Theme

If you are migration from a theme which used the native featured images functionality of WordPress. Please use the Regenerate Thumbnails plugin to resize all the thumbnails. Click the link above and download the free plugin, and read through the steps it contains, it has all the information you need.

Back To Top

## E. Importing The Demo Data - XML File

We have include the exported XML file from our demo, this allows you to quickly set up your theme the same way our demo is set up. Please note, the XML file does not include images or the slider data. See the slider sections of this documenation to set up the sliders.

### Follow These Steps Below To Import The XML File, or Watch The Video Tutorial

- The XML file is included within the download package at root level in a folder called XML
- Navigate to WP Admin > Tools > Import
- Select and install WordPress importer
- Once its installed, select the XML file and upload it. It will take a few minutes to install and upload all content
- Now navigate to WP Admin > Appearance > Menus page and select menu called "Main" and assign it to "Main Navigation" location
- Next, navigate to WP Admin > Settings > Reading Settings and set a front page and posts page
- If you have issues with the above process, please read the note below

### If The Demo Content Will Not Load For You, Please Check The Following Items

- Make sure the wp-content > uploads folder is writeable
- Make sure you have the uploads folder on your server, if you do not then please make one at wp-content > uploads.
- Its possible that your server upload limit is too low, if so, contact yourr hosting company to temporarily increase it to about 200MB
- Some users may need to set their folder permissions for the wp-content/uploads folder to 777 before being able to upload anything
- And please have patience, it can take several minutes or longer depending on the speed of your server and connection.

### Watch Video Tutorial - Make sure you watch it in HD or Fullscreen

Back To Top

## F. Setting Up New Pages

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. For example, if you want a "Full Width" page, then you need to select "Full Width" for the page template.

### Follow These Steps Below To Create A New Page

- Navigate to Pages and click Add New.
- Input a new name for your page, then look for the Page Attributes on the right hand side of the page
- Parent is usually set to No Parent unless the page
  you are making is a Side Navigation page
- Then select a page template from the dropdown list. See list of page templates and descriptions below.
- You can then select any number of Page Options or select a Sidebar to show on the page
- Content for your page goes in the editing field, use the Visual or HTML 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

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

1. Default: this is the default page template that automatically has the sidebar with it. Choose this template for your blog
2. Contact: this is the contact page template that you should choose when you make your contact page with google map & contact form
3. FAQ: this is the FAQ page template. Choose this template when you make your FAQ page
4. 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.
5. Portfolio 1-4 Columns: these are the portfolio page layout templates, choose 1, 2, 3 or 4 columns depending on the layout you want.
6. Side Navigation: this is the side navigation page template. When making a side navigation page, make sure to set the Parent to Side Navigation, and also set each page Template that needs to be inlcuded to Side Navigation. See "Setting Up The Side Nav Pages" portion of this document for more info.

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

### Watch Video Tutorial - Make sure you watch it in HD or Fullscreen

## F. Setting Up The Menu

Avada supports custom WordPress menu with three level dropdown support. If you've imported the demo data as described above in Section E, then please follow those steps and select the demo navigation menu called "Main" as the main navigation. If you are making a new menu, read below.

### To setup a new menu, please follow the steps below. Its best to already have your pages created, even if they are blank pages.

- Navigate to Apperance > Menus page
- Click the "+" icon to make a new menu. Enter the name then hit Create Menu
- To add a menu item, you can easily select one of your already made pages on the left hand side and click Add to Menu
- You can also add menu items by entering a custom name and custom link into the Custom Links box.
- You can manage your menus using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of another menu item and it will lock into place and create a dropdown section.
- After setting up your menu, select the menu you just created as the Main Navigation in the Theme Locations box
- Once its all done, make sure you click the Save button.

Please Note: Avada also includes a separate menu option for your 404 page, its called 404 Useful Pages in the menu section of your admin. Follow the steps above to create a custom menu for your 404 page and set it to show in the Theme Locations box.

### Here is a screenshot that shows you the important areas of the menu section outlined above

Back To Top

## H. Setting Up The Home Pages

Avada includes 3 pre-designed home page options. Any of the layout options you see on the 3 home pages can be used on your home page or any other page via shortcodes, you are not stuck with the pre-designed options. You can mix and match anyway you like.

To setup your homepage, create a new page and make sure you set the Template to Full Width in the Page Attributes box, see the screenshot below.

### Homepages can be built through a combination of shortcodes or with our pre-designed demo pages.

- To use one of our pre-designed layouts, copy and paste our demo code into the HTML editor of your page. See the demo code for each home page below.
- To create your home page with shortcodes, click the shortcode icons you want in the Visual Editor and populate your content. See our shortcodes section for more detailed info on how to use them

### Once you have created your home page, you need to select it to show up as the home page. To do this, follow the steps below.

- Navigate to Settings > Reading
- Select A Static Page for Front Page Displays
- Select your new home page for the Front Page
- This is also the same spot you select the Blog page

### Home Page 1 Demo Code

<!-- this is the tagline box --> [tagline_box link="http://themeforest.net/user/ThemeFusion" button="Purchase Now" title="Avada is incredibly responsive, with a refreshingly clean design" description="And it has some awesome features, premium sliders, unlimited colors, advanced theme options and so much more!"] [/tagline_box] <!-- these are the content boxes --> [content_boxes] [content_box title="Responsive Design" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-02.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]Avada is fully responsive and can adapt to any screen size. Try resizing your browser window to see the adaptation.[/content_box] [content_box title="Awesome Sliders" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-02.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]Avada includes the awesome Layer Parallax Slider as well as the popular FlexSlider2. Both are super easy to use![/content_box] [content_box title="Unlimited Colors" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-03.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]We included a backend color picker for unlimited color options. Anything can be changed, including the gradients![/content_box] [content_box last="yes" title="500+ Google Fonts" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-04.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]Avada loves fonts, choose from over 500+ Google Fonts. You can change all headings and body copy with ease![/content_box] [/content_boxes] <!-- this the is recent posts widget --> [three_fourth last="no"] <div class="title"> <h2>Latest From The Blog</h2> </div> [recent_posts thumbnail="yes" title="yes" meta="yes" excerpt="yes"][/recent_posts] [/three_fourth] <!-- this is the testimonial slider --> [one_fourth last="yes"] <div class="title"> <h2>What Client's Say</h2> </div> [testimonials] [testimonial name="John Doe" company="My Company"]Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.[/testimonial] [testimonial name="Peter Doe" company="Imperio Theme"]Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt[/testimonial] [/testimonials] [/one_fourth]

### Home Page 2 Demo Code

<!-- these are the content boxes --> [content_boxes] [content_box title="Responsive Design" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-01.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]Avada is fully responsive and can adapt to any screen size, its incredibly flexible. Try resizing your browser window to see the adaptation in action.[/content_box] [content_box title="Awesome Sliders" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-02.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]Avada includes the awesome Layer Parallax Slider as well as the popular FlexSlider2. Both of the sliders have awesome plugins making it super easy to use.[/content_box] [content_box last="yes" title="Unlimited Colors" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-03.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]We included a backend color picker for unlimited color options. Any of the elements can be changed, including the super awesome CSS3 gradients![/content_box] [/content_boxes] <!-- this is the recent works widget --> <div class="title"> <h2>Recent Work</h2> </div> [recent_works][/recent_works] <!-- this is the text block with bullets --> [one_half last="no"] <div class="title"> <h2>Why Choose Us</h2> </div> <ul class="arrow"> <ul class="arrow"> <li>Fully responsive so your content will always look good on any screen size</li> <li>Awesome sliders give you the opportunity to showcase your important content</li> <li>Unlimited color options with a backed color picker, including the gradients</li> <li>Multiple layout options for the home pages, portfolio section and blog section</li> <li>We offer free support because we care about your site just as much as you do.</li> </ul> [/one_half] <!-- this is the testimonial slider --> [one_half last="yes"] <div class="title"> <h2>What Client's Say</h2> </div> [testimonials] [testimonial name="John Doe" company="My Company"]Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consec tetursir, adipisci velit, sed quia non numquam eius voluptatem. Ut enim ad minimas veniam, quis nostrum exercitationem ullam corporis suscipit estas laboriosam, nisi ut aliquid ex ea commodi consequatur slores amet untras iumuis sdaip dolores amet untras uns voluptas.[/testimonial] [testimonial name="Luke Beck" company="Theme Fusion"]Aliquam erat volutpat. Quisque at est id ligula facilisis laoreet eget pulvinar nibh. Suspendisse at ultrices dui ipsum quia dolor sit amet, consec teturis, adipisci velit, sed quia non numquam eius voluptatem. Curabitur ac felarcu quisquam est, qui dolorem ipsum quia dolor sit amet.[/testimonial] [/testimonials] [/one_half]

### Home Page 3 Demo Code

<!-- these are the content boxes --> [one_third last="no"] <img src="http://theme-fusion.com/avada/wp-content/uploads/2012/08/feature3.jpg" alt="" /> <h2>Ultra-Responsive Design</h2> Avada is fully responsive and can adapt to any screen size, its incredibly fast and flexible. Try resizing your browser window to see the adaptation in action. [/one_third] [one_third last="no"] <img src="http://theme-fusion.com/avada/wp-content/uploads/2012/08/feature2.jpg" alt="" /> <h2>Awesome Powerful Sliders</h2> Avada includes the awesome Layer Parallax Slider as well as the popular FlexSlider2. Both of the sliders have awesome plugins making it super easy to use. [/one_third] [one_third last="yes"] <img src="http://theme-fusion.com/avada/wp-content/uploads/2012/08/feature1.jpg" alt="" /> <h2>Loaded With Options</h2> This theme is loaded, unlimited color options, 500+ google fonts, 4 post types, advanced theme options, 3 home page layouts, boxed & wide to name a few. [/one_third] <!-- these are the tabs --> <div style="margin-top:50px;" class="demo-sep"></div> [one_half last="no"] [tabs tab1="Tab Data #1" tab2="Tab Data #2" tab3="Tab Data #3"] [tab id=1] <a href="http://themeforest.net/user/ThemeFusion"><img class="alignleft size-full wp-image-212" style="padding-bottom: 1em;" title="tab-photo" src="http://theme-fusion.com/avada/wp-content/uploads/2012/08/tab_photo.jpg" alt="" width="126" height="106" /></a>Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerums facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam. [/tab] [tab id=2]Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips ameet quasi architecto beatae vitae dicta sunt explicabo. amets dolores.[/tab] [tab id=3]Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips ameet quasi architecto beatae vitae dicta sunt explicabo. amets dolores.[/tab] [/tabs] [/one_half] <!-- this is the text block with bullets --> <div style="margin-top:50px;" class="demo-sep"></div> [one_half last="yes"] <div class="title"> <h2>Why Choose Us?</h2> </div> <ul class="arrow"> <ul class="arrow"> <li>Fully responsive so your content will always look good on any screen size</li> <li>Awesome sliders give you the opportunity to showcase your important content</li> <li>Unlimited color options with a backed color picker, including the gradients</li> <li>Multiple layout options for the home pages, portfolio section and blog section</li> <li>We offer free support because we care about your site just as much as you do.</li> </ul> [/one_half] <!-- this is the row of client logos --> <div class="title" style="margin-top:40px;"> <h2>Our Happy Clients</h2> </div> <a href="#"><img class="alignnone size-full wp-image-259" title="logo_plate" src="http://theme-fusion.com/avada/wp-content/uploads/2012/08/logo_plate.png" alt="" width="940" height="72" /></a>

### Home Page 4 Demo Code

<!-- this is the tagline box --> [tagline_box link="http://themeforest.net/user/ThemeFusion" button="Purchase Now" title="Avada makes is so easy to build pages with tons of shortcodes!" description="And it has some awesome features, premium sliders, unlimited colors, advanced theme options and so much more!"][/tagline_box] <!-- this is the slider --> [one_half last="no"] [slider][slide]http://theme-fusion.com/avadatest/wp-content/uploads/2012/11/about_1a.jpg[/slide][slide type="video"]<iframe src="http://player.vimeo.com/video/46664156" frameborder="0" width="500" height="281"></iframe>[/slide][slide link="http://google.com"]http://theme-fusion.com/avadatest/wp-content/uploads/2012/11/about_2a.jpg[/slide] [slide]http://theme-fusion.com/avadatest/wp-content/uploads/2012/11/about_3a.jpg[/slide][/slider] [/one_half] <!-- this is the accordion --> [one_half last="yes"] [accordian] [toggle title="Our Company Mission" open="yes"]]Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.[/toggle] [toggle title="The Avada Philosophy"]Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.[/toggle] [toggle title="The Avada Promise"]Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.[/toggle] [toggle title="We Can Deliver On Projects"]Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.[/toggle] [/accordian] [/one_half] <!-- this is the latest from the blog --> [title size="2"]Latest From The Blog[/title] [recent_posts columns="4" number_posts="4" cat_id="" thumbnail="yes" title="yes" meta="yes" excerpt="yes" excerpt_words="15"][/recent_posts]

### Home Page 5 Demo Code

<!-- this is the tagline box --> [tagline_box link="http://themeforest.net/user/ThemeFusion" button="Purchase Now" title="Avada is very versatile with multiple layouts" description="And its so easy to make your own layouts with our numerous shortcodes!"][/tagline_box] <!-- this is latest from blog --> [title size="2"]Latest From The Blog[/title] [recent_posts columns="3" number_posts="3" cat_id="" thumbnail="yes" title="yes" meta="yes" excerpt="yes" excerpt_words="15"][/recent_posts] <!-- these are the tabs --> [tabs tab1="Tab #1" tab2="Tab #2" tab3="Tab #3"] [tab id=1] <a href="http://themeforest.net/user/ThemeFusion"><img class="alignleft size-full wp-image-212" title="pc-icon" src="http://theme-fusion.com/avada/wp-content/uploads/2012/07/pc-icon.png" alt="" width="81" height="51" /></a> Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur un, adipisci amets uns. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerum users sadips ameet quasi architecto beatae vitae dicta sunt explicabi amets sadips ipsums dolores fugiats sidspers. [/tab] [tab id=2]<a href="http://themeforest.net/user/ThemeFusion"><img class="alignleft size-full wp-image-212" style="padding-bottom: 1em;" title="tab-photo" src="http://theme-fusion.com/avada/wp-content/uploads/2012/08/tab_photo.jpg" alt="" width="126" height="106" /></a>Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerums facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud neque porro quisquam Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla dolores ipsums fugiats voluptas amet uns. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerum users sadips ameet quasi architecto beatae vitae dicta sunt explicabi amets sadips ipsums dolores fugiats sidspers. [/tab] [tab id=3]<a href="http://themeforest.net/user/ThemeFusion"><img class="alignleft size-full wp-image-212" title="pc-icon" src="http://theme-fusion.com/avada/wp-content/uploads/2012/07/pc-icon.png" alt="" width="81" height="51" /></a>Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips ameet quasi architecto beatae vitae dicta sunt explicabi amets. [/tab] [/tabs] <!-- this is meet the gururs --> [one_half last="no"] <div class="title" style="margin-top: 20px;"> <h2>Meet Our Gurus</h2> </div> [slider][slide]http://theme-fusion.com/avadatest/wp-content/uploads/2012/11/about_1a.jpg[/slide][slide type="video"]<iframe src="http://player.vimeo.com/video/46664156" frameborder="0" width="500" height="281"></iframe>[/slide][slide link="http://google.com"]http://theme-fusion.com/avadatest/wp-content/uploads/2012/11/about_2a.jpg[/slide] [slide]http://theme-fusion.com/avadatest/wp-content/uploads/2012/11/about_3a.jpg[/slide][/slider] [/one_half] <!-- this is crazy skills--> [one_half last="yes"] <div class="title" style="margin-top: 20px;"> <h2>Crazy Skills</h2> </div> <div id="progress-bars">[progress percentage="90"]Web Design[/progress][progress percentage="95"]HTML/CSS[/progress][progress percentage="85"]Graphic Design[/progress][progress percentage="75"]WordPress[/progress]</div> [/one_half]

### Home Page 6 Demo Code

<!-- this is the tagline box --> [tagline_box link="http://themeforest.net/user/ThemeFusion" button="Purchase Now" title="Avada is incredibly responsive, with a refreshingly clean design" description="And it has some awesome features, premium sliders, unlimited colors, advanced theme options and so much more!"][/tagline_box] <!-- these is the slider --> [separator top="-20"] [one_half last="no"] [slider][slide]http://theme-fusion.com/avadatest/wp-content/uploads/2012/11/about_1a.jpg[/slide][slide type="video"]<iframe src="http://player.vimeo.com/video/46664156" frameborder="0" width="500" height="281"></iframe>[/slide][slide link="http://google.com"]http://theme-fusion.com/avadatest/wp-content/uploads/2012/11/about_2a.jpg[/slide] [slide]http://theme-fusion.com/avadatest/wp-content/uploads/2012/11/about_3a.jpg[/slide][/slider] [/one_half] <!-- this the is the text block --> [one_half last="yes"] [title size="2"]Welcome To Avada[/title] Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets.. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Asunt in anim uis aute irure dolor in reprehenderit in volupte velit esse cillum. [/one_half] <!-- this is latest from blog --> [three_fourth last="no"] [title size="2"]Latest From The Blog[/title] [recent_posts columns="3" number_posts="3" cat_id="" thumbnail="yes" title="yes" meta="yes" excerpt="yes" excerpt_words="15"][/recent_posts] [/three_fourth] <!-- this is testimonials --> [one_fourth last="yes"] [title size="2"]Our Happy Clients[/title] [testimonials] [testimonial name="John Die" gender="female" company="My Company"]Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consec tetur, adipisci velit, sed quia non numquam eius modi tempora incidunt utis labore et dolore magnam aliquam quaerat voluptatem.[/testimonial] [testimonial name="John Die" gender="male" company="My Company"]Dolorem ipsum quia dolor sit amet, consec tetur, adipisci velit, sed quia non numquam eius modi tempora incidunt utis labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minimas veniam, quis nostrum exerc.[/testimonial] [/testimonials] [/one_fourth]

### Home Page 7 Demo Code

<!-- these are the content boxes --> [content_boxes] [content_box title="Responsive Design" icon="" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-02.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]Avada is fully responsive and can adapt to any screen size. Try resizing your browser window to see the adaptation.[/content_box] [content_box title="Awesome Sliders" icon="" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-02.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]Avada includes the awesome Layer Parallax Slider as well as the popular FlexSlider2. Both are super easy to use![/content_box] [content_box title="Unlimited Colors" icon="" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-03.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]We included a backend color picker for unlimited color options. Anything can be changed, including the gradients![/content_box] [content_box last="yes" title="500+ Google Fonts" icon="" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-04.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]Avada loves fonts, choose from over 500+ Google Fonts. You can change all headings and body copy with ease![/content_box] [/content_boxes] <!-- this the is latest from the blog --> [separator top="-10"] [title size="2"]Latest From The Blog[/title] [recent_posts columns="3" number_posts="3" cat_id="" thumbnail="yes" title="yes" meta="yes" excerpt="yes" excerpt_words="15"][/recent_posts] <!-- this is the tagline box --> [tagline_box link="http://themeforest.net/user/ThemeFusion" button="Purchase Now" title="Avada is incredibly responsive, with a refreshingly clean design" description="And it has some awesome features, premium sliders, unlimited colors, advanced theme options and so much more!"][/tagline_box] <!-- this is recent work --> [separator top="30"] [title size="2"]Our Recent Work[/title][recent_works cat_id=""][/recent_works]

Back To Top

## I. Setting Up The Blog

To setup your blog page, create a new page and name it anything that you want. Make sure the page Template is set to Default Template in the Page Attributes Box on the right hand side of the page editor. Doing that will automatically apply the sidebar to your blog page. Avada has 3 different blog page layout designs; Blog Large, Blog Medium and Blog Full Width.

### To select a specific blog page layout design, simply follow the steps below

- Navigate to Appearance > Theme Options and click on the Blog Options Tab
- At the top you can select the three different Blog Layout designs. Select one then hit save
- Then Navigate to Settings > Reading and select your blog page name for the Posts Page

### After your Blog page is made, you have to create posts to show up on the blog page. Follow the steps below to create a blog post.

- All of your blog posts are made in the Posts section of your wordpress admin. Click on Posts to open the section.
- At the top of the posts page, click on Add New to make a new post. Create a title and insert your post content in the editing field
- On the right hand side of the post page is the Categories box. To make a new Category, click + Add New Category and give it a name. You can have as many as you want. To apply a Category to a post, simply check the box next to the Category name.
- You can also apply Tags to a post. The Tag box is below the Category box. Simply insert your tags, separate multiple tags with commas
- To set a Featured Image. Click the Featured Image box and select an image from the media window and click Use As Featured Image
- Once you have everything you want selected, click Publish and your post will show up on your blog page

### Here is a screenshot that shows you the important areas of the blog post page outlined above

### Watch Video Tutorial - Make sure you watch it in HD or Fullscreen

Back To Top

## I1. Blog Post Types

Avada includes various post types for your blog posts. You can have a single image, a slideshow of images or a video. You can also insert audio into your post content through the sound cloud shortcode in the visual editor. Please see the shortcode section for how to use the sound cloud shortcode.

### To create a single image post, follow these steps

- Create a new post in your post section of your admin
- In the lower right corner are Featured Image boxes
- Click on Set Featured Image and your media window will popup which will allow you to select an image in your media library or upload a new one
- Then select Use As Featured Image, only set one Featured Image if you do not want a slideshow
- Close the media window and be sure to Publish

### To create a slideshow post, follow these steps

- Follow the same steps above but set multiple featured images instead of just one
- Select Use As Featured Image for the first item, and Use As Featured Image #2, #3, etc for the other images in the slideshow
- Close the media window and be sure to Publish
- 5 Featured images show by default, to add more change the Post Image Slideshow number in your theme options located on the Post Slideshows tab

### To create a video post, follow these steps

- Create a new post in your post section of your admin
- Find the Video Embed Code field and paste your iFrame embed code you get from your video source, either Youtube or Vimeo
- Close the media window and be sure to Publish
- The screenshot on the right gives you an example of the iFrame video embed code

Slideshows: Avada has 2 methods for slideshows, legacy and the new method. If you have been a user prior to Avada 2.0, you will need to turn on Legacy Slideshows in your theme options located on the Slideshows tab for your old slideshows to show up. We prefer the new method of setting multiple featured images as it allows for easier slideshow creation and management as well as images to be placed in the post content without being added to the top slideshow. Previous users can create your slideshows over again with the new method, or enable Legacy Slideshows in theme options.

Featured Images: The feature image on the listing page for the Blog Large layout is set at 670px wide x 272px high, the Blog medium is set at 320px wide x 202px high. And the featured image on the single post pages is set to be 670px wide. If the featured image you upload is smaller than the default size for the layout you choose, it will be automatically scaled up to fit the size which can cause pixellation in images. Make sure the featured images you use are the correct size for the layout. Or you can set a custom featured image size for each post. To do so, navigate to your post and find the "Post Options" box, at the bottom of the box is a field to input a custom featured image width and height. Insert a number in pixels (ex: 200px) and it will override the default size.

Re-Order Posts: FAQ's, Blog Posts, and Portfolio Posts are all ordered by date, the newest posts show first and the oldest show last. We have included a plugin called Post Type Order, which allows you to Re-Order those items manually. When you have that plugin installed, simply click Re-Order in the dropdown list of the section and you will be able to drag and drop posts into place.

Thumbnail Generation: Avada uses the WordPress Post Thumbnails function, this way you can upload one image and WordPress will automatically resize it to all the different thumbnail sizes for the different blog widgets (Recent News and Avada Tabs).

Back To Top

## J. Setting Up The Portfolio

To setup your portfolio page, create a new page and name it anything that you want. Avada includes 4 different portfolio templates, 1-4 columns. Select the page Template of your choice. You can select Portfolio One, Two, Three or Four Column. After you create your new page and select the template you want, you then need to make portfolio posts. Each portfolio post you make gets a thumbnail added to the main listing page (by setting a featured image for each post) and also gets a single post page.

### After your Portfolio page is set, you create posts to show up on the portfolio page. Follow the steps below to create a portfolio post.

- All of your portfolio posts are made in the Portfolio section of your wordpress admin. Click on Portfolio to open the section.
- At the top of the page, click on Add New to make a new portfolio post. Create a title and insert your post content in the editing field
- On the right hand side of the post page is the Categories box. These Categories are the filters that will sit above your portfolio images and allow you to filter the different types of projects. To make a new Category, click + Add New Category and give it a name. You can have as many as you want. To apply a Category to a post, simply check the box next to the name.
- Also on the right hand side of the post page is the Skill box. Follow the same steps above for Cateogires to create a new Skill
- To set a Featured Image. Click the Featured Image box and select an image from the media window and click Use As Featured Image. Setting a Featured Image is important because it is needed for the thumbnails to show up on the main portfolio page.
- Below the post content editing field are your Portfolio Options. You can set various things here including, half or full width, video embed code, light box video URL, and other project atributes that show up on the single portfolio post pages
- Once you have everything you want selected, click Publish and your post will show up on your portfolio listing page and the single post page

Please Note: Avada uses the WordPress Post Thumbnails function, this way you can upload one image and WordPress will automatically resize it to all the different thumbnail sizes for the different blog widgets (Recent Works Slider and Sidebar Widget). Featured Images on the Single Post Page Full Width are set to be 940px wide, and on the Single Post Page Half Width are set to be 620px wide so make sure your featured images are the right size or they will be scaled up to fit which could cause pixelation.

### Here is a screenshot that shows you the important areas of the portfolio post page outlined above

### Avada also allows for Unlimited Portfolio Pages with a custom set of Categories (Filters) per Portfolio page

To setup multiple portfolio pages, simply create a new page for each portfolio you want to have, and select the page Template of your choice for each of those pages as the above directions state. You can select Portfolio One, Two, Three or Four Column for each Portfolio page and each portfolio page can have a different template as well as a custom set of Category Filters.

### To select a custom set of Category Filters for your portfolio pages, follow the steps below.

- Open up your individual portfolio page in the Pages section of your admin
- Scroll down until you get to the Page Options box
- Inside the page options you will see a Portfolio Type option with your Categoires listed
- Any Portfolio Category you have created will show in this list, simply select the Category or Categories that you want to show for that specific Portfolio page. To select more than one Category, hold down the Command or Control key while selecting
- Once you are done, publish the page and your settings will be saved

Please Note: You have to already have Categories setup in your Portfolio section for them to show up in the Portfolio Type list. Only the Categories you have made will show up. See the above section for how to make a Category and how to apply it to a Portfolio post. You also need to have the Categories assigned to Portfolio posts for them to show up on your site. See the above section for how to make Portfolio post.

### Watch Video Tutorial - Make sure you watch it in HD or Fullscreen

Back To Top

## J1. Portfolio Post Types

Avada includes various post types for your portfolio posts. You can have a single image, a slideshow of images or a video. You can also insert audio into your post content through the sound cloud shortcode in the visual editor. Please see the shortcode section for how to use the sound cloud shortcode.

### To create a single image post, follow these steps

- Create a new post in your post section of your admin
- In the lower right corner are Featured Image boxes
- Click on Set Featured Image and your media window will popup which will allow you to select an image in your media library or upload a new one
- Then select Use As Featured Image, only set one Featured Image if you do not want a slideshow
- Close the media window and be sure to Publish

### To create a slideshow post, follow these steps

- Follow the same steps above but set multiple featured images instead of just one
- Select Use As Featured Image for the first item, and Use As Featured Image #2, #3, etc for the other images in the slideshow
- Close the media window and be sure to Publish
- 5 Featured images show by default, to add more change the Post Image Slideshow number in your theme options located on the Post Slideshows tab

### To create a video post, follow these steps

- Create a new post in your post section of your admin
- Find the Video Embed Code field and paste your iFrame embed code you get from your video source, either Youtube or Vimeo
- Close the media window and be sure to Publish
- The screenshot on the right gives you an example of the iFrame video embed code

Slideshows: Avada has 2 methods for slideshows, legacy and the new method. If you have been a user prior to Avada 2.0, you will need to turn on Legacy Slideshows in your theme options located on the Slideshows tab for your old slideshows to show up. We prefer the new method of setting multiple featured images as it allows for easier slideshow creation and management as well as images to be placed in the post content without being added to the top slideshow. Previous users can create your slideshows over again with the new method, or enable Legacy Slideshows in theme options.

Featured Images: The feature image on the full width single post page is 940px wide, the half width post page is set at 620px wide. If the featured image you upload is smaller than the default size for the layout you choose, it will be automatically scaled up to fit the size which can cause pixellation in images. Make sure the featured images you use are the correct size for the layout. Or you can set a custom featured image size for each post. To do so, navigate to your post and find the "Post Options" box, at the bottom of the box is a field to input a custom featured image width and height. Insert a number in pixels (ex: 200px) and it will override the default size.

Re-Order Posts: FAQ's, Blog Posts, and Portfolio Posts are all ordered by date, the newest posts show first and the oldest show last. We have included a plugin called Post Type Order, which allows you to Re-Order those items manually. When you have that plugin installed, simply click Re-Order in the dropdown list of the section and you will be able to drag and drop posts into place.

Thumbnail Generation: Avada uses the WordPress Post Thumbnails function, this way you can upload one image and WordPress will automatically resize it to all the different thumbnail sizes for the different portfolio listing pages (1-4 column) and shortcodes/widgets.

Back To Top

## K. Setting Up The About Us Page

Avada includes various page templates that you can use, most of them use the Full Width page template, including the About Us page. Most of our page elements are shortcodes and can be used anywhere in combination. And we provide our exact demo setup for you to use, the code is below. Or you can also build custom pages using shortcodes. If you use our demo code, you may need to change the image URL's to the images in your media library.

### To create About Us page, follow the steps below

- Create a new page and give it any name you wish
- In the Page Attributes box on the right hand side, set the Template to full width
- To use our pre-designed layout, copy and paste our demo code below into the HTML editor of your page.
- To create a custom page with shortcodes, click the shortcode icons you want in the Visual Editor and populate your content. See our shortcodes section for more detailed info on how to use them
- Once you are done, be sure to Publish

### About Us Page Demo Code

<!-- this is the image slider --> [one_half last="no"] [slider][slide]http://theme-fusion.com/avada/wp-content/uploads/2012/08/about_1.jpg[/slide][slide type="video"]<iframe src="http://player.vimeo.com/video/46664156" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>[/slide][slide link="http://google.com"]http://theme-fusion.com/avada/wp-content/uploads/2012/08/about_2.jpg[/slide] [slide]http://theme-fusion.com/avada/wp-content/uploads/2012/08/about_3.jpg[/slide][/slider] <!-- this is the top text box with title --> [/one_half] [one_half last="yes"] <div class="title"> <h2>Welcome to Avada</h2> </div> Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets.. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla. [/one_half] <!-- these are the toggles --> [one_half last="no"] <div class="title"> <h2>Who is Avada?</h2> </div> [toggle title="Our Company Mission"]Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.[/toggle] [toggle title="The Avada Philosophy"]Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.[/toggle] [toggle title="The Avada Promise"]Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.[/toggle] [toggle title="We Can Deliver On Projects"]Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.[/toggle] [/one_half] <!-- this is the skill set --> [one_half last="yes"] <div class="title"> <h2>Our Crazy Skills</h2> </div> <div id="progress-bars">[progress percentage="90"]Web Design[/progress][progress percentage="95"]HTML/CSS[/progress] [progress percentage="85"]Graphic Design[/progress] [progress percentage="75"]WordPress[/progress] </div> <!-- this is Meet Our Team section --> [/one_half] <div class="title" style="margin-top: 60px;"> <h2>Meet Our Team</h2> </div> [one_third last="no"] [person name="John Doe" picture="http://theme-fusion.com/avada/wp-content/uploads/2012/08/team1.jpg" title="Developer" facebook="http://facebook.com" twitter="http://twitter.com" linkedin="http://linkedin.com" dribbble="http://dribbble.com"]Redantium, totam rem aperiam, eaque ipsa qu ab illo inventore veritatis et quasi architectos beatae vitae dicta sunt explicabo. Nemo enim.[/person] [/one_third] [one_third last="no"] [person name="John Doe" picture="http://theme-fusion.com/avada/wp-content/uploads/2012/08/team2.jpg" title="Developer" facebook="http://facebook.com" twitter="http://twitter.com" linkedin="http://linkedin.com" dribbble="http://dribbble.com"]Redantium, totam rem aperiam, eaque ipsa qu ab illo inventore veritatis et quasi architectos beatae vitae dicta sunt explicabo. Nemo enim.[/person] [/one_third] [one_third last="yes"] [person name="John Doe" picture="http://theme-fusion.com/avada/wp-content/uploads/2012/08/team3.jpg" title="Developer" facebook="http://facebook.com" twitter="http://twitter.com" linkedin="http://linkedin.com" dribbble="http://dribbble.com"]Redantium, totam rem aperiam, eaque ipsa qu ab illo inventore veritatis et quasi architectos beatae vitae dicta sunt explicabo. Nemo enim.[/person] [/one_third] <!-- this is client list --> <div class="title" style="margin-top: 60px;"> <h2>Our Happy Clients</h2> </div> <a href="#"><img class="alignnone size-full wp-image-259" title="logo_plate" src="http://theme-fusion.com/avada/wp-content/uploads/2012/08/logo_plate.png" alt="" width="940" height="72" /></a>

Back To Top

## L. Setting Up The Services Page

Avada includes various page templates that you can use, most of them use the Full Width page template, including the Services page. Most of our page elements are shortcodes and can be used anywhere in combination. And we provide our exact demo setup for you to use, the code is below. Or you can also build custom pages using shortcodes. If you use our demo code, you may need to change the image URL's to the images in your media library.

### To create this page, follow the steps below

- Create a new page and give it any name you wish
- In the Page Attributes box on the right hand side, set the Template to full width
- To use our pre-designed layout, copy and paste our demo code below into the HTML editor of your page.
- To create a custom page with shortcodes, click the shortcode icons you want in the Visual Editor and populate your content. See our shortcodes section for more detailed info on how to use them
- Once you are done, be sure to Publish

### Services Page Demo Code

<!-- this is the image slider --> [one_half last="no"] [slider][slide]http://theme-fusion.com/avada/wp-content/uploads/2012/08/service1.jpg[/slide][slide type="video"]<iframe width="560" height="315" src="http://www.youtube.com/embed/UX7GycmeQVo" frameborder="0" allowfullscreen></iframe>[/slide][slide link="http://google.com"]http://theme-fusion.com/avada/wp-content/uploads/2012/08/service2.jpg[/slide] [slide]http://theme-fusion.com/avada/wp-content/uploads/2012/08/service3.jpg[/slide][/slider] <!-- this is the text box with heading title --> [/one_half] [one_half last="yes"] <div class="title"> <h2>Avada's Four Areas of Expertise</h2> </div> Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets.. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla. [/one_half] <!-- these are the content boxes --> [content_boxes] [content_box title="Responsive Design" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-02.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]Avada is fully responsive and can adapt to any screen size. Try resizing your browser window to see the adaptation.[/content_box] [content_box title="Awesome Sliders" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-02.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]Avada includes the awesome Layer Parallax Slider as well as the popular FlexSlider2. Both are super easy to use![/content_box] [content_box title="Unlimited Colors" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-03.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]We included a backend color picker for unlimited color options. Anything can be changed, including the gradients![/content_box] [content_box last="yes" title="500+ Google Fonts" image="http://theme-fusion.com/avada/wp-content/uploads/2012/07/ico-04.gif" link="http://themeforest.net/user/ThemeFusion" linktext="Learn More"]Avada loves fonts, choose from over 500+ Google Fonts. You can change all headings and body copy with ease![/content_box] [/content_boxes] <!-- this is the tab section --> <div class="title"> <h2>Avada's Other Services</h2> </div> <p style="margin-bottom: 30px;">Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi archgit, magnam aliquam quaerat voluptatem. Asunt in anim uis aute irure dolor ins. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minimaser.</p> [tabs tab1="Service #1" tab2="Service #2" tab3="Service #3"] [tab id=1] <div class="alignleft" style="width: 100%; margin-right: 0;"> Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips ameet quasi architecto beatae vitae dicta sunt explicabo. amets dolores. <a href="http://isharis.dnsalias.com/wp-content/uploads/2012/07/pc-icon.png"><img class="alignleft size-full wp-image-212" style="padding-right: 20px;" title="pc-icon" src="http://theme-fusion.com/avada/wp-content/uploads/2012/07/pc-icon.png" alt="" width="81" height="51" /></a> <ul class="arrow"> <li>Cras rutrum leo at odio volutpat donec fermentum porttitor nunc maecenas quis Etharums ser quidem rerum facilis</li> <li>Aenean faucibus sapien a odios suspendisse venenatis euismod cras dolores amets unsers fugiats.</li> </ul> </div> [/tab] [tab id=2]<a href="http://themeforest.net/user/ThemeFusion"><img class="alignleft size-full wp-image-212" style="padding-bottom: 1em;" title="tab-photo" src="http://theme-fusion.com/avada/wp-content/uploads/2012/08/tab_photo.jpg" alt="" width="126" height="106" /></a>Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerums facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud neque porro quisquam Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla dolores ipsums fugiats voluptas amet uns. [/tab] [tab id=3]<a href="http://isharis.dnsalias.com/wp-content/uploads/2012/07/pc-icon.png"><img class="alignleft size-full wp-image-212" style="padding-right: 20px;" title="pc-icon" src="http://theme-fusion.com/avada/wp-content/uploads/2012/07/pc-icon.png" alt="" width="81" height="51" /></a>Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips ameet quasi architecto beatae vitae dicta sunt explicabo. amets dolores. [/tab] [/tabs] <!-- this is the bullet list --> <div style="margin-top: 110px;"> [one_half last="no"] <div class="title"> <h2>Why Choose Us?</h2> </div> <ul class="arrow"> <ul class="arrow"> <li>Fully responsive so your content will always look good on any screen size</li> <li>Awesome sliders give you the opportunity to showcase your important content</li> <li>Unlimited color options with a backed color picker, including the gradients</li> <li>Multiple layout options for the home pages, portfolio section and blog section</li> <li>We offer free support because we care about your site just as much as you do.</li> </ul> [/one_half] <!-- these are the testimonials --> [one_half last="yes"] <div class="title"> <h2>What Client's Say</h2> </div> [testimonials] [testimonial name="John Doe" company="My Company"]"Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consec tetur, adipisci velit, sed quia non numquam eius modi tempora incidunt utis labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minimas veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur slores amet untras vel illum qui."[/testimonial] [testimonial name="Luke Beck" company="Theme Fusion"]"Aliquam erat volutpat. Quisque at est id ligula facilisis laoreet eget pulvinar nibh. Suspendisse at ultrices dui. Curabitur ac felis arcu."[/testimonial] [/testimonials] [/one_half] </div>

Back To Top

## M. Setting Up The 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

- Create a new page and give it any name you wish
- In the Page Attributes box on the right hand side, set the Template to Contact
- Insert any content you want into the editor fields, such as a heading and text as our demo shows
- To insert the Google Map, email address and reCAPTCHA key for the form, please navigate to Appearance > Theme Options > Contact Options and set those options. See the screenshot below
- Once you are done, be sure to Publish

Please Note: Setting the page template to Contact will automatically set the contact form and the default sidebar. To use a different sidebar, select a different sidebar in the Sidebar dropdown field on the page. To create a custom sidebar, please see our section called "Creating Custom Sidebars" in this document. You can also select Full Width from the page options to not have any sidebar

### Here is a screenshot that shows you the various areas and descriptions of the contact page options in the theme options panel

### To set your reCAPTCHA Keys, follow the steps below

- Click the following link and fill out the form ...
  CLICK HERE TO SET UP YOUR KEYS
- Once you fill the form out, it will give you a Public and Private key
- Copy each of those keys and paste them into the corresponding fields located in Theme Options
- Save your settings when done, then the reCAPTCHA box will show up directly below your contact form

Back To Top

## N. Setting Up The FAQ page

Avada includes a Frequently Asked Questions (FAQ) page that allows you to insert large amounts of content questions organized into Categories using filters, just like the Portoflio Posts can be filtered.

### To create the FAQ Page, follow the steps below

- Create a new page and give it any name you wish
- In the Page Attributes box on the right hand side, set the Template to FAQs
- Once you are done, be sure to Publish
- To create new FAQ's, select the FAQs sidebar item in your admin section
- FAQ's work like regular posts, to add a new one, click Add New in the FAQs section of your admin
- Create a title which will be the question, then insert copy in the editor field which will be the answer
- On the right hand side is the Categories box, these are your filters to your FAQs
- Click Add New Category and give it a name, then check the box to apply it to a FAQ

Please Note: Setting the page template to FAQ will automatically set the default sidebar on the page. To use a different sidebar, select a different sidebar in the Sidebar dropdown field on the page. To create a custom sidebar, please see our section called "Creating Custom Sidebars" in this document. You can also select Full Width from the page options to not have any sidebar
Re-Order Posts: FAQ's, Blog Posts, and Portfolio Posts are all ordered by date, the newest posts show first and the oldest show last. We have included a plugin called Post Type Order, which allows you to Re-Order those items manually. When you have that plugin installed, simply click Re-Order in the dropdown list of the section and you will be able to drag and drop posts into place.

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

Back To Top

## O. Setting Up The Side Navigation Page

Avada includes a Side Navigation page template that can be used to insert large amounts of content that is easily accessible to the viewer. 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.

### To create the Side Navigation Page, follow the steps below

- Create a new page and give it any name you wish
- In the Page Attributes box, set both the Parent and Template to Side Navigation
- Insert any type of content into the Visual or HTML editor, use short codes in the Visual editor
- Side navigation will show on the right side of the page by default. To change it, select Left from the Sidebar Position dropdown field in the page options. You can change it globally in theme options
- To create a second level, select an already created Side Navigation page for the Parent, and set Side Navigation for the Template field in the Page Attributes Box. The Parent Tempalte you select has to be a page that already has the Side Navigation set for both the Parent and Template.
- Menu order is set alphabetically, change it by inserting a new order for each page in the Order field
- Once you are done, be sure to Publish each of the pages

Back To Top

## P. Creating Custom Sidebars

Avada allows users to make an unlimited amount of custom sidebars. And you can apply those sidebars to any page by selecting its name from the Sidebar page option dropdown list. Be sure that you have the page template set to Default, or another sidebar template which allows a sidebar to show.

### To create a Sidebar, follow the steps below

- Navigate to Appearance > Sidebars
- click the Add New Sidebar button and give it a name and click OK to save it
- Once you are done, you need to add Widgets to the sidebar you just created
- Navigate to Appearacne > Widgets and find your sidebar name on the right hand side
- 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
- Widgets you drag over have to be populated with content, edit the widget fields and hit Save
- See our Widget section of this documentation for more details on our custom widgets

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

Back To Top

## Q. Setting Up The Sliders

Avada includes 4 total sliders, the Revolution Slider, the Layer Slider, the Flex Slider and the ThemeFusion Slider. Three of these sliders (Layer, Revolution and FlexSlider) include a plugin that are now fully integrated into Avada v2.0.5 so there is no longer a need to manually install them. All plugins are the same and work the same way, but they are the newly updated versions and are now integrated into Avada. When you install the theme, the plugins will automatically be installed with the theme and will be able to be access in the sidebar of your wordpress admin.

### If you were on Avada v2.0.4 or earlier and are updating to v2.0.5, then please read the important info below that describes what will happen with the integrated plugins when you perform the update.

You can't have both the standalone plugins from the older version and the new integrated plugins from the new version at the same time. So when you update Avada, a scipt is going to auto run that will deactivate your plugins and activate the new integrated plugins. This is a short process. Once the script runs and you go back into your Wordrpess admin and refresh the page, you will see a Fatal error, this is normal and is the process the script takes. All you need to do is refresh the page a second time and the script will complete and the new integrated plugins will be acitve, and the old plugins will be deactivated. All your slider content will still be there and accessed the same as before. Do not activate the 4 plugins that are now integrated or you will get a fatal error, you should delete the previous versions of plugins, you no longer need them.

### See the following sections for how to use each slider. Once you have made slides for a specifc slider, you need to select that sldier to show up on your page. Read below for instruction on how to do this.

After you have installed and setup slides for a slider, you have to select it to show up on your page. For each page you create, you have a Page Options box. In it you will find the options to select the slider and the specific name of the slider you created. See the screenshot below for a visual description.

Back To Top

## Q1. Revolution Slider

Avada includes the newly popular REVOLUTION SLIDER CREATED BY THEMEPUNCH. This slider is a beautifully animated slider that is 100% rsponsive and has some amazing options. We can't cover everything here but we outline how to setup a slider and one slide for it. We also include a video tutorial walk thorugh, and include the original documentation created by ThemePunch, which is located at package > documentation > extras.

### To create a new Revolution Slider, follow the steps below

- Click on the Revolution Slider sidebar item
- Click the Create New Slider button
- Insert a slider name and alias, and it will generate a shortcode that can be used in post content
- Then select the type of slider, Fixed, Responsive, Full Width and also input the Slider Width and Slider Height. Those dimensions represent the "content" area of the slider. You can also specify the Responsive Sizes but its best to leave them at the defaults
- On the right hand side are many other options you can set, all are self explanatory, test them out
- Once you are done, click Create Slider and your new slider will be made

### To create slides for your Revolution Slider, follow the steps below

- Click on the Edit Slides button of your slider
- Click the New Slide button and select a background
- Then click Edit Slide to add content to it
- Inside the slide setting are many fields you can set
- Click the Add Layer to add a text layer. Use their CSS styles for the text or make your own
- Click the Add Layer:Image or Add Layer: Video to add images or video layers
- Adjust the Layer Params for each layer. You can set the animation, the location, the speeed, etc.
- You can click Preview Slide to see a preview
- Then click Update Slide and your slide will be saved
- Repeat the process for each slide you add

### Watch Video Tutorial - Make sure you watch it in HD or Fullscreen

Back To Top

## Q2. Layer Slider

Avada includes the popular LAYER SLIDER CREATED BY KREATURA. This slider is a beautifully animated slider that is 100% rsponsive and has some amazing options. We can't cover everything here but we outline how to setup a slider and one slide for it. We also include a video tutorial walk thorugh, and include the original documentation created by Kreatura, which is located at package > documentation > extras.

### To create a new Layer Slider, follow these steps

- Click on the Layer Slider sidebar item
- Click the Add New button at the top
- The Global Settings tab will open and allow you to set the general settings for your slider such as the width, height, responsive, full width, and much more
- There are many Skins you can select for the Skin field, use any of them listed, or you can use our own Avada skin by selecting Avada
- Once you are done, click Save to save the slider
- Also note you can can Import Sample Sliders to get Kreatura's demo slides, its a good way to learn and see the different types of settings

### To create slides for your Layer Slider, follow the steps below

- Click on the Layers tab.
- Layer #1 will already be showing, each layer is one slide and you build multiple Sublayers for additional content that is included in that one slide
- Add a background image for Layer #1 and set other settings for it
- Then create Sublayers for any additional elements you want to show on the slide
- Each sublayer will have its own settings, you can set animations, speed, delayin, links, etc
- You can click Enter Preview to see a preview of the slide
- Repeat the process for each slide you add
- When you are done, click Save Changes

### Watch Video Tutorial - Make sure you watch it in HD or Fullscreen

Back To Top

## Q3. ThemeFusion Slider

The ThemeFusion slider is powered by the FlexSlider 2 and is easily accessed in the Theme Options panel. This is the perfect slider to use if you just want single images or videos with or without captions. Its very easy to use and edit and is fully responsive.

### To create a ThemeFusion Slider, follow these steps

- Navigate to Appearance > Theme Options > ThemeFusion Slider to setup the slider
- Set the width of the slider, the height is variable. Input 100% for full width
- There will already be ThemeFusion Slider 1 setup
- Simply add your caption in the Title field
- Insert your image in the Image URL field by clicking Upload and selecting an image from your media section
- You can also insert a link for the slide in the Link field
- For a video slide, simply insert the iFrame Video Code in the Video Embed Code field
- Click Add New Slide to create more slides for the current ThemeFusion slider
- Change Number of ThemeFusion Sliders to a higher number if you want to make more than one slider. Each slider will have its own number

### Watch Video Tutorial - Make sure you watch it in HD or Fullscreen

Back To Top

## Q4. FlexSlider

Avada inlcudes an awesome slider plugin, powered by the FlexSlider 2. Its a great option for general image or video sliders. It has added options and settings such as; animation, slide direction, control settings & more. Its more advanced than the ThemeFusion slider, but it does not allow for captions.

### To create a FlexSlider, follow these steps

- Click on the FlexSlider sidebar menu in your wordpress admin section
- Click on Slide Groups and create a new group by giving it a name. Click Add New Slide Group to save it
- Now you need to add slides to that group. Click on Add New Slide and name it so you can identify it
- On the right hand side is the Slide Groups box, select your Group by checking the box next to it
- To add an image, use the Visual Editor and click the Upload/Insert icon and select an image. Make sure you select Insert Into Post so the image gets inserted into the post content and not the Featured Image. Featured Images do not show up for this slider
- To insert a video, click the Youtube or Vimeo shortcode icon and populate the content. Or simply paste the video embed code into the content field
- Make sure you hit Publish to save your slides. Repeat the process for additional slides
- You can create as many slide groups as you want and asign specific sldies to them. Its a good way to organize multiple sliders

### Watch Video Tutorial - Make sure you watch it in HD or Fullscreen

Back To Top

## R. Advanced Theme Options

Avada has an advanced Theme Options panel that is loaded with options. There are too many options to go over in these docs but please take some time and navigate through each tab. Go to Appearance > Theme Options and take a look. We've organized them into logical sets and have given descroptions for items that need it, most things are self explanatory. Be sure to hit Save All Changes to save your settings once you are done.
You can also backup your theme options, click on the Backup Options tab and copy the data inside the Transfer Theme Options Data field.

Please Note: If you are using anything prior to Avada 2.0, your theme options will reset when you upgrade to Avada 2.0. This is due to an entirely new theme options control panel. Most settings are easy to reset, but please copy your custom CSS if you have any inserted. We apologize for this but its a minor thing to deal with considering the new theme options are much more high level with numerous options. Its a huge improvement all around.

Back To Top

## S. Custom Widgets

Avada includes over 15+ custom widgets. All widgets are accessed in Appearance > Widgets. Drag and drop the widgets you want over into the right hand side where your sidebars and footer widgets are listed. Simply drag your widgets over to the sidebar or footer column, and then populate the content. There are various fields and settings you can choose for each individual widget and all are self explanatory. You can also use multiple widgets per footer column, just drag and drop them into place. And you can put as many widgets as you want inside of a sidebar. Once you have finished populating the widgets, always make sure to hit the Save button to save the settings. Some important notes are below for specific widgets.
Twitter and Flickr Widgets: make sure you only input the username by itself, no URL's or anything. For example, input envato for the username on both of those widgets to test them out.
Facebok Like Box Widget: the Facebook Page URL needs to be a valid Facebook page. For example, input http://www.facebook.com/envato to test it out.
Basic Text Widget: this is what we used for the footer widget that has our logo. You can input regular HTML into this widget. For example, our demo widget with logo looks liek this ...
<p><img src="http://theme-fusion.com/avada/wp-content/uploads/2012/07/logo-footer.gif" alt="" /></p> <p>Lorem ipsum ex vix illud nonummy, novum tation et his. At vix scriptaset patrioque scribentur, at pro fugit erts verterem molestiae, sed et vivendo ali Lorem ipsum ex vix illud nonummy, novum tation et his. At vix scripta patrioque scribentur...</p>

Back To Top

## T. Shortcodes

Avada includes tons of shortcodes. Most pages and elements are built using shortcodes, it provides major flexibility to use them anywhere, and also allows uers to quickly and easily build pages. All shortcodes are accessed in the usual spot, which is in the Visual Editor field. See the screenshot below to see where they are located. Click a shortcode icon and simply populate the content inside of it, some of them have various options to choose from, and the column shortcodes can be wrapped around other content to keep them inside columns. See our demo code for additional examples.

Back To Top

## U. Translate

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

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

- Edit the .po file using POEdit (you can also use qTranslate or WPML plugin)
- Use the translation field to make replacements
- From the file menu, save file with your language name it, for example: de_DE.po. It will generate both a .po and .mo file for your translation.

Back To Top

## V. CSS, Javascript & Credits

CSS FILES: The CSS files are listed below and are located at Avada > CSS. We have included a Custom CSS tab in the theme options for users to insert their own custom CSS. Please make sure to put all of your custom CSS in the CSS field and not change it in the theme CSS files listed below. If you make changes to the CSS files below, they will be overwritten when you update the theme. Anything in the custom CSS field will override the all.css file and not be overwritten.

- 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: The Javascript files are listed below and are located at Avada > js. Please leave these files alone unless you know exactly what you are doing. If you do need to edit them, please make a copy of them before you try to edit.

- js/jquery.cycle.js - jQuery Cycle is used for slider shortcode.
- js/jquery.prettyPhoto.js - jQuery PrettyPhoto is used for the lightboxes.
- jtwt.js - twitter javascript
- jquery.elastislide.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

Sources & Credits: We've used the following images, icons or other files as listed.

- jQuery - http://jquery.com/
- IconSweets 2 - http://www.iconsweets2.com
- Creattica Images For Preview - http://creattica.com
- Pretty Photo Lightbox - http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
- FlexSlider2 - http://flexslider.woothemes.com
- Layer Slider - http://codecanyon.net/item/layerslider-wp-the-wordpress-parallax-slider/1362246
- Slider Revolution - http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380
- Post Types Order Plugin - http://wordpress.org/extend/plugins/post-types-order/