Acing Squarespace design skills requires more than simply the basics; here’s an excellent CSS trick that can elevate them even further! This snippet adds a subtle shadow effect to image block contents in Squarespace versions 7.0 and 7.1 seamlessly.
Make your text pop out with this fun and straightforward CSS snippet! Adjust the opacity as you see fit, and watch as visitors take note!
Step 1: Select an Image
Squarespace makes building professional websites simple with their drag and drop system, but sometimes certain elements don’t show up in its basic style editor. That’s where custom CSS comes into play – with just a bit of additional code you could make your desired changes happen quickly and effortlessly!
This code adds a subtle shadow effect to an image block, adding visual interest and making your website stand out. Simply change the px values for how dark of a shadow you would like it.
Have you been wanting to give your Squarespace blog post images an elegant, customized appearance? This snippet adds a simple drop shadow. Simply paste this code into your Custom CSS box, adjust its values accordingly, and you’re set! Additionally, this code can also add shadowing effects for image blocks in sections or footers on your site – great for adding some visual interest!
Step 2: Add a Text Block
The Image Block allows you to add captions beneath or over an image for additional details about it, while at the same time supporting search engine optimization by providing text for screen readers. Captions provide additional insight about images while also providing key search engine SEO benefits by providing text for screen readers.
Customize the text style in image block titles using font tweaks. For more information, see Formatting text.
Squarespace provides optimized image filenames with small file sizes that include keywords that help search engines index your site quickly. Furthermore, image names can be optimized prior to uploading which can increase site performance and save space on storage media.
If you use a text box as part of your title, a drop shadow can give it dimension and draw the viewer’s eye. To activate this feature, copy and paste the following snippet into the Custom CSS Editor – adjust its colors as you see fit, as well as width accordingly – then save. It applies to all image blocks within your site (header/footer included)!
Step 3: Add a Drop Shadow
Add an eye-catching element to your Squarespace shapes by customizing them with drop shadows. This simple modification will draw in visitors and give your designs that extra special something.
Start by creating a new page and uploading an image. When done, click on the “Edit” icon in the top right corner to access the Page Editor and see how the design looks on desktop, tablet and phone screens by using icons at the top right corner – providing an effective way of testing before publishing! This is also an invaluable way to test out designs before publishing!
