It’s no secret that I’m a big fan of Squarespace. It’s a fantastic option for business owners and bloggers who need a simple, beautiful platform for building a website. It’s mobile-friendly and user-friendly. There isn’t a huge learning curve for figuring out the back-end. And if you’d like to hear me go on more about all its benefits, you can read this post.
But because Squarespace templates are beautiful, simple, and easy to setup, many users have a hard time customizing their site and making it look one-of-a-kind.
That’s where today’s post comes in. I’ve compiled some of the most helpful tools I’ve discovered for switching up the look of a Squarespace site. Some of these might be new to you and some might already be built into your template, but I hope you’re able to walk away with a few new ideas for making your Squarespace site your own.
1 | Resize blocks
Many people who’ve been using Squarespace for years might not be aware of this easy trick for customization, but it can make a huge difference on the layout and appearance of your website.
Squarespace’s drag and drop features extend beyond the placement of blocks in pages and blog posts; they also allow you to resize blocks that are side-by-side.
To change the size of a block, simply hover over the space between two blocks and begin dragging in the direction you want it to go in. This works for all blocks, including image blocks, text blocks, videos, forms, and more.
To resize blocks that aren’t side-by-side, it’s often helpful to utilize spacers. Spacer blocks create more negative space and can be helpful for adding some buffer room between blocks. I use them often to downsize text blocks that span the length of the page and make it easier for visitors to read or to provide a little extra cushion between the content and the edge of the page.
You can also resize image blocks, spacer blocks, map blocks, and carousel gallery blocks by using the cropping handle (the little gray circle that appears at the bottom of the block window).
2 | Change the size of your headers
Squarespace’s Style Editor is extremely helpful for customizing up colors, fonts, and sizing. If you’re brand new to the platform and need some guidance with the Style Editor, Squarespace breaks it down easily for you here.
But while many templates allow you to change the size of your header in Squarespace’s Style Editor, there are a few (like Galapagos) that predetermine header sizes for you.
Thankfully, a little bit of code can do the trick:
h1 a {
text-decoration: none;
font-size: 18px;
}
h2 a {
text-decoration: none;
font-size: 16px;
}
h3 a {
text-decoration: none;
font-size: 14px;
}
To change the size of each header, simply place the code above in your CSS (Design > Custom CSS) and increase or decrease the values to your liking.
Squarespace also lets you preview the sizes as you change them up in your CSS, which is helpful and less time-consuming.
3 | Customize your navigation dropdown
Depending upon your template, the color of your dropdown menu might be predetermined for you, too, which can be frustrating when you’re trying to customize your site.
A little bit of code can fix this for you, too:
/* Change background color */
.nav-folder-item, .footernav-folder-item { background-color: #EEEEEE; }
/* Change dropdown arrow decoration */
.nav-folder-list:before { border-bottom: 8px solid #EEEEEE; }
/* Change link color */
.nav-folder-link, .footernav-folder-link { color: #333; }
To change the color of your dropdown menu, simply place the code above in your CSS and insert the hexadecimal values that corresponds with your color of choice.
4 | Create custom buttons, borders, and graphics
The best way to customize your Squarespace site and make it your own is to infuse your brand into it, and one of the best ways to do that is through photos and graphics; they’re a great way to bring in colors, fonts, and other visual elements of your brand.
I like to add more distinction to both my client sites and my own Squarespace site by adding custom buttons, infographics, and illustrations.They add more personality to the pages and make the website more unique (and I like to think they make it a little more fun to interact with, too).
Many of the graphics on the Elle & Company site - the slideshow and buttons on the homepage, the buttons and images in the blog sidebar - were all created in Adobe Illustrator and uploaded to the site. To make them clickable, I utilized the hyperlink feature in the image block window.
Don’t underestimate the amount of customization that can come through photos and graphics. Get creative with buttons and images and use them to infuse your brand into your site.
5 | Upload a favicon
Customization is all in the details, from the color of your navigation menu to that little image that appears beside your website’s name in a web browser tab.
Get rid of that black box and add a touch of your brand to the browser by uploading a custom favicon.
In the main menu, click Design > Logo & Title and under the Browser Icon (Favicon) section, upload a .png file with a transparent background (a white box around your image doesn’t look quite as professional).
Keep in mind that favicons don’t appear very large on the tab, so stick to something simple: a letter, an icon, or something that doesn’t have a lot of detail.
By adding even a small detail like a favicon, your site will appear more custom and professional.
There are several things you can do to switch things up on your Squarespace site. All you need is a few of the tips above, some creativity, and maybe a little CSS.
Do you have any Squarespace customization tips or resources that weren’t mentioned above? Share them in the comments!
