Infographics 3 Instructions

The ‘Infographics’ panel displays a visually-engaging slideshow of infographic facts to promote your school’s differentiators. It is powered by a Container element with an individual Content Element for each fact inside it.

Each fact in the slideshow consists of large statistic, a subtitle, a supporting text description and an icon from the Finalsite icon library.

To update the title of the ‘Infographics’ panel:

1. Go to the ’Pages’ panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Infographics’ panel.
5. Hover over the Container element displaying the panel title and click on the ‘gear’ icon in the top-right corner.
6. Click into the ‘Title’ field in the ‘Edit Container Element Settings’ window.
7. Update the text or click on the blue toggle to the right of the ‘Title’ field to hide the element title.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

To update the ‘View All Facts’ link below the panel title:

1. Go to the Pages panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Infographics’ panel.
5. Hover over the Container element and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Design’ at the bottom of the ‘Edit Container Element Settings’ window.
7. Click into the ‘Header Content’ content editor
8. Update the existing link text, making sure not to remove the link applied to it.
9. Right-click on the link and choose ‘Edit Link’ from the action menu.
10. Select a link type from the top of the ‘Link’ properties window.
11. Update the link settings and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens a page on an external website.
12. Make sure the ‘button-arrow-on-dark’ class is still applied in the ‘Class’ field.
13. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
14. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

To add an infographic fact to the slideshow, begin by choosing an icon for it:

1. Go to the ‘Pages’ panel.
2. Navigate to the ‘Icon for Panels’ page in your website’s ‘Font Icon’ branch
3. Choose an icon from the library available on this page
4. Make a note of the custom class provided.

With your new icon selected, begin by adding a title for the infographic fact:

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

With the 'Content Element Settings' window still open, next add a subtitle for the infographic fact:

1. Click on ‘+ Design’ at the bottom of the ‘Edit Content Element Settings’ window.
2. Click into the ‘Header Content’ content editor.
3. Type in a short subtitle for the infographic fact.

Next, apply your chosen icon:

1. Click into the ‘Custom Class’ field within the '+ Design' section and delete the current text on display.
2. Type in the custom class that you noted earlier for your chosen icon. Please follow the exact format specified with all characters in lowercase with a hyphen between words (for example, ‘icon-apple’).
3. Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

Finally, add the supporting text statement that will display below the infographic title:

1. Hover over the Content element once again and click on the ‘Edit Content’ button.
2. Update the supporting text statement in the content editor. We recommend restricting this to one short sentence and maintaining a similar length across each fact so that they display consistently across the grid.
3. Click on the ‘Save’ button at the bottom right of the content editor.

To update an existing infographic fact, begin by choosing a new icon for it:

1. Go to the ‘Pages’ panel.
2. Navigate to the ‘Icon for Panels’ page in your website’s ‘Font Icon’ branch
3. Choose an icon from the library available on this page
4. Make a note of the custom class provided.

With your new icon selected, begin by updating the title for your chosen infographic fact:

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

With the 'Content Element Settings' window still open, next update the subtitle for the infographic fact:

1. Click on ‘+ Design’ at the bottom of the ‘Edit Content Element Settings’ window.
2. Click into the ‘Header Content’ content editor.
3. Update the short subtitle for the infographic fact.

Next, apply your chosen icon:

1. Click into the ‘Custom Class’ field in the '+ Design' section and delete the current text on display.
2. Type in the custom class that you noted earlier for your chosen icon. Please follow the exact format specified with all characters in lowercase with a hyphen between words (for example, ‘icon-apple’).
3. Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

Finally, update the supporting text that displays below the infographic title:

1. Hover over the Content element once again and click on the ‘Edit Content’ button.
2. Update the supporting text statement in the content editor. We recommend restricting this to one short sentence and maintaining a similar length across each fact so that they display consistently across the grid.
3. Click on the ‘Save’ button at the bottom right of the content editor.

The order of the infographic facts in the slideshow is determined by the order of the individual Content Elements inside the Container element that powers this panel.

To reorder the infographic facts:

1. Go to the ’Pages’ panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the Infographics panel.
5. Hover over the Content Element displaying the infographic fact you want to move and click down on the ‘Move’ icon.
6. Drag and drop the infographic fact into the desired new position, making sure it stays inside the Container element powering this panel.

To remove an existing infographic fact from the slideshow:

1. Go to the Pages panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Infographics’ panel.
5. Hover over the Content Element displaying the infographic fact you want to remove and click on the ‘Delete’ icon button.
6. Confirm you want to delete the page in the ‘Delete Content Element’ validation window.