Off-Canvas Menu
Create a trendy flyout to display a huge navigation menu. Click on the button below to trigger the off-canvas menu.
OFF-CANVAS
Display Settings
With unique Display Settings, you can trigger off-canvas content through any content or element on a page.
Available options
While reading a nice article, have you come across a side-panel that remains hidden initially but slides in nicely when triggered. Just like the following one -
Off-Canvas Content is the new trend!
Download and Start Tracking
Fill the form to get your unique download link.
Cool! Right? This is Off-Canvas panel that is being popular and creating a boom everywhere. Now, you too can display it on your website and add any form of content with the off-canvas panel.
With Ultimate Addons for Beaver Builder, we are excited to introduce the Off-canvas module with version 1.19.0. The concept is to let you add supplementary information on a page that stays aside from the viewport. But when the user hits the trigger, it slides in and shows the content.
This is to make sure that certain information will be shown to interested users only – and in short, improve user experience and engagement on a page.
Off-Canvas looks interesting! But,how this can be used?
Flyout panel is the new trend. You can use it in many ways such as -
- Display a trendy flyout menu - Just like we did on our site
- If you have a long content, part of it can be added into an off-canvas panel. This will shorten the page length.Â
- You can show off-canvas banner for attractive offers that can slide-in Â
- You can add include proofs/ related article links when the user is reading the page
- Display additional content, tips, tricks and ideas that keep users engaged for a longer time.
- Pop up registration/login/subscription forms
And so on…
Off-canvas in real life!
Facebook Canvas Ads place their content fixed while users are scrolling through the timeline. This is a reference we can take of how well the off-canvas content is already working.
The future of this trend looks bright too! With mobile and small screen devices being popular nowadays, it is important to bring out a solution to display optimized content for smaller screens.
All in one off-canvas panel with UABB!
This new module with UABB is flexible that offers to show the following content inside the panel -Â
- ContentÂ
- Menu
- Saved Rows
- Saved ModulesÂ
- Saved Page Templates
20% Off on Weekends!
Consectetur adipiscing elit elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.​ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
On Button click
On Button click
Or practically anything on the page using class/id.
4 Steps to Embedd Off-Canvas Panel on your Site
Step 1: Drag and drop the UABB Off-Canvas module
Step 2: Choose content type you want to display (content/menu/saved row/module/template)
Step 3: Set a trigger to display off-canvas panel
Step 4: Set other styling options if required
And you're DONE!
Frequently Asked Questions
1. Can I build an off-canvas menu?
-> Yes! You can create a menu and display it in the off-canvas panel.
2. Can I trigger an off-canvas panel on the click of a menu item?
-> Yes, off-canvas can be triggered from any page with the menu item. Here is a detailed article.
3. Can I trigger an off-canvas panel on the click of another module?
-> With custom class/ID you can display off-canvas panel on the click of any other module.
4. Can I add shortcodes into the off-canvas content module?
-> The module supports shortcode so you can use any shortcode to render the content.
5. Can I trigger more than one off-canvas panels at a time?
-> Yes you can. See how -
Download and Start Tracking
Fill the form to get your unique download link.
Wrapping It Up!
I am sure you are super excited to see where this module fits into your website! Go ahead and make a place for it!
Simply update the UABB to version 1.19.0 and begin building a beautiful off-canvas panel with any form of content you wish to add. For any help with the module refer our knowledgebase.
Have something to say? Please drop it in the comments below, or you can write to us through our support center.
Off-Canvas Widget Features
Various Content Types
Design pretty off-canvas flyouts with different types of content such as simple text, HTML code, shortcodes, etc.
Display Settings
Trigger an off-canvas panel or flyout through any content or element on the page. Use buttons, icons, class or ID.
Preview Mode
With the preview option, you can take a sneak peek into your off-canvas content to see how it will look on a page.
Off-Canvas Positions
Decide where you wish to position your off-canvas content (left or right) depending on the existing page design.
Push / Slide Animations
Select the animation for your off-canvas panel. You can make it slide-in over a page or push the page while it appears.
Responsive Design Support
Your flyout menus and the off-canvas content designed with off-canvas widget will look great on all devices.
Locate your pet, Anytime, Anywhere!
You can create a contact section like this to list all the locations you serve and display a contact form within a flyout – just like how we have done!
Download and Start Tracking
Fill the form to get your unique download link.
Our Corporate Offices
You can create a contact section like this to list all the locations you serve and display a contact form within a flyout – just like how we have done!