Premium Modal Box Block for Gutenberg will help you to create Call to Action Buttons along with modal boxes that opens upon clicking on it. Modal Box Block will help you to insert text or Gutenblocks blocks as content.

Check Gutenberg Modal Box Block demo page from here.

---

---

Modal Box Gutenberg Block Layout Settings

Modal Content block consist of nested blocks.

Customize Modal Box block main settings like trigger and content.

---

Gutenberg Modal Box Block Trigger Options

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

Style modal box trigger, upper close button and container using a lot of customization options in responsive screens.

---

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

---