SQUARESPACE
COURSE
OVERVIEW

Turn a gallery slideshow into a polished testimonial display with centered captions, a custom title overlay, and flanking decorative images — all without plugins.

Cycle through visual states on a timer — swap background colors, reveal different images, and animate text changes at custom intervals using a single section anchor.

Stack list items as layered cards that slide apart on hover, revealing content beneath — a dramatic tabbed interface built entirely from a Squarespace List Section.

Give visitors an interactive font preview right on your Squarespace site — with live typing, adjustable size and tracking sliders, and support for custom font files.

Transform Squarespace's announcement bar into a floating, rounded banner pinned to the bottom of the screen — with inline text and pill-shaped CTA buttons.

Restyle the Squarespace newsletter block with clean bottom-line inputs, transparent backgrounds, and a stacked vertical layout — for a minimal, editorial look.

Pair Squarespace's built-in audio block with a live-synced transcript that highlights text in real time as the audio plays — making testimonials and key messages more accessible and engaging.

Arrange your Squarespace list items in a circular orbit around a central image — with clickable labels, an active dot indicator, and a content reveal at the center.

Automatically show different content based on your visitor's location — with a manual toggle so they can switch between regions themselves.

Add clickable hotspots to any image that reveal slide-out info panels — perfect for property maps, product diagrams, or interactive portfolios.

Transform your List Section into a horizontal scrolling showcase — scroll down normally and watch items slide sideways through a sticky viewport.

Turn your gallery grid into interactive flip cards — click an image and it rotates to reveal caption content and a call-to-action button.

Build a fully accessible tabbed interface with keyboard navigation and screen reader support. Tab titles from text blocks, content auto-wired. No accordion limitations.

Make gallery slideshows fill their Fluid Engine container perfectly. Custom arrow icons, flexible caption layouts, and proper image scaling. Pure CSS solution.

Create a swipeable video carousel with elegant numbered pagination. Touch-friendly navigation, auto-numbered slides, smooth transitions for video portfolios and showreels.

Menu that slides in while page content pushes aside with shadow depth. Numbered menu items, MENU/CLOSE pill button, smooth half-second transitions. Premium navigation feel.

Layered text effect with stroked outline text over solid text. Content scrolls through transparent letterforms. Editorial knockout typography effect.

Oversized sticky headline with floating rounded video frame scrolling over it. Layered editorial composition with device-like media framing.

Gallery images rotate in a continuous circle around the viewport. 50-second orbital animation, configurable item sizes, responsive scaling. Unique ferris-wheel gallery effect.

Make folder navigation titles function as clickable links to landing pages while still revealing dropdown menus on hover.

Transform your list section carousel into an elegant testimonial slider with circular avatars, reordered content layout, and bordered cards.

Transform list sections into an interactive grid where clicking items reveals detailed content in a sleek side panel overlay.

Replace standard navigation with an elegant slide-out menu system featuring dual content panels, custom hamburger icons, and smooth transitions.

Create a fixed sidebar dot navigation that tracks scroll position and highlights the currently visible section, with smooth scroll-to-section functionality.

Transform Squarespace's native audio block into an elegant inline pronunciation player with animated speaker icons and click-to-play functionality.

Enable markdown-style formatting within Squarespace list item descriptions - transform plain text into structured headings and bullet lists using simple syntax.