How to create a slider testimonial in Squarespace
This tutorial was recorded in Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
Are you looking for a way to showcase amazing feedback on your Squarespace website? Look no further! In this step-by-step tutorial, you’ll learn how to create not one, not two, but THREE unique testimonial sliders using list sections in Squarespace, along with some custom CSS.
Each design uses a list section, and in the tutorial, you’ll learn how to create one. But if you want to jump ahead at any time, go for it! Under this video you’ll find time stamps for each of the three designs so you can skip ahead if you want to.
Testimonial Slider Design 1: Half image / half text
THIS DESIGN CONCPET STARTS AT 02:04
Here are the list section settings:
Design
Banner Slideshow
Layout width: full
Vertical padding: small
Alignment: left
Infinite scroll: enabled
Show adjacent slides: disabled
Style
Card: disabled
Navigation: arrows, center
Navigation offset: small
Here are the codes from the first slider design:
.slide-media-container {
width:50%!important
}.slide-content {
margin-left: 55%
}@media only screen and (max-width:640px){
.slide-media-container {
width: 50% !important;
margin-left: 25%;
height: 30%!important;
margin-top:5%;
}.slide-content {
margin-top: 40%!important;
margin-bottom: 0!important
}
}
Testimonial Slider Design 2: Centered top image / border around text
THIS DESIGN CONCPET STARTS AT 06:14
Here are the list section settings:
Design
Carousel
Max columns: 1
Image crop: circle
Alignment: center
Infinite scroll: enabled
Show adjacent slides: disabled
Style
Card: disabled
Navigation: arrows, bottom
Space above navigation: small
Size & Space
Media width: 10%
Media placement: center
Content width: large
Here are the codes from the second slider design:
.list-item-content{
border:1px solid #333;
border-radius: 15px;
padding-top:4rem;
padding-bottom: 1rem;
margin-top:-6rem!important;
width: 80%;
margin: auto;
background: #e5f5f6
}@media only screen and(max-width:640px){
.list-item-content__title {
max-width:80vw!important
}
.list-item-content{
margin-top:-2rem!important;
padding-top:1rem!important
}
}
Testimonial Slider Design 3: Left image / right arrows
THIS DESIGN CONCPET STARTS AT 09:32
Here are the list section settings:
Design
Carousel
Max columns: 1
Image crop: 3:4
Alignment: center
Infinite scroll: enabled
Show adjacent slides: disabled
Style
Card: disabled
Navigation: arrows, bottom
Space above navigation: 0px
Size & Space:
Media with: 10%
Media placement: left align
Content width: medium
Content placement: right align
Here are the codes from the third slider design:
.list-item-content{
padding:2rem;
background:#e5f5f6;
margin-top:-25%;
margin-bottom:5%
}.mobile-arrow-icon-background-area,.mobile-arrow-button{
border-radius:0!important;
}.mobile-arrow-button{
margin-top:-15%!important;
transform:translatex(30vw)!important}
@media only screen and (min-width:640px){
.user-items-list-carousel__media-container{
transform:translate(2rem);
}.user-items-list-carousel__arrow-button{
margin-top:-50%!important;
border-radius:0!important
}
}
If you liked this tutorial, you’ll love these! ❤️ I have older tutorials that will teach you how to customize other aspects of a Squarespace list section. Here are links to those if you want to check them out:
How to use multiple fonts in a list section title in Squarespace
How to customize list section buttons in Squarespace
