Enhancements

To add an image button with an icon, begin by choosing an icon for it:

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

With your icon selected, navigate to the page that you want to add the image button to and setup the elements for your new button:

1. Add a Layout element to the main content area (2 or 3 columns)
2. Add a Content element to one of the columns.
3. Hover over the new Content element and click on the ‘gear’ icon in the top-right corner.
4. Type ‘Icon’ into the ‘Title’ field in the Element Settings window (making sure the blue toggle button is turned on)
5. Click on ‘+ Design’ in the towards the bottom of the Element Settings window
6. Click into the ‘Custom Class’ field and type in image-button followed by an empty space and the name of the icon you have noted previously. Please enter all characters in lowercase (for example, ‘backpack’).
7. With the Element Settings window still open, scroll to the ‘Background Image’ field and click on the ‘Browse’ button to select an image for the button from the Resources module.
8. Now scroll to the ‘Header Content’ field and click into the content editor.
9. Click into the content editor and type in a short title for the button
10. Now press the return key and type in a short supporting statement describing the button (we recommend a maximum of 6 words).
11. Highlight the button title your cursor (excluding the introduction statement) and click on the ‘Paragraph’ icon button in the content editor toolbar.
12. Select the ‘Heading 2’ formatting option in the Paragraph tool dropdown.
13. Click the ‘Save’ button at the bottom of the ‘Page Settings’ window.

With the title, image, icon and introduction configured, complete the setup of the image button by adding the content that will display when the visitor hovers over the button:

1. Hover over the new Content element once more, and click on the ‘Edit Content’ button.
2. Type in a short paragraph that provides further information (we recommend a maximum of 25 words).
3. Press the return key and optionally configure a link to display:
   1. Type in a word or short phrase for the link label.
   2. Highlight this label with your cursor.
   3. Click on the ‘Link’ icon button in the content editor toolbar.
   4. Choose ‘Add Link’ from the dropdown list
   5. Select a link type from the top of the ‘Link’ properties window.
   6. Configure the link settings and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens an external webpage.
   7. Click on the ‘Class’ dropdown and select ‘2022_arrow_link_style’ from the dropdown.
   8. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
4. Click the ‘Save’ button at the bottom of the content editor window.
5. Click the ‘Publish’ button at the bottom-right of the page interface.

With your new image button setup, repeat this process to setup image buttons in the other column (or columns) within the Layout element.

To add an image button with an icon, begin by choosing an icon for it:

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

With your icon selected, navigate to the page that you want to add the image button to and setup the elements for your new button:

1. Add a Layout element to the main content area (1 or 2 columns). If you are adding the image button to the narrow right sidebar, please skip this step.
2. Add a Content element to one of the columns in the Layout element. If you are adding an image button to the narrow sidebar, you can add this directly to the sidebar area.
3. Hover over the new Content element and click on the ‘gear’ icon in the top-right corner.
4. Type ‘Icon’ into the ‘Title’ field in the Element Settings window (making sure the blue toggle button is turned on)
5. Click on ‘+ Design’ in the towards the bottom of the Element Settings window.
6. Click into the ‘Custom Class’ field and type in image-button followed by an empty space and the name of the icon you have noted previously. Please enter all characters in lowercase (for example, ‘backpack’).
7. With the Element Settings window still open, scroll to the ‘Background Image’ field and click on the ‘Browse’ button to select an image for the button from the Resources module.
8. Now scroll to the ‘Header Content’ field and click into the content editor.
9. Click into the content editor and type in a short title for the button
10. Now press the return key and type in a short supporting statement describing the button (we recommend a maximum of 6 words).
11. Highlight the button title your cursor (excluding the introduction statement) and click on the ‘Paragraph’ icon button in the content editor toolbar.
12. Select the ‘Heading 2’ formatting option in the Paragraph tool dropdown.
13. Click the ‘Save’ button at the bottom of the ‘Page Settings’ window.

With the title, image, icon and introduction configured, complete the setup of the image button by adding the content that will display when the visitor hovers over the button:

1. Hover over the new Content element once more, and click on the ‘Edit Content’ button.
2. Type in a short paragraph that provides further information (we recommend a maximum of 25 words).
3. Press the return key and optionally configure a link to display:
   1. Type in a word or short phrase for the link label.
   2. Highlight this label with your cursor.
   3. Click on the ‘Link’ icon button in the content editor toolbar.
   4. Choose ‘Add Link’ from the dropdown list
   5. Select a link type from the top of the ‘Link’ properties window.
   6. Configure the link settings and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens an external webpage.
   7. Click on the ‘Class’ dropdown and select ‘2022_arrow_link_style’ from the dropdown.
   8. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
