AVADA CHEAT SHEET

There are many customization settings in Avada and for beginners, it can be difficult to remember where everything is.  However, if you remember the following three things, you’ll usually be able to find what you’re looking for pretty easily:

1. For site-wide changes: most of the settings that’ll you need are found here: Dashboard >> Appearance >> Theme Options.  When you want to change a setting that will apply to your entire site, check that section first.

2. For page-specific changes: most of the settings are found at the bottom of the page you are editing, under: “Fusion Page Options”.  Go to: Dashboard >> Pages >> All Pages >> hover over page of interest and select edit >> scroll to the very bottom of the page and find the section that says: “Fusion Page Options”.  There are several tabs along the left side.  These are settings that apply to the specific page you’re working on.

3. To access most of the remaining WordPress settings: go to one of these two places:

  1. Dashboard >> Appearance.  The “Menus” and “Widgets” options are important, the other options: Themes, Customize, Header, Background and Install Plugins are redundant and can be accessed in other places.
  2. Dashboard >> Settings.  Some important basic settings are found here.

This post provides information on how to set up and configuring a variety of things with Avada.  I did not attempt to create a comprehensive list because most people will probably be able to find the settings they are interested in customizing, without specific instructions.  As mentioned above, the theme options section and the options at the bottom of each page contain most of the the settings you will need.  This post contains a list of things that I had to learn in order to build this website.  It’s a short list of some of the main things you’ll probably want to do and each entry contains step by step instructions.

Avada Instructions – How To List


1. How to set up links, anchors and enable smooth scrolling in Avada

2. How to create a link to a different page of your website (but to a specific place on that page)

3. Where to find TinyMCE settings

4. How to add a contact page

5. how to make a logo

6. How to crop a picture to exact dimensions and / or create a perfect square

7. How to add a link to a button

8. How to change button colors and styling

9. How to remove extra stuff from the sidebar of blog post pages

10. How to remove demo content for blog posts, categories, tags and comments

11. How to add vertical space between text blocks or any other elements

12. How to expand / collapse text

13. How to change header text size on mobile devices for a fusion slider text box or for page title bar custom text

14. What is Header Content 1 and Header Content 2

15. How to make the secondary header transparent (called header content 1 and header content 2)

16. How to change the menu bar height on mobile

17. Avada Theme: Where do I paste custom CSS?

18. How to make the background image appear behind the main menu (also referred to as the nav bar)

19. How to create a slider at the top of the page that sits behind the main menu (also called a nav bar)

20. How to select or change your home page (also known as your landing page)

21. How to reduce top and bottom padding around the drop down menu for the nav bar megamenu

22. How to make a slider less than full height

23. How to adjust responsive settings for mobile

24. How to crop and modify a picture to appear a certain way in a slider

25. Here is a list of all the places where Menu options are found

26. How to reposition the text in a Fusion Slider to be at a specific place on the screen

 

1. How to set up links, anchors and enable smooth scrolling in Avada

Smooth scrolling is a feature that can be added to a link so that users scroll smoothly, up or down to a new spot on the page when they click a link.  Regular links jump the user to a new spot on the page (or to a new page).  There are 3 steps to creating smooth scrolling links:

Step 1

Enable Smooth Scrolling

To add smooth scrolling to a page, you have to first enable it: Go to: Dashboard >> Pages >> All Pages. Select the page of interest.  Make sure the fusion builder option is selected (click the button at the top of the page if it is not already activated).  Click the pencil icon (edit element) on the first container on the page.  Find the box that says CSS Class and type this: fusion-menu.  Click save and then click update.  Smooth scrolling is now activated.

Step 2

Create an anchor

If you want a link to lead readers to another place on a page, you have to mark the other place on the page, this is known as creating an anchor.  There are two possibilities when creating an anchor: (1) the target that readers will be taken to is text, or (2) The target is a container. Follow the instructions that correspond to what you want to do:

How to create a text anchor:

  • Go to the section of text that you want to add a link to.
  • Click the pencil to open the text editor.
  • Position the cursor where you want the anchor to be, or highlight a section of text.
  • Now from the menu choose: insert >> anchor.  Note: there is also a shortcut button to insert an anchor.
  • Now in the pop up window, give the anchor tag a name such as: unique-identifier.

How to create an anchor in a container

  • Use these instructions if you’re adding an anchor to an object such as a picture, or a map, etc.
  • Find the container that you wish to mark with anchor text.
  • Click the pencil icon to edit the container.
  • You will see that the options for containers are organized under 3 tabs (found along the top). Under the default tab, find where it says “Name of Menu Anchor”. Now enter a name for this object (for example: unique-identifier).

 

