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.

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

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 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 clicking on the trigger and the animation starting.

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

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

• Typography: Customize the font for the text button.
• Color: Set button color.
• Background Color: Select the background color for the bullet.
• Border Type: Set the border type, width, and color.
• Border Width: Set the border width.
• Border Color: Select the border color.
• Border Radius: Set Border Radius of button. A Higher border-radius means a more circular border.
• Shadow: Set the shadow style of the button.
• Padding: Creates space around the button.

Image

• Border Type: Set the border type, width, and color.
• Border Width: Set the border width.
• Border Color: Select the border color.
• Border Radius: Set Border Radius of the button. A Higher border-radius means a more circular border.
• Shadow: Set the shadow style of the button.

Text

• Typography: Customize the font for the text button.
• Color: Set button color.
• Background Color: Select the background color for the text button.
• Border Type: Set the border type, width, and color.
• Border Width: Set the border width.
• Border Color: Select the border color.
• Border Radius: Set Border Radius of text button. A Higher border-radius means a more circular border.
• Shadow: Set the shadow style of the text button.
• Padding: Creates space around the text button.

Lottie Animation

• CSS Filters: Customize the filters on Lottie.
• Hover CSS Filters: Customize the on hover filters on Lottie.

Header

• Color: Set header color.
• Typography: Customize the font for the header.
• Background Color: Select the background color for the header.
• Separator Color: Select the separator color for the header.
• Border Type: Set the border type, width, and color.

Upper Close Button & Lower Close Button

• Upper Close Button:
  • Size: Adjust the size of the button using a pixel-based slider.
  • Color: Change the color of the button text or icon, with separate controls for normal and hover states.
  • Background Color: Set the background color of the button, with normal and hover state customization.
  • Border Type: Choose the style of the button’s border (e.g., solid, dashed, none) from a dropdown menu.
  • Border Radius: Modify the roundness of the button’s corners using a pixel slider.
  • Padding: Control the space inside the button around the text or icon, adjustable for top, right, bottom, and left.
• Lower Close Button:
  • Typography: Adjust the typographic settings of the button’s text, likely including font size, weight, and style.
  • Width: Define the width of the button using a pixel-based slider.
  • Color: Set the text or icon color for the button, with options for both normal and hover states.
  • Background Color: Choose the background color for the button, again with separate settings for normal and hover.
  • Border Type: Select the border style from a dropdown menu, with options like solid, dashed, or none.
  • Border Radius: Change how rounded the button corners are with a slider for pixel adjustments.
  • Padding: Adjust the internal spacing of the button for top, right, bottom, and left sides separately.

Modal Box

• Text Color: Change the color of the text inside the modal box.
• Typography: Adjust font properties like size, weight, and style.
• Content Background Color: Set the background color for the area where content is placed inside the modal.
• Box Background Color: Choose a color for the background of the modal box itself.
• Width: Use a slider to define the width of the modal box in pixels.
• Max Height: Set a maximum height for the modal box using a pixel-based slider.
• Overflow: Select how overflow content is handled, such as whether it’s visible or scrolls.
• Background Type: Pick a background style, which may include solid colors, gradients, or images.
• Footer Background Color: Assign a specific color to the footer background of the modal box.
• Separator Color: Choose a color for lines or dividers within the modal box.
• Border Radius: Adjust the corner roundness of the modal box using a slider.
• Box Shadow: Apply a shadow to the modal box to add depth or visual interest.
• Margin: Set the outside space on all sides of the modal box in pixels, which can be adjusted for top, right, bottom, and left separately.
• Padding: Control the inside space between the content and the borders of the modal box, with individual adjustments for each side.

Conclusion

In conclusion, the Modal Box Widget by Premium Addons for Elementor empowers WordPress users to display varied content types through modal popups efficiently and attractively. It offers customizable triggers like buttons, images, or animations, and detailed design settings for a personalized touch. This widget is ideal for those who wish to provide a rich user experience by making the most of limited webpage real estate, ensuring both functionality and aesthetic appeal in a user-friendly package.