York, Artesia, Flores, Harris, Jasper, Jones, Lange, 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. Non-landscape images have additional full-bleed options.
- Allow Full Width Portrait and Square - Display portrait and square images at width of the main content area, with captions below. 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 set to full-bleed. 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 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.
Full-bleed images extend to the edges of the browser, ignoring the outer padding. To enable this, first ensure your images are large enough. Images in Project Pages never stretch larger than their original dimensions. They also won't display wider than 2500 pixels.
If your images are large enough, you can use the Style Editor to make them full-bleed. This will affect all Project Pages on your site.
In Project Pages, images can only display full-bleed when:
- The captions are below the images.
- Images are centered.
To display your images full-bleed:
- Open the Style Editor and scroll to the Project: Layout section.
- Ensure Show Project Captions is checked, even if you don't have captions.
- Choose Image Alignment: Center. This centers your images.
- Choose Full Bleed Project. This sets your landscape images to full-bleed.
- Choose Portrait and Square Caption Style: Standard or Offset. This moves any captions below your non-landscape images.
- Check Allow Full Width Portrait and Square. This sets your non-landscape images to full-bleed.
- Save and refresh the page.
Tip: You must set landscape images to full-bleed before you can set non-landscape images to full-bleed. Non-landscape images can't be set to full-bleed independently.
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, Flores, Harris, Jasper, Jones, Lange, Shibori, and Taylor, your Project Pages convert to Gallery Pages.
If you switch back to York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, and 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.