Build Fifty-Fifty

Page Content

How to Use the Fifty-Fifty Content Type

The fifty-fifty content type is used to display prominent information on a page alongside an image, with the option to add a button or "arrow" links. This content type is quite versatile and offers a variety of formats and background colors. In this module, you will learn how to add a fifty-fifty content type to a page.

Learning objectives

  • Understand the purpose of the fifty-fifty content type
  • Learn how to create and format fifty-fifty sections, including displaying text, images, buttons, quotes, and videos

Instructions

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

How to add a fifty-fifty content type

  1. Click the Add Content button.
  2. Select Fifty-Fifty from the list of content types.
  3. The content elements you use depend largely on how you'd like the fifty-fifty to look on the page. At a minimum, use the following content elements:
    • Name: Add descriptive name of content type to be used within T4 Site Structure.
    • Background color: Select a background color. Options include black, blue, gray, light gray, teal, white, and yellow.
    • Full bleed: Select Yes to expand the fifty-fifty to touch the outer margins of the page. Leave blank to add white space between the edge of the fifty-fifty and the edge of the page.
    • Media left/right: Select if you'd like the image to appear on the left or right side of the fifty-fifty.
    • Text alignment: Select if you'd like the text to be center, left, or right aligned.
    • Image: Click Select Media to choose an image from the T4 Media Library. This content type uses the CDN PXL, so you do not need to resize the image prior to uploading it to the T4 Media Library.
    • Heading: Optional, used to add bold heading text.
    • Sub Heading: Optional, used to add a subheading.
    • Description: Optional, used to add a short description.
    • Follow the additional content element instructions by the examples below to match the layout and design of the example.
  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.

Best practices

  • Ensure the text and image are balanced to avoid overwhelming one side of the layout
  • Use this content type to highlight key information
  • Include buttons or "arrow" links only when they are essential to the user experience
  • Make sure text, images, and buttons are aligned in a visually appealing way; consistent spacing between elements ensures a cohesive look

Common issues and troubleshooting

  • Images may be displayed differently on different browsers
  • Sometimes the size of the text will limit image height, sometimes image height will be preserved and there will be extra height on the description to match
  • If you add multiple media types (image, video, quote), the content type will attempt to incorporate them all
  • At certain screen sizes, Internet Explorer images will start to be distorted, due to the "object-fit" property not being supported
  • All quotes currently show up as links

Additional resources

You should now be able to effectively create and configure the fifty-fifty content type to display text, images, quotes, videos, and buttons in an organized and visually consistent manner.

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.

Due to the versatility of this content type, there are several examples provided below. Click on the accordion under the example to review the specific content elements needed to achieve that layout. 

Example fifty-fifty with image and arrow links

Fifty-Fifty Links with button

Content elements

  • Name: Add descriptive name of content type to be used within T4 Site Structure.
  • Background color: Select desired background color - this example shows white.
  • Full bleed: Select "Yes"
  • Media left/right: Select "Left"
  • Text alignment: Select "Left"
  • Image: Click "Select media" to choose an image from the T4 Media Library. The image must be resized to 720x480.
  • Add desired text for Heading, Sub Heading, and Description.
  • Do not fill in content elements for Quote/Name/Title, Research interests, YouTube/Brightcove Video Embed, CTA text, or CTA link (internal or external).
  • Links:
    1. Add a bulleted list.
    2. Next to each bullet, add the text you'd like to display on the arrow link. 
    3. Highlight all of the text next to one bullet point.
    4. Click on the insert/edit link icon. 
    5. Use only one of the following:
      • Insert section link: Click then navigate to the page you'd like to link to within college.mayo.edu.
      • Insert content link: Click then navigate to a page within college.mayo.edu. Select the content type on that page that contains the content that you'd like to link to.
      • Link to external site: Click and paste the URL to an external website (any webpage that is not part of college.mayo.edu, including other Mayo Clinic websites).
    6. Repeat steps 3-5 for all bullet points/arrow links. 
  • White border on Image: Optional, selected "yes" for this example.
  • Leave remaining content elements blank.

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.

Example fifty-fifty with image and button link

Fifty-Fifty with Button

Content elements

  • Name: Add descriptive name of content type to be used within T4 Site Structure.
  • Background color: Select desired background color - this example shows gray.
  • Full bleed: Select "Yes"
  • Media left/right: Select "Left"
  • Text alignment: Select "Left"
  • Image: Click "Select media" to choose an image from the T4 Media Library. The image must be resized to 720x480.
  • Add desired text for Heading, Sub Heading, and Description.
  • Do not fill in content elements for Quote/Name/Title, Research interests, YouTube/Brightcove Video Embed.
  • CTA text: Add desired text (examples: "Learn more" "Contact us" "Apply now")
  • Use only one of the following:
    • Link (internal): Use to link to a different section or a specific content type within college.mayo.edu
    • Link (external): Paste the URL to an external website (any webpage that is not part of college.mayo.edu, including other Mayo Clinic websites).
  • Links: Leave blank.
  • White border on Image: Optional, left blank for this example.
  • Leave remaining content elements blank.

Click the blue Save Changes button to save content as a draft, or press the arrow and select Save and Approve to save and publish updates.

Ready to enhance your content further?

Check out the next module.

Sidebar: Image/Content Block
menu
Close