We take a look at adding Typed.js to Divi

The quick and dirty way.

As it says above, this is our very first tutorial on how to add Typed.js and it’s functionality into Divi.  Firstly, we have to (well, we don’t but we’d like to) give a shout out to Matt Boldt (the creator) So, let’s begin.

First you will need to download the Typed.js zip.  Just simply click this link and hit the download button. Once you have it downloaded, open up FileZilla (other programs are available but we’ve always used this one).

You will then need to connect to your site via FTP (settings will be within your control panel if you use our hosting services, or if you use cpanel you can follow these instructions to set up access. Once that’s done, and you’ve connected – unzip the file you downloaded from Typed.js.

Once you’ve done that, upload it to a folder of your choice but remember the file path. Once you’ve uploaded accordingly, you will need to go into the Divi > Theme Options > Integration and add the following code into the “add code to the < body>” box , but not before we’ve made a few changes to it.

The only change that you will need to make it adding your filepath to the script src for the typed.js file.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="ADD_YOUR_FILE_PATH_HERE/js/typed.js" type="text/javascript"></script>
<script>// <![CDATA[
$(function(){

$("#typed").typed({
// strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
stringsElement: $(‘#typed-strings’),
typeSpeed: 30,
backDelay: 500,
loop: false,
contentType: ‘html’, // or text
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); },
resetCallback: function() { newTyped(); }
});

$(".reset").click(function(){
$("#typed").typed(‘reset’);
});

});

function newTyped(){ /* A new typed object */ }

function foo(){ console.log("Callback"); }

// ]]></script>

That’s the hardest bit done. Now all we need to do is add a few more lines into your page or post and you’re all set.

<div class="type-wrap">
        <div id="typed-strings">
		<span>Typed.js is a <strong>jQuery</strong> plugin.</span>
		<p>It <em>types</em> out sentences.</p>
		<p>And then deletes them.</p>
		<p>Try it out!</p>
	</div>
	<span id="typed" style="white-space:pre;"></span>
</div>

 

And here’s the output!
Typed.js is a jQuery plugin.

It types out sentences.

And then deletes them.

Try it out!

Enjoy! Noou. P.S. If you want the words to keep looping – just change the loop: false to true (like we have for this demo).

Following our post about this post on Facebook, we had a great question from Michael – “And, if you wanted a static line of text followed by the typed.js, you would add the <div class> after?

So, here you go.

<div class="type-wrap">
    <div id="typed-strings"> 
        <span>Michael, </span> 
        <p>Ben, </p> 
        <p>Freddie, </p> 
        <p>You Beautiful Bunch Of Divi Lovers, </p> 
    </div>
    <span id="typed" style="white-space:pre;"></span>how you doing?
</div>