Discover What You Can Build
500+ workshops, Techniques, and Resources Inside Standout Squarespace
Explore the library of techniques, templates, and resources available for you inside Squarestylist’s Standout Squarespace program. Standout students also get the commercial license to use these techniques in building Squarespace templates for sale.
Top Navigation for Stacked Tabs
Flip your Stacked Side Tabs navigation to the top using flexbox column-reverse—create a horizontal tabbed interface from vertical List Sections.
Control Summary Block Items on Mobile
Manage how many Summary Block items display on mobile devices with a simple CSS technique—reduce clutter without affecting desktop.
Video Block Aspect Ratio Fix
Override Squarespace's default video padding to achieve custom aspect ratios—perfect for vertical videos, cinematic widescreen, or square formats.
Phone Mockup Video Frame
Display videos inside a realistic phone frame overlay using CSS pseudo-elements—perfect for app demos, social media previews, or mobile-first showcases.
Stacked List Cards with Scroll Offsets
Create an elegant card-stacking effect where each list item sticks at a different vertical offset as visitors scroll—revealing colorful layered cards that stack on top of each other.
Full-Height Tabbed Grid Navigation
Build a full-height vertical navigation grid that spans your entire section—each tab stretches to fill available space with distinct colors and clickable areas.
Desktop Navigation on Mobile Devices
Override Squarespace's mobile hamburger menu to display your full desktop navigation on tablets and phones—keeping folder dropdowns and navigation structure intact.
Markdown Block Accordion System
Transform markdown blocks into accessible, animated accordions with automatic grouping—use any content type in expandable sections, not just text.
Disable Summary Block Item Links
Remove clickability from summary block items using CSS pointer-events, turning your summary blocks into display-only content showcases.
Style Store Collection by Category
Apply unique visual styles to each product category page using JavaScript body classes and CSS targeting, enabling category-specific banners and layouts.
Folder Tabs for Summary Block
Transform summary blocks into a tabbed folder interface with vertical desktop tabs and horizontal mobile tabs using Slick.js carousel integration.
Highlight Active Blog Category
Automatically style the currently active category in your blog archive block with custom colors and backgrounds using JavaScript class detection.
Stylish Carousel Summary Block
Transform your carousel summary blocks with visible overflow, rounded thumbnail borders, and repositioned navigation arrows for a polished editorial look.
Instagram and Gallery Block Marquee
Transform Instagram or grid gallery blocks into smooth, infinitely scrolling horizontal marquees using CSS keyframes and optional lazy-load fixes.
Custom Header Social Link Icon
Replace any header social icon with a custom image using CSS pseudo-elements and attribute selectors for both desktop and mobile navigation.
Style Blog List Items by Tag or Category
Apply unique styling to blog list items based on their tags or categories - add colored backgrounds, decorative graphics, or custom layouts to posts on the blog listing page.
Announcement Bar Scrolling Marquee
Transform your announcement bar into a smooth, continuously scrolling marquee with optional custom graphics between text repetitions.
Product and Blog Subtitles with Pipe Character
Add styled subtitles to products and blog posts by simply typing a pipe character in your title—no extra fields needed.
Fluid Section Full Width
Make Fluid Engine sections extend edge-to-edge by overriding the site's maximum width and gutter constraints for true full-bleed layouts.
Portfolio Grid Border Overlay on Hover
Add animated border overlays that expand inward when hovering over portfolio grid items. Each item can have its own unique border color.