Step 3

Creating a link

A link can be inserted in text, or alternatively, an image, or some other graphic may also act as a link.

Option 1: creating a text link:

  • Find the section of text that you want to create a link in.
  • Click the pencil icon to edit it.
  • In the text editor, highlight the section of text that you want to create a link in.
  • Click Insert (from the drop down menu) >> Insert/edit link.
  • Alternatively, use the insert/edit link shortcut button.
  • A URL field pops up, enter a hash mark #, followed by the name of the target anchor text, like this: #unique-identifier.
  • You’re done. Now, when someone clicks on the text you just linked, they will smooth scroll to the place that you marked with an anchor.

Option 2: create a link in a container

You will add the link by clicking the pencil icon to access the settings for the container, or the pencil icon for the element found within the container.

If you are adding a link to the container: click the pencil icon and you’ll see a box that says “Link URL”. Type a hash mark #, followed by the name of the target’s ID like this: #unique-identifier. You’re done.

If you are adding a link to an element within the container: In some cases, you may also be able to add the link to an object within the container, this will depend on the type of builder element it is.  Click the pencil icon for the object that you want to add a link to, then explore the options.  Type #unique-identifier in the space provided, if there is no space to add a link, then you’ll have to place the link in the outer container, as described above.


2. How to create a link to a different page of your website (and to a specific place on that page)

Note: the procedure to create links to other pages, is similar to creating links within the same page (described above). The difference is you’ll have to modify the name of the link that takes users to another page so that it includes the URL slug.  For example, let’s say you want to create a link on your home page, to a specific place on your about page.  You would create an anchor the same ways as is described above and the link to your anchor would look like this: /about#unique-identifier.  Alternatively, you could write out the whole URL: www.mywebsite/about#unique-identifier.

For more information, see the WordPress support for creating standard jumps here:


3. Where to find TinyMCE settings

Many plugins will create a new entry in the Dashboard, when they are installed.  This will be the access point for modifying the plugin’s settings.  The TinyMCE plugin adds functionality to your text editor and I recommend installing it, however, the access point to its settings is found here: Dashboard >> Settings >> TinyMCE Advanced.


4. How to add a contact page

Note: when Avada version 5 comes out, you’ll be able to import any demo page you want.  For now, you’ll have to add a contact page like this:

  1. Create a blank page that will be your contact page: Dashboard >> Pages >> Add New.
  2. At the right of the page in the dropdown menu for “Template”, choose contact.
  3. The contact form will now be added to your page.  You will see other places to add text as desired.
  4. Go to Dashboard >> Avada >> Support.  Scroll down and find patch: #406523. This will make it easier to add an API key.  Note: this needed to be done with Avada 4.0.3.  You won’t have to do this with later versions.
  5. Access settings for the map and where the contact form forwards emails to here: Dashboard >> Appearance >> Theme options >> Contact form >> Google Map.  You will see other options there: contact form and Google map styling.
  6. Get an API key. Note: Avada is in the process of making this easier.  Begin by checking if there is an option in: Dashboard >> Appearance >> Theme options >> contact form >> google maps.  If there is no link to get an API key, get one from the Google Maps API site
  7. At the Goolge Maps API site: Choose new project and click ok for any forms that come up, you don’t have to fill anything out.  Get the API key and paste it in the Google Maps API Key section, here: Dashboard >> Appearance >> Theme options >> Contact form >> Google Map.
  8. Your map should now work

5. How to Format a logo

  1. Make the logo in whatever software you like to use and save it as a PNG.  I use very expensive software called Cinema 4D, but you can use Microsoft Powerpoint, Photoshop, or anything you’re comfortable with.  There are several free online logo generators that are very easy to use.  They are easy to find with Google search.
  2. Open the Logo in PhotoShop (I use PhotoShop Elements)
  3. Crop any excess stuff on the edges: Select image (from the top drop down menu) >> Crop.  If you need to make a perfect square, see the instructions in the section below.
  4. Resize the image: Select Image (from the top dropdown menu) >> Resize >> Image Size.  Resize to something like 240 wide by 120 high.  You’re dimensions will be fixed so you can only adjust either the height or the width, and the other will resize automatically.  Save it as a PNG.
  5. Insert the logo: Dashboard >> Appearance >> Theme Options >> Logo >> Upload Logo

6. How to crop a picture to exact dimensions and / or create a perfect square

