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 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.
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 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.
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.
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.
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.
Go to the Content tab > Additional.
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.
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.
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.