4. Click the ‘Save’ button at the bottom of the content editor window.
5. Click the ‘Publish’ button at the bottom-right of the page interface.

With your new image button setup, repeat this process to setup image buttons in any further columns if you populating a Layout element within the main content area.

Navigate to the page that you want to add the image button to and setup the elements for your new button:

1. Add a Layout element to the main content area (2 or 3 columns)
2. Add a Content element to one of the columns.
3. Hover over the new Content element and click on the ‘gear’ icon in the top-right corner.
4. Type a single number into the ‘Title’ field in the Element Settings window (making sure the blue toggle button is turned on). This will display as a large number to the left of the button label.
5. Click on ‘+ Design’ in the towards the bottom of the Element Settings window
6. Click into the ‘Custom Class’ field and type in following custom classes, making sure to add each class in lowercase letters with an empty space between them: image-button numbers
7. With the Element Settings window still open, scroll to the ‘Background Image’ field and click on the ‘Browse’ button to select an image for the button from the Resources module.
8. Now scroll to the ‘Header Content’ field and click into the content editor.
9. Click into the content editor and type in a short title for the button
10. Now press the return key and type in a short supporting statement describing the button (we recommend a maximum of 6 words).
11. Highlight the button title your cursor (excluding the introduction statement) and click on the ‘Paragraph’ icon button in the content editor toolbar.
12. Select the ‘Heading 2’ formatting option in the Paragraph tool dropdown.
13. Click the ‘Save’ button at the bottom of the ‘Page Settings’ window.

With the title, image, icon and introduction configured, complete the setup of the image button by adding the content that will display when the visitor hovers over the button:

1. Hover over the new Content element once more, and click on the ‘Edit Content’ button.
2. Type in a short paragraph that provides further information (we recommend a maximum of 25 words).
3. Press the return key and optionally configure a link to display:
   1. Type in a word or short phrase for the link label.
   2. Highlight this label with your cursor.
   3. Click on the ‘Link’ icon button in the content editor toolbar.
   4. Choose ‘Add Link’ from the dropdown list
   5. Select a link type from the top of the ‘Link’ properties window.
   6. Configure the link settings and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens an external webpage.
   7. Click on the ‘Class’ dropdown and select ‘2022_arrow_link_style’ from the dropdown.
   8. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
4. Click the ‘Save’ button at the bottom of the content editor window.
5. Click the ‘Publish’ button at the bottom-right of the page interface.

With your new image button setup, repeat this process to setup image buttons in the other column (or columns) within the Layout element.

Navigate to the page that you want to add the image button to and setup the elements for your new button:

1. Add a Layout element to the main content area (1 or 2 columns). If you are adding the image button to the narrow right sidebar, please skip this step.
2. Add a Content element to one of the columns in the Layout element. If you are adding an image button to the narrow sidebar, you can add this directly to the sidebar area.
3. Hover over the new Content element and click on the ‘gear’ icon in the top-right corner.
4. Type a single number into the ‘Title’ field in the Element Settings window (making sure the blue toggle button is turned on). This will display as a large number to the left of the button label.
5. Click on ‘+ Design’ in the towards the bottom of the Element Settings window.
6. Click into the ‘Custom Class’ field and type in following custom classes, making sure to add each class in lowercase letters with an empty space between them: image-button numbers
7. With the Element Settings window still open, scroll to the ‘Background Image’ field and click on the ‘Browse’ button to select an image for the button from the Resources module.
8. Now scroll to the ‘Header Content’ field and click into the content editor.
9. Click into the content editor and type in a short title for the button
10. Now press the return key and type in a short supporting statement describing the button (we recommend a maximum of 6 words).
11. Highlight the button title your cursor (excluding the introduction statement) and click on the ‘Paragraph’ icon button in the content editor toolbar.
12. Select the ‘Heading 2’ formatting option in the Paragraph tool dropdown.
13. Click the ‘Save’ button at the bottom of the ‘Page Settings’ window.

With the title, image, icon and introduction configured, complete the setup of the image button by adding the content that will display when the visitor hovers over the button:

