Implement Trendy Off-canvas Content in Elementor

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.

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

πŸ‘‰ 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 Plus Mobile App

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.

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!

πŸ‘‰ 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.

Join 108,419 Subscribers

Get exclusive access to new tips, articles, guides, updates, and more.

About the Author

Sujay is CEO and Co-Founder of Brainstorm Force, the company behind Astra. He is a diehard entrepreneur, growth hacker, and YouTube addict. Get in touch with him on Twitter @sujaypawar.

Sharing is Caring!

4 thoughts on “Implement Trendy Off-canvas Content in Elementor”

  1.  Simon Q

    I’d like if this off canvas thing can be activated by default when the page loads and the off canvas can be at the top of the page and it will push the content down. That way it’s perfect for site wide notices etc.

    1.  Elvina Goves

      Thank you for the suggestion Simon!

      I will certainly take this forward to our developers to see whether we can implement it in the future. πŸ™‚

Leave a Comment

Your email address will not be published. Required fields are marked *

Get access to growing library of 40+ innovative widgets and 300+ creative templates.

Scroll to Top
Like what you read? Leave a comment