Footer Special Effects

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

Avada includes a flexible footer than you can customize in various ways. Avada’s Footer allows you to insert various widgets, social icons, copyright text, and much more. You can also apply different effects to it, which we will go into detail below. Continue reading to learn more about the Footer Special Effects options and their descriptions.

  • None – This option allows you to disable any special effects.
  • Footer Parallax Effect – This option allows you to enable or disable a fixed footer with a parallax scrolling effect.
  • Parallax Background Image – This option allows you to enable or disable a parallax effect on the background image selected in Background Image For Footer Widget Area field.
  • Sticky Footer – This option allows you to enable or disable a sticky footer and set a sticky footer height value.
  • Sticky Footer and Parallax Background Image – This option allows you to enable or disable a sticky footer with a parallax effect on the background image.

Footer Parallax Effect

Checking this radio box will enable the Footer Parallax effect. This effect will apply a parallax scrolling effect on the footer. When you scroll down, the footer will be hidden behind the page content, then it is revealed as you scroll to the bottom of the page.

Parallax Background Image

Checking this radio box will enable the Parallax Background Image effect. The Parallax effect will be applied to the image selected in the Background Image For Footer Widget Area field in the Avada > Theme Options > Footer > Footer Background Image sub-panel.

Sticky Footer

Checking this radio box will enable the Sticky Footer effect. This allows the footer to always stick to the bottom of the browser window, even on pages with little content. IMPORTANT: For this effect to work, the Sticky Footer Height field must be filled in. View below to find out how to find your correct footer height.

Sticky Footer & Parallax Image

Checking this radio box will enable a combination of the Sticky Footer and Parallax Background Image effect. IMPORTANT: For this effect to work, the Sticky Footer Height field must be filled in. View below to find out how to find your correct footer height. Once the correct height is entered, when the page loads the footer will be stuck to the bottom of the browser window.

How To Find Your Sticky Footer Height

When using the sticky footer option above, you must enter the correct sticky footer height for it to work. Every footer will have a different height, and the only way to determine your footer height is to use browser dev tools and inspect.

Sticky Footer must have the correct height of the entire footer (widget area + copyright area) to work correctly.

Step 1 – The height of the footer will changed based on content so always set your footer up first with widgets and any other content you wish to display.

Step 2 – Once your footer is complete, open up your web page and use browser dev tools (Firefox, Safari, Chrome) to inspect the footer.

Step 3 – Scroll to your footer and right click on the background area and choose “Inspect Element” to bring up the dev tool inspector in your chosen browser.

Step 4 – In the dev tools popup window, look in the dom tree (markup structure) for div class=“fusion-footer” then click on it to highlight it.

Step 5 – The entire footer area will be highlighted and show you the exact width and height. Enter the height shown into the “Sticky Footer Height” field in theme options.

15 Likes
Proudly Serving Over 390000 Satisfied Users!