1. Hover over the new Content element once more, and click on the ‘Edit Content’ button.
2. Type in a short paragraph that provides further information (we recommend a maximum of 25 words).
3. Press the return key and optionally configure a link to display:
   1. Type in a word or short phrase for the link label.
   2. Highlight this label with your cursor.
   3. Click on the ‘Link’ icon button in the content editor toolbar.
   4. Choose ‘Add Link’ from the dropdown list
   5. Select a link type from the top of the ‘Link’ properties window.
   6. Configure the link settings and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens an external webpage.
   7. Click on the ‘Class’ dropdown and select ‘2022_arrow_link_style’ from the dropdown.
   8. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
4. Click the ‘Save’ button at the bottom of the content editor window.
5. Click the ‘Publish’ button at the bottom-right of the page interface.

With your new image button setup, repeat this process to setup image buttons in any further columns if you populating a Layout element within the main content area.

To add a element title with a custom icon, begin by choosing an icon for it:

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

With your icon selected, navigate to the page that you want to add the heading treatment to

1. Add or edit an element to the page that will display the element title
2. Hover over the element and click on the ‘gear’ icon in the top-right corner.
3. Type the element title into the ‘Title’ field in the Element Settings window (making sure the blue toggle button is turned on)
4. Click on ‘+ Design’ in the towards the bottom of the Elemet Settings window
5. Click into the ‘Custom Class’ field and add the following custom classes, making sure all letters are in lowercase with an empty space between them: icon-heading element-title
6. With your cursor still active in the ‘Custom Class’ field, press the space key and type in the icon named you noted previously in lowercase letters (for example ‘backpack’).
7. Click the ‘Save’ button at the bottom of the ‘Page Settings’ window.
8. Click the ‘Publish’ button at the bottom-right of the page interface.

To add a element title with a custom icon, begin by choosing an icon for it:

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

With your icon selected, navigate to the page that you want to add the heading treatment to

1. Add or edit an element to the page that will display the element title
2. Hover over the element and click on the ‘gear’ icon in the top-right corner.
3. Click on the toggle icon to the right of the Title field to hide the title at the top of the Element Settings window.
4. Click on ‘+ Design’ in the towards the bottom of the Elemet Settings window
5. Click into the ‘Custom Class’ field and add the following custom classes, making sure all letters are in lowerca with an empty space between them: icon-heading with-introduction
6. With your cursor still active in the ‘Custom Class’ field, press the space key and type in the icon named you noted previously in lowercase letters (for example ‘backpack’).
7. With the Element Settings widow still open, scroll to the ‘Header Content’ field.
8. Click into the content editor and type in the introduction and the heading as one line of text.
9. Highlight the full text with your cursor and click on the ‘Paragraph’ icon button in the content editor toolbar.
10. Select the ‘Heading 2’ formatting option in the Paragraph tool dropdown.
11. Now highlight the words in your heading that should be formatted as the introduction text and click on the ‘Italics’ button in the content editor toolbar.
12. Click the ‘Save’ button at the bottom of the ‘Page Settings’ window.

Click the ‘Publish’ button at the bottom-right of the page interface.

To add a element title with a custom icon, begin by choosing an icon for it:

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

With your icon selected, navigate to the page that you want to add the heading treatment to

1. Add or edit an element to the page that will display the element title
2. Hover over the element and click on the ‘gear’ icon in the top-right corner.
3. Click on the toggle icon to the right of the Title field to hide the title at the top of the Element Settings window.
4. Click on ‘+ Design’ in the towards the bottom of the Elemet Settings window
5. Click into the ‘Custom Class’ field and add the following custom classes, making sure all letters are in lowerca with an empty space between them: icon-heading without-introduction
6. With your cursor still active in the ‘Custom Class’ field, press the space key and type in the icon named you noted previously in lowercase letters (for example ‘backpack’).
7. Wit the Element Settings widow still open, scroll to the ‘Header Content’ field.
8. Click into the content editor and type in a short heading
9. Highlight the heading text with your cursor and click on the ‘Paragraph’ icon button in the content editor toolbar.
10. Select the ‘Heading 2’ formatting option in the Paragraph tool dropdown.
11. Click the ‘Save’ button at the bottom of the ‘Page Settings’ window.

Click the ‘Publish’ button at the bottom-right of the page interface.