How To Use The Style Editor: Bedford Template

Designstaq’s mission is to help all busy founders have their own professional website. Whether it’s working with us or learning it on your own, consider it our duty to make sure you get there – and our Squarespace for Beginners series covers just that.

For our last session, we celebrated a new milestone. After covering the basics of Content by tackling the fundamental Pages you can build for your site – whether it’s your Home, Contact or About Pages – we were finally able to move on to the other building block of websites: Style.

So what is Style? As we’ve reiterated in the past, if Content is the data you present, then Style covers the principles and norms that ensure this data is presented well – whether functionally on a user-experience level or aesthetically on a this-looks-good-to-the-normal-person level.

When we first discussed Style, we saw it from the lens of how Squarespace is built. When you visit your Style Editor pane, the settings under it dictate how your site and its Content look like. This is all well and good when you’re building out your site, but it can be frustrating once you find out that the settings aren’t standardized per template.

There are pros and cons to this set-up: Squarespace offers you deep customization by giving you options on multiple types of templates, but it can be time-consuming to learn how each template’s Style Editor settings work.

Since templates vary widely on their Style Editor settings, our next posts will be tutorials covering the most popular and commonly used templates. We’ll be taking you through a step-by-step guide on how to toggle the settings on your most basic Style settings on a per-template level, and we’ll even recommend which templates are best if you want certain features.

THE BEDFORD TEMPLATE: WHY IT’S GOOD AND HOW TO USE IT

Today, we’ll cover one of the classic Squarespace templates: Bedford. As far as templates go, you can use this one when you want each page to have a banner. It’s also pretty straightforward and easy to customize.

As for its features, what’s great is that Bedford lets you have a page banner slideshow featuring multiple images. You can also have a strong call-to-action in your header by turning the last link in your primary navigation into a button.

Now that we know the basics of what Bedford is good for and why, let’s tackle how to change its particular settings using the two basic components of Style: Typography & Color.

HOW TO CHANGE TEXT & COLOR ON BEDFORD

Bedford is a pretty straightforward template. If you want to change your Typography, simply click the Style Editor setting when it contains the word “Font” in it:

Then if you want to change the color, simply do the same – toggle the setting that says Color:

The rule of thumb to know which Content Block you’re changing is to make sure you’re checking your Style Editor headers:

Here’s a neat trick: if you want to make sure only exactly which Style Editor settings you can play with for a specific Content Block, simply click on the block and your Style Editor settings will adjust. Try hovering over your Site Title, for example:

Notice how a blue line appears around it. Try clicking it. Your Style Editor Pane should change like so once you do:

Isn’t this great? Now you know that the only Style Editor settings you can tweak for your Site Header encompass your Font, your Color, and its Container Width.

Now that you know how to do basics, try tweaking your settings now based on what you like. The key to learning how to toggle is really just doing this via trial-and-error.

SMALL WINS

When we made this series, what we had in mind was a way for founders to change the fundamentals of their site – basically help you gain small wins as you start building the website of your dreams. We hope that today’s tutorial has shown you that Squarespace doesn’t have to be as hard as it seems.

Tune in next time as we tackle another popular template: Foster. If you have any questions or need more tips from us, feel free to schedule a consultation by clicking the button below. See you next time!