Share

For anyone with a website, regardless of whether you intend to sell goods or services, how you go about marketing these initiatives can be the difference between success and failure. You want to capture your audience’s attention and motivate them to buy, subscribe, and return for more.

Cue the Avada Off-Canvas Builder, a powerful tool that allows users to create a wide range of marketing panels—such as popups, advanced modals, fly-out menus, and push menus—directly within Avada without requiring third-party plugins. Below is an overview of the Off-Canvas Builder’s features and how to set up a new Off-Canvas using Avada and WordPress.

Overview

What is the Avada Off-Canvas Builder?

The Off-Canvas Builder is a feature built into Avada, part of a larger Avada ecosystem. It allows users to create and customize Off-Canvas panels—such as popups, modals, sliding bars, and fly-out or push menus—directly from Avada without needing third-party plugins.

Avada Off-Canvas Builder

Users can design and configure how the Off-Canvas area appears through the interface, determine when it opens or closes, control which pages or conditions trigger it, etc. Because it integrates with Avada’s existing Design Elements, the Off-Canvas Builder provides a powerful, flexible way to add engaging, interactive content to any website.

What can you create with the Avada Off-Canvas builder?

With the Avada Off-Canvas Builder, users can create various Off-Canvas panels to enhance site functionality and user engagement. Some popular examples include:

Popups and Modals

  • Newsletter signup or subscription forms
  • Special offers, promotions, or announcements
  • Login or registration popups

Sliding Bars

  • A hidden sidebar for additional content
  • Forms or surveys that slide out for quick interaction
  • Promotional banners or calls to action (CTA)

Fly-Out and Push Menus

  • Mobile-friendly navigation menus
  • Hidden secondary menus (e.g., product categories)
  • Side panels that push the main content when opened

Advanced Off-Canvas Panels

  • Quick-view product windows for eCommerce sites
  • User Dashboards or login areas accessible from any page
  • Resource or document repositories that pop out for easy browsing

By combining Avada’s Design Elements (images, forms, buttons, etc.) within these Off-Canvas containers, marketers can create highly engaging experiences that capture attention, streamline navigation, and boost conversions—no extra plugins needed.

Benefits of the Avada Off-Canvas Builder

The Avada Off-Canvas Builder offers a range of benefits for anyone looking to create engaging, modern user experiences without relying on additional plugins or coding. Here are some key advantages:

  • Integrated Solution – Because it’s built directly into Avada, there’s no need for third-party popups or sliding panel plugins. This reduces potential plugin conflicts, streamlines updates, and ensures ongoing compatibility with other Avada features.
  • Versatile Design Possibilities – The Off-Canvas Builder supports multiple formats, including popups, advanced modals, sliding bars, fly-out menus, and push menus. Users can apply Avada’s Elements—such as forms, images, and buttons—to create custom designs tailored to any site’s needs.
  • Easy Configuration & Triggers – The Avada Builder allows for particular conditions and triggers. Site owners can control precisely when and how an Off-Canvas panel appears (e.g., exit intent, timed delays, or specific user interactions) and where it displays (such as only on particular pages or for specific devices).
  • Complete Design Control – Built-in style and layout options let users customize backgrounds, animations, overlays, close button styles, and more, giving them full creative freedom without needing custom code.
  • Streamlined Workflow – Leveraging the intuitive Avada Live interface, users can drag-and-drop elements, preview changes in real time, and build off-canvas layouts quickly. The Avada Studio integration also offers pre-built designs that can be imported and adapted.
  • Performance-Friendly – By avoiding extra plugins, users can maintain a leaner setup, which often translates to better performance and fewer maintenance headaches. Everything is managed within the Avada ecosystem, which is optimized for speed and stability.

Getting Started

To begin using the Avada Off-Canvas Builder, navigate to Off-Canvas via the Avada Dashboard or from the Avada sidebar menu. This is the central location for building and configuring all Off-Canvas items.

For privacy reasons YouTube needs your permission to be loaded.

In the demonstration referenced in this post, we imported the prebuilt Avada Builder website and created a new Off-Canvas item.

Create Avada Off-Canvas

From the Avada Live Toolbar, select “+ > Off-Canvas” to get started. When creating a new item, you will be presented with two initial choices:

Avada Studio Import Screen
  • Add a container to start building from scratch, or
  • Open Avada Studio to import a pre-built content block.

In the demonstration, a pre-built Subscription Sliding Bar layout is chosen:

