Squarespace Full-Width Testimonial Slider using CSS

I am huge on self- education. More importantly, today I needed to take a "Summary Block- Testimonial Slider" in SquareSpace for my clients revamped website today. I scoured the internet searching for how to create this full-width effect with her testimonials. -- I foundNothing. 

Luckily, with a bit of tweaking, I was able to create the effect I needed pretty simply. 

For those of you out there trying to achieve the same... I feel you. So this one is for you! Read on.

Please note: This was created with the FIVE Template.

 
 
 
Step One | Create your Testimonial Slider 

What are are going to need to do is first create a blog. 

Start in PAGES --> GO TO + --> CLICK BLOG. 
It's best to name this Blog "Testimonials". From there go ahead and add your testimonials into separate posts. It's very important here to make sure you're clicking EDIT --> DESIGN--> and adding these testimonials into the EXCERPT section as well. This is the only way they will be visible in our SS Slider. 

 

Step Two | Create your Summary Block

Now we need to go to the page where we'd like to add the testimonial slider. Click EDIT PAGE and head to the + sign. In the drop down you'll find the SUMMARY section, we are looking to place the CAROUSEL module. Place that and head to your settings to add your title. Make sure to move the number of visible thumbnails down to 1. *Please note my test doesn't seem visible because I have preset my font to white.*

 
Hey, Lovely!

Want to keep up to date with the latest social media tips & tricks?
(Without Scanning the Internet?)
Join our mailing list to receive all of our Insta updates and business e-books
straight to you. With Love From Us.

Yes, I'm All In!
Step Three | Find your Testimonial Block- YUI Code  

Before we add our CSS you'll need to find the testimonial block "yui" code to start implementing the code. Let's start by finding the code! 

Enter FULL Screen mode on your Squarespace site and use your CONTROL + Right Click to find your INSPECT section. Click INSPECT and this will open up your DEVELOPER (DEV) TOOLS. I am using Chrome in this example, which is my recommendation. Here we need to head to the top left-most corner to find the inspect button, once that is selected you can hover over your testimonials box until the entire section is highlighted. Once you've found the correct block, click to bring up the HTML. Here you will see your "BLOCK-YUI_XXXXXXXXX" code. It may take a minute to spot it, but once you've got it you can right click to "EDIT HTML" and copy the code onto your computer's clipboard (it helps me to paste the BLOCK code into a note or sticky pad on my desktop for reference). 

Step Four | Adding your CSS Code   

Head to your DESIGN tab and find your CUSTOM CSS section. First we are going to start with adding a background color, for my client we went with fuschia. Make sure to copy and paste the code below, and replace my #block code with your own. Here you can choose to customize your background color as well! Choose your favorite html color code or RGBA code (for a more transparent look). If you don't know how or where to find those codes click here to go to HTML COLOR CODES.COM to find the right fit for your brand.

/*Testimonial Color*/
#block-yui_3_17_2_1_1522084168134_18538 {background: rgba(173, 35, 116, .7); 
}
/*End Testimonial Color*/

Next we will add the full-width feature using your same block code.  I have this customized to our site needs. You may need to try adjusting the "width: 98vw; & margin-left: -50 vw; "  either up or down in numbers to find the perfect fit for your needs. Have your position set to relative, and you can adjust your padding on the top and bottom again to your personal needs. If you have an image of your client for the testimonial there is a code that also helps resize and float the image to your liking. 

/*Fullwidth Testimonial*/
#block-yui_3_17_2_1_1522084168134_18538{
width: 98vw;
margin-left: -50vw;
position: relative; 
left: 50%;
padding-top: 100px;
padding-bottom: 20px; 
}
/*testimonial image*/
.summary-thumbnail-outer-container{
  width: 170px; 
  float: left; 
}

/*End Fullwidth Testimonial*/

Now I'll show you how to fix you text color and sizing, unique to only the testimonial slider. 

.summary-header-text : Will help you to adjust your title size. On my example it is What My Client's Are Saying. I've made the font a slightly transparent shade of white, increased the font size and fixed the padding to be more centered.

 

.summary-excerpt p{ = Will adjust the paragraph/ excerpt size within the box. Again I have adjust the padding to be more centered and used the same white font. 

 

.sqs-gallery-design-carousel .sqs-gallery-controls = Will let you change the color of the arrows for easy visibility.  




/*Testimonial Text Padding*/
.summary-header-text { 
  padding-left: 410px; 
  font-size: 40px; 
  color: rgba(255, 255, 255,.9)
  
}
.summary-excerpt p{
  padding-left: 200px; 
  padding-right: 200px;
  color: rgba(255, 255, 255,.9)
}

#block-yui_3_17_2_1_1522084168134_18538 .sqs-gallery-design-carousel .sqs-gallery-controls {
 margin-right: 73px;  
  color: white; 
  }
/*Testimonial Text Padding*/

Finally add in your media queries for a good mobile experience. 




/*Testimonial Text Padding*/
.summary-header-text { 
  padding-left: 410px; 
  font-size: 40px; 
  color: rgba(255, 255, 255,.9)
  
}
.summary-excerpt p{
  padding-left: 200px; 
  padding-right: 200px;
  color: rgba(255, 255, 255,.9)
}

#block-yui_3_17_2_1_1522084168134_18538 .sqs-gallery-design-carousel .sqs-gallery-controls {
 margin-right: 73px;  
  color: white; 
  }
/*Testimonial Text Padding*/



/*Mobile Style for Testimonial*/
@media only screen and (max-width: 640px) {
  
#block-yui_3_17_2_1_1522084168134_18538{
width: 100%;
position: relative; 
left: 50%;
padding-top: 100px;
  padding-bottom: 40px; 
}
  
.summary-header-text { 
  padding-left: 1px; 
  font-size: 24px;
  color: rgba(255, 255, 255,.9)

}
.summary-excerpt p{
  padding-left: 20px; 
  padding-right: 40px;  
}
  
#block-yui_3_17_2_1_1522084168134_18538 .sqs-gallery-design-carousel .sqs-gallery-controls .next:after, #block-yui_3_17_2_1_1522084168134_18538 .sqs-gallery-design-carousel .sqs-gallery-controls {
 margin-right: 173px;  
  }
}

  /*End Mobile Style for Testimonial*/
The final result!