To start the process, head to Avada > Off Canvas. You can find this from the toolbar on the Avada Dashboard, or from the sidebar in WordPress.

A Flyout menu sounds like it should Fly out, but essentially, it’s just a menu overlaid on the content, typically in full screen. How it appears is really up to you. A Popup is more typical but you could also use a Sliding Bar for a Flyout menu. You can adjust the width and height of the Off Canvas in the General Tab. As mentioned, flyout menus are typically full screen, but they don’t have to be.

For the example in the video above, a default 1/1 container/column combo was added, and the background color of the container was set to transparent.

In the Off Canvas options, the Popup was set to 100% width, and Full Height, with Center Content Alignment. There was a background color added to the Design tab of the Off Canvas (Black at 85%) and on the Overlay tab, a background image was added, centered with no repeat. Some margin and colors were added to the Close tab, and the Enable Conditions option on the Conditions tab was set to yes. No Triggers or Rules were set.

For full details, watch the video above, but there are many ways a Flyout Menu could be configured. See the How To Use The Off Canvas Builder doc and video for a full rundown on the available options.

Once you have configured the Off Canvas, it’s time to add your content. This can be anything of course, but for a Flyout Menu, you’re going to need the Menu Element at the very least. You can also configure your containers and columns as you wish. As mentioned previously, the container added in the video for the Popup content was left at default, except it had the background color set to transparent.

The content added was an Image Element, a Menu Element, and a Button Element. The Menu was set to Vertical, centered in the column, and had the font color and size adjusted. One thing to note with Flyout Menus is that they don’t work well with menus with submenu items.

With the Off Canvas Builder, you can set any number of triggers for your Popups and Sliding Bars. But with a Flyout menu, you would likely be triggering the Off Canvas from an icon in your Header. So this would be the rare instance when the Menu Element would not be needed in a Header Layout.

Instead, for a Flyout Menu, you can trigger your Off Canvas in two ways. Let’s have a look at these.

The simplest method, and the method used in the video, is to use the Dynamic Content option in the Link option of the Icon Element. Here you select Open Off Canvas as the Dynamic Content, and then select your Off Canvas from the Dropdown list. For other popups, you might use the Toggle Off Canvas option, but in the example in the video, the Close Icon in the actual Off Canvas content is used to Close the Flyout Menu, as it is full screen, and covers the icon in the header.

Another method is to use the Trigger Options in the Off Canvas Options tab. With this method, you set a trigger of On Click on the Triggers tab and add an Element Selector under that. Here you insert an element CSS selector, either class or ID, ex: .icon_menu, #icon_menu. Then, in the actual icon in the header, you add your CSS Class or CSS ID in the relevant option. So for #icon_menu, you would add icon_menu (without the hashtag) in the CSS ID field, as # is for CSS IDs.

As mentioned before, with a Flyout menu, you don’t need the Menu Element in the Header Layout. All you need is an icon to trigger the Flyout.

In the video above, the menu element is removed and an Icon Element is added instead. Then, in the Link Opition, the dynamic content option was selected and Open Off Canvas was chosen. It’s a simple matter then to select your Off Canvas Flyout Menu. That’s it. Save the header layout, and now you have a great-looking flyout menu for your site instead.

The Off Canvas Builder is found at Avada > Off Canvas, from the WordPress sidebar, or from the menu on the Avada Dashboard. This is where you create and manage all your Off Canvas creations.

To get started, simply give your new Off Canvas a name, and click on Create New Off Canvas. Depending on whether you have Avada Builder Auto Activation turned on or not in the Avada Builder Options (Avada Dasboard > Options > Builder Options) you will be taken directly to the Avada Builder, or alternatively, the WordPress editor. In that case, simply click on your choice of builder, either Avada Builder, or Avada Live to start building.

In either case, the first thing you see is a choice to either Add a Container and start building from scratch, or to open Avada Studio. and import a prebuilt Off Canvas.

