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.

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. Taglines 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, hover over an image and click the gear icon, then 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.
Tip: If you don’t see the Site Info and Hide Site Info tweaks, preview a different template on your site, then cancel the preview.

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

Use these tweaks to set the background colors for your site:

  • Main content area - Page Background in Main Content 
  • Header - Header Background Color in Site Header
  • Prefooter - Pre Footer Background in Prefooter
  • Footer - Footer Background in Footer

Fonts

Adjust the text style, size, and color with Page Text and Heading tweaks in Main Content.

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 and are 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.
  • Stack multiple banners by creating sections with banner images but no page content. For new pages, delete the default Text Block. You'll still see placeholder white space while logged into your site.
  • 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.

On the landing page:

  • A "Read More" link appears under posts with excerpts. The text and arrow in this link follow the Page Text font and Page Link Color style tweaks.
  • The full content of individual posts displays under the title for posts without excerpts.

On individual posts:

  • The thumbnail image displays as a banner when you view an individual blog post at its direct URL.
  • Tags, source URLs, comments, shares, and likes always display below the post.
  • Categories always display above the post.
  • Navigation for previous and next posts displays below the comments.

Style Blog Pages in the Blog section:

  • Use Meta Priority to select which metadata (date, categories, or author name) displays above the post content on the landing page.
  • Uncheck Hide List Entry Footer to display tags, the source URL, comments, shares, and likes below post on the landing page.
  • To center post titles and metadata on the landing page, check Center Entry Title & Meta.
  • Display or hide blog authors from both the landing page and individual posts 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.

  • Blog sidebar content displays beneath the main content on blog pages and blog posts. 
  • Navigation sidebars are hidden by default. Tap + in the top-right corner to display navigation sidebars of product pages, pages in a folder, and Index Page sections visitors land on through a direct link.
  • 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?
54 out of 100 found this helpful