Add HowTo Schema Instructions Using HowTo Divi Module

The HowTo Divi Module renders structured step-by-step tutorial guides on your WordPress pages, powered automatically by your configured HowTo Schema data.

A How To Schema embeds structured step-by-step instructions directly into your website content.

Pages configured with HowTo Schema are eligible for rich instructional snippets and carousel previews in search engine results pages (SERPs).

HowTo Schema Divi Module Output – WordPress Schema Plugin

No programming or custom coding required.

Pre-Requisites

• A WordPress Website (5.0 or higher)
• Divi Theme or Divi Builder (optional, for Divi Modules)
• WordPress Schema Plugin For Divi, Gutenberg & Shortcodes

Add HowTo Schema In SEO Schema Settings

1. Go to WordPress Admin > SEO Schema > HowTo.

2. Create and configure your HowTo Schema settings.

3. Click Save Schema Settings.

4. Navigate to your target WordPress page associated with HowTo Schema and complete the step instructions in the meta box.

5. For step-by-step schema setup details, refer to the HowTo Schema Guide.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Edit WordPress Page In Divi Visual Builder

1. Open any published page on your website associated with HowTo Schema.

2. Click Enable Visual Builder in the top WordPress admin bar to launch Divi’s front-end editor.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Add HowTo Divi Module

1. Create a Regular section in Divi.

2. Click + Add Module and select the HowTo Divi module.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Connect HowTo Schema Data Source

1. In the module settings modal, go to the Content tab and open the HowTo Schema Page section.

2. Select the page containing your tutorial data:

   • Use the Select HowTo Schema Page dropdown to pick a page configured with HowTo Schema.
   • Select – Use Current – to pull tutorial data dynamically from the page currently being viewed.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Tutorial Title Typography

1. Go to the Design tab and open the Title section.

2. Customize typography and layout for the main tutorial headline:

   • Show Title: Toggle ON/OFF to show or hide the tutorial headline.
   • Margin and padding spacing
   • Font family, font weight, font style, text alignment, text color, font size, letter spacing, line height, and text shadows.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Tutorial Description Styling

1. Go to the Design tab and open the Description section.

2. Customize typography for the tutorial summary description:

   • Margin and padding spacing
   • Font family, font weight, font style, text alignment, text color, text size, letter spacing, line height, and text shadows.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Hero Image Styling

1. Go to the Design tab and open the Hero Image section.

2. Style the main image depicting the completed task:

   • Set image alignment (left, center, right) and max width.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Estimated Cost Wrapper Styling

1. Go to the Design tab and open the Estimated Cost Wrapper section.

2. Controls container spacing around the estimated cost display:

   • Margin and padding spacing

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Estimated Cost Title Styling

1. Go to the Design tab and open the Estimated Cost Title section.

2. Customize typography for the Estimated Cost heading:

   • Font family, font weight, font style, text alignment, text color, text size, letter spacing, line height, and text shadows.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Total Time Duration Styling

1. Go to the Design tab and open the Total Time Text section.

2. Customize typography for the estimated completion duration text:

   • Margin and padding spacing
   • Font family, font weight, font style, text alignment, text color, text size, letter spacing, line height, and text shadows.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Supplies Container Wrapper Styling

1. Go to the Design tab and open the Supplies Wrapper section.

2. Controls container spacing enclosing the supplies heading and list items:

   • Margin and padding spacing

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Supply Heading Styling

1. Go to the Design tab and open the Supply Title section.

2. Customize typography for the Required Supplies heading:

   • Font family, font weight, font style, text alignment, text color, text size, letter spacing, and line height.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Tools Container Wrapper Styling

1. Go to the Design tab and open the Tools Wrapper section.

2. Controls container spacing enclosing the tools heading and list items:

   • Margin and padding spacing

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Tool Heading Styling

1. Go to the Design tab and open the Tool Title section.

2. Customize typography for the Required Tools heading:

   • Font family, font weight, font style, text alignment, text color, text size, letter spacing, and line height.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Instruction Step Card Styling

1. Go to the Design tab and open the Single Step Wrapper section.

2. Customize container properties for individual instruction step cards (containing step title, image, and sub-steps):

   • Margin and padding spacing
   • Border widths (Top, Right, Bottom, Left)
   • Border color and border style
   • Box shadow styles

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Step Title Typography

1. Go to the Design tab and open the Step Title section.

2. Customize typography and borders for individual step headings:

   • Margin and padding spacing
   • Border styles and colors
   • Font family, font weight, font style, text alignment, text color, text size, letter spacing, line height, and text shadows.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Step Image Display

1. Go to the Design tab and open the Step Image section.

2. Style illustration images for individual steps:

   • Set image alignment and max width.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Step Content & Sub-Steps Wrapper

1. Go to the Design tab and open the Step Image, Text Wrapper section.

2. Controls container spacing enclosing step images and sub-step text:

   • Margin and padding spacing

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Custom CSS Controls

1. For advanced customization, go to the Advanced tab and select Custom CSS.

2. Add custom CSS rules targeting specific tutorial elements:

   • Title
   • Description
   • Hero Image & Hero Image Container
   • Estimated Cost Wrapper & Title
   • Total Time Wrapper & Text
   • Supplies Wrapper, Title & List Items
   • Tools Wrapper, Title & List Items
   • Instruction Steps Wrapper & Individual Step Cards
   • Step Title, Step URL, Step Image & Sub-Steps

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial