Documentation
Typed Text
Adding the Module
Once Avatar Divi is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:
- Create/Edit a Page/Post that uses Divi builder.
- Create/Edit a row.
- Click on Add New Module option; choose the Avatar Typed Text module.
Content Options
Typed Text
In this section you would be able to set your Typed text. These are the available options:
- Typed Text: Text to be typed. The texts entered here will appear sequentially in the type queue. Important: Due to some limitations in the Divi Builder the following HTML Special characters cannot be used: <>“. In addition, the following characters will not be rendered in the frontend `^\.
- Before Text: The text that will come before the Typed Text.
- After Text: The text that will come after the Typed Text.
- Type Speed (milliseconds): How long it would take for the text to be typed out in milliseconds.
- Start Delay (milliseconds): How long to wait before start typing the text in milliseconds.
- Erase Speed (milliseconds): How long it would take for the text to be erased in milliseconds.
- Erase Delay (milliseconds): How long to wait before erasing the text in milliseconds.
- Loop Typed Text: Determine whether the typed effect should continue to loop or not.
- Hide Typing Cursor: Hide the Typing Cursor.
- Typing Cursor: Select the cursor that will be displayed while typing the text. Depends on Hide Typing Cursor is set to NO.
- Underscore
- Pipe
- Fade Out After Typing: This will cause the text to fade out once it has been typed instead of the backspace animation.
- Fade Out Delay (milliseconds): How long should be waited before the text fades out in milliseconds
- Shuffle Text: This will cause the text or words to shuffle instead of appearing in the order they have been entered above.
- Animate on Scroll: Should the typed animation be animated when the browser windows scrolls. The following options will become available if this option is set to YES.
- Viewport Position: How much the user must scroll before the typing animation starts.
- Viewport Delay (Seconds): How long should the typing animation wait before it starts after the user has reached the scroll position set above.
The default Divi Builder Module Content Tab Link, Background and Admin Label are also available for this module.
Design Options
Typed Text HTML Tag
- Typed Text HTML Tag: Set the HTML tag for your Typed Text.
- H1
- H2
- H3
- H4
- H5
- H6
- div
- span
- p
Typed Phrase
The Text and Font settings and styles on this option will affect the entire Typed Phrase. Use the individual font settings for each part of the Typed Text below to customize them individually.
- Divi Builder Default: Default Text and Font style options provided by the Visual Builder.
Typed Text • Before Typed Text • After Typed Text
The Text and Font settings and styles set inside these options will affect only affect that option respectively.
- Typed Text Display Mode: Here you can choose the element’s display type. Inline-block displays an element as an inline-level block container. Block will display the element as a block in its own line. This applies only to the Typed Text element, and it is not available for the Before or After Text.
- Divi Builder Default: Default Text and Font style options provided by the Visual Builder.
Cursor
These options can be used to stylize your Typing Cursor, but they will not affect the output if Hide Typing Cursor is set to YES
- Divi Builder Default: Default Text and Font style options provided by the Visual Builder.
Other Options
- Divi Builder Default: Default Sizing, Spacing, Border Styles, Box Shadow, Filters, Transform, and Animation provided by the Visual Builder.
Note
Default settings, sub-settings, and options used in all Divi Builder Modules are not described or included in our documentation and they are referred as Divi Builder Default throughout our guides to indicate that the options included are those provided by default by/or in the Visual Builder. If you need help learning to work with Divi Visual Builder, please visit Elegant Themes Documentation.