En esta guía te enseñaré cómo aplicar ese bonito efecto de máquina de escribir, también conocido como typewriter, en WordPress usando principalmente CSS, sin necesidad de plugins, y funcionará con cualquier tema (clásico, bloques) y todos los maquetadores (Gutengerg, Elementor, Divi, etc.).

Índice de contenidos

Elementos CSS fundamentales del efecto máquina de escribir

Antes de implementar los diferentes casos de uso que se me han ocurrido, es importante entender los componentes CSS que hacen posible este efecto y sus opciones de configuración.

Propiedades CSS principales

overflow: hidden

Para qué sirve: Oculta el texto que desborda del contenedor
¿Es necesaria?: Sí, es esencial para el efecto
Valor: Siempre hidden

white-space: nowrap

Para qué sirve: Evita que el texto se divida en múltiples líneas
¿Es necesaria?: Sí, mantiene el texto en una sola línea
Alternativas: normal para desactivar en responsive

width

Para qué sirve: Controla cuánto texto se muestra
Valores iniciales: 0 (inicio de animación)
Valores finales: 100% (final de animación)
Alternativas: Valores fijos como 300px para textos específicos

border-right

Para qué sirve: Simula el cursor de la máquina de escribir
Sintaxis: width style color
Ejemplo:3px solid #333, 2px solid rgba(255,255,255,0.75)
¿Es necesaria?: Puede omitirse para efecto sin cursor

letter-spacing

Para qué sirve: Ajusta el espaciado entre caracteres para efecto monoespaciado
¿Es necesaria?: No, pero mejora la estética
Valores típicos: 0.1em a 0.2em

Animaciones principales

@keyframes typing

Para qué sirve: Anima la propiedad width de 0 a 100%
Parámetros personalizables:
- Duración: 2s a 5s típicamente
- Steps: Número de «pasos» de escritura (20-60)
- Timing: Siempre steps(n, end) para efecto discreto

@keyframes blink-caret

Para qué sirve: Hace parpadear el cursor (border-right)
Mecanismo: Alterna entre transparent y color visible
Duración típica: 0.75s con infinite
¿Es necesaria?: Puede omitirse si solo quieres un cursor fijo

animation-delay

Para qué sirve: Retrasa el inicio de la animación
¿Es necesaria?: No, pero es útil para efectos escalonados
Valores: Segundos (1s, 2s, etc.)

Propiedades de control avanzadas

animation-fill-mode

Valores útiles:
- forwards: Mantiene el estado final
- both: Aplica estilos inicial y final
Función: Controla el comportamiento antes/después de la animación

animation-iteration-count

Por defecto: 1 (una sola vez)
Alternativas: infinite para repetición continua

steps() función

Sintaxis: steps(número, posición)
Número: Cantidad de «saltos» discretos (más alto = más suave)
Posición: end (recomendado) o start

Tabla resumen de elementos CSS del efecto typewriter

Propiedad	Necesaria	Función	Valores típicos	Personalizable
`overflow`	Sí	Ocultar desbordamiento	`hidden`	No
`white-space`	Sí	Una sola línea	`nowrap`	Sí (responsive)
`width`	Sí	Controlar revelación	`0` → `100%`	Sí
`border-right`	No	Cursor visual	`2-3px solid color`	Sí
`letter-spacing`	No	Espaciado chars	`0.1-0.2em`	Sí
`animation`	Sí	Controlar efecto	`nombre duración steps()`	Sí
`@keyframes typing`	Sí	Animación width	`0%` → `100%`	No
`@keyframes blink`	No	Cursor parpadeante	`transparent` ↔ `color`	Sí

Cómo añadir el CSS

Método 1: tema hijo (el mejor)
Añade el código en el archivo style.css de tu tema hijo.
Método 2: personalizador de WordPress
Ve a Apariencia > Personalizar > CSS adicional y pega el código.
Método 3: editor de temas
Ve a Apariencia > Editor de temas y añádelo al final del style.css (se perderá con actualizaciones).

Clase CSS manual para aplicar el efecto a voluntad

El primer método que te propongo de aplicar este popular efecto de máquina de escribir es manual, para que tú decidas a qué títulos en concreto aplicar el efecto, para destacar algún encabezado en especial.

