The style and features of the 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 and the section they appear under in the Site Styles panel are bold.

Supported page types

Bedford supports these page types:

• Album pages
• Blog pages - List
• Cover pages
• Events pages
• Gallery pages - Standard
• Index pages - Stacked
• Layout pages
• Store pages - Classic

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 with these Site header tweaks:

• 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. Dropdowns don't become buttons.
• If there's not enough room in the browser window for the navigation links to display across the header, a ☰ (also known as a menu or hamburger icon) displays instead.

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
• Store pages

Keep in mind:

• You can check Transparent on banner images in the Site header section of site styles 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 store pages by adding feature images or video URLs in page settings.

Add a text overlay in the Page description field of the General tab. Keep in mind, only users with Owner or Administrator permissions on a site can add a Page description. 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 you check Transparent on banner images in the Site header section of site styles, 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 , 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.

Banner text and buttons

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.

Tip: After creating a button link, you can edit the button text directly from the page editor. Note that if you delete all text, the link will also disappear and you'll need to add it again in page settings.

Blog post and event banners

Collection item featured images 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 type of metadata (choose with the Meta priority tweak) displays over the banner image.

Add a color filter

Add a color filter to all banner images or videos with Banner overlay color under Banner section in site styles.

• 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

• Don't use page descriptions for SEO-based content, as this content will display on the page. Visit Increasing your site’s visibility to search engines to learn more about optimizing your site.
• For help with image cropping, visit Troubleshooting cropping issues.
• For general help, visit Adding banner images.

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.

Style the footer content with these Footer tweaks:

• 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 store pages and pages in dropdowns, member sites, and indexes.

• 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 dropdown or member site appears as a link in the sidebar navigation. The sidebar displays on any layout page in the dropdown or member site.
• Pages in an index only display sidebar navigation when visiting the direct URL for the individual page.
• On store pages, the sidebar navigation displays links to different product categories. Clicking a link filters out every product except the ones in that category.

Background

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

• Main content area - Page background under Main content
• Header - Header background color under Site header
• Prefooter - Pre footer background under Prefooter
• Footer - Footer background under Footer

Fonts

Adjust the text style, size, and color with Page text and Heading tweaks under 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 featured images 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.

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

• Use Meta priority to select what 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.

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 of site styles, then add content with blocks.

Slideshow banners

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

• Each slide displays the blog post title, one type of metadata (choose with the Meta priority tweak), and a View post link.
• The featured image displays behind the text. If the post doesn't have a featured 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 store pages, pages in a dropdown, 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 of site styles. 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.

Language options

Bedford supports two language options:

• Choose the language for your site's built-in text, such as submission forms and the order confirmed message.
• Start a new site with a French, German, Italian, Portuguese, or Spanish template.

Troubleshooting Bedford

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.

A layout page in my index is overlapping other content

If a layout page in an index has the URL slug /header, your site will treat the entire page as the index header. This can cause multiple pages to overlap and cause problems with editing the page content.

To fix this, rename the page URL slug to something other than /header, keeping our formatting tips and reserved URL slugs in mind.

A link in a banner isn't turning into a button

Only links in the last line of the description format as buttons. If your link isn't displaying as a button, check the overlay text in the page description or image description. Ensure the link isn't bold and that there are no line breaks after the link.

If the link isn't bold and there are no lines below it, try this troubleshooting method:

1. Open the page description or image description for that banner.
2. Copy all the text in the description field and press Ctrl + X (Command + X on a Mac).
3. Press Ctrl + Shift + V (Command + Shift + V on a Mac) to paste without formatting.
4. Re-add the link in the last line. Ensure there's no text or line breaks beneath it.
5. Save and refresh the page.

Banner description text isn’t showing on smartphone

In mobile view, 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 in.

Banner image isn’t showing

For page banners:

1. Open the Pages panel.
2. Hover over your page and click .
3. Ensure there's a featured image or video URL loaded in the Media tab.
4. If you've added a video URL, scroll down in the Media tab to ensure there's a mobile fallback image. This displays when the banner video can't load.
5. Click Save and refresh the page.

For slideshow banners:

1. Hover over the page preview and click Edit to open the page editor.
2. Ensure the slideshow gallery block is the first block on the page.
3. Hover over the slideshow gallery block and click Edit to open its editor.
4. Ensure the images or videos are loaded in it.
5. Click Save and refresh the page.

For blog slideshow banners, ensure each featured post has a featured image in its settings.

Gallery pages don't support banner images.

Banners appear shorter on another computer

Squarespace's responsive design takes into account both the browser window size and screen resolution. On lower resolution devices (1366 x 768 and below), banners appear shorter to better fit the screen's resolution.

Can't go to a page in an index

In the Pages panel, clicking a page in an index takes you to that page's place on the index page, showing you what the page looks like in context. This helps you organize your Index efficiently.

To see what the page looks outside the index, go to the page's direct URL while logged out or in incognito mode.

Can’t see newsletter block

When you add a newsletter block to a layout page, the default block's background is set to transparent with white text. If the page is also white, the text will be invisible.

In the Newsletter block section of site styles, fix the issue by setting Newsletter style to Light, or change the transparency with the Background color tweak.

Color appears when scrolling to the bottom on a mobile device

When you scroll to the bottom of a website on an iPhone or iPad, Apple's "rubber band" effect shows a blank area below where your site ends.

For the Bedford family, the color of that area is set by the footer color. To change this:

1. Open the Site styles panel.
2. Scroll to the Footer section and change the Footer background tweak.

To ensure that your colors are consistent, we recommend choosing a color that has no transparency, as this area will always be fully opaque. For example, if your footer is set to a mostly transparent red, the footer will look light pink, but the "rubber band" area below it will be bright red.

How do I recreate the "View our work" button?

The "View our work" button in the Hayden demo content is an index page anchor link.

Navigation link isn't displaying as a button

Before troubleshooting, keep in mind:

• Only the last page in main navigation can display as a button.
• Dropdowns won't format as a button.

If your navigation button isn't displaying:

1. Open the Site styles panel.
2. Scroll down to the Site navigation section.
3. Ensure the Enable nav button tweak is checked.
4. Save and refresh the page.

Navigation menu icon is showing on a computer

A ☰ appears when there’s not enough room in the browser window for all navigation links to display. Click the menu icon to display a navigation overlay.

The menu icon and navigation overlay help make your site mobile-friendly, responsive, and easier to navigate. It’s not possible to remove this feature. However, there are some things you can do to reduce the width and display all links:

• Reduce the number of navigation items. One method is using dropdowns to create drop-down menus.
• Reduce the font size and spacing of the navigation using the Nav link font tweak in the Site navigation section of site styles.
• Reduce the site title or logo container width in the Site header section of site styles.

My mobile menu won't open

The mobile menu won't open if you added a video banner to the homepage using an invalid URL or an embed code. To edit the video URL:

1. Open the Pages panel.
2. Hover over the homepage title in the left panel and then click .
3. Click the Media tab, then click the Video tab.
4. Confirm the Video URL field contains a valid URL.

Page banner is too short or is cropping the image

Add extra height to a page banner by pressing the Return or Enter key above or below your page description and adding blank spaces. This can help fix cropping issues and expand the overall size of the banner on the page for a dramatic effect.

To add blank spaces under a button, press Shift + Enter or Shift + Return for every line you want to add.

Stack banners in an Index

To stack banner images with no white space between them, create layout pages that have featured images but no page content. Only the banner images and overlay text will display for each page. In each layout page, ensure that you delete the default text block or you'll see a blank space between each banner.