Looking for an easy way to add slide-in menus, search bars, and interactive side panels to your WordPress website? Premium Off-Canvas Block for Gutenberg editor allows you to create sleek, customizable off-canvas panels for better navigation and user engagement. In this guide, we’ll walk you through how to use this block, covering everything from trigger settings to panel customization and styling options. Whether you want to build an off-canvas sidebar, navigation menu, or a pop-out CTA, this tutorial will help you set it up in minutes!
Open Gutenberg editor: Start by opening Gutenberg editor in your WordPress dashboard.
Select Off CanvasBlock: Choose Premium Off Canvas Block from the block list.
Configuring the Trigger:Choose the trigger type (e.g., Button), then customize the trigger text, size, and more.
Adjusting Display Options: Select Gutenberg Off Canvas Panel Type (Slide, or Corner Box); you can also define the position (e.g., Left, Right, Top, Bottom), then set the content width and overlay options.
Customizing the Close Button: Enable or disable the close button. Choose the icon style, size, and position for the close button.
Content Alignment: Adjust the vertical alignment of the content within Premium Off Canvas Block.
Additionally, it supports nested blocks, allowing you to add more elements such as:
If you need to add more inner blocks, you can easily add extra fields to Gutenberg Off Canvas block’s content section. Just click on the “+” icon and pick the type of field you want to include.
Let’s explore the controllers to start customizing Gutenberg Off-Canvas Block.
Layout Settings
Trigger Settings
Trigger Settings (Applies to All Trigger Types)
Trigger Type: Choose how the off-canvas panel is triggered (Button, Icon, Image, Lottie).
Alignment: Set the alignment of the trigger element on the page.
Trigger Settings (Specific to Each Type)
Button Trigger Style Options: Various button styles like Fill, Outline, Rounded, and Circled.
Button Text: Set the text for the button trigger.
Button Size: Adjust the button size.
Hover Effect: Choose a hover animation for the button.
Icon Option: Toggle an icon within the button.
Gutenberg Off Canvas Block – Trigger Controllers
SVG Trigger: Upload an SVG from your device for triggering the panel.
SVG Trigger
Icon Trigger: Choose an icon for triggering the panel.
Icon Trigger
Image Trigger: Select an image to act as the trigger.
Image Trigger
Lottie Trigger: Upload your Lottie animation from device or from WordPress media library or insert from URL to be used as the trigger.
Loop: Toggle whether the animation loops.
Reverse: Play the animation in reverse.
Lottie Trigger
Panel Settings
Panel Type: Select how the panel appears (Slide, or Corner Box).
Slide From: Set the direction of the sliding panel (left, right, top, bottom).
Slide Effect: Choose the transition effect for the panel to be default or push effect.
Panel Width: Adjust the width of the off-canvas panel.
Show Overlay: Enable an overlay when the panel opens.
Overlay Color: Customize the overlay color.
Change Cursor on Overlay: Modify cursor style on the overlay.
Panel Settings
Close Settings
Close Icon: Enable or disable the close button.
Select Icon: Choose a custom close icon.
Icon Position: Set the position of the close icon (left or right).
ESC to Close: Enable closing the panel using the Escape key.
Close with a Click: Allow closing by clicking outside the panel.
Close Settings
Content Settings
Alignment: Align the panel’s content (left, center, right).
Entrance Animations: Add animations for content appearance when the panel opens.
Content Layout Options
Styling Option
Button Style Controller
Typography: Customize the font settings for the button text, including size, weight, and style.
Button Trigger Style Options
Icon, Image, and SVG Style Controller
Size: Set the icon, image, or SVG trigger type size.
Icon, Image, SVG Trigger Type Size Option
Normal & Hover states for all types
Color: Set the text color for both normal and hover states.
Background Type: Choose between a solid color, gradient, or image background.
Box Shadow: Add or customize the button’s shadow effect. (Only for Image, and Button trigger types)
Text Shadow: Apply a shadow effect to the button text. (Only for Button trigger type)
Normal and Hover Style Options
Border and Spacing Settings
Only for Image, SVG and Lottie trigger types.
Border Type: Select from solid, dashed, dotted, or double borders.
Border Radius: Adjust the roundness of the button’s corners.
Margin: Control the space outside the button. (For all trigger types except for image trigger type)
Padding: Adjust the space inside the button to resize it. (For all trigger types except for image trigger type)
General Trigger Style Options
Content Style Controllers
Background Type: Choose between a solid color, gradient, or image background for the content panel.
Box Shadow: Apply or customize a shadow effect for the content area.
Border Type: Select from solid, dashed, dotted, or double borders.
Border Radius: Adjust the corner roundness for the content panel.
Padding: Set the inner spacing of the content area to control its layout.
Content Style
Close Icon Style Controllers
Size: Adjust the size of the close icon using PX, EM, or %.
Color: Change the icon color for both normal and hover states.
Background Color: Set a background color behind the close icon for both normal and hover states.
Border Type: Choose from solid, dashed, dotted, or double borders.
Border Radius: Adjust the roundness of the close icon’s border.
Margin: Adjust the space around the close icon.
Padding: Set the inner spacing within the close icon area.
Close Icon Style Options
Conclusion
Premium Off-Canvas Block for Gutenberg editor is an essential tool for adding interactive slide-in menus, pop-out CTAs, and dynamic content sections to your WordPress website. With its customizable triggers, flexible layout options, and advanced styling features, it gives you total control over your website’s navigation and user experience. Now that you know how to set up and customize Gutenberg Off-Canvas Block, why not try it yourself? Download Premium Blocks Free Plugin to get started.
Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.
