Documentation

1. Introduction

The Brand Logos Module is designed to help you showcase logos of brands, partners, sponsors, or clients in a clean, responsive, and customisable layout. It’s ideal for building trust and enhancing your brand presence on your website.

 

 

2. Installation and Setup

2.1 Install the Module from the HubSpot Marketplace
  1. Locate the Module: Search for “Brand logos Module” in the HubSpot Marketplace. 
  2. Click Purchase Module
  3. Select Your HubSpot Account: Choose which HubSpot portal to install the module.
  4. Complete the Installation: Follow the prompts and await the installation confirmation.

 

2.2 Add the Module to a Page or Template
  1. Open Your HubSpot CMS: Navigate to Content > Website Pages (or Landing Pages, if applicable).
  2. Edit or Create a Page: Click Edit on an existing page or create a new one.
  3. Drag & Drop the Module: In the Modules tab, find the Brand Logos Module and drag it into your page layout.
  4. Apply and Publish: Click Publish or Update to push your changes live.

 

 

3. Module Configuration

3.1 Logo Styling

The logo section is a key part of the Brand Logos Module, allowing you to control how each logo appears in the layout. Here’s how you can style it:

  1. Logo Width: Define the width of each logo to ensure consistent sizing across all items.
  2. Logo Alignment: Choose how the logo should be aligned within its container:
    • Left – Aligns the logo to the left.
    • Center – Centers the logo within its space.
    • Right – Align the logo to the right.
  3. Logo Image Ratio: Set the aspect ratio of the logo to maintain visual consistency and prevent image distortion.
  4. Hover Effect: Select how logos behave when hovered:
    • Shadow in Card – Applies a subtle shadow (works when used inside a card layout).
    • Remove Grayscale – Transitions the logo from grayscale to color on hover.
    • Increase Opacity – Makes the logo more visible when hovered.

 

3.2 Show Logo in Card View

Enabling the Card View wraps each logo inside a styled card container. You can customize the card’s appearance using the following options:

  1. Card Background: Choose the background style for the card:
    • Solid – A single-color background for a clean look.
    • Gradient – A smooth multi-color effect for a modern design.
  2. Card Border: Add a border to the card to separate it from the background. You can customize its color, width, and style.
  3. Card Shadow: Apply a shadow to give depth and a subtle 3D effect to the card.
  4. Card Spacing: Define inner spacing (padding) within the card for large, medium, and small screens to control content spacing across devices.
  5. Card Radius: Customize the roundness of the card corners to create a soft or sharp-edged look.

 

3.3 Layout Styling

Enabling the Card View wraps each logo inside a styled card container. You can customize the card’s appearance using the following options:

  1. Width: Define the content width for different screen sizes:
    • Large Screens (Above 768px) – Set the width for desktops and larger displays.
    • Small Screens (Below 768px) – Optimize the width for mobile users.
  2. Alignment: Choose how your content is aligned within the module:
    • Left, Center, or Right Alignment based on your design needs.
  3. Spacing Around Content: Adjust the spacing (padding/margin) for better layout:
    • Desktop – Set spacing for larger screens.
    • Tablet – Optimize spacing for medium-sized screens.
    • Mobile – Ensure perfect spacing for smaller screens.

 

 

5. Publish and Test

  1. Save Your Changes: Click Apply or Save in the HubSpot Page Editor. 
  2. Preview Your Page: Confirm that the Brand logos display correctly on desktop and mobile.
  3. Publish: Make your changes live so visitors can see and interact with your brand logos.

 

 

The Brand Logos Module offers a powerful and flexible way to showcase logos on your website with full control over layout, style, responsiveness, and interactivity. Whether you choose a grid or slider layout, card view, or advanced hover effects, the module is built to adapt to your design needs.

By utilising the available customisation options, you can create a visually engaging section that builds trust and highlights your partnerships effectively. We hope this documentation helps you make the most of the module.