Nota muy personal: Vamos a ver más posibilidades, pero empiezo precisamente por este método porque me parece el más razonable, más lógico, y controlable, pues este tipo de efectos de texto son muy vistosos, pero usados en su justa medida, pues su aplicación de manera global puede resultar cargante, excesiva.

Ahora bien, tú decides, por supuesto, y yo te voy a mostrar todos los métodos posibles, o al menos todos los que se me han ocurrido.

Dicho esto, que si me muerdo la lengua me enveneno, vamos por ello…

CSS efecto máquina de escribir para WordPress

/* Efecto typewriter como clase CSS */
.ayudawp-efecto-tecleo {
    font-family: 'Courier New', monospace;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 0.15em;
    animation: 
        typing 3.5s steps(40, end),
        blink-caret 0.75s step-end infinite;
    border-right: 3px solid rgba(255, 255, 255, 0.75);
}

/* Animación de escritura */
@keyframes typing {
    from { 
        width: 0; 
    }
    to { 
        width: 100%; 
    }
}

/* Animación del cursor parpadeante */
@keyframes blink-caret {
    from, to { 
        border-color: transparent; 
    }
    50% { 
        border-color: rgba(255, 255, 255, 0.75); 
    }
}

Cómo usarlo

Editor de bloques (Gutenberg):
- Selecciona el título/texto
- En el panel lateral derecho de ajustes del bloque > Avanzado > Clases CSS adicionales
- Escribe: ayudawp-efecto-tecleo
Editor clásico:
- Cambia a vista HTML
- Añade la clase: <h1 class="ayudawp-efecto-tecleo">Tu título</h1>
Elementor:
- Selecciona el widget de texto/título
- Pestaña Avanzado > ID y clases CSS > Clases CSS
- Escribe: ayudawp-efecto-tecleo
Divi:
- Módulo de texto/título
- Pestaña Avanzado > ID y clases CSS > Clase CSS
- Escribe: ayudawp-efecto-tecleo

clase css efecto tecleo editor bloques wordpress

clase css adicional efecto tecleo wordpress

Efecto automático en h1 en single

Lo siguiente que puede serte útil es aplicar el efecto máquina de escribir en los títulos de entradas, páginas, etc., y solo cuando estás viendo la entrada, página, etc., lo que se llama en single, no en los listados, portada, etc., que sería demasiado excesivo el efecto ¿no?

CSS para h1 únicamente en single

/* Solo en páginas individuales (post, page, product, etc.) */
.single h1,
.page h1 {
    font-family: 'Courier New', monospace;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 0.15em;
    animation: 
        typing-h1 4s steps(50, end),
        blink-caret-h1 0.75s step-end infinite;
    border-right: 3px solid #333;
    width: 100%;
}

/* Animaciones específicas para h1 */
@keyframes typing-h1 {
    from { 
        width: 0; 
    }
    to { 
        width: 100%; 
    }
}

@keyframes blink-caret-h1 {
    from, to { 
        border-color: transparent; 
    }
    50% { 
        border-color: #333; 
    }
}

/* Detener el cursor después de la animación */
.single h1:after,
.page h1:after {
    content: '';
    animation: stop-caret-h1 0.1s 4.75s forwards;
}

@keyframes stop-caret-h1 {
    to { 
        border-right: none; 
    }
}

Efecto en todos los encabezados, solo en single y al mostrarse en el viewport

Esta es una idea un poco especial, y es aplicar el efecto de máquina de escribir en todos los encabezados de un contenido, solo en single como antes, pero que no se active el efecto mecanográfico hasta que se muestre el encabezado en cuestión en la pantalla del navegador del visitante, en el viewport que se llama. Vamos, una flipada, pero pro a tope.

CSS para todos los encabezados únicamente al mostrarse y solo en single

/* Estilos base para todos los encabezados en singles */
.single h1, .single h2, .single h3, .single h4, .single h5, .single h6,
.page h1, .page h2, .page h3, .page h4, .page h5, .page h6 {
    font-family: 'Courier New', monospace;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 0.1em;
    border-right: 2px solid transparent;
    width: 0;
    transition: width 0.1s;
}

/* Clase que se añadirá cuando el elemento entre en viewport */
.single .typewriter-active,
.page .typewriter-active {
    animation: 
        typing-viewport 3s steps(40, end) forwards,
        blink-caret-viewport 0.75s step-end infinite;
    border-right: 2px solid #333;
}

@keyframes typing-viewport {
    to { 
        width: 100%; 
    }
}

