Watch Walkthrough Video

Did you see our new flyout on the website? Yes! ๐Ÿ˜ The one that slides-in when you click on the ELEMENTOR WIDGETS menu.

This is built using the Off-Canvas widget of the Ultimate Addons for Elementor!

You too can have this off-canvas panel with any form of the content displayed on your website. But, for what? ๐Ÿค”

  • You can display a flyout menu just like the one we have on our website
  • If you have a huge piece of content that can be optional, you could add that into an off-canvas content widget that can be triggered manually only if the user wants to read.
  • You can show off attractive offers that slide-in through an off-canvas panel.
  • You can add links to related articles and products when the user is scrolling down the page.
These are just a few applications among many others that will help you –
ย 
  • Shorten the length of the overall content of the page (making it look short, crisp and interesting)
  • Redirect users to interesting posts and offers – taking them further into the conversion cycle.
  • Display additional content, tips, tricks and ideas that keep users engaged for a longer time.
  • Use an alternative to simple website navigation methods.

Interesting? I am sure it is!

Let us quickly brush through the basic concepts of what off-canvas content is all about and how has it emerged to make websites more interactive and fun to surf through.

๐Ÿ‘‰ Basic Concept Behind Off-Canvas

Sometimes, we have a lot to say and share with our readers. But, not everyone is interested in all you have to say. Some like it short, simple and crisp!

The main and basic concept behind the off-canvas widget is to let you add such additional information into a block that stays away from the viewport but slides in when triggered. This will make sure that the additional information that you add will be shown to interested users only – and in short, improve user experience and engagement on a page.

This can further be modified and used to display a trendy flyout, a banner to display offers, a panel with another page embedded on it, links to different pages or related posts, etc.

๐Ÿ‘‰ Off-Canvas Content Now and Later!

Facebook Canvas Ads have already become a boon for businesses to place their ads while users are still scrolling through the timeline. This is just a reference we can take of how well the off-canvas content is already working.

The future of it 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.

Now, this is where off-canvas makes the place! ๐Ÿ’–

๐Ÿ‘‰ Adding an Off-Canvas Panel with Elementor!

Elementor, when paired with the Ultimate Addons for Elementor version 1.11.0 lets you use the off-canvas feature on a page or post built with Elementor.

The off-canvas widget can be dragged, dropped and customized just like any other Elementor widget.

Wondering what kind of content you can display in it? Here are a few examples!

You can place attractive triggers to display content –ย 

app-screen
Get Detox App For Best Service
Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

On Button click

Let's get connected!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  • London Eye, London, United Kingdom
  • 123 456 7890
  • info@example.com
On Icon click
Or practically anything on the page using class/id.

Here is the article that explains more interesting features this widget provides.ย 

๐Ÿ‘‰ Frequently Asked Questions

1. Can I build an off-canvas menu with UAEโ€™s Off-Canvas widget?

>> Yes! The Off-canvas widget of the Ultimate Addons for Elementor has an option where you can display it as a WordPress menu. Here is an article to display an off-canvas menu using Off-canvas content widget.

2. Can I trigger an off-canvas panel on the click of a menu item?

>> Yes! You can trigger an off-canvas panel on the click of a menu item.

3. Can I trigger off-canvas panel on the click of another Elementor widget?

>> Yes! You can trigger an off-canvas panel on the click of an Elementor widget using custom class or ID.

4. Can I add shortcodes into the off-canvas content widget?

>> Yes! You can add shortcodes into the content section of the off-canvas widget of the Ultimate Addons for Elementor.

5. Can I trigger more than one off-canvas panels at a time?

>> The off-canvas widget lets you trigger the utmost 2 panels at a time – one from left and another from right. This can be done using a custom class or ID. You can see this in action now!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Take Your Design Skills To The Next Level!

You are backed by our amazing team and
14 days money back guarantee

๐Ÿ‘‰ Wrapping It Up!

I am sure you are super excited to see where this widget fits into your website!Go ahead and make a place for it!

Simply update the Ultimate Addons for Elementor to version 1.11.0 and begin building a beautiful off-canvas panel with any form of content you wish to add. โœŒ๏ธ

Have something to say? Please drop it in the comments below, or you can write to us through our support center.

display-options

Available options

  • Button Off-canvas
  • Icon Off-canvas
  • Custom Class
  • Custom ID

Read Knowledge base article

Off-Canvas Widget Features

content-type

Various Content Types

Design pretty off-canvas flyouts with different types of content such as simple text, HTML code, shortcodes, etc.

content

Display Settings

Trigger an off-canvas panel or flyout through any content or element on the page. Use buttons, icons, class or ID.

preview

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.

positions

Off-Canvas Positions

Decide where you wish to position your off-canvas content (left or right) depending on the existing page design.

pushslide

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

Responsive Design Support

Your flyout menus and the off-canvas content designed with off-canvas widget will look great on all devices.

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!

Have questions?

Let's get connected!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  • London Eye, London, United Kingdom
  • 123 456 7890
  • info@example.com

NEW YORK

CHICAGO

SEATTLE

Take Your Design Skills To The Next Level!

You are backed by our amazing team and
14 days money back guarantee

Scroll to Top