BPA - Infographics

The ‘Infographics 2’ Best Practice Asset displays a visually-engaging grid of 8 infographic facts to promote your school’s differentiators. Each fact consists of a bold numerical statistic, a supporting text statement and an icon from the Finalsite icon library.

The grid is configured as a Container element with an individual Content Element for each fact inside it. It can be customized to display with a light or dark color scheme.

Important: This Best Practice Asset can be added to multiple pages on your website, but must always be added to a full-width page layout without left or right banners.

The following instructions explain how to add a new ‘Infographics 2’ Grid to a page in your website. Please follow each set of steps in the order presented:

Make a Copy of the Example ‘Infographics 2’ Grid

As part of the setup process for this Best Practice Asset, Finalsite has added two examples of the ‘Infographics 2’ grid to your website (one in each color scheme). Begin by copying and pasting one of these example layouts onto the desired page in your website: 

1. Go to the ’Pages’ panel.
2. Select the branch containing the example page for this Best Practice Asset. This is normally the ‘Production’ or ‘BPA’ branch.
3. Select the ‘Infographics 2’ page. This includes an example of the ‘Infographics 2’ grid in both color schemes.
4. Hover over the Container element displaying the ‘Infographics 2’ grid you want to use and click on the ‘Copy’ icon in the top-right corner.
5. Go to the ‘Pages’ panel and navigate to the desired page for your new Infographics grid. This should have a full-width layout without left or right banners. 
6. Scroll down to the main content area:
   • If the page doesn’t have any content, hover over the bottom of the main content area and click on the ‘Add Element’ button
   • If the page has existing content, hover over the element that should directly precede the ‘Infographics 2’ grid and click on the ‘Add Element’ button.
7. Click on the blue ‘Paste this Element’ button in the ‘New Element’ window.

Update the Title of the Grid

With the new ‘Infographics 2’ grid in place, update its title:

1. Hover over the Container element displaying the grid and click on the ‘gear’ icon in the top-right corner.
2. Click into the ‘Title’ field in the ‘Container Element Settings’ window and type in a new title. If a title is not required, click on the blue toggle to the right of the field to hide it.
3. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

The ‘Infographics 2’ grid can display with a light or dark color scheme. This can be changed at any time through updating the settings of the Container element displaying the feature:

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the ‘Infographics 2’ grid you want to update.
3. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
4. Refresh the page in your web browser.
5. Hover over the Container element displaying the grid and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Design’ in the ‘Edit Content Element Settings’ window.
7. Click into the ‘Custom Class’ field and type the custom class or classes outlined in the table below to apply the desired color style, making sure to include a space between the two classes if you apply the dark color style.
8. Click on the ‘Save button’ at the bottom of the ‘Edit Content Element Settings’ window.

The ‘Infographics 2’ Grid supports 8 infographic facts. Each fact is configured as an individual Content Element with editable text and can show any icon from the Finalsite icon library.

To update an infographic fact, begin by updating the large numerical statistic:

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the ‘Infographics 2’ grid you want to update.
3. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
4. Refresh the page in your web browser.
5. Scroll down to the ‘Infographics 2’ grid.
6. Hover over the infographic fact you want to update and click on the ‘gear’ icon in the top-right corner of the element.
7. Click into the ‘Title’ field in the ‘Edit Content Element Settings’ window and update the title text (This should be a maximum of 4 characters).

With the ‘Content Element Settings’ window still open, update the icon:

1. Click into the ‘Custom Class’ field at the top of the ‘+ Design’ section. The class name added to this field determines the icon that displays.
2. Delete the current text on display.
3. Type in ‘icon-’ followed by the name of a new icon from the Finalsite Icon Library. The icon name should be entered in lowercase letters with a hyphen between each word (for example, ‘Bar Graph’ should be entered as ‘icon-bar-graph’).
4. Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

Finally, update the supporting text below the large numerical statistic:

1. Hover over the Content element displaying the infographic fact once again and click on the ‘Edit Content’ button.
2. Update the supporting text statement.
3. Click on the ‘Save’ button at the bottom right of the content editor.

Tip: There is no maximum character limit for the supporting text statement, but we recommend restricting this to one short sentence and maintaining a similar length across each fact so that they display consistently across the grid as a whole.

The order of the facts in the ‘Infographics 2’ grid is determined by the order of the individual Content elements inside of it.

To reorder the infographic facts:

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the ‘Infographics 2’ grid you want to update
3. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
4. Refresh the page in your web browser.
5. Scroll to the ‘Infographics 2’ grid.
6. Hover over the Content element displaying the infographic fact you want to move and click down on the ‘Move’ icon 
7. Drag and drop the image button into the desired new position, making sure to keep the Content element you are moving inside the Container element.

The order of the facts in the ‘Infographics 2’ grid is determined by the order of the individual Content elements inside of it.

To reorder the infographic facts:

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the ‘Infographics 2’ grid you want to update
3. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
4. Refresh the page in your web browser.
5. Scroll to the ‘Infographics 2’ grid.
6. Hover over the Content element displaying the infographic fact you want to move and click down on the ‘Move’ icon 
7. Drag and drop the image button into the desired new position, making sure to keep the Content element you are moving inside the Container element.