Infographics

The ‘Infographics 1’ Best Practice Asset displays a visually-engaging panel of infographic facts to promote your school’s differentiators. Each fact takes the form of a card with a bold numerical statistic, a supporting text statement and an icon from the Finalsite icon library.

The panel is configured as a Container element with an individual Content Element for each fact inside it. It can support any number of facts with 4 on show by default and will automatically display as a slideshow if they can’t all fit on screen at once. The panel can also 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 1’ panel to a page in your website. Please follow each set of steps in the order presented:

Make a Copy of the Example ‘Infographics 1’ Panel

As part of the setup process for this Best Practice Asset, Finalsite has added two examples of the ‘Infographics 1’ panel 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 1’ page. This includes an example of the Infographics panel in both color schemes.
4. Hover over the Container element displaying the ‘Infographics 1’ panel 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 panel. 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 1’ panel 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 Panel

With the new ‘Infographics 1’ panel in place, update its title:

1. Hover over the Container element displaying the panel 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 1’ panel 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 1’ panel 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 panel 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 1’ Panel 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 1’ panel 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 1’ panel.
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 on show:

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 panel as a whole.

The order of the facts in the ‘Infographics 1’ panel 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 1’ panel 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 1’ panel.
6. Hover over the Content element displaying the infographic fact you want to move and click down on the ‘Move’ icon. 

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.

Whilst making updates to an Infographics panel, the elements will display in their default Composer appearance to make them easier to edit.

To preview how your updated Infographics panel will look with their styled appearance:

1. Make sure you have saved any updates to the elements you have been working on.
2. Turn off the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.

To publish the updates on the live website, click on the ‘Publish’ button in the bar at the bottom of the page interface and select from the options in the ‘Publish Page’ window to publish the page now or schedule the page to publish later.

Note: If you do not have the administration rights to publish the page, you can request the page to be published instead. This will notify a specified administrator who is then asked to approve or deny the publish request.