Step-by-step tutorials

How to use the How-to Schema

A custom block that provides you with a smooth & reliable way to easily create your style of step-by-step tutorials and how-tos. Aside from numerous customization options, you also get one innovative, practical premium feature with this block – this element automatically generates JSON data and places it in the code, enhancing your chances of getting indexed on all search engines, even on non-standard devices such are certain mobile devices & TVs.

Step 1: Drag-and-Drop the Element to a Desired Location

As with all Qi Blocks for Gutenberg custom blocks, the How-to Schema was primarily made with ease of use in mind. To add the element, locate the block by clicking either of the two ‘+’ buttons (found in the top left of the screen and in the section below the ‘Add title’ text, to the right, respectively). Next up, type the name of the block in the search field that pops up. Now you can simply drag-and-drop the block to a desired section on the screen.

How-To Schema Block 1

Step 2: Adjusting the How-to Schema Block Content Settings

Here you have the option to automatically generate and insert JSON structured data snippets into the code (this is enabled by default), and this is also where you can input a title, subtitle and some additional textual content for the element. These will be displayed at the very top of your how-to. You can also input individual items or steps here; for each of the steps you wish to add to your step-by-step tutorial you can add a title, some textual content, and an image.

How-To Schema Block 2
How-To Schema Block 3

Step 3: Configuring the How-to Schema Block Style Settings

After you have finished with the basic set up of your How-to Schema, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen. Here you can adjust headings, colors, typography, spacings and more, and this can be done for the how-to intro section & the steps separately.

How-To Schema Block 4

Step 4: A Premium Feature That You Get for Free

How-to Schema custom block for Gutenberg automatically generates lightweight JSON structured data snippets and inserts it into the code; in effect, this means that your page will have a better chance of getting indexed by search engines, and it will even help your page appear in searches on non-standard devices such are certain mobile devices, TVs and more. What’s more, this cutting-edge solution is completely free, as is the case with over 40 other Qi Blocks for Gutenberg!

Get Qi Blocks for Gutenberg with 80 professionally designed custom blocks for creating modern websites the easy way. Experience Full Site Editing executed to perfection!