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.
Here is my variation of the pen I mentioned earlier:
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.
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
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.
Support Divi Notes
Divi Notes started as a way to document my own WordPress and Divi web design/development journey and, to my delight, has grown to become a helpful resource to many other Divi users out there. If you’ve found Divi Notes to be useful in your journey, I’d appreciate it if you would consider supporting me using the form below.