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.
Global colorslet you define a site-wide color palette. Once set, these colors propagate throughout your entire site. Change one color and it updates everywhere. This is the most efficient way to rebrand or refresh your site's look.
Button styles are configurable globally. You can set the shape (square, rounded, pill), the fill style (solid, outline, ghost), and the hover effect. This ensures consistency across all buttons site-wide.
Animation settings control how elements appear as you scroll. You can set the animation type (fade, slide, scale), the speed, and whether animations repeat on re-entry. Subtle animations add polish without requiring any code.
Section-Level Design Controls
Every section in Squarespace 7.1 has its own design controls, and they are surprisingly powerful. 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. For content sections, medium or custom typically works best.
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
The block editor is where most people spend their time, but few explore its full potential. Beyond basic text and image blocks, Squarespace offers specialty blocks that can replace many third-party tools.
The Summary Block automatically pulls content from your blog, events, or products and displays it in a grid, carousel, or list. It is perfect for featuring recent posts on your homepage without manual updates.
The Form Block handles contact forms, email signup forms, and custom intake forms. You can customize fields, add conditional logic, and connect responses to Google Sheets or Zapier.
Spacer Blocks give you precise vertical spacing control. Instead of adding empty text blocks or adjusting section padding, a spacer block lets you set exact pixel heights.
Page-Level Settings Most People Miss
Every page in Squarespace has settings that most users never open. Click the gear icon next to any page in the page panel to access them.
Navigation title versus page title.The navigation title is what shows in your menu. The page title is what shows in the browser tab and as your page's H1 heading. These can be different, which lets you use a short nav title and a longer, keyword-rich page title.
URL slug. By default, Squarespace generates the URL slug from your page title. You can change it to something shorter and more SEO-friendly. Keep slugs lowercase, use hyphens instead of spaces, and include your primary keyword.
Thumbnail image. This image appears 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. Set a specific image that looks good at social media dimensions.
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 see how each section looks on small screens.
Section stacking order matters on mobile. Sections that display side-by-side on desktop stack vertically on mobile. Make sure the stacking order makes sense for the mobile reading experience.
Font sizes should be checked on mobile. A heading that looks great at 48px on desktop might be too large on a phone screen. Squarespace automatically scales fonts down, but the result is not always optimal.
Image aspect ratios affect mobile layout significantly. Tall images push content below the fold. For hero sections, consider using a shorter image or video on mobile.
When You Do Need Code
Squarespace's built-in options cover about 80 percent of what most sites need. For the remaining 20 percent, that is where tools like ours come in. Our Button Style Generator, Gradient Generator, and Animation Generator create CSS you can paste into the Custom CSS panel to achieve effects that are not possible with the visual editor alone.
But 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.
Explore More
For situations where you do need a little code, browse our free tools collection. Each tool generates copy-paste code so you do not need to write CSS from scratch. And for in-depth tutorials, check out our developer guides.