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

The versatile Bedford template family (Anya, Bedford, Bryant, Hayden) works for all types of sites, from nonprofits to real estate listings. Special customizable banners and buttons, sidebar navigation, and a scrolling Index Page put the focus on your products, mission, or event details. 

This guide covers the features and design options for the Bedford family. Site Styles tweaks are bold, and link to the list of all Bedford tweaks to help you navigate the panel.

Tip: The Live Preview pages for Anya, Bedford, Bryant, and Hayden show real customer sites using these templates.

Supported page types

Bedford supports these page types:

Header

Visitors use the header at the top to navigate your site. In Bedford, the header has the site title or logo and Main Navigation. Tag lines don't display. The header is fixed on Index Pages.

Style the site title or logo in the Site Header section.

  • Use Transparent on Banner Images to choose if the branding and navigation display as an overlay over page banners or over the Header Background Color.
  • Resize the logo with Logo Container Width. The maximum height is fixed at about 100 pixels, and the logo won't scale up beyond that. 

Use Site Navigation tweaks to change the display settings for the Main Navigation.  

  • When Enable Nav Button is checked, the last page in the Main Navigation displays as a button. Change how it looks with the Nav Button tweaks. Folders don't become buttons. 
  • If there's not enough room in the browser window for the navigation links to display across the header, a ☰ displays instead. 

bedford header

Banners

Add full-bleed banner images and videos to the top of your pages, then overlay them with customizable headings, text, and buttons. You can add banner images and videos to:

  • Layout Pages
  • Album Pages
  • Blog Pages and posts
  • Events Pages and individual events
  • Products Pages

Keep in mind:

  • You can check Transparent on Banner Images in Site Header to display header content over the banner.
  • You can add slideshow banners to Layout and Blog Pages.
  • You can stack multiple banners in Index Pages.
  • For all banners, use the Banner Section tweaks to adjust the fonts, colors, and styles for the buttons and text overlays.

Page banners

Create a banner image or video at the top of Layout, Album, Blog, Event, or Products Pages by adding thumbnail images or video URLs in page settings.

Add a text overlay in the Page Description field of the General tab. You can format the text as headers and buttons. Page Title text doesn't display.

Slideshow banners

Create a slideshow banner at the top of a Layout Page by adding a Slideshow Gallery Block as the first block on the page. 

  • The Gallery Block won't display on the page. 
  • Slideshow banners override page banners. 
  • Videos added to the Gallery Block appear in the banner, but don't play automatically. They include sound and display banner text.
  • For best results, check Automatically Crop Images in the block editor's Design tab. 
  • If your banner has a text overlay, check Show Title and Description in the Design tab. The title won't display.
  • Slideshow banners have a fixed height:
    • Desktop - 600 pixels. If the header is transparent on banner images, the fixed image height extends to 700 pixels. 
    • Mobile - 300 pixels. Devices taller than 640 pixels display the desktop banner height.
  • Blog Pages also create slideshow banners from featured posts. 

To add overlay text, click an image's and add text to the Description field. If you linked to an existing gallery, update the descriptions in the Gallery Page. 

  • You can format the text as headers and buttons. 
  • If the text on a slideshow banner is too long to fit in the fixed height, non-bold description text won't display. Bold description text will crop.

slideshow banner

For page and slideshow banners:

  • Bold text formats as a header.
  • Regular text formats as body text.
  • Links in the last line format as buttons. The link can't include any bold text or any other lines below the link.
  • Add extra height to the page banner by adding blank spaces

text overlay in page settings

banner text and buttons.jpg

Blog post and event banners

Collection item thumbnails display at the top of blog posts and individual events. These banners have a fixed height.

  • Events - No text displays in the banner.
  • Blog posts - The post title and one metadata element (choose with the Meta Priority tweak) display over the banner image. 

Add a color filter

Add a color filter to all banner images or videos with Banner Overlay Color in the Banner Section

  • The color displays in the banner area while the banner image loads, even if the tweak is transparent.
  • The color appears on mobile if the video banner can't load and you haven't set a mobile fallback image.

More help with banners

Footers

Bedford includes footer and pre-footer content areas, which you can customize with blocks

  • The footer and pre-footer might automatically include content, like a Social Links Block or Text Block. Delete or edit these blocks to replace them with your own content.
  • Text links in the footer and pre-footer are underlined.
  • Changes that you make to the footer appear throughout your site. 

