Website Designer Tips: Squarespace Templates With Side Navigation

Using Squarespace Templates With Side Navigation

Squarespace templates are flexible, beautiful and functional. They offer you the ability to create a customized website that can enhance your brand image and engage with your visitors. While templates are a great starting point for your design, most allow you to customize your design to better reflect your brand, and make your website unique.

Some Squarespace templates display sidebars as a coded element of their layout. Let's explore how you can customize sidebar navigation to provide your visitors with the ability to get to the content they are looking for fast.

Before You Begin Building Your Website

Squarespace templates come in two basic types. They are:

Content Sidebars - These have editable blocks to make adding text, links, images, and more fast and easy. Depending on the template you choose, sidebars may only appear on certain “collection” pages like galleries or Blog Pages. In some templates, they appear site-wide.

Navigation Sidebars - This is the area we're going to explore. Some templates will display navigation links in a sidebar on all the pages instead of across the top of the site.

It's important to understand that sidebar content is not transferable between templates. If you've designed a website, and decide that you want to switch templates, you'll need to reconstruct your sidebar content.

Mobile devices represent over half the traffic that will come to your website. Squarespace templates are optimized for mobile. All Squarespace templates incorporate responsive design elements to improve mobile viewing. Content sidebars display at the bottom of the page on mobile devices. In the Ishimoto template, sidebars do not display on any mobile device so if mobile is important for your business, and you're using the navigation sidebar, this template might not be the best choice

Customizing Squarespace Templates Navigation Sidebar

Your site navigation is a set of links that take visitors to other pages of content on your website. Most templates typically display navigation at the top of your site, but some templates support navigation in a footer or sidebar.

On templates that support sidebar navigation, it is customizable using Site Style options. You can change the font, color, and size of your navigation links, and many Squarespace templates support additional options.

Every Squarespace template family has its own Site Styles. This means that each is a little different and offers different options. There is no single rule, but here are some tips to find the style options your template offers.

To open Site Styles click Design the Site Styles from the Home Menu
Scroll through the tweaks and look for the word Navigation
You can also hover over your site's navigation links in the site preview on the right. When a blue box appears, click any navigation link. This can help filter out any tweaks that don't affect the navigation links

Changing The Font and Size - To change the font of navigation menus, click the v icon next to the tweak names to open a drop-down menu. From here you can change font names, style, size, line height and the spacing between letters.

Changing Colors - Changing link colors is easy. Click a color tweak, choose a new color by clicking a color at the top of the selector, then select a shade. You can also enter specific color values if you have a brand color.

Changing Link Position - Some templates allow you to move the position of links. In Site Styles, look for tweaks called either Navigation Position, or Navigation Alignment. Using this tweak you can move links within the sidebar, for example from the center to the left.

Changing Spacing Around Links - To tweak space around your navigation links, look for tweaks in the Site Styles that adjust header, banner or navigation. Tweaks will vary between templates but generally allow you to adjust padding, spacing, and width.

Active and Hover Changes - Some templates offer additional options like active or hover changes. You can change how they respond when they're clicked (their state). Tweaks do vary by template,but look in Site Styles for tweaks named Hover (link changes when a visitor hovers over it) or Active (when a visitors checks out a page in your navigation its link style changes.)

Mobile Navigation - All Squarespace templates use responsive design elements to make your site look great when viewed on a mobile device. In most templates, navigation collapse behind a menu icon. In most cases, mobile navigation will retain the characteristics of your desktop website to keep your branding consistent. Some templates offer advanced mobile style options. This can give you a degree of extra control over your mobile site. To see the options offered for mobile check your templates Structure and Style Guide.

To check mobile tweaks, open your navigation in smartphone view before opening Site Styles. This allows you to see changes in real time, as you make them.

Squarespace Templates That Support Sidebar Navigation

Aviator Family - Blog Pages
Bedford Family - Blog Pages
Five - All Pages
Forte - Blog Pages
Galapagos - Blog Pages

Ishimoto - Blog Pages
Montauk - Blog Pages
Skye Family - Blog Posts
Wells - All Pages
Wexley - Blog Pages

Squarespace templates are beautiful, functional, and engaging right out of the box. They offer you a number of ways to customize your site to make it unique and support your brand. Define your needs before you choose a template and then dig into the customization options available. With Squarespace, you can create the perfect website to showcase your brand.