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.

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.)


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

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.


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.

Enjoy New Year 2022 with a 35% Discount on all Products! Check Here


Don’t worry we hate spam and we promise you will get only quality news and offer from us.

© Copyright 2021 All Rights Reserved by BdThemes