Infographics 5 Instructions

The ‘Infographics’ Panel displays a visually-engaging grid of infographic facts interspersed with emotionally-engaging photos to showcase the key differentiators of your school or district. It is powered by the following elements:

• A single Container element displaying a title area and housing all panel elements.
• Four Content Elements, each displaying a tile with an individual fact. Each fact consists of a bold numerical statistic and a short supporting test statement. The background color of the tiles alternate between the website’s primary color and white.
• Four Resource elements, each displaying a single image from Resources.

The elements in this panel are configured with the following settings:

Container Element

Content Elements

Resource Elements

Important: When updating the elements in the ‘Infographics’ panel, please only update the settings recommended across these instructions. All other settings have been configured to ensure the panel displays with the correct presentation and functionality.

The following pixel dimensions are recommended for the images and videos uploaded to the Resources module for this panel. Following these guidelines will help you to achieve an ideal balance of visual quality and loading speed for your content:

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’ 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 update an infographic fact, begin by updating the title for it:

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.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

With the new title saved, now update the supporting text statement that displays below it:

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 ‘Infographics’ panel is determined by the order of the individual Content Elements inside the Container element that powers this panel.

To reorder an 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 move and click down on the ‘Move’ icon.
6. Drag and drop the infographic fact into the desired new position within the Container element powering this panel, making sure that each infographic fact continues to be separated by a Resource element displaying an image.

To update an image within the grid of infographics, begin by uploading a new image:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Resources’ tab.
3. Create or select an existing folder for your image in the ‘Public’ directory 
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the upload options available and upload the new image.
6. Once the upload is complete, update the following image properties in the ‘Edit Resource Details’ window:
1. Click into the ‘Title’ field and add a short title for your image (this is for internal use and will not be seen by the visitor).
2. Click into the ‘Alt Text’ field and add a short description explaining the contents of the image. This is used by screen reading software to describe the image for visitors who are unable to see it.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The recommended size for the image in the background of the ‘Infographics’ panel is 800px (wide) by 662px (high). 

With the image uploaded, add it to one of the image tiles within the Grid of infogrpahics:

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 Resource element displaying the image you want to update.
6. With the ‘Single’ tab selected in the ‘Resource Element Settings’ window, click on the ‘Browse’ button below the ‘Title’ field.
7. Select the image uploaded previously in the ‘Select a Resource’ window.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

The order of the images within the grid of Infographics is determined by the order of the individual Resource elements inside the Container element that powers this panel.

To reorder an image:

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 Resource element displaying the imageyou want to move and click down on the ‘Move’ icon.
6. Drag and drop the image into the desired new position within the Container element powering this panel, making sure that each image continues to be separated by a Content Element displaying an infographic fact.