Image Buttons 3 (Square)

The ‘Image Buttons 3 (Square Buttons)’ Best Practice Asset displays a visually-engaging panel of square image buttons for linking to important pages on your website. Each button is set up by an individual Content Element inside of a Layout element that can be configured to display with 1 to 4 columns.

The content of each button includes a title and background image, with an overlay on hover that shows a supporting text description and hyperlink. An optional subheading may also be added below the button title.

Important: This Best Practice Asset can be added to multiple pages on your website. When added to a page layout with a sidebar, the Image Buttons panel should be set to display a maximum of two columns to ensure the buttons display correctly.

The following pixel dimensions are recommended for the image that displays in the background of each image button. These will help you achieve an ideal balance of visual quality and loading speed:

Image Area	Width (pixels)	Height (pixels)
Button background image	1200	916

There are two ways of preparing an image to this size:

• Use photo editing software such as Adobe Photoshop to scale and/or crop the file before uploading it to Composer.
• Upload the original image into the Resources module, select it and click on the ‘Crop’ icon button towards the top of the Resource details panel. This will open Composer’s inbuilt image editor where you can scale and/or crop the file.

Each image button in this Best Practice Asset displays a single background image. The following best practices are recommended when preparing these images to ensure they display effectively: 

• Choose images that are decorative. They should be visually engaging, but not essential to understanding the content on the post.
• Make sure the images are easy to interpret, even when partially obscured by text in the foreground. Avoid images of text and faces for example that rely on being fully visible for their meaning to be clear.
• Keep the focal point of each image in the center. This safeguards against automatic cropping that will occur at certain screen widths to fit within the responsive layout.
• Save images at 72ppi (pixels per inch) in .jpeg format with an RGB color profile.
• Add descriptive alt text when uploading images to make them accessibility-compliant.

The following instructions explain how to add a new Image Buttons panel to your website. Please follow each set of steps in the order presented:

Make a Copy of the Example ‘Image Buttons 3’ Panel

As part of the setup process for this Best Practice Asset, Finalsite has set up an example Image Buttons panel to your website. Begin by copying and pasting this example onto the desired page in your website: 

1. Go to the ’Pages’ panel.
2. Open the branch that contains the example pages for Best Practice Assets in your website and select the ‘Image Buttons 2’ page.
3. Hover over the Three-column Layout element displaying the Image Buttons panel and click on the ‘Copy’ icon in the top-right corner.
4. Go to the ‘Pages’ panel and select the desired page for your new Image Buttons panel.
5. 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 Image Buttons panel and click on the ‘Add Element’ button.
6. Click on the blue ‘Paste this Element’ button in the ‘New Element’ window.

Update the Title of the Panel

With the new Image Buttons Panel in place, update the settings of the Layout element containing the Image Buttons to display a new title:

1. Hover over the Layout element displaying the Image Buttons panel and click on the ‘gear’ icon in the top-right corner.
2. Click into the ‘Title’ field in the ‘Layout 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 Layout Element Settings’ window.

The following instructions explain how to update an Image Button within an existing Image Buttons panel. Please follow each set of steps in the order presented:

Upload a New Background Image

Begin by uploading the background image for the image button to the Resources module:

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 options available to upload a new image.
6. Once the upload is complete, update the properties for the image in the ‘Edit Resource Details’ window:
   • Click into the ‘Title’ field and add a short title for your image (this is for internal use and will not be seen by the visitor).
   • 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.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The recommended image size for the background image is 1200px (wide) by 916px (high).

Update the Image Button Content

With the image uploaded, navigate to the page displaying the Image Button you want to update and update: 

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the Image Buttons panel 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 Image Buttons panel.

Begin by updating the title of the Image Button:

1. Hover over the Content element displaying the Image Button you want to update and click on the ‘gear’ icon in the top-right corner.
2. Click into the ‘Title’ field in the ‘Content Element Settings’ window and type in a short title for the button.

Next, update the background image on show:

1. Click on ‘+ Design’ in the ‘Edit Content Element Settings’ window.
2. Click on the ‘Browse’ button under the ‘Background Image’ field.
3. Select the image you have previously uploaded in the ‘Select a Background Image’ window.

Optionally add a short subheading:

