Making The Most of Image Stacks

Squarespace offers five image layouts that can do a lot to quickly elevate the look and feel of your content. One layout, however, is more productive than most. The Stack layout is formatted to be consistent in appearance on desktop, tablet, and mobile screens. It looks great with a button and it can hold quite a bit of text before being stretched beyond its means. Here are two ways you can make the most it.

Create Vertical Cards

In your own daily use of the internet, you may have noticed a design trend that is known as “card layout.” It’s when designers place chunks of content in square or rectangle blocks. You can visually tell these blocks apart by their background color, which is often in a gentle contrast against the background color of the site. Sometime’s it’s not so gentle; it really just depends on your brand style.

You can do the same with the Stack image layout (and the Card layout) by doing two things in Site Styles:

  1. Remove the distance between the card (area that holds the title and subtitle text) and the image. You do this by scaling the “card separation” down to “0.”

  2. Edit the background color of the card to give it contrast to the background color of the site. You can go gentle and make it a few shades darker, or go stark and give it an entirely different color altogether.

Step One: Once you’ve selected the image layout in Site Styles, scale the “Card Separation” down to “0.”

Step One: Once you’ve selected the image layout in Site Styles, scale the “Card Separation” down to “0.”

Step Two: Edit the “Card Background” to a color that gives you a contrast with the site background color. You may need to also increase the “Card Padding” to give your text room to breathe.

Step Two: Edit the “Card Background” to a color that gives you a contrast with the site background color. You may need to also increase the “Card Padding” to give your text room to breathe.

The overall effect is that you’ve now created a visual space that holds a solid block of content. Users are drawn to these spaces because they stand in visual contrast with the background of the site, which is a separation that signals a distinction. This content must be important and worth scanning.

Create Columns Of Content

The Stack layout does really well when multiple instances of it are placed side-by-side. This can be an effective layout when creating comparison tables or introducing blocks of separate, but related content.

Title

Lorem Ipsum

Title

Lorem Ipsum

Note: These columns will stack vertically from left to right on mobile, so place content within them wisely.

Other Considerations

Image layouts are visually appealing and make for easy formatting when trying to create an interesting page layout. However, there is still a huge value in classic text on a web page. Search engines still love seeing an H1 at the top of a page and body text. Learning on image layouts won’t harm your SEO, but don’t lean too hard. There’s still value in a well-formatted text block.