Gutenberg Modal Box Block Tutorial

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.

Modal Box Gutenberg Block Layout Settings

Configure your modal box’s layout with nested blocks for intricate content structures, alongside main settings for triggers and content.

Modal Content block consist of nested blocks.

Customize Modal Box block main settings like trigger and content.

Gutenberg Modal Box Block Trigger Options

Choose from various triggers such as buttons, images, text, Lottie animations, or page load to activate your modal box, with detailed customization for each.

1. Trigger: Select modal box trigger from button, image, text, Lottie animation or on page load.
2. Alignment: Align modal box trigger on left, center or right.

Button Trigger for Gutenberg Modal Box

1. Button text: Set text for modal box trigger button.
2. Icon: Enable and select icon from font awesome library and dashicon for modal box button.
   1. Icon Position: Set icon position on the before or after of button text.
3. Button Size: Select button size small, medium, large or block.

Image Trigger for Gutenberg Modal Box

• Set image to modal box trigger by uploading or selecting an image from media library.

Text Trigger for Gutenberg Modal Box

• Type text as modal box trigger.

Lottie Animation Trigger for Gutenberg Modal Box

You can upload Lottie animations or insert from URL.

1. Loop: Enable to loop lottie animation forever.
2. Reverse: Enable to play lottie animation backward.
3. Only Play on Hover: Enable to play lottie animation on mouseover.

Trigger Gutenberg Modal Box on Page Load

• Set value of delay before modal box appears after the page load.

Gutenberg Modal Box Block Content Options

1. Animation: Set entrance animation for modal box block.
2. Animation Duration: Set delay between clicking on the trigger and animation start.

Style Settings for Modal Box Gutenberg Block

Personalize your modal box’s appearance with extensive styling options for the trigger, upper close button, and container, ensuring responsiveness across devices.

Triger Style for Gutenberg Modal Box Block

Button Trigger for Gutenberg Modal Box

1. Icon Size
2. Icon Spacing
3. Typography
4. Color: Set modal text color on normal and hover.
5. Icon Color: Set icon modal color on normal and hover.
6. Background Color: Set modal text background color on normal and hover.
7. Border: Set modal text border on normal and hover.
8. Box Shadow
9. Padding

Image Trigger for Gutenberg Modal Box

1. Size
2. Border: Set modal Image border on normal and hover.
3. Box Shadow

Text Trigger for Gutenberg Modal Box

1. Typography
2. Color: Set modal text color on normal and hover.
3. Border: Set modal text border on normal and hover.
4. Text Shadow
5. Padding

Lottie Animation Trigger for Gutenberg Modal Box

1. Size
2. CSS Filters: Set modal Lottie CSS filter on normal and hover.

Upper Close Button Style for Gutenberg Modal Box Block

1. Width
2. Color: Set Upper close button color on normal and hover.
3. Background Color: Set Upper close button background color on normal and hover.
4. Border
5. Padding

Container Style for Gutenberg Modal Box Block

1. Width
2. Max Height
3. Background Type
4. Outer Background
5. Box Shadow
6. Border
7. Padding

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.