One of the biggest misconceptions about Squarespace is that you need to know how to code to make your site look custom. That is not true. Squarespace 7.1 has an incredibly deep set of built-in design controls that most people barely scratch the surface of.

In this guide, we will walk through every built-in customization option, from the obvious ones to the hidden features that even experienced Squarespace users miss.

Site Styles: Your Global Design Control Center

The Site Styles panel (the paintbrush icon in the editor) is where you set the overall look of your site. Most people change their fonts here and move on, but there is much more available.

Hidden Site Styles settings most people miss

Global colorsDefine a site-wide palette. Change one color and it updates everywhere.

Button stylesShape (square, rounded, pill), fill (solid, outline, ghost), and hover effect — site-wide.

AnimationsType (fade, slide, scale), speed, and repeat behavior. Subtle animations add polish with zero code.

SpacingGlobal section padding, block spacing, and page margins. Often overlooked, huge impact on feel.

Section-Level Design Controls

Every section in Squarespace 7.1 has its own design controls. Click on any section, then click the pencil icon to access section settings.

Section height can be set to small, medium, large, or custom. Custom height gives you pixel-level control. For hero sections, you might want full viewport height.

Section backgrounds support solid colors, gradients, images, and videos. The image and video options include overlay controls (color tint and opacity), which let you place text over busy backgrounds without sacrificing readability.

Content width controls how much horizontal space your content uses within the section. A narrow content width creates an elegant editorial feel. A full-width setting works for image galleries and data-heavy layouts.

The Block Editor: Hidden Capabilities

Beyond basic text and image blocks, Squarespace offers specialty blocks that can replace many third-party tools:

Blocks that replace plugins

Summary BlockAuto-pulls content from blog, events, or products into a grid, carousel, or list. Perfect for “Recent Posts” on your homepage.

Form BlockContact forms, email signup, custom intake. Supports conditional logic and connects to Google Sheets / Zapier.

Spacer BlockPrecise vertical spacing with exact pixel heights. Much better than empty text blocks.

Page-Level Settings Most People Miss

Click the gear icon next to any page in the page panel. These settings are gold:

Navigation title vs. page title. The nav title is what shows in your menu. The page title is what shows in the browser tab and as your H1. These can be different — short nav title, longer keyword-rich page title.

URL slug. Change the auto-generated slug to something shorter and SEO-friendly. Keep slugs lowercase with hyphens.

Thumbnail image. Controls what shows when someone shares your page on social media. Without a custom thumbnail, Squarespace uses the first image on the page, which may not be ideal.

Mobile Optimization Without Code

Squarespace is responsive by default, but the mobile version of your site often needs attention. Use the mobile preview in the editor (the phone icon) to check each section.

Section stacking order matters. Sections that display side-by-side on desktop stack vertically on mobile. Font sizes should be checked — a heading that looks great at 48px on desktop might be too large on a phone. Image aspect ratiosaffect mobile layout significantly — tall images push content below the fold.

When You Do Need Code

Squarespace's built-in options cover about 80% of what most sites need. For the remaining 20%, that is where tools like ours come in. Our generators create CSS you can paste into the Custom CSS panel to achieve effects that are not possible with the visual editor alone.

What our tools add that Squarespace can't do natively

Button GeneratorGradient fills, glow effects, animated borders — styles the visual editor cannot produce

Gradient GeneratorMulti-stop gradients, radial gradients, animated gradient backgrounds

Animation GeneratorCustom scroll-triggered animations, hover transitions, entrance effects

Section BuilderCustom section layouts, alternating content patterns, hero variations

Always start with the built-in options. They are faster to implement, easier to maintain, and automatically responsive. Only reach for custom code when you have a specific design requirement that the visual editor cannot achieve.

Button Style Generator — Custom button effectsTry it free →

Gradient Generator — CSS gradient backgroundsTry it free →

Animation Generator — Scroll and hover animationsTry it free →

Section Builder — Custom section layoutsTry it free →

For in-depth tutorials on everything you can do with code, check out our developer guides.