How to Customize Text Boxes in Squarespace
If you’re anything like me, you’re always tweaking your website design, trying to find ways to improve it and the user experience of your website. Sometimes in excess...ahem..., but I digress.
A great way to add some pop to your website and bring attention to areas of text in your pages and blog posts is by customizing your text blocks. Check out my example on one of my blog posts here. Scroll down to the Pro Tip box. It’s lime-green. You can’t miss it. Pretty cool, huh?
I’m going to give you three different popular types of text box styles and step by step instructions of how to customize it to match your brand.
THREE COOL USES FOR CUSTOMIZED TEXT BLOCKS
Here are three popular things that you can use a customized text box for:
Sharing a pro tip on your website
Sometimes, when you’re trying to make a point, it’s easy for the text to get lost within the content of the page, but with some specific styling to your text blocks, it can really make your content pop.
LET’S GET STARTED
Let’s start with a simple style that you can use for a variety of things. It’s easy to edit and customize to your brand.
We’ll use the Code Block for the HTML and custom CSS for these styles. So anywhere you want to add a text customization, just add a code block.
You want to add your custom CSS for the text box style to your Custom CSS Code Editor. On your website backend, go to Design > Custom CSS. By putting here, it is accessible to be used anywhere on your website pages and blog posts by using the DIV CLASS.
The Pro Tip
First up is the Pro Tip which is the example I shared above. These work really when highlighting “can’t miss” information.
The CSS is where the style of the text box comes in. This is how the CSS should look.
The text in light gray does not appear anywhere, it just designates what this CSS code is, so when you’re looking at your custom CSS on your backend, you know what each item is instead of it all jumbled together.
You can change the Hex colors to fit your brand style. (Hex color example = #91f55c)
The HTML is pretty simple as it consists of just three DIVs. The HTML Content Division element (<div>) is the generic container for flow content. It has no effect on the content or layout until styled using CSS.
The container makes use of the box shadowing effect and is completely responsive with its surroundings. The header holds the title of the Pro Tip. You change the font size, color, and the background color to your brand specifics.
Finally, the content DIV is the body of the Pro Tip content. It has a border that has the same color as the header background. This adds a nice little pop accompanied with the box shadow effect added earlier.
2. Featured Promotion
If you have a website, most likely you’re selling a product or service. A great way to get people’s attention is by creating a promotion.
Take a look at the example below. A text on image background can be super effective and with a few simple tweaks it can be easily tailored to match your brand.
with promo code WINTER25
for round trip travel 2/8-3/8/19
The container called "promo" is set to a width of 75% and makes use of a background image using the cover attribute. This means the image scales to be as large as possible so that the background area is completely covered by the background image.
If you want to change the font type or size, you will need to do this in the CSS. You will see the words “TAKE 25%” is larger than what is shown in the class “promo” and this is because those words have been wrapped inside a span with separate styling. It’s a pretty cool way of breaking up the text and creating interest.
Pretty simple. It’s just one DIV used in your code block for this one.
Another awesome way of adding additional value to your website visitors and building your email list is by offering opt-ins and/or downloads. Instead of having just a basic link to your product, such as a Web Design Checklist or something that offers your readers value, you want to design it in a way that it won’t be missed!
Everything inside the “download” class is used to style the box and the overall font. All you need to do is make the changes you need to style it to match your brand.
To change the color and border of the link, change the class “download a” styles and the same for the link hover effect.
Again, super easy. Only one DIV is needed to make the cool effect happen.
I hope you love these styles and you find ways to use them on your own Squarespace website. It’s super easy CSS and HTML tricks that look amazing.
Have questions or suggestions about Squarespace customizations? Or have a customization you’d love to share? Drop it in the comments below! I’d love to hear from you.