Build Call to Action Bar

Page Content

How to Add a Studio Site - Call to Action Bar Content Type

The Studio Site - Call to Action Bar adds an attention-grabbing bar at the very top or very bottom of a webpage. It contains a short heading, description, and a button that can link to a variety of places. In this module, you will learn how to add a call to action bar to your page.

Learning objectives

  • Understand the purpose of the CTA bar content type
  • Learn how to use the CTA bar content type to draw attention to key actions

Instructions

From the T4 Site Structure, navigate to the page you are updating.

How to add a call to action bar content type

  1. Click the Add Content button.
  2. Select Studio Site - Call to Action Bar from the list of content types.
  3. Use the following content elements:
    • Name: Add descriptive name of content type to be used within T4 Site Structure.
    • Show below Hero Image/Video: Select Yes if you'd like the bar to be at the top of the page.  
    • Show above footer: Select Yes if you'd like the bar to be at the bottom of the page. 
    • Heading: Required, used to add bold heading text to the call to action bar. 
    • Description: Required, used to add a short sentence description about the call to action.
    • Button Text: Required, used to add the text that will display on the call to action button (ie, "Contact us" "Apply" "Enroll now")
    • Use only one of the following - 
      • Button Link (internal): Use only if linking to a page within your Studio Site. 
        • Add section link: Links to the top of a page within your Studio Site.
        • Add content link: The link anchors to a specific content type within a page on your Studio Site. 
      • Button Link (external): Paste URL of an external website (any webpage that is not part of your Studio Site, including other Mayo Clinic websites). 
      • Button Link (PDF): Click the Select Media button to have the call to action button link to a PDF that has been uploaded to the T4 Media Library. 
  4. Click the Save Changes button to save content as a draft, or press the arrow and select Save and Approve to save and publish updates.

Best practices

  • Use a clear, action-oriented heading and a short description that tells users exactly what they’ll get when they click the button
  • Reserve this content type for high-priority actions (e.g., registration, applications, key resources) to maintain its impact
  • To avoid visual noise and conflicting messages, only include a single CTA bar on a page
  • Position it at the very top or bottom of the page, depending on whether you want immediate visibility or to serve as a final prompt after the user scrolls

Common issues and troubleshooting

  • CTA bars can only be used on pages that use a full-width page layout

Additional resources

By now, you should feel confident using the CTA bar content type to guide users toward important next steps with your content that stands out on any page.

Explore the possibilities: Content type examples

An example of a CTA bar is pinned to the bottom of the page.

Ready to enhance your content further?

Check out the next module.

Social media
menu
Close

Heading Text

Example of a Studio Site - Call to Action Bar descriptive text.

Get started with a Studio Site