Cropping an image to exact dimentions, or to a perfect square is sometimes required, for example, when making a PNG for a favicon

  1. Open the PNG file in Photoshop
  2. Go to: Image >> Crop
  3. In the bar just below the top bar, enter a number in the width box and use the same number in the height box.
  4. You will now have a square crop box.  If you hold down shift and drag the corners, you can resize the box to surround your object, while maintaining the square.
  5. When your finished, right click and select crop, or click on the green checkmark to apply the crop.

7. How to add a link to a button

  1. If you’ve added a button as an Avada builder element, go to: the little pencil icon >> paste the URL that you want to create a link to under “Button URL”
  2. If you’re modifying a button shortcode, for example, in a Fusion slider: Dashboard >> Fusion Slider >> Add or Edit Slides >> Choose the slide of interest >> Scroll down to where there is a box that says: Button #1 and it will have all the sort codes in it. Find where it says: [fusion_button link=””.  Add the URL between the two apostrophes, but note:
    1. If you are linking to a page within your own website: Put a / followed by the name of the page you want to link to, for example: [fusion_button link=”/contact”. Note: in this example the full website URL might be: www.mywebsite/contact, but you only need to add: /contact.
    2. If you wanted the button to link to a different website, just put the full URL in, like this: [fusion_button link=https://someotherwebsite.com/contact. You can always put the full URL in if you want.

8. How to change button colors and styling

Dashboard >> Appearance >> Theme Options >> Shortcodes Styling >> Button Shortcode.  Adjust settings as you wish.


9. How to remove extra stuff from the sidebar of blog post pages

  1. Go to: Dashboard >> Appearance >> Widgets
  2. You should see a box with the title: “blog side bar”
  3. Remove the things you don’t want by clicking on them and selecting delete, or click and drag each one off of the active area onto the left side of the screen, under the “available widgets” section

10. How to remove demo content for blog posts, categories, tags and comments

  1. To remove demo categories go to: Dashboard >> Posts >> Categories. Select and delete what you don’t want
  2. To remove demo tags: Dashboard >> Products >> Tags. Select and delete what you don’t want
  3. To remove demo comments: Dashboard >> comments. Now just delete them
  4. Other relevant settings: there are some settings under: Dashboard >> Appearance >> Theme Options >> Blog
  5. More settings: Dashboard >> Appearance >> Theme Options >> Sidebars >> Blog posts (or blog archive)
  6. Even more settings under: Dashboard >> Posts >> All Posts. Select a post. Make sure the “Fusion Page Builder” box at the top left of the page is clicked, then scroll to the bottom for “Fusion Page Options”, there are a number of settings there.

11. How to add vertical space between text blocks or any other elements

If you can’t find a padding option, for example, you want space between 2 text blocks in the same container, then add a “separator”, it’s one of the builder elements.  You can set it to show a line, or just show blank space  and you can add whatever padding you want.


12. How to expand / collapse text

Note: the “built in read more tag” in WordPress only works in specific contexts related to blog titles and it doesn’t work outside of this.  There are 2 other options:

  • The built in toggle feature in Avada. Toggle works well, but it might not be quite appearance you are looking for and it’s a little finicky because it is a builder element and you have to drag it into it’s own container. You can find it among the builder elements in the fusion builder.
  • I have also used a plugin called Collapse-O-Matic, which works well.  This is the format that you would use to insert text using collapse-O-Matic: [expand title=”Your Title”] This is the text that will appear when you click your title [/expand].  Whatever you put between the quotes (Your Title, in this example) will be the text that can be clicked to expand and reveal more text

13. How to change header text size on mobile devices for a fusion slider text box or for page title bar custom text

 

To change text size in the fusion slider heading area

You need to find the CSS class name of the container/element which holds the text you want to change.  See my explanation of how to use the Google Chrome Inspector, or view page source, or use Firebug.  Briefly, the easiest way to find the name of a fusion slider text box is:

  1. Load the page of interest in your web browser. Right click and select “view source”.
  2. Press control + F and in the search box that comes up type: fusion-slider.  The name of the fusion slider element will be highlighted, it will look something like this: fusion-slider-7.  In this example, the slider is numbered: “7”.  You will use this number when writing the code below.
  3. After you find the name of the element, paste the following code into: Dashboard >> Appearance >> Theme Options >> Custom CSS.  Note, you’ll have to modify the number 7, to whatever number you’re slider is assigned.

/*This is text that describes what your CSS does, you can put anything in here*/
@media (max-width: 800px) {
.fusion-slider-7 {
font-size: 0.8em;
}
}

Note:

  • the @media line describes the max screen width that will be altered, in this example it is 800px. Devices with screens larger than 800px will not be affected by this code.
  • fusion-slider-7 is the name of the container that holds the text of interest that you want to change
  • Font-size: 0.8em; is the command to make the font size smaller by a factor of 0.8 percent

To change text size in the page title bar custom text area on mobile only:

Paste the following code into: Dashboard >> Appearance >> Theme Options >> Custom CSS:

/*Changes the text size of the page title bar custom text on mobile devices with screen widths equal to or smaller than 800px */
@media (max-width: 800px) {
.page-id-868 .fusion-page-title-captions .entry-title {
font-size: 0.5em !important;
}
}

 


14. What is Header Content 1 and Header Content 2

This is an optional second bar that you can have that appears above the main header.  It can contain your email, phone number, or both.  Add or remove the seconary header here: Dashboard >> Appearance >> Theme Options >> Header >> Header Content.  Select a header option that has this secondary bar present (not all do), then scroll down and select the Information that you want to appear in this bar.


15. How to make the secondary header transparent (called header content 1 and header content 2)

Go to: Dashboard >> Appearance >> Theme Options >> Header >> Header Content.  Select the header layout you want and change whether you want social icons, or email address/phone or both and whether you want them top left or top right.

Now go to: Dashboard >> Appearance >> Theme Options >> Header >> Header Styling.  Click the box to adjust the Header background color.  At the right there will be a slider bar with a checkerboard background.  Adjust the slider all the way down to make the background completely transparent.  When you do this, it will also position your background  image behind the secondary header.


16. How to change the menu bar height on mobile

Go to: Dashboard >> Appearance >> Theme Options >> Menu >> Mobile Menu >> Mobile Menu Icons Top Margin. Use the slider to set it to zero.   Note: if you have a logo uploaded, this menu will increase in height to accommodate the logo.  To shrink it, you’ll have to shrink the logo pixels and upload a new logo for mobile here: Dashboard >> Appearance >> Logo >> Mobile logo.  I’d use somewhere around 50 px in height.


17. Avada Theme: Where do I paste custom CSS?

When you are given code to paste into your CSS editor, this is where you do it: Dashboard >> Appearance >> Theme Options >> Custom CSS.  There might be other code in that box, don’t touch it.  Just scroll below it and paste in the new code you want to use.  Here’s an example:

/*reduce padding below fusion slider*/
body.home div#main {
padding-top: 0px !important;
}

Note: the computer ignores anything between /* and  */, the text between these symbols is a note to yourself, so you can remember what the code does.


18. How to make the background image appear behind the main menu (also referred to as the nav bar)

There are two options.  Option 1 adds the image to the pages title bar (see below).  Option 2 creates a fusion slider (see the next section below)

Option 1: add the image to the page’s title bar:

  1. Go to the page of interest: Dashboard >> Pages >> All Pages.  Select the page of interest
  2. Scroll to the bottom of the page
  3. In the “Fusion Page Options” tabs at the left, select: “Page Title Bar”
  4. Here are all the settings I used, you can leave all the others blank:
    1. Page Title Bar: Default
    2. Page Title Bar Text: Hide
    3. Page Title Bar Text Alignment: Default
    4. 100% Page Title Width: Default
    5. Page Title Bar Height: 350px
    6. Page Title Bar Mobile Height: 200 px
    7. Page Title Bar Background: select your image
    8. 100% Background Image: yes
    9. Parallax Background Image: No
    10. Breadcrumbs/Search Bar: No
  5. In the tabs at the left, find the tab that says “Header”
  6. Where it says “Background Opacity”, select 0 (selecting 0 will move the title bar image behind the main menu / nav bar).
  7. Other settings under the header tab:
    1. Display header: yes
    2. 100% header width: yes
    3. Background repeat: No repeat
    4. Main Navigation Menu: Main menu

19. How to create a slider at the top of the page that sits behind the main menu (also called a nav bar)

This will make a full screen Fusion slider that sits behind the main menu / nav bar menu.  Note: Fusion sliders and slides are easy to create, but the system is confusing at first.  You have to generate a slider in one area of your WordPress dashboard, then in a different area, you have to generate slides for that slider. After you create a slide, you assign it to appear in a particular slider. Then, in yet another area of WordPress, you have to choose to insert the Fusion slider into your page of interest. It’s easy once you know how to do it, but confusing to learn.  Here’s the detailed steps:

  1. Make a slider: Dashboard >> Fusion Slider >> Add or edit sliders. Create a slider: this part is fairly self-explanatory.
  2. Make a slide: Dashboard >> Fusion Slider >> Add or edit slides. This is also fairly self-explanatory, except when you’re done making the slide, make sure you assign the slide to the slider that you want it to appear in. To this: make sure you’re editing the slide of interest >> Look for the panel at the right of the screen that says Fusion Sliders, it should list all of your sliders, including the one you just made. Put a check next to the slider that you want this slide to appear in.
  3. Now go back to: Dashboard >> Pages >> All Pages >> Select your page of interest.  Scroll down to the bottom of the screen and select the “Sliders” tab from the list of tabs on the left.  Where it says “slider type”, select: “Fusion Slider”.  Where it says “Select Fusion Slider”, select your slider of interest from the drop down menu.  The slider you created should now appear just below the nav bar when you load the page (Note: you can move it above the title bar if you want by going to: Dashboard >> Pages >> All Pages >> Select page of interest >> scroll to bottom, find: “Fusion Page options” section >> Sliders tab >> Slider position).
  4. In order to shift the slider up so it is behind the main menu / nav bar, find Header tab in the fusion page options and change “background opacity” to zero.
    1. My other settings in the Header Tab
    2. Display header: yes
    3. 100% header width: yes
    4. Background repeat: No repeat
    5. Main Navigation Menu: Main menu

20. How to select or change your home page (also known as your landing page)

Go to: Appearance >> Customize >> Static front page >> select the new home page from the “front page drop down”


21. How to reduce top and bottom padding around the drop down menu for the nav bar megamenu

Go to Dashboard >> Appearance >> Theme options >> Custom CSS and enter:

/*reduce top and bottom padding around the drop down menu for the nav bar megamenu*/
#wrapper .fusion-megamenu-wrapper .fusion-megamenu-submenu {
padding-top: 10px !important;
padding-bottom: 0px !important;
}


