[Pro]Using the Modal Widget

See this widget in action here.

Want to display customizable modal popups on your website? The Modal widget in aThemes Addons for Elementor lets you create attention-grabbing popups triggered by buttons, images, icons, or text, complete with custom content and entry animations.

In this guide, we’ll walk you through how to use the Modal widget in aThemes Addons for Elementor.

Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor. This widget requires aThemes Addons Pro.

Activating the Widget

Go to your aThemes Addons dashboard, search for Modal, and toggle the widget on to activate it.

Exploring Widget Options

Configuring Trigger Settings

The Trigger Settings control how visitors open the modal:

  • Trigger Type – Choose from Button, Image, Icon, Text, or Custom Class.
  • Custom Class – Enter a custom CSS class to trigger the modal (available when Custom Class is selected as the trigger type).
  • Alignment – Set the trigger alignment to left, center, or right.

Configuring Modal Content

The Modal Content section defines what appears inside the popup:

  • Modal Type – Select Content to build the modal directly, or Template to use a saved Elementor template.
  • Title – Add a modal title with a customizable HTML tag.
  • Image – Include an optional image inside the modal.
  • Content – Use the WYSIWYG editor to add text, media, and formatting.
  • Template – Select a saved Elementor template to display as the modal content.

The Modal Settings section controls the popup behavior:

  • Animation – Choose an entry animation such as Zoom In or Fade.
  • Max Width – Set the maximum width of the modal in pixels or percentage.
  • Close Button Position – Place the close button inside the modal, outside it, or at the screen edge.

Customizing Style Options

The Style Options let you fine-tune the visual appearance of the modal and its trigger:

  • Trigger – Customize the appearance of the Button, Icon, Image, or Text trigger element.
  • Modal – Adjust padding, border radius, background color, and box shadow for the modal container.
  • Overlay – Set the background color for the overlay behind the modal.
  • Title and Text – Control the typography and colors for the modal title and body text.

That’s it! You’ve successfully created and configured a modal popup on your site using the Modal widget in aThemes Addons for Elementor.

Next, would you like to display a scrolling news feed on your pages? Check out our guide on using the News Ticker widget to learn more.