Create a ‘featured’ blog header | Pseudo header trick

There are various ways you can display your blog posts on your main Squarespace blog page. You can display them in a grid, in a list or in columns. It’s up to you and your design preferences. 

One common feature that many people like to add to their blog is a featured blog post header, which can be either a full bleed header or just an image, that sits at the top of the page and showcases a featured blog post. 

Unfortunately adding a featured post to your blog isn’t a native Squarespace feature and instead you’ll need to create a “pseudo element” that will sit above your blog page content and look to users like it’s being pulled in automatically. 

Take a look at the step-by-step below to understand how to add a featured blog post header to your Squarespace blog. 

Watch the video

Check out the YouTube video below 👇

Create a featured blog header

In the edit dashboard, add a blank section to the top of your page. Add a summary block to the section and display your blog within the block. Above this block, add in an image. The image you choose should be the image you want to display for your featured blog post. 

Edit the image and convert it into a poster image which will allow you to add text on top of the image. Add your featured blog post title in the text block. 

Also in the image editor panel, turn your image into a link by selecting link and and choosing the “on image” option. You can then add in the URL of the blog post you want to feature. 

Next, head to your custom CSS panel and copy and paste in the below code:

#BLOCK-ID-HERE {

transition: 0.3s !important;

&:hover {

opacity: 0.7 !important;

transition: 0.3s !important;

}

}

Use the Squarespace Block ID Finder to identify the block you want to target and the above code will add a hover effect to the linked image. You can play around with the speed of the transition but I find the above metrics work best.

If you want to add a gradient to your featured blog post image, add the below code to your custom CSS panel:

.sqs-block-image .design-layout-poster .image-card-wrapper {

justify-content: flex-start !important;

align-items: flex-end !important;

padding: 20px;

padding-bottom: 50px !important;

}

ADD-YOUR-SECTION-ID-HERE {

.sqs-block-image .design-layout-poster .image-card-wrapper {

z-index: 2,

}

.sqs-block-image .design-layout-poster .image-card-wrapper:after {

content: '';

position: absolute;

bottom: 0%;

background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));

width: 100%;

height: 45%;

left: 0;

z-index: -1;

}

@media (max-width: 500px) {

.sqs-block-image .design-layout-poster .image-card-wrapper:after {

height: 40% !important;

}

}

}

.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card {

margin-bottom: -20px !important;

}

---

📩 Join the inner circle to get exclusive code updates

---

If you want your featured blog header to fill the screen, simply switch to fluid engine and untoggle fill screen in the edit section panel. You can then use the fluid engine drag and drop to drag the image to fill the screen. 

Adding a featured blog post header is a great way of directing users to a specific blog that you want to drive traffic to and you can use this trick anywhere on your website, not just on the blog page. For example, you can use all of the above steps and add a featured blog post section to your homepage, if you want. 

This process requires some complex code but hopefully I’ve broken it down into simple, digestible steps that are easy to follow. Have a go and let me know how you get on!

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?