How To Create A Floating Button

Last Update: June 16, 2026

A floating button, also known as a floating action button, is a UI element that remains anchored to a specific position on the screen while the user scrolls. They provide quick access to primary actions without cluttering the main content. This might be a link to Live Chat, a discount code, a menu or social media links, or many other things. It’s completely up to you.

We are often asked how to create floating buttons in Avada, similar to the floating buttons that you see on the right hand side of this website. You can easily do this with an Avada Off Canvas. Read on to find out more, and watch the video below for a visual oveview of the process.

For privacy reasons YouTube needs your permission to be loaded.

Off Canvas Settings

There are a few Off Canvas settings that are typically in place for a floating button.

  • General Tab > Off Canvas Type: This will typically be a Popup, rather than a Sliding Bar. Dimensions and position are all up to you.

  • Overlay Tab > Overlay: This will typically be turned off, as the button is constantly on display.

  • Close Tab > All close options are typically removed for a floating button, helping to make it permanent on the page.

  • Conditions Tab > You can set the condition as you will, having the floating button on all or specific pages.

  • Triggers Tab > Typically, this will be set to On Page Load, so the floating button appears as the page loads.

And that’s about it. The design of the content is completely up to you. A floating button can be used for all number of things. Check out the two examples in Avada Studio when creating your Off Canvas, as they may be a very useful start to your project.