< All Articles

Morph Text

Avatar Morph 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:

  1. Create/Edit a Page/Post that uses Divi builder.
  2. Create/Edit a row.
  3. Click on Add New Module option; choose the Avatar Morph Text module.

Content Options

Morph Text

In this section you would be able to set your Morph text and settings. These are the available options:

  1. Morph Text: Text entered here will appear in the rotation queue. Please use single words only. 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 front-end `^\.
  2. Before Text: Enter the text that will appear before the Before Text.
  3. After Text: Enter the text that will appear after the Before Text.
  4. Enter Text Animation: Select the animation that will be played when the text enters the screen. See Animations List.
  5. Exit Text Animation: Select the animation that will be played when the text exits the screen. See Animations List.
  6. Word Transition Speed: How long should be waited before showing the next word.
  7. Word Animation Speed: How fast the word animation should be.
  8. Pause On Hover: Select whether or not the animation should paused on hover.

Design Options

Morph Heading
  1. Heading HTML Tag: Select the HTML tag for your text container.
    • H1
    • H2
    • H3
    • H4
    • H5
    • H6
    • div
    • span
    • p
Phrase Text

The font settings on this option will affect the entire heading. Use the individual font settings for each part of the heading below to customize them individually.

  1. Divi Builder Default: Default Text and Font styles provided by the Visual Builder.
Morph Text • Before Text • After Text

Each of the settings below applies to each option respectively and it will only affect that specific section.

  1. Text Background: Divi Builder default Background options. Adjust the background style by customizing the background color, gradient, and image.
  2. 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.
  3. Text Margin: Adjust margin to specific values, or leave blank to use the default margin.
  4. Text Padding: Padding adds extra space to the inside of the element, increasing the distance between the edge of the element and its inner contents.
  5. Builder Default: Default Text, Font styles, Round Corners, Border Styles, Border Width, Border Color, and Box Shadow provided by the Visual Builder.
Other Options
  1. Divi Builder Default: Default Sizing, Spacing, Border Styles, Box Shadow, Filters, Transform, and Animation provided by the Visual Builder.

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.

If you still stuck
Table of Contents