[Pro]Using the Offcanvas Content Widget

See this widget in action here.

Looking for a way to display content in a slide-in panel on your website? The Offcanvas Content widget in aThemes Addons for Elementor lets you create panels that slide in from any direction, supporting custom content, Elementor templates, and WordPress sidebars.

In this guide, we’ll walk you through how to set up and customize the Offcanvas Content widget for Elementor.

Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor. For premium widgets, ensure aThemes Addons Pro is also installed and active. This feature requires aThemes Addons Pro.

Activating the Widget

  1. Navigate to the aThemes Addons dashboard in your WordPress admin area.
  2. Search for the Offcanvas Content widget.
  3. Toggle the switch to activate it. The widget will now be available in the Elementor interface.

Widget Options

Offcanvas Content

  • Content Type: Choose between Custom Content, Elementor Template, or Sidebar.
  • Title: Add a title for the offcanvas content (Custom Content only).
  • Content: Add WYSIWYG content (Custom Content only).
  • Template: Select a saved Elementor template (Template option only).
  • Sidebar: Choose a registered WordPress sidebar (Sidebar option only).

Offcanvas Settings

  • Offcanvas Name: Set a unique identifier for this offcanvas area.
  • Direction: Choose the direction the panel slides in from (Left, Right, Top, or Bottom).
  • Trigger: Define how the offcanvas content opens. Options include Dynamic Tag, CSS Class, or Element ID.
  • Size: Adjust the width or height of the offcanvas area using px or %.

Style

  • Background Color: Set the background color of the offcanvas panel.
  • Title Color and Typography: Adjust the title’s color, font style, size, and weight.
  • Text Color and Typography: Customize the font style and color for the main text.
  • Overlay Color: Define the color of the overlay that appears behind the offcanvas panel.

Frequently Asked Questions

Below, we’ve answered some of the most common questions about the Offcanvas Content widget.

Can I use an Elementor template inside the offcanvas panel?

Yes. Select “Elementor Template” as the content type and pick any saved template from the dropdown. This gives you full design flexibility using Elementor’s editor.

How do I trigger the offcanvas panel from a button?

Set a CSS class or element ID as the trigger in the Offcanvas Settings. Then add that same class or ID to any button or element on your page. Clicking that element will open the panel.

That’s it! You’ve successfully learned how to set up and customize the Offcanvas Content widget in aThemes Addons for Elementor.

Next, would you like to add a modal popup to your site? Check out our guide on using the Modal widget to learn more.