When you click on Add a New Step in guide creation, you will see the three types of steps with accompanying templates: Modal, Tooltip, and Input Field.

Starting from plain text, by adding new components, you can create a step with a combination of different materials such as text, images, video, etc.

Each component's location can be changed with drag and drop (upward, downward, and sideways).

Modal

'Modal' is suitable for creating a pop-up window with visuals. They can be placed in variable positions. 

During their presence, end-users interact with the page, which can be ON or OFF. After completing the step, you can save your work and preview it.

Tooltip

'Tooltip' enables you to highlight a specific item in your product. You can point out a UI element and make a statement about it with a tooltip. Proceeding to the Next Step can be done by clicking on a Requisite Button or an Element.

Please take a look at the image below; in default settings, user interaction with the highlighted area is extracted; in other words, click action upon the selected element is halted.

You can activate the interaction via the extension.

Also, see: What is a CSS selector, and when should I use it?

Advanced: You can visit this subsection if you want to make the step wait until the element you highlight is present on UI or for a specific time (sec). 

You can also define a behavior considering the possibility that the element will not appear, such as skipping the step or ending the guide.

Input Field

'Input field' is suitable for highlighting an input field on a UI and encouraging end-users to fill the area you point at. You can design it as a mandatory action with the "Field is Required" option, validate the given information, and set a value for Autofill.