Building Hero Sections in Square Forge: A Step-by-Step Tutorial

12 Oct

Welcome to the first in a series of tutorials where we'll break down each Square Forge design and show you exactly how to create them yourself using Squarespace.

Over the years, I've put together over 300 layouts, many using the fluid engine. Today, we’ll kick off by creating different hero sections—those vital first-impression sections that grab your visitors’ attention within seconds.

What You’ll Learn:

How to create custom hero sections in Squarespace using Square Forge designs
Tips for adjusting layouts for desktop and mobile views
Basic custom code for advanced design elements (optional)

Let’s jump in!

Step 1: Creating the Hero Section From Scratch

We’re starting with a blank section on a demo site. In this case, I’m using a fictional bakery to demonstrate the process, but you can adapt it to any site.

First, go to your Squarespace editor and add a blank section.
Now, we need to add a background image. Choose something relevant to your content—I'm selecting a bakery-related image to fit the theme. You can adjust the image to focus on the key areas by cropping it and moving the focal point, which is particularly useful if you want the text to stand out more on one side.

Tip: When working with background images, it's important to consider how they affect readability. In this case, I applied a dark overlay to ensure the text will pop.

Step 2: Adding Text and Call-to-Action (CTA)

Next, we'll add a title and a CTA button. This is where your main message goes—make it clear and concise. For example, “Freshly Baked Bread” works perfectly for our bakery demo.

Add a heading and subtext, then align them to the left or center.
Place your call-to-action button below the text. For this design, I prefer a simple button, but you can choose different button styles depending on your brand.

If you'd like to add some flair, like a vertical dotted line or unique text style, this can be achieved through a bit of custom code, which I’ll cover briefly.

Step 3: Adding Custom Code (Optional)

Sometimes, you’ll want a more distinct visual element—like a vertical line—that isn’t natively supported in Squarespace. Here’s where custom CSS comes in.

Open the Custom CSS panel (hit / and search for CSS).
Apply a simple CSS rule to create a dotted or solid line beside your text.

For example: border-right: 2px dotted #FFFFFF;

This adds a dotted line next to the text, but feel free to experiment with colors and thickness to suit your layout. If you're unsure about color codes, you can use tools like ColorZilla to pick colors directly from your site.

Step 4: Adjusting for Mobile View

After setting up your desktop layout, it’s essential to tweak it for mobile. Squarespace allows for different configurations on mobile and desktop, so don’t skip this step!

Switch to mobile view in the editor.
Adjust the placement of your images, text, and buttons to ensure everything looks clean and readable. Sometimes, you’ll want to stack elements differently on mobile to prevent overcrowding.

For example, if your button feels cramped on mobile, consider moving it to a different section or adjusting the padding.

Step 5: Replicating and Speeding Up the Process

Once your first hero section is done, you can easily replicate it and make minor changes to speed up your workflow. Simply duplicate the section, swap out the background image, and update the text and CTA as needed.

This method allows you to create multiple unique sections in no time, without having to start from scratch each time.

Step 6: Advanced Layout Tweaks

For more complex layouts, such as overlaying images or creating a Polaroid-style effect, you may need to adjust the spacing between elements and play around with alignment options. Here’s a quick example:

Duplicate an image block and adjust the width to create a layered effect.
Use a background shape behind the text to add contrast and focus.

You can also use Squarespace’s grid system to align images and text precisely, ensuring everything looks neat and professional.

Wrap-Up

In this tutorial, we created several hero sections using Square Forge designs and learned how to tweak them for mobile and desktop views. The goal is to get comfortable with the process and find a flow that works for you. Each new section builds on the last, allowing you to reuse elements and layouts efficiently.

Remember, Squarespace's beauty lies in its flexibility—you can adapt these designs to suit your brand without needing to purchase any additional tools. However, Square Forge has over 300 options to explore if you want ready-made templates.

Stay tuned for the next tutorial, where we’ll explore more complex layouts and learn how to speed up the design process even further!