Avada Studio is a great place to start. There is a range of prebuilt Off Canvas items here you can use, and these come fully designed and pre-configured. Simply select the one you want and it will be imported ready for you to customize. This is a great way for you to familiarize yourself with the different types of Off Canvases that can be made, and also how to configure them.

Creating an Off Canvas comes in two concurrent stages, building and configuring. The content comes from the Builder, and you can add anything at all into your Off Canvas using the Avada Builder. You have the full range of Design Elements at your disposal. The Off Canvas Builder can be used to create Popups, and a range of Sliding Bars and Flyout and Push Menus, but the reality is that these are simply off canvas panels, and you can add anything you want to them.

Configuration happens via the Off Canvas Options, found in the Avada Page Options panel position. In Avada Live, this is on the Sidebar and is active while you are building, and in Avada Builder, it’s at the bottom of the page. As mentioned, the configuration and build process happen concurrently, as some of the Off Canvas Options will also affect the look of the Off Canvas. Let’s go through the full range of configuration tabs.

The Settings Tab is simply where you name the Off Canvas, and its slug, and this is generated automatically when you create your Off Canvas initially. Unless you want to rename your Off Canvas, you won’t need to do anything here.

On this tab, you can configure Dynamic Content options for the dynamic preview.

This is the main configuration tab for your Off Canvas. Here, you control the type of Off Canvas (Popup or Sliding Bar) and adjust its width, height and various other alignment options. There are unique options for each Off Canvas type, which you can see below.

The Design Tab allows you to configure your Off Canvas, with background color or image, border options, as well as any margin, padding and box shadow.

The overlay tab controls the styling of the background page content when the Off Canvas is active. It can be disabled entirely, or configured with color, scrollbars, and even background images.

The Close tab allows you to configure how your Off Canvas will close, and you can adjust the close button with icon, icon size, color and margins etc.

The Animation tab allows you to configure both an Enter and Exit animation for your Off Canvas, giving you a range of effects for the way it enters and leaves the page.

When an Off Canvas is created, they are not active by default. They are essentially in a draft state, so you can decide when, where and how they are activated. This is achived on the Conditions tab. Simply setting the Enable Conditions option to Yes makes the off Canvas live and global, i.e. displayed on every page.

You can also click on Manage Conditions to open the Conditions dialog, where you can specify exactly what parts of your site you want your Off Canvas to be active for. Using this method, you must select which pages and post types to both enable and disable with the Off Canvas.

Triggers are managed on the Triggers Tab, and here you can set a range of automatic triggers like On Page Load, Time On Page, On Scoll etc. There is also an option to set an Element Selector for manual triggering of your Off Canvas from a button or other trigger.

Outside of this tab, there are also a couple more ways to trigger an Off Canvas. The first one of these is through the use of an Avada Special Menu Item. By adding the Off Canvas Toggle Special menu Item to a menu, you can add a menu link to toggle a specified Off Canvas. See the Avada Special Menu Items doc for more information on this method.

Another way to trigger an Off Canvas is through the use of Dynamic Content. For example, you could add a Button with dynamic content as the Button URL. There are three dynamic content options to use: Toggle Off Canvas, Open Off Canvas, and Close Off Canvas.

See our video on How To Trigger an Avada Off Canvas for a rundown of the options and some examples.

And now, you can also trigger an Off Canvas from an Avada Form Submission. With these methods, you have great diversity with how to trigger your off canvas creations. Go wild!

The Rules Tab allows you to configure rules around the display of your Off Canvas. These include showing the Off Canvas first after a specified number of page views, sessions or minutes, or even when your users are coming from a certain page, or exiting to a certain page. Combined with the Conditions, and the the Triggers, this gives you a very powerful system for controlling the display of your Off Canvases.

If you need even more control, there is a Custom CSS tab, which you can use to apply custom css for the specific Off Canvas.

Finally, like any Page Option Set, you can Import or Export your Off Canvas options, for reuse on other Off Canvases.