Infographic Grid

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.

Color Scheme	Custom Classes Required
Light	bpa-infographic-2
Dark	bpa-infographic-2 dark

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 following section explains how to add a new Filtered Posts Grid to a page. To ensure the new feature displays correctly, please follow each set of steps in the order presented:

Make a Copy of the Example Filtered Posts Grid Layout

Begin by copying and pasting one of the three example Filtered Posts Grid layouts onto the desired page in your website: 

1. Go to the ’Pages’ panel.
2. Select the branch containing the example pages for this Best Practice Asset.
3. Locate the ‘Posts Filtered Grid’ subsection and select the page displaying the layout option you would like to use.
4. Hover over the Layout element containing the Filtered Post Grid features and click on the ‘Copy’ icon in the top-right corner.
5. Create or navigate to the page in the ’Pages’ panel that you want to add the Filtered Posts Grid to. This should have a full-width page layout without left or right banners.
6. Scroll down to the main content area:
   • If the page doesn’t have any existing 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 Filtered Posts Grid and click on the ‘Add Element’ button.
7. Click on the blue ‘Paste this Element’ button in the ‘New Element’ window. 

Link up the Post Tools Elements

With your new Filtered Posts Grid in place, link up the three Post Tools elements to cloned Post Grid so that they filter the content showing on this specific page.

First, link the Post Tools element displaying the keyword search:

1. Hover over the Post Tools element displaying the keyword search and click on the ‘gear’ icon in the top-right corner.
2. Click on ‘+ Link To’ in the ‘Edit Post Tools Element Settings’ window.
3. Select the element with the title ‘custom class: bpa-post-filter-1’ from the dropdown. 
4. Click on the ‘Save’ button at the bottom of the ‘Edit Post Tools Settings’ window.

Next, link the Post Tools element displaying the tag filter:

1. Hover over the Post Tools element displaying the tag filter and click on the ‘gear’ icon in the top-right corner. This is the element with the title ‘Filter by Grade Level’.
2. Click on ‘+ Link To’ in the ‘Edit Post Tools Element Settings’ window.
3. Select the element with the title ‘custom class: bpa-post-filter-1’ from the dropdown. 
4. Click on the ‘Save’ button at the bottom of the ‘Edit Post Tools Settings’ window.

Finally, link the Post Tools element displaying the category filter:

1. Hover over the Post Tools element displaying the category filter and click on the ‘gear’ icon in the top-right corner. This is the element with the title ‘Filter by Subject’.
2. Click on ‘+ Link To’ in the ‘Edit Post Tools Element Settings’ window.
3. Select the element with the title ‘custom class: bpa-post-filter’ from the dropdown. 
4. Click on the ‘Save’ button at the bottom of the ‘Edit Post Tools Settings’ window.

Once all Post Tools elements have been linked up, the options in the tag and category filters will display automatically based on the tags and categories applied to the posts in the selected Posts Grid.

Tip: If you don’t wish to include all three filters in the Posts Filtered Grid you can optionally delete the Post Tools elements that are not required. Please note that this may result in extra white space within the layout of the feature. 

Configure the Posts on Display in the Post Grid

By default, the Posts Grid is set to display all posts from the ‘Posts Filter’ board. This contains a set of example posts to demonstrate the functionality of this Best Practice Asset. 

You can optionally update the posts in this board to show the desired content, or change the settings of the Post Grid to display posts from a different board. 

To update the Posts Grid to display posts from a different board:

1. Hover over the Post element showing the Post Grid and click on the ‘gear’ icon in the top-right corner.
2. Click on ‘+ Content Filters’ within the ‘Grid’ tab at the top of the ‘Edit Post Element Settings’ window.
3. Click on the ‘Select Board’ button and choose one or more boards that you want to feed into the Posts Grid.

Important: All posts set to display in the Post Grid must follow the content requirements for this Best Practice Asset. Please refer to the ‘Add a New Post to the Post Grid’ section in these instructions for further guidance on this.

Optionally update the Title of the Tag Filter

1. Hover over the Post Tools element displaying the tag filter and click on the ‘gear’ icon in the top-right corner. This is the element with the title ‘Filter by Grade Level’ in the example layout.
2. Click into the ‘Title’ field in the ‘Edit Post Tools Element Settings’ window and update the title text.
3. Click the ‘Save’ button at the bottom of the ‘Edit Post Tools Element Settings’ window.

Optionally update the Title of the Category Filter

