The ultimate guide to Portfolio pages on Squarespace 7.1
The Squarespace team proved once again that they really know creative business owners; releasing a brand new portfolio feature. Ideal for photographers, designers, and every other business that uses visuals, the portfolio page will elevate your Squarespace website to the next level.
Portfolio pages are a perfect design feature to show off your projects, photo galleries, and case studies.
Be aware though, this new update is only available for Squarespace version 7.1 and there’s no dedicated Portfolio page on version 7.0. If this feature is a must-have for your business, you can move between Squarespace 7.0 and 7.1 or, there are other workarounds to building a portfolio.
How to Add a Portfolio Page
From your Main Navigation Menu, go to Pages
Press + (plus) to add a new page - choose to either add this to your main navigation or leave unlinked, in which case it will not show on your front end but can be linked to from elsewhere
Choose Portfolio: this will prompt you to choose a design, choose one, it doesn’t matter which one as we can change this later
4. Click on the settings ‘cog’ icon > general, then change the page title (I recommend “Gallery”, “Case Studies” or “Portfolio” (depending on your business!) and remember to also change the navigation title and URL if you do this
5. SEO tab: the title is automatically copied from your page title, and you can add a description to change what is shown in your search results > press Save
How to Edit the Design of your Portfolio Page
Just like any page in Squarespace, you can add unlimited page sections and blocks to the Portfolio page. So, to add another page section, click Edit (to the top left of the page) and choose the + add page section above or below the Portfolio section. You can edit these just like any other page on your site!
When it comes to editing, the Portfolio section has its own specific settings that are different to the other sections. You can change the layout of your Projects by clicking on the Edit tab (only in the project section) in order to experiment with different looks and styles.'
For example, if you choose the ‘overlay’ setting, your text (titles) will be overlaid on the image, but the ‘simple’ setting places text underneath the image. After changing the layout, there are tonnes of customizable settings you can play with:
The height and width of the page section
The number of columns
The ratio per image and more
Squarespace allows you to add a background to this section which is super cool! But, if you don’t want to do that, you can change the color of the background instead. Always remember to hit save after making any significant edits on a page!
How to Insert a New Project into your Portfolio
You will see that when you first added your Portfolio, Squarespace gave you six placeholder projects. You can work directly from these by clicking EDIT on them, or you can start from scratch and create new ones.
To start from scratch, click the ‘+’ (plus) icon: this should bring up a bunch of different page layouts and you can essentially add anything you want- choose one or start with a blank page. Then you’ll want to update your project settings, these are important to go through before you hit save and move on.
General Settings
Add your own thumbnail image: this shows up on your Portfolio page as the main image and is important, as it's what site visitors will be clicking on.
Title: also shown on the Portfolio page, either overlaid on your image or underneath.
URL slug: also very important, don’t include any extra letters or numbers, just keep it simple.
SEO Settings
Title: will be automatically taken from your project title (unless you choose to change it)
SEO description: is what shows up in the search results, and how google decides whether your page is relevant, we recommend updating this for maximum SEO.
Social Image: choose to add one or leave this and search engines will take the main thumbnail image
Again, remember to hit save!
How to Edit your Project
Squarespace 7.1 has made these projects completely editable, like any other page, which is awesome!
You can use different banner sections, images or any blocks to edit your project design, depending on what you project is for / what you need - the options are really endless.
How to use the 7.1 Gallery feature
Squarespace 7.1 provides so many options for page sections and galleries. If you want to highlight images specifically, Squarepace has lots of cool Gallery options.
Add a New Section > Gallery
Choose from the layout options (you can change this later!)
Add images by clicking the Image icon, then clicking the + (plus) icon to upload your images
Click on the pencil/edit Icon to edit which gallery style you want to use
One of the awesome features of Squarespace 7.1 is the ability to adjust the focal point of your image. This means you can tell the image where to focus, and it won’t get cropped off within the design. It’s great for landscape or portrait photos when the template is square, for example.
To adjust the focal point, simply drag the pointer to the focus of your image (either the center, a face or an important section (if you want to learn more about that, check out the video at the top of the page or visit this post where we go into more details!)
Alongside playing around with the gallery layouts, you can experiment with the sections and individual image presentation. You might like to add multiple galleries to each page and choose varying layouts, for example. This could be a well-suited tactic for photographers or anyone who requires lots of visuals on their Squarespace website.
Other important and fun features
One really cool thing about using Portfolio pages is that the Projects link together as blog posts do. This means there are arrows at the bottom of each Project to easily move from one project to another - cool!
You may also want to duplicate projects, however, they must all stay within the portfolio area. Unfortunately, as portfolio pages are so specialized, projects must stay within their designated portfolio page, so they can’t be taken to regular pages.
To duplicate, click on the 3 dots > Settings > Duplicate.
Your project will now appear twice within the portfolio.
Weirdly, there are no drafts within a portfolio section. Your projects publish straight away, and while they can be later edited- there is no room for error. As soon as you hit save, your work is published.
Portfolio Page Design Settings
Just like the regular sections on your Squarespace site, you can tweak and change many of the Portfolio section design settings, including:
Font styles, sizes, colors
Background colors, the overall palette, and hover color (if you have a hover)
Do this by heading into the Main Menu Navigation > Design
> Fonts and into Assigned Styles to edit the fonts
> Colors > Click on the Color Profile you’re using in your Portfolio Section to edit colors.
I hope you’re as enthusiastic as I am about this awesome new feature. Many photographers, videographers, and content creators can breathe a sigh of relief as Squarespace 7.1 makes the Portfolio a native feature. No more coding and no complicated workarounds- hope you find it useful!
Check out these posts for more Portfolio tips 👇
5 simple ways to add a Portfolio to your Squarespace website
How to Build a Design Portfolio when you haven’t had any clients yet
If you liked this post, Pin it to Pinterest! 👇🏻
