logooneasesoria4

¿Necesita una consulta gratuita?

Cómo añadir el efecto de escritura o tecleo automático en Divi @ Ayuda WordPress

Uno de los efectos visuales que más se ven actualmente en diversas webs es el de texto que se escribe automáticamente al llegar a la página o la sección correspondiente, algo que, sorprendentemente, no está incluido entre las animaciones que incluye el tema Divi, y mira que hay.

Al contrario que con otros efectos visuales, el efecto de tecleo o escritura considero que es muy interesante, pues es un efecto bastante minimalista, que atrae mucho la atención del visitante hacia lo que quieras comunicarle.

Afortunadamente puedes incluir fácilmente el llamado efecto typewriter o de tecleo si usas el tema Divi, de varias maneras…

Efecto de escritura en Divi sin plugins

Para mi, el mejoro método de añadir un bonito y llamativo efecto de tecleo si usas Divi, y en realidad cualquier tema, porque este truco vale para cualquier web y tema, es mediante un poco de código CSS, este:

/* Efecto typewriter */
.typewriter h2 { /* Cambia de h2 a otra etiqueta de texto a la que quieras aplicar el efecto */
overflow: hidden; /* Con esto evitamos que se muestre el contenido hasta que no empiece la animacion */
border-right: .15em solid orange; /* El cursor de escritura */
white-space: nowrap; /* Esto hace que el texto se mantenga an una sola linea */
margin: 0 auto; /* Efecto de scroll mientras se muestra el tecleo */
letter-spacing: .15em; /* Posible ajuste, ponlo a tu gusto */
animation: 
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
/* El efecto de escritura */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* El efecto del cursor de escritura */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}

Con este código, si aplicas la clase CSS typewriter h2 a cualquier texto, automágicamente se mostrará con ese efecto de tecleo o escritura tan mono.

Ya que estamos hablando de Divi, sería tan sencillo como editar el módulo de texto al que quieras aplicar el efecto y, en la sección de ajustes avanzados, añadir 2 cosas:

  1. typewriter en la caja de CSS de la sección de ID y clase CSS.
  2.  El código de arriba, cambiando la etiqueta HTML de h2 a la que estés usando en el texto (h1, h3, p, etc.)

Como puedes ver en estas capturas:

Fácil ¿eh?

Y el efecto es inmediato…

Hay otro modo de hacerlo sin plugins, mediante una combinación de JavaScript y CSS, pero me ha parecido un por demás cuando es tan fácil conseguir el efecto de tecleo solo con unas pocas líneas de CSS ¿estás conmigo?

Efecto de escritura en Divi con plugin gratuito

La otra posibilidad, si eres de a quienes aún se les hace bola lo del código, es usar un plugin, a ser posible gratuito, para conseguir ese mismo efecto de tecleo en Divi.

Hay muchos plugins de pago para este tipo de efecto en Divi, pero que yo sepa solo uno gratis: La versión gratuita de Supreme Modules Lite.

La parte buena es que esta versión gratuita de lo que es un plugin de pago, incluye entre sus funcionalidades gratis el efecto tecleo, o typewriter, que en el plugin se llama Typing Module.

efecto tecleo supreme typing module divi

El modo de usarlo es sencillo, se añade a tu página como cualquier otro módulo de Divi, configurando sus ajustes a continuación.

Lo mejor que tiene hacerlo con este plugin es que encontrarás montones de posibles personalizaciones, de tamaño, color, tipo de animación, cursor, comportamiento, tipografía, etc. La parte negativa es que para instalar este simple módulo necesitas el plugin completo, que añade otro montón de módulos que, quizás, quién sabe, igual no necesitas.

En cualquier caso el plugin hace lo que buscas, y lo hace bien, así que en ese sentido ninguna pega.

Y ya está ¿a que no era tan difícil? ¿a que ya no vas a cambiarte a Elementor Pro para tener el efecto ese de tecleo o escritura? 😀

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

¿Te gustó este artículo?

Déjanos tus comentarios..!

21 de noviembre de 2023

RECIBE

GRATIS

Recursos para tu web GRATIS.

En agradecimiento por haber leido nuestro blog te ofrecemos algúnos plugins, temas y asesoría para el desarrollo de tu sitio web.
Envía correo y espera respuesta...Gracias..!
baneranunciopluginsbest
Publicaciones Relacionadas
Abrir chat
One Asesoría
Hola 👋
¿Necesita cotizar una página o tienda online, cómo podemos ayudarle..?