5 CSS Customization Tricks to Take your Squarespace Website to the Next Level
Customize your Squarespace Website with these 5 amazing CSS tricks!
If you follow our blog, you know that we are big fans of Squarespace. It is an awesome tool to create professional-looking websites without ever needing to write a line of code.
But let’s be honest, Squarespace still has its limitations, and to work around that you can use coding to make your website stand out even more.
This is why we decided to share with you 5 of our favorite CSS tricks that you can use to enhance your website and even come up with your own variants of the code that we are going to provide you.
But what is CSS?
CSS stands for Cascading Style Sheets and it is responsible to define how the different elements on your website are going to be displayed on screens. To be more specific, it gives commands to your HTML tags how they should look and where they should be positioned. For that, CSS uses a combination of selectors, properties, and property values to do it.
How do I add CSS to my Squarespace website?
It’s very simple, once you are on the back-office of your Squarespace website you just need to go to Design > Custom CSS, and there you will find a text area where you can add all the CSS code that you would like to use on your website. Take a look at the image below for a better reference.
Ok, now let’s get started with the CSS tricks!
5 CSS Customization Tricks to Take your Squarespace Website to the Next Level
1. Disable Automatic Hyphens
The first one is just something annoying that Squarespace does by default. In the mobile version of your website, every time that a word doesn’t fit the screen, by default Squarespace breaks the word with a hyphen. When you see that happening it doesn’t look good in terms of design, so to get rid of it you just need to use the following code:
h1, h2, h3, h4, p {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}2. Give a pressing effect to your buttons
Squarespace gives a very small pull of effects that you can use on your buttons, it lets you change their shape but that’s about it. Well, this trick will let you create a pressing effect for your buttons. Once you implement the following code, every time you click on a button you will see it shrink a bit giving you the actual feeling that you are pressing on it.
.sqs-block-button-element:active {
transition: 0.5s;
transform: scale(0.9);
} You can always make the transition go faster or slower by changing the property value as well as making the transformation bigger or smaller by changing the scale value.
3. Add a color Gradient to your button’s Background
To go along with the previous trick, here is another one to give even more flair to your website’s buttons. This one creates a gradient of colors on the background of your buttons. To do it you will need to use the following code:
.sqs-block-button-element {
background-image: linear-gradient(to right, #000 , #fff);
}You can change the color to whatever you like, you just need to get the hex code of the colors that you want and substitute the ones that are in place on the code example. Another this that can be changed is the orientation in which the gradient is displayed, in the example is ‘to right’ but you can change that to be something different. If you want to know about other orientations you can use here is a link that explains all the options. Click here.
Make Sure You Download Our Free Resources
Free Training “5 Effective Ways to Improve Your Online Presence”
Business Foundation Workbook
Brand & Style Workbook
Website Design Guide For Health, Wellness & Fitness Brands
Content Marketing Planner
Search Engine Optimization (SEO) Checklist
4. Hide Header and Footer on a Specific Page
This trick is very useful to create sales pages inside Squarespace. This way you will not need a third-party platform like Mailchimp or ConvertKit, you will just need to connect your Squarespace website with your respective account.
To hide the header and footer of a specific page is a bit different from what was explained previously because the place where you are going to insert the code that we are going to share with you is in another part of the back-office. To do it you will need to follow these steps, go to Pages, click the Settings Icon beside the page where you want to hide the header and the footer, and then click on Advanced. Here you will find a similar text area to the one on Custom CSS, this is the place where you need to place the following code:
<style>
.header, #footer-sections {
display:none !important;
}
</style>You can also use this code to hide the header and the footer on all pages. To do so you just need to add this code without the style tags to the Custom CSS.
5. Add Shadows to your Text
Shadows on your text can be an awesome way to highlight a part of your website that you want to give a bigger relevance. The shadows will make the text pop up from the page giving the illusion that light is hitting your text, creating the shadow behind it. This is a great trick to use especially in headers.
To do it you will need to use the following code:
h1 {
text-shadow: 5px 5px #eee;
}You can change the elements to which the CSS code is being applied, for example, you can switch the h1 with another header that you might be using (h2, h3, h4) and even with your text within paragraphs (p). You can also modify the intensity of the shadow by changing the pixel values that you see on the code as well as changing the color of the shadow. To do it you just need to get the Hex code of the color that you want and substitute the one that you see on the example code.
Let’s Work Together! We would love to help transform your online presence!
Final Thoughts
That’s it - 5 CSS Customization Tricks to Take your Squarespace Website to the Next Level!
These tricks can greatly enhance the look of your website but we recommend you don’t stop here! Once you get into CSS there are infinite types of customizations that you can use so you can make your website stand out from the competition.
Although Squarespace is a very complete and easy-to-use tool, there is always a way to make it even better once you get into a bit of coding, and CSS is the perfect resource to make incredible designs inside Squarespace.
Now it's your turn to tell us, after reading this article have you used any of the tricks mentioned above? If not, which ones are you going to implement on your website?
Send us your answers, and any other questions you might have, and we’ll do our best to answer them.
Want to start working on your online presence? Check out our free resources!
FIND THIS POST HELPFUL? YOU’LL ALSO LOVE THESE…
SEO Tips For Health, Wellness & Fitness Brands: 10 Ways to Rank Higher
Squarespace 7.1 Customizable Template Kit For Health, Wellness, and Fitness Brands
Health, Wellness & Fitness Web Designer: 4 Things To Consider Before Hiring One
Which Squarespace Plan is the Right One for your Health, Wellness, Or Fitness Business?
