---
title: Building a page from Brentwood sections
excerpt: Start every section from a ready-made Brentwood layout, then swap in your own words and photos.
tags: [patterns, sections, layouts, page-building, rows]
target: client:brentwood
---

<!-- wp:paragraph -->
<p>Your website is built out of <em>sections</em> — a photo beside some text, three photo cards in a row, a dark panel with a wide image. Every section style already on the site is saved as a starting point you can drop into a page. You are never building one from scratch.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How do I add a section to a page?</h2>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true,"className":"bw-steps"} -->
<ol class="wp-block-list bw-steps"><!-- wp:list-item -->
<li>Click in the page where you want the section to go.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Click the black <strong>+</strong> button at the top left of the editor.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Switch to the <strong>Patterns</strong> tab.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Choose one of the three <strong>Brentwood</strong> categories, then click a section to drop it in.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:image {"id":297,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://plugins.bowden.works/wp-content/uploads/2026/07/bwg-bw-pattern-categories.png" alt="The Patterns tab showing three Brentwood categories: basics, photos and links, sections" class="wp-image-297"/><figcaption class="wp-element-caption">The three Brentwood categories in the Patterns tab.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:table -->
<figure class="wp-block-table"><table><thead><tr><th>Category</th><th>What's in it</th></tr></thead><tbody><tr><td>Brentwood — sections</td><td>The main designed sections: text beside a photo, dark panels, curved photos, quotes, staff.</td></tr><tr><td>Brentwood — photos and links</td><td>Photo cards, link cards and page-link lists.</td></tr><tr><td>Brentwood — basics</td><td>Plain building blocks: a text section, two columns, a full-width photo, a video, latest news.</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How do I put my own words and photos in?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A section arrives filled with placeholder wording — "Section heading", "Replace this with your own text." — and a photo from the site. Replace all three and the section is finished.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true,"className":"bw-steps"} -->
<ol class="wp-block-list bw-steps"><!-- wp:list-item -->
<li>Click the heading and type over it.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Click the paragraph and type over it. Delete any paragraph you don't need.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Click the photo, then click <strong>Replace</strong> in the toolbar that appears above it. Choose an image from the library or upload a new one.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>That's the whole job. There is no fourth step and nothing to switch on.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How do I put the photo on the other side?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Don't look for a second section facing the other way — flip the one you have.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true,"className":"bw-steps"} -->
<ol class="wp-block-list bw-steps"><!-- wp:list-item -->
<li>Click anywhere in the section, then keep clicking the <strong>Select parent</strong> arrow at the far left of the toolbar until the whole section is selected.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Click <strong>Swap sides</strong> (the left-right arrows).</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:image {"id":298,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://plugins.bowden.works/wp-content/uploads/2026/07/bwg-bw-section-toolbar.png" alt="The section toolbar showing the swap sides, card style and background buttons" class="wp-image-298"/><figcaption class="wp-element-caption">The last three buttons on a section's toolbar: swap sides, card style, background colour.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The column widths flip with it, so a wide photo stays wide.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How do I change a section's background colour?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Select the whole section (as above), then click the <strong>palette</strong> button on the toolbar and pick a swatch: white, light blue, light grey, dark grey, or none.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is why there aren't separate sections for each colour — one section covers them all.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How do I make a section look like a raised card?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Select the whole section and click the <strong>card</strong> button on the toolbar. It adds rounded corners and a soft shadow, the "raised panel" look used across the site. Click it again to remove it.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How do I add the curved edge to a photo?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The curve belongs to the <em>column</em> holding the photo, not to the whole section. Click the photo, click <strong>Select parent</strong> once so the column is selected, then click the <strong>curve</strong> button on the toolbar.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Can I change a section after I've inserted it?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Yes — completely. Once a section is on the page it is simply blocks. Add a button, delete a column, drop in another photo, change anything. Nothing is locked, and nothing you do affects any other page.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"bw-callout"} -->
<div class="wp-block-group bw-callout"><!-- wp:paragraph {"className":"bw-callout-label"} -->
<p class="bw-callout-label">If clicking selects the wrong thing</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A section holds columns, and columns hold the text and photos, so your first click may land deeper or shallower than you meant. Use the <strong>Select parent</strong> arrow at the left of the toolbar to step outwards, or open <strong>List View</strong> (the stacked-lines icon, top left) and pick the exact piece from the outline.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Which section should I start from?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Pick by shape, not by colour or styling — those are toolbar buttons once it's on the page.</p>
<!-- /wp:paragraph -->

<!-- wp:table -->
<figure class="wp-block-table"><table><thead><tr><th>You want</th><th>Start from</th></tr></thead><tbody><tr><td>Some words next to a photo</td><td>Text + photo</td></tr><tr><td>Words with a photo either side</td><td>Photo · text · photo (curved)</td></tr><tr><td>A bold statement over a big image</td><td>Dark panel + wide photo</td></tr><tr><td>Three photos in a row</td><td>Three photos, or Three photo cards</td></tr><tr><td>Links through to other pages</td><td>Three link cards, or Page links</td></tr><tr><td>A quote from a student or parent</td><td>Quote + photo</td></tr><tr><td>Just text, full width</td><td>Text section</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:group {"className":"bw-callout bw-callout-success"} -->
<div class="wp-block-group bw-callout bw-callout-success"><!-- wp:paragraph {"className":"bw-callout-label"} -->
<p class="bw-callout-label">Remember</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Trying a section costs nothing. <code>Ctrl</code> + <code>Z</code> (<code>Cmd</code> + <code>Z</code> on a Mac) takes it straight back out, and nothing reaches visitors until you click <strong>Update</strong>. If a page ends up in a mess, open <strong>Revisions</strong> on the Page tab and restore an earlier version.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->