1. Click into the ‘Header Content’ content editor
2. Type in a short subheading for your button as normal paragraph text. This displays directly below the button title.

Next, update the hyperlink that displays on hover:

1. Click into the ‘Footer Content’ content editor.
2. Update the existing link text, making sure not to remove the link applied to it.
3. Right click on the link and choose ‘Edit Link’ from the action menu.
4. Select a link type from the top of the ‘Link’ properties window.
5. Update 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.
6. Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.

Finally, update the supporting text description that displays in the button on hover:

1. Hover over the Content element displaying the Image Button again and click on the ‘Edit Content’ button.
2. Click into the content editor and type in a short statement describing the button (a maximum of 18 words is recommended, formatted as one paragraph).
3. Click on the ‘Save’ button in the content editor.

Note: If the supporting text description is too long to fit within the available space in the button, it will be shortened automatically and an ellipsis will show after the final word to indicate that some of the text has been omitted.

The default configuration for the Image Buttons panel shows three image buttons within a Three-column Layout element. This can optionally be changed to display:

• Four buttons in a four column layout (recommended for full width pages layouts only)
• Two buttons in a two column layout (recommended for interior pages that have a left or right sidebar)
• One button in a one column layout (recommended for image buttons added to the sidebar of a page).

To update the number of image buttons on display, begin by updating the number of columns in the panel:

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the Image Buttons panel 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 Layout element containing the image buttons and click on the ‘Layout’ icon in the top-right corner.
6. Select one of the following three layout options from the ‘Element Layout and Appearance’ window:
   • One column layout
   • Two column layout (even widths)
   • Three column layout
   • Four column layout
7. Click on the ‘Save’ button at the bottom of the ‘Element Layout and Appearance’ window.

Next update the Content elements within the panel so that you have exactly one image button showing in each column. 

To add an image button to an empty column:

1. Hover one of the existing Content elements and click on the ‘Copy’ icon in the top-right corner.
2. Click on the ‘Add Element’ button in an empty column.
3. Click on the blue ‘Paste this Element’ button in the ‘New Element’ window.

To delete an image button from a column with multiple buttons:

1. Hover of the Content element you want to delete and click on the ‘Delete Element’ icon in the top right corner.
2. Click on the ‘Delete’ button in the ‘Delete Content Element’ window.

To move an image button to an empty column:

1. Hover over the Content element and click down on the ‘Move’ icon.
2. Drag and drop the element button into the desired new column.

Important: This best practice asset supports one image button in each column of the Image Buttons panel. If you require additional image buttons, these need to be added to an additional Image Buttons panel on the same page.

The default configuration for the Image Buttons panel shows three image buttons within a Three-column Layout element. This can optionally be changed to display:

• Four buttons in a four column layout (recommended for full width pages layouts only)
• Two buttons in a two column layout (recommended for interior pages that have a left or right sidebar)
• One button in a one column layout (recommended for image buttons added to the sidebar of a page).

To update the number of image buttons on display, begin by updating the number of columns in the panel:

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the Image Buttons panel 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 Layout element containing the image buttons and click on the ‘Layout’ icon in the top-right corner.
6. Select one of the following three layout options from the ‘Element Layout and Appearance’ window:
   • One column layout
   • Two column layout (even widths)
   • Three column layout
   • Four column layout
7. Click on the ‘Save’ button at the bottom of the ‘Element Layout and Appearance’ window.

Next update the Content elements within the panel so that you have exactly one image button showing in each column. 

To add an image button to an empty column:

1. Hover one of the existing Content elements and click on the ‘Copy’ icon in the top-right corner.
2. Click on the ‘Add Element’ button in an empty column.
3. Click on the blue ‘Paste this Element’ button in the ‘New Element’ window.

To delete an image button from a column with multiple buttons:

1. Hover of the Content element you want to delete and click on the ‘Delete Element’ icon in the top right corner.
2. Click on the ‘Delete’ button in the ‘Delete Content Element’ window.

To move an image button to an empty column:

1. Hover over the Content element and click down on the ‘Move’ icon.
2. Drag and drop the element button into the desired new column.

Important: This best practice asset supports one image button in each column of the Image Buttons panel. If you require additional image buttons, these need to be added to an additional Image Buttons panel on the same page.