--- title: Brand Logos Module – Setup & Customization Guide description: You can learn how to set up and customise the Brand Logos Module in HubSpot. This guide covers layout options, styling, responsiveness, and more to help you display logos effectively. --- [![Group 3](https://webbees.in/hubfs/Group%203.svg "Group 3")](https://webbees.in/?hsLang=en) # 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. ![](https://webbees.in/hs-fs/hubfs/CleanShot%202025-04-05%20at%2023-08-30@2x-png.png?width=700&height=363&name=CleanShot%202025-04-05%20at%2023-08-30@2x-png.png)   ###### 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. ![](https://webbees.in/hs-fs/hubfs/CleanShot%202025-04-05%20at%2022-05-41@2x-png.png?width=500&height=881&name=CleanShot%202025-04-05%20at%2022-05-41@2x-png.png)   ###### 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. ![](https://webbees.in/hs-fs/hubfs/CleanShot%202025-04-05%20at%2022-09-35@2x-png.png?width=500&height=495&name=CleanShot%202025-04-05%20at%2022-09-35@2x-png.png)   ###### 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. ![](https://webbees.in/hs-fs/hubfs/Frame%209-png.png?width=500&height=430&name=Frame%209-png.png)   ---   #### 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. Copyright © 2026 WebBees