Add modal window using Modalier for Elementor

Add a modal window in a few steps using the Elementor widget. It is a quick and easy way to create an informative popup for any of your purposes. With this tool promote your products, display offers, feature announcements, or provide different information via bright popup messages. There is no limit on the number of modal windows for different events that can be added to one page or site.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor and drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content tab

On the Content tab of the modal window widget, you can manage the basic settings of the popup such as source, navigation, content layout, and more.

General

Select the content source for the popup and the type of event at which it will be displayed. Depending on the Source of content you will use, different settings will be available to you:

Posts

Select the existing WordPress posts that you would like to add to the content of your popup.

Posts source settings
  • Posts – select created posts from the list by clicking on the “+” to add them to the content. After adding, you can manage the display layout in the Layout section.
  • Link post – Enter the text for a button that will be displayed for each post and will be a link to the current post. You can enable/disable the button display via the Layout settings
  • Type events – select one of the available triggers for the popup
    • Button – the popup will open when you click on the button, the text of which you can enter the Button Text field.
    • Scroll – the popup will open when scrolling the page. The option allows you to specify a certain number of pixels in height for scrolling and Popup open limit.
    • Timeout – the popup will open after a certain time, which can be specified in milliseconds using the slider.
Custom Posts

The option allows using custom post types for the popup.

Custom posts source settings
  • Custom Posts – select created posts from the list by clicking on the “+” to add them to the content. After adding, you can manage the display layout in the Layout section.
  • Link post – Enter the text for a button that will be displayed for each post and will be a link to the current post. You can enable/disable the button display via the Layout settings
  • Type events – select one of the available triggers for the popup
    • Button – the popup will open when you click on the button, the text of which you can enter the Button Text field.
    • Scroll – the popup will open when scrolling the page. The option allows you to specify a certain number of pixels in height for scrolling and Popup open limit.
    • Timeout – the popup will open after a certain time, which can be specified in milliseconds using the slider.
WooCommerce

Select the Woocommerce products from the list by clicking on the “+” to add them to the popup content. After adding, you can manage the display layout in the Layout section.

WooCommerce source settings
Content

The option allows displaying custom content in the modal window. When the option is enabled, a new Content section is available.

Content source settings

Use the Content section to add the information for the popup filling the appropriate fields:

  • Image – upload an image from the media library
  • Title – a text field to enter the title
  • Description – a text field with TinyMCE editor for entering a popup description.
  • Button Text – a text field to enter the button title
  • Link – specify the link that will be applied to the Button.
Content editing section
AJAX content

The option allows displaying the internal site page in a modal window. When the option is enabled, a new Content section is available.

Ajax content source

Go to the Content section to insert a link to the page.

Ajax content link
Single Image

The option allows displaying the single image from your site media library in a modal window. When the option is enabled, a new Content section is available.

Single Image source

Go to the Content section to upload the image.

Image uploading for a popup
Image Gallery

The option allows displaying the image gallery in a modal window. When the option is enabled, a new Content section is available.

Image Gallery source

Go to the Content section to upload the images.

Uploading images for gallery
Video

The option allows displaying the video in a modal window.

Video source

Go to the Content section to insert the video link.

The field to insert the video link
Iframe

The option allows displaying the iframe in a modal window. When the option is enabled, a new Content section is available.

Iframe source

Go to the Content section to insert the iframe link.

The field to insert the iframe link
Section

The option allows displaying the section in a modal window by specifying its identifier.

Navigation

  • Opening animation – select the animation for the popup appearing. You can specify the Animation speed and After callback delay for the selected animation. Select None to disable the animation.
  • Forbidden to close – the toggle to enable/disable the ability to close the modal window. When you allow closing the modal windows the further options can be chosen: Display close button; Close via overlay.
  • Popup title – set the aria-label attribute value used for Accessibility purposes.
  • Close text – string for close button text. Available for localisation and alternative languages to be used.
  • Close aria label – string for close button aria-label attribute. Available for localisation and alternative languages to be used.

Layout

The section where all elements of the Modalier widget item can be added, configured and ordered.

Priority

Add layout elements and order them according to your needs.

Elements layout settings of the Modalier

To add a new element, click “Add Item” and select one of the available item types:  Image, Title, Description, Button.

Layout item settings

Style tab

On the Modalier widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.

Modal

  • Fit fullscreen – the toggle to enable/disable full-screen popup display.
  • Width – set the width of the modal window using the slider
  • Height – set the height of the modal window using the slider
Overlay
  • Background – specify the overlay background color using the color picker
  • Overlay opacity – specify the overlay opacity using the slider
  • Blur Content – the toggle to enable/disable the blur content outside the modal window. When the option is enabled you can specify the strength of the blur using thee slider.
Style Modal
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Item

The styles will be applied to each layout element of the Modalier item. You can configure separate elements like title, description, image, or other.

  • Width – specify the width of the current element in different units(px, %) using the slider.
  • Margin – the setting allows managing the margin of the items in different units(px, em, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the items in different units(px, em, %) for desktops, tablets, or phones.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
  • Background Type – the setting changes the background of the current block. You can choose a color or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Image

  • Width – specify the width of the current element in different units(px, %)
  • using the slider.
  • Type image size – select the image size you want to use in the modal window.
  • Float – manage the current block floating (left, right).
  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
  • CSS filter – the option allows you to add various CSS filters for the image box as Blur, Brightness, Contrast, Saturation, Hue.

Title/Description

  • Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Post link

  • Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
  • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Price

  • Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
  • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
  • Discount
    • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
    • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
    • Color– specify the font color and opacity for the text of the current block using the color picker.
    • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
    • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
    • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
    • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
    • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
    • Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
    • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

    Close button

    button Size
    • Width – specify the width of the close button using the slider.
    • Height – specify the height of the close button using the slider.
    • Border radius – specify the border radius of the close button using the slider.
    BUTTON Position
    • Top – manage the top position of the close button
    • Right – manage the right position of the close button
    icon size
    • Width – specify the width of the close button icon using the slider.
    • Height – specify the height of the close button icon using the slider.
    Icon POSITION
    • Top – manage the top position of the close button icon
    • Right – manage the right position of the close button icon

    Normal/Hover

    The icon button style settings for different states.

    • Color icon – specify the button icon color and opacity using the color picker.
    • Background Color – specify the background color and opacity of the button icon using the color picker.

    Open Button

    • Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
    • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
    • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
    • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
    • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
    • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
    • Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
    NORMAL/HOVER

    The button style settings for different states.

    • Color – specify the font color and opacity for the text of the current block using the color picker.
    • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
    • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
    • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

    Advanced Tab

    The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

    Save changes

    Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

    Update page in the Elementor
    Update page in the Elementor

    Was this article helpful to you?