22. How to make a slider less than full height

Go to: Dashboard >> Fusion Slider >> add or edit sliders. Select your slider of interest.

  1. Uncheck “full screen slider”
  2. Under slider size, enter 100% for width and then select a height, such as: 450px.

23. How to adjust responsive settings for mobile:

There are settings under: Dashboard >> Appearance >> Theme options >> Responsive

and

Dashboard >> Fusion Slider >> Add or Edit Slider >> Select your slider of interest. Scroll to the bottom and find: “Responsive Typography Sensitivity” and “Minimum Font Size Factor”.

Note: under the heading: “Responsive Typography Sensitivity”, its says “Values below 1 decrease rate of resizing, values above 1 increase rate of resizing”.  This is confusing because it doesn’t say whether “resizing” means making things smaller or bigger.  What it should say is: When values are below 1 then mobile text becomes bigger, when values are above 1 mobile text becomes smaller.


24. How to crop and modify a picture to appear a certain way in a slider

  1. Go to your media library: Dashboard >> Media >> Library
  2. Either select an image already in the library, or upload a new one >> click on the image of interest >> click “edit image” >> Click the crop icon >> click and drag a box over the region of the image that you want to keep >> click crop again to activate save button >> click save.

Note 1: you have to click the crop button when you’re done cropping,  in order to enable the save option.
Note 2: you can also rotate the image and flip it vertically or horizontally, in this image editor.


