Cover pages present information in a single, bold splash page. Cover pages are great for showing an “Under Construction” page, announcing a product release, or collecting email addresses from visitors.

Cover pages are available on any Website and Commerce billing plan in version 7.0. If you’re currently on the standalone Cover Page plan, your page will stay live for as long as your billing is active. It's no longer possible to return to the Cover Page plan after switching to a full site.

Cover pages aren't available in version 7.1. To create a similar look, you can hide the header and footer on certain pages. You can't add or edit cover pages in the Squarespace App.

Watch a video

Add a cover page

Follow these steps to add a cover page and customize its content:

1. Open the Pages panel, click +, then select Cover page. For more help, visit Adding pages to your navigation.
2. Choose a layout.
3. Add branding, text, and media.
4. Add actions like buttons, links, or forms.
5. Style the page.

Keep in mind:

• To set the cover page as the first page visitors see when they visit your site, set it as your homepage.
• To remove the cover page from navigation menus, move it to the not linked section in the Pages panel. This is useful if you only want visitors to see it once before entering your site or if you're using it as a separate landing page.
• If you’re using the Cover Page-only plan, you don't have a Pages panel and it's not possible to add more pages. Your home menu displays the panels for editing your standalone cover page.

Cover page layouts

Each cover page layout acts like a one-page template, with its own distinct features and style settings. Cover pages don’t use blocks, and design elements like text and buttons display in a fixed position. This helps keep your cover page beautiful and responsive.

Note: Cover pages don't support HTML and Markdown formatting.

To change your layout:

1. In the cover page menu, click Change layout.
2. Use the drop-down menu to sort layouts by category, or choose All layouts to view all.
3. Hover over a layout and click Select to set it as your new layout.
4. Click Save at the top of the page to apply the change.

While you can adapt cover page layouts for any purpose, we've designed them with general themes in mind. Learn more about each layout category below.

Add branding and text

Use the Branding & text panel to add:

• A logo or branding text
• A page headline
• Body text

These settings work with your layout's style to help you present a minimal amount of information with maximum impact.

Keep in mind:

• Branding and text display varies by layout
• It's not possible to display a logo and branding text at the same time.
• Ensure your logo follows our best practices, or create a new logo with Squarespace Logo.
• Unlike on other pages, site titles and logos on cover pages don't link to the site's homepage.
• Your branding text can be different from your SEO title, which serves as the page name in browser tabs and search engine results.

Add media

Use the Media panel to:

• Upload background images
• Add stock images
• Reuse previously uploaded images
• Add a looping background video
• Set a background color

Keep in mind:

• Properly format your images before uploading.
• You can use the built-in Image editor to edit the original images.
• You can upload multiple images to create a slideshow or grid background.
• Uploading a large number of high-resolution images can affect your cover page's load time.
• Most layouts support background videos, which loop silently, by linking to a YouTube or Vimeo URL.
• It isn’t possible to add navigation controls or control the transition speed in a cover page slideshow.
• Due to responsive design, images and videos will always crop to some degree, especially on mobile. The amount of cropping depends on the height of the image, the width of the browser, and the layout you've chosen.

Set a background color

To display a plain background color instead of an image or video, choose None. The image will disappear from the preview. Change the background color in the Style panel.

Add actions

Use the Action panel to add buttons, navigation links, and a form or newsletter signup option. If you don't want any actions on your cover page, leave the fields blank.

Keep in mind:

• You can add buttons or navigation links, but not both.
• You can add up to two buttons or five navigation links.
• You can add one form or newsletter signup.

To add an action:

1. Click Action in the cover page menu.
2. Under Select action type, choose an action.

Add buttons or navigation links

Buttons and navigation links direct visitors to a different page of your Squarespace site, a different website, or a downloadable file. To add buttons or navigation links:

1. Choose Buttons or Navigation from the Select action type menu.
2. Add a label in the first field. We recommend keeping link label text short for better formatting and readability.
3. Click into the URL field to enter a web address, or click to open the link editor. You can link to external sites, downloadable files, email addresses, phone numbers, or your site's own content. To learn more, visit Adding links to your site.
4. Click Save at the top of the panel to publish all changes.

Add a form or newsletter signup

Visitors can click a button and complete the form or newsletter signup that opens in an overlay. To add a form or newsletter signup:

1. Choose Form or Newsletter from the Select action type menu.
2. Add a button label in the Button label field.
3. Click Edit form or Edit newsletter signup to build the content.
4. For forms, you can add a name for your form in the Form name field. The name appears to your visitors when the form opens in a lightbox. It's not possible to name newsletter signups or to delete the default "Newsletter Form" title that appears in the lightbox for them.
5. For forms, you can delete placeholder fields by clicking the trash can icons and click + at the bottom to add new fields. If you want to require visitors to fill out a field to submit the form, check Required. Newsletter signups only have an Email address field.
6. Click the Storage tab to tell us where to send submissions. If you use an Email Campaigns mailing list as your storage option, subscribers will receive a confirmation email when they sign up. It's not possible to disable this.
7. In the Advanced tab, customize the submit button label, set up a post-submit redirect, or edit the message that appears to visitors after submitting the form. Use regular text or HTML.
8. Click Save in the editor, then click Save at the top of the panel to publish all changes.

Tip: After connecting your form or newsletter signup to storage, we recommend visiting the live version of your page and submitting a test form to see how it works.

