Effectively utilize popups and off-canvas windows to display crucial information and conversion-oriented messages on your WordPress website. Follow these simple steps to create engaging popups and off-canvas elements using the Popup Modal widget in Elementor.
Step 1: Add the Popup Modal widget
Follow the instructions below to insert a Popup Modal widget anywhere onto your page canvas.
- Edit any page with Elementor.
- In the left side panel, search for the Popup Modal widget.

- Drag and drop the widget onto the desired area of your page.
Step 2: Customize the Popup Modal widget
Follow the instructions below to customize the Toggle Button and the Modal Window.
Customize the Toggle Button
- Select Button as the Toggler Type.
- Choose Modal or Slide from the Popup Show Type.
- The popup toggle button will appear on your page canvas.
- Expand the Popup Toggle Button section and configure its appearance.
Customize the Modal or Slide window
- In the Popup section, adjust the widget settings, set the maximum height, enable a screen overlay, show the close icon, and add pre-designed headers & footers.
- Under Overlay, choose whether the popup closes when clicking anywhere on the overlay.
- In the Close Icon section, customize the close icon’s position and select a custom icon from the library.
- Explore options in the Header & Footer sections for further customization.
- Under the Content section, switch on the “Enable Template” option to create custom content for the popup modal using any Elementor widget.
Step 3: Edit the content of the Popup Modal widget
- Click on the Toggle Button to open the Side Panel.
- Click on the “Edit content” button on the top right side.
- A popup window will appear with the content of the first slide that can be edited with Elementor. Edit the content, click update, and close the modal window.
- Update your page
Following these steps, you can create engaging and visually appealing popups and off-canvas elements on your WordPress website. Utilize these features to communicate with your audience and enhance user interaction effectively. Happy designing!
Was this article helpful?
What went wrong?



