Using the Style Editor to Customize Your Squarespace 7.1 Site
So, you’re all set to start creating your new Squarespace site but you’re scratching your head when it comes to using the style editor for Squarespace 7.1.
Don’t fret! This article is going to walk you through it, step-by-step, and at the end, you’ll be ready to start designing your site with you’re all-new customized fonts and colors.
And if you’re still in the planning stage… be sure to check out Planning a Squarespace Website: A Step-by-Step Tutorial
Table of Contents
Squarespace Site Styles: Global vs Specific
So what exactly are site styles, anyhow?
Site styles are the blueprint that tells Squarespace how to display your content. As you start adding images, text, buttons, and links, they naturally fall in line with the default style settings that are set up.
By customizing fonts, colors, and buttons, you're not just adding a personal touch. You're giving your site a unique flair that sets it apart from everyone else, giving it that special edge in the market.
Types Of Site Style Changes in Squarespace 7.1
1. GLOBAL SITE STYLE CHANGES
The global site style editor is in your site's Design Panel. Any changes made here ripple across the corresponding design elements throughout your ENTIRE site. For instance, tweaking your button font here gives a fresh look to all buttons on your site.
2. SPECIFIC SITE STYLE CHANGES
These tweaks happen right on THE PAGE you're working on.
The settings depend on the content you're editing. Click Edit on the page, then head to Section Settings or Content Block Settings. Changes made here are focused, affecting only that specific section or content block.
Choosing the Right Sequence: Global or Specific Changes?
Always start with global adjustments in the Design Panel (Site Styles Editor). Think of it like setting the overall aesthetic for a home renovation. You're choosing the materials that will define your entire design theme.
Once you've picked out your custom finishes, it's time to figure out where to put them in your "home." This is where on-page editing kicks in.
When you tweak Section Settings via the Style Icon, you're specifying which colors from your overall palette will be applied to that particular section.
Remember, the global editor lays the foundation for the styles you'll use across your site, while section settings apply those styles with precision.
Today, we're taking a deep dive into the three heavy hitters in the global site styles that shape your site's look and feel the most: fonts, colors, and buttons.
Creating a Squarespace site styles moodboard page
Before we even venture into the site styles menu, let's carve out a little space for creativity on your site.
Personally, I find immense value in creating a virtual mood board right within Squarespace. I assemble a representation of each element I'll be styling on a single page.
This brilliant approach allows you to witness changes in real time, making for a seamless comparison of all the elements together.
Just create a page in the “not linked” section of your site, and slot in all the headings, body copy, and buttons. Just like this:
Opening the Squarespace site styles menu
Alright, let's dive into the exciting part: setting up your fonts and colors!
Head over to the Design tab and select "site styles." This action triggers a menu to appear on the right, putting your current page in editing mode. Here, you can introduce your chosen fonts, tweak colors, and refine the appearance of common blocks like buttons and image layouts.
Let’s get into it!
Customizing Fonts in Squarespace 7.1
When it comes to fonts in Squarespace 7.1 Fluid Engine, here's what you need to know:
Font Packs for a Unified Look: These are pre-defined font pairings that apply to your entire website. They encompass various sizes, weights, and letter spacing, creating a cohesive visual experience.
Global Styles for Precision: Customize individual fonts for headlines, paragraphs, buttons, and other elements like product prices and blog navigation. This ensures every aspect of your content is on-brand.
Fine-tuning with "Assign Styles": After setting your core fonts globally, you can further adjust fonts for specific blocks. For instance, you can choose a distinct font for your site's logo and control attributes like size, letter spacing, and font weight.
Dynamic Font Options: As you add content blocks, they'll appear in the "Assign Styles" menu. This feature allows you to tweak fonts for each block, ensuring consistency throughout your site.
BUT FIRST, BEFORE STYLING FONTS…
Before we dive into font selection, consider doing some pre-planning for your Squarespace site.
This ensures your design not only looks great but also resonates with your target audience. It's a strategy that not only speeds up the design process but also ensures your site aligns with Google and SEO standards.
Discover the step-by-step tutorial in this article: Planning a Squarespace Website
Styling Fonts in the Design Panel
Navigate to Design > Fonts.
Squarespace provides a wealth of ready-to-use font packs curated by their design team. These pairings are designed to streamline font selection, ensuring harmonious combinations.
If you're looking for something more specific, you can customize your pairings by selecting a pack, saving it, and exploring further customization options.
Within each font pack, you'll focus on four key font groups:
Heading fonts: For titles, section headers, and prominent text.
Paragraph Fonts: Used for the main body of your content.
Button fonts: Applied to labels on buttons across your site.
Miscellaneous: Covers tags, categories, pricing, etc., for text not added through a text block.
Under Assign Styles in your Font Panel, you can assign fonts to your site title, navigation, and header button. This can be from your chosen font pack or a custom selection.
Each of these font groups allows adjustments to:
Font family: Pick the perfect style for your brand.
Font Weight: Adjust boldness or thinness.
Font Style: Choose between normal and italicized.
Line Spacing & Height: Set the white space between lines or letters.
Text Transform: Opt for all caps or lowercase.
Remember, Squarespace emphasizes brand consistency by using different font sizes for headings, rather than an array of fonts. This maintains a clean aesthetic and improves site speed for optimal SEO. Adjust font sizes easily in the font panel. Additionally, you can alter the size of all fonts with a single click using the plus or minus buttons beside Base Size.
Mastering Color Customization in Squarespace 7.1
Alright, let's dive into the COLOR CUSTOMIZATION!
Head over to "Site Styles" and choose "Edit Colors."
You've got two paths: let Squarespace help you choose a palette, or create/add your own unique palette. These choices pave the way for ten unique color themes that Squarespace will automatically generate for you.
Crafting a Striking Color Palette
Want a quick and stunning palette? Use Squarespace’s very own built-in color generator!
Designing a Custom Palette from Scratch
To add your own, pre-selected colors, you can use 'hsl' or 'hex' codes under the Custom section. Hex codes are just the string of numbers and letters following a # that specify colors for screens.
3 Ways to Create Your Custom Palette
Use a Designer Palette: Perfect for a fresh start with pro-designed palettes. (Our free, Canva Brand Board template is perfect for this!) All you have to do is input the Hex codes.
Utilize the Image Color Picker: Got a defining image? Let Squarespace pull the palette to match your brand’s essence.
Choose Your Main Accent Color: Handpick a primary hue, and Squarespace will present complementary palettes.
And for those initial color-picking jitters, these two resources have got your back:
Article: Planning a Squarespace Website: A Step-by-Step Tutorial
Free download: Canva Brand Board templates with 12 pre-designed font and color combinations.
Making Your Palette Work for You
Here’s a good rule to follow when inputting your own palette: Take Squarespace's lead when it comes to assigning colors.
Each shade has a role, from the brightest to the boldest. This helps your ten palettes dance in harmony, creating a seamless, captivating design. So where it says “lightest” enter your lightest color, “darkest”, your darkest color, and so on.
Customizing Squarespace 7.1 Color Themes
Effective web design involves breaking content into digestible sections. Contrasting section colors or backgrounds help guide visitors. Squarespace 7.1 offers the flexibility to set multiple section themes globally, allowing for intricate design control- this is where those 10 palettes come into play!
I LOVE this feature, and it makes designing a whole site infinitely faster than it was before.
Creating Your First Section Themes
Alright, let’s see these section themes in action and style them.
Begin by crafting two simple section themes - one with a light background, the other with a contrasting, darker tone.
Duplicate your mood board section for an instant side-by-side preview.
To see your section theme edits in real-time, enter on-page Section Settings, apply the desired themes, and start styling.
Customizing Button Styles in Squarespace 7.1
Now, let's talk buttons! In Squarespace 7.1, refining your website's button style is a breeze. Head over to Design > Buttons and you’ll be able to adjust these settings:
Button Style: Take your pick between a solid, dependable look or an outlined clean-cut vibe.
Button Shape: Decide if your buttons rock a square, exude a rounded charm, or embrace that pill-shaped allure.
Padding: It's all about that breathing space. Define the gap between your button's edge and its text for that perfect, polished finish.
These tweaks? They ripple across your entire site, adding that extra oomph.
Collection pages: Blog and Shop Site Styles Essentials
In Squarespace 7.1, collections play a pivotal role in hosting various page types such as products, blog posts, events, and portfolios. And the beauty? Styling these- just like everything else- is a consistent, streamlined process.
To add a collection, simply proceed as you would with a regular page: head over to Pages and hit the plus sign. You'll find four types to choose from:
Blog
Store
Portfolios
Events
Once you've added your collection, it's layout-choosing time. Don't stress, you can always fine-tune it later.
Collection pages function much like standard pages. You can seamlessly incorporate additional sections before and after the main posts grid, whether it's for blog posts or shop products.
For tweaking the style settings of the collection pages, navigate to the section settings containing the blog posts (or portfolios, or products).
From there, you can refine the typography, colors, or spacing for the collection.
Oh, and one last nugget of wisdom: if you're on a hunt for a particular style setting and it's playing hide-and-seek in the section settings, it's probably waiting for you in the global site styles design menu.
Wrapping Up: Mastering Squarespace 7.1 Site Styles Editor
Bravo! You've just completed a grand tour of Squarespace 7.1's Site Style Editor, and you’re ready to sculpt your website into a visual masterpiece.
From fonts to colors, buttons, and even collections, we've left no style stone unturned.
Always keep in mind that the Style Editor is your creative kingdom.
It's where your brand comes to life. So, go ahead- refine and let that one-of-a-kind style of yours dazzle!
Here's to your Squarespace site, now on it’s way to becoming the masterpiece of your unique vision!
Meet Sarah
Sarah is an award-winning Designer, Creative Director & Brand Strategist for global companies turned entrepreneur. She’s passionate about empowering entrepreneurs & small business owners with tools and services that transform the way they build their brands and businesses.