How to add a second line to project titles in Squarespace

Dec 12

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

About this tutorial

This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

A portfolio collection is a great way to showcase projects with captivating visuals. The grid layout is my favorite way to display projects, but I usually want to share more than just a title! In this tutorial, you’ll learn how to add a second line of text to your projects that are displayed on a portfolio grid.

As always, the codes in this tutorial are below, but there are some specifics you’ll need to know before you use them so be sure to watch the tutorial video first!

Video tutorial

Code Example

Here is the base code from this tutorial for a GRID portfolio; these codes wont work for a portfolio set to any of the hover layouts. Remember to change the font and text properties to match the style of your own site:

.portfolio-title:after{
white-space:pre;
content:"\A Second Line";
text-transform:uppercase;
font-size: .8rem
}

To add text to individual projects, use the nth-type selector. This example adds text to the first, second, and third projects:

.grid-item:nth-of-type(1) .portfolio-title:after{ white-space:pre; content:"\A First Line" }
.grid-item:nth-of-type(2) .portfolio-title:after{ white-space:pre; content:"\A Second Line" }
.grid-item:nth-of-type(3) .portfolio-title:after{ white-space:pre; content:"\A Third Line"

And this is the creative code used in the video that changes the font style and adds a border between the project title and second line of text:

.portfolio-title:after{
white-space:pre;
content:"\A Anything";
font-size: 2rem;
text-transform:uppercase;
font-family:serif;
color:purple;
border-top:1px solid red;
padding-top:.5rem
}
.grid-item:nth-of-type(1) .portfolio-title:after{ white-space:pre; content:"\A First Line" }
.grid-item:nth-of-type(2) .portfolio-title:after{ white-space:pre; content:"\A Second Line" }
.grid-item:nth-of-type(3) .portfolio-title:after{ white-space:pre; content:"\A Third Line" }
.grid-item:nth-of-type(4) .portfolio-title:after{ white-space:pre; content:"\A Example" }