Infographics 2 Instructions

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

Each fact in the slideshow consists of a large statistic, followed by a subtitle and supporting text description. The visitor can navigate the slideshow using styled arrow buttons and pagination controls.

The following pixel dimensions are recommended for the images 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-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 adding a new Content Element to 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 Content Element displaying the infographic fact that should directly precede the new fact you want to add.
6. Click on the ‘Add Element’ button and choose a Content Element from the ‘Standard’ tab in the ‘Add Element’ window. 

With the Content Element in place, begin by adding the large statistic for the infographic fact:

1. Hover over the Content Element you have created previously and click on the ‘gear’ icon in the top-right corner of the element.
2. Click into the ‘Title’ field in the ‘Edit Content Element Settings’ window and add the content for your statistic. This should be a number, a percentage or a ratio with a maximum of 5 characters to ensure it fit effectively in the panel design.

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.
4. 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 large statistic:

1. Hover over the Content Element once again and click on the ‘Edit Content’ button.
2. Type a supporting text description for your statistic into 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 in the ‘Infographics’ panel, begin by updating the large statistic:

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 a number, a percentage or a ratio with a maximum of 5 characters to ensure it fit effectively in the panel design.
7. Now click on ‘+ Design’ at the bottom of the ‘Edit Content Element Settings’ window.
8. Click into the ‘Header Content’ content editor.
9. Update the short subtitle for the infographic fact.
10. Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

Now update the supporting text statement that will display below the large statistic:

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, making sure it stays inside the Container element powering this panel.

The ‘Infographics’ panel displays a large image in the background to create a visually engaging presentation. This image displays with a semi-transparent dark overlay in front of it to ensure the text is easy to read in the foreground of the panel. 

To update the background image, 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:
• 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).
• 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 2200px (wide) by 1497px (high). 

With the image uploaded, add it to the background 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 on ‘+ Design’ at the bottom of the ‘Edit Container
7. Click on the ‘Browse’ button under the ‘Background Image’ field.
8. Select the uploaded image in the ‘Select a Background Image’ window.
9. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

To remove an existing infographic fact from 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 Content Element displaying the infographic fact you want to remove and click on the ‘Delete’ icon button.
6. Confirm you want to delete the element in the ‘Delete Content Element’ validation window.