Avada Studio Sliding Bar
  • 1
    Click “Avada Studio”
  • 2
    Select the “Subscription” category
  • 3
    Choose the “Sliding Bar Off Canvas 1974” item to import.
  • 4
    Go ahead and customize as necessary.

Importing Avada Studio Creative Content

Avada Studio offers a wide variety of pre-built Off-Canvas content blocks, each fully configured with Avada Design Elements, and each can be imported with a click. These designs are excellent starting points and help illustrate the Off-Canvas Builder’s versatility.

Avada Studio

Users can filter the available designs based on categories like Popups, Sliding Bars, or other content-based terms.

Overview Of The Avada Off-Canvas Settings

Once imported, the Off-Canvas content and options can be edited in Avada Live. These settings are organized into multiple tabs, each controlling different aspects of design and functionality. Below is an overview of these tabs:

Settings Tab

  • Page Title – The name you give to a web page or post.
  • Slug – A user-friendly, short, and descriptive part of a URL that identifies a specific page, post, category, or tag appearing after the domain name.

Preview Tab

  • View Dynamic Content As – Make a selection to view Dynamic Content based on a specific post/page.

General Tab

  • Off-Canvas Type Popup | Sliding Bar—Select Off Canvas Type. Each type has a unique set of options.
  • Default State Closed | Open—Set the default state.
  • Position Top | Right | Bottom | Left—Set the position of the sliding bar.
  • Transition Overlap | Push—Set the transition of the sliding bar.
  • Width – Set Off Canvas width. Enter value including any valid CSS unit, ex: 800px.
  • Content Layout Column | Row | Block—Choose the Content Layout type. The block will not use Flex positioning but will allow floated Elements.
  • Column
  • Content Alignment Flex Start | Center | Flex End | Space Between | Space Around | Space Evenly—Choose how to align Content Containers.
  • Row
  • Content Alignment Flex Start | Center | Flex End | Space Between | Space Around | Space Evenly—Choose how to align Content Containers.
  • Content Vertical Alignment Flex Start | Center | Flex End | Space Between | Space Around | Space Evenly—Choose how to align Content containers vertically.
  • Block
  • Block will not use Flex positioning but will allow floated Elements.
  • CSS Class – Add a class to the wrapping HTML element.
  • CSS ID – Add a unique ID to the wrapping HTML element. This ID will used in the Off-Canvas link.

Design Tab

  • Background Color – Choose the background color. Leave empty for default value of #ffffff.
  • Background Image – Upload an image to display in the background.
  • Scrollbar Default | Custom | Hidden—Hide or customize the Off-Canvas scrollbar. Styling and support vary depending on the browser.
  • Default
  • Default basic styling.
  • Custom
  • Scrollbar Background Color Choose the background color of the scrollbar.
  • Scrollbar Handle Color Choose the scrollbar handle color.
  • Hidden
  • Hidden from view.
  • Border Radius Top/Left | Top/Right | Bottom/Right | Bottom/Left—Enter values including any valid CSS unit, ex: 10px.
  • Border Width Top | Right | Bottom | Left—Enter values including any valid CSS unit, ex: 10px.
  • Border Color – Set the border color.
  • Margin Top | Right | Bottom | Left—Controls the Off-Canvas margin.
  • Padding Top | Right | Bottom | Left—Controls the Off-Canvas padding.
  • Z-Index – Enter the value for z-index CSS property, which can be both positive or negative.
  • Box Shadow Yes | No—Enable/Disable box shadow.
  • Box Shadow Position Vertical | Horizontal—Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, and negative values put it above and left of the box. In pixels, ex. 5px.
  • Box Shadow Blur Radius 0-100—Set the blur radius of the box shadow in pixels.
  • Box Shadow Spread Radius 0-100—Set the spread radius of the box shadow in pixels.
  • Box Shadow Color – Set the color of the box shadow.

Overlay Tab

  • Overlay Yes | No—Enable/Disable overlay.
  • Page Scrollbar Yes | No—Enable/Disable page scrollbar when Off Canvas is active.
  • Background Color – Choose the background color of the overlay. Leave empty for the default value of rgba(0,0,0,0.8).
  • Background Image – Upload an image to display in the background.

