York, Artesia, Harris, Lange, Jasper, Shibori, and Taylor share the same underlying structure and functionality. This guide applies to all these templates.
The Project Page is a custom gallery view, designed for making elegant portfolio layouts. Use the Project Page to create layouts that mix text and imagery in eye-catching ways.
Before you begin
- In this guide, “landscape” refers to landscape-oriented images, which are wider than they are tall. “Portrait” refers to portrait-oriented images, which are taller than they are wide.
- On Project Pages, square images follow the same rules as portrait images.
- These templates also support Gallery Pages, which offer different options than Project Pages.
Setting up a Project Page
To set up a Project Page:
- Go to the Home Menu and click Pages.
- Click the + icon to add a Project.
- For best results, add several images or videos, and give each one a title and description; these will display on the page.
Project Pages don’t support lightboxes, deeplink URLs, or clickthrough URLs.
Note: All videos must have a thumbnail image.
Tip: Instead of a clickthrough URL, you can add a link to the image's caption.
Header and footer
Tip: If your Project Page doesn’t have a thumbnail image, the first image added to your Project Page automatically becomes the banner image at the top. Open Page Settings and add a thumbnail image to replace it, or uncheck Show Project Banner in the Style Editor to hide it.
Images and captions on Project Pages appear to slide up from the bottom as you scroll down the page. To remove this effect, uncheck the Cascade Images and Captions tweak.
Alignment and spacing
Use the Project: Layout section of the Style Editor to adjust the relationship between text and images on your Project Page.
- Image Alignment - Align all captions and images to the right, left, or center.
- Image spacing - Adjust the space between each image in the Project.
- Banner spacing - Adjust the space between the page header and the first image. Text Height in the Page: Intro Text section may also affect this.
- Full Bleed Project - All landscape images and videos on the page extend to the browser’s edge, depending on their size. This includes the header banner.
- Allow Full Width Portrait and Square - Display portrait and square images at width of the main content area. If Full Bleed Project is selected, they display at the width of the browser. This tweak appears when Portrait and Square Caption Style is set to Standard or Offset.
- Collapse Landscape Spacing removes the space below landscape images that don't have captions. You can hide captions by unchecking the Show Project Captions tweak.
Note: Images will never stretch larger than their original dimensions. For best results, ensure all images are the same width, or are at least 2500 pixels wide.
To add or adjust titles and description text:
- From the Home Menu, click Pages.
- Click your Project Page in the left panel.
- Double-click the image thumbnail.
- Adjust the Title and Description fields.
Titles and descriptions display below landscape images, and below or beside portrait images. Adjust their layout in the Project: Layout section of the Style Editor.
- Use the Show Project Captions tweak to display or hide all image names and description text.
- Collapse Landscape Spacing removes the space below landscape images that don't have captions.
To justify the text left, right, or center:
- Use the Caption Title Align and Caption Body Align tweaks.
- For captions displaying beside portrait images, use the Align Alternate Captions to Image tweak.
If you’ve selected Image Alignment: Center and checked Show Project Captions, you can further adjust where the captions display on the page with the Portrait and Square Caption Style and Landscape Caption Style tweaks.
- For either tweak, choosing Standard displays the caption directly below the image, and Offset moves the caption further down, equally spaced from the next image.
- Choosing Portrait and Square Caption Style: Alternate moves captions to the side of square and portrait images. The captions alternate from left to right. Images without captions will be centered.
- Choosing Landscape Caption Style: Inset moves up the captions beneath landscape images to slightly overlap.
Use the tweaks in the Project: Fonts section of the Style Editor to style the text of your image title and descriptions and to justify left, right, or center. You can also choose to scale the fonts to control how they display on the web.
Images in Project Pages will never stretch larger than their original dimensions, even if you select Full Bleed Project. This prevents your images from looking blurry or pixelated.
- In general, the image size on your Project Page is determined by the original dimensions of your image. If you want the image to look larger on the page, upload an image with larger dimensions.
- To reduce the size of the image on the page, upload an image with smaller dimensions. You can also use the built-in Adobe Creative Cloud Image Editor to reduce the image size.
- The Site Outer Padding tweak may also affect the width of images that aren’t set to Full Bleed.
- Video width is set by the hosting site. To customize video width, use the video embed code and set the width manually within the code.
- For help with banners and responsive design, see our best practice recommendations.
Note: To optimize responsive design, Squarespace creates up to seven versions of each image that you upload. The maximum width created is 2500 pixels. Therefore, images on your Project Page will never be wider than 2500 pixels.
To rearrange the order of images on the page, change the order within the Pages panel. The Project Page panel has the same functionality as the Gallery Page panel.
You can move an image and its corresponding title and caption between any Project Page or Gallery Page. To learn more, visit Moving content between pages.
Gallery Page vs. Project Page
In addition to the Project Page, these templates support the standard slideshow/grid Gallery Page.
While the Project Page is great for a mix of imagery and text, the Gallery Page is ideal for putting the focus on images and video alone. Unlike Project Pages, Gallery Pages support deeplink URLs, clickthrough URLs, and lightbox functionality.
To test out both options, you can move images between Gallery Pages and Project Pages.
Note: The Gallery Page doesn't support page banner videos.
If you switch to any template other than York, Artesia, Harris, Lange, Jasper, Shibori, or Taylor, your Project Pages convert to Gallery Pages.
If you switch back to York, Artesia, Harris, Lange, Jasper, Shibori, or Taylor, you may need to create new Project Pages and Gallery Pages and move images into them to recreate your original format.
On mobile devices and narrow browsers, content stacks vertically.
Note: For general information about styling your site, visit Structure and style.
Use the Index Page to create landing page of clickable banners.