Elegant Elements for Avada and Fusion Builder provides you with the Off-Canvas element that will allow you to add different content that you can display on a click of a button, image, custom link, icon, or even from the menu. Let’s take a look and see how you can do it.
Preparing Content –
First of all, we need to prepare the content we are going to display in the off-canvas panel. You have these three options that you can display the content from –
- Custom Content
- Saved Elements
- Sidebars
Let’s see what each option means and what it allows you to.
1. Custom Content
As the option name suggests, this options allows you to put any content in the text editor and format it right on the same page you’re adding the Off-Canvas content panels. Use this option if you want to display some content with less formatting or have a shortcode to pull the content from. You can also use the dynamic data feature to pull the data from any custom field or a shortcode and display in the Off-Canvas panel.
2. Saved Element
You might have used the Fusion Builder saved elements feature before. If not, here’s a quick intro – in Fusion Builder, you can save your Containers, Columns or even Elements in library that you can import anywhere on your site and save time. Have you ever thought you can make a great use of the saved elements, containers or columns? Yes, now you can simply use your saved content to display in the Off-Canvas panel and style it accordingly. All your saved elements like containers, columns, elements, etc. are displayed in a well organized select box when you access the element settings.
In order to use the saved element, you just need to use this option in your Off-Canvas Content element and then select your saved element from the list. To create a new layout based on the position of the Off-Canvas panel, you can create a test page, add the containers and columns to format the content and save it in the library. Then, you can use this newly saved element. Since the Off-Canvas content panel is loaded outside the normal content wrapper, there might be chances of getting some difference in the displayed layout. You can fix it by editing the saved element and do the style adjustments.
3. Sidebars
Sidebars are the best when it comes to display some links in a well organized manner. You can simply generate the sidebar like you do for the Blog post and assign it in the Off-Canvas content element. The element will then generate the output and place it inside the content panel that will be displayed when the Off-Canvas content is triggered using your preferred method.
You can style the background color and text color for the content panel. If there’s no background image being used in the container or the content you’ve prepared, you can add some padding around the content to make it look nice.
Positioning the Off-Canvas content –
This is where you set the position from where the Off-Canvas content panel will be displayed. You can set the panel position to Top, Left, Right, or Bottom. The content panel will appear from the selected position. You can animate the appearance of the content panel with the two effects – Slide and Push.
Slide will display the content panel above the website content and appear as a layer with overlay background. The Push effect will push the content to the opposite direction from where the Off-Canvas content panel is appearing. It make the user feel that the content panel is a part of the website content. The width or height you specify for the content panel will be used to push the content as well.
Triggering the content display –
Now, we have everything ready and just need a way to trigger the Off-Canvas content display. There are three options provided in the settings or the element. However, there are more ways to trigger the panel display. The built-in options are –
- Image
- Icon
- Text
Beside the above options, you can trigger the panel display using the button element or menu item etc. Let’s see how you can set the trigger on button and menu items –
1. Button Element Trigger
To set the trigger on button element, you just need to get the Canvas ID from the Off-Canvas content element setting and switch the Button Title option in the button element to dynamic data and then choose the shortcode as an option from the dropdown. Then, use the following code by replacing the canvas ID with your own and the title text as well. Assume the canvas id is set as “off-canvas-button”, here’ the code we used on the demo page –
This will set the content panel target. In order to get the content panel displayed on the button click, you need to add the class name “elegant-off-canvas-trigger” to the button element CSS Class option and save the button element. This will set the button to trigger the content panel when you click the button.
2. Menu Item Trigger
Similar to the button element, you need to set the menu item class name as “elegant-off-canvas-trigger” and then edit the Avada Menu Settings. In the modal anchor option, enter the Canvas ID and save the menu settings. This will set the menu item to trigger the Off-Canvas content panel to display when you click that menu item.
That’s it. You can save the page and view it to see how it looks. You can use the Off-Canvas content element to display custom links, special content like offers or subscribe forms or contact forms etc. If you have any suggestions, please feel free to create a support ticket and submit your ideas and suggestions.
