A few weeks ago I officially moved theblogsocial.com from WordPress to Squarespace and it’s proven to be one of the best decisions I’ve made for my blog. If you’ve been thinking of switching over to Squarespace then here are 3 ways to personalize your Squarespace website to create a unique website template.
One of the things that attracted me to Squarespace was the fact that you don’t need to purchase any templates everything is built-in and you can easily create a design that speaks to your personality or your brand.
Also, you will find that Squarespace has a large variety of website templates. You can use it as a guideline once you get started however all of these templates can be customised to your heart’s content. There are so many things that you can do with the standard Squarespace template whether you doing slight tweaks like changing the fonts or colours all playing around with some custom CSS to truly make the website design your own… The possibilities are endless!
3 Ways To Personalize Your Squarespace Website
Although there are many other ways you can personalize your Squarespace website I am going to be sharing three quick and easy things you can do today to get started.
Resizing Your Content Blocks
If you haven’t used Squarespace before you probably didn’t know that Squarespace uses content blocks that you can drag and drop anywhere on the page to create a custom design. Adding content blocks together allows you to create different sections and layouts. These blocks can be stacked together or next to each other and by using a little bit of CSS you can even overlay blocks.
The content blocks can be text, images, spaces, etc. These blocks are the foundation when creating your website. When editing a page or blog post, click on the + to bring up the block panel and choose the block type and start creating. You can delete or edit these blocks as you want.
Play Around With Styling Colours
Squarespace 7.1 is packed with so many colour styles you can choose from. To find the colour styling panel. Go to DESIGN – SITE STYLES – COLORS. 10 Different site style combinations will display and within each colour combination, you can control each aspect of your website, from section backgrounds, text, buttons and so much more! This can look overwhelming and takes time to set up but to be honest I only use 3 or 4 of these colour style options.
I really love that Squarespace offers so many options, this allows you to truly create a custom design by having control over each section of your website not just an overall look.
Use CSS For Small Tweaks
Although Squarespace, as it is, allows you to control so much of your website. If you do want to take your personalization to the next level CSS is your friend. CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed.
With so many amazing designers out there that shares some easily code you can easily pop into your website.
Where Do I Add CSS On Squarespace?
CSS can be added by going to DESIGN – CUSTOM CSS. Pop in your code and save. Code is nothing to be afraid of, use tools like Ghost Plugins to find a code you want to use. It’s as simple as copy and paste.
Favourite CSS Snippets
Here are some of my favourite CSS snippets you can use to create a personalised website.
CHANGE SQUARESPACE BUTTON COLOURS
//squarespace button colours//
.sqs-block-button a{
color: #FFF !important; /*change this for the text colour*/
background-color: #1EAADA !important; /*change this for the background colour*/
}
REMOVE HYPENS
// remove hyphens //
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;}
}
SQUARESPACE BUTTON WIDTH (PERFECT FOR AN INSTAGRAM LANDING PAGE)
//squarespace button width//
.sqs-block-button-element–small,
.sqs-block-button-element–medium,
.sqs-block-button-element–large{
width: 200px !important;
//change this for button width//
padding: 20px !important;
}
PILL SHAPE TEXT
// mini text – italic font style //
em {
font-size: 12px;
padding: 5px 16px !important;
color: #353640;
border-radius: 10px;
background: #E9F7E7;
font-style: normal !important;
}
There are so many places you can find some CSS to make your website truly unique. Do you use Squarespace or thinking about switching? Let me know in the comments below.
