Button Panel - 1 Instructions

The ‘Button panel displays a grid of visually-engaging image buttons linking to important pages and resources on your website. This is headed by a title for the panel and a short text introduction. Each image button consists of a title, a supporting image, a ‘Find Out More’ link and a short text description that displays when the visitor hovers over the button.

The panel is powered by a Container element that contains an individual Content Element for each image button.

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:

A title and short text introduction displays at the top of the ‘Button’ 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 ‘Button’ 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.

To add a button, begin by uploading its supporting image to the Resources module:

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 the image. This is for internal use and will not display within the panel.
2. Click into the ‘Alt Text’ field and add a short description of the image. This is used to describe the image in situations where the visitor cannot see it and is highly recommended to improve the image’s accessibility.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Image Size: The recommended upload size for the supporting image is 512px (wide) by 382px (high). 

With the supporting image uploaded, add a new Content Element to the ‘Button’ 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 ‘Button’ panel.
5. Hover over the Content Element displaying the button that should directly precede the new image button you want to add.
6. Click on the ‘Add Element’ button and choose a Content Element from within the ‘Standard’ tab in the ‘Add Element’ window. 

With the Content Element in place, setup the button formatting and supporting image:

1. Hover over the Content Element and click on the ‘gear’ icon in the top-right corner.
2. Click on ‘+ Design’ in the ‘Edit Content Element Settings’ window.
3. Type ‘slide-box’ into the ‘Custom Class’ field.
4. Click on the ‘Browse’ button within the ‘Background Image’ field.
5. Select the image you have uploaded previously in the ‘Select a Background Image’’ window.

With the ‘Edit Content Element Settings’ window still open, add the button title and ‘Find Out More’ link:

1. Scroll down to the ‘Header Content’ field and click into the content editor.
2. Type in a word or phrase for the button title.
3. Scroll down to the ‘Footer Content’ field and click into the content editor.
4. Type in ‘Find Out More’ or another short word or phrase for the link label.
5. Highlight this link label with your cursor.
6. Click on the ‘Link’ icon button in the content editor toolbar.
7. Select ‘Add Link’ from the dropdown menu.
8. Select a link type from the top of the ‘Link’ properties window.
9. Configure the link settings and make sure that the ‘Open link in a new tab’ checkbox is checked if the link opens a document or a page on an external website.
10. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
11. Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

Finally, add the short text description that will display when the visitor hovers over the button:

1. Hover over the Content Element again click on the ‘Edit Content’ button.
2. Type a short text description into the content editor. We recommend adding a single paragraph with a maximum of 16 words to ensure the full description displays effectively across different device sizes.
3. Click on the ‘Save’ button at the bottom of the content editor.

Note: The ‘Button’ panel supports any number of buttons, but we recommend adding a maximum of 9 buttons to maintain consistency with the original design. 

On desktop devices, a maximum of 3 image buttons will display in each row within the panel. If there are fewer than 3 image buttons in the last row, an empty space will display to the right of the last button.

To update an existing button, begin by uploading a new supporting image for it to the Resources module:

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 the image. This is for internal use and will not display on the homepage.
   • Click into the ‘Alt Text’ field and add a short description of the image. This is used to describe the image in situations where the visitor cannot see it and is highly recommended to improve the image’s accessibility.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Image Size: The recommended upload size for the supporting image is 512px (wide) by 382px (high). 

With the new image uploaded, update the supporting image within the image button you want to modify:

1. Hover over the Content Element powering the image button you want to update and click on the ‘gear’ icon in the top-right corner.
2. Click on ‘+ Design’ in the ‘Edit Content Element Settings’ window.
3. Click on the ‘Browse’ button within the ‘Background Image’ field.
4. Select the image you have uploaded previously in the ‘Select a Background Image’’ window.

With the ‘Edit Content Element Settings’ window still open, update the button title and ‘Find Out More’ link:

1. Scroll down to the ‘Header Content’ field and click into the content editor.
2. Update the existing text to replace the button title with a new word or short phrase
3. Scroll down to the ‘Footer Content’ field and click into the content editor.
4. Update the existing link text to change the button label, making sure not to remove the link already applied to it. 
5. Right-click on the link and choose ‘Edit Link’ from the action menu.
6. Select the desired link type from the top of the ‘Link’ properties window.
7. Update the link settings to setup a new link destination for the button.
8. Check the ‘Open link in a new tab’ checkbox if the updated link opens a document or a page on an external website.
9. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
10. Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

Finally, update the text description that will display when the visitor hovers over the button:

1. Hover over the Content Element again and click on the ‘Edit Content’ button.
2. Update the short text description in the content editor. We recommend adding a single paragraph with a maximum of 16 words to ensure the full description displays effectively within the image button overlay.
3. Click on the ‘Save’ button at the bottom of the content editor.

Note: On desktop devices, a maximum of 3 image buttons will display in each row within the panel. If there are fewer than 3 image buttons in the last row, an empty space will display to the right of the last button.

To reorder an image button:

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 ‘Button’ panel.
5. Hover over the Content Element displaying the image button you want to move and click down on the ‘Move element’ icon in the top-right corner.
6. Drag and drop the Content Element into the desired new position, making sure it is still inside the Container element that powers the panel.

To remove an image button, delete the Content Element that powers 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 ‘Button’ panel.
5. Hover over the Content Element displaying the image button you want to remove and click down on the ‘Delete element’ icon in the top-right corner.
6. Confirm you want to delete the Content Element in the ‘Delete Content Element’ validation window.