Social 1 Instructions

The ‘Social Media’ panel displays a three-column grid of live social media feeds with three posts showing by default and a button to load in more. It is powered by a single Feeds element inside of a Container element with an image in the panel’s background

The content of each social media post is determined by the platform it feeds from, with the grid supporting feeds from multiple sources. The visitor can also click on a social media post to view its full content in a pop-up or click on the ‘Social Media’ link below the panel title to visit the full ‘Social Media’ page on your website.

The elements in this panel are configured with the following settings:

Container Element

Feeds Element

Important: When updating the elements in the ‘Social Media’ panel, please only update the settings recommended across these instructions. All other settings have been configured to ensure the panel displays with the correct presentation and functionality.

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 ‘Social Media’ 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 ‘Social Media’ 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 ‘Social Media’ link below 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 ‘Social Media’ 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 ‘Header 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 social media feeds in the ‘Social Media’ panel pulls in your latest social media posts automatically from one or more external sources. To configure the sources on display:

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 ‘Social Media’ panel.
5. Hover over the Feeds element powering the grid of social media posts and click on the ‘gear’ icon in the top-right corner.
6. Click on the ‘Sources’ dropdown to view the sources added to your website and select one or more of these sources.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Feeds Element Settings’ window.

Tip: To learn more about adding or removing social media feed sources, please read our Knowledge Base article on Feeds Sources.

The ‘Social Media’ panel displays a visually-engaging image in the panel's background. This displays with a semi-transparent dark overlay on top of it (which is applied automatically) to ensure the content is highly visible 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 cannot 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 ‘Social Media’ panel is 2200px (wide) by 1497px (high). 

With the image uploaded, add it to the background of the ‘Social Media’ 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 ‘Social Media’ 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 uploaded image in the ‘Select a Background Image’ window.
9. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.