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

Within the modal block settings, you can turn off the modal link and then create a custom link somewhere else on your page. You do this by going to link settings in the modal block and turning off the link.

Then right below you will see the input for “Custom Open ID” this is where you would add an id for your custom link. An example would be “customid”.

Next create an advanced button where you want to open this modal and set the link for the button to #customid, below in the button settings add the class “modal-trigger”.

Publish and that button will now open the modal.

Was this article helpful?

Related Articles