@keyframes blink-caret-viewport {
    from, to { 
        border-color: transparent; 
    }
    50% { 
        border-color: #333; 
    }
}

/* Detener cursor después de animación */
.single .typewriter-finished,
.page .typewriter-finished {
    border-right: none;
    width: 100%;
}

JavaScript necesario

Se siente, pero en esta ocasión tendrás que añadir un poco de JavaScript mediante una función, en el functions.php, como plugin, usando un plugin de snippets, lo que prefieras, este:

/* JS para el efecto typewriter para todos los encabezados en single al mostrarse en el viewport */
function add_typewriter_viewport_script() {
    if (is_single() || is_page()) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            const headings = document.querySelectorAll('.single h1, .single h2, .single h3, .single h4, .single h5, .single h6, .page h1, .page h2, .page h3, .page h4, .page h5, .page h6');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('typewriter-active');
                        
                        // Remover cursor después de 3.75s
                        setTimeout(() => {
                            entry.target.classList.remove('typewriter-active');
                            entry.target.classList.add('typewriter-finished');
                        }, 3750);
                        
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            });
            
            headings.forEach(heading => {
                observer.observe(heading);
            });
        });
        </script>
        <?php
    }
}
add_action('wp_footer', 'add_typewriter_viewport_script');

Efecto en todos los encabezados en los archivos

Ahora vamos por todas y esto es lo que tienes que hacer para tener el efecto de máquina de escribir en todos los listados de un WordPress, los archivos, catálogo, blog, todo eso.

CSS para páginas de listado

/* Para home, archive, category, blog, etc. */
.home h1, .home h2, .home h3, .home h4, .home h5, .home h6,
.archive h1, .archive h2, .archive h3, .archive h4, .archive h5, .archive h6,
.category h1, .category h2, .category h3, .category h4, .category h5, .category h6,
.blog h1, .blog h2, .blog h3, .blog h4, .blog h5, .blog h6 {
    font-family: 'Courier New', monospace;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 0.1em;
    border-right: 2px solid transparent;
    width: 0;
}

/* Clase activa para viewport */
.home .typewriter-listing-active, .archive .typewriter-listing-active,
.category .typewriter-listing-active, .blog .typewriter-listing-active {
    animation: 
        typing-listing 2.5s steps(35, end) forwards,
        blink-caret-listing 0.75s step-end infinite;
    border-right: 2px solid #666;
}

@keyframes typing-listing {
    to { 
        width: 100%; 
    }
}

@keyframes blink-caret-listing {
    from, to { 
        border-color: transparent; 
    }
    50% { 
        border-color: #666; 
    }
}

/* Finalizado */
.home .typewriter-listing-finished, .archive .typewriter-listing-finished,
.category .typewriter-listing-finished, .blog .typewriter-listing-finished {
    border-right: none;
    width: 100%;
}

JavaScript para los archivos

De nuevo necesitamos algo de JS, este:

/* JS efecto typewriter para encabezados en archivos */
function add_typewriter_listing_script() {
    if (is_home() || is_archive() || is_category() || is_tag() || is_search()) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            const headings = document.querySelectorAll('.home h1, .home h2, .home h3, .home h4, .home h5, .home h6, .archive h1, .archive h2, .archive h3, .archive h4, .archive h5, .archive h6, .category h1, .category h2, .category h3, .category h4, .category h5, .category h6, .blog h1, .blog h2, .blog h3, .blog h4, .blog h5, .blog h6');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('typewriter-listing-active');
                        
                        setTimeout(() => {
                            entry.target.classList.remove('typewriter-listing-active');
                            entry.target.classList.add('typewriter-listing-finished');
                        }, 3250);
                        
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.1,
                rootMargin: '0px 0px -30px 0px'
            });
            
            headings.forEach(heading => {
                observer.observe(heading);
            });
        });
        </script>
        <?php
    }
}
add_action('wp_footer', 'add_typewriter_listing_script');

Variaciones adicionales

Efecto máquina de escribir solo en el primer h1 del contenido

.post-content h1:first-of-type,
.entry-content h1:first-of-type,
.content h1:first-of-type {
    font-family: 'Courier New', monospace;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 0.1em;
    animation: 
        typing-first 4s steps(45, end),
        blink-caret-first 0.75s step-end infinite;
    border-right: 3px solid #007cba;
}

