wptheme.com

About us page examples: a free WordPress block pattern

Your story in two paragraphs beside an image.

How to use it

  1. Copy the markup below.
  2. In the block editor, open the options menu and switch to the Code editor.
  3. Paste the markup where you want the section, then switch back to the Visual editor.
  4. Swap in your own text and images. Colors come from your theme's palette.

Block markup

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"width":"55%"} -->
<div class="wp-block-column" style="flex-basis:55%"><!-- wp:paragraph {"className":"gw-eyebrow"} -->
<p class="gw-eyebrow">About us</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Local, independent and here for the long run</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"textColor":"contrast-2"} -->
<p class="has-contrast-2-color has-text-color">We started this business to give our neighbors the kind of service we would want for our own families: honest advice, fair prices and work done right.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"contrast-2"} -->
<p class="has-contrast-2-color has-text-color">Today our team serves homes and businesses across the area, and most of our work still comes from referrals.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"aspectRatio":"4/5","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wptheme.com/demo-assets/placeholder/about.jpg" alt="Our team" style="aspect-ratio:4/5;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Uses preset color and spacing slugs from the Groundwork theme (base, surface, accent, contrast). In another theme, map them to that theme's palette.

See it in a live site