25. Here is a list of all the places where Menu options are found

  1. Dashboard >> Appearance >> Menus. Here you can organize menu structures; the main pages and their sub-pages.
  2. Dashboard >> Appearance >> Menus. Same place as above, but if you click within the elements of the menu that you just built, there are multiple options: menu style, enable or disable the fusion mega menu and once you check the box for the mega menu, you’ll have more options to enable the full width mega menu and other options.
  3. Dashboard >> Appearance >> Theme Options >> Menu. Lots of menu options here

26. How to reposition the text in a Fusion Slider to be at a specific place on the screen

This can be difficult to do with the Fusion Slider, depending on your needs.  You may wish to try one of the other slider plugins that come with Avada (Elastic and Revolution).  I think Revolution Slider allows allow text repositioning, I’m not sure about Elastic Slider.  Here is what you can do with Fusion Slider:

  1. First, set the text alignment by going to the slide settings: Dashboard >> Fusion slider >> Add or edit Slides >> Choose the slide of interest.  Select the text alignment that you want: left, right, or center alignment.
  2. The spot where you write text for the slider can accept HTML markup, so you can add padding to the container that the text is in.  Some examples are below.  Note: you don’t need to know how to write HTML, you can use the default WordPress editor to write the HTML for you: just write what you want, then switch views, from the “visual” tab, to the “text” tab, then copy your marked up text and paste it wherever you want.