Personal blog homepage: WordPress Page Layout

Scroll within the preview to see every section. The copied blocks, shown with a neutral baseline. Your theme controls fonts and widths.

Make it yours.

A writer’s homepage that gives readers a clear first story and subject path.

Free to use · Core blocks only · CC0 licence

Raw block markup

Select and copy the markup

<!-- wp:group {"style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}},"color":{"background":"#f3eee4","text":"#203e35"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-text-color has-background" style="color:#203e35;background-color:#f3eee4;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"}}} -->
<p class="has-custom-font-size" style="font-size:12px">FORM & FIELD</p>
<!-- /wp:paragraph --><!-- wp:heading {"level":1,"style":{"typography":{"fontSize":"48px"}}} -->
<h1 class="wp-block-heading has-custom-font-size" style="font-size:48px">Notes from a thoughtful everyday.</h1>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>A sample independent publication about spaces, materials and the routines between them.</p>
<!-- /wp:paragraph --><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#203e35","text":"#ffffff"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="https://example.com/contact" style="color:#ffffff;background-color:#203e35">Get in touch</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --><!-- wp:group {"style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}},"color":{"background":"#f3eee4","text":"#203e35"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-text-color has-background" style="color:#203e35;background-color:#f3eee4;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"}}} -->
<p class="has-custom-font-size" style="font-size:12px">THE FIELD NOTES</p>
<!-- /wp:paragraph --><!-- wp:heading {"style":{"typography":{"fontSize":"38px"}}} -->
<h2 class="wp-block-heading has-custom-font-size" style="font-size:38px">Ideas worth making room for.</h2>
<!-- /wp:heading --><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://roarwp.com/images/patterns/studio-arch.webp" alt="Terracotta arch, cream stairs and an olive tree in a fictional architectural scene"/></figure>
<!-- /wp:image --><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">The shape of a slower morning</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Example story · 5 minute read</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><a href="https://example.com/story-one">Read the morning story</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Begin with less</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Example story about choosing the useful things.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><a href="https://example.com/story-two">Read about choosing less</a></p>
<!-- /wp:paragraph --><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">A room of your own</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Example story about a quiet place to work.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><a href="https://example.com/story-three">Read about workspaces</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --><!-- wp:group {"style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}},"color":{"background":"#ffffff","text":"#203e35"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-text-color has-background" style="color:#203e35;background-color:#ffffff;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px"><!-- wp:heading -->
<h2 class="wp-block-heading">Find a thread</h2>
<!-- /wp:heading --><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Spaces</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Stories about the places we spend our days.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Materials</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Notes on the things we choose to keep.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Routines</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Small changes to everyday habits.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --><!-- wp:group {"style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}},"color":{"background":"#e2eadf","text":"#203e35"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-text-color has-background" style="color:#203e35;background-color:#e2eadf;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px"><!-- wp:heading -->
<h2 class="wp-block-heading">A note from the writer</h2>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Replace this sample biography with who you are, what you write about and where readers should begin.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

What is included

group, paragraph, heading, buttons, button, columns, column, image

Validation

Structurally validated with the WordPress block parser; no live WordPress theme test. Checked September 30, 2026.

Licence

Copy, adapt and use commercially under CC0.

Use this layout in WordPress

Copy the blocks and paste into an empty location in a draft page. If they appear as plain text, paste using the editor’s Code editor, then return to Visual editor.
Replace all sample text and example.com links. Replace demo images through Media Library; remote image URLs do not create local attachments.
Use List View to select the outer Group and inner blocks. Review colors, spacing, headings and button links.
Preview on desktop and mobile before publishing. For a header or footer, paste into the appropriate template part.

These are page-content layouts. Site Editor templates control surrounding views such as posts and archives. The layout includes one H1; avoid a duplicate title from the surrounding theme template.

Sections included

Introduction
Featured articles
Topics
About the author

Why the arrangement works

A short introduction establishes the publication topic.
A curated feature makes a deliberate starting point.
Topics and a biography explain the editorial scope.

Customize the starting point

Use your theme’s readable article font and a restrained heading scale.
Replace manual story links regularly, or build a core Query Loop for an automatic list.
Link topic descriptions to existing substantial archives only.
The layout contains one H1. Use a page template that does not display a second page title, or change the pasted heading level.
Replace every fictional name, price, quote and example.com link before publication.

On smaller screens

Story sections stack with the lead first. Avoid a long introductory paragraph before the first story.

Accessibility checks

Check heading order, link destinations, image alt text and contrast after customization. Core Columns stack; verify keyboard navigation in your own theme.

Theme defaults affect the final appearance. The live preview is rendered from the copied markup with a neutral baseline and does not promise pixel-identical results across themes.

Read the official pattern instructions and RoarWP pattern guide for syncing and customization.

Use this layout in WordPress

Sections included

Why the arrangement works

Customize the starting point

On smaller screens

Accessibility checks

Keep building from here.

Featured articles

How to create and set a custom WordPress homepage