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.
Tip: Wexley's Live Preview page shows real customer sites using this template.
- Album Pages
- Blog Pages - List
- Cover Pages
- Events Pages
- Gallery Pages - Grid
- Layout Pages
- Products Pages - Classic
- Style the header elements in Site Header. Site Subtitle tweaks affect tag lines.
- Style navigation links in Navigation.
- Gallery and Blog Pages have their own layouts.
To choose the layout:
- The branding and tag line follow Site Alignment in General.
- If the branding is on either side, choose if the navigation is next to, opposite, or below it with Header Navigation in Site Header. If the branding is centered, the navigation displays below.
Wexley has page headers on:
- Layout Pages
- Album Pages
- Blog Pages
- Events Pages
- Gallery Pages
- Products 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.
Set the alignment for the header, footer, and main content area with Site Alignment in General.
Change the site background color with Site Background in General. This also affects the header and footer.
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 in Footer.
- To hide them, check Hide Social Icons.
Wexley Blog Pages display as a list of vertically-stacked posts.
- Author names and dates display above the post. The other metadata display below.
- Excerpts have Read More links.
- Promoted Image, Gallery, and Video Blocks display above post titles, including posts with excerpts.
- Navigation for newer and older posts displays above the comments on posts.
Style Blog Pages in the Blog section:
- 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.
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:
- 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.
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.
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 in Gallery Styles:
- 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.
- If images have irregular spacing, see our troubleshooting tips.
You may need to save and refresh the page to see these changes.
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 Gallery Controls in 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 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.
Style the fonts on your site in the Main Content section.
- Set the fonts and colors with Headings Font and Headings Color tweaks.
- Style Quote Block fonts with Quote Font.
- Style the header elements in Site Header and Navigation.
Keep these tips 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.
Blog Pages have a sidebar.
With Squarespace's built-in responsive design, your site adjusts to look great on any device.
- Header elements are all centered.
- Navigation collapses to a Menu link at the top. Set the link background with Mobile Nav Background in Navigation.
- Blog sidebars display at the bottom.
- Device View doesn't always accurately show Wexley's Gallery Page. On mobile, gallery images stack vertically.
- You can disable mobile styles (not recommended).