SR Modal

Module Overview - SR Modal

This module is the most common pop-up message that clients use nowadays.

This can be used alongside CTA buttons.



Module Settings Walkthrough

Styles

You can edit the following items within the Styles tab:

• Modal Width
• Background option: Color, Custom, Gradient
• Overlay Option: Color, Gradient
• Text color: auto, primary, secondary, tertiary, white, black, dark, light, success, info, warning, danger, custom
• Text Align: Left align, Center align, Right align, Justified
• Text Color: Primary, Secondary, Tertiary, White, Black, Dark, Light, Success, Info, Warning, Danger



Module Settings

For SR Modal, most settings are focused on Modal target, Image, Heading, Text, CTAs, and optional form.

Modal Target

On the SR Modal module, please input a unique label. You can do so by typing it into the Modal Target field.

Once you've created a unique label on your SR Modale module Modal Target, you will use this label and input it on a CTA button that you've set to Modal.

On the video walkthrough, you will notice we tried it out with SR Hero 01 module, but you can choose any module you wish the modal to be on.



Image, Header, and Content

After naming the module through the Modal Target, the first setting you see when editing SR Modal is for the image. You can upload any image you wish.

Afterwhich, you can edit the Header and Content. Here you can add as many headers as you want, designate its style and display size, and add rich text.



CTA Button

Your Modal can also have its own CTA button.

You can add as many CTA Buttons as you want.

You can edit the following:

CTA Type: Hubspot CTA, button, or modal. in most instances, we use button.

CTA Style: Primary, Secondary, Tertiary, White, Black, Dark, Light, Success, Info, Warning, Danger, Outline Primary, Outline Secondary, Outline Tertiary, Outline White, Outline Black, Outline Dark, Outline Light, Outline Success, Outline Info, Outline Warning, Outline Danger, Custom, None.

CTA Size: Small, Default, Large

Add Icon Option: Position: Left or Right





Form

The modal module can also include a form.

This one is optional, all you need to do is click on the form box, and edit its settings.