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.
Column Divider Lines
Add vertical separator lines between content columns for clean, editorial-style layouts without extra blocks or images.
Circular Blog Thumbnails
Transform rectangular blog thumbnails into perfect circles using simple CSS border-radius.
Prevent Horizontal Overflow
Fix unwanted horizontal scrolling and overflow issues with a simple CSS solution.
Circular Summary Block Thumbnails
Transform rectangular Summary Block thumbnails into perfect circles — ideal for team photos, testimonials, and softer design aesthetics.
Custom Bullet Point Icons
Custom bullet icons using images or color-responsive SVG masks - brand-aligned list styling.
Custom Social Media Icons
Add TikTok, WhatsApp, or any custom social icons not included in Squarespace defaults.
Rounded Pill Newsletter Form
Pill-shaped newsletter form with seamless rounded input and button - modern capsule design.
Grid Gallery Hover Overlay
Grid gallery with title overlays appearing on hover - colored backgrounds and centered text.
Blog Masonry with Text Overlay
Masonry blog layout with centered text overlay on images - elegant collage design.
Vertical Rotated Header Navigation
Create sidebar-style navigation with rotated vertical text.
Custom Carousel Testimonial Arrows
Replace default carousel arrows with custom SVG icons and precise positioning.
Fixed Side Navigation for Blog Posts
Keep previous/next navigation visible on screen edges while reading blog posts.
Grid Columns with Line Dividers
Add clean vertical line separators between grid columns for an editorial, newspaper-style layout.
Strikethrough Price in Buttons
Display crossed-out original prices in buttons for sales and promotions.
Custom Social Icon Colors and Hover Effects
Take full control of your social icon colors — set custom default colors and create engaging hover effects that match your brand.
Floating Overlapping Section Banner
Create a section that floats above adjacent content with a dramatic overlapping effect — perfect for callouts and featured content.
Carousel Arrows Bottom with Side-by-Side Layout
Reposition carousel arrows to the bottom and transform your summary block into a side-by-side layout with thumbnail and content columns.
Customize Carousel Arrows
Replace default carousel arrows with custom SVG icons using CSS pseudo-elements and inline data URIs for branded navigation controls.
Gallery Slideshow Side-by-Side Text
Transform your gallery slideshow into a split layout with images on one side and text content on the other for an editorial presentation.
How to Display Poster Image Titles on Hover in Squarespace
Reveal image titles only when visitors hover over your poster-style images, keeping your layout clean until interaction happens.

