Post Panel 6 Instructions

The ‘News & Announcements’ panel displays a visually engaging grid of 4 news stories and announcements with a button to load more stories. It is powered by a single Post element inside of a Container element and displays a full-width image in the background.

Each story in the grid displays a thumbnail image, the story title, the publish date, a short text summary and a ‘Read More’ button. The visitor can click on a story to view the full story details in a pop-up or click on the ‘View All News’ link below the panel title to visit the full ‘News’ page on your website.

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:

To update the title of the ‘News & Announcements’ 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 ‘News & Announcements’ 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.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

To update the ‘View All News’ button below the title of the ‘News & Announcements’ 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 ‘News & Announcements’ 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-arrow-on-dark’ 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.

The grid of stories in the ‘News & Announcements’ panel is powered by a single Post element displaying the latest 4 posts from one or more selected boards in the Posts module.

To reconfigure the set of posts on display in the grid:

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 ‘News & Announcements’ panel.
5. Hover over the Post element displaying the grid of stories and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Content Filters’ in the ‘Edit Post Element Settings’ window.
7. Click on the ‘Select Board’ button and choose one or more boards that you want to feed into the grid.
8. Click on ‘+ Formatting’ further down within the ‘Edit Post Element Settings’ window to optionally update the number of posts on display.
9. Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

Note: When updating this Post element, please only update the settings recommended in these instructions. All of the other settings have been configured to ensure the posts display with the correct presentation.

When the visitor clicks on a story in the grid of stories in the ‘News & Announcements’ panel, the full details of the story will display in a pop-up. By default this pop-up will display the following details:

• Post Title
• Author
• Publish Date
• Publish Time
• Categories 
• Summary
• Body
• Tags
• Thumbnail

To reconfigure the details showing in the story pop-up:

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 ‘News & Announcements’ panel.
5. Hover over the Post element displaying the grid of stories and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Pop-up Details’ in the ‘Edit Post Element Settings’ window.
7. Check the content details you would like to include in the post pop-up. You may choose to include any of the options available.
8. Click on ‘+ Formatting’ in the ‘Edit Post Element Settings’ window.
9. Optionally update the display settings in the ‘Popup Thumbnail’ section
10. Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

Note: The details on display in the story pop-up include category and tag labels by default, but adding these to a post is entirely optional. These labels will only show in the story pop-up if categories or tags have been added to the post.

Each story in the grid of stories within the ‘News & Announcements’ panel is powered by an individual post added to the Posts module. 

To add a new story, begin by uploading a thumbnail image for it:

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 new thumbnail 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 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. This is used by screen reading software to describe 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 post thumbnail is 800px (wide) by 990px (high).

With the post thumbnail uploaded, add a new post to the Posts module:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
2. Click on the ‘Boards’ tab.
3. Select the board that has been configured to display in the grid of stories within the ‘News & Announcements’ panel. If you have configured the grid to display posts from multiple boards, select the most suitable board for the content of your story.
4. Click on the ‘Create Post’ button at the top right of the Board interface.
5. Add the content for your new post:
1. Click into the ‘Title’ field and add a short title for your story.
2. Click into the ‘Body Content’ content editor and add the full content of the story.
3. Open the ‘Summary’ panel and type a short description in the content editor to introduce visitors to the story. We recommend adding a maximum of 18 words to maintain consistency with the original design.
4. Open the ‘Thumbnail & Resource’ panel and click on the ‘Browse’ button to select the image you uploaded previously for the thumbnail.
6. Click on the ‘Save’ button at the bottom right of the Post interface.
7. Click on ‘Yes’ in the ‘Publish Now’ window to publish the post immediately.

Once the post has been published, it will display in the grid of stories within the ‘News & Announcements’ panel automatically. The posts are set to display in date order.

Tip: To learn more about adding posts in Composer please read our Knowledge Base article on how to make a new post.

The ‘News & Announcements’ panel displays a full-width image in the background to enhance its visually-engaging presentation. This image displays with a semi-transparent dark overlay on top of it to ensure the content is easy to read in the foreground of the panel. 

To update the background image, begin by uploading a new image:

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 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. This is used by screen reading software to describe 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 size for the image in the background of the ‘News & Announcements’ panel is 2200px (wide) by 1254px (high). 

With the image uploaded, add it to the background of the ‘News & Announcements’ 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 Icon panel.
5. Hover over the Container element displaying the panel title 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 on the ‘Browse’ button under the ‘Background Image’ field.
8. Select the image you uploaded previously in the ‘Select a Background Image’ window.
9. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.