Icon Panel 4 Instructions

The ‘Icon’ panel displays a set of visually-engaging icon buttons linking to important pages and resources on your website headed by a panel title and a short text introduction.. Each icon button consists of a customizable icon that displays inside a circle with a supporting text label. The icon for each button can be selected from a library of predefined icons uploaded to your website.

This panel includes the option to display one or two grids of icon buttons with one grid on display by default. Each grkd is configured as an individual Navigation element, which can display up to 9 icon buttons powered by a dedicated branch within the ‘Pages’ panel. 

The grids of icon buttons are housed within a single Container element.

A title and short text introduction displays at the top of the ‘Icon’ panel. To change this content, begin by updating 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 ‘Icon’ 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.

With the ‘Edit Container Element Settings’ window still open, update the introduction text:

1. Scroll down to the ‘Header Content’ field and click into the content editor.
2. Update the text in the text area. We recommend adding a single paragraph with a maximum of 40 words to maintain consistency with the original design.
3. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

By default, the ‘Icon’ panel displays a single grid of up to 9 icon buttons. To add a second grid of icon buttons, begin by setting up a new branch of pages to power its content:

1. Go to the ’Pages’ panel
2. Hover over the domain name for the website where the ‘Icon’ panel is located.
3. Click on the three-dot icon and select ‘New Branch’ from the Action menu.
4. Type a short name for the branch into the ‘Branch Name’ field in the ‘New Branch’ window. This should describe the purpose of the grid of icon buttons.
5. Click on the ‘Save’ button at the bottom of the ‘New Branch’ window.

With the new branch in place, return to the ‘Icon’ panel on the homepage and make a copy of the first grid of icon buttons:

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 ‘Icon’ panel.
5. Hover over the Navigation element displaying the first grid of icon buttons and click on the ‘copy’ icon in the top-right corner.
6. Hover over the Navigation element again and click on the ‘Add Element’ button on display at the bottom of the element.
7. Click on the ‘Paste This Element’ button within the ‘Add Element’ window. This displays in blue at the bottom of the window once the element has been copied.

With the new grid of icon buttons in place, update the settings of the Navigation element to target the branch you created earlier:

1. Hover over the new Navigation element and click on the ‘gear’ icon in the top-right corner.
2. Click on the ‘Select Page’ button located directly below the ‘Starts’ field in the ‘Edit Navigation Element Settings’ window.
3. Select the new branch you created earlier.
4. Click on the ‘Save’ button at the bottom of the ‘Edit Navigation Element Settings’ window.

This completes the initial setup for your new grid of icon buttons. To populate the row with new icon buttons, please refer to the instructions in this section on adding an icon button.

To add a new icon button to the ‘Icon’ panel, begin by choosing an icon for it:

1. Open the Finalsite Icon Library webpage in your web browser.
2. Choose an icon from the library of options available and make a note of the name that displays directly below it.

Next, create a new page for the icon button:

1. Go to the ‘Pages’ panel.
2. Hover over the branch powering the grid of icons you want to update and click on the three-dot icon to the right of the branch name.
3. Select ‘New Page’ from the Action menu.
4. Click on the ‘Linked’ tab in the ‘New Page’ window.
5. Click into the ‘Page Name’ field and replace ‘New Page’ with a short title for the icon button.
6. Check the ‘Linked Page’ checkbox.
7. Setup a redirect link to the desired webpage:
   1. If the page you want to link the button to is part of your website, select ‘Internal Redirect’ and click the ‘Select Page’ button to select the page.
   2. If the page you want to link the button to is external to your website, select ‘External Redirect’ and type the full URL of the page into the ‘Redirect to this page’ field.
8. If the link redirect points to an external webpage, check the ‘Open in a new Window’ checkbox. This is recommended when setting up a link to an external website.
9. Click the ‘Save’ button in the ‘New Page’ window to create the page.

With the new page selected in the ‘Pages’ panel, complete the setup process by hiding the page from search engines and applying your chosen icon to it:

1. Click on the ‘gear’ icon in the bar at the bottom-right of the page interface.
2. Check the following checkboxes under the ‘General’ tab within the ‘Page Settings’ window to prevent the icon button page itself from displaying in search results:
   1. Hide from internal site search
   2. Hide from external search engines
