Button Panel - 4 Instructions
Button Panel 4
- Button Panel Overview
- Panel Image and Video Sizes
- Update the Optional Small Heading
- Update the Panel Title
- Update the Text Introduction
- Add a Button
- Update an Existing Button
- Remove an Button
- Update the Supporting Image or Video
Button Panel Overview
The ‘Button’ panel displays a selection of buttons linking to important pages and resources on your website. It consists of the following key features added to a Container element:
- Text Introduction & Buttons: A succinct text area that consists of an optional small heading, the panel title and a succinct text area followed by one or more button links. This content is powered by a single Content element.
- Supporting Image or Video: A single large image or video that overlays an offset rectangle in the website’s accent color. This is powered by a single Resource element.
Panel Image and Video Sizes
The following pixel dimensions are recommended for the images and videos 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:
Image Area | Width (pixels) | Height (pixels) |
---|---|---|
Supporting Image | 800 | 526 |
Supporting Video | 1280 | 720 |
Update the Optional Small Heading
The optional small heading in the ‘Button’ panel is a short introductory statement that leads into the main panel title. It is formatted with a small font size and has a thick border to the left of it in the website’s accent color.
To update the optional small heading:
- Go to the ’Pages’ panel and select the homepage.
- 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 ‘Button’ panel.
- Hover over the Content element displaying the small heading and click on the ‘gear’ icon in the top-right corner.
- Click on ‘+ Design’ at the bottom of the ‘Edit Resource Element Settings’ window.
- Click into the ‘Header Content’ content editor.
- Update the small heading text. We recommend adding a single short statement to maintain consistency with the original design.
Note: To remove the optional small heading, delete the existing text as part of step 8. If the small heading has been removed previously and you want to reinstate it, follow the same set of steps above and type in a new small heading as part of step 8.
Update the Panel Title
To update the title of the ‘Button’ panel:
- Go to the ’Pages’ panel and select the homepage.
- 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 ‘Button’ panel.
- Hover over the Content Element displaying the panel title and click on the ‘gear’ icon in the top-right corner.
- Click into the ‘Title’ field in the ‘Edit Content Element Settings’ window.
- Update the title text or alternatively click on the blue toggle to the right of the ‘Title’ field to hide the panel title.
- Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.
Update the Text Introduction
To update the text introduction below the panel title:
- Go to the ’Pages’ panel and select the homepage.
- 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 ‘Button’ panel.
- Hover over the new Content Element displaying the text introduction and click on the ‘Edit Content’ button.
- Update the existing text. We recommend adding a single paragraph with a maximum of 30 words to maintain consistency with the original design.
- Click on the ‘Save’ button at the bottom of the content editor.
Tip: You can optionally remove the text introduction from the ‘Buttons’ panel by deleting the existing text from the content editor during step 6. If the text has been removed previously and you want to reinstate it, follow the same set of steps above and type in a new text introduction as part of step 6.
Add a Button
To add a new button to the ‘Buttons’ panel:
- Go to the ’Pages’ panel and select the homepage.
- 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 ‘Button’ panel.
- Hover over the Content Element displaying the panel text area once more and this time click on the ‘gear’ icon in the top-right corner.
- Click on ‘+ Design’ at the bottom of the ‘Edit Content Element Settings’ window.
- Click into the ‘Footer’ Content’ content editor. Each link on display in this content editor represents a different button.
- Place your cursor directly after the button should directly precede the button you want to add.
- Hit the return key and type in the button label text for your new button.
- Highlight the button label with your cursor.
- Click on the ‘Link’ icon in the ‘Footer’ Content’ content editor toolbar.
- Choose ‘Add Link’ from the dropdown list.
- Select a link type from the top of the ‘Link’ properties window.
- 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.
- Click on the ‘Class’ drop-down in the ‘Link’ properties window and select ‘button-1’ to apply the desired button style.
- Click on the ‘OK’ button at the bottom of the ‘Link Properties’ window.
- Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.
Tip: We recommend adding a maximum of 4 buttons to the ‘Buttons’ panel to maintain consistency with the original design. Adding additional buttons may result in a large amount of unexpected white space around the buttons towards the bottom of the panel.
Update an Existing Button
To update an existing button in the ‘Button’ panel:
- Go to the ’Pages’ panel and select the homepage.
- 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 ‘Button’ panel.
- Hover over the Content Element displaying the panel text area and click on the ‘gear’ icon in the top-right corner.
- Click on ‘+ Design’ at the bottom of the ‘Edit Content Element Settings’ window.
- Click into the ‘Footer’ Content’ content editor.
- Update the existing link text to change the button label, making sure not to remove the link already applied to it.
- Right-click the link representing the button you want to update inside the ‘Footer Content’ content editor and choose ‘Edit Link’ from the action menu.
- Select the desired link type from the top of the ‘Link’ properties window.
- Update the link settings to configure a new link destination for the button. Make sure not to remove the ‘button-1’ class from the ‘Class’ dropdown.
- Check the ‘Open link in a new tab’ checkbox if the updated link opens a document or a page on an external website.
- Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
- Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.
Remove an Button
To remove a button from the ‘Buttons’ panel:
- Go to the ’Pages’ panel and select the homepage.
- 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 ‘Button’ panel.
- Hover over the Content Element displaying the panel text area once more and this time click on the ‘gear’ icon in the top-right corner.
- Click on ‘+ Design’ at the bottom of the ‘Edit Content Element Settings’ window.
- Highlight the link representing the button you want to remove with your cursor inside the ‘Footer Content’ content editor.
- Press the ‘delete’ key on your keyboard to remove the button link.
- Press the ‘delete’ key again to remove the extra empty space this leaves behind.
- Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.
Update the Supporting Image or Video
To update the supporting image or video, begin by uploading a new file in the chosen format to the Resources module:
- Click on the ‘folder’ icon button in Composer’s left navigation to access Resources.
- 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 upload options available and upload the new image or video.
- Once the upload is complete, update the following 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.
- If you are uploading an image, 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. If you are uploading a video, add a short description to the ‘Thumbnail Alt Text’ field.
- Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.
Image Size: The recommended upload sizes for this content are 800px (wide) by 526px (high) for an image and 1280px (wide) by 720px (high) for a video.
With the new image or video uploaded, set it to display within the ‘Mission Statement’ panel:
- 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 ‘Button’ panel.
- Hover over the Resource element and click on the ‘gear’ icon in the top-right corner.
- Click on the ‘Browse’ button directly below the ‘Title’ field in the ‘Edit Resource Element Settings’ window.
- Select the image or video you have uploaded previously in the ‘Pick a Resource’ window.
- Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’’ window.