How to add a tagline to Squarespace 7.1
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 few designers have reached out to me about adding a tagline to their 7.1 sites; a feature that used to be standard for a lot of major theme families, including our beloved Brine sites, but it went away with 7.1
But good news, a little clever code can bring it right back! To add this back to your site, we are going to use some custom code to create a line of text after your title.
This is the cool part for any site, a good pro tip I think we all should know. When adding text after an element, you can create a new line using two characters: /A
Now what the heck does that mean? When we use a pseudo-element like “After” to show content after an object, you can have that new content on a new line!
Still not quite clear? No worries, this video will explain it! I have to mention this video is super old and is getting a much-needed update, but the info is still useful. The only major change is how you add the code to your site. Navigate to Website, then Website Tools, then Custom CSS, and paste the code there.
You’ll find the codes you need below.
Video tutorial
Follow the steps below for accurate info on how to install this code.
Code Example
To add this code to your site, navigate to Website, select Website Tools, and then Custom CSS. Paste the code here in your CSS file.
To add a tagline right under your logo or site title:
.header-title:after {content: "Tagline Goes Here"}
To add a space between the site title or logo and the tagline, use this code here:
.header-title:after { white-space: pre; content: "\A Tagline Goes Here"!important;}
