Footer design: a free WordPress block pattern

Dark footer with the business name, tagline, license line, contact details, hours and the areas you serve.

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.

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|50"}}},"className":"gw-invert","backgroundColor":"contrast","textColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull gw-invert has-base-color has-contrast-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"36%"} -->
<div class="wp-block-column" style="flex-basis:36%"><!-- wp:site-title {"level":0} /-->

<!-- wp:paragraph {"textColor":"base-2"} -->
<p class="has-base-2-color has-text-color">Local service, done right</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"groundwork/business","args":{"key":"license"}}}},"fontSize":"small"} -->
<p class="has-small-font-size">Licensed and insured</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size">Contact</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"groundwork/business","args":{"key":"phone"}}}}} -->
<p>(555) 010-0100</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"groundwork/business","args":{"key":"email"}}}}} -->
<p>hello@example.com</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"groundwork/business","args":{"key":"address"}}}}} -->
<p>123 Main Street, Springfield, ST 00000</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"groundwork/business","args":{"key":"hours"}}}}} -->
<p>Mon–Fri 8am–6pm · Sat 9am–1pm</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size">Areas we serve</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"groundwork/business","args":{"key":"areas"}}}}} -->
<p>Springfield · Shelbyville · Ogdenville · North Haverbrook · Capital City · Brockway</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:paragraph {"textColor":"base-2","fontSize":"small"} -->
<p class="has-base-2-color has-text-color has-small-font-size">© Your Business Name. All rights reserved.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></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.