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.
Fluid Video Block with Custom Masks
Make video blocks fill their containers completely and apply creative shape masks for unique video presentations.
Show Multiple Carousel Items on Mobile
Break free from the single-item mobile carousel limitation and display multiple list items side by side on smaller screens.
Weglot Language Switcher Custom Design
Transform Weglot's default language dropdown into a sleek inline switcher with language codes displayed side by side.
Portfolio Collection Sidebar Navigation
Add a sticky sidebar to your portfolio collection that displays custom content alongside your project grid for enhanced navigation.
Colorful Fixed Anchor Navigation
Create a playful side navigation with colored labels that slide out on hover, providing quick section jumps with visual personality.
Fixed Split Section Layout
Create a dramatic split-screen effect where one half stays fixed while the other scrolls, perfect for showcasing imagery alongside content.
Scroll-Triggered Style Changes After Hero Section
Dynamically change header styles, colors, or other elements once visitors scroll past your hero section using scroll detection.
Hide Last Name Field in Newsletter Block
Simplify your newsletter signup by hiding the last name field while keeping the form functional behind the scenes.
Fixed Side Navigation for Courses
Keep your course navigation always visible with a permanent sidebar that displays lessons and progress indicators for better student experience.
Decorative Section Border Lines
Add elegant decorative lines to split sections using CSS pseudo-elements for sophisticated layouts without additional elements.
Fullscreen Slideshow with Text Overlay
Create dramatic fullscreen slideshows with large typography overlaid on images using CSS positioning and clamp() responsive sizing.
Full-Width Logo Header
Transform your centered header layout into a full-width logo display with navigation below using CSS flexbox restructuring.
Custom Cursor Slideshow Arrows
Replace default Banner Slideshow arrows with a custom cursor image that follows mouse movement and rotates for left/right navigation.
Product and Blog Subtitles
Split product and blog titles at the pipe character to create styled subtitles using JavaScript DOM manipulation.
Gallery Slideshow Horizontal Counter
Replace default bullet navigation with numbered counters using CSS counter-increment for a sophisticated slideshow pagination display.
Curved Wave Headers
Add elegant curved wave borders to solid headers using CSS mask-image for organic, flowing header designs.
Page Background Color Change on Image Hover
Dynamically change section background colors when hovering over specific images using CSS :has() selector and image filename targeting.
Dynamic Archive Dropdown Display
Automatically display the active blog category name in your archive dropdown—no manual updates needed as visitors navigate your filtered blog pages.
Portfolio Hover Follow Title Spotlight
Create a dramatic spotlight effect where active project titles remain bold and visible while inactive titles fade to muted tones as visitors hover through your portfolio.
Custom Social Icons with Pseudo-Elements
Replace default social link text with custom icon images using CSS pseudo-elements—add any icon for any platform without touching the HTML.