Build Sidebar: Image/Content Block

Page Content

How to Use the Sidebar: Image/Content Block Content Type

The Sidebar: Image/Content Block content type allows you to add supportive information, along with optional blue call-to-action (CTA) buttons, into the sidebar of your webpage. This content type is intended for standard page layouts and is not compatible with full-width layouts. Use it to highlight secondary content that complements the main page material, such as related links, contact information, or quick facts.

Learning objectives

  • Understand the purpose of the sidebar content type and when to use it
  • Add and format sidebar content appropriately within a webpage

Instructions

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

How to add a sidebar content type

  1. Click the Add Content button.
  2. Select Sidebar: Image/Content Block from the list of content types.
  3. The content elements you use depend largely on how you'd like the sidebar to look on the page. At a minimum, use the following content elements:
    • Heading: This is the title of the CTA
    • Content: Optional, if wanted to add context
    • CTA link 1 text: This is the name of the link and will appear as CTA button text
    • CTA link 1 (internal): Select an internal website to link to on the CTA button
    • CTA link 1 (external): Only enter this if you are NOT entering an internal link
  4. After you've added the desired content elements, 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.

Tips for adding emails to sidebars

Put the contact information for programs in the Content field. If changing an email address, make sure that the link has updated to match text:

  • Highlight the text of the email address.
  • Select the Insert/edit link icon
  • Click Link to external site
  • The URL should list "mailto:" immediately preceding the email address (ie mailto:doe.john@mayo.edu)
  • The Text to display field should list just the email address (doe.john@mayo.edu)

The email addresses in the two fields must be the same, if they are not, it will look like the email has been updated but if clicked on, it will open an email to the wrong individual. 

Shows two versions of contact information content type side by side, one with a red box indicating incorrect and one with a green box indicating correct.

For an example of what this looks like to the end user, click on the hyperlink for the following email address: cold.stephanie@mayo.edu.

It appears to be Stephanie's email address, but you'll notice that, once opened, the Outlook email is actually addressed to Kim. Pay attention to formatting to stay consistent with commonly used sidebars across the website.

Best practices

  • Sidebar space is limited, so use short, scannable content that quickly communicates the message
  • Include only one or two clear call-to-action buttons. Too many can overwhelm users and dilute the message
  • Use action-oriented and descriptive button labels like “Apply Now,” “Request Info,” or “Contact Us"

Common issues and troubleshooting

  • The sidebar will not appear on full-width layouts

Additional resources

By now, you should feel confident using the Sidebar content type to share supporting information and highlight key actions. 

Explore the possibilities: Content type examples

Browse through the examples below to see how the type can be used in different scenarios and design choices.

Contact

Ben Daxon, M.D.
Program Director

Omar Elmadhoun, M.D., M.P.H.
Associate Program Director

Michelle Van Hee
Education Program Coordinator
Email: vanhee.michelle@mayo.edu

*Normally, this will display on the right side of the program page (example)

Ready to enhance your content further?

Check out the next module.

Resizing images
menu
Close