Close Tab

  • Close On Overlay Click Yes | No—Off-Canvas is closed by clicking on the overlay.
  • Close On Anchor Click Yes | No—Off-Canvas is closed when clicking a scroll-to-anchor link.
  • Close With ESC Key Yes | No—Enable/Disable. When enabled, you can use the ESC button to close the Off-Canvas.
  • Automatically Close After Time – Set time in seconds to close Off Canvas automatically after it has passed; leave it empty to remain open.
  • Close Button Yes | No—Enable/Disable close button.
  • Position Right | Left—Set the close button position.
  • Show Close Button After Time – Set a time in seconds to show the close button; leave it empty to show it immediately.
  • Close Button Margin Top | Right | Bottom | Left—Set the margin of the close button. The default is 20px from the top and the selected position side. Enter values, including any valid CSS unit. Negative values are accepted.
  • Close Icon Color – Set the color of the close icon.
  • Close Icon Hover Color – Set the hover color of the close icon.
  • Choose Icon Size 0-100—Set the size of the close icon.
  • Custom Icon – Select a custom icon for the close button.

Animation

  • Entrance Animation Slide | Bounce | Fade—Set the Off-Canvas entrance animation.
  • Entrance Animation Speed 0.1-5—Set the speed of the entrance animation in seconds (0.1 – 5).
  • Timing Of Entrance Animation Ease | Linear | Ease-in | Ease-out | Ease-in-out—Select the timing function of the entrance animation.
  • Exit Animation Slide | Bounce | Fade—Set the Off-Canvas exit animation.
  • Exit Animation Speed 0.1-5—Set the speed of the exit animation in seconds (0.1 – 5).
  • Timing Of Exit Animation Ease | Linear | Ease-in | Ease-out | Ease-in-out—Select the timing function of the exit animation.

Conditions

  • Enable Conditions Yes | No—Set conditions for displaying Off Canvas. NOTE: When this is disabled, Off-Canvas can only be displayed using the Off-Canvas Toggle on the Avada Special Menu Items.

  • If Yes > Conditions – Load Off-Canvas on these pages > Manage Conditions

Triggers

  • On Page Load Yes | No—Display Off Canvas on page load.
  • Time On Page Yes | No—Display Off Canvas after a visitor has spent a specific amount of time on the page.
  • If Yes > Time On Page Duration – Set the time that needs to pass before the Off-Canvas will be displayed. In seconds, ex: 5.
  • On Scroll Yes | No—Display Off-Canvas when the visitor has scrolled up or down to a specific position or Element.
  • Scroll Direction Up | Down—Set a scroll direction for triggering the Off-Canvas.
  • On Click Yes | No—Display Off Canvas when a visitor clicks on the Element.
  • Element Selector – Insert element CSS selector like class or ID, example: .element-class, #element-ID.
  • Exit Intent Yes | No—Display Off-Canvas when the visitor intends to close or leave the page.
  • After Inactivity Yes | No—Display Off-Canvas if the visitor is inactive for a specific amount of time.
  • Inactivity Duration – Set the time that needs to pass for visitor inactivity before the Off-Canvas is displayed. In seconds, ex: 30.

Rules

  • Published After Controls when the Off-Canvas should be published. Use SQL time format; for example: YYYY-MM-DD HH:MM:SS = 2016-05-10 12:30:00. Timezone of the site is used. Leave empty for no restriction.
  • Published Until Controls when the Off-Canvas should be published until. Use SQL time format; for example: YYYY-MM-DD HH:MM:SS = 2016-05-10 12:30:00. Timezone of the site is used. Leave empty for no restriction.
  • Frequency Show every time | Show every time until user closes it | Show once | Show up to X times | Show every session | Show every day | Show every week | Show every month | Show on specific day—Select display frequency for the Off-Canvas.
  • Show After X Page Views Yes | No—Display Off-Canvas after a specific number of sessions.
  • Number of Page Views – Set the number of page views needed to display the Off Canvas, for example, 3.
  • Show After X Sessions Yes | No—Display Off-Canvas after a specific number of sessions.
  • Number of Sessions – Set the number of visiting sessions needed to display the Off-Canvas, for example, 3.
  • Show When Arriving From Select or leave blank for all | Internal links | External links | Search engine—Choose when Off-Canvas should be displayed depending on the referring link type.
  • Users All users | Logged-in users | Logged-out users—Choose the user type that will be able to see the Off-Canvas.
  • Device Desktop | Tablet | Mobile—Display Off-Canvas for specific device types. Leave blank for all.

Summary

The Avada Off-Canvas Builder is a versatile tool for adding dynamic, engaging content to any website. Whether creating popups for special promotions, sliding bars for subscriptions, or fly-out menus for easy navigation, off-canvas layouts can significantly enhance user engagement.

Subscribe To Our Newsletter

Receive all of the latest news and updates fresh from ThemeFusion!

Related Articles

Leave a comment