UABB brings a new module which now allows creating How-to pages or articles. And on top of it, you will have Schema Markup added to the page, without a single line of code.

Let’s see how you create How-to Pages using the module.

Before diving in, let’s take a quick look at all the features –

• Automatic Schema Integration as per latest Google Guidelines
• Quick and Easy Setup
• Help with Default texts
• Overall Customization options

Let’s see the key features in details –

Quick and Easy Setup

So to get started, you will just need to drag-n-drop the How-to module in the Beaver Builder editor.

The How-to module can basically be used on How-to pages which contains a How-to in their title and contains steps to achieve certain requirements.

It is required to have How-to in the Title of the Page and contain steps. Other than that a How-to page can have Section Step Title, Estimated Cost, Duration to complete the task.

Also, you can add relevant images to each of the steps so that they display those Images in the Google Rich Snippets once ranked accordingly.

Overall Customization Options

Just like every UABB module has every feature which can be customized as per your requirement.

Even in the How-to module, you will be able to customize every part of the content added from the module.

You will find all the styling options under the Style tab of the module –

Box Style section: From here you can manage the Alignment, Background Color, Padding, and Border

Title section: The Title section will allow changing the color and managing the margin-bottom.

Description section: This section allows changing the Description’s color and manage the margin-bottom.

Image section: This section can set alignment, width, padding and add Border to the Images of the Image.

Steps section: This section has Section Title Color and Margin option as well as the Image Width for the Images added to the individual Steps.

Automatic Schema Integration

The module helps to automatically integrate Schema from the required fields of the module and in turn, increase the Click-Through Rate(CTR) of your page on Google Search Results.

Let’s say if you don’t have your website at the top of Google Search Results, and your competitor’s website result is on the top spot. While if you are at the number three spot, so with schema-enhanced rich snippets will attract more attention and, in turn, might lead to higher CTR.

We have made sure every field is mapped using the Google Preferred JSON-LD schema markup so that you do not have to write a single line of code to integrate schema on your How-to Page.

According to the Schema.org, there are two fields which are required for the How-to Schema type. They are Title and Steps.

Google has laid down some content guidelines on where and where not to use this Schema Type.

One more important thing to note for the How-to Schema is that – the Rich Results on Google will only be displayed on mobile devices and not on the desktop.

Here’s the list of Properties we are providing in our module –

1. Name
2. Description
3. Image
4. Estimated Cost
5. Estimated Time
6. Supply
7. Tools
8. Steps

You can also take a look at the fields that we have mapped with the properties. Here are the definitions of the How-to fields.

Also, you can test the Schema after addition on your page using the Rich Results Test Tool provided by Google.