The style and features of the Wells template.

Wells is a portfolio template popular with artists, photographers, and other creative businesses. With its sidebar navigation, prominent gallery pages, and clean design, Wells puts your work front and center.

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

Supported pages

Wells supports these page types:

• Album pages
• Blog pages - List
• Cover pages
• Events pages
• Gallery pages - Slideshow/grid
• Layout pages
• Store pages - Classic

Sidebar

Wells features a navigation sidebar on all pages. The sidebar can contain:

• The site title or logo and tagline. Style these with the Site title / Logo options tweaks.
• Main navigation and secondary navigation links. Style these with the Site navigation options tweaks. Dropdowns expand when clicked.
• A content area you can customize with blocks. The content area doesn't display on mobile.
• Built-in social icons. Style or hide these with the Social link options tweaks.
• Gallery page navigation.

Style the sidebar width and position with the Sidebar options tweaks.

• Sidebar text alignment.
• When Sidebar fixed is checked, the navigation links stay fixed in place. When unchecked, the sidebar moves up the page as you scroll.

Blog pages have a second sidebar.

Background

Use the Site background tweak in the Site wide options section of site styles to change the background color of your site. Wells doesn’t support background images.

Blog pages

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

On the landing page:

• Promoted image, gallery, and video blocks always display above the post title.
• Dates and categories display below post titles.
• Post featured images display below the title for posts that have excerpts, but don't contain a promoted block.
• Excerpts display "Read more" links.
• The full content of individual posts displays under the title for posts without excerpts.
• Source URL, tags, comments, shares, and likes display below the post content.

On individual posts:

• Promoted blocks display above post titles.
• Dates and categories display below post titles.
• Source URL, tags, comments, shares, likes, and navigation for previous and next posts display below the post content.
• Change the metadata color with the Blog meta data color tweak under Blog options.

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 options section of site styles:

• Choose the side with Blog sidebar.
• Hide the sidebar with Blog sidebar: hidden.
• Set the size with Blog sidebar width and Blog sidebar padding.

Gallery pages

Wells gallery pages display images and videos in a slideshow. If visitors click Show thumbnails in the bottom-left corner, or the up arrow that appears on hover over an image, the display changes to the thumbnail view. Clicking a thumbnail returns the view to slideshow for that image.

Style the Gallery Page with the Gallery options tweaks.

Layout

• To make thumbnail view the default when visitors land on Gallery Pages, choose Initial gallery view: thumbnails.
• Gallery pages set as the homepage can have different layout settings. Use the Homepage gallery view tweak to set this.
• To hide the thumbnail option, uncheck Enable gallery thumbnails.
• Use the Gallery style tweak to choose if slideshow images resize to fit the browser height with no cropping (Fit) or crop to fill all available space (Fill).
• Set the size and shape of your thumbnails with Thumbnail aspect ratio and Thumbnail width.
• Image captions display in the site-wide sidebar in slideshow layout. They don’t display in thumbnail view.
• Style image captions with the Text tweaks under Site wide options. For color, titles follow Headings color and descriptions follow Body text color.

Navigation

In slideshow mode, gallery navigation appears in the site-wide sidebar.

• Choose if it displays as text or bullets, or hide the navigation, with Gallery controls.
• Change colors, sizes, and fonts with the other Gallery controls tweaks.

When you hover over the side of an image in slideshow, the cursor turns into left or right arrows. Use these to scroll. If there's only one image in a gallery, this doesn't display.

More help with galleries

• If image titles, descriptions, and navigation for any image are too big to fit in the sidebar, they'll display on the opposite side as an overlay for all images in the gallery. Navigation numbers or bullets always display as Prev / Next in the overlay.
• Customize deeplink URLs to send visitors directly to any image in the slideshow.
• Wells galleries don't support clickthrough URLs or a lightbox.
• On mobile devices and reduced-width browsers, images stack vertically. Captions display below the image.

Footer

Wells doesn't offer a footer. For a list of templates with footers, visit Editing footers.

Fonts

Style your site's fonts with the Site wide options tweaks.

Mobile

With Squarespace's built-in responsive design, your site adjusts to look great on any device.

