Te fijaste en ese hermoso efecto de tipeo en el inicio de mi web? Si no lo hiciste, has de estar ciego!

Jaajaja bueno, de verdad espero que lo hayas hecho porque la idea es que llame la atención.

Es un efecto muy chulo y realmente sencillo de aplicar a cualquier web pero, aún mas en Divi gracias a sus modúlos de código tan flexibles.

Antes de continuar, hay que darle las gracias a Rob Hobson de Divi Notes por el aporte original 😀

También te recomiendo que NO realices estas configuraciones en el Editor Visual, al menos en mi experiencia, todo se pegaba y rompía pero, en el backend no.

Ahora a lo nuestro:

1. Los módulos

Lo primero que debemos hacer es crear 3 modúlos de código como se muestra en la siguiente imágen:

2. El Html

En el primer módulo de código, vamos a ingresar el siguiente código html:

<div class='console-container'><span id='text'></span><div class='console-underscore' id='console'>_</div></div>

A menos que quieras cambiar la velocidad de tipeo, no hace falta modificar nada aquí.

3. El Javascript

El segundo módulo de códgo vamos a ingresar la parte mas importante: el javascript que hace toda la magia.

<script type="text/javascript">
// function([string1, string2],target id,[color1,color2])
 consoleText(['Divi Notes.', 'Divi Tips and Tricks', 'Made with Love.'], 'text',['#BD6983','tomato','lightblue']);

function consoleText(words, id, colors) {
 if (colors === undefined) colors = ['#fff'];
 var visible = true;
 var con = document.getElementById('console');
 var letterCount = 1;
 var x = 1;
 var waiting = false;
 var target = document.getElementById(id)
 target.setAttribute('style', 'color:' + colors[0])
 window.setInterval(function() {

 if (letterCount === 0 && waiting === false) {
 waiting = true;
 target.innerHTML = words[0].substring(0, letterCount)
 window.setTimeout(function() {
 var usedColor = colors.shift();
 colors.push(usedColor);
 var usedWord = words.shift();
 words.push(usedWord);
 x = 1;
 target.setAttribute('style', 'color:' + colors[0])
 letterCount += x;
 waiting = false;
 }, 1000)
 } else if (letterCount === words[0].length + 1 && waiting === false) {
 waiting = true;
 window.setTimeout(function() {
 x = -1;
 letterCount += x;
 waiting = false;
 }, 1000)
 } else if (waiting === false) {
 target.innerHTML = words[0].substring(0, letterCount)
 letterCount += x;
 }
 }, 120)
 window.setInterval(function() {
 if (visible === true) {
 con.className = 'console-underscore hidden'
 visible = false;

 } else {
 con.className = 'console-underscore'

 visible = true;
 }
 }, 400)
}
</script>

En esta sección es importante editar la línea 3. Allí están los textos que vamos a colocar y también sus respectivos colores.

Si no tienes ni idea de Javascript, solo tienes que seguir la misma secuencia, no es tan complicado 😉

4. El CSS

Si tienes tu Divi actualizado a una versión anterior a 3.0.85 (si no mal recuerdo) puedes eliminar la línea número 2, de hecho yo lo hice.

<style>
@import url(https://fonts.googleapis.com/css?family=Khula:700); 

.hidden {
 opacity:0;
}
.console-container {
 font-family:Khula;
 font-size:4em;
 text-align:center;
 height:30px;
 width:600px;
 display:inline;
 position:relative;
 color:black;
 top:0;
 bottom:0;
 left:0;
 right:0;
 margin:auto;
}
.console-underscore {
 display:inline-block;
 position:relative;
 left:10px;
}

@media (max-width: 750px) {
  .console-container {  font-size:2em; }
}

</style>

Aquí podrás modificar el tamaño del texto, la tipografía y si deseas agregar css adicional.

Y listo! ?

Eso es todo, le das a guardar y tendrás un hermoso efecto de tipeo para donde sea que lo quieras poner. Esa es la magia de Divi, la flexibilidad.

Si te resulto útil, me ayudas muchísimo compartiendo y si tienes dudas, los comentarios son todo tuyos, intentaré ayudarte en lo que pueda 😀