How to create a slider testimonial in Squarespace // Squarespace Testimonial Slider Tutorial

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.

02:04 Testimonial Slider Design 1: Half image / half text
06:14 Testimonial Slider Design 2: Centered top image / border around text
09:32 Testimonial Slider Design 3: Left image / right arrows

Get the steps and code below, or from my blog: https://insidethesquare.co/squarespac...

Section ID Finder Chrome Extension: https://chrome.google.com/webstore/de...

Slider 1 Settings & CSS (02:04)
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
CSS:
.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}}

Slider 2 Settings & CSS (06:14)
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
CSS:
.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}}

Slider 3 Settings & CSS (09:32)
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 width: 10%, Media placement: left align, Content width: medium, Content placement: right align
CSS
.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 }}

- - -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ https://buymeacoffee.com/insidethesquare
- - -
📑 Get access to my collection of CSS codes for Squarespace at https://insidethesquare.co/css
- - -
⭐ NEW: List of my top 7 FREE Squarespace tutorials: https://insidethesquare.co/top7
- - -
🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.
- - -
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM →   / thinkinsidethesquare  
👍 FACEBOOK →   / insidethesquare  
📌 PINTEREST →   / insidethesquare  
- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → https://insidethesquare.co/inside10
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