Product or service page: 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 focused page explaining a product or service and its actual purchase or contact 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">Make the next project easier to plan.</h1>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>A fictional planning service. Replace with what your product actually does and who it is for.</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 -->
<h2 class="wp-block-heading">A practical starting point</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">Clear scope</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Describe the actual result a customer receives.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Visible decisions</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Explain how your product helps someone complete the task.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Useful handover</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>State what is included and what happens next.</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 {"style":{"typography":{"fontSize":"34px"}}} -->
<h2 class="wp-block-heading has-custom-font-size" style="font-size:34px">Choose your starting point</h2>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Demonstration packages. Replace scope and prices before use.</p>
<!-- /wp:paragraph --><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"28px","right":"28px","bottom":"28px","left":"28px"}},"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:28px;padding-right:28px;padding-bottom:28px;padding-left:28px"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Consultation</h3>
<!-- /wp:heading --><!-- wp:paragraph {"style":{"typography":{"fontSize":"34px"}}} -->
<p class="has-custom-font-size" style="font-size:34px">€180</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p>A focused planning session.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p>Includes a 60-minute discussion and a written next-step list.</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">Ask about a consultation</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"28px","right":"28px","bottom":"28px","left":"28px"}},"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:28px;padding-right:28px;padding-bottom:28px;padding-left:28px"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Project plan</h3>
<!-- /wp:heading --><!-- wp:paragraph {"style":{"typography":{"fontSize":"34px"}}} -->
<p class="has-custom-font-size" style="font-size:34px">From €900</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p>A plan for one defined space.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p>Includes layout direction, a material outline and one revision.</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">Discuss a project</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></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

Validation

Structurally validated with the WordPress block parser; no live WordPress theme test. Checked October 1, 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
Features
Package comparison
Next step

Why the arrangement works

The proposition leads before feature detail.
Packages show scope and price together.
A final action gives an explicit next step.

Customize the starting point

Replace demonstration pricing and scope with the actual offer.
Explain recurring charges, tax and cancellation where relevant.
Connect the action to a real purchase or enquiry workflow.
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

Features and packages stack; keep conditions with the price. Remove any unnecessary repeated contact section.

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.

Pricing columns

WordPress form plugins: choosing a form builder