Side-by-side slideshow design using auto layouts in Squarespace 7.1
I don’t know about you, but I’m really liking Squarespace’s Auto Layouts.
Personally, I think they’re pretty versatile, and I love how we don’t have to rely on the Gallery Sections anymore to create slideshows and carousels. Sometimes it’s necessary to have more room to add text, don’t you think?
Anyway, I’ve been playing with these layouts lately and came up with a really cool and bold way to display content using the Slideshow option.
And today, I want to share that customization with you!
I feel this would be great for testimonials or steps of a process, but it’s up totally up to you how you use it!
01 | CHAPTERS
00:00 - Intro
00:22 - Setting up the slideshow Auto Layout
03:06 - Setting the slide content side-by-side
06:43 - Inverting the content placement
07:50 - Fixing cropped images
10:35 - Adding spacing inside the slides
11:24 - Adding a rounded border to specific corners
13:44 - Stacking slide content on mobile
15:17 - Fixing an overflow issue
17:01 - Adding spacing on mobile
02 | BLOG POST + RESOURCES
Find related tutorials, notes, and any code mentioned in this video:
https://beatrizcaraballo.com/blog/squ...
03 | WORK WITH ME
Need help with a Squarespace client project?
From brainstorming the best approach to hands-on implementation, I help designers navigate tricky builds and move forward with confidence:
https://beatrizcaraballo.com/services
04 | THE SOURCE NOTES
Get weekly customization tips and troubleshooting insights based on real Squarespace project challenges:
https://beatrizcaraballo.com/notes
05 | SUPPORT + INQUIRIES
Have a project challenge you’d like help with?
I prioritize client inquiries, but I also use questions and challenges I receive to inspire future tutorials. Reach out here:
https://beatrizcaraballo.com/contact
06 | NOTE
The code shown in this video is provided as-is and may need adjustments depending on your specific project and Squarespace settings.
07 | KEYWORDS
squarespace auto layout, squarespace auto lists, squarespace slideshow, squarespace auto layout slideshow, squarespace auto list slideshow, squarespace css tutorial, squarespace 7.1, custom css squarespace, squarespace web design, squarespace custom code, squarespace web development, squarespace design tutorial, squarespace site customization, squarespace code implementation, squarespace css tricks