How to Customize Text Boxes in Squarespace

How to customize text boxes in Squarespace using CSS & HTML.

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

  • Featured promotions

  • Opt-Ins/downloads

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.

Note: On all plans, the Code Block supports HTML, plain text, Markdown, and CSS code surrounded by <style></style> tags. Adding JavaScript or iframes to a Code Block is a Premium feature available in the current Website Business plan and higher, or while in trial.

Squarespace Code Block example


  1. 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.

    EXAMPLE:

PRO TIP

If you use a platform other than Squarespace, such as Wordpress, please make sure you or your website designer/developer creates a sitemap on your website AND submits it to Google Search Console. Consider it a MUST for your website.

CSS

The CSS is where the style of the text box comes in. This is how the CSS should look.

Squarespace CSS to customize text boxes


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)

HTML

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.

Pro Tip HTML How to customize text boxes in Squarespace

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.

EXAMPLE:

Take 25%off
with promo code WINTER25
for round trip travel 2/8-3/8/19

CSS

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.

Promo text box HTML customize text box in Squarespace

HTML

Pretty simple. It’s just one DIV used in your code block for this one.

Promo text box HTML how to customize a text box in Squarespace

3. Opt-ins/Downloads

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!

Example:

Exclusive Bonus: Download this step-by-step guide on how to Customize Text Blocks in Squarespace.

CSS

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.

Download text box CSS Customizing text boxes in Squarespace.

HTML

Again, super easy. Only one DIV is needed to make the cool effect happen.

Download text box HTML customizing text box in Squarespace.

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.

 
 

Ready for a modern & refined website to tell your brand’s story?

Are you ready to reach the next level of success?

Let’s make it happen!


Kat Collins is a Squarespace Website Designer focused on helping you share your brand’s story via your website to take your business to the next level. She specializes in winery website design, craft brewery website design, as well as small business website design. On the blog, you’ll find a variety of topics that help you succeed in online business, such as website design, branding, social media strategies, blogging, email marketing, Squarespace design tips, and more.