Heading Split
ABOUT THE TEMPLATE
This template places each section's heading and body text side by side. The H2 heading anchors the left column in a large size while the paragraphs run in a column on the right, giving posts a strong editorial, magazine-like structure. It opens with a full-bleed hero image and the title overlaid on top, and images break out to full width between sections.
It's a great look, but it's the most finicky template to build correctly — mainly because of how it needs to behave on mobile. Study the existing layout before you start, since matching the block pattern is what keeps it working.
Note on mobile: there's no separate mobile layout. On smaller screens the two columns collapse into a single stacked column following the top-to-bottom order of your desktop blocks. The trick below is what makes that stack land in the right order — heading first, then its paragraph — instead of getting jumbled.
THE CODE AT THE TOP
The code block at the top sets up the hero banner (which pulls from the thumbnail in the post's page settings). One caveat, same as the other templates: you can't control the banner image's focal point.
<div data-wm-plugin="blog-post"></div>
<style>
.wm-blog-banner {
min-height: 50vh !important;
}
.wm-banner-style-1 .has-banner .section-background-content{
justify-content: start;
}
@media screen and (min-width:767px){
.blog-item-top-wrapper.clone{
width:50%;
}
}
</style>
ADDING CONTENT
The key to this template is how you group each heading-and-paragraph pair. To make a section stack correctly on mobile, split the heading and the paragraph so they sit between two full-width blocks — a full-width spacer block works well as the divider. Those full-width blocks act as anchors: they force Squarespace to treat the heading and its paragraph as one unit, so on mobile the heading drops directly above its own paragraph instead of the columns collapsing out of order.
So the pattern for each section is: a full-width block, then the heading and paragraph (side by side on desktop), then another full-width block before the next section. As long as you keep each heading/text pair fenced between full-width blocks this way, it renders correctly on both desktop and mobile. Skipping the anchors is what causes the mobile order to break.
To add blocks, hover and click the plus button as usual — just keep this fencing pattern in mind rather than adding heading/text pairs loosely. Drag the heading and paragraph side by side, align them, and resize the two columns to even halves. Watch for the blue anchor guide lines as you drag: they tell you whether you're about to place a block directly next to the other block or next to the entire column, so use them to confirm the block lands inside the pair rather than spanning the full width.
