"We are revamping our Knowledge Base articles to serve you better. In case you find something unusual, do not panic. Reach out to our Support Team by submitting a ticket if you ever need some help.”

Off-Canvas

Off-Canvas

The Off-Canvas module allows you to design a stunning off-canvas panel that can slide in over your page. The off-canvas panel can be triggered with a button, text, image, icon, or through any other module. This panel can display Content, Menu, Saved Rows, Saved Modules, and Saved Page Templates.

Key features:

  • The off-canvas panel can display – Content, Menu, Saved Rows, Saved Modules, Saved Page Templates.
  • Trigger off-canvas content with – Icon / Image / Text / Button / Custom Class / Custom ID
  • Off-Canvas window width and position option (Left/Right)
  • Off-Canvas window appear effect (Slide/Push)
  • Preview off-canvas window in the backend
  • Close Button style having options like Icon, Alignment, Size, Color
  • Off-Canvas window background color and content spacing

Below are the settings available for the Off-canvas Module

Content

Under the Content section, you will see two options –

  • Preview Off Canvas: Enabling this option will give you a preview of the Off-Canvas so that you can see how it will appear in real-time.
  • Content Type: Choose what type of content you wish to display in the off-canvas window. available options are – Content (text, HTML) / Menu / Saved Rows / Saved Module / Saved Page Templates

OFF-CANVAS

Under Off-Canvas section, you will see four options –

  • Width: This allows you to control the width of the canvas. You can specify the width in px and responsive devices with toggle.
  • Position ( left/right ): Choose a direction off-canvas content should appear
  • Appear Effect: Choose entry effect for the off-canvas window.
  • Overlay Color: This will be applied to the rest of the window than off-canvas. It will help to highlight the off-canvas window.
  • Close Off-Canvas on Menu Link: This setting on being enabled will close the Menu on Menu item click.

Canvas background color and padding can be managed from Style tab > Off Canvas

Close Button

Under the Close Button section in the General Tab, you will find multiple options –

You can customize the button that will close your canvas. You can set the Close Icon, select its Size, Icon Color, Icon Background Color, position and related style of the close button.
Options to close popup on ESC Keypress and on Overlay Click are available.

Display Settings

Display settings will allow you to choose a trigger for canvas. You can display it on the click of a text, icon, button or any other element (with CSS class/ID).

 

Was this article helpful?

Related Articles

DF Black Trimmed

ANNOUNCEMENT:
Our Knowledge Base articles are undergoing a comprehensive overhaul to enhance your experience.

If you encounter any unexpected issues or irregularities, feel free to connect with our Support Team by submitting a support ticket for prompt assistance.
Join our Slack Workspace

Join the DropFunnels Slack Workspace and get access to the DropFunnels team, other DropFunnels members, twice-weekly support calls and more!

Join our Slack Workspace

Become A DropFunnels Wizard


Complete our Fast Start Training and learn everything you need to know to launch your first or next funnel.

From Lead Capture to Products, Courses to Blogs, this easy-to-follow training covers it all.

We’ll even give you $50 credit for completing the training!


Become A DropFunnels Wizard