How to Brand Your Website with Squarespace's Style Editor

How to Brand Your Website with Squarespace's Style Editor | As a small business owner you might need a little brand and web design help. This post will help you customize your colors, fonts, templates and much more at www.jordanprindledesigns.com #branddesign #webdesign

Squarespace is a great platform for small business owners with limited design experience. The intuitive software, minimal learning curve and well-crafted templates make designing a website a breeze. 

But, when you're designing your website you need to go past adding your content into a template. You need to brand the template to reflect your business and attract your ideal clients. 

In this blog post, I walk you through the easiest way to brand your website: the style editor. The style editor is where you adjust colors, fonts and much more!

 

Utilize brand color palette

The fastest and easiest way to put your brand "stamp" on anything you're creating is by implementing your brand's color palette. 

To create these changes navigate to the Design menu on the back-end of your menu > select Style Editor. On the back-end you can updated colors using a variety of methods: hex codes, RGB or using the drag and drop feature.

In the style editor you can change the colors of fonts, links, buttons, backgrounds and much more. These small changes can instantly make a website look intentional, professional and well thought out. In the below example, Bulloss Photography uses a colorful background for their website. An on-brand colorful background makes their website pop in a playful and memorable way.

How-to Brand Your Website with Squarespace's Style Editor | Utilize color palettes | Bulloss Photography

Related: 15 Minimalist Color Palettes

Related: How to Create a Distinct Color Palette for Your Brand

 

Adjust fonts

In the style editor, you have the freedom to adjust fonts, styles, weights and much more. Squarespace comes equipped with Adobe TypeKit and Google Fonts to provide you the freedom of choosing from a wide range of fonts. 

To create these changes navigate to the Design menu on the back-end of your menu > select Style Editor. Once there, select which typography setting you want to update. Depending on your template your typography setting may look like the below image. Select your desired typography setting, for example Heading 1, and adjust the settings to fit your brand style.

How-to Brand Your Website with Squarespace's Style Editor | Adjusting fonts

Related: 7 Feminine Font Combinations

Related: How to Choose the Perfect Fonts for Your Brand

 

Customize sizes and values

Another feature of Squarespace's Style Editor is adjusting the sizing, padding and values of your website. It's an often overlooked feature of the Style Editor because it doesn't seem important or valuable.  

Depending on your template you can adjust your site width, padding, header and footer padding, logo sizing, etc. These may seem like small inconsequential updates, but they can actually make a big difference. Below, I show a before and after shot of adjusting the padding in my top navigation. As you can see proper padding makes a big difference. 

How-to Brand Your Website with Squarespace's Style Editor | Adjusting sizing, padding and values

 

Get creative with accent pieces

Lastly, your style editor can make a big difference in the accents and functions of your website. 

In the Style Editor you can adjust image layouts, quotes, buttons and more. These features can go a long way if you just get a little creative. Take buttons for example, you can adjust the colors, texts, size and design. Each small change can create a completely different look for your website.

Take the time to experiment and find out what works best for your business.  


What techniques have you used to brand your Squarespace site? Let me know in the comments!