Customize Your Squarespace 7.1 Site Header with the New Editor
Introducing the New Squarespace Site Header Editor
Editing your site header in Squarespace 7.1 was previously a multi-step process with limited design flexibility. However, Squarespace released an update to their site header editor, and it's a great improvement.
The new editor provides more functionality and flexibility, allowing you to treat header elements separately and adds more design options that previously required code to implement. Although there might be a slight learning curve if you're used to the old way, it's definitely worth exploring.
We’ll start by giving you an overview of what’s new and then move on to a quick guide on how to navigate through the new site header editor.
I’ll walk you through the process below, but if you prefer watching a tutorial, be sure to view the companion video on my YouTube channel.
The Old Way: A Multi-Step Process
In the past, editing your site header on Squarespace could be a bit challenging. The interface didn't offer much design flexibility, and customizing elements required multiple steps and some coding knowledge. But now, things have changed for the better!
The New Site Header: Improved Function & Design
Edit Design: Customizing the Look
You'll notice some changes when you navigate to the menu to edit your site header. The new editor allows you to customize your logo, navigation, button spacing, and link spacing individually. You can use these options to create a header design that aligns perfectly with your brand. Additionally, you now have the ability to add drop shadows and borders to your header without any coding required. This update adds a whole new dimension to your design possibilities.
Height and Layout Options
With the new site header editor, you can also adjust the height of your header. Whether you prefer a slim and sleek design or a more prominent header, the choice is yours. Squarespace gives you the flexibility to experiment and find a look that complements the rest of your website. You can also choose between a full-width layout or an inset style, depending on your preferences.
Add Elements: Tailoring Your Header
In the new editor, you still have the ability to add elements to your header. WIth a simple toggle on/off you can selct what appears in your header, such as buttons, social links, a store cart, or even a login option. This customization allows you to create a header that suits your specific needs and enhances the overall user experience of your website.
Site Title and Logo
Your site's title and logo are essential components of your brand identity. You can add your site title and upload a logo image to give your header that extra touch of personalization. And don't forget, you can even upload a separate logo for the mobile view of your website. No worries about how they’ll look either, because you can adjust the size of your logo on desktop and mobile individually!
Now that you understand the basic features in your site header, let’s go through a guide on how to use the editor to customize your header.
How to Edit Your Site Header:
1. Edit Design:
Once you're in edit mode and click “Edit Site Header”, you'll notice that the site header editing options have been reorganized. You now have the ability to customize various design elements separately.
Start by clicking on the "Edit Design" button. In this interface, you can choose your header layout (logo, navigation and button spacing, link spacing), as well as customize some the design. You can add drop shadows, blur effects and borders, select a color, thickness, and position for your header border. No coding knowledge required! Additionally, you can adjust the height of your header and choose between a full or inset layout. Don't forget to consider how your changes will translate across all pages of your website.
2. Add Elements:
The updated editing interface also allows you to add elements to your site header. Toggle on/off the elements you want to include, such as buttons, social links, a cart for your store, and a login option. If you're using Weglot for a multilingual site, you can easily integrate it into your header as well.
Customizing Individual Elements:
You now have the ability to edit each element individually within the header editing interface. All you need to do is click directly on the element (i.e., the button, the logo/title, etc.) and select the edit pencil to open the edit menu.
1. Navigation Menu:
Edit the content and order of your navigation menu. Simply drag and drop to rearrange the pages listed in your main navigation. You can still reorder these in the main admin panel under “website” as you always have, but this new option allows you to modify your navigation directly within the header edit mode.
2. Button:
Manage the link, content, and design of your header button. Choose from different button styles that suit your website's aesthetic and branding.
3. Social Links:
Edit the design, size, and style of your social icons within the header. You can also manage the content of your social links directly within the header edit mode.
4. Site Title and Logo:
Finally, selecting the site tile/logo, you add a logo image if desired, and specify a separate logo for mobile view. You can also adjust the size of the desktop and mobile logo images here.
Conclusion
Squarespace's new site header editor opens up new possibilities for customization and design. With its enhanced functionality and flexibility, you can create a header that truly reflects your brand's personality, grabs visitors' attention, and guides their experience through your website.
Whether you're a beginner or a seasoned website designer, this new editor will help you achieve a dynamic and visually appealing header without any technical knowledge. So go ahead, dive into the new editor, and make your website's header shine!
You may also find these articles helpful:
