Button Panel - 3 Instructions

The ‘Button’ panel displays a visually-engaging slideshow of image buttons linking to important pages and resources on your website with the website’s main color in the background. 

Each image button consists of a title, a supporting image and an overlay that displays when the visitor hovers over it. This overlay contains a short text description and a ‘Find Out More’ arrow button that links to a page with more information.

The slideshow of image buttons is headed by a title for the panel and a short text introduction. In addition to this, an optional CTA button displays below the slideshow. 

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

The following pixel dimensions are recommended for the images uploaded to the Resources module for use in 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 an image 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 on the homepage.
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 800px (wide) by 530px (high). 

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

With the Resource element in place, start by setting the title and image for the button:

1. Hover over the Resource element and click on the ‘gear’ icon in the top-right corner.
2. Select the ‘Single’ Tab in the ‘Edit Resource Element Settings’ window.
3. Click into the ‘Title’ field and type in a word or short phrase for the button title.
4. Click on the ‘Browse’ button directly below the ‘Title’ field.
5. Select the image you have uploaded previously in the ‘Select a Resource’’ window

With the ‘Edit Resource Element Settings’ window still open, set the description and ‘Find Out More’ arrow button that displays in the button overlay on hover: 

1. Click on ‘+Design’.
2. Scroll down to the ‘Header Content’ field and click into the content editor.
3. Type in a short text description. We recommend adding a single paragraph with a maximum of 25 words to maintain consistency with the original design.
4. Press the return key and type in the label ‘Find Out More’ 
5. Highlight the ‘Find Out More’ text with your cursor.
6. Click on the ‘Link’ icon button in the content editor toolbar.
7. Choose ‘Add Link’ from the dropdown list
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 only ticked if the link opens an external website.
10. Click on the ‘Class’ drop-down in the ‘Link’ properties window and select ‘button-arrow-on-dark’.
11. Click on the ‘OK’ button at the bottom of the ‘Link Properties’ window.
12. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

The order of the image buttons in the slideshow is determined by the order of the individual Resource elements inside the Container element displaying this panel.

To reorder the image 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 ‘Button’ panel.
5. Hover over the Resource element displaying the image button you want to move and click down on the ‘Move’ icon 

Drag and drop the image button into the desired new position, making sure it stays inside the Container element powering this panel.

To remove an existing image button from the slideshow:

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 Resource element displaying the image button you want to remove and click on the ‘Delete’ icon button.
6. Confirm you want to delete the element in the ‘Delete Resource Element’ validation window.

An optional CTA button displays below the slideshow of circular image buttons to link the visitor to a page on the website with further information.

To update the optional CTA 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 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 ‘Footer 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-1’ 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.

Note: To remove the optional button, delete the existing link in the ‘Footer Content’ content editor as part of step 8. If the button has been removed previously and you would like to add a new one, follow the instructions above up to step 3 and then follow the normal steps to ‘Add a Button’ on a dark background, which can be found within the ‘Interior Pages & Content Formatting’ section on this ‘Instructions’ page.