Promote your website’s interactivity with our Gutenberg Modal Popup 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.
Once you’ve enabled Premium Blocks, the beginning is effortless just add Premium Modal Popup Block to your Gutenberg editor. From there, you can easily customize its inner containers.
Gutenberg Modal Popup Block General Settings
Gutenberg Modal Popup Block Support Inner Blocks. You have the option to add more fields, including various types such as:
If you need to preview more details to your visitors, you can easily add extra fields to the modal popup. Just click on the “+” icon and pick the type of field you want to include.
Gutenberg Modal Popup Block Layout Settings
Button 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).
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.
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 %.
Gutenberg Modal Box Block – Container Style
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.
