Editing sidebars

In Squarespace 5, you can add up to two sidebars to your site and populate them with links, information, and content widgets. You can also set sidebar content to only display on certain pages.

When setting up sidebar, there are two main steps:

• Set the style - Determine the number of sidebar columns and their layout. 
• Organize content - Add and organize the links and widgets that display in your sidebars.

Step 1 - Choose a layout style

The number of sidebars that display on your site is determined by your site's style:

1. Open Style mode.
2. Click on the Banner & Navigation tab. If you haven't already, you'll be prompted to create a custom style.
3. Use the Column Layout icons to choose how sidebar columns will appear on your site. 
4. Click Save Changes.

Step 2 - Choose the widths

Click Change Widths to set the width of your content area and sidebars.

Step 3 - Add and organize the content

In the Website Management bar, click Architecture under Structure.

The Architecture area is split into Sidebar 1 and Sidebar 2. Each Sidebar contains sections. 

• The top section containing links in Section 1 will always become the top navigation for your site. These links won't show in a sidebar.
• If your template's style has one column, all other sections in Sidebar 1 will display in that column. Sections in Sidebar 2 won't display on your site.
• If your template's style has two columns, the sections in Sidebar 2 will always show in the right column.

Tip: If your style only has one column, you'll see an alert in Sidebar 2 that says "Sidebar hidden by template." Step 1 explains how to create a style with two columns.

Drag sections within a sidebar to reorder them, or to move them from one sidebar to another. You can also drag pages or widgets within a section to rearrange them.

To add content, add a new section to either sidebar and add either pages or widgets. You can also drag existing pages or widgets into the section. For example:

• Add an HTML widget to add custom code, or use its WYSIWYG editor to add images.
• Add twitter updates with the Twitter Social Widget. 
• Add external links with the Links Widget.
• Create a list of blog categories with the Journal Index Widget.

To learn more, visit Adding and editing content. 

How sidebar content displays

Here's an example of how your Architecture could look: 

And here's how it would display on your site:

 

Hide a section

To hide a section in either Sidebar, click Hide. The content in that section won’t display on your site. However, enabled pages within the section will still be accessible via direct URL.

Hide a section on specific pages

To display a section in either sidebar only on certain pages:

3. In the Website Management bar, click Architecture in the Structure section.
4. In the top of the section, click Modify. 
5. Choose Display Only When Specific Pages Are Active or Display Only When Specific Pages Are NOT Active.
6. Use the filters that appear to choose which pages your section will appear on.

For more help, visit Selectively displaying sidebar sections.

Here's an example of how that might look if you set a widget section to only appear on your homepage:

Example - Add a widget

To add a widget to your sidebar:

1. Enter Structure mode.
2. If you don't see an Add Widget option, scroll to the bottom and click Insert Section.
3. Click Add Widget.
4. Choose, configure, and enable the widget.

For more help, visit Adding a sidebar widget.

Example - Add navigation links

To add navigation links to your sidebar:

1. Enter Structure mode.
2. If you don't see an Add Page option, scroll to the bottom and click Insert Section.
3. Click Add Page.
4. Choose, configure, and enable the page.

Alternatively, you can:

• Drag an exiting page into the section in the site Architecture area.
• Create a sidebar navigation from clickable images.
• Create a Text/HTML widget and add text links.

I'm seeing cut off text or content

There's an advanced style option that forces your sidebars and content area to extend to the same height, no matter how much content they contain. This option can cause positioning issues or cut-off text.

To fix this:

1. Enter Style mode.
2. Click Settings.
3. Uncheck Equal Column Heights.
4. Click Save Changes.