Cómo crear efecto Typed (o texto que se escribe solo) En WordPress
¡Buenos días! En este vídeo-tutorial vamos a ver cómo crear el efecto Typed en WordPress, o efecto de una frase o de palabras que se escriben solas en nuestra pantalla. ¡Vamos allá!
El efecto que vamos a implementar está basado en la librería Typed JS de Matt Boldt, pero en este caso lo haremos con un plugin ya que resulta mucho más práctico.
Veamos los pasos que hemos seguido el en vídeo:
Instalamos el plugin Typed JS
Vamos a utilizar el plugin Typed JS así que lo instalamos y lo activamos como con cualquier otro plugin.
Creamos el shortcode del efecto
Una vez instalado se nos crea un nuevo Post Type llamado Typed, así que nos dirigimos ahí y creamos un nuevo post (que corresponde a un nuevo shortcode con este efecto).
Ahí el plugin nos permite indicar qué frases o palabras se van a escribir y borrar, y también varias opciones de velocidad de escritura y algunos detalles visuales.
El plugin tiene una limitación y es que no permite borrar frases parcialmente, es decir, si por ejemplo queremos que se escriban 3 palabras, se borre una, y se escriban dos más, no lo permite. En la Academia Empresiona veremos cómo implementarlo de manera manual y tener el control total sobre este efecto.
Mostramos el Typed en la web
Una vez configurado el shortcode y guardados los cambios, nos llevamos el shortcode y lo insertamos en el lugar donde queremos que se escriba el texto.
Mostramos el efecto con una palabra fija
En el vídeo ponemos lo siguiente para mostrar una palabra fija, y que el resto se escriba y se borre después (para compensar un poco la limitación del plugin):
<h2>Somos [typed id='3721']</h2>De esta manera el texto se considerará una sola frase, en este caso un solo H2, pero por defecto la parte de Typed aparecerá debajo del “Somos” porque a nivel de CSS no está preparado para mostrarse en la misma línea. Lo corregimos con el siguiente código:
.typed-div-3721 {
display: inline
}Échale un vistazo a este post si necesitas ver cómo insertar CSS en WordPress.
