πŸ›β˜€οΈ  End of Summer Sale! Get UP TO 40% OFF!

Add Offers, Announcements, or Alerts Through a Modal Popup Using Elementor

Add Offers, Announcements, or Alert Through a Modal Popup on WordPress Website

Table of Contents

Wanted to showcase modal popups to promote offers, announcements, and alerts using Elementor on your WordPress websites? Great! You’ve landed on the right page.

Modal popups are used on websites to bring users’ attention to a significant action or provide specific information.

In this article, we’ll provide detailed information about how you can add offers, announcements, or alerts through modal popups using the Elementor page builder.

So, without further ado, let’s move ahead.

Create a modal popup using Elementor and PowerPack

Best Modal Popup Plugin for Elementor Page Builder

Choosing the right plugin can be tricky because there are dozens of WordPress popup plugins for the Elementor page builder. And a wrongly chosen plugin without research can be risky for your website performance and user experience.

So, you have to go for a plugin that can effectively match your website performance without ruining the user experience but looks tremendous, is handy, and delivers maximum conversions.

Skipping to the best part, we’ve got you that exactly matches your expectations and is flexible enough to synchronize your website performance incredibly, i.e., Popup Box Widget by PowerPack Elementor Addons.

Popup Box Widget by PowerPack Elementor Addons

PowerPack Addons for Elementor is one of the best addons for the Elementor page builder. It has over 80 handy widgets, including the Popup Box widget.

PowerPack Popup Box widget is an incredible way to add modal popups using Elementor on your WordPress website stylishly and creatively. It offers multiple features to customize and style popups:

  • Various content types support such as image, video, custom content, saved page templates, custom HTML, and many more.
  • Advanced trigger options, such as on-click, time-delayed, exit intent, or element class/ID, are at your fingertips.
  • Great animation effects to apply on popups like zoom in, zoom out, newspaper, 3D unfold, move from right or the top.
  • It also lets you customize your popups stylishly using other features for adding borders and colors, adjusting the height, or customizing the entire layout.

Add Popups to your WordPress Sites Using Elementor & PowerPack

First, install and activate Elementor and PowerPack Addons to display popups on your WordPress website. Next, open your page in the editor, type “popup box” in the search bar, and drag & drop the widget.

Make sure to check for the PowerPack β€œPP” sign on the top-right corner of the widget.

Drag and drop the PowerPack Popup Box widget using the Elementor page builder

Customize the Content Tab of the Popup Box Widget

Content tab of the popup box widget includes four sections:

  1. Content
  2. Layout
  3. Trigger
  4. Settings

Let’s look at each section one by one.

Content
The content section in the Content tab of the Popup Box widget

Let’s see what features are available in this section:

  • Enable the β€œPreview Popup” option to see the live display of the popup box on your page.
  • Toggle on the β€œEnable Title” option to show the popup title.
  • Add a title for your popup in the β€œTitle” option.
  • You can choose a popup type using the β€œType” option, such as image, link, content, saved templates, or custom HTML.
  • If you’ve selected the β€œImage” option as the popup type, you can choose an image from the media library using the β€œChoose Image” option.
  • Also, you can directly drop a link to display an image using the β€œImage Link” option.
  • If you’ve chosen the β€˜Link’ option as the popup type, you can directly drop a URL for any video, map, or page you want to display on the popup using the β€œEnter URL” option.
  • You can customize the entire content with the β€œContent” option if you’ve chosen the β€˜Content’ option as the popup type.
  • If you’ve chosen the β€˜Saved Templates’ option as the popup type, you can select templates for your popup box.
  • If you’ve chosen the β€˜Custom HTML’ option as the popup type, you can enter custom HTML.
Layout
Layout section in the Content tab of the Popup Box widget to add modal popups using Elementor

Let’s see what features are available in this section:

  • Choose a layout for your popup, either standard or full screen, using the β€œLayout” option.
  • You can adjust the width of the popup with the β€œWidth” option.
  • Also, you can enable the β€œAuto-Height” option for your popup box.
Trigger
Trigger section in the Content tab of the Popup Box widget

Let’s explore the features that are available in this section.

  • Select the trigger action for the popup from the β€œTrigger” options, such as on click, time-delayed, exit intent, or element class ID.
  • Customize the β€œButton Text” for your popup box.
  • Choose a β€œButton Icon” for your popup box from the icon library.
  • Choose β€œIcon Position” either β€˜before’ or β€˜after’ the button text.
  • You can also enable β€œURL Trigger” for the popup box.
  • You can enter an element ID in the β€œElement ID” option if you’ve enabled the URL trigger option.
Settings
Settings section in the Content tab of the Popup Box widget

