If you want to showcase multiple logos on your Squarespace website and have them scroll smoothly, you're in the right place. This guide will take you through the steps to create a scrolling logo feature that enhances your website's aesthetic and functionality.
Step 1: Choose Your Logo Images
Before you begin, gather all the logo images you want to display. Ensure they are high-quality and optimized for web use. Ideally, you want to keep the file sizes small to avoid slowing down your website's loading time.
Step 2: Add an Image Block
- Log into your Squarespace account and navigate to the page where you want to add the logos.
- Click on the Edit button of the page section.
- Click the Insert Point (the + icon) and choose the Image Block.
- Upload your first logo image.
Step 3: Add More Logos
Repeat the process of adding images for each logo you'd like to include. After uploading all your logos, make sure to arrange them in the desired order by dragging them within the image block.
Step 4: Create a Gallery or Carousel
To achieve the scrolling effect, you will want to use a Gallery Block or a Carousel:
-
Gallery Block:
- After adding images, choose the Gallery Block from the insert menu.
- Select the layout that fits your design preference (Grid, Slideshow, or Carousel).
- Ensure that each logo is added as an item in the gallery.
-
Carousel Block:
- If you prefer a more dynamic scrolling effect, you can use the Carousel Block instead.
- Add your logo images to the Carousel Block. This will allow them to scroll horizontally.
Step 5: Customize the Style
Adjust the Settings
- With the Gallery or Carousel block selected, you can customize the layout, spacing, and display settings in the block editor.
- Adjust settings like Image Aspect Ratio, Slide Duration, and Autoplay to suit your preferences.
Style with CSS (Optional)
If you're comfortable with custom CSS, you can further enhance the look and functionality of your logo scrolling feature. To do this:
- Go to Design > Custom CSS.
- Add your CSS code to customize the appearance, such as margin spacing, hover effects, or transitions.
Here’s an example of a simple CSS code you can add to make your logos look more appealing:
.carousel-item {
margin: 0 15px;
}
.carousel-item img {
max-width: 100px; /* Set a maximum width */
transition: transform 0.3s ease;
}
.carousel-item:hover img {
transform: scale(1.1); /* Scale effect on hover */
}
Step 6: Preview and Test
After customizing, click on the Save button and preview your page. Make sure to test the scrolling feature on different devices to ensure it’s responsive and visually appealing.
Conclusion
By following these steps, you can easily get logos to scroll on your Squarespace website. This feature not only enhances your site's design but also provides an engaging way to showcase partners, clients, or sponsors. Happy designing!
