How to turn blog posts into buttons

24 Feb

**Need help with your Squarespace site?**
Drop us a message here.

How to turn a Squarespace blog thumbnail into a clickable button

If you have spent any time building in Squarespace, you will know that linking content is fairly limited. You can add text links, image links, or use the standard button block. Beyond that, things can start to feel restrictive.

There is, however, a lesser known feature inside Squarespace that gives you much more flexibility. It allows you to turn blog post thumbnails into fully functional buttons that can link to any page or external URL. This is a technique we use regularly at Pixelhaze to create more engaging layouts, especially for portfolios and service navigation.

Why use blog thumbnails as buttons

Before getting into the setup, it helps to understand why this approach is so useful.

Blog layouts in Squarespace allow you to create clean, repeatable grids or carousels. They are ideal for displaying collections of content. The limitation is that blog posts are designed to link to their own post pages.

At the same time, standard pages in Squarespace 7.1 offer far more design control than blog posts.

By combining the two, you can use the blog layout as a visual menu, while sending users to fully designed pages elsewhere on your site or even off your site entirely.

Step 1

Create your blog

Start by creating a blog page in your Squarespace site.

This will act as the structure for your buttons.

Each blog post will represent one item in your menu, portfolio, or navigation system. For example, you might create posts for each service, project, or category.

You do not need to worry about the blog post content itself, as visitors will not actually land on these posts.

Step 2

Create a blog post for each button

Create a new blog post as you normally would.

Give it a clear title that reflects where the user will be taken. This helps with clarity when the content appears on your site.

Next, upload a thumbnail image. This is important because the thumbnail will act as the visual button.

Think of this as your button design. Keep it consistent across all posts for a clean layout.

Step 3

Use the Source URL setting

This is where the hidden functionality comes in.

Open your blog post settings and look for the option labelled Source URL.

By default, a blog post links to its own page. When you enable the Source URL option, you can override that behaviour.

Paste in the URL you want this item to link to. This can be:

• A page on your website
• A service page
• A portfolio page
• An external website
• A video or booking link

Once saved, clicking the blog thumbnail will no longer open the post. It will take the user directly to your chosen destination.

Step 4

Publish your post

Save and publish your blog post.

At this stage, you have effectively created a single button using a blog item.

Repeat this process for each link you want to include.

Step 5

Add a Summary Block to display your buttons

Now you need to display your blog posts on a page.

Edit the page where you want your buttons to appear and add a Summary Block.

Select your blog as the content source. You will see your posts appear automatically.

From here, you can customise the layout to suit your design:

• Switch to a carousel layout for a scrolling effect
• Adjust how many items are visible
• Hide metadata such as dates
• Keep only the title and image for a clean look
• Change the aspect ratio to suit your imagery

This is where the setup starts to feel like a custom component rather than a blog.