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.
How to Configure Layout Settings for Gutenberg Off-Canvas Block?
Trigger Settings
Trigger Settings (Applies to All Trigger Types)
Trigger Type: Choose how the off-canvas panel is triggered (Button, Icon, Image, SVG, 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: Allows you to toggle an icon inside the button. When enabled, you can customize the icon type, icon, and icon position.
ِِClick on Image to check – Button Trigger Controllers
Icon Trigger: Choose an icon for triggering the panel.
Zoom on the image to check Icon Trigger settings
Image Trigger: Select an image to act as the trigger.
Zoom on the image to show the Image Trigger settings
SVG Trigger: Upload an SVG from your device for triggering the panel.
Zoom on The Image to Check the SVG 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.
Click on the image to show Lottie Trigger setings
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.
Click on the image to show the 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.
Click on the image to show Close Settings
Content Settings
Alignment: Align the panel’s content (left, center, right).
Entrance Animations: Add animations for content appearance when the panel opens.
Click on the image to show Content Layout Options
How to Customize Styling Options for Off-Canvas Elements?
Triggr
Button Style Controller
Typography: Customize the font settings for the button text, including size, weight, and style.
Zoom on the image to check Button Trigger Style Options
Icon, Image,SVG and Lottie Style Controller
The size or width depends on the type of trigger.
Width: Set the image or Lottie trigger type width.
Size: Set the icon or SVG trigger type size.
Color: This option allows you to set the text color for buttons or change the color of icons and SVG elements. This works for both their 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)
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)
Trigger Icon :
Appears only when the icon is enabled on the button from the trigger type.
Icon spacing: Add the spacing bettween the text and icon
Size: Set the icon size
Color : Set the Icon color for both normal and hover states.
Border: Select from solid, dashed, dotted, or double borders
Border Width: The thickness of the border.
Border color: Select The color of the border
Border Raduis: Add Rounds the corners of the border
Margin : adding Space outside the icon, separating it from surrounding content.
Pending: adding Space between the icon and the icon’s border inside the button
Zoom on the image to check 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.
Zoom on the image to check 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.
Zoom on the image to check 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.
