1. Home
  2. Knowledge Base
  3. Pro Block Tutorials
  4. Modal Block

Modal allows for a fully editable popup to be added to any page. Place any content you wish within the block for any layout you like.

Firstly, select the modal block and add it to your content:

Select Modal Block


Customize your modal link text:

Modal Link Text

Customize the content within your modal block:

Modal Content

Edit the appearance of your modal link:

Modal Link Styling

Customize the modal overlay:

Customize Modal Overlay

Configure your modal animation and position:

Modal Animation and Position

Adjust the width and height of your modal block:

Set Modal Size

Customize the appearance of the modal “close X.”

Adjust the Closing X

Configure the style of your modal box. Customize backgrounds and add borders:

Style Modal Box

Add a box shadow to give your modal added dimension:


Once you’re happy with the modal, view it on the front end to ensure it looks as intended:

View Modal

Was this article helpful?

Related Articles