Bold & Pop : 5 (More) Easy Codes to Customize Your Squarespace Site Like a Pro.jpg

So we've shared why we're obsessed with Squarespace, how to choose a template, and 5 seriously easy codes to customize those templates beyond what the styled editor allows you to do. Well we're not stopping there! Here are 5 more easy codes to go a step further in your customization! 

Add a Solid, Gradient, Linear, or Diagonal Background to an Index Page

This is such a fun way to add some color to your website and help separate your index pages without using an image as the background. You can do this in a few different ways: 

Before using any of these codes below, make sure you replace the URL-slug in the codes below with the URL slug of the page you want the color/pattern added to. Then you'll also want to replace COLOR with the color you'd like. 

For a solid background color, add this code to the custom CSS section of your site:

#URL-slug {background-color: #COLOR;}

 

For a gradient background, add this code to the custom CSS section of your site:

#URL-slug {background: linear-gradient(180deg, #COLOR 5%, #COLOR 90%);}

 

For a linear background, add this code to the custom CSS section of your site (change the deg number from 90 to 180 to go from vertical to horizontal):

#URL-slug{background: linear-gradient(90deg, #COLOR 50%, #COLOR 50%, );}

 

For a diagonal background, add this code to the custom CSS section of your site (change the direction to go from top right to top left)

#URL-slug {
  background: linear-gradient (to top right, #COLOR 50%, #COLOR 50%) !important;
}

 

Pop-Up Text from a Button

For text heavy sections of your website or for team member bios, a pop-up could be a really great option! When visitors click the button, a lightbox will open with the text you'd like to display. 

First you'll want to add this code to the code injection on the page you want the pop-up on. 

<link href="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" /><script src="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

 

Next, you'll want to add a code block to the page and paste the code below. This is what will display in the lightbox so you'll want to insert your text and change the ID (in bold). 

<div style="display:none;">

<div id="YourID">

<p>

Insert text here

</p>

</div>

</div>

Finally, add another code block where you'd like the button to be and paste this code. Make sure the ID matches what you added in for the lightbox above. Then edit the text that will display on the button. This code is for the medium sized button but if you want it for a small button or large, just change the "medium" in the code to "small" or "large". 

<div class="sqs-block button-block sqs-block-button">

<a href="#" data-featherlight="#YourID" class="sqs-block-button-element--medium sqs-block-button-element">Text for Button</a>

</div>

 

Hey, you! Pretty cool, huh?

Note: The pop-up will not work while you are in edit mode. Open an incognito window to give it a try! 

 

Change Button Color on Hover

Instead of just having your button color slightly fade like Squarespace's default setting, you can actually make it turn a completely different color. This helps add a fun interactive element to your website.

To add this, first set the color you'd like the button to be before someone hovers in the style editor. Then use the following code in the custom CSS section and change COLOR to be the color you'd like the button to be on hover: 

.sqs-block-button-element--medium:hover {background-color: #COLOR;}

 

Again, this code is for the medium sized button but if you want it for a small button or large, just change the "medium" in the code to "small" or "large". 

 

Create Custom Bullet Points

Sometimes the standard bullet points just don't do the trick and you're wishing you had the option for checkmarks or something else. Well you can actually create custom bullets using CSS! 

Example:

Bold & Pop: 5 (More) Easy Codes To Customize Your Squarespace Site Like A Pro

First you will need to upload the file of the icon or image you'd like to use to the Custom CSS section of your site. To find this, go to Design > Custom CSS. Then scroll to the bottom and click MANAGE CUSTOM FILES and then click ADD IMAGES OR FONTS. You’ll upload the file there.

Then add the code below replacing URL HERE with the URL you just added to the custom files (click on the file and it will automatically add the URL into the custom CSS). You'll just want to copy and paste it into this code in the correct spot. 


ul li:before{ 
content: ' '; 
display: inline-block; 
background-image: url(https://URL HERE); 
background-repeat: no-repeat; 
background-size: 18px; 
background-position: center; 
width: 18px; height: 18px; 
position: absolute; 
margin-left: -25px; 
margin-right: 0px; 
margin-top: 8px; 
margin-bottom: 0px; 
}

 

Make Images Circular on a Summary Block

You know you can have the thumbnails on the summary block be different sizes but what about making them circular? If a circular image works better than a square or rectangle on your site, use the code below to get the summary block thumbnails to automatically load as circles. (Make sure your thumbnails are square or this code won't make them complete circles!) 

.summary-thumbnail img{  
 border-radius: 50% !important;
  padding: 5px;
 }

Bold & Pop: 5 (More) Easy Codes To Customize Your Squarespace Site Like A Pro

And there you have it! Five more easy ways to customize your Squarespace website using code to make it feel more unique and on target with your brand!

Need a few other ideas on how to customize your Squarespace site without using code? We have you covered with those ideas too!

P.S. Exciting news! We launched a free #BoldBossTribe Facebook Group and would love for you to join us! Come on over!

Comment