3. Click into the ‘Custom Nav Class’ field towards the bottom of the ‘Page Settings’ window.
4. Type in ‘icon-’ followed by the name of the icon you have noted previously. Please enter all characters in lowercase with a hyphen between words (for example, ‘icon-bar-graph’).
5. Please Note: if you are adding a social media icon (Facebook, Instagram, etc) DO NOT add the prefix, 'icon-'. (for example: 'facebook')
6. Click the ‘Save’ button at the bottom of the ‘Page Settings’ window.
7. Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the new icon button will display in the ‘Icons’ panel automatically.

Important: Each grid of icon buttons in the ‘Icons’ panel supports a maximum of 9 buttons. Adding more than this may result in the panel displaying incorrectly.

To update an existing icon button in the 'Icons' panel, begin by choosing a new icon for it:

1. Open the Finalsite Icon Library webpage in your web browser.
2. Choose an icon from the library of options available and make a note of the name that displays directly below it.

With your new icon selected, update the title and link destination for your chosen icon button:

1. Go to the ‘Pages’ panel.
2. Open the branch powering the grid of icons you want to update and select the page representing the icon button you want to update.
3. Click on the ‘gear’ icon in the bar at the bottom of the page interface.
4. Click into the ‘Page Name’ field within the ‘General’ tab in the ‘Page Settings’ window and update the title for the icon button.
5. Now click on the ‘Linked’ tab at the top of the ‘Page Settings’ window.
6. Check the ‘Linked Page’ checkbox.
7. Setup a redirect link to the desired webpage:
   1. If the page you want to link the button to is part of your website, select ‘Internal Redirect’ and click the ‘Select Page’ button to choose the page.
   2. If the page you want to link the button to is external to your website, select ‘External Redirect’ and type the full URL of the page into the ‘Redirect to this page’ field.
8. If the link redirects to an external webpage, check the ‘Open in a new Window’ checkbox. This is a recommended best practice when linking to external websites.

With the ‘Page Settings’ window still open, apply your new icon:

1. Click into the ‘Custom Nav Class’ field towards the bottom of the ‘Page Settings’ window and delete the current custom class on display.
2. Type in ‘icon-’ followed by the name of the icon you have noted previously. Please enter all characters in lowercase with a hyphen between words (for example, ‘icon-bar-graph’).
3. Click the ‘Save’ button at the bottom of the ‘Page Settings’ window.
4. Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the updated icon button will display automatically.

The order of the icon buttons within each grid within the 'Icons' panel is determined by the order of the pages in the branch powering it within the 'Pages' panel.

To reorder an icon button:

1. Go to the ’Pages’ panel.
2. Open the branch powering the grid of icons you want to update.
3. Select the page representing the icon button you want to reorder.
4. Drag and drop the page into the desired new position within the ‘Font Icons’ branch.

Once a page has been moved, the icon buttons will display in the updated order automatically.

To remove an icon button from a grid of icon buttons in the 'Icons' panel, you can either delete the page representing (to remove it permanently) or set the page to be hidden from Navigation elements (in case you want to display it again in the future).

To delete the page representing the icon button:

1. Go to the Pages panel.
2. Open the branch powering the grid of icons you want to update 
3. Hover over the page that represents the icon button you want to remove.
4. Click on the three-dot icon and select ‘Delete’ from the Action menu.
5. Confirm you want to delete the page in the ‘Delete Page’ validation window.

To hide the page representing the icon button:

1. Go to the Pages panel.
2. Open the branch powering the grid of icons you want to update .
3. Select the page that represents the icon button you want to hide.
4. Click on the ‘gear’ icon in the bar at the bottom-right of the page interface.
5. Check the ‘Hide from navigation elements’ checkbox within the ‘General’ tab in the ‘Page Settings’ window.
6. Click the ‘Save’ button at the bottom of the ‘Page Settings’ window.
7. Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page representing the icon button has been published with these updated settings applied, the icon button will be removed from the ‘Icons’ panel automatically. 

Note: To display an icon button that has been hidden previously, follow the same set of steps above, but uncheck the ‘Hide from navigation elements’ checkbox during step 5.