@keyframes typing-first {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret-first {
    from, to { border-color: transparent; }
    50% { border-color: #007cba; }
}

Efecto typewriter con delay escalonado

Este efecto me encanta, queda super chulo.

/* Diferentes delays para crear efecto cascada */
.delay-typewriter h2:nth-of-type(1) { animation-delay: 0s; }
.delay-typewriter h2:nth-of-type(2) { animation-delay: 1s; }
.delay-typewriter h2:nth-of-type(3) { animation-delay: 2s; }
.delay-typewriter h2:nth-of-type(4) { animation-delay: 3s; }

.delay-typewriter h2 {
    font-family: 'Courier New', monospace;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 0.1em;
    animation: 
        typing-delay 3s steps(40, end) both,
        blink-caret-delay 0.75s step-end infinite;
    border-right: 2px solid #333;
}

@keyframes typing-delay {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret-delay {
    from, to { border-color: transparent; }
    50% { border-color: #333; }
}

Efecto typewriter para títulos de productos

Si tienes. una tienda también podemos aplicarle este bonito efecto a los títulos de los productos de WooCommerce.

/* Específico para productos de WooCommerce */
.single-product .product_title {
    font-family: 'Courier New', monospace;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 0.1em;
    animation: 
        typing-product 4s steps(50, end),
        blink-caret-product 0.75s step-end infinite;
    border-right: 3px solid #96588a;
}

@keyframes typing-product {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret-product {
    from, to { border-color: transparent; }
    50% { border-color: #96588a; }
}

Personalizaciones habituales muy interesantes

Cambiar velocidad

/* Más rápido: reduce el tiempo */
animation: typing 2s steps(40, end);

/* Más lento: aumenta el tiempo */
animation: typing 5s steps(40, end);

Cambiar color del cursor

border-right: 3px solid #tu-color-aqui;

Cambiar fuente

font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;

Quitar el cursor parpadeante

/* Solo animación de escritura */
animation: typing 3.5s steps(40, end);
border-right: none;

Solución de problemas

Problema: el texto se corta

Solución: aumentar el número de steps

animation: typing 3.5s steps(60, end); /* Aumenta de 40 a 60+ */

Problema: no funciona en móvil

Solución: añadir media queries

@media (max-width: 768px) {
    .ayudawp-efecto-teclado {
        white-space: normal;
        overflow: visible;
        animation: none;
        border-right: none;
    }
}

Problema: conflictos con el tema

Solución: usar selectores más específicos

body.single .entry-title.ayudawp-efecto-teclado {
    /* Tu CSS aquí */
}

Notas importantes

Rendimiento: el JavaScript solo se carga en las páginas donde es necesario
Accesibilidad: plantéate añadir prefers-reduced-motion para usuarios sensibles a animaciones
SEO: el efecto no afecta al contenido indexable, o sea, no le perjudica
Compatibilidad: funciona en todos los navegadores modernos
Responsive: se ajusta o desactiva en móviles según necesidad

Código para respetar preferencias de movimiento

@media (prefers-reduced-motion: reduce) {
    .ayudawp-efecto-tecleo {
        animation: none;
        border-right: none;
        overflow: visible;
        white-space: normal;
    }
}

Tabla resumen de implementaciones

Implementación	Activación del efecto	¿Necesita JavaScript?	Páginas objetivo	Activación
Clase CSS manual	Manual	No	Cualquiera	Al aplicar la clase CSS
H1 automático en single	Automática	No	Single (entrada/página)	Al cargar la página
Todos los encabezados en single	Automática	Sí (para detectar el viewport)	Single (entrada/página)	Al mostrarse
Todos los encabezados en los archivos	Automática	Sí (para detectar el viewport)	Todos los archivos	Al mostrarse
Primer H1 de la entrada	Automática	No	Cualquiera	Al cargar la página
Efecto escalonado	Manual	No	Con clase específica	Al cargar la página
Títulos WooCommerce	Automática	No	Productos	Al cargar la página

¡Pues ya estaría!

Espero que te sirva, que aproveches la guía, e incluso que la disfrutes practicando y aprendiendo este efecto de CSS tan chulo.

Aplicando los distintos métodos vas a conseguir aplicar donde quieras el efecto de máquina de escribir, o typewriter si prefieres llamarlo así, funcionando perfectamente en WordPress sin necesidad de plugins.