How To Drop Cap Text In Squarespace
Adding A Drop Cap In Squarespace
1. Add a Code Block to the page you’d like your drop cap on.
2. Copy and paste the code below into your code block. Update the text between the <p> tags accordingly.
3. Go to the Custom CSS editor in Squarespace. Paste the below code into the Custom CSS.
4. Adjust the code accordingly to suit your style. You can tweak the color, weight, and size by modifying the above code.
Using The Drop Cap In Squarespace
After completing the above steps to add a drop cap to your Squarespace site, you can continue using it elsewhere on your site by just pasting in the same code from step 2.
If you need a second style of drop cap you can create another version by modifying the class name. This can be a great solution if you need a drop cap on a different background color section where the first style doesn’t work.
Here’s the same code as above with a modified class name:
You’ll also need to add another Custom CSS snippet in Squarespace to support the alternative class name. Be sure to keep the first one we used in step 3, and just add this one in addition:
In the CSS above I set the drop cap color as white, so now you have two versions that will work on a variety of background colors! Of course you can modify these colors as needed, and you could make even more versions following the same format as I used, but I just wanted to share both of these options so you could see how it works!