Master the Avada Off Canvas panel once and for all! Create popups, sidebar menus and sliders in one step!

Avada ThemeThe Off Canvas Builder tool can help you easily implement thepop-up window,Sliding Sidebar,modal box,fly-out menuand other effects, and No third-party plug-ins required,Zero-code operation, done entirely through a visual interface. This tutorial will show you by hand how to create a Sliding Bar for Email Subscriptionsand set it to appear automatically after a visitor stays for 4 seconds, perfect for collecting potential customers' emails, doing event promotions, displaying important messages, etc.

Avada Off Canvas Panel

Avada Off Canvas Builder is an advanced feature module that comes with the Avada theme and allows you to easily create various "off-page" content areas such asPopupThe following are some of the most popular features of the program: Sliding Bar, Flyout Menu, Modal, and so on.No need to install any additional plug-insand highly integrated with user behavior to achieve precise marketing, user interaction, functional enhancement and other purposes.

Avada's Off Canvas Builder supports the following common forms:

procedure

I. Enter Off Canvas Builder

• Log in to the WordPress backend.
• Go to the left menu bar Avada > Off CanvasThe
• Click on the top right corner of the page "Add New Off Canvas"(Add new Off Canvas).
• Name this item, for example:Subscription SidebarThe
• Click on "Create New Off Canvas".

II. Choosing a template or starting from scratch

• scratch: Add containers and layout content manually (for advanced users).
• Using Avada Studio Templates(Recommended for beginners):
  • strike (on the keyboard) "Avada Studio" Button.
  • In the template gallery that pops up, filter "Subscription"Classification.
  • Choose a slider template you like (e.g.:Subscription Sliding Bar).
  • Click "Import" and check "Use local color and font settings", then import the template.

Customizing Off Canvas Content

After the template is imported, you will see the preset structure, which generally includes:

• photograph
• Title and explanatory text
• Form (usually Avada Form)

You can make the following changes based on the branding style:

• Replace the image (click Image > Replace Media).
• Modify the text content (click directly on the text editor).
• Adjust button copy, e.g. "Subscribe Now" to "Subscribe Now".
• If you need to edit the content of the form, please go to the separate Avada > Forms Page Setup.

Configuring Off Canvas Appearance and Behavior

On the right side of the editor, you'll see multiple tabs, which we'll explain in turn:

1. General

• Type: Select "Sliding Bar".
• Initial State: Set to "Closed".
• Position: Set to "Right".
• Transition: Select "Push".

2. Design

• set upbackground colorOr pictures.
• Add borders and shadows for a more three-dimensional vision.
• Set the width, spacing and alignment.

3. Overlay

• Enable Mask Background: When checked, the page is darkened when the pop-up window appears, attracting more attention.

4. Close

• Clicking on the mask area can be set to turn it off.
• strike (on the keyboard) ESC Close.
• Sets whether the Close button is displayed, and the button position.

5. Animation

• Entry and exit animations can be set, such as slide-in, fade-in, etc.

V. Setting Trigger Conditions

This step determines the Off Canvas When and how?The

1. Conditions (on which pages)

• The default is "Entire Site".
• You can set it to display only on the home page, article page, or specific category page.

2. Triggers

You can choose more than one trigger, and here we demonstrate two:

• Exit Intent: detects that the user is ready to leave the page (often used inpop-up window alert).
• Time on Page: Set the time delay to appear, for example:
  • Enable "Time on Page"
  • set to 4 seconds.

3. Rules (showing frequencies and conditions)

• Set whether to display only once, or every few days.
• Displayed based on login status or device (cell phone/computer).
• For example, it will only be displayed on mobile for unlogged-in users.

Sixth, save and test the effect

1. Click the "Save" button in the upper right corner.
2. Return to the site home page and refresh the page.
3. Wait 4 seconds for the slider to push into the page from the right and display what you've set up.

Advanced Tips

• You can create multiple Off Canvas, for example one for announcement popups and one for navigation menus.
• Use the "Import/Export" feature to quickly copy Off Canvas configurations to other sites.
• Combining Avada Forms + Mail Services (e.g. Mailchimp) that allows for automated email marketing.

summarize

The Avada Off Canvas Builder allows you toEasily create beautiful and efficient popups and sliding panels, which is used to attract users' attention and improve conversion results. Through the intuitive interface, selftemplate libraryand rich behavioral configurations that allow for complex interactions even without programming experience. To learn more about the Avada theme in action, check out this article, theAvada theme babysitting tutorial", which contains Avada theme template import, page setup, page layout, Woocommerce integration settings and other all Avada theme operation knowledge.