Single-Column Simple/Banner below title

 

Consectetur adipiscing elit. Nam lorem nibh, tincidunt quis dui

 
 

ABOUT THE TEMPLATE

This is a simple single-column layout. The banner sits below the title instead of behind it. The post opens with the title, date, and a short intro line on a plain background, then a full-width banner image below that. Everything after — headings, paragraphs, and images — runs in one uniform column at the same width.

Use this when you want the clean simplicity of the single-column layout but prefer the title to read clearly on a plain background rather than overlaid on a hero image. It's still one of the easiest templates to edit, with no narrow/wide split or table of contents to manage.

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. Since this template is already a single column, it looks essentially the same on mobile as on desktop.

 
 

THE CODE AT THE TOP

The code block at the top handles the centering of the blog title.

<style>

@media screen and (min-width:767px){

.blog-item-top-wrapper{

max-width:60%;

justify-content: center;

align-items: center;

margin: auto;

}

}

.blog-item-top-wrapper *{

text-align: center;

}

.wm-banner-style-1 .has-banner .section-background-content,.blog-item-wrapper .blog-item-meta-wrapper{

justify-content: center;

}

</style>

 
 

ADDING CONTENT

To add a block, hover over the content and click the plus button. Blocks drop in below the previous one and all sit at the same content width, so there's no resizing or alignment to worry about. Just add your headings, text, and images in the order you want them — the layout stays consistent on its own.

 
 
 
Previous
Previous

Single-Column Simple (Easiest)

Next
Next

Heading Split