How to add an Animated Typing Effect to Your Divi WordPress Theme

by

Learn how to add a typing effect to your text in Divi using a Typed.js WordPress plugin. I also cover some styling of the blinking cursor.

It’s recommended you know HTML and CSS to take full advantage of this tutorial.

4 Comments

  1. Richard Bloom

    Hi John,
    Enjoyed the video and love the effect.
    One issue is that the text does not wrap on smaller screens but goes of the screen.
    Any idea how to make the text wrap John?

    Reply
    • John Wooten

      Hmm…it looks like some folks are using
      for a new line: https://github.com/mattboldt/typed.js/issues/363

      Or they try “/n” for the new line. That seems to work sometimes.

      There’s a thread here on the issue: https://github.com/mattboldt/typed.js/issues/24

      It looks like a couple folks asked about this on the plugin author’s page with no response. It may not be able to do what you’re wanting: https://wordpress.org/support/plugin/typed

      Cheers! =)

      Reply
      • Mike Allen

        Hey John!

        Thanks for this video. Works perfect.

        If I wanted to add some customization to this, such as, cursor blinking speed, and specifically, I’d like to control the delay and/or pause before the next string is typed?

        I set the back delay. I am referring after the string is deleted, that it pauses for say 1000 before it types the next string.

        Would you mind giving me some direction? The plugin tutorial you gave helped me, so thanks! I just wanted to see if you wouldn’t mind assist me adding some more customization options…

        Mike

        Reply
        • John Wooten

          Hi Mike! Thanks for the props!

          I’m not sure if a blinking speed is a value in the JS for this plugin. You may have to use the official JS version: https://github.com/mattboldt/typed.js/

          On that GitHub page, I did notice you can use “Type Pausing”. Using that, you could put a 1 second delay before it types the first word … which is sort of like a delay before it types the next string.

          Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.