Changing your site layout

In addition to the main content area, your Squarespace 5 site can have up to two sidebars, a header area, and a top navigation. Enter Style mode to change your site's layout.

Tip: Layout changes are site-wide, meaning they appear on every page of your site. You can use style overrides to create page-specific layouts.

Watch a video

Edit the layout

To change the layout of your site:

  1. Enter Style mode.
  2. Click Banner & Navigation. (If you haven't already, you'll be prompted to create a custom style.)
  3. Use the Column Layout options to choose how many sidebars display on your site, and where.
  4. Use the Horizontal Navigation options to choose what displays in your header, and where.
  5. Click Save Changes.

adjust-layout.png

Sidebar options

Use the Column Layout icons to choose whether your site has:

  • No sidebars
  • One sidebar - Left or right
  • Two sidebars - Left, right, or split.  

If you change the sidebar layout, click Save Changes before making any other changes.

Choose what content appears in your sidebars in your site's Architecture area. Sidebars must have at least one section enabled to appear on your live site. For more help, visit Editing sidebars.

two-sidebars.png

Header and navigation options

Use the Horizontal Navigation icons to choose whether your site has a top navigation, and whether it displays above or below the header.

If you change the header and navigation layout, click Save Changes before making any other changes.

You can also:

For more help, visit Building a site header.

nav-on-top.png

Change the widths

Your total site width (content area plus sidebars) displays under the Banner Image (URL) field. Click Change Widths to set the width of the sidebars or content area.

site-width.png

Use the slider or type a number into the field to change these widths:

  • Content Padding (External) - The space outside the content area and sidebars.
  • Content Padding (Internal) - The space between the content area and sidebars.
  • Content Width
  • Sidebar 1 Width
  • Sidebar 2 Width 

If you change the width of any area, click Save Changes before making any other changes.

To return to the layout options, click Return to Banner & Navigation.

widths.png

Banner images

To add a banner image to your header, add the image to the Banner Image section. You can also use a style override to create a page-specific banner. 

To learn more, visit Adding a banner image.

Was this article helpful?
0 out of 2 found this helpful