CTA banner example

CTA Banner Title

Description or teaser for this particular CTA banner.

Qualtrics Form

What is a CTA banner?

A CTA Banner is a stylized image and button. The CTA Banner is used to encourage web users to fill out a Qualtrics form or access a Matterport interactive map.

How to add a CTA banner

  1. Click the edit link at the top of the page 

    Example of selecting the edit button on a page
  2. Move your cursor where you want to place the component. (Add a section if needed). 
  3. Click the plus icon.

    Example of the plus icon with a red square around the icon
  4. Select CTA banner from the menu

    Example of the choose a dropdown menu with CTA  Banner selected

     

Content 

  1. Add your Title.
    Note: Title field text is limited to 70 characters.
  2. Add your Teaser text.
    Note: Teaser text is limited to 300 characters

    Example of the CTA Banner Title and Teaser fields with sample text
  3. Add your external link (Required).
    Note: The URL must start with the following domains https://my.matterport.com/ or https://uclahs.az1.qualtrics.com/
  4. Add the Button text (Required).
    Note: Button text is limited to 45 characters.

    Example of the CTA Banner URL and link text fields

Styles 

  1. Toggle to the styles tab. 

    Example of the Styles option selected
  2. In the dropdown that asks "Are you adding the banner in a narrow column?", select Yes when you are placing the component in a 2 column or smaller section.

    Example of the dropdown menu is you are adding the banner in a narrow column in the CTA Banner component
  3. Select the amount of additional space you would like above the component. 
  4. Select the amount of additional space you would like below the component. 
    Note: By default, there is no space below a component.

    Example of the top and bottom margin drop-down section with a red box around it

Save

  1. Click Save.
  2. Scroll to the top of the page and click Save.

    An example of how to save both the component and the page. The save buttons for both are outlined in red to emphasize the action.
  3. Click the Done button beside the save button.
    Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.

    Example: of the Done button outlined

Style options 

CTA Banner Title

Description or teaser for this particular CTA banner.

Qualtrics Form

CTA Banner Title

Description or teaser for this particular CTA banner.

Qualtrics Form