1. Home
  2. Docs
  3. Happy Elementor Addons P...
  4. Premium Widgets
  5. Modal Pop-up

Modal Pop-up

Using the new Modal Pop-up widget of Happy Elementor Addons Pro, you can easily use creative pop-ups on your website to increase your conversion rate.

You can use templates to widgets as your pop-up! Cool, right!. Let’s see how to set it up.

Using Modal Pop-up

Go to your Elementor site and start editing the page with Elementor.

Step 1:

Select the Modal Pop-up widget from the menu bar on the left-hand side of your screen then drag and drop it in the selected area.

Modal pop-up

Step 2:

In the ‘Content‘ section, you will find options to edit ‘Modal Pop-up‘, ‘Settings‘, ‘Wrapper link‘.

Content section

Before you start, you can use 3 types of triggers to enable your Modal Pop-Up. They are,

Button

You can use a button as a trigger. So, whenever users click the button, the Modal Pop-up will appear.

button

Image

Instead of a button, you can use a image as a trigger as well.

image

On Page Load

This means, the Modal Pop-up will trigger automatically when a user visits the website. You can choose the interval time as to when will the pop-up will appear.

Note: Once the user exits the pop-up, it will appear only when the user visits the page again or refreshes the page.

on page load

In the Modal Popup part, you can add button name, image, title, description, icon. You can also enable Shortcode mode.

edit modal popup

For Settings part, you can enable popup preview, select popup animation, icon position, button alignment, modal text alignment.

settings

Now, you can use two types of content in the Saved Content option. Either you can use Templates or you can use Global Widgets.

template

If you choose a template, then you need to choose a template you have saved in the library.

choose template

So, when you open the pop-up,

open template

And if you choose Global Widget, you can show any kind of widget in the pop-up.

widget

Step 3:

The ‘Style‘ section, you will have options to design ‘ Button,’ ‘popup’.

style section

For the Button part, you can add padding, border-radius, typography, box-shadow, background color, etc.

button

For the Image part, you can add padding, border-radius, box-shadow, background color, etc.

trigger image

As for the Popup part, you can width, height, padding, border-radius, typography, box-shadow, background-color for content, image, title, description, close button of the pop-up.

popup edit

Step 4:

If you want to add motion effects, happy effectsbackground or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor. Give a read to this Document to know more about Advanced features and its uses.

advanced

Using Shortcode

Remember, you could enable shortcode on the content section. To use shortcodes, you need to navigate to Templates-> Saved Templates. There you will find the shortcodes for your saved templates and global widgtes.

shortcodes

Save as Template

To use templates on your Modal Pop-up, you need to first save a template. That is easy. You can any of the Happy templates or blocks. Or you can create your own design.

Then when you right-click on the section you will get the option Save as template. That way your template will saved in the template library.

save template

Save as Global Widget

For using widget on your pop-up, just right click on the widget and choose Save as a Global. That’s it.

save as a global

That’s it!

From this version of HappyAddons, you will get an option to add an icon in your modal popup button.

image 3

Icon Alignment Facility

  • You can change the icon from the content tab,
  • Also, you can set the position of the icon before button text or after text.

Styling the Icon

image 2

You can change the icon size and the add space between the icon and the text from the style section of the widget panel.

Note: the icon will pick the color of your typography color of the button.

How can we help?