By visiting our site, you agree to our privacy policy regarding cookies, tracking statistics, etc. Read more

Avatar Divi
Buy Now

Documentation

Categories
< All Articles
Print

Text Notation

Updated01/12/2023
Avatar Text Notation
Demo

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 Text Notation module.

Content Options

Text Notation

In this section, you would be able to set your Notation text. These are the available options:

  1. Notation Text: The text that will be your notation text.
  2. Text Before: The text that will come before the notation text.
  3. Text After: The text that will come after the notation text.
Notation Style
  1. Type: Select your notation animation type. The available options are:
    • Underline
    • Box
    • Circle
    • Highlight
    • Strike Through
    • Crossed Off
    • Bracket
  2. Bracket Direction: Select the bracket direction Depends on the Type set to Bracket.
  3. Color: Define the color for the notation effect.
  4. Stroke Width: The Stroke Width defines the thickness of the annotation.
  5. Iterations: Define how many times the notation will be drawn.
  6. Duration (Seconds): Define how long it will take for the notation animation to complete.
  7. Multiple lines: Enable to have the ability to annotate inline content that can span multiple lines.
  8. Animate on Scroll: Should the notation animation be animated when the browser windows scrolls. The following options will become available if this option is set to YES.
    1. Viewport Position: How much the user must scroll before the notation animation starts.
    2. Viewport Delay (Seconds): How long should the notation 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

Notation HTML Tag
  1. Notation HTML Tag: Set the HTML tag for your Notation Text.
    • H1
    • H2
    • H3
    • H4
    • H5
    • H6
    • div
    • span
    • p
Notation Phrase

The Text and Font settings and styles on this option will affect the entire Notation Phrase. Use the individual font settings for each part of the Notation Text below to customize them individually.

  1. Divi Builder Default: Default Text and Font style options provided by the Visual Builder.
Notation Text • Before Notation Text • After Notation Text

The Text and Font settings and styles set inside these options will affect only affect that option respectively.

  1. Divi Builder Default: Default Text and Font style options 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.
p
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.

If you still stuck

We're always ready to help

Table of Contents