How to Use Modal Widget

How to Use Modal Widget

A modal window creates a mode that disables the main window but keeps it visible. It actually a user interface. In terms of this, our Modal Widget will allow you to make the 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 widget, it is just a matter of dragging and dropping. As you see in the screenshot above.

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.


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 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 modal window.


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.


Just, go to the Content tab > Modal.

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.

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


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

Go to the Content tab > Additional.

Style Tab


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.

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

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.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Copyright © 2022 BdThemes. All Rights Reserved.