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:
- Click on Resources in Composer’s left navigation.
- Click on the ‘Resources’ tab.
- Create or select an existing folder for your image in the ‘Public’ directory
- Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
- Choose from the options available to upload a new image.
- 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.
- 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:
- Go to the ’Pages’ panel.
- Navigate to the page displaying the Image Buttons panel you want to update
- Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
- Refresh the page in your web browser.
- Scroll to the Image Buttons panel.
Begin by updating the title of the Image Button:
- Hover over the Content element displaying the Image Button you want to update and click on the ‘gear’ icon in the top-right corner.
- 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:
- Click on ‘+ Design’ in the ‘Edit Content Element Settings’ window.
- Click on the ‘Browse’ button under the ‘Background Image’ field.
- Select the image you have previously uploaded in the ‘Select a Background Image’ window.
Optionally add a short subheading:
- Click into the ‘Header Content’ content editor
- 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:
- Click into the ‘Footer Content’ content editor.
- Update the existing link text, making sure not to remove the link applied to it.
- Right click on the link and choose ‘Edit Link’ from the action menu.
- Select a link type from the top of the ‘Link’ properties window.
- 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.
- 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:
- Hover over the Content element displaying the Image Button again and click on the ‘Edit Content’ button.
- 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).
- 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.