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.
- 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 –
Get Detox App For Best Service
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
- [email protected]
On Icon click
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!
4 thoughts on “Implement Trendy Off-canvas Content in Elementor”
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.
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. 🙂
Awesome addon!!!! You guys killed it! This will definitely. Thanks for your hard work!
You’re welcome Everard!
Thank you for your kind words! 🙂