Portfolio 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.

An independent designer’s project-led homepage.

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">Design that makes room for life.</h1>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>A sample portfolio for an independent spatial designer.</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":"#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 {"style":{"typography":{"fontSize":"34px"}}} -->
<h2 class="wp-block-heading has-custom-font-size" style="font-size:34px">Selected work</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">Courtyard house</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Example project · Interior direction</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><a href="https://example.com/project-one">View courtyard project</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- 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">Quiet workspace</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Example project · Spatial planning</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><a href="https://example.com/project-two">View workspace project</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":"#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:heading -->
<h2 class="wp-block-heading">How the work takes shape</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">Listen</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Describe how you learn about a project’s real needs.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Develop</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Explain the design decisions and review process.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Deliver</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>State the actual deliverables and support you provide.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --><!-- wp:group {"style":{"spacing":{"padding":{"top":"48px","right":"48px","bottom":"48px","left":"48px"}},"color":{"background":"#203e35","text":"#ffffff"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-text-color has-background" style="color:#ffffff;background-color:#203e35;padding-top:48px;padding-right:48px;padding-bottom:48px;padding-left:48px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"}}} -->
<p class="has-custom-font-size" style="font-size:12px">LET’S MAKE A PLAN</p>
<!-- /wp:paragraph --><!-- wp:heading {"style":{"typography":{"fontSize":"40px"}}} -->
<h2 class="wp-block-heading has-custom-font-size" style="font-size:40px">Have a space in mind?</h2>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Tell us what you are working on. We will explain the next step.</p>
<!-- /wp:paragraph --><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#ffffff","text":"#203e35"}}} -->
<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:#203e35;background-color:#ffffff">Start a conversation</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></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 24, 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
Project grid
Approach
Contact

Why the arrangement works

The introduction states a specific discipline.
Projects appear before process explanations.
Contact follows enough information to begin a useful enquiry.

Customize the starting point

Replace the repeated demo photo with distinct permitted project images.
Give each project a real case study and explain your contribution.
Choose consistent crops and readable captions.
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

Images and captions remain connected as columns stack. Check the page with actual long project titles.

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.

Portfolio grid

How responsive images work in WordPress