Typing Text Effect Using Divi Code Modules

In the never ending quest to delight our clients and their customers, we are always on the lookout for something different, something special, so when I saw the Terminal Text Effect pen on codepen.com, I thought I must adapt it for Divi. So, if you’ve been looking to recreate that typewriter typing effect, here is an easy to follow tutorial that’ll have you typing away in no time.

The Example

Here is my variation of the pen I mentioned earlier:

How To

For simplicity sake I’m going to use three Code Modules on the page. You could probably just put it all together in one and you could also put the CSS and JavaScript into their proper places (your child theme’s stylesheet for the CSS and the JavaScript in the Integration tab of the Divi Theme Options) but for this tutorial I want to contain everything on same page and not have the CSS and JS load with all the other pages where it won’t be used. By the way, Divi Code Modules are amazing, have a look at the article “The Best Hidden Feature of Divi” by Andy Tran for his take on these little pieces of Divi awesomeness.

Before we begin, if you’re going to use the Divi Code Modules like I have, place three of them on your page. You should end up with something like this:

First The HTML

The HTML is short and sweet and looks like this:

Unless you want to change the blinking underscore character to something else, you shouldn’t need to edit this.

Next Up, The JavaScript

Now this is where all the hard work is done. Add the following JavaScript to the next code module or wherever you’ve decided you’d like it to go.

At this point, you’ll want to modify the third line by replacing the text and colours that I’ve specified with those you want to use.

Lastly, The CSS

Now that we’ve got the HTML and JavaScript in place, let’s add the following CSS to the last code module or to where every you prefer to put it:

This is where you’ll probably do the most tinkering to get it just the way you want it. It’s here that you’ll set the font, the font’s size, and the height and width of the container.

Update: I’ve added a media query to reduce the font size on mobile and have also changed the .console-container display property to inline.

The End

So with a little bit of HTML, JavaScript and CSS, you can create a fun and engaging effect on your next project. If you’d prefer not to place the JS on the same page, check out the Elegant Themes documentation on Using the Divi Theme Options for an alternative way of adding it.