5 SIMPLE WAYS TO TAKE YOUR SQUARESPACE SITE TO ANOTHER LEVEL OF CUSTOMIZATION

If you know me, you know how much praise I give Squarespace for being so easy to use so that even total beginners can have a place to start building their site with. Without using code, you can use what Squarespace calls "content blocks” to create a decent, professional website in just a matter of hours! I know right. Really cool!!

But what if you're trying to take your Squarespace customizations to a whole different level and go beyond what Squarespace's drag and drop platform allows you to do but you don't know code enough to switch to it's developer mode and do your own thing? Well I've got you! Here are 5 ways to make you spice things up and make your Squarespace site even more unique and do the things you want it to. Oh and did I already mention? You don’t have to know code, just follow the instructions, copy and paste and we're good to go!

customization, Squarespace tips, css, code-free Squarespace website design, elyeeka, squarespace website designer, brand stylist, .png

 






Are you ready?

1. BACKGROUND COLOR AND SECTIONS

If you've already started playing around with Squarespace index pages as a creative, you've most likely wanted to spice things up a bit with different color background sections. These can  be an awesome way to get your point across or really just make your overall site design more beautiful pro-y, if that's a word. Here's a code-free, tech savvy free way to get it done.

STEP 1:

Make sure you're using an index page. If you don't know how to create one, Go to the Pages section of your Squarespace site and + Add Section under Index and click on Content . The index page is basically a collection of single pages stacked. What we're technically doing here is changing the background of one page in the column to give the overall look a pleasing aesthetic. You can change the background to many different things as you get savvy with this tutorial.

STEP 2:

Create the background in an application like Photoshop or Canva. The background here would just be a large colored rectangle or one with patterns or texture you like, Get creative with it! For the best results  and for a high quality image, make the width of your file 1500-2000px. Also, use a high resolution photo if you plan on using a photo for your background instead, you want the photo to still look good no matter the size of device the site being viewed on.

STEP 3:

Hover over the section of the index page you plan on changing the background of. A cog sign (the settings icon) will appear. Click the cog, click ‘media’ at the top right, then upload the image you want to be full width there! (It's called the banner/thumbnail). That's it! You can play around with it , add text images, whatever you want. Get creative with it, you pro!

A few things to keep in mind:

The color of any text placed on the full width section you just designed will change from the standard font colors to your “overlay” font colors. You can change this in the Style Editor, under where you set the colors for your standard font colors, e.g Heading 1 (Overlay).

Also, Index page themselves and all individual sections within an Index all count towards total pages on your website. If you plan on making a lot of these design, make sure your Squarespace plan gives you unlimited pages.

2. CHANGE THE LINE BLOCK COLOR AND WIDTH

This is another simple way to take your Squarespace Customisation even more pro and on brand. This tip and the rest of the tips in this post use some code (CSS) to achieve their results, but rest assured that all the code here is copy and pasteable, and even simple to change colors and other style elements.

Step 1: Go to the design section of your Squarespace site and click custom CSS

Step 2: Copy and paste the following code

.sqs-block-horizontal rule hr {

 background-color: #9d0f1b; height: 5px !important; }

The above color and line thickness are in bold respectively. These are in my brand preferences so you should definitely  change them to suite your personal taste and the colors of your brand. Also can paste the code without the height or the color if you like the one provided to you by the template you're using. You don't have to use both.

3. SOCIAL MEDIA ICON COLORS

Just like the Line block, it is possible to change the colors of the social media icons your template offer if you don't like them. I'm going to show you a few ways  to do this, but the site I'm displaying is a combination of all of them, which is actually my favorite. The only things you'll need to change here is the color, which is in bold. Now get ready, set, copy!

This is changing the color of regular icons

.sqs-use--icon { fill: #45848B !important; }

If you want to make the rest of the icons fade when you  hover on one of them., add this code

.sqs-svg-icon--wrapper:hover {   .sqs-use--icon { fill: #444 !important; } }

If you want to achieve both effects( regular icon color change + hover)  simply use this code

.sqs-use--icon { fill: #45848B !important; } .sqs-svg-icon--wrapper:hover {   .sqs-use--icon { fill: #444 !important; } }

If you want your icons to be a knockout style on Squarespace, you can change it's color with this code.

.social-icons-style-knockout.social-icons-color-black .sqs-use--mask {

 fill: #F9CAB8;

}


Note that this code changes the color surrounding the icon or it's outer color if you prefer to call it that way

If you want the fading hover effect, add this code

.social-icons-style-knockout.social-icons-color-black:hover .sqs-svg-icon--wrapper:hover .sqs-use--mask {

 fill: #F2A29B;

}

If you want to change both the outer color and make the rest of the icons fade when you  hover on one of them at the same time, just use this code

.social-icons-style-knockout.social-icons-color-black .sqs-use--mask {

}

.social-icons-style-knockout.social-icons-color-black:hover .sqs-svg-icon--wrapper:hover .sqs-use--mask {

 fill: #F2A29B;

}

Now my favorite parts, which makes your site really unique,

Use this code to change both the inner and outer part of the knockout style icons and make the rest of the icons fade when you  hover on one of them. No brainer right! Start copying already!

.sqs-use--icon {

fill: #45848B !important;

}

.social-icons-style-knockout.social-icons-color-black .sqs-use--mask {

 fill: #F9CAB8;

}

.social-icons-style-knockout.social-icons-color-black:hover .sqs-svg-icon--wrapper:hover .sqs-use--mask {

 fill: #F2A29B;

}

So simple right?!

4. HIDE THE DATE IN YOU BLOG POST

So you want to remove your dates from your blog posts on Squarespace? Good news! It super easy! This is good for creating evergreen content and ………………..

Here's the code!

time {

visibility: hidden;            

        }

That's it!


5. MAKE YOUR DROPDOWN MENU ON BRAND

If you have related items in your navigation that all need to be there, Squarespace allows you to have a drop down navigation from which you can display your related item together in a neat way. Even though that’s an effective way to make sure your site still looks professional, the colors look pretty boring.

The good new is you’re not stuck with those colors! This snippet of code lets you customize the dropdown background color and hover colors for the background and text!


#topNav nav .folder-collection ul {
  background-color: #9d0f1b;
}

#topNav nav .folder-collection ul a:hover {
   background-color: #d9a3a3;
   color: #ffffff;
}


That’s it! Five really easy ways to make your website look a lot more different!


Hi there! I am Elyeeka, go to girl for Brand & Website Design. I’m known for turning your brands and websites round in 10 business days, making competition irrelevant, and establishing you as an authority through brands that make IMPRESSIONS! Want to customize your Website as soon as possible, Get a website turnaround in 10  business days here!

customization, Squarespace tips, css, code-free Squarespace website design,.png