You can use our “Step by Step” pattern for process shots inside your posts. It uses the columns block to display 2 columns on desktop, 1 column on mobile. Inside each column is an image block using our “Numbered” style, and a fancy ordered list using the matching numbered style.

Note: The number on the image will automatically increment on the frontend of the post (what users see), but a change in WordPress 6.7+ causes it to show “1” for all the images in the block editor. You can “Preview in a new tab” to review the post before publishing to confirm the numbers look correct.

At the bottom of this post you’ll find instructions on how to import this pattern to your site.

How to use the pattern

  1. In the content area, type “/step” and select the “Step by Step” pattern:
  1. This will insert the pattern with a title and ten blank steps:
  1. Click on the image placeholder to upload or select an image from your media library. Then click on the “Instruction” text to type in your description.
  2. Once you’re done adding steps, remove the unused ones. I find it easiest to open the “Document Overview” and then select the columns you’d like to remove (see video above for more information).

How to import this pattern to your site

  1. Click this link, then in your browser go to File > Save Page As. It should download to your computer as step-by-step.json.
  2. In the backend of your WordPress site, go to Appearance > Design > Patterns (or Appearance > Patterns for older versions of WordPress).
  3. Click the “Add Pattern” button in the top right, then “Import pattern from JSON”
  4. Select the step-by-step.json file you just downloaded.

If you’d prefer us to install the pattern for you, please email us at [email protected] and we can complete this as a $100 Quick Fix.