1. Hover over the Post Tools element displaying the Category Filter and click on the ‘gear’ icon in the top-right corner. This is the element with the title ‘Filter by Subject’ in the example layout.
2. Click into the ‘Title’ field in the ‘Edit Post Tools Element Settings’ window and update the title text.
3. Click the ‘Save’ button at the bottom of the ‘Edit Post Tools Element Settings’ window.

The following section explains how to add a new post to a Filtered Post Grid. To ensure the new post displays correctly, please follow each set of steps in the order presented:

Create a new Post and Populate the Required Content 

Begin by opening the Posts module and creating a new Post:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select ‘Posts’.
2. Click on the ‘Boards’ tab.
3. Select the board you want to update. By default, the board set to display in the Posts Filtered Grid has the title ‘Posts Filter’.
4. Click on the ‘Create Post’ button at the top right of the Board interface.
5. Click into the ‘Title’ field and add a short title for your post.
6. Click into the ‘Body Content’ content editor and add the content for your post. This will display in a pop-up when the visitor clicks on the post. Alternatively, you can click on the ‘External Redirect URL’ tab and link the post to a different webpage.
7. Click on the ‘Summary’ panel and type a short sentence describing the post into the content editor (this should have a maximum of 10 words).

Note: If the summary text is too long to fit within the available space on the page, it will be shortened automatically and an ellipsis will display after the final word to indicate that some of the text has been omitted. 

Assign at least one Category and one Tag

For the filtering functionality to work correctly in the Posts Filtered Grid, every post must have at least one category and one tag assigned to it. These determine if the post should display in Post Grid when the visitor selects an option in the category or tag filters.

With the ‘New Post’ interface still open in Composer, assign your categories and tags:

1. Select the ‘Category & Tags’ panel in the ‘New Post’ interface.
2. Choose one or more categories from the choices on display. If you want to add a new category, click on the ‘Manage Categories’ button and create one in the ‘Manage Categories’ window.
3. Click into the ‘Tags’ field and start typing the title of the tag. If the tag already exists on the website, it will display in a drop-down below the field as you type. Click on this in the dropdown to auto-populate the tag name.

Note: You can apply multiple categories and tags to an individual post.

Optionally Add an Icon Above the Post Title

With the ‘New Post’ interface still open in Composer, add an icon from the Finalsite Icon Library above the post title:

1. Select the ‘Additional Settings’ panel in the post editing interface.
2. Click into the ‘Custom Class’ field and type in the word ‘icon’.
3. Press the space key.
4. Find an icon from the Finalsite Icon Library and type in its name. This should be entered in lowercase letters (for example, ‘Bar-Graph’ should be entered as ‘bar-graph’).

Note: To display correctly, the updated custom class field should include the word ‘icon’ followed by a space and then the icon name (for example, ‘icon bar-graph’).

Optionally insert a Background Image

To insert a background image you will first need to upload it to the Resources module. 

This requires leaving the Post module, so it is important to save your new post before proceeding. Please refer to the section on how to ‘Save and Publish the Post’ in these instructions for further guidance on this.

Once your post has been saved, navigate to the Resources module and upload the image:

1. Click on Resources in Composer’s left navigation.
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 to upload the new image.
6. Once the upload is complete, click into the ‘Title’ field in the ‘Edit Resource Details’ window and add a title for your image (this title is for internal use and will not display in the post).
7. Click into the ‘Alt Text’ field and add a short description explaining the contents of the image for visitors who are unable to see it.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The recommended size for the post background image is 800px (wide) by 557px (high). 

With the file uploaded, return to the Post module and add the image as the post thumbnail:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
2. Click on the ‘Boards’ tab.
3. Open the board containing the post you want to update and select the post.
4. Open the ‘Thumbnail & Resource’ panel and click on the ‘Browse’ button.
5. Select the image you have previously uploaded.
6. Click on the ‘Update’ button at the bottom right of the Post interface.

Save and Publish the Post

The final step with all of the post content configured is to save and publish the new post:

1. Click on the ‘Save’ button at the bottom right of the Post interface.
2. Click on ‘Yes’ in the ‘Publish Now’ window if the post is ready and you want to put it live immediately. Click on ‘No’ if you want to save the post as a draft and manually publish it at a later time.

Note: New posts in the Filtered Posts Grid display in alphabetical order by default. This can optionally be changed so that they display in date order by accessing the element settings of the main Post element. The order settings are located in the ‘Formatting’ section of the ‘Edit Post Element Settings’ window.

 

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.