Ultimate Blocks

STEPS & PROCESSES

How It Works (3 Steps)

A clean three-step process layout with large numbers and supporting text. Great for explaining how your product, plugin, or service works in a simple, visual way.

Back to Library
Aug 30, 2025 CREATED
Aug 30, 2025 UPDATED
0 TIMES USED

How
it Works?

1

Install
and Activate

2

Go to the Block Editor

3

Enter Your Desired Block

Pattern Markup

<!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:paragraph {"style":{"typography":{"fontSize":"70px","lineHeight":"1.3"},"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"bottom":"0"}}}} -->
<p style="margin-bottom:0;padding-top:0;padding-bottom:0;font-size:70px;line-height:1.3">How<br><mark style="background-color:rgba(0, 0, 0, 0);color:#969ba9" class="has-inline-color">it Works?</mark></p>
<!-- /wp:paragraph -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"},"padding":{"right":"0px","left":"0px","top":"0px","bottom":"0px"}}}} -->
<div class="wp-block-columns" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"width":"20%"} -->
<div class="wp-block-column" style="flex-basis:20%"><!-- wp:paragraph {"style":{"typography":{"fontSize":"80px"},"spacing":{"margin":{"right":"0px","left":"0px","top":"0px","bottom":"0px"},"padding":{"top":"0px","bottom":"0px","left":"0px","right":"0px"}},"color":{"text":"#e11a4c"},"elements":{"link":{"color":{"text":"#e11a4c"}}}},"fontFamily":"monospace"} -->
<p class="has-text-color has-link-color has-monospace-font-family" style="color:#e11a4c;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-size:80px">1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"80%"} -->
<div class="wp-block-column" style="flex-basis:80%"><!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"31px","left":"20px"}},"typography":{"fontSize":"22px"}}} -->
<p style="padding-top:31px;padding-left:20px;font-size:22px"><strong>Install <br>and Activate</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"},"padding":{"right":"0px","left":"0px","top":"0px","bottom":"0px"}}}} -->
<div class="wp-block-columns" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"width":"20%"} -->
<div class="wp-block-column" style="flex-basis:20%"><!-- wp:paragraph {"style":{"typography":{"fontSize":"80px"},"spacing":{"margin":{"right":"0px","left":"0px","top":"0px","bottom":"0px"},"padding":{"top":"0px","bottom":"0px","left":"0px","right":"0px"}},"color":{"text":"#e11a4c"},"elements":{"link":{"color":{"text":"#e11a4c"}}}},"fontFamily":"monospace"} -->
<p class="has-text-color has-link-color has-monospace-font-family" style="color:#e11a4c;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-size:80px">2</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"80%"} -->
<div class="wp-block-column" style="flex-basis:80%"><!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"31px","left":"20px"}},"typography":{"fontSize":"22px"}}} -->
<p style="padding-top:31px;padding-left:20px;font-size:22px"><strong>Go to the Block Editor</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"},"padding":{"right":"0px","left":"0px","top":"0px","bottom":"0px"}}}} -->
<div class="wp-block-columns" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"width":"20%"} -->
<div class="wp-block-column" style="flex-basis:20%"><!-- wp:paragraph {"style":{"typography":{"fontSize":"80px"},"spacing":{"margin":{"right":"0px","left":"0px","top":"0px","bottom":"0px"},"padding":{"top":"0px","bottom":"0px","left":"0px","right":"0px"}},"color":{"text":"#e11a4c"},"elements":{"link":{"color":{"text":"#e11a4c"}}}},"fontFamily":"monospace"} -->
<p class="has-text-color has-link-color has-monospace-font-family" style="color:#e11a4c;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-size:80px">3</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"80%"} -->
<div class="wp-block-column" style="flex-basis:80%"><!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"31px","left":"20px"}},"typography":{"fontSize":"22px"}}} -->
<p style="padding-top:31px;padding-left:20px;font-size:22px"><strong>Enter Your Desired Block</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

How to Use This Pattern

Copy this pattern and paste it directly into your WordPress Block Editor. Then replace the numbers and text with your own step-by-step process.

Tags

how it works process steps