Logo Panel 1 Instructions
Logo Panel 1
- Panel Overview
- Panel Image Sizes
- Update the Panel Title and Introduction Text
- Add an Image to the Slideshow
- Reorder a Logo Image
- Remove a Logo Image
- Logo Image Panel Options
Panel Overview
The ‘Logo Image’ panel displays a visually engaging slideshow of logo images that displays affiliate logos. This panel is powered by a single Post element that is set to 'List" and is inside of a Container element.
Each logo image consists of an image with the title of the affiliate that both link to an external URL. Displaying the title is optional.
Panel Image Sizes
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:
| Image Area | Width (pixels) | Height (pixels) |
|---|---|---|
| Logo Image | 400 | 160 |
Update the Panel Title and Introduction Text
A title and short text introduction displays at the top of the ‘Logo’ panel. To change this content, begin by updating 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 ‘Logo’ panel.
- Hover over the Container element displaying the panel title and click on the ‘gear’ icon in the top-right corner.
- Click into the ‘Title’ field in the ‘Edit Container Element Settings’ window.
- Update the text or click on the blue toggle to the right of the ‘Title’ field to hide the element title.
With the ‘Edit Container Element Settings’ window still open, update the introduction text:
- Scroll down to the ‘Header Content’ field and click into the content editor.
- Update the text in the text area. We recommend adding a single paragraph with a maximum of 40 words to maintain consistency with the original design.
- Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.
Add an Image to the Slideshow
Each logo image in the ‘Logo Image’ panel is powered by an individual post added to the Posts module.
To add a new logo image, begin by uploading an image for it:
- 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 new thumbnail 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.
- 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
- 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.
- Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.
With the profile image uploaded, add a new post to the Posts module:
- Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
- Click on the ‘Boards’ tab.
- Select the board that has been configured to display in the ‘Logo Image’ panel.
- Click on the ‘Create Post’ button at the top right of the Board interface.
- Add the content for your new post:
- Click into the ‘Title’ field and add the name of the logo image (for example, ‘Boston University’).
- Open the ‘Thumbnail & Resource’ panel and click on the ‘Browse’ button to select the image you have uploaded for this logo panel.
- Create an External Redirect URL: (the logo image and title will link to this) Underneath the 'Title' field, ('Body Content' will be clicked on by default). Click on 'External Redirect URL', and enter the URL in the 'External Redirect URL' field below it.
- Click on the ‘Save’ button at the bottom right of the Post interface.
- Click on ‘Yes’ in the ‘Publish Now’ window to publish the post immediately.
Once the post has been published, the new logo image will display in the ‘Logo Image’ panel automatically. The posts are set to display in date order.
Tip: To learn more about adding posts please read our Knowledge Base article on how to Make a New Post.
Reorder a Logo Image
The order of the logo image in the ‘Logo Image’ panel is determined by the publish dates of the posts that power them within the Posts module. The logo images will display in date order by default.
To reorder a logo image:
- Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
- Click on the ‘Boards’ tab.
- Select the board that has been configured to display in the Logo Image slideshow.
- Select the post representing the logo image that you want to reorder.
- Click into the ‘Start Date’ field and update the existing date. If the start date of the post is more recent than another post, it will display before it in the slideshow. If the start date is older, the post will display after it.
- Click on the ‘Update’ button at the bottom of the post interface.
Remove a Logo Image
To remove a logo image from the ‘Logo Image panel, delete the post that powers it within the Posts module:
- Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
- Click on the ‘Boards’ tab.
- Select the board that has been configured to display in the Logo Image slideshow.
- Select the post that you want to remove.
- Click on the ‘Delete’ icon button at the bottom of the post interface.
- Confirm you want to delete the post in the ‘Delete Post’ validation window.
Logo Image Panel Options
There are some options for some minor customizations for the Logo Panels.
- No Title - if you would like to display the image without a title:
- Hover over the Post Element and click on the 'gear' icon in the top-right corner
- Click on '+ Content Details' to expand. Uncheck the 'Post Title' checkbox
- Click on the 'Save' button at the bottom right of the Post interface.
- No Borders - if you would like to remove the dividing borders between each logo image:
- Hover over the Post Element and click on the 'gear' icon in the top-right corner
- Click on '+ Design' to expand. In the 'Custom Class' field, type in "no-borders"
- Click on the 'Save' button at the bottom right of the Post interface.
- Slide 5 images at a time: we recommend using the settings in the post element that are currently set by default, these settings will scroll the images 1 at a time and is set to 'List'. If you prefer to scroll the entire slide that contains 5 items per slide:
- Hover over the Post Element and click on the 'gear' icon in the top-right corner
- At the top of the Post Element, click on the 'Slideshow' option
- Click on '+ Controls' to expand. User control type should be set to 'Arrows'
- Remove 'External Redirect URL' link and link to a popup or separate page:
- Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
- Click on the ‘Boards’ tab.
- Select the board that has been configured to display in the ‘Logo Image’ panel. Select a post.
- Click on 'External Redirect URL and remove the URL that is displayed in the 'External Redirect URL' field.
- Click on 'Body Content' and enter your content
- Click on 'Update' at the bottom right corner of the Post.
- Display on an Interior Page:
- Hover over the Logo Panel Container Element and click on the 'copy' icon in the top-right corner
- Paste onto your interior page
