Flexible Narrow Text / Full-Width Media
A Subheadline here Optional
Content
Add manual contents here
These do not automatically populate or anchor link
Primary purpose is to display a short overview
Sed interdum arcu euismod
ABOUT THE TEMPLATE
Use this template when you want the narrow-text / full-width-media look but need the freedom to adjust widths block by block. It opens with a full-bleed hero image and the title overlaid on top. Below that, text generally sits in a narrow, offset column (with room in the left margin for things like social links) while images run full width with captions.
The difference from the fixed version is that here the widths aren't locked. The narrow text and wide media are the starting point, but you can resize individual blocks to break out of it whenever a section needs something different. Choose this template when you want that contrast most of the time but still want per-block control. The trade-off is that keeping widths consistent is up to you, so it depends on Squarespace's dragging behaving predictably as you edit
THE CODE AT THE TOP
The code block at the topb sets up the hero banner (which pulls from the thumbnail in the post's page settings). Unlike the fixed template, it leaves block widths open for you to adjust rather than locking them in place. 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: 60vh !important;
}
.wm-banner-style-1 .has-banner .section-background-content,.blog-item-wrapper .blog-item-meta-wrapper{
justify-content: center;
}
#page .has-banner .blog-item-top-wrapper.clone .blog-item-title h1.entry-title, #page .has-banner .blog-item-top-wrapper.clone .blog-meta-item, #page .has-banner .blog-item-top-wrapper.clone .blog-meta-item a, #page .has-banner .blog-item-top-wrapper.clone .blog-meta-item span{
text-align: center;
}
@media screen and (min-width:767px){
.blog-item-top-wrapper.clone{
width:66.6667%;
}
}
</style>
Sed interdum arcu euismod
Sed interdum arcu euismod
Sed interdum arcu euismod
ADDING CONTENT
To add a block, hover over the content and click the plus button. New blocks drop in below the previous one, and from there you can drag to resize them — pulling text into the narrow column or stretching media out to full width as needed. Because widths aren't fixed, you have more control than the fixed template, but that also means alignment is manual: you may need to nudge blocks to keep them consistent, and the editor's dragging can be finicky when placing blocks side by side.
Note on mobile: there's no separate mobile layout. On smaller screens everything collapses into a single column, following the top-to-bottom order of your desktop blocks. Keep that order in mind as you build, since it's what mobile visitors will see.
