How to make anything transparent in Squarespace // Adjust Opacity in Squarespace with CSS
Have you ever wanted to make something on your Squarespace website transparent? With the opacity property in CSS, you can easily do that! This tutorial video will teach you how to use the opacity property in Squarespace to make anything on your site transparent.
- -
⭐ Learn more Squarespace CSS in my free class: https://insidethesquare.co/learn
- -
Here is a step-by-step tutorial video that will show you how to change the opacity using CSS in Squarespace. We’ll change a shape, an image, and a block of text. You’ll also learn how to combine block id’s into one line of code by separating them with a comma.
We'll be using the block id to isolate individual things that we want to make transparent.
Here is a link to the free Chrome extension that I use to easily get block ID information. I’m not affiliated with this extension or who made it; just a fan:
https://chrome.google.com/webstore/de...
The opacity property is a great tool for making elements of your website transparent. All you need to do is add the "opacity" property into your CSS after the block ID and set a value between 0 and 1. The lower the number, the more transparent it will be; 0 being fully transparent and 1 being completely opaque.
Let’s look at an example:
#block-1234 {opacity: .7;}
In this case, I've identified an element with its block ID, and set the opacity value at .7, which makes that specific piece of content 70% opaque.
Simply change “#block-1234” to the block ID for whatever you want to adjust and then set your desired level of transparency by changing the number after “opacity”.
Using the opacity property in CSS is an easy way to make something on your Squarespace site either more visible or less visible without having any effect on other elements of design.
If this is your first time using CSS in Squarespace, check out my free class at https://insidethesquare.co/learn
📑 Download my collection of CSS codes for Squarespace at https://insidethesquare.co/css
- -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕
https://buymeacoffee.com/insidethesquare
- -
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
- -
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → / thinkinsidethesquare
👍 FACEBOOK → / insidethesquare
📌 PINTEREST → / insidethesquare
- -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
