Squarespace for Photographers | Template Recommendations and CSS Customizations

Squarespace is an incredibly powerful platform for any business owner or blogger, but it holds a special place in my heart for photographers. As a photographer myself, I have yet to find anything that rivals Squarespace when it comes to displaying photographs, creating galleries, sharing client previews, or creating beautiful blog post images with.

In my opinion, Squarespace is king when it comes to photography websites. Today I am sharing my favorite templates and CSS customization tricks for photographers. 

Squarespace for Photographers Guide

Template Recommendations


My favorite templates for photographers are Ishimoto, Montauk, Supply and Avenue. You can explore all of the Squarespace templates here.

I run Courtney Malone Photography on Ishimoto, as I love the full width galleries, and clean layout. I've made some CSS tweaks to my site to create a full width footer, center align blog post titles, add an additional header font option (as is, it only has one header font option), and even created a custom index "hack" if you will, since this template doesn't come with the incredibly powerful index feature that some Squarespace websites have (such as Avenue).

Below are some of the reasons I love each of these Squarespace templates for Photographers.


+ Great for Family and Lifestyle Photographers

+ Full Width Galleries (see example here)

+ Clean Layout

Ishimoto


+ Simple, yet elegant design, ideal for wedding photographers

+ Traditional Layout

+ Page Border Options that allow you to carry through branding

Montauk


+ Great for travel or documentary photographer

+ Modern and clean layout

+ Layout focus is photographs, rather than menu navigation and other parts of website

Supply


+ Multiple Layout Options

+ Index Capabilities

Avenue


CSS Customizations


With any Squarespace website, custom CSS allows you to differentiate so that it doesn't look like everyone else's website using the same template. With each of my clients, I always add in some Custom CSS to add some interest and break from the norm of the template. Below are some of my favorite CSS tricks for photographers (or really anyone with a Squarespace site!)

For each of these code snippets, you can copy and past and tweak as necessary in your Custom CSS section of your Squarespace menu. This can be found under Design > Custom CSS.


A typical image block has quite a bit of padding, creating too much white space around each image in my opinion. The following code snipped will reduce that padding, creating a more cohesive display of individual images in a blog post or on a page. (for an example, see here)

Image Padding

 
.sqs-block.image-block {
  padding: 2px !important;
}

Changing the color of your gallery control arrows is a great customization, and a simple way to carry your branding through your design. Below is the code to change your arrows for image galleries. I use this not only on my photography site, but with my design site as well, as seen on the homepage, and portfolio pages. Simply replace the color hex value with one that fits your branding! If you've selected a color in your Style Editor, you can simply copy and past the code if you'd like the color to be the same.

Gallery Arrow Controls

 
.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    background: none !important;
    color: #b7ab34 !important
}

Changing the color of your line block is another simple way to carry through branding. This simple code will help you do so. Simply replace the hex value (the number after the # in the border-top line) with a color that fits your brand. This code also adjusts the pading, so there won't be as much space around each line.

Customize the Line Block

 
.sqs-block hr {
    border-top: 1px solid #cfdbd3;
    border-bottom: none;
    background-color: transparent;
    padding-bottom: 0px;
    padding-top: 0px;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px
}

This is one of my favorite code snippets to add, and I've done so to my design site and photography site. This creates a border color at the top of your site (and bottom as well if you so choose!). To see it in action, take a look at the black border at the top of this site, and the seafoam border on Courtney Malone Photography.

Add a Border to your Site

 
body { 
  margin-top: 0px;
  border-top:  10px solid #cfdbd3;
  border-bottom: 10px solid #cfdbd3;
}

This works particularly well on the Ishimoto template. This will center your blog post titles, as well as the meta data (date, categories, etc.) that is right below the title. If you are on the Avenue template, leave out the second set of code starting with div.entry-info.

Center Your Blog Post Header + Meta Data

 
header .meta,
h1.entry-title { text-align: center; }

div.entry-info {
  text-align: center;
}

Whether you are a photographer, or another business owner/blogger using Squarespace, I hope you found this post helpful! Photographers hold a special spot in my heart, so I hope to continue to add posts that might help you display your work beautifully on Squarespace. Next up, I'll be posting on how to create an Index, when your template doesn't have an Index option! 


Questions? I'd love to help.

Have questions on any above templates or custom code? Please don't hesitate to reach out. I'd love to help in any way that I can!

Name *
Name