Intro
If you’re using WordPress and Elementor and want to add some interactive flair to your site without getting tangled in code, Elementor Off Canvas Widget by Premium Addons is just what you need. This tutorial will show you how to get this widget up and running in no time.
Click here to check Elementor Off Canvas Widget demo.
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that this addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Key Features
- Content
- Trigger
- Display Options
- Close Icon
Content
Content to Show: If “Text Editor” is selected, those options will be shown.
- Text Editor: Add and edit text content.
- Text Alignment: Set the horizontal alignment of your text content, with options to align text to the left, center, or right.
- Vertical Alignment: Adjust the vertical alignment of the text content within the container, with options for top, middle, or bottom alignment.
Content to Show: If “Elementor Template” is selected, those options will be shown.
- Create / Edit Template: A button that allows you to create a new template or edit an existing one directly.
- OR Select Existing Template: An alternative option to the button above, where you can pick from a list of pre-existing templates. Here, “Off Canvas – Pricing Plans” is currently selected, which suggests this specific template will be displayed.
- Vertical Alignment: Icons to adjust the vertical alignment of the content block, but it appears no option is currently selected.
Trigger
- Text: Enter the text for the button.
- Icon: Enable to add an icon with the button.
- Icon Type: Select the type of icon or SVG code.
- Icon: Preview area showing the selected icon, which is a star.
- Draw Icon: Enable icon drawing animation.
- Path Thickness: Adjust the thickness of the icon drawing path.
- Draw All Paths Together: Draw all parts of the icon simultaneously.
- Loop: Toggle to loop the icon drawing animation.
- Speed: Slider to adjust the speed of the icon animation.
- Reverse: Toggle to play the icon drawing animation in reverse.
- End Point (%): Slider to adjust the endpoint of the icon drawing animation.
- Only Play on Hover: A toggle to activate the icon’s animation only when the cursor hovers over it.
- Yoyo Effect: A toggle to apply a back-and-forth animation to the icon.
- Icon Position: A dropdown to choose the icon’s position relative to the text.
- Icon Size: A slider to adjust the icon’s size, with units in pixels.
- Icon Spacing: A field to input the space between the icon and the text.
- Button Size: A dropdown to select the overall size of the button.
- Hover Effect: A dropdown to choose an effect when the button is hovered over.
- Float: A toggle to allow the button to float over content, currently enabled.
- Horizontal Position: Icons to adjust the horizontal position of the floating button.
- Vertical Position: Icons to adjust the vertical position of the floating button.
Display Options
- Off Canvas Type: Select the type of off-canvas layout.
- Position: Choose the position from which the off-canvas content will appear.
- Transition: Select the transition effect used when the off-canvas content appears.
- Content Width: Set the width of the off-canvas content in pixels.
- Overlay: Enable or disable an overlay, which is usually a semi-transparent background, when the off-canvas content is active.
- Overlay Color: Choose the color of the overlay.
- Change Cursor on Overlay: Enable or disable to change the cursor when hovering over the overlay.
Close Icon
- Close Icon: Icons to choose from for the close button.
- Position: Buttons to adjust the horizontal position of the close icon, pointing left and right.
- Close On Click Outside Content: Enable to allow closing the content when clicking outside of it,
Style
Trigger
- Typography: Access to font and text styling options.
- After Draw Fill Color: Color selection for the element post-animation, with ‘Normal’ and ‘Hover’ states.
- Color: Pick a color for the text color.
- Icon Color: A color picker specifically for the icon within the trigger.
- Stroke Color: A color picker for the outline or stroke of the icon.
- Background Color: A color picker for the background of the trigger element.
- Border Type: Dropdown menu to select the type of border.
- Border Radius: Slider and input field to adjust the roundness of the element’s corners.
- Shadow: Button to access shadow effect settings for the element.
- Padding: Input fields for setting the space inside the element, around the content, with individual values for top, right, bottom, and left sides.
Close Icon
- Size: Adjust the icon size, measured in pixels.
- Color: Color picker for the icon color.
- Background Color: Pick color for the icon’s background.
- Shadow: Add or customize the icon’s shadow effect.
- Border Type: Select the border style.
- Border Radius: Adjust the roundness of the icon’s corners, measured in pixels.
- Margin: Set the space outside the borders of the icon, with individual values for top, right, bottom, and left.
- Padding: Set the space inside the borders of the icon, around the content, also with individual values for top, right, bottom, and left.
Content
- Background Type: Choose to between solid color or gradient for the background.
- Border Type: Select the border style, with ‘Default’ shown as the current selection.
- Border Radius: Input fields to adjust the roundness of the corners, with units in pixels.
- Box Shadow: An icon to access settings for adding a shadow effect around the box.
- Padding: Fields to set the space inside the content box, with individual adjustments possible for the top, right, bottom, and left sides.
Conclusion
Elementor Off Canvas Widget from Premium Addons isn’t just another extra for your WordPress site; it’s a solid tool that opens up new possibilities for user interaction. This widget provides a detailed set of customizations, from what you show in your side panels to the specifics of how buttons work and look. It’s built for Elementor users who want practicality without complexity. By following this guide, you can give your site a fresh update and make sure your visitors have a smooth and engaging experience every time they visit.
If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁
Join the Community
You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.
