Navigating the New Site Header Editor in Squarespace 7.1
If you’ve been using Squarespace 7.1 recently, you may have noticed a change to the Site Header editing experience. Squarespace recently moved some things around, so I wanted to make sure you’re up to speed on the latest changes so you can continue editing your website with ease.
First things first, if you're using an older version of Squarespace or a different website builder, this guide won’t be relevant for you. But if your website is on Squarespace 7.1 or you’re planning to use one of our Squarespace 7.1 templates, this is for you!
Changes in a Nutshell:
Squarespace has given the site header editor a facelift, making it even more user-friendly. The good news is that all your favorite features are still around, but they've done a little shuffle. Let's explore these changes together and uncover a few enhancements along the way.
The Scoop on Editing:
When you're in your page editor, hover over your site header, and you'll spot the shiny new "edit site header" button. Click it, and you'll be presented with two options: "add elements" and "edit design." They've neatly separated the goodies for you:
Add Elements:
Toggle on or off elements like buttons, social links, cart icons, and more.
Customize Element Settings
Hover over your header elements to open the element settings. For instance: configure your header button to lead visitors to an email address, websites, downloads, or even dialing your number.
Edit Design:
Under “Edit Design”, we see two panels: Design and Color. In the Design panel, we can adjust the header layout, spacing, effects, and size adjustments. In the Color panel, we can choose whether we want the header to be a solid color, a gradient color, or an “adaptive” color (which means it adapts to the color settings of the page).
Mobile Header Tweaks:
Don’t forget about your mobile settings! In mobile view, click "edit site header" and tweak individual elements on your mobile site. The best part? Most of the changes you make here will seamlessly reflect on desktop view, saving you precious time.
Add a Mobile Logo:
Want a different logo to show up on mobile? Click the “edit” icon next to your site logo or title, scroll down to “mobile logo image” and upload your logo. This is a great option for folks who want to add a more simplified logo to their mobile site, like a badge or submark.
Customize your Mobile Menu:
Ever wondered about mobile menu customization? Click the "view menu" button to tweak your mobile menu layout and colors. Rearrange navigation items, adjust alignments, and choose a color theme—all in one handy spot.
A Few Notes:
Font tweaks still happen in the site styles panel. To adjust your navigation font and header button font, navigate to Site Styles > Fonts > Assign Styles > “Site Navigation” or “Header Button” (depending on which item you’d like to tweak).
Creating drop-down menus? Pop over to the pages panel and click the “+” icon. Then select “Dropdown”, title your dropdown, and add pages or links to the folder.
In a Nutshell:
I hope this video adds a dash of clarity to your Squarespace journey. If you have questions or need a helping hand with any Squarespace features, remember that we're just an email away at support@holdspacecreative.com.
Here's to crafting stunning websites with ease! 🚀✨