Let’s take a look at the available features in this section.

  • This section includes multiple toggle options for settings such as β€œPrevent Page Scroll,” β€œShow a Close Button,” β€œClose an ESC Keypress,” β€œClose on Overlay Click,” or β€œClosing on Content Click.” Enable or disable these options as per your needs and preferences.
  • Responsive features include an option as β€œDisable On.” In addition, you can choose mobile & tablet, mobile, or none according to your choice.
  • β€œAnimation” features to popup are available here; you can choose one among all these according to your preference.

That’s all for customization of the Content Tab of the Popup Box widget. Next, we’ll move to the next part, i.e., the Style Tab.

The Style Tab of the Popup Box Widget

The style tab of the popup box widget includes five sections:

  • Popup
  • Overlay
  • Title
  • Trigger Button
  • Close Button

Let’s look at each section one by one in brief.

Popup
Popup section in the style tab of the Popup Box widget to add modal popups using Elementor

Let’s see what features are available in this section:

  • You can customize the background of the popup box using the β€œBackground Type” option.
  • Choose a β€œBorder Type” for the popup box from options such as solid, dotted, doubled, dashed, or groove.
  • If you’ve applied a border, you can use a β€œBorder Radius” to the popup box. It’ll allow the border to display curvy and smooth edges all around.
  • Adjust the β€œPadding” for the popup box; it’ll maintain the spacing between the content and the border to let the popup look organized.
  • Customize the β€œBox Shadow” option to display a shadow on the popup.
Overlay
Overlay section in the style tab of the Popup Box widget

The overlay section includes a feature that enables an β€œOverlay” option to the popup box and lets you customize its β€œBackground Type.”

Title
Title section in the style tab of the Popup Box widget

Let’s take a look at all the features available in this section.

  • Set the alignment of the popup box title using the β€œAlignment” option.
  • You can customize the β€œBackground Color” for the popup box title.
  • Also, you can choose the popup title text color using the β€œColor” option.
  • Choose a β€œBorder Type” for the popup box from given border type options such as solid, dotted, doubled, dashed, or groove.
  • Adjust β€œPadding” for the popup box title.
  • You can customize the popup box title text using the β€œTypography” option.
Trigger Button
Trigger Button section in the style tab of the Popup Box widget to add modal popups using Elementor
  • You can set the β€œAlignment” of the trigger button for the popup.
  • Choose an appropriate β€œSize” for the popup trigger button.
  • Customize the β€œBackground Color” and the β€œtext color” for the trigger button.
  • Choose β€œBorder Type” for the trigger button and also adjust the β€œBorder Radius” and β€œPadding.”
  • Customize the trigger button text using the β€œTypography” option.
  • Also, you can customize the shadow feature for the popup trigger button using the β€œBox Shadow” option.
  • An additional option to adjust the β€œMargin” for the trigger button icon is also available in this section.
Close Button
Close Button section in the style tab of the Popup Box widget to add modal popups using Elementor
  • Options to position the close button for the popup are available using the β€œPosition” option. You can choose one according to your preference.
  • You can choose the thickness from options such as β€˜bold,’ β€˜normal,’ or β€œWeight” options for the close button.
  • Adjust the β€œSize” of the close button and choose an β€œIcon Color.”
  • Apply a β€˜gradient’ or β€˜classic’ background for the close popup button using the β€œBackground Type” option.
  • Apply border to the close popup button using β€œBorder Type” options, such as solid, dotted, doubled, dashed, or groove.
  • If you’ve applied a border to the close button, you can adjust the β€œBorder Radius” and its β€œPadding”; adjusting both features will allow the close popup button to look neat and organized.
  • You can adjust the popup close button margin using the β€œMargin” option.

So, that is all; apply these changes to your Popup Box widget to see incredible changes.

Create a modal popup using Elementor and PowerPack

Final Words!

Using the PowerPack Popup Box widget, you can add incredible modal popups in the Elementor page builder. We hope this tutorial blog helped you create fantastic β€œpopups” for your website using the PowerPack Popup Box widget.

If you’ve enjoyed reading this article, you’d also love to experience our other PowerPack elements. Click here to get the PowerPack Popup Box widget for the Elementor page builder.

Please drop your comments here; we’d love your replies.

Also, join us on Twitter, Facebook, and YouTube.

Liked this Article? Join 5000+ Subscribers

Get latest Elementor updates, tutorials, and freebies in your inbox.
No Spam Guaranteed.
Editorial Team

Editorial Team

Leave a Comment

Get 70+ Elementor Widgets with PowerPack Addons for Elementor

Download PowerPack Free

Subscribe to receive latest updates, announcements, offers, deals & discounts.