Add a form background color

On most layouts, you can use the Custom overlay color tweak in the Style panel to add color to your form or newsletter signup background. To hide this overlay from the rest of your page, use the opacity slider to make it transparent. Your visitors will see the overlay after clicking the form or newsletter signup button.

Keep in mind:

• The Harbor layout doesn't include a Custom overlay color or Color behind text setting. Harbor form or newsletter signup backgrounds will always be light gray.
• In some layouts, the Custom overlay color option only appears after you add images to the Media panel.

On these layouts, the form or newsletter signup background matches the Color behind text setting:

• Backstory
• Card
• Flagship
• Flash
• Focus
• Monocle
• Session
• Spotlight
• Vignette

Hide the form

To hide the form or newsletter signup, remove all Button label text and leave the field blank. Form fields remain intact if you re-enable it later.

Add social icons

To display social icons, click Social links in the cover page menu and check Display social icons. The social icons reflect the accounts you’ve added in the Social links panel. Icon placement varies by layout, but they usually display near the bottom.

Style the cover page

Use the Style panel in your cover page menu to customize the design. Each cover page has unique style options independent of your site template and of other cover pages.

Keep in mind:

• If you change your layout, all font, color, and size settings reset to the layout’s defaults. If you switch back to a previously used layout, the style tweaks also reset.
• Since cover pages are built with responsive design, they’ll look a little different on a mobile device. You can preview how your page will appear on mobile using device view.

Change style tweaks

In the cover page menu, click Style. Use the style tweaks to customize your cover page. As you make changes, the page preview updates. We recommend experimenting to find a design you like.

Here's a list of common cover page tweaks:

• Positioning - Position the content on the page. Depending on your layout, the options are left, center, right, or Top, middle, bottom.
• Branding - Set the font and color.
• Headline - Set the font and color.
• Body - Set the font and color.
• Background - Set the background color (visible if not using an image or video) and the page border options.
• Imagery (not available in Location layouts) - Set Style as Full or Grid, and customize Grid appearance with styles tweaks like Grid gallery density and Grid gallery ratio. Check Auto overlay color and Auto loading color, or uncheck and set colors for each. See more about loading color below.
• Buttons - Set the font, style, and color of any buttons.
• Social icons - Set the style and color of social icons.
• Audio controls (Audio layouts only) - Set the style of the player and the font and color of the tracks.
• Video controls (Video layouts only) - Set the style and color of the player.
• Map (Location layouts only) - Set the map style.

Background imagery

Most layouts include full and grid imagery options:

• Select full to fill the entire background of your cover page with a single image. If you upload multiple images, they will display one image at time as a slideshow.
• Select grid to create a background grid of repeating images. If you have one image, the grid will repeat that image to fill the space.
  
  • The grid option isn’t available on the Focus, Flagship, Harbor, or Monocle layouts.
  • On the Montage layout, the content bar may cover some of your images.
• Use the tweaks that appear below to set the aspect ratio, image orientation, and more.

Loading color

Most cover page layouts offer a loading color option so you can display a separate background color while your regular background color or image loads. You may also see this color when transitioning through images in a slideshow.

Note: The Flagship, Focus, Harbor, and Monocle layouts don’t offer a loading color.

By default, your layout uses the Auto loading color. This means the color is based on the background color for your image or video. If you have multiple background images, the loading color is based on the first image in the Media panel.

To choose your own color, uncheck Auto loading color and set a new one by clicking Custom loading color.

To disable the loading color, click Custom loading color and check the Transparent option.

Overlay color

All layouts except Harbor offer an overlay color option, which adds a tint to your background image or color. By default, your layout uses the Auto overlay color. The automatic color is usually a shade of gray complementing your demo image.

To use a custom overlay color, uncheck Auto overlay color, click Custom overlay color, and choose a new color.

To use the Custom overlay color as a form background color, but hide it from the rest of the page, use the opacity slider to make the color transparent.

FAQ

Why can’t I increase my text size past a certain point?

The text, logos, and buttons on a cover page can only be enlarged to the maximum width that each layout supports. These limits prevent content from overlapping and ensure a responsive design.

More specifically, Body text displays the set font size when the browser width is greater than 1800 pixels. For browsers 1800 pixels wide and smaller, the body font hits a maximum size depending on the width:

• 1800 pixels wide: 27px
• 1600 pixels wide: 22px
• 1020 pixels wide: 18px
• 760 pixels wide: 17px
• 600 pixels wide: 16px

For example, if you set the body font size to 30px, it will only display at 30 pixels when a visitor’s browser window is at least 1801 pixels wide. Otherwise, it will readjust based on the list above. Similarly, if you set the body font size to 13px, it will always display at 13 pixels since that size is lower than any of the limits.

Branding and Headline text works differently. The font size functions more as a target, and the text scales based on the browser's height and width. This scaling varies between layouts.

Can I add custom code to a cover page?

Cover pages have very intentional designs and aren't built for adding custom CSS. To adjust the style of your cover page (like fonts and colors), use the Style panel.

If you still need to add HTML or scripts, use the cover page's settings to add per-page Code Injection. For more help, visit Adding custom code to your site.

The play button changes position on the Projector layout.

The play button’s placement in the Projector layout depends on the amount of text in the Body field:

• With a small amount of text, the play button remains centered.
• When the text exceeds a certain width, the play button shifts to the top-left corner.
• The position varies by browser size.