Fraud Blocker
  • Home
  • Products
  • Support
  • Blog
  • Contact

Table Of Contents

How to Use Offcanvas Widget for Elementor

When you’re looking for something display out of the main canvas/ page. Our Offcanvas Widget for Elementor by Element Pack will work there. Actually, it will work in the fashion of Sidebar. In this documentation, I’ll mention how you can use our widget.

Let’s do it.

The Thing To Do

You have to make a template before. In the template, you can add any content(text, image, video, etc.) whatever you want to display through the Offcanvas widget. It is very simple to do.

tempaltes for the Offcanvas Widget for Elementor

Just go to the WordPress Dashboard > Templates > a New TEMPLATE popup will appear > select Section > give template a name (such as Offcanvas) > hit CREATE TEMPLATE.

offcanvas - BdThemes

If done. Next, go back to the WordPress Dashboard > Templates > Saved Templates > edit Offcanvas template with Elementor for the offcanvas menu.

offcanvas 2 - BdThemes

In the screenshot above, Offcanvas templates(made before)holds some content(Image, Text, Button, Line). Similarly, you can add any type of content like this in your template to be shown in the Offcanvas mode.

Offcanvas Widget

Keep your eyes ball open.

To Insert Widget

Inserting Offcanvas Widget for Elementor

Inserting widget, it is just a matter of drag and dropping. As you see in the screenshot above.

Content Tab

Using the content tab, you’ll be able to make a layout of a particular part of a website[option be added]. And in this regard, some handy sections in the tab will assist you a lot.


This section will let you go to set Layout, Select Source, Choose Sidebar, Animation, width and along with a few switchers.

offcanvas 4 - BdThemes

See nothing will show, when you first hit the Offcanvas button.

offcanvas 5 - BdThemes

So, go to the Content tab > Layout > Layout(default) >Select Source (Elementor Template) Choose Template ( Offcanvas(section) ). Look at the screenshot above for the Offcanvas Widget for Elementor.


Offcanvas Widget for Elementor button

In this section, you’ll be able to add Button Text, Alignment, Offset, Size, Button Icon, Icon Position, and also Icon Spacing.

Style Tab

Now, let’s work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design the Offcanvas Widget for Elementor. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.


offcanvas style 1 - BdThemes

From here, you’ll be able to add the Color of the Text, Link, Link Hover, Background. In addition, Box Shadow and Padding.

Go to the Style tab > Offcanvas.


Normal Mode:

offcanvas style 2 - BdThemes

Hover Mode:

offcanvas style 3 - BdThemes

To style the button, go the Style tab > Button.

Close Button

Normal mode:

offcanvas style 4 - BdThemes

Hover Mode:

offcanvas style 5 - BdThemes

Simply, go to the Style tab > Close Button.

Video Assist

Finally, I think you’ve noticed that it is a little bit tricky to make an Offcanvas in the Elementor. And also hope that you’re going to get this documentation useful. Watch Video Assist and visit the demo page.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins.

This website is powered by Element Pack Pro and Rooten Theme.

New Year Sales Are Giving up to ~70% Price Off!! on our products | Coupon: HNY2023

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.