wptheme.com

Service areas: a free WordPress block pattern

The towns you serve as a two-column check list, linking to location pages when they exist.

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":"45%"} -->
<div class="wp-block-column" style="flex-basis:45%"><!-- wp:paragraph {"className":"gw-eyebrow"} -->
<p class="gw-eyebrow">Service areas</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Proudly serving the area</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"textColor":"contrast-2","fontSize":"large"} -->
<p class="has-contrast-2-color has-text-color has-large-font-size">We serve homes and businesses across the metro area. Do not see your town? Call us, we probably cover it.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="/contact/">Check your area</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"className":"gw-card","layout":{"type":"constrained"}} -->
<div class="wp-block-group gw-card"><!-- wp:list {"className":"is-style-checks gw-areas"} -->
<ul class="wp-block-list is-style-checks gw-areas"><!-- wp:list-item -->
<li>Springfield</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Shelbyville</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Ogdenville</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>North Haverbrook</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Capital City</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Brockway</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:group --></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