Differentiator Tutorial

There are two steps you need to take in order to add differentiators to your page. 

  1. Create 3 differentiator cards
  2. Add the differentiator section to your page

Create your differentiator cards

Go to Content > Add Content > Differentiator Card

Name your differentiator card using the following structure: 

  • Differentiator – [Department/Topic] – [Content Title]

This title is internal only and will be used for search purposes. This title is not to be confused with the title seen lower, which will be the external title which is what shows up on the live site.

Choose one of the following types of differentiators:

  • Value
    • Choose a value, typically a number
  • Image
    • Upload an image with the dimensions of 600px by 600 px
    • Keep in mind that your text will show up over this image, so don’t use an image with words or faces as these are distracting and make it harder to read the text
  • Icon
    • Choose an icon from the Fontawesome icon list.

Fill out the following:

  • Title
    • Try to keep under 52 characters (including spaces)
  • Title Link
    • This will link your title
  • Description
    • Try to keep under 167 characters (including spaces)

Add your URL Alias following this structure:

  • /[department/website]/differentiator/[topic]

You will need to keep this URL on hand if you want to make changes to your differentiator cards.

Repeat this until you have 3 differentiator cards. 

Add the differentiator section to your page

On your page, scroll down to the page components and click the arrow to expand the drop down menu. Select Add Differentiator Section

You can add a title and description to your section here:

Start typing the internal title you chose (Differentiator – [Department/Topic] – [Content Title]) in each of the differentiator cards boxes and the card should populate. This is why we want to be as specific as possible when naming the differentiator cards. This will populate all differentiators made – not just the ones you made.  

You can also add an additional link to the bottom of your differentiator section. If you do this, be sure to add specific directions for your link text and avoid vague text like “click here”

Once you have all three of your differentiator cards plugged in, scroll down and save your page.

Download this tutorial