Creating an icon grid

An icon grid is often added to a site’s homepage or within a leading section in the main menu. It consists of icons and subheaders that are links out to significant internal and external content. An icon grid is a useful way to highlight essential or popular content as well as add an engaging design pattern to your design aesthetic.

There are three parts to adding an icon grid, first you create the promotions, then you add the promotions to a list and then you add the static content widget to a region in your section.

As a section manager or webmaster…

Part 1: Create a promotion

  1. Go to ‘Create’ icon in the workbar and select ‘Promotion’ in the dropdown menu
  2. Add title, body copy (brief explanation), and relate to a section
  3. Critically, add your image and crop to an aspect ratio of 1:1
  4. Select ‘Apply Crop’
  5. Critically also, add link internal or external URL to ‘Add link’ field
  6. Change Workflow State to Published
  7. Add ‘Owner’
  8. Save

Repeat this process until you have all of your icons added that you want to appear in your grid.

Part 2: Create a list

  1. Go to ‘Create’ icon in the workbar and select ‘Promotion’ in the dropdown menu
  2. Add title, body copy (brief explanation), and relate to a section
  3. Critically, with ‘Content’ selected, search for and select each promotion you added in the order you want them to appear
  4. If you want a different title to appear beneath each icon, add title in ‘Title (optional)’
  5. Repeat 3 and 4 until you have added all of your promotions
  6. Change Workflow State to Published
  7. Save

Part 3: Add list widget to section

  1. Go to the section you want the icon grid to appear
  2. Select ‘IN PLACE EDITOR’
  3. Select ‘CUSTOMISE PAGE’
  4. In the appropriate region, select ‘Add widget’ icon
  5. Search for and select ‘List widget’
  6. In widget settings, override title with nothing
  7. Change items in row to 3 instead of 2
  8. In ‘Enter list title’ field, search for and select the list of icons (promotions)
  9. In ‘Styles’ tab, select ‘Grid style’
  10. Ignore ‘Targeting’ if you want everyone to see the icon grid
  11. Select ‘Finish’
  12. Select ‘Show preview’ to review that the icon grid is working as expected
  13. Save

 

0 Comments

Leave a Reply