How To Use The Off-Canvas Widget By Atomic Addons

The Off-Canvas widget by Atomic Addons adds a panel that slides in from the edge of the screen when a visitor clicks a button. You fill the panel with a WordPress sidebar, a saved Elementor template or your own text, so it works for a mobile menu, a shopping or contact panel, or extra information you want out of the way. This guide covers adding the widget, filling the panel, choosing how it opens and setting up the button.

Enable the Off-Canvas Widget

Off-Canvas is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Off-Canvas. You can also open the Menu / Navigation category.

4. 4

   Turn the Off-Canvas widget on.

5. 5

   Click Save Settings.

Add the Off-Canvas Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Off-Canvas. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

The widget shows its button where you place it; the panel stays hidden until the button is clicked. To have the panel on every page, put the widget in your header template.

Layout

Open the widget and go to Content → Layout. The first settings decide what opens the panel and what it holds:

1. 1

   Layout: Default shows the widget's own button, which opens the panel. Custom Link hides the button and opens the panel from any link or button on the page instead.

2. 2

   Offcanvas Selector: With Custom Link: the CSS selector of the elements that open the panel, #aea-custom-offcanvas by default. Give a button or link that ID (for an Elementor Button, under Advanced → CSS ID, without the #), or use a class such as .open-panel to let several links open it.

3. 3

   Select Source: What fills the panel. Sidebar, the default, shows the widgets of a WordPress sidebar, picked under Choose Sidebar. Elementor Template shows a Select Template field: type a name and pick one of your saved templates. AE Template does the same for templates of the AnyWhere Elementor plugin under Choose Template; without that plugin the list shows “AE Plugin Not Installed”.

4. 4

   Custom Content Before / After: Add your own text above or below the source. Each switch adds a section of the same name with a text editor (see Custom Content).

Until the panel has a source or custom content, the editor shows a hint inside it; visitors see an empty panel.

The rest of the section decides how the panel opens and closes:

1. 1

   Overlay: Darkens the page behind the open panel. Off by default.

2. 2

   Animations: Slide slides the panel over the page. Push pushes the page aside. Reveal uncovers the panel as the page moves aside. None, the default, opens it without an animation.

3. 3

   Flip: Opens the panel from the right edge instead of the left.

4. 4

   Close Button: An × button in the panel's top corner. On by default.

5. 5

   Close Button Text: Optional text beside the ×, such as “Close”. It accepts dynamic tags.

6. 6

   Close Button Align: Puts the close button at the left, center or right of the panel, per screen size.

7. 7

   Close on Click Background: Closes the panel when the visitor clicks the page outside it. On by default.

8. 8

   Close on Press ESC: Closes the panel with the Escape key. On by default.

9. 9

   Width: The panel's width in px or vw, per screen size. Without it the panel is 270px wide, or 350px on screens 640px and wider. Hidden for Push and Reveal.

10. 10

    Height: The panel's height in px or vh, for the rare design where the panel doesn't reach the right height on its own. Hidden for Push and Reveal.

Custom Content

With Custom Content Before or Custom Content After on, a section of the same name appears under Layout, each with a text editor that starts with a line of sample text. The before text sits at the top of the panel, the after text at the bottom, with the source in between. You can use custom content on its own: pick a source and leave its list at the empty first option to show only your text.

Button

With the Default layout, Content → Button sets up the button that opens the panel:

1. 1

   Button Text: The button's label, “Offcanvas” by default. Clear it for an icon-only button.

2. 2

   Button Alignment: Left (the default), center, right or justified (full width), per screen size.

3. 3

   Offset: Set it to Custom to nudge the button with Horizontal Offset and Vertical Offset (−300px to 300px) and turn it with Rotate (−360° to 360°), per screen size — for example to stand a button on its side along the screen edge.

4. 4

   Size: Extra Small, Small (the default), Medium, Large or Extra Large.

5. 5

   Button Icon: An icon on the button, three bars (a hamburger icon) by default.

6. 6

   Icon Position: With an icon: Left (the default), Right, Top or Bottom of the text.

7. 7

   Icon Spacing: With an icon: the space between icon and text, 8px by default.

The button tells screen readers whether the panel is open.

Style the Off-Canvas

Everything below is on the Style tab:

• Offcanvas — the panel's text color and typography, link color and link hover color, background color, border, shadow and padding, and the Overlay Color while Overlay is on.
• Widget — with the Sidebar source: the border, radius and padding of each sidebar widget in the panel, and the Vertical Spacing between them.
• Button — with the Default layout: color, background, border, radius, padding, typography, shadow and Icon Size, a Hover state with its own colors, and a Button Animation on hover.
• Close Button — while the close button is on: color, background, border, radius, padding, margin, typography and shadow, with a Hover state.