Image Styles on Squarespace

You can do so much more than simply place an image on a web page with Squarespace. The content editor comes equipped with multiple image styles that allow you to pair text-content with your images. You can even edit the default appearance of these image styles in Site Styles, allowing you to give each style a unique look that you can use however you need to.

The Five Image Layouts

Image+Layouts.png

The icons here in the content insertion window do a great job of showing you the exact visual layout of each image style. Since that’s straightforward, we’ll share with you some of our favorite uses of each one.

Poster

This layout makes for a great visual break in text-heavy pages. Use it to create subject headings, or use as a space for “callout” content. Image choice matters here, you’ll want the text to be readable over the image.

Card

This layout is great for pairing a small block of text with an image. When used in groups, cards can be a great way to create a page layout.

Overlay

Sort of like poster, this layout is great for creating visual subject/section headings, or calling out special content. Use a button to attach a link to this image layout and use it to draw attention to special content.

Collage

A cross between overlay and card, collage is a great layout to use when you want to draw attention to visual content, while offering a styled caption to give it additional context.

Stack

We love using the stack layout when we want to create columns of content with a visual heading for each one. The layout creates the column for us. Just be careful to not overload each layout with a mass of text.

Editing Image Layouts In Site Styles

Site+Styles+Stack+Image+Layout.png

You can use Site Styles to edit each image layout to improve the font selections, colors, and spacing of elements in each block. Here are a few things you can do:

  • Edit Title and Subtitle Font Choice, Color, and Size

  • Edit the Distance Between Images and Text

  • Edit the Padding Around Text

  • Edit the Distance Between Images and Cards (the space behind text is also known as a card)

  • Edit Hyperlink Color

  • Enable or Disable “Dynamic Sizing” - an option that scales the size of text in an image layout based on the size of the browser window or device screen it’s currently showing on.

Links And Image Layouts

You can hyperlink subtitle text in image layouts, but you can also make the image a link or add a button to the layout.

Image+Link+Stack+Image+Layout.png

Image Layouts On Mobile

Image layouts are great on desktop. They make for easy image/text layouts that can give a lot of character to a web page. However, on mobile they have to scale for smaller screens, so be aware that your image layouts will stack - typically image above text - on mobile. Curious about how that looks, if you’re reading this post on desktop, check it out on mobile and find out.