Max Addons Off Canvas element for Bricks Builder lets you create sliding panels that appear from the left, right, top, or bottom of your website. It is useful for adding menus, filters, forms, or extra content without cluttering your page layout.
What You Need#
Before you start, make sure the following are installed and active on your website:
Once both are active, you can use the Off Canvas element on any page or template.
How to Add the Off Canvas Element#
- Open a page or template in the Bricks Builder editor.
- In the elements panel, search for “Off Canvas.”
- Add the element to your page. You can place it anywhere, but it is commonly added to the header for navigation menus.
- Click on the element to open its settings.
You will see two main tabs:
- Content
- Style
Content Tab Options#
The Content tab includes the following sections:
- CONTENT
- TRIGGER
- LABEL
- SETTINGS
- OFF CANVAS STYLE
- CONTENT STYLE
- CLOSE BUTTON
Content#
This is where you define what appears inside your off-canvas panel. By default, you will see two sections:
- Primary
- Secondary
You can:
- Add new sections
- Remove existing ones
Click on any section to open its settings.
Inside Each Section:
- Label: Add a name for the section for better organization.
- Content Type: Choose what to display:
- Content for custom elements or text
- Menu for WordPress menus
- Template for saved Bricks templates
Trigger#
This defines how users will open the off-canvas panel. You can choose from:
- Button
- Icon
- Element Class
- Element ID
Options for Button Trigger
- Button Text
- Button Icon
- Style: Primary, Secondary, Dark, Muted
You can also customize:
- Typography (controls font size, weight, and style of the text)
- Background (sets the color or design behind the button)
- Border / Outline (adds a visible edge around the button)
- Box Shadow (creates a shadow effect to give depth)
- Padding (adds space inside the button, between text/icon and edges)
Options for Icon Trigger
- Choose an icon
- Adjust Typography to control icon size and spacing.
Options for Element Class
- Add a custom CSS class.
- The panel will open when that class is triggered.
Options for Element ID
- Add a custom CSS ID
- Useful for targeting a specific element
Label#
You can display a label along with your trigger.
- Enable the Show Label option.
You can customize:
- Typography (controls how the label text looks)
- Background (sets the color behind the label)
- Margin (adds space outside the label, separating it from other elements)
- Padding (adds space inside the label for better readability)
Settings#
These options control how the off-canvas behaves.
- Direction: Left, Right, Top, or Bottom
- Transition: Slide or Push
- Close on ESC Key: Allows users to close the panel with the ESC key.
- Close on Overlay Click: Closes the panel when clicking outside it.
Off Canvas Style#
Control the overall appearance of the panel:
- Size: Defines how wide or tall the panel appears
- Padding: Adds inner spacing so content doesn’t stick to the edges
- Background: Sets the panel’s background color or design
Content Style#
Style the content inside the panel:
- Padding: Creates space inside the content area for better layout
- Alignment: Controls how content is positioned (left, center, right)
- Typography: Controls text appearance, like size and weight
- Background: Sets a background for the content area
- Border: Adds an outline around the content
- Box Shadow: Adds depth with a shadow effect
Close Button#
Control the close button inside the panel:
- Enable or disable the button.
- Choose the icon
- Customize Typography to control the size and appearance.
Wrapping Up!#
Max Addons Off Canvas element for Bricks Builder offers a powerful way to create interactive and space-saving layouts. It helps you add useful content without affecting your page structure and gives you full control without writing code.