Portfolio Pages in Squarespace 7.1 - A complete guide with examples
Portfolio pages are a new page type on the Squarespace 7.1 platform that was previously not available in Squarespace 7.0. Think of these pages as a hybrid of gallery pages and blog pages. With portfolio pages in Squarespace we are not able to create custom, unique displays of our work with the benefit of collections in Squarespace. Read on to find out more.
Portfolio pages are often a main draw for my web design clients who are looking to switch from Squarespace 7.0 to Squarespace 7.1. On our our consult call for a Squarespace Design Day I often recommend these portfolio pages for clients who either want to display their work, or even for setting up staff or team collections. They are good for more than just showing off your work!
Not sure what Squarespace 7.1 is? Read all about the new Squarespace 7.1 platform here.
Table of Contents:
What are portfolio pages in Squarespace?
Reasons to use Portfolio pages in Squarespace 7.1
How to set up a portfolio page in Squarespace
What are portfolio pages in Squarespace?
Portfolio pages are collections of sub pages and are ideal for showcasing your project work.
If you are an interior designer, photographer, event planner or any kind of service provider that wants to have a way to showcase your work, a portfolio page might be a great option for you.
I say “might be” as it has its limitations which I will go over in this blog post.
So why would you want to use a Portfolio page in Squarespace instead of just a regular page or a blog page? Let’s explore…
Reasons to use Portfolio pages in Squarespace 7.1:
Portfolio pages have all the benefits of regular page sections in Squarespace:
Portfolio pages are regular pages in Squarespace that allow for any of the typical sections that are allowed in Squarespace such as galleries, text sections or banner areas with a background image.
Just like any other pages in Squarespace 7.1, each section has the option to have a colored background or background image.
You can drag the sections up or down to change the order and use the section editing tools to create customized sections within the main portfolio page.
On the portfolio landing page or main portfolio page, we can add any sections we want above or below the portfolio items. We also have many options for styling the portfolio gallery layouts (which I cover later on).
Portfolio pages are so easy to update:
Since these individual portfolio pages are just regular pages in Squarespace, we can update them as we would any other page on our website using the drag and drop editor to have complete control. Also, being able to duplicate a project that has already been set up allows us to create a consistent layout that we can update with new content quickly.
You can easily change the order of Projects:
Changing the order of your projects in your list is as easy as dragging items up and down. This is so much easier than changing the order of blog posts which are ordered by published date!
Easily duplicate a project layout:
Another benefit of portfolio pages is the ease of duplicating a layout your like. You can set up a portfolio page and then choose to duplicate it when you add a new page. This save so much time!
To duplicate a portfolio page:
Click on the 3 dots beside the project you want to duplicate
Select “Settings”
Scroll down on the General tab until you see “Duplicate” and select this.
Change out the image, page title and URL and the SEO options for your new project and then edit the project.
Pagination:
Just like on blog posts, portfolio projects have pagination at the bottom of each project to show the previous and next project. This is a great way to encourage visitors to keep browsing through your portfolio!
How do you set up a portfolio page in Squarespace?
To set up your portfolio page, go to your pages panel. If you want the portfolio page to show up in your main navigation then click the “+” option beside “Main Navigation”. If you don’t want it to show up in your main navigation menu then click the “+” sign beside “Not Linked”.
Choose “Portfolio” as the page type.
You will be presented with 3 different layout options for the portfolio. Go ahead and choose one - you can always change the layout later! Give your portfolio page a name. You can click on the gear icon beside the portfolio page to alter the page name, navigation title or url. The page name is what shows up in the browser tab, the navigation title is what appears when you have your portfolio page in the navigation area and the url is the link you will send visitors to. (ie www.yourwebsite.com/portfolio)
When you first create your portfolio page you will see 4 sample projects already appearing on the left side. You can either delete these to start from scratch or edit the existing projects,.
To delete an existing project:
Click on the 3 dots beside the project name. Select “delete”
To edit an existing project:
Click on the title of the project.
The project will open on the right.
Select “edit” at the top of the page
Edit as you would edit any page in Squarespace
To add a new project:
Click on the “+” sign beside your portfolio name at the top of the projects.
Choose one of the pre made sample layouts provided or select “add blank” to start with a blank page
For all projects you will want to set the following options which are accessible by clicking on “Settings” for each project:
Under the General Tab:
Upload an image that will be used to represent the project
Set the project title
Set the url slug (note: the default url slug will have the slug name of your portfolio page automatically and you cannot alter that slug at the project level - you will need to go to the portfolio settings to change that)
Under the SEO tab:
Set up your SEO title if you want it to be a different title than your page title.
Set an SEO description using some keywords from your project.
Under the Social Image Tab:
Set a specific social sharing image if you prefer to have a different image other that the thumbnail image display when you share your post on social media channels.
When you load your portfolio page, you will see the portfolio landing page on the right and your list of portfolio projects on the left that appear just like blog posts would.
You can click directly on the left hand list to edit a specific post, or click “Manage Projects” from the right hand page in the portfolio section.
Portfolio page styling options:
I have saved the best for last! There are some very exciting options for your portfolio landing page to show off your project thumbnails!
To access these options, go to your portfolio landing page and click “Edit”. Scroll down to the section with your projects and click on the pencil icon in the top right of the section. Under the format tab you can choose one of the following options below:
Grid: Simple:
Arranges the thumbnail images in a grid layout. Title text for each sub-page appears below the images.
Options for this style:
Width: Full width or Inset
Height of the section
Columns
Horizontal spacing between images
Vertical spacing between images
Aspect ratio of images
Text Alignment of Project titles
Hover effect: Zoom or Fade
Text Spacing: how far the Project title is separated from the image
see it in action:
Grid: Overlay:
Arranges the thumbnail images in a grid layout. Title text for each sub-page overlays the images.
Options for this style:
Width: Full width or Inset
Height of the section
Columns
Horizontal spacing between images
Vertical spacing between images
Aspect ratio of images
Text Placement: where the text appears on hover over the image (center, top left, middle left, bottom left)
Show Text: Before Hover or After Hover
Overlay Opacity: On hover the overlay applied to the image which make it easier to read the text. Note that the overlay color can be styled via the color theme. Choose the color theme for your portfolio section that you want to use and style it using the Design panel > colors.
Be careful with this option as hover modes do not work on mobile devices. According to Squarespace:
“To ensure that the titles appear on all devices for the Grid: Overlay layout:
Click Edit on the Portfolio Page, then hover over the portfolio section and click the pencil icon.
In the Format tab, select Before Hover from the Show Text drop-down menu.
Hover over Done and click Save.”
see it in action:
Hover: Background:
Displays the sub-page titles in a stacked or inline layout. When hovering over a title, the sub-page thumbnail replaces the section background.
Options for this style:
Width: Full bleed or full (leaves some space around the image)
Height of the section
Vertical Alignment
Horizontal Alignment
Link Format:
Stacked: Project titles appear one per line
Inline: Project Titles appear side by side and flow to next line
Horizontal Link Spacing
Vertical Link Spacing
Animation Type: None, Fade, Scale Up, Scale Down
Animation Duration
Keep Last Selection: always will have an image displayed in the background of last selected project
Delimiter - symbol that appears between the project titles
see it in action:
Hover: Fixed:
Displays the sub-page titles in a stacked or inline layout. When hovering over a title, the sub-page thumbnail displays smaller in a fixed position in the section.
Options for this style:
Link Format:
Stacked: Project titles appear one per line
Inline: Project Titles appear side by side and flow to next line
Selection in Front: When on only the selected project title appears above the image. The other project titles are underneath the image
Horizontal link spacing: space between inline project titles
Vertical link spacing
Delimiter: the symbol that appears between project titles when link format of “Inline” is selected
Animation Type: None, Fade, Scale Up, Scale Down
Animation Duration
Image Size
see it in action:
Hover: Follow Cursor:
Displays the sub-page titles in a stacked or inline layout. When hovering over a title, the sub-page thumbnail displays smaller and follows the cursor as it moves.
Options for this style:
Link Format:
Stacked: Project titles appear one per line
Inline: Project Titles appear side by side and flow to next line
Selection in Front: When on only the selected project title appears above the image. The other project titles are underneath the image
Horizontal link spacing: space between inline project titles
Vertical link spacing
Delimiter: the symbol that appears between project titles when link format of “Inline” is selected
Animation Type: None, Fade, Scale Up, Scale Down
Animation Duration
Image Size
Follow Speed: the speed that the image appear on hover
see it in action:
Limitations of using Portfolio pages in Squarespace:
If any of these limitations are dealbreakers then I would suggest using a Blog page for your portfolio instead of a Portfolio page as these limitations do not exist on Blog collections in Squarespace.
You can only have 60 subpages per portfolio page
For most people this should be more than enough, but if you are wanting to showcase more than 60 projects you will have to use a workaround due to this limitation.
One way to get around this would be to create multiple portfolio pages and treat them as categories. For example, if you are an interior designer that does commercial and residential projects then you could have one portfolio page for Commercial and one for Residential
You can not move portfolio items from one portfolio page to another portfolio page without a third party plugin
Sadly you will have to do this manually unless you purchase the third party plugin Squarespace websites chrome extension which will allow you to copy a portfolio collection either as a copy on your current site or even to a new site. You will just need the “Lite” version for copying collections.
You can not access specific portfolio projects via a summary block to display on other pages of your site
Not sure why this is, but seems like a big oversight to me. It would be nice to show featured projects elsewhere on our sight, but as of this writing Squarespace does not allow it.
Can you manually make this happen? Yes you can. You could add any type of gallery section to the page you want to feature your projects on. Add an image and then on the image settings link to the project you want to go to. A bit of a pain, but manageable!
You cannot use categories and tags without a third party plugin
There is no way to use categories and tags on your projects. How nice would it be to for instance have a category of “kitchens” or “bathrooms” etc. Nope. Can’t do it within portfolios.
One way to actually have categories and tags is to use the Squarespace websites plugin Universal Filter tool to be able to add categories and tags to your portfolio items. This is an additional purchase outside of your Squarespace plan.
You will need special code to hide portfolio items in “draft” mode since there is no built in option
In the blog collection we can have draft posts that do not show up as we work on them. In a portfolio collection as soon as you select “Save” it shows up within the portfolio page automatically. There is no way to save as a draft built into Squarespace natively, but now thanks to Chris Schwartz-Edmisten, there is code available to copy and paste to allow for portfolio items to be in draft mode and unpublished until you are ready. You can find the portfolio draft mode code and instructions right here.
Portfolio inner pages (or subpages)
Portfolio subpages or inner pages are the pages with each individual projects information (or whatever content you have within your portfolio). These are the individual pages in the portfolio collection.
Portfolio inner pages operate like any other regular page in Squarespace so we have all of the same options that are available to us on those pages. For example you can have sections that have background images, gallery sections, list sections etc.
Here are some sample portfolio pages designed using different gallery section options to give you an idea of what you can do - each with a different gallery layout. These galleries include slideshow galleries, masonry galleries and grid galleries.
Real life examples of Portfolio pages in Squarespace 7.1
All of these examples of portfolio pages were done on one or more Squarespace Design Days.
Portfolio pages for Interior Designer sites:
With the flexible layout of portfolio pages, we can show off project work for an interior designer in creative ways. For example, we could have a section with a banner image and project name, then a section where we describe the type of project and include descriptive keywords (think keywords you want to get found for!). Then the next section could include a gallery of images and then a testimonial for the project after that.
The portfolio landing page for an interior designer:
The individual project page featuring a banner image, description ( case study) and masonry gallery
Another interior designer example with a Project title area with credits to applicable people involved and then a large gallery and testimonial section.
Portfolio page for a Wedding Photographer in Squarespace 7.1
Portfolio pages in Squarespace 7.1 are an ideal way to show off photography work as well. Here is an example for a Wedding photography team:
The main portfolio landing page with a gallery, testimonial and call to action:
The individual project page to show off the wedding event or engagement photos:
Portfolio pages for a Wedding Event Planner
This portfolio landing page was set up for a Wedding event planner to add in project details. the Portfolio item titles appear when hovering over the portfolio images:
Then when a portfolio image is clicked the visitor is shown the complete project page
Portfolio pages are not just for interior designers and event planners though! Here is an example of a Real Estate Development company with portfolio collections of some of their real estate properties:
Portfolio page on Squarespace 7.1 for a Real Estate Developer
Portfolio landing page for a Real Estate developer:
The details of the Real Estate develpment are shown off on the individual portfolio pages:
Portfolio page in Squarespace 7.1 for a Wellness Counselling businesses team
For a completely different idea of what we can do with Portfolio pages, here is a Mental Health website that shares their counsellors or staff using Portfolio pages:
Need help setting up a beautiful portfolio based website? Hire me for the day to get the help you need quickly!
Portfolio pages are an exciting new feature in Squarespace 7.1 that allow us more control over displaying projects, our work, team members or any other collections. Have fun experimenting with them and incorporating them into your website!
pin it for later
