TypewriterVersion 2.0.1

About 01Requirements 02Installation 03Software License 04

Divi-Modules –Typewriter 05

Content Tab 06Typewriter Content 07Typewriter Element 08Typewriter Element > Text 09Typewriter Element > Heading 10Typewriter Element > Existing 11Typewriter Trigger 12Typewriter Hiding 13Typewriter Timing 14Typewriter Cursor 15Typewriter Loop 16

Design Tab 17Text 18Quote 19

Advanced Tab 20Custom CSS 21

Examples 22Typewriter Actions 23Reserved Characters 25Existing Elements 26Typewriter Triggering 27

01 • Typewriter

AboutThis document provides an overview of available settings for the Divi-Modules – Typewriter module.

It discusses only those settings which are unique to this module and does not provide any information on settings which are common to most Divi modules.

For more information on common Divi module settings, please consult Elegant Themes online documentation.

Further more, this document provides only limited information on installing and activating the module. It assumes the reader is already familiar with these concepts and has some prior experience with both WordPress and the Divi Builder.

02 • Typewriter

RequirementsWordPress: Version 4.5 (or higher)PHP: Version 5.6 (or higher)MySQL: Version 5.0 (or higher)

Important: Requires the Divi Theme, Extra Theme, or Divi Builder Plugin to be installed and activated.

Divi-Modules plugins are created and tested using the latest Divi Theme and Builder versions. Backwards compatibility is not guaranteed, however, plugins should function normally with at least the following versions:

Divi Theme: Version 3.1 (or higher)Extra Theme: Version 2.1 (or higher)Divi Builder: Version 2.1 (or higher)

03 • Typewriter

InstallationAfter completing your Divi-Modules – Typewriter purchase, you will receive a confirmation email providing you with your Download Link and Software License Key. This information can also be found in your Divi-Modules Account Purchases and Downloads pages.

After downloading your copy of Divi-Modules – Typewriter, upload it to your website’s WordPress Dashboard and click Activate. More detailed instructions on Installing WordPress Plugins can be found online.

Note: If your copy of Divi-Modules – Typewriter was purchased from the Elegant Themes Divi Marketplace, these settings are not relevant to you. Instead, for product licensing, updates and support, see your Divi Marketplace Customer Dashboard.

04 • Typewriter

Software LicenseIn order to receive periodic updates, you will need to activate your Software License. To do this, navigate to the Divi-Modules menu item in your WordPress Dashboard. Go to the My Modules submenu, enter your Software License Key, and click Activate.

To manage your Software License, please login to your Divi-Modules Account Purchases page.

Note: If your copy of Divi-Modules – Typewriter was purchased from the Elegant Themes Divi Marketplace, these settings are not relevant to you. Instead, for product licensing, updates and support, see your Divi Marketplace Customer Dashboard.

05 • Typewriter

Divi-Modules –TypewriterDivi-Modules – Typewriter adds a feature-rich animated typing module to the Divi Builder. Type headings, paragraphs, blockquotes, buttons, and more with all the Divi styles, effects and filter settings you’re familiar with.

Typewriter settings are organised into three tabs:

ContentDesignAdvanced

The following pages explain the settings found in these tabs which make this module unique.

06 • Typewriter

Content TabThe Content Tab includes the following sections:

Typewriter ContentTypewriter ElementTypewriter TriggerTypewriter HidingTypewriter TimingTypewriter CursorTypewriter LoopLinkBackgroundAdmin Label

Those shown in blue contain settings which are unique to this module. Those in grey contain settings which are common to most Divi modules and are not discussed here.

For information on common Divi module settings, please consult Elegant Themes online documentation.

07 • Typewriter

Typewriter Content

ContentHere you can enter the text the Typewriter will type and Actions to control Typewriter functions, mid-typing. Content can include HTML markup. Actions include:

