In this guide, we will show you how to add a “How To widget” to your Elementor website. The How To widget allows you to create clear, step-by-step instructional content with titles, descriptions, images, and estimated completion times, making it ideal for tutorials, how-to guides, and walkthroughs. Perfect for educators, bloggers, and product demos, this widget helps you present information in a structured and engaging format.
Let’s explore the customization options available in the “How To widget” for Elementor below.
Add a Free How To Widget to Elementor
Add a Free How To Widget to an Elementor Page
Elementor How To Widget General Settings
Items Source
Select the data source type from a dropdown menu.
Debug – Show Input Data
Toggle to enable or disable input data debugging.
Instruction Style
Choose the display style for instructions from a dropdown menu.
RTL
Toggle to enable or disable Right-to-Left text direction.
Item Image Size
Select the image size option from a dropdown menu.
Show How-To Image
Toggle to show or hide the image.
How-To Image
Upload or select an image to display.
How-To Image Size
Choose the image size from a dropdown menu.
Show Title
Toggle to show or hide the title.
Title
Input the title text.
Title Tag
Choose the HTML heading tag from a dropdown menu.
Show Description
Toggle to show or hide the description.
Description
Input the description text.
Show Statistics
Toggle to show or hide statistical data.
Show Supply
Toggle to show or hide the supply section.
Supply Title
Input the title for the supply section.
Show Supply Divider
Toggle to show or hide the divider under the supply section.
Show Tools
Toggle to show or hide the tools section.
Tools Title
Sets the title for the tools section.
Show Tools Divider
Toggles the visibility of the divider under the tools section.
Show Instructions
Toggles the visibility of the step-by-step instructions section.
Step Indicator Type
Defines the type of step indicator (e.g., number, icon) used in the instructions.
Show Instructions Divider
Toggles the visibility of the divider under the instructions section.
Show Video
Toggles the visibility of a video section in the how-to layout.
Show End Note
Toggles the visibility of the endnote section.
Show Badge
Toggles the visibility of a badge on the how-to content.
Title
An input field for entering the title. Includes options for text generation and additional settings.
Description
A text area for writing the description. Includes an AI writing option, menu/settings access, and resizable handle.
Image
A section to upload or manage an image.
Image Size
A dropdown to select the image display size.
Icon
A display area to choose or customize an icon.
Enable Schema
Enable Schema for the selected widget.
Schema Source
Choose the Schema Source:
From List
Custom
Custom JSON Schema
We can also add a Custom JSON Schema.
Schema Type
Choose the Schema Type:
FAQ (FAQ Page)
List of Person (Person)
How To
Recipe
Courses (Course)
Books (Book)
Items List (ItemList)
Event
Places (Place)
Products (Product)
Tourist Destinations (TouristDestination)
Event Series (EventSeries)
Music Playlist (MusicPlaylist)
Search Results Page (SearchResultsPage)
We are continuously expanding the list of supported Schema types in upcoming releases.
Schema Main Title
Enter a Schema title that describes the action, for example, how to tie your shoes.
Enable Fields Mapping
Enable manual field mapping by roles. Post-related fields are applicable only
When the content is sourced from posts.
Show Schema Debug
Display Schema debug information in the front-end footer.
Elementor How To Widget Style Settings
Content Padding
Includes responsive controls with four input fields for Top, Right, Bottom, and Left padding. A unit selector and link/unlink option are provided.
Content Background
Options to set a solid color, gradient, or background image.
Content Border Type
A dropdown menu to select the border style.
Default
None
Solid
Double
Dotted
Dashed
Groove
Content Border Radius
Includes responsive controls with four input fields for Top, Right, Bottom, and Left radius values. A unit selector and link/unlink option are included.
Content Box Shadow
A control to customize the shadow styling of the content box.
Image Position
Responsive control with a dropdown menu to set the image placement.
Image Width
Responsive control with a slider and input field, plus a unit selector.
Height Type
Dropdown to choose how the image height is defined.
Image Height
Responsive control with slider and input field.
Image Space
Responsive control with a slider and an input field to manage spacing around the image.
Image Fit
Responsive dropdown menu for setting how the image fits within its container.
Image Position
Responsive dropdown to define the alignment of the image inside its box.
Image Border Radius
Responsive control with four input fields for Top, Right, Bottom, and Left radius values. Includes unit selector and link/unlink option.
Image Border Type
A dropdown menu to choose the type of image border.
Default
None
Solid
Double
Dotted
Dashed
Groove
Normal / Hover Tabs
Toggle between “Normal” and “Hover” states for styling.
Image CSS Filter
Edit icon to configure CSS-based image filters.
Title Typography
Global and editable controls for font, size, weight, and other text styles.
Title Color
Global color picker for the title text color.
Text Shadow
Editable controls to add and customize shadow effects on the title text.
Title Space Bottom
Responsive control to adjust the vertical spacing below the title, including slider and input field.
Description Typography
Global and editable controls for font, size, weight, and other text styles.
Description Color
Global color picker for the description text color.
Description Text Shadow
Editable controls to add and customize shadow effects on the description text.
Description Space
Responsive control to adjust the vertical spacing below the description, including slider and input field.
Heading Spacing Bottom
Responsive control to adjust the vertical spacing below the heading, with slider and input field.
Heading Typography
Global and editable controls for font, size, weight, and other text styles.
Heading Text Color
Global color picker for the heading text color.
Heading Text Shadow
Editable controls to add and customize shadow effects on the heading text.
Supply Spacing Top
Responsive control to adjust the vertical spacing above the supply section, including a slider and an input field.
Supply Gap
Responsive control to manage spacing within the supply section, with a slider and input field.
Supply Padding
Responsive control with four input fields for Top, Right, Bottom, and Left padding values, unit selector, and link/unlink option.
Supply Border Radius
Responsive control with four input fields for corner radius values, unit selector, and link/unlink option.
Supply Layout
Responsive dropdown menu to select layout style for the supply section.
Supply Border Type
A dropdown menu to select the border style for the supply section.
Default
None
Solid
Double
Dotted
Dashed
Groove
Supply Typography
Global and editable controls for font, size, weight, and other text styles in the supply section.
Supply Text Color
Global color picker for the text color within the supply section.
Supply Background
Global color picker for the background of the supply section.
Supply Text Shadow
Editable controls to add and customize shadow effects on the supply text.
Supply Spacing Top
Responsive control to adjust the vertical spacing above the supply section, including a slider and an input field.
Supply Gap
Responsive control to manage spacing within the supply section, with a slider and input field.
Supply Padding
Responsive control with four input fields for Top, Right, Bottom, and Left padding values, unit selector, and link/unlink option.
Supply Border Radius
Responsive control with four input fields for corner radius values, unit selector, and link/unlink option.
Supply Layout
Responsive dropdown menu to select layout style for the supply section.
Supply Border Type
A dropdown menu to select the border style for the supply section.
Default
None
Solid
Double
Dotted
Dashed
Groove
Supply Typography
Global and editable controls for font, size, weight, and other text styles in the supply section.
Supply Text Color
Global color picker for the text color within the supply section.
Supply Background
Global color picker for the background of the supply section.
Supply Text Shadow
Editable controls to add and customize shadow effects on the supply text.
Tools Spacing Top
Responsive control to adjust the vertical spacing above the tools section, including the slider and input field.
Tool Gap
Responsive control to manage spacing within the tools section, with a slider and input field.
Tool Padding
Responsive control with four input fields for Top, Right, Bottom, and Left padding values, unit selector, and link/unlink option.
Tool Border Radius
Responsive control with four input fields for corner radius values, unit selector, and link/unlink option.
Tool Layout
Responsive dropdown menu to select layout style for the tools section.
Tool Border Type
A dropdown menu to select the border style for the tools section.
Default
None
Solid
Double
Dotted
Dashed
Groove
Tool Typography
Global and editable controls for font, size, weight, and other text styles in the tools section.
Tool Text Color
Global color picker for the text color within the tools section
Tool Background
Global color picker for the background of the tools section.
Tool Text Shadow
Editable controls to add and customize shadow effects on the tool's text.
Instructions Spacing Top
Responsive control to adjust the vertical spacing above the instructions section, including the slider and input field.
Steps Gap
Responsive control to manage spacing between individual steps, with a slider and an input field.
Step Padding
Responsive control with four input fields for Top, Right, Bottom, and Left padding values, unit selector, and link/unlink option.
Step Border Radius
Responsive control with four input fields for corner radius values, unit selector, and link/unlink option.
Normal / Hover Tabs
Toggle between “Normal” and “Hover” states for step styling.
Step Background
Global color picker for the background color of the step.
Step Border Type
A dropdown menu to select the border style for the step.
Step Border Width
Responsive control with four input fields for border width on each side, unit selector, and a link/unlink option.
Step Border Color
Global color picker for the border color of the step.
Step Box Shadow
Editable controls to add and customize shadow effects on the step container.
Indicator Size
Responsive control with slider, input field, and unit selector to set the size of the step indicator.
Index Typography
Global and editable controls for font, size, weight, and other text styles for the step index.
Indicator Color
Global color picker for the text or icon color of the step indicator.
Indicator Background Color
Global color picker for the background color of the step indicator.
Indicator Border Radius
Responsive control with four input fields for corner radius values, unit selector, and link/unlink option.
Indicator Border Type
Dropdown menu to select the border style of the step indicator.
Default
None
Solid
Double
Dotted
Dashed
Groove
Indicator Box Shadow
Editable controls to add and customize shadow effects on the step indicator.
Content Gap
Responsive control with a slider and an input field to adjust spacing between content elements.
Content Align
Responsive dropdown to set the horizontal alignment of the content.
Content Justify
Responsive dropdown to control the justification of content within the container.
Instruction Title Typography
Global and editable controls for font, size, weight, and other text styles for the instruction title.
Instruction Title Color
Global color picker for the instruction title text color.
Instruction Title Shadow
Editable controls to add and customize shadow effects on the instruction title text.
How To Widget Design Examples For Elementor
Here are some live use cases for the How To widget.
Quick Car Fixing With How To widget.
Thank you for using the How To Widget for Elementor! With step-by-step formatting, clear titles, detailed descriptions, images, and estimated completion times, it’s the perfect tool for creating engaging tutorials, helpful guides, and informative walkthroughs. Whether you’re sharing DIY instructions or product setup steps, this widget makes your content easy to follow and visually appealing. If you have any questions or need support, feel free to reach out. For inspiration and live examples, don’t forget to visit our website.