Table Of Contents

Modal Widget in Elementor

How to Use Modal Widget in Elementor

A modal window creates a mode that disables the main window but keeps it visible. It actually a user interface. Our Modal Widget in Elementor will allow you to make the perfect modal window. Here in this article, I will show you how to use the widget section by section.

So, let’s dive into the article.

To Insert Widget

inserting Modal Widget in Elementor

Inserting widget, it is just a matter of dragging and dropping. As you see in the screenshot above, drag the modal popup builder inside your page.

Content Tab

Using the content tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.


modal widget layout

Go to the Content tab > Layout.

Here in this section, you will find three more layout options ( Splash Screen, Exit Popup, Custom Link) with the default layout. And all the options will let you make a modal window for Elementor pop up as I told earlier in this article.

Splash Screen: If you select this option, when you’re going to open your page, it will allow you to open a new modal window.

Exit Popup: This option is opposite the Splash Screen. It will show a modal window when you’ll attempt to exit your page.

Custom Link: With this option, you will be able to link any web content (image, text, video, etc.) through the modal window.


Modal Widget in Elementor button

Simply, go to the Content tab > Button.

This section will allow you to style the modal button. Here you can add text, alignment, size, icon with the button.


Modal widget text field

Just, go to the Content tab > Modal.

The modal section will let you set Header and Footer with some texts. Most importantly, from the Select Source control along with Custom, you can go for the Elementor Template and AE Template for the Modal Widget in Elementor.

modal widget template inserting

When you are going to show something through the Elementor Template, at first you have to make a page or section (as I’m selecting Offcanvas here) in the Elementor Template. And you can do that by going to the WordPress Dashboard > Templates > Add New > Select (section/page) > then edit the section or page with Elementor editor to complete the Modal Widget in Elementor.


From this section, you can set options for the button. That’s it.

additional options

Go to the Content tab > Additional.

Style Tab


Modal Widget in Elementor modal button style

Go to the Style tab > Button > Button > Normal.

In connection with the mode of Normal, you’ll get able to set the Text, Background color, and also Border Type, Border Radius, Padding, Box Shadow, and Typography for the modal widget button.

modal style 2 - BdThemes

Go to the Style tab > Button > Button > Hover.

But, Hover mode will let you set only Text Color, Background Color, Border Color, and especially Hover Animation (like a shrink, pulse, pop, etc.)


modal style 3 - BdThemes

Go to the Style tab > Header.

Taking the help of the highlighted section, you will be able to style the Header part of the modal window.

Modal Content

modal style 4 - BdThemes

Go to the Style tab > Modal Content.

This section will allow you to style content you want to show through the modal window. As you see in the screenshot above.


modal style 5 - BdThemes

Go to the Style tab > Footer.

The footer section is similar to the Header section. You can go forward as the Header section for this Modal Widget in Elementor.

Video Assist

In conclusion, it seems you’ve noticed how to use our Modal Widget by Element Pack. It is easy but a little bit tricky. Watch Video Assist and to get more ideas about the usage of this widget, hit on the demo page.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.