Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Wexley template

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 are bold, and link to the list of all Wexley tweaks to help you navigate the panel.

Tip: Wexley's Live Preview page shows real customer sites using this template.

Supported pages

Header

Visitors use the header at the top to navigate your site. In Wexley, the header has the site title or logotag line, and Main Navigation.

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-header.png

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
  • 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.

wexley-page-header.png

 

Site layout

Set the alignment for the header, footer, and main content area with Site Alignment in General.

Gallery and Blog Pages have their own layouts.

Background

Change the site background color with Site Background in 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 in Footer.
  • To hide them, check Hide Social Icons.

wexley-footer.png

Blog Pages

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.

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:

  • 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-blog.png

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 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.

wexley-gallery.png

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 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.

wexley-gallery-lightbox.png

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

Fonts

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 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.

  • 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, but we don't recommend it.

wexley-mobile.png

Was this article helpful?
18 out of 41 found this helpful