Skip to content

How to Add a New Navigation Card

  1. Log in to the Evolution manager

CMS login screen

  1. Click on the page you wish to add a new navigation card button to. Once you are in editing mode, you will see an Eye icon next to the page you are working on.

Screenshot of CMS side menu with a page in edit mode

  1. Find the block that contains the navigation cards by clicking the blue plus icon on the left side to open the block's content. 

screenshot of cms editor with open icon highlighted

For example, on the HROE home page, this block is labeled "HR Resources." You will see the following navigation card content inside.

screenshot of cms editor open to navigation card rows

  1. Click the plus icon on any existing navigation card to add a new blank row after it.

Screenshot of content section with the plus icon highlighted

  1. Change Content

On the existing card, open the source code editor by clicking the two arrows icon.

Screenshot of content section with the source code button highlighted

Copy all of the content here and click X or cancel.

Screenshot of source code highlighted

Scroll down to the new row you made, open the source code editor and paste the code.

Screenshot of code with important sections indicated by numbers

Make the following changes:

  1. Insert the link where the new card should go inside the quotation marks.
    1. If the new card is linking to another page in HRS, use the page ID in this format: [~#~]
    2. If the new card is linking to an external webpage, replace the ID with a standard link. Example: https://www.thesaurus.com/
    3. If the new card should link to a file or image, you will need to use the source path of the file or image. Example: assets/files/HumberHROE-OrgChart-061622.pdf
  2. In the H3 class, replace this text with the desired title of your new card.
  3. In the P class, replace this text with the desired description of your new card.

Click OK once you are finished.

  1. Copy Styling

To ensure that your new card button is the same size, you will need to copy the styling from an existing card.

screenshot of toolbar with sections highlighted

Make the following changes:

  1. On your new card, select the same column size as the old card from the dropdown menu.
  2. Highlight and copy the custom classes and paste them into the custom class field of your new card.
  1. When you have completed adding your new card, save the page.