Mastering Hero Sections and Card Layouts in Squarespace with Square Forge
Welcome back!
If you've been following along, we've already created some stunning hero sections using Square Forge, a template-building tool for Squarespace.
Today, we'll continue building new layouts, focusing on card structures, call-to-action buttons, and custom designs. If you're new to this, don't worry—I'll walk you through every step, providing practical tips and shortcuts.
Hero sections are the first thing people see when they land on your website, so they must deliver a clean, sharp message that’s impossible to ignore. Whether you're using Square Forge or looking for layout inspiration, these tutorials will help you design something impactful. Ready? Let’s jump in!
Recap: Hero Sections and Why They Matter
In the last tutorial, we built several hero sections, which I like to think of as your website's billboards. These sections need to be direct, visually appealing, and often include a strong call to action. All the layouts I used came from Square Forge, a rapid template builder that makes creating beautiful sections easier. Even if you're not using Squarespace, Square Forge can serve as a source of design inspiration, helping you organize and structure your website’s layout.
Let’s pick up where we left off and build a card layout from scratch.
Step 1: Building a Card Layout From Scratch
We’re diving into a new layout today. Start by opening the Squarespace editor and selecting Add a Blank Section. To make things cleaner, I like to add a thick white border around the section to define the space better.
Add the Background
Next, head to the Background section and choose an image from the library. Stick to something simple to keep your content the star of the show. You can even apply a light overlay if your text needs to stand out more.
For this example, I’m skipping the overlay to maintain the natural look of the background image.
Step 2: Adding Content Blocks and Adjusting Padding
Now it’s time to add your text and CTA:
Text Block: Add a title, and beneath that, a paragraph or description. In this case, I’m using “Freshly Baked Bread” as the headline. Keep your content simple and to the point.
Padding and Alignment: To give the design more breathing room, adjust the padding around your text. I typically choose Large Padding but feel free to tweak it to fit your needs.
For this layout, I aligned the text to the bottom of the section. It creates a dynamic look, but you can also adjust it to sit in the center if you prefer.
Step 3: Adding Custom Features and Final Touches
Here’s where we add some design flair with a background card. Select the text block, click on Add Background, and apply a background color. For this demo, I’m going with a dark gray, which pairs well with the lighter background. You can also customize the tone to match your branding.
Finally, I added a gold divider line to the top of the card for extra detail. This simple line helps separate the sections and makes the design feel polished.
With just a few more tweaks to the padding and alignment, your layout should be coming together nicely. Don’t forget to check how it looks on mobile! The mobile view in Squarespace gives you control over how elements display, so always adjust as needed.
Step 4: Duplicating and Modifying Your Layout
One of the best parts of working with Square Forge is how easy it is to duplicate and modify existing layouts. For our second hero section, I duplicated the first layout and made a few changes to keep things fresh:
Flip the Image: I flipped the background image horizontally to add variation. This is an excellent way to keep your design dynamic without completely overhauling the layout.
Update Text and Button Placement: Move the CTA button to better suit your design. You might want to try placing it in different spots until you find the perfect balance between text and imagery.
Step 5: Card Layout With Vertical Line Divider
Now, let’s mix it up a bit with a vertical divider between the text and button. This layout includes:
A vertical line separating the text blocks
A call-to-action button beneath the text
To add a divider, use the line block and adjust its width and position using Squarespace's 24-column grid system. This gives you more control over spacing, making it easier to create a sleek, minimal look.
Once the divider is in place, it’s just a matter of fine-tuning the alignment of your text and button.
Step 6: Creating a Polaroid-Style Hero Section
Next up is a Polaroid-style hero section. This layout involves stacking images and overlaying text. Start by adding a background image, then place another image block on top of it to create the layered effect.
For a more polished look, adjust the padding and gutter width between the layers. This makes sure the layout doesn't look too cluttered. Adding a subtle overlay effect to the background image can also help your text stand out more clearly.
Step 7: Underlined Text Effect
For the next design, we’re adding a simple underline effect to the title. Squarespace provides a built-in option for this—just highlight the text and select your preferred style from the underline options.
Final Touches and Mobile Optimization
It’s critical to ensure your designs are mobile-friendly. Each layout we've built works just as well on mobile, but you’ll want to check and adjust padding and alignment. Often, you’ll need to reduce the width of certain elements or shift them around to avoid overcrowding.
Squarespace’s mobile editor lets you control how the text, images, and buttons stack, making sure everything looks perfect regardless of screen size.
Wrap-Up
There you have it—five different hero and card layouts created using Square Forge in Squarespace. Whether you're building a site for a bakery or any other business, these designs will help you make a strong first impression with your visitors. Remember, the beauty of Square Forge is that you can start with these layouts, then tweak and customize them to suit your brand.
If you’re looking for more inspiration, head over to Square Forge—you’ll find plenty of layouts to explore and build upon. And stay tuned for more tutorials, where we’ll continue exploring new layouts and tricks to master Squarespace design.
Catch you in the next one!
Cheers,
Elwyn