Use Footer tweaks to style the footer content:

  • Style the Footer Navigation with the Footer Nav tweaks.
  • Use the Center Navigation / Info tweak to align the Footer Navigation and contact info.
  • Use the Site Info tweaks to style the phone number, email, and physical location from your Business Information settings
  • Check Hide Site Info to remove all contact information.

Sidebar navigation

Bedford creates navigation sidebars on pages in folders and Indexes, and category navigation sidebars on Products Pages.

  • Use the Sidebar tweaks to adjust fonts and colors, hide sidebar titles, or hide the sidebar navigation altogether.
  • Sidebar navigation doesn't support blocks.
  • Every page added to a folder appears as a link in the sidebar navigation. The sidebar displays on any Layout Page in the folder.
  • Pages in an Index only display sidebar navigation when visiting the direct URL for the individual page. 
  • On Products Pages, the sidebar navigation displays links to different product categories. Clicking a link filters out every product except the ones in that category.

Products Page sidebar navigation.jpg

Background and fonts

Use the Main Content tweaks to style your main content area:

  • Set the background color with Page Background.
  • Adjust the text style, size, and color with Page Text and Heading tweaks. 

The site header, sidebar navigations, and page banners have their own font and color options.

Index Pages

Bedford Index Pages turn the content from multiple pages into stacked sections, so you can highlight different images and information in one location.

  • Content sections are made from Layout Pages. They're a good option for adding text, buttons, and other blocks
  • Add page thumbnails to create banner images or videos, or to create a banner slideshow.
  • Style the Index Page's colors and fonts with the same tweaks as other pages. There aren't tweaks specifically for the Index Page.
  • The site title and Main Navigation stay in a fixed position after you scroll past the first page. Use the Header Background Color tweak to adjust the fixed header's background color.
  • Index Pages support Index anchor links. When visitors click these links, they'll jump to a specific section of your Index Page. To see this in action, click the "View Our Work" button in Hayden's demo content.
  • When you visit the direct URL for a page that's part of an Index, all the pages in that Index display in a sidebar navigation

index page sections with fixed navigation

Blog Pages

Bedford Blog Pages display as a list of vertically-stacked posts:

  • Excerpts can only contain text. The "Read More" text and arrow follows the Page Text font and Page Link Color tweaks.
  • When you view an individual blog post at its direct URL, its post thumbnail image displays as a banner.
  • Individual posts always display tags, source URLs, comments, shares, and likes Navigation for previous and next posts displays below the comments.

Style Blog Pages in the Blog section:

  • Use Meta Priority to set the date, categories, or author name above the post content.
  • Uncheck Hide List Entry Footer to display tags, the source URL, comments, shares, and likes below the post.
  • To center post titles and metadata, check Center Entry Title & Meta.
  • Display or hide blog authors with Hide Entry Author. This tweak won’t appear if Meta Priority: Author is selected. 

blog post

Sidebar

Each Blog Page has a customizable sidebar. All blog posts in that blog also display the sidebar.

Enable sidebars by unchecking Hide Blog Sidebar in the Sidebar section, then add content with blocks

blog page sidebar

Slideshow banners

The five most recent featured posts create a slideshow banner on the landing page.

  • Each slide displays the blog post title, one metadata element (choose with the Meta Priority tweak), and a View Post link.
  • The thumbnail image displays behind the text. If the post doesn't have a thumbnail image, the text displays over the Banner Overlay Color.
  • Use the Banner Slideshow Controls tweak to control the navigation elements on your blog's slideshow banner.
  • If none of your posts are marked as Featured, the page banner displays on the Blog Page instead.

Mobile

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

  • Sidebar content displays beneath page content. 
  • Slideshow banners have a set height of 300 pixels. If the text on a slideshow banner is too long to fit, the description text is hidden.
  • You can disable mobile styles, but we don't recommend it. 

A Back To Top link displays at the bottom of the page. 

  • The link follows the Footer Nav Font and Footer Nav Link Color tweaks in the Footer section. If those tweaks don't appear, temporarily add pages to your Footer Navigation
  • The link doesn't display in Device View.

On smartphones:

  • Navigation collapses to a ☰ in the top right. The ☰ always displays on mobile, even if the Main Navigation is empty.
  • The menu overlay's background color is the same as the header.
  • Footers that show business information display an Email link, instead of a full email address. 

smartphone and tablet view

Language options

Bedford supports two language options: 

Was this article helpful?
49 out of 85 found this helpful