Gutenberg Modal Box Block Tutorial

Introduction

Promote your website’s interactivity with our Gutenberg Modal Box Block Tutorial. Premium Block‘s Modal Box Block for Gutenberg introduces a dynamic way to engage visitors with Call to Action (CTA) buttons that reveal modal boxes containing text or other Gutenberg blocks upon activation. From layout settings to trigger options and styling, this guide covers everything you need to create compelling modal content that captures attention.

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

  • Premium Blocks for Gutenberg – The Free WordPress Plugin.
  • Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Modal Box Block?

Once you’ve enabled Premium Blocks, the beginning is effortless just add Premium Modal Box Block to your Gutenberg editor. From there, you can easily customize its inner containers.

Gutenberg Modal Box Block General Settings

Gutenberg Modal Box Block Support Inner Blocks. You have the option to add more fields, including various types such as:

  • Image
  • Text
  • Heading
  • Container
  • Section

If you need to preview more details to your visitors, you can easily add extra fields to the form. Just click on the “+” icon and pick the type of field you want to include.

Gutenberg Modal Box Block Layout Settings
  • Trigger
  • Trigger: Select the type of trigger as a Button.
  • Button Text: Input field to specify the text on the button.
  • Icon: Toggle to enable or disable an icon on the button.
  • Button Size: Dropdown to select the size of the button.
  • Alignment: Buttons to align the button (left, center, right).
Modal Box settings for configuring trigger type, button text, icon, button size, and alignment in Gutenberg.
Gutenberg Modal Box Block – Button Trigger Settings
  • Trigger: Dropdown to select the type of trigger as Image.
  • Image: Image selector to choose and upload an image that will act as the trigger for Gutenberg Modal Box.
  • Alignment: Buttons to align the image trigger (left, center, right).
Modal Box settings in Gutenberg block for configuring the trigger type as an image, with options to upload an image and set alignment.
Gutenberg Modal Box Block – Image Trigger Settings
  • Trigger: Dropdown to select the type of trigger as Text.
  • Text: Input field to specify the text that will act as the trigger for the modal box.
  • Alignment: Buttons to align the text trigger (left, center, right).
Modal Box settings in Gutenberg block for configuring the trigger type as text, with options to input text and set alignment.
Gutenberg Modal Box Block – Text Trigger Settings
  • Trigger: Dropdown to select the type of trigger (e.g., Lottie Animation).
  • Loop: Toggle to enable or disable the looping of the Lottie animation.
  • Reverse: Toggle to enable or disable reversing the Lottie animation.
  • Only Play on Hover: Toggle to play the Lottie animation only when hovered over.
  • Alignment: Buttons to align the Lottie animation trigger (left, center, right).
Modal Box settings in Gutenberg block for configuring the trigger type as Lottie Animation, with options to loop, reverse, play on hover, and set alignment.
Gutenberg Modal Box Block – Lottie Animation Trigger Settings
  • Trigger: Dropdown to select the type of trigger as On Page Load.
  • Delay in Popup Display (Sec): Slider and input field to set the delay time in seconds before the popup displays after the page loads.
Modal Box settings in Gutenberg block for configuring the trigger type as On Page Load, with an option to set the delay in popup display in seconds.
Gutenberg Modal Box Block – On Page Load Trigger Settings
  • Content
  • Animation: Dropdown to select the type of animation for the modal box.
  • Animation Duration: Select the duration of the animation to be fast, normal, or slow.
Modal Box content settings in Gutenberg block for configuring animation type and animation duration.
Gutenberg Modal Box Block – Content Animation Settings

Gutenberg Modal Box Block Style Settings
  • Upper Close Button
  • Width: Slider and input field to set the width of the close button.
  • Normal/Hover Color: Color picker to select the color of the close button.
  • Background Color: Color picker to select the background color of the close button.
  • Border: Options to set the border style for the close button, including type, width, and color.
Modal Box style settings in Gutenberg block for configuring the upper close button, including width, normal and hover color, background color, and border, etc...
Gutenberg Modal Box Block – Upper Close Button Style
  • Container Style
  • Width: Slider and input field to set the width of the container.
  • Max Height: Slider and input field to set the maximum height of the container, with units in PX, VH, or %.
  • Background Type: Options to select and customize the background type (solid color, gradient, image).
  • Outer Background: Options to select and customize the background type for the outer container.
  • Box Shadow: Settings to add and customize the box shadow effect.
  • Border: Options to set the border style for the container, including type, width, and color.
  • Border Radius: Input fields to set the border radius values for the top, right, bottom, and left sides, allowing for rounded corners.
  • Padding: Input fields to set padding values for the top, right, bottom, and left sides, with units in PX, EM, or %.
Container settings in Gutenberg block for configuring width, max height, background type, outer background, and box shadow, etc...
Gutenberg Modal Box Block – Container Style

Advanced Customization Options

To further enhance your customization capabilities, check out our detailed article on the Advanced Tab in Premium Blocks for Gutenberg Editor. This guide covers advanced settings such as Layout, Responsive, Entrance Animation, and additional customization options available for all blocks.

Conclusion

Gutenberg Modal Box Block Tutorial provides a comprehensive roadmap for integrating interactive modal boxes into your website. With its flexible trigger options and customizable content and styling, the Modal Box Block allows you to craft engaging CTAs that resonate with your audience. Whether you’re looking to showcase special offers, gather feedback, or simply captivate your visitors, this tutorial empowers you to create modal content that leaves a lasting impression. Visit the demo page for inspiration and start enhancing your website with dynamic modal boxes today.

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks