The scrolling marquee block is an exciting content block available in Squarespace. The second it came out, I released a brand new video to teach people how to use it! The number one thing that people wanted to do was display images in this content, which it just couldn’t do.
But lucky for us, we can still make that magic happen on a Squarespace website thanks to CSS!
In this tutorial, you’ll learn how to set up a gallery section in Squarespace 7.1 and then use custom code to animate it so the images scroll across the screen.
When you’re ready to give it a try, watch the tutorial video and follow these steps:
Step 1: Create a Gallery Section First things first, you’ll need to create a Gallery Section in Squarespace. To do this, open up your site editor, and select Add Section. Select Images from the menu and pick an auto layout indicated by the ⓘ in the top right-hand corner of the preview.
Step 2: Add Your Images Upload your images to the gallery section and be sure to set the design layout to Grid: Simple.
Step 3: Add Custom CSS Now for the fun part - adding some custom CSS to create the scrolling effect! For this scrolling image marquee, we’ll be using the CSS animation property. Here’s the code you’ll need to add.
#page {
overflow-x:hidden
}
.gallery-grid-wrapper {
display:flex !important;
animation: slideshow 30s linear infinite
}
.gallery-grid-wrapper .gallery-grid-item {
min-width: 50%;
margin-right: 5%
}
@keyframes slideshow {
0% { left: 0; }
100% { left: -225%; }
}
Step 4: Update the code time, width, and keyframe percentage for your unique website style
Optional: use the collection id to apply this animation to a specific gallery section. Here is a link to the free Chrome extension that I used in the video; not affiliated with this extension or its creators, just a fan! chrome.google.com/webstore/de...
And there you have it - a set if horizontally scrolling images on your Squarespace website! With a bit of custom CSS, you can create a unique and eye-catching effect that will impress visitors and make your site uniquely yours.
Ready for more? Get instant access to my collection of custom codes specifically for Squarespace! insidethesquare.co/css
- - -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ buymeacoffee.com/insidethesquare
- - -
⭐ NEW: List of my top 7 FREE Squarespace tutorials: insidethesquare.co/top7
📑 Download my collection of CSS codes for Squarespace at insidethesquare.co/css
🙋 Need some help? Visit insidethesquare.co/code-help to see my current support options.
- - -
💻 WEBSITE → insidethesquare.co
📧 NEWSLETTER → 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 → 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 ♥
17 апр 2023
