Wexley’s gallery layout creates an adaptive mosaic of images and videos, making it perfect for artists, creative professionals, and photographers who need a dynamic way to showcase their work.

This guide covers the features and design options for the Wexley template. Site styles tweaks and the section they appear under in the Site Styles panel are bold.

Supported pages

• Album pages
• Blog pages - List
• Cover pages
• Events pages
• Gallery pages - Grid
• Layout pages
• Store pages - Classic

Header

Visitors use the header at the top to navigate your site. In Wexley, the header has the site title or logo, tagline, and main navigation.

• Style the header elements with the tweaks under Site header. Site subtitle tweaks affect taglines.
• Style navigation links with the Navigation tweaks.
• Gallery and blog pages have their own layouts.

To choose the layout:

• The branding and tagline follow the Site alignment tweak under General.
• If the branding is on either side, choose if the navigation is next to, opposite, or below it with Header navigation under Site header. If the branding is centered, the navigation displays below.

Page headers

Page headers are a great way to customize the top of individual pages. Hover over the area directly above the main content and click Edit to add content with blocks.

Wexley has page headers on:

• Layout pages
• Album pages
• Blog pages
• Events pages
• Gallery pages
• Store pages

Page headers also display above the pages' collection items. For example, if you add a page header to a blog page, it displays above its blog posts as well.

 

Site layout

Set the alignment for the header, footer, and main content area with the Site alignment tweak under General.

Gallery and blog pages have their own layouts.

Background

Change the site background color with the Site background tweak under General. This also affects the header and footer.

Footer

The site-wide footer has a customizable content area and built-in social icons.

The content area supports one column of blocks.

• The width and alignment matches the rest of the site.
• Text links are underlined.

Social icons display below the content area on the left.

• Style them with the Footer tweaks.
• To hide them, check Hide social icons.

Blog pages

Wexley blog pages display as a list of vertically-stacked posts.

On the landing page:

• Author names and dates display above each post. The other metadata displays below.
• Promoted Image, gallery, and video blocks always display above post titles.
• Excerpts are text-only and display with a "Read more" link.
• The full content of individual posts displays under the title for posts without excerpts.

On individual posts:

• Promoted image, gallery, and video blocks display above the post title.
• Author names and dates display above the post. The other metadata displays below.
• Navigation for newer and older posts displays above the comments on posts.

Style blog pages with these Blog tweaks:

• Hide author names with Hide entry author.
• Change the space between posts with Blog post spacing.
• Stye the metadata color with Blog meta data and Share button color.

Sidebar

A sidebar displays on blog landing pages and posts. Customize it with blocks. If you have multiple blogs on your site, the same sidebar displays on all of them.

In the Blog section of site styles:

• Place the sidebar on the right or left with Blog sidebar.
• Hide it with Blog sidebar: hidden.
• Set its size with Sidebar width.
• Change the size and spacing with Blog sidebar padding.

Gallery pages

Wexley gallery pages create sophisticated grids of images and videos to show the range of your work on a single page. When visitors click an image, it opens in a slideshow overlay.

Tip: To see it in action, visit the Wexley demo site.

Gallery grid

On the landing page, images display in a grid.

• The layout adjusts to the size of your images, creating a mosaic effect if your images have different aspect ratios.
• If images in a row are too wide to display horizontally, they stack vertically.
• On reduced-width browsers, the gallery page grid switches to a slideshow view. This is what you'll usually see in device View.
• On mobile devices, images stack vertically.

Style the grid with these Gallery styles tweaks:

• Check Index fullwidth to display the grid at the full width of the site, minus the Outside padding. If unchecked, the grid follows the site alignment.
• When not set to full width, use Index item size to set the size of the images in the grid.
• Change the space between images with Index item padding. Set to 0px to make the images touch.

You may need to save and refresh the page to see these changes.

Gallery lightbox

Click an image to open it in a lightbox slideshow.

• Lightboxes are disabled on mobile.
• Style or hide the navigation arrows, thumbnails or text with the Gallery controls tweak under Gallery styles.

Customize deeplink URLs to send visitors directly to any image in the lightbox slideshow. These links don't work on mobile.

Image titles

Image titles can display with a color overlay on hover for each image in the grid.

• Titles don't display in lightboxes or on mobile.
• Image descriptions never display.

Style the titles in Gallery styles:

• To show the titles, check Enable thumbnail hover.
• Change the color overlay and its opacity with Thumb hover bg.
• Change the text color with Thumb hover color.
• Set the text font and size with Thumb hover title.

Tip: We recommend adding titles to your images even if you disable them on hover, as image titles can be indexed as alt text.

More help with galleries

• Wexley gallery pages don't support clickthrough URLs.
• To create a different layout, use a layout page with a gallery block.

Fonts

Style the fonts on your site in the Main content tweaks:

• Set the fonts and colors Headings font and Headings color.
• Style Quote Block fonts with Quote font.
• Style the header elements in the Site header and Navigation sections of site styles.

Keep in mind:

• Headings font sets the size for Heading 1 and Heading 2.
• Body text font sets the size for Heading 3 and body text.

Sidebar

Blog pages have a sidebar.

Mobile

With Squarespace's built-in responsive design, your site adjusts to look great on any device. Here are some specifics about how the Wexley template works on mobile:

• Header elements are all centered.
• Navigation collapses to a Menu link at the top. Set the link background with the Mobile nav background tweak under Navigation.
• Blog sidebars display at the bottom.
• Device view doesn't always accurately show Wexley's gallery page. On mobile, gallery images stack vertically.
• Vimeo videos won't display on mobile.
• You can disable mobile styles, but we don't recommend it.

Troubleshooting Wexley

Here are some common issues with this template. Some of these are bugs or known issues. Although we still support Squarespace version 7.0, fixing bugs or issues is a lower priority for us while we focus on our current platform, version 7.1. You can move your version 7.0 site to version 7.1 using our update tool.

Gallery page images not loading

This error is caused by outdated code in the Developer Platform version of Wexley. While we released a patch to the Wexley template code that fixes gallery page errors, sites on the Developer Platform don’t receive template-specific updates.

To receive the update necessary to fix your gallery images, disable developer mode on your site. Proceed with caution, however, as moving off our Developer Platform will affect your live site significantly; learn more in the Squarespace Developer Platform FAQ.

Alternatively, leave Developer Mode on and work with your developers to patch the issues with your own custom code. While we can't help you troubleshoot or provide specific directions for custom code modifications, we offer other resources that can point you in the right direction:

• Get advice from the community in the Squarespace Forum.
• Hire a Squarespace Expert to help build or review your custom code.

Padding between gallery grid images is uneven

This sometimes happens when the padding between images is very small, usually less than 5 pixels.

To fix this, open site styles while you're viewing the gallery page, then try these troubleshooting options to see what works for your site:

• Scroll down to Gallery styles and increase the Index item padding to 5px or more.
• Alternatively, you can reduce the padding to 0px to remove the space between images altogether.
• If you don't like the look of either of those, in the Gallery styles section, uncheck Index Fullwidth. You can then use the Index item size to adjust the size of the images in your gallery.

You may need to save and refresh to see these changes.