{{typespeed:#}} {{deletespeed:#}}{{erase}}{{delete:#}}{{pause:#}}{{break:#}}

> See page 23 for more details.

Line BreaksHere you can choose how the Typewriter handles line breaks in your Content. There are three options:

1. Respect line breaks and start a new line2. Ignore line breaks and continue typing3. Delete previous text before typing line

08 • Typewriter

Typewriter ElementHere you can choose the type of element the Typewriter will type into. There are three options:

1. Text2. Heading3. Existing

When Text or Heading are selected, the Typewriter creates a new page element which can be styled like any other Divi page element using the module’s styling options.

When Existing is selected, the Typewriter will type into an existing page element that you specify, such as a button. In this mode, no new page elements are created, so the module’s own styling options have no effect.

> See next page for more details.

09 • Typewriter

Typewriter Element > Text

Text TagHere you can choose the type of Text Element that will be created. There are two options:

1. p2. blockquote

When p is selected, the Typewriter will create an html <p> (paragraph) element. When Blockquote is selected, the Typewriter will create an html <blockquote> element .

LinkHere you can choose to make the element behave as a link.

Link URLHere you can enter a URL for the link.

Link TargetHere you can choose whether or not your link opens in a new window.

10 • Typewriter

Typewriter Element > Heading

Heading TagWhen Heading is selected, the Typewriter will create an html <h#> element. Here you can choose the heading-level of the element that will be created. There are six options:

1. H12. H23. H34. H45. H56. H6

LinkHere you can choose to make the element behave as a link.

Link URLHere you can enter a URL for the link.

Link TargetHere you can choose whether or not your link opens in a new window.

11 • Typewriter

Typewriter Element > ExistingWhen Existing is selected, the Typewriter will type into an existing page element that you specify, such as a button, menu, or even a form field.

In this mode, no new page elements are created, so the module’s own styling options have no effect.

> See page 25 for more details.

Element SelectorHere you can enter the unique CSS selector of the existing element you wish to target. (eg. #myElement h1)

If you are unfamiliar with CSS selectors and how to find them, start by reading this guide: https://www.w3schools.com/cssref/css_selectors.asp

Delete ContentHere you can choose how the Typewriter handles any pre-existing content found in the targeted element. Choose Yes to delete any pre-existing content before typing begins. Choose No to include any pre-existing content in the typed content.

12 • Typewriter

Typewriter Trigger

TriggerHere you can choose what triggers the Typewriter to start typing. There a three options:

1. Start typing immediatelyWhen this option is selected the Typewriter will start typing as soon as the web page is loaded.

2. Start typing when visibleWhen this option is selected the Typewriter will start typing only once the page element is visible within the browser.

3. Start typing when triggeredWhen this option is selected the Typewriter will start typing only after it is triggered by another Typewriter instance.

Trigger IDHere you can enter a unique Trigger ID for the Typewriter so that it can be triggered by another Typewriter instance.

Trigger OthersHere you can enter a comma separated list of Trigger IDs for other Typewriters you wish to trigger.

> See page 26 for more details.

13 • Typewriter

Typewriter Hiding

Hide ElementHere you can choose to hide the Typewriter element until typing begins. This is especially useful if you are using the Start Delay setting or the Start typing when triggered option and wish to hide the element until typing begins.

Element To HideThis setting is only available when typing into an existing page element. If left blank, the hidden element will be the same as the one being type into, as specified in the Element Selector field.

In some circumstances, you may wish to hide a different element. For example, you may be typing into #myElement h1 but wish to hide the complete #myElement object. Here you can enter the unique CSS selector of the element you wish to hide.

Fade-InHere you can choose to use a fade-in effect when showing the element.

Fade SpeedHere you can set the speed of the fade-in effect.

14 • Typewriter

Typewriter TimingHere you can set default speeds for Typewriter functions. The Type Speed and Delete Speed settings can also be changed mid-typing by using Typewriter Actions.

> See page 23 for more details.

Life-Like TypingHere you can choose to make the typing speed irregular.

Start DelayHere you can set the amount of time before typing begins.

Action DelayHere you can set the amount of time between Typewriter Actions.

Type SpeedHere you can set the typing speed.

Delete SpeedHere you can set the deleting speed.

15 • Typewriter

Typewriter Cursor

CursorHere you can choose whether to show a blinking cursor at the end of the typed text. There are three options:

1. None2. Text3. Icon

NoneNo cursor will be shown.

TextHere you can enter the text to be used for the cursor. If left blank the ‘|’ character will be used.

IconHere you can select an icon to be used for the cursor.

ColorHere you can set the color of the cursor.

SpeedHere you can set the blinking speed of the cursor.

16 • Typewriter

Typewriter Loop

Loop ContentHere the Typewriter can be set to continually loop. If set to Yes, when typing has finished the Typewriter will first delete all content and then restart typing from the beginning.

Loop DelayHere you can set the amount of time between loops.

17 • Typewriter

Design TabThe Design Tab includes the following sections:

TextQuoteSizingSpacingBorderBox ShadowFiltersTransformAnimation

Those shown in blue contain settings which are unique to this module. Those in grey contain settings which are common to most Divi modules and are not discussed here.

For information on common Divi module settings, please consult Elegant Themes online documentation.

18 • Typewriter

TextHere you can control the appearance of typed text. These settings are common to most Divi modules and are not discussed further here.

19 • Typewriter

QuoteWhen Blockquote is selected as the Typewriter Element, these additional settings allow you to control the blockquote’s border appearance.

20 • Typewriter

Advanced TabThe Advanced Tab includes the following sections:

CSS ID & ClassesCustom CSSVisibilityTransitionsPositionScroll Effects

Those shown in blue contain settings which are unique to this module. Those in grey contain settings which are common to most Divi modules and are not discussed here.

For information on common Divi module settings, please consult Elegant Themes online documentation.

21 • Typewriter

Custom CSSHere you can add custom CSS.

ContentHere you can add Custom CSS for the Typewriter content.

CursorHere you can add Custom CSS for the Typewriter cursor.

22 • Typewriter

ExamplesPlease note, the purpose of these examples is to provide some clarity on some of the more potentially confusing aspects of this module. Such as, Typewriter Actions, typing into Existing Elements and Typewriter Triggering.

However, as these functions are largely time-based, by far the best way to understand them is not to read about them, but to experiment with them yourself.

23 • Typewriter

Typewriter ActionsGeneral Typewriter behaviour is set by using the Line Breaks option and other settings in the Typewriter Timing section. However, if you wish to adjust Typewriter behaviour mid-typing, you can use Typewriter Actions.

Actions can be added to your content between two curly-brackets. Each Action has a long-form and short-form. Example: {{typespeed:100}} is the same as {{ts:100}}.

To set multiple Actions at a time, you can separate them by commas. For example {{p:500, ds:100, d:4}} would Pause the Typewriter for half a second, change the Delete Speed, and then Delete 4 characters.

> See opposite for all available Actions.> See next page for example.

{{typespeed:#}}Sets the typing speed in # milliseconds.Example: {{typespeed:50}}Short-form: {{ts:50}}

{{deletespeed:#}}Sets the deleting speed in # milliseconds.Example: {{deletespeed:100}}Short-form: {{ds:100}}

{{delete}}Deletes all previously typed text, letter-by-letter.Example: {{delete}}Short-form: {{d}}

{{delete:#}}Deletes # number of character from the previously typed text, letter-by-letter.Example: {{delete:10}}Short-form: {{d:10}}

{{erase}}Deletes all previously typed text immediately.Example: {{erase}}Short-form: {{e}}

{{pause}}Pauses the Typewriter by the time set in Action Delay in the Typewriter Timing section.Example: {{pause}}Short-form: {{p}}

{{pause:#}}Pauses the Typewriter by # milliseconds.Example: {{pause:1000}}Short-form: {{p:1000}}

{{break}}Types a line break.Example: {{break}}Short-form: {{b}}

{{break:#}}Types # number of line breaks.Example: {{break:3}}Short-form: {{b:3}}

24 • Typewriter

Typewriter ActionsFor the example opposite, the Typewriter would:

Type: HelloPause: 100 millisecondsType: I’m the Divi-Modules – Typewriter.Type: 1 x Line Break.Type: I can take your textPause: 100 millisecondsType: and type it!Type: 2 x Line BreaksPause: 200 millisecondsSet: Typing Speed to 20 millisecondsType: I can type FAST...Set: Typing Speed to 300 millisecondsType: or very SLOWLY.Type: 1 x Line BreakSet: Typing Speed to 70 millisecondsType: And I can PAUSE...Pause: 1000 millisecondsType: and DELETEPause: 250 millisecondsDelete: 10 charactersPause: 250 millisecondsType: and CONTINUE.

In the example above we are using the {{break}} Action to enter line breaks. We could also have manually entered line breaks directly into the content and set the Line Breaks option below to Respect line breaks and start a new line.

Notice also the use of HTML (<strong>, <em>, <span>, etc…) to style the content.

25 • Typewriter

Reserved CharactersContent can included HTML markup, which means certain characters are reserved and should not be used. These are:

Less-than: <Greater-than: >Ampersand: &Quote: “Apostrophy: ‘

Instead, in order to display these reserved characters, you can use the custom ‘escape’ characters shown below:

Less-than: {{lt}}Greater-than: {{gt}}Ampersand: {{amp}}Quote: {{quot}}Apostrophe: {{apos}}

1 10 {{lt}} 502 50 {{gt}} 103 Salt {{amp}} Pepper4 {{quot}}This is a quote{{quot}}5 {{apos}}This is a another quote{{apos}}

Example

10 < 50

50 > 10

Salt & Pepper

"This is a quote"

' This is a another quote '

Will display as…

26 • Typewriter

Existing ElementsTo type into an existing page element, such as a button, do the following:

1. Add a button module to the Divi Builder.

2. Give the button a unique CSS ID. (eg. myButton)

3. Add a Typewriter module to the Divi Builder. The Typewriter module must appear after the button module for this to work.

4. Set the Typewriter Element to Existing and enter the button’s unique CSS ID into the Element Selector field. (eg. #myButton)

In the example shown opposite, the Typewriter’s Delete Content settings is set to No. Therefore, the button’s own text will be typed before any text in the Typewriter’s own Content field.

27 • Typewriter

Typewriter TriggeringAny Typewriter instance can trigger another Typewriter instance to begin typing when it finishes.

In the Typewriter that you wish to BE triggered:

1. Under Trigger, select Start typing when triggered.

2. Under Trigger ID, enter a unique identifier for the Typewriter. (eg. Typewriter-B)

In the Typewriter that you wish to DO the triggering:

3. Under Trigger, select Start typing immediately or Start typing when visible.

4. Under Trigger Others, enter the Trigger ID of the Typewriter you wish to trigger. (eg. Typewriter-B)

In the example opposite, Typewriter-A will start typing when it becomes visible on the page. Typewriter-B will start typing when Typewriter-A finishes.

> See next page for another example.

Typewriter-A

Typewriter-B

28 • Typewriter

Typewriter TriggeringTo trigger more than one Typewriter instance at a time:

Under Trigger Others, enter a comma separated list of Trigger IDs for the Typewriters you wish to trigger. (eg. Typewriter-B, Typewriter-C, etc…)

In the example opposite, Typewriter-A will start typing when it becomes visible on the page. Typewriter-B and Typewriter-C will start typing when Typewriter-A finishes.

> See next page for another example.

Typewriter-A

Typewriter-B Typewriter-C

29 • Typewriter

Typewriter TriggeringTypewriters can be set to trigger in series, (ie. one after the other).

In the example opposite, Typewriter-A will start typing when it becomes visible on the page. Typewriter-B will start typing when Typewriter-A finishes. Typewriter-C will start typing when Typewriter-B finishes.

Typewriter-A

Copyright © 2020 · Divi-ModulesDivi is a registered trademark of Elegant Themes, Inc.This product is not affiliated with or endorsed by Elegant Themes.