• Set the site title's font and size of the site title with the Mobile site title style: manual tweak under Site title / Logo options. Set the logo size with Mobile logo image size.
• Blog sidebar content displays beneath the page content.
• You can disable mobile styles, but we don't recommend it.

Sidebar content doesn't appear on mobile, and the navigation links collapse behind a Menu link in the top-right corner.

• The Menu link always displays on mobile, even if the main and secondary navigations are empty.
• Dropdowns are automatically expanded to reveal the navigation links for each nested page. Clicking on the dropdown title will open the first page nested in that dropdown.
• The overlay background follows the Navigation (active) color tweak under Site navigation options.
• The navigation links follow the Site background color under Site wide options.

Troubleshooting Wells

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.

Can't see navigation sidebar on mobile devices

The responsive design in Wells condenses navigation links to a menu link in mobile view. You’ll see the navigation sidebar when viewing your site on devices or browsers that are wider than 800 pixels.

Dropdown title navigation links

A dropdown title navigation link won't appear centered on mobile if it's a long, single term. Break the dropdown's navigation title into multiple words to resolve the issue.

Similarly, one word dropdown and page navigation links will appear cut off on computer if they extend past the navigation sidebar's width. Longer links that contain multiple words, however, will wrap down to a second line. Either shorten the term or consider breaking the navigation title into multiple terms.

Gallery page navigation controls aren't showing

There are a few reasons why this might happen.

1. If the Gallery controls: hide tweak is checked in the Gallery options section of site styles, the navigation controls won’t display.
2. If there isn’t enough room in the sidebar for the title and description of any image in the gallery, the navigation displays on the opposite side in an overlay.

Gallery page thumbnails are out of order

This happens when the Thumbnail aspect ratio in the Gallery options section of site styles is set to Auto. This setting creates the best layout for thumbnails based on their different sizes.

To display display images in the correct order and make them all the same size, select any aspect ratio other than Auto.

Image captions and navigation display on the wrong side

Wells gallery pages have responsive design based on browser size. If the title, descriptions, and navigation for any image in a gallery are too long to fit in the sidebar, those elements display on the opposite side as an overlay for all images in that gallery page.

These steps may help:

• Expand your browser window.
• Shorten the image titles and descriptions, or reduce their font size in site styles.
• Create more space in the sidebar by reducing the number of navigation links and removing blocks from the content area.
• Use Dropdowns to create drop-down menus and consolidate navigation titles.

If you selected Number or Bullets as your navigation, it displays as Prev / Next in the overlay.

Logo or site title keeps shrinking

In Wells, the logo or site title displays in the sidebar. If your site title font or logo image is wider than the sidebar, the template automatically shrinks it to fit.

To fix the issue:

1. Open the Design panel, then click Site styles.
2. Increase the width of the sidebar with the Sidebar width tweak in the Sidebar options section of site styles.
3. Use the Site title size or Logo image width tweaks in the Site title / Logo options section to change the size of the logo or title.

Navigation sidebar overlaps gallery page image caption

If the sidebar navigation has several links or blocks, the sidebar can overlap the gallery page image description and controls on smaller browsers. The gallery page text often moves to the right of the image as the browser gets smaller, but if you're still seeing the overlap, try the following adjustments:

• Change the navigation link font size with the Site navigation options tweaks.
• Reduce the Gallery controls size with the Gallery options tweaks.
• Remove blocks from the sidebar's content area.

Random text appears when I share my site on social media

Squarespace can’t control exactly what appears on social media when you share content. However, sometimes with Wells, content from the blog sidebar displays even if it’s hidden on your site.

To delete the sidebar content:

1. Unhide the sidebar with the Blog sidebar tweak in the Blog options section of site styles.
2. Open the Pages panel, and open any blog page.
3. Hover over the sidebar and click Edit.
4. Delete the sidebar content.
5. Return to site styles and set the Blog sidebar tweak to Hide.

If you don't have a blog page, create one temporarily to remove the demo content from the sidebar, then delete the page.

Site navigation extends below the browser window so visitors can't click the links

If you have a lot of links in your navigation, uncheck Sidebar fixed in the Sidebar options section of site styles. The sidebar will now move up the page as you scroll.

If you want a fixed sidebar, consider reducing the number of navigation links or using dropdowns to create drop-down menus. You can also remove blocks from the content area to reduce the height.