Quick ways to elevate your Squarespace site

As we’ve previously stated we are big fans of Squarespace at Launch Studio. There are plenty of well-designed Squarespace templates that you can use for your site. However, if you are looking to elevate your brand further and make your site stand out amongst competitors, try adding the custom below to achieve this. By adding some snippets of CSS to your site you can make it stand out from other templated sites. To add CSS to your site navigate to ‘Design’ then ‘Custom CSS’.

Custom cursor

To change the cursor on your site add the code below to the custom CSS section on your Squarespace site. You will need to upload an image for the custom cursor, the recommended size for this is between 25px by 25px and 30px by 30px.

You can upload your image using the custom CSS interface by selecting the ‘manage custom files’ and uploading an image from your files. Once uploaded, you can click the image and the url will appear in the custom CSS section. Make sure your URL is between the brackets on the 3rd line of code.

Another way of getting the image URL is by uploading the cursor image normally on a section and inspecting your browser to find the URL.

body {
margin: 0;
height: 100vh;
cursor: url(theimageurl), auto;
}

We used a custom cusor for Blank Walls’ website, here we made use of the logomark as the cursor.

Custom typeface

To add custom fonts to your site you need to upload the font files in the custom CSS section by clicking ‘manage custom files’ and uploading from your files. You will also need to paste the code below into the same section.

Once your font has been uploaded you can click on the uploaded font to get the URL of where it is stored on your site. Paste the URL into the code below where specified and make sure you use the same name as the file name / URL in the font-family feature. For example, if your font file is labeled ‘Arial-Regular’ you will need to specify ‘Arial-Regular’ in the font-family property.

@font-face {
font-family: 'Font-Name';
src: url(‘fonturl/Font-Name.ttf');

For our design for Mountain Lodge’s website we added the custom typeface Fraunces to elevate the site.

Button hovers

You can specify custom hover states for buttons on your site. This is for when someone hovers on the button with their cursor. To target all button sizes use the code below. You can change the background color and the color of the text.

.sqs-block-button-element--small:hover, .sqs-block-button-element--medium:hover, .sqs-block-button-element--large:hover {
background-color:green !important;
color: #fffffff !important;
}

To target an individual button you can use the code below by targeting the button within a specified block, but you will have to check which size the button is and adjust the code accordingly. You will also need to find the block ID, this can be done using a plug in for your browser or by using the inspect tool on your browser.

#block-yui_3_17_2_1_1647269463943_5749 .sqs-block-button-element--large:hover {
background-color:green !important;
color: #fffffff !important;
}

Custom button hover state in use on a client website, Goal One.

Image hovers

You can also assign hover states to images contained within code blocks. Upload an image to Squarespace using the ‘manage custom files’ function in the custom CSS interface. Copy the URL of the image and keep it handy. Then in a squarespace section add a code block with the following code.

It does not matter what you use as the ID of the div but make sure you copy it exactly when targeting your div using CSS. Here we have centered each div but this is optional. Next in the custom CSS section of your site, paste the following code – make sure to add your own url from the image you uploaded in the previous step. You can update the height and width of your image by editing the CSS.

  #overlay {
       background-image: url('yourimageurl');
        height: 18vw;
        width: 18vw;
        background-size:contain;
}

In our example below we have used a second image for the hover state but you can use a block colour instead by adding the following code.

#overlay:hover {
color: red;
}

To use an image overlay for the hover state, upload another image using the ‘manage custom files’ function in the custom CSS interface. Copy the code below into the custom CSS section and then paste the URL of the second image within the code below.

#overlay:hover {
background-image: url('yourhoverimageurl');
}

Your image within the code block will now change when a user hovers over the image.