Customizing Text Blocks in Squarespace

If you are anything like me, you are always trying to find ways to improve the design and user experience of your website, no matter how small the improvement.

A great way to add some additional color and attention to areas of text in your pages and posts is by customizing your text blocks.

In this tutorial I’m going to show you how to make some pretty neat looking text blocks in Squarespace; providing step by step instructions of how to customize it to match your brand.

Cool uses for customized text blocks

We'll be covering three popular things that you can use customized text blocks for:

  • Sharing a pro tip on your website
  • Featured promotions
  • Content upgrades / downloads

If not done right these can get lost within the content of the page, but with some brand specific styling to your text blocks it can really make your content eye catching to your audience.

Getting Started

I'm going to share with you a primary style for different content scenarios that you can edit really easily.

We'll be using the code block and custom CSS for these styles. So anywhere you want to add a text customization, just add a code block.
 

Squarespace code block menu
 

1) The Pro Tip

First on our list is pro tip, commonly found in tutorials and walkthroughs. These work really well when highlighting "can't miss" information to your readers.

Example:

Pro Tip

Use the free Google tool, Keyword Planner to effectivly research keywords that have high search volume and low to medium competition.

Here’s how:

  1. Visit Google Keyword Planner
  2. Login or create an account
  3. ...

HTML & CSS:

The HTML is pretty simple as it consists of just three DIVs.

The container makes use of the box shadowing effect and is completely fluid (responsive) with its surroundings.

The header holds the title of the pro tip where you can change it to whatever you like along with its 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 and adds a really nice effect accompanied with the box shadow effect added earlier.


  .pro-tip {
    box-shadow: 2px 5px 9px #ABA3A3;
    padding: 0px 4px 4px 4px;
  }

  .pro-tip-header {
    font-size: 24px;
    padding: 13px 22px;
    background-color: #9bcd47;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
  }

  .pro-tip-content {
    border: 1px solid #9bcd47;
    padding: 22px;
  }

 

2) Featured Promotion

If you have a website you are most likely selling a product or service. A great way to capture 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 roundtrip travel 11/27-12/20/16

HTML & CSS:

Just one DIV used in your code block for this one.

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 neat way of breaking up the text.


  .promo {
    font-family: 'Oswald', sans-serif;
    font-size: 25px;
    font-weight: 400;
    color: #fff;
    background-image: url(Paste image URL here);
    background-size: cover;
    background-repeat: no-repeat;
    width: 75%;
    margin: 0 auto;
    padding: 40px;
  }

  .promo-heading {
    font-size: 50px;
    font-weight: 800;
    text-transform: uppercase;
  }

 

3) Content Upgrades / Downloads

A great way of adding additional value to your readers and building your mailing list is by offering content upgrades.

Instead of just offering up a text link, we want to design it in such a way so that it can't be missed, and your readers know exactly what they will be downloading.

Here's a great way to do this.

Example:

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

HTML & CSS:

Only one DIV needed to pull this cool effect off. Everything inside the "download" class is used to style the box and the overall font. Just make the changes you need to style it in accordance with your website.

To change the color and border of the link, change the class "download a" styles and the same for the link hover effect.


  .download {
    background-color: #fef5c4;
    border: 1px solid #fadf98;
    clear: both;
    margin-bottom: 18px;
    overflow: hidden;
    padding: 13px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }

  .download a {
    color: #9f3001;
    border-bottom: 1px dotted;
  }

  .download a:hover {
    color: #702809;
    border-bottom: 1px dotted;
  }

I hope you dig these styles and you find ways to use them on your own Squarespace website.

There are a loads of different effects that you can do with these customized text blocks, and with the right mixture of CSS they can look super effective!

If have any questions or suggestions about customizations you would like me to add to this post, please reach out to me in the comments below!


Written by

static1.squarespace.png

Dale Powell, Web Developer

Web Developer at Atomic Marketing. Passionate about coding and enjoy writing about Squarespace, Analytics and SEO. Feel free to connect with me!