BrandSetGrow: Affordable Web Design

View Original

How To Create A Logo Slider On Squarespace In 4 Easy Steps

Rita Margarida Jerónimo

Creating A Logo Slider On Squarespace!

One of the first things you need to show credibility to your website visitors is to showcase your social proof. This means showing what other people have experienced while working with you or using your product.

You can do exactly the same with a testimonial banner, but another great way to do that is to feature the logos of big clients you’ve worked with and brands that featured you.

Let’s show your potential clients some credibility! Let’s go…

How To Create A Logo Slider On Squarespace In 4 Easy Steps

Step 1: Gather The Logos

Before using clients’ logos on your website, ask them for permission. Once they give you green light, ask them to send you their logo.

PRO TIP: Make sure they send you a file with good quality (high resolution preferably), and with a transparent background.

Step 2: Add A Carousel Gallery Block

Next, let’s add the course gallery block to the page you want the logo slider to be featured.

  • Navigate to the page you want to add your featured logos to

  • Click EDIT

  • Find the section of the page you want to add your slider

  • Add a GALLERY block

Step 3A: Design Static Logo Slider

Next, you need to upload the files and design the slider. If you want to design a static logo slider you need to:

  • Click UPLOAD IMAGES to upload the logos from your computer. Or click the PLUS (+) sign to add media already uploaded.

  • Go to the DESIGN section

  • Select GRID

  • Style as you wish, you can change the aspect ratio, the number of thumbnails per row, and the padding between images.

Step 3B: Design Dynamic Logo Slider

Next, you need to upload the files and design the slider. If you want to design a dynamic logo slider you need to:

  • Go to the DESIGN section

  • Select CAROUSEL

  • Style as you wish, you can choose if you want to automatically transition between images, show next and previous controls, and alignment.

STEP 4: Styling The Logo Slider

Now it’s time to math the logo slider to your website’s style by adding custom CSS code. The code below will add a greyscale to the logos you’ve added to your slider.

  • Go to DESIGN > CUSTOM CSS

  • Copy and paste the code below into the box

  • Hit SAVE


/*Style Logo Slider*/
.sqs-gallery-block-grid {
  -webkit-filter: grayscale(100%);
}


If you choose to design a dynamic logo slider you need to add the following CSS code:

/*Style Logo Slider*/
.sqs-gallery-design-strip-slide {
  padding: 0px 20px 0px 20px;
  -webkit-filter: grayscale(100%);
}

Final Thoughts

That’s it - Creating A Logo Slider On Squarespace!

We hope this article was clear and straight to the point! We have no doubt that after reading this you’ll be able to add an awesome logo slider to your Squarespace website.

Now it's your turn to tell us, after reading this article do you have any questions? Send us your thoughts, and any other concerns you might have, and we’ll do our best to answer them.

Want to start working on your online presence? Check out our free resources!

FIND THIS POST HELPFUL? YOU’LL ALSO LOVE THESE…

BE SURE TO GRAB OUR FREE TRAINING BEFORE YOU HEAD OFF!