How to Update the Hero on Squarespace Website

Squarespace makes it easy to create beautiful websites, but when it comes to how to update the hero on your Squarespace website, many users hit a roadblock. Questions like, “How do I change this image?” or “Why doesn’t my text pop against the background?” can make what should be a straightforward task feel frustrating. Your hero section is too important to settle for “good enough.” It tells your story and guides visitors to take action in a second.

The hero section of your website is your virtual handshake—the first thing visitors see and the one element that sets the tone for their entire experience. If you’ve ever looked at your Squarespace site and felt like your hero section wasn’t quite hitting the mark, this is for you. Maybe the design feels outdated, the messaging doesn’t reflect your brand’s growth, or it just doesn’t inspire the action you’re hoping for.

In this guide, I’ll show you exactly how to update the hero on your Squarespace website to make it shine. From choosing the perfect visuals to fine-tuning your text and layout, let’s get started!

Table of Contents

Considerations before you Update Your squarespace website Hero Section

Before diving into how to update the hero on your Squarespace website, it’s important to take a moment to plan. Preparation not only makes the process smoother but also ensures your updated hero section achieves the results you’re looking for. Here’s what to do before making any changes:

1. What do you want to Achieve from the change

Ask yourself: Why am I updating my hero section? The answer will guide your decisions.

Are you launching a new product or service?
Is your goal to increase sign-ups, sales, or inquiries?
Do you want your site to better reflect your brand’s personality or message

2. Gather Your Resources

High-Quality Visuals: Collect images or videos that are eye-catching, on-brand, and relevant to your message. If you don’t have these on hand, consider using professional stock media or hiring a photographer.
A Compelling Copy: Draft headlines, subheadlines, and call-to-action (CTA) text. Keep it clear, concise, and tailored to your goal.
Brand Elements: Ensure you have your brand’s colors, fonts, and logos available to maintain a consistent look.

3. Back Up Your Current Design

Before making changes, back up your current hero section settings. While Squarespace doesn’t have a traditional “backup” feature, you can take screenshots of your current layout and save any images or text you want to reuse. This gives you a safety net in case you want to revert to the original design.

4. Plan for Mobile and Desktop Views

Keep in mind that your hero section will look different on mobile devices compared to desktops. Squarespace provides tools to preview both layouts, so be ready to adjust for optimal performance across all screens.

Step-by-Step Guide to Updating the Hero on Squarespace

Ready to give your website’s hero section a fresh new look? Here’s a simple, step-by-step guide on how to update the hero on your Squarespace website. Swapping out visuals, tweaking text, or refreshing the layout? The following steps below will guide you achieve a polished and professional result;

1: Log into Your Squarespace Account

Go to Squarespace.com and log in with your account credentials.
Select the website you want to edit from your dashboard.

2: Open the Page Editor

Click on the Pages tab in the left-hand menu.
Choose the page where the hero section appears (usually the homepage).
Once the page loads, click Edit to enter the Squarespace editor.

3: Update the Background

Hover over the hero section and click the background edit option (usually marked by an image or video thumbnail).
For Images: Upload a new image by clicking Replace Image. Use high-resolution photos that align with your brand. Adjust the focal point to center the most important part of the image.
For Videos: Upload or embed a video by adding a YouTube, Vimeo, or Squarespace-hosted video link. Enable autoplay and loop options if applicable, and consider overlaying a subtle color for text readability.
For Colors: Choose a solid background color from your brand palette if simplicity is your goal.

4: Edit the Text Content

Click on the text boxes in your hero section to update your headline, subheadline, and call-to-action (CTA).
Use Squarespace’s text editor to Select adjust and tweak fonts.
Keep your messaging clear and action-oriented. For example, instead of “Learn More,” use something like “Start Your Journey.”

5: Customize Buttons and Links

Click on any buttons in the hero section to edit the text and destination URL.
Update the button style – color, size, or shape to align with your brand’s design and make it stand out against the background.
Test the link to make sure it leads to the correct page or resource.

6: Adjust Layout and Spacing

Use Squarespace’s drag-and-drop functionality to reposition elements within the hero section.
Center-align for a bold statement.
Left-align for a more traditional, text-heavy look.
Adjust padding and spacing to ensure a balanced and uncluttered design.

7: Preview Your Changes

Click the Preview button to see how your updated hero section looks on both desktop and mobile.
Use the mobile view to ensure the layout is responsive and user-friendly.

8: Save and Publish

Once you’re happy with the changes, click Save or Publish in the editor.
Refresh your website to confirm that the updated hero section appears as intended.

This video guide below will help you more.

FAQs: Updating the Hero on Your Squarespace Website

1. How do I find the hero section on my Squarespace website?

The hero section is usually located at the top of your homepage or key landing pages. To edit it, go to the Pages tab in your Squarespace dashboard, select the relevant page, and click Edit.

2. Can I use a video as the hero background in Squarespace?

Yes, Squarespace allows you to use videos in your hero section. You can upload a video file or link to one hosted on platforms like YouTube or Vimeo. Make sure the video is optimized for web use and consider using an overlay for better text visibility.

3. What size should my hero background image be?

Squarespace recommends using high-resolution images with a minimum width of 1500 pixels to ensure clarity on larger screens. However, to avoid slow loading times, aim for optimized file sizes (ideally under 500 KB).

4. How do I make sure my hero section looks good on mobile?

Use Squarespace’s mobile preview feature in the editor to check the responsiveness of your hero section. Adjust text size, layout, and spacing to ensure everything is legible and visually appealing on smaller screens.

5. Can I add multiple elements to my hero section?

Yes, you can add various elements like text, buttons, and images to the hero section. However, keep the design simple and focused to avoid overwhelming your visitors.

6. Why does my hero section look different on mobile than on desktop?

Squarespace templates use responsive design, meaning layouts adjust automatically based on screen size. To ensure your hero section looks great on all devices, preview your changes in both desktop and mobile views and make adjustments as needed.

7. Can I revert to a previous version of my hero section?

Squarespace doesn’t have a built-in version history feature, so it’s a good idea to save backups of your text and images before making changes. You can manually revert by replacing the updated elements with the previous ones.

8. What if my background image or video isn’t displaying properly?

Common issues include incorrect file formats, oversized files, or settings conflicts. Ensure your image is a JPG or PNG and your video is in a supported format like MP4. If problems persist, check Squarespace’s help center for troubleshooting tips.

9. Is there a way to test different hero section designs on Squarespace?

While Squarespace doesn’t offer built-in A/B testing, you can create duplicate pages with different hero designs and track performance using tools like Google Analytics or Squarespace’s analytics feature.