website logo
Login
⌘K
Sprocket Rocket Help Center
First Steps
Setup
HubSpot Permissions
Installing Sprocket Rocket
Adding a Custom Installation
Page Builder
Creating a Page
Saving a Layout
Using Custom Modules
Custom Theme Previews
Templates
Website Templates
Landing Page Templates
System Templates
Blog Templates
Modules
Installing Modules
Updating Modules
Creating Global Modules
Navigation
Hero
Footer
Columns
Tabs
Offers
Cards
Bling
Elements
Theme
Theme Styles
Global Site Header and Footer
Custom Fonts
Creating a child theme
Custom CSS
Users
Adding Users
FAQ
How can I change my page theme/template?
Can I upgrade my Sprocket Rocket Pro Theme to the new version?
Why are some modules on my Sprocket Rocket App locked?
How to customize a column size
What's the difference between Sprocket Rocket Pro and Sprocket Rocket Theme?
Do I need a HubSpot account?
jQuery version security issue
How to add users to your HubSpot Portal
Misc
Branding Setup
Marketplace Theme
Docs powered by archbee 

SR Modal

Module Overview - SR Modal

Available on:

  • Sprocket Rocket Free
  • Sprocket Rocket Pro

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

This can be used alongside CTA buttons.

Document image

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.

Document image

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.

Document image

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



Document image

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.

Document image

Updated 30 Dec 2022
Did this page help you?
Yes
No
UP NEXT
Theme Styles
Docs powered by archbee 
TABLE OF CONTENTS
Module Overview - SR Modal
Module Settings Walkthrough
Module Settings