How to reorder the blog list text in Squarespace
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
Squarespace has some awesome blog features built right into the program, but one pesky thing we can’t change is the order of the text on the list. It’s built to display the metadata, the title, then the excerpt. But what if you want the metadata to be last? Or maybe the excerpt first? Totally possible thanks to some custom CSS. 🙌
In the tutorial video below, you’ll learn how to change the order of the title, excerpt, and metadata so your layout blog grid layout looks exactly the way you want it to. 😎
The codes used in this tutorial are below, but make sure to watch this step-by-step tutorial closely, so you understand how to use them!
Video tutorial
Code Example
.blog-basic-grid--text {
display: flex;
flex-direction: column;
}.blog-excerpt {
order: 1 !important;
}.blog-title {
order: 2 !important;
}.blog-meta-section {
order: 3 !important;
}
Here are links to a few other tutorials you can check out to customize your Squarespace blog even more:
Brand new to CSS? Start with my free course here: insidethesquare.co/learn
How to add a background image to a blog post in Squarespace 7.1