Popup & off-canvas builder

How to Use Popups & Off-Canvas Windows in WordPress with Elementor

Effectively showcase important information or drive conversions using popups and off-canvas elements. With the Popup Modal widget in Elementor, you can create visually engaging interactions without touching a line of code. Here’s how to get started:

Step 1: Add the Popup Modal Widget

1. Edit any page with Elementor.
2. In the Elementor panel, search for “Popup Modal”.
3. Drag and drop the widget into your desired section on the page.

Step 2: Customize the Popup Modal

Customise the Toggle Button

1. Under Toggler Type, select Button.
2. Choose a Popup Show Type – either Modal or Slide.
3. The toggle button will now appear on your canvas.
4. Open the Popup Toggle Button settings to style the button (icon, color, size, text, etc.).

Customize the Modal or Slide Window

• In the Popup section:
  • Set max height for content containment.
  • Enable screen overlay for focus.
  • Toggle close icon visibility.
  • Add a header and footer to structure your popup.
• In the Overlay section:
  • Enable or disable popup closing when clicking outside the modal.
• In the Close Icon section:
  • Set the icon position and select a custom icon from the library.
• In the Header & Footer sections:
  • Add branding, CTAs, or navigation for an enhanced user experience.
• In the Content section:
  • Toggle Enable Template to insert custom content using any Elementor widget.

Final Notes

By following these steps, you can build high-converting, interactive popups and off-canvas panels that blend perfectly with your website’s design. Use them for lead capture, announcements, special offers, or navigation—whatever enhances your user journey.