Modal Box Widget Tutorial

Intro

Show more content in less area using Elementor Modal Box Widget as you will be able to add multiple content types by choosing the regular text editor or you can select an already exist template from Elementor’s template library. In addition, Modal Box Widget for Elementor gives you the ability to choose from 5 display styles Button, Image, Text, Lottie animation and Page Load.Elementor Modal Box Widget Tutorial

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Click here to check Premium Modal Box Widget demo.

Key Features

• Content
• Trigger Options

1. Content

• Header: Enable or disable the modal header. Modal Header is the top bar that appears in the modal popup window.
• Icon: Use font awesome icon, upload a custom image to make the icon more attractive or use animation with Lottie Animation. You have four options in the icon drop-down menu, which are:
  • Font Awesome: You can choose from a lot of built-in font awesome icons.
    • Icon Size: Set the size of the icon, you can drag the bar to set the icon size or enter the value.
  • Custom Image: Add a custom image by choosing from the media library or can upload a new image.
  • Lottie Animation: You can add any Lottie animation.
    • Animation JSON URL: Insert the JSON URL.
    • Loop: Enable it will make the animation run forever.
    • Reverse: Enable it will make the animation run backward.
    • Icon Size: Set the size of the icon.
  • None: You can select this option if you don’t want to use an icon.
• Title: Give your Modal Box a title. This title will appear at the top of the popup window.
• Content
  • Content to Show: You can choose between Text Editor and Elementor Template.
    • Text Editor: If you choose text editor option, you will see a custom text editor in which you can add the text. In addition, you can also add media from the media library or can upload the media.
    • Elementor Template: Choose a template from Elementor’s template library.
      • You can use Elementor Live Templates feature to create/edit Elementor template on the same page. For more information, please check Elementor templates article from here.
      • You can also select an existing Elemntor templates.
• Upper Close Button: Enable or disable Upper Close Button.
• Lower Close Button: Enable or disable Lower Close Button.
  • Text: Lower close button text.
• Entrance Animation: Select the entrance animation for the modal box.
  • Animation Duration: Select the duration of the animation.
  • Animation Delay (s): Set the delay between click on the trigger and animation start.

2. Trigger Options

• Trigger: Choose how would you like the modal box to appear on the screen. You can choose from four display options, which are Button, Image, Text, Lottie Animation and page load.
  • Button
    • Button Text: Enter the button text in the text box.
    • Icon: Enable or disable icon option.
      • Icon: Choose from a list of Font Awesome icons.
      • Icon Position: Set the icon position, before or after the button text.
      • Icon Size: Set the size of the icon, you can drag the bar to set the icon size or enter the value.
      • Icon Spacing: Set the space between the icon and the text, you can drag the bar to set the icon space or enter the value.
    • Button Size: Set the button size. You can choose from the following four options:
      • Block
      • Small
      • Medium
      • Large
    • Alignment: Set the button alignment, you can set as the center, left or right.
  • Image
    • Image: Upload the image or select an image from the media library.
    • Size: Adjust the size of the image.
    • Alignment: Set the alignment of the image, you can set as the center, left or right.
  • Text
    • Text: Enter the text in the text box.
    • Alignment: Adjust the alignment of the text as the center, left or right.
  • Lottie Animation
    • Animation JSON URL: Insert the JSON URL.
    • Loop: Make the Lottie animation run forever.
    • Reverse: Make the Lottie animation run backward.
    • Only Play on Hover: Play the animation only on hover.
    • Size: Adjust the size of the image.
    • Alignment: Adjust the alignment of the Lottie animation as the center, left or right.
  • Page Load
    • Delay in Popup Display (Sec): Set the value of when should the popup appear during the page load? The value is counted in seconds.

Style

• Trigger
• Header
• Upper Close Button
• Lower Close Button
• Modal Box

1. Trigger

Under the trigger tab, you can see a lot of customization options. The trigger style options are dependent on the display style you choose from the display options tab. Every display style has different trigger style options.

• Button

When you choose the Button option from the list of display styles, you have several customization options e.g. you can adjust the color, hover color, icon color, and icon hover color. You can also set the typography. In addition, there are two tabs i.e. normal and hover, under both these tabs there are different options. You can set the background color, border type, radius, padding and can adjust the shadow.

• Image

If you select the Image from the style options you will see fewer customization options as compared to button option. Again, there are two tabs Normal and Hover, below these tabs there are options for customizing the border type, border-radius, and shadow.

• Text

Choosing the text option from the display styles list will give you multiple options related to text styling. You can make the text attractive using these customization options. These options include color adjustment, hover color, typography settings, border type & radius, padding, and text-shadow.

• Lottie Animation

• CSS Filters: Customize the filters on lottie.
• Hover CSS Filters: Customize the on hover filters on lottie.
• Page Load: If you select the page load option from the display styles, you will not see any trigger style options as the popup window will appear automatically when page load.

2. Header

Elementor Modal Box widget allows you to add custom styling to the heading, you can choose the heading color according to your choice, adjust the typography and, background color. You can choose from different border types such as solid, double, dotted, etc and can set the width of the border. You can also set the border color.

3. Upper Close Button & Lower Close Button

There are two style settings tab upper close button and lower close button, these two tabs have the same style settings except lower close button has typography option in addition. There are multiple customization options under these tabs that allow you to take full control of these buttons. You can edit the button color and can also change the background color. You can also adjust the border and padding of these buttons easily.

4. Modal Box

Elementor Modal Box widget allows you to take full control over the modal box. It provides dozens of style options which enables you to style the modal box according to your choice. You can set the width and height of the modal box according to your choice. You can also add the background to the modal box if you want. In addition to these options, you have control over the content background color and footer background color. Moreover, you have options related to border style, box-shadow, margins, and padding.