Cambiar el tamaño de la letra en WordPress (ayuda visual)

La accesibilidad web dejó de ser un lujo para convertirse en una expectativa básica de cualquier sitio profesional. Permitir que cada persona ajuste el contenido a sus necesidades de lectura no solo es lo correcto, sino que también mejora la experiencia general y reduce que la gente abandone tu página por no poder leerla cómodamente. En este post te muestro la solución completa, paso a paso, con el snippet listo para copiar y pegar.

¿Por qué cambiar el tamaño de la fuente en WordPress?

La accesibilidad es la eterna olvidada en los sitios web a nivel general, y, es de suma importancia poder implementar medidas para que la mayoría de las personas, sin importar su condición física, pueda acceder a tu sitio y consumir su contenido sin dificultad.

Es por ello que este tipo de implementaciones son buenas, y necesarias, sobre todo bastante recomendable si ya tenemos definido nuestro público objetivo.

Por ejemplo, permitir que el usuario cambie el tamaño de la fuente de un blog de manera nativa es muy útil si sabemos que este blog es visitado principalmente por gente mayor, donde en muchos casos, necesitan un tamaño de fuente más grande para poder leer sin dificultad el contenido.

Es allí donde esta solución toma todo el sentido del mundo y es por ello que la traemos para todos ustedes.

Lo mejor de todo es que usaremos un plugin gratuito que podrá generar esta funcionalidad, y además haremos la integración dentro de un blog o magazine hecho completamente con Divi. Pero antes veremos como cambiar el tamaño de la tipografía de manera global dentro de nuestro sitio si lo que buscas es simplemente cambiar el tamaño de fuente de manera global en Divi.

El impacto real de la accesibilidad en tu blog

Antes de meternos en la parte técnica, quiero que dimensiones por qué este pequeño ajuste vale tanto la pena. Una porción nada despreciable de quienes visitan un sitio tiene algún grado de dificultad visual, por la edad, por cansancio ocular o por condiciones permanentes. Cuando tu contenido no se puede leer cómodamente, esas personas simplemente se van, y tú ni te enteras de que perdiste ese lector.

Darle al usuario el control sobre el tamaño del texto es una de las formas más sencillas de mejorar la accesibilidad sin rediseñar todo tu sitio. No lo obligas a un tamaño grande que arruine el diseño para los demás: le das la opción de ajustarlo cuando lo necesita. Y hay un beneficio que muchos pasan por alto: cuando alguien lee con comodidad, pasa más tiempo en la página y es más probable que vuelva. Eso se traduce en mejores señales para los buscadores y un sitio que posiciona mejor.

Como cambiar la fuente de manera Global

Como sabes, puedes usar todos los tamaños y tipografías dentro del constructor visual de Divi, pero como siempre hemos recomendado, lo ideal es que puedas establecer un grupo de fuentes y tamaños estandarizados dentro de tu sitio con WordPress y Divi. Esto además, ayudará a mantener un estándar visual de diseño en tu sitio, que lo hará ver mucho más ordenado y profesional.

Hacer esto en Divi es muy sencillo. Solo debes ir a las opciones del personalizador de temas en WordPress y abrir el personalizador.

De esta manera, cada que coloquemos un módulo dentro de nuestro sitio hecho con Divi, siempre se usará el mismo tamaño de fuente.

Si deseas definir de manera global los tamaños de todos los textos dentro de Divi, como los textos de los párrafos, H1, H2, H3, etc., te recomiendo dominar el sistema tipográfico completo del constructor en el curso Divi 5 completo, donde verás cómo dejar todo estandarizado de manera global y con pocos clics.

Ahora que ya sabemos como cambiar la fuente de manera global, vamos a mostrar que pasa si queremos cambiar el tamaño de la fuente de manera dinámica para ayuda visual dentro del blog con WordPress y Divi.

Como cambiar la fuente a través de un plugin con Ajax

Este proceso es relativamente sencillo, y para ello, usaremos la ayuda del plugin Easy Font Resize que podremos encontrar de manera gratuita dentro de del repositorio de WordPress

El primer paso es instalar el plugin dentro de tu sitio web desde el apartado de Plugins > Añadir nuevo.

Una vez que el plugins esté instalado, vamos a hacer algunas configuraciones para su implementación dentro de Divi. Ve a Ajustes > Easy Font Resize y accede a la configuración del plugin, estando allí haremos los siguientes ajustes:

• Position: "Dont Display"
• Theme: "Dark"
• jQuery selector: "#content" (este será el ID que usaremos en el módulo de publicar contenido"
• Min/Max: 0.7, 1.8, 0.1 Respectivamente (estos valores son los que cambiarán el tamaño de la fuente)
• Y todo lo demás como viene por defecto

Una vez que tengamos todo esto definido, vamos a hacer la implementación en Divi.

Consejo: Esos valores de Min/Max (0.7, 1.8, 0.1) definen el rango y el salto de cada clic. Si tu público es principalmente gente mayor, prueba subir el mínimo a 0.9 y dejar saltos de 0.1 para que el cambio se note de inmediato sin pasos intermedios demasiado sutiles. Ajusta el rango a tu audiencia real, no al valor por defecto.

Como implementar el cambio de fuente en Divi

Para la implementación del cambio de fuente en Divi, es importante tomar en cuenta que debemos tener un layout del post personalizado con el Theme Builder, pues aquí es donde aplicaremos el ID correspondiente para que el botón ajax de cambio de fuente tenga su efecto.

¿Quieres crear un blog estilo magazine con Divi y dominar el Theme Builder? Checa el curso Divi 5 completo para construir layouts de post personalizados como este de principio a fin.

Lo primero es colocar el botón para cambiar el tamaño de fuente en un lugar visible, accesible y fácil de encontrar. Esto lo haremos usando el shortcode:

[wpavefrsz-resizer]

Este Shortcode lo podremos poner en un módulo de texto o de código, en el lugar del blog que queramos. Una vez lo ubiquemos, vamos a colocar el ID que hemos creado antes "#content" en el módulo publicar contenido para así conectar el plugin con Divi:

De esta manera, estaremos indicándole al plugin, que esté es el texto que queremos que cambie de tamaño cuando un usuario use los controles dinámicos de cambio de tamaño de fuente que hemos puesto a través del shortcode.

La lógica de la conexión es simple: el shortcode genera los botones que el usuario toca, y el ID "#content" le dice al plugin qué bloque debe agrandar o achicar. Si pones el ID en el contenedor equivocado, los botones aparecen pero no pasa nada al hacer clic. Por eso conviene asignar "#content" al módulo de publicar contenido del Theme Builder, que es el que envuelve el texto del artículo.

Con esto, queridos Divilovers, nuestro usuario lector podrá cambiar el tamaño de la fuente para ayuda visual en nuestro blog con WordPress y Divi.

Buenas prácticas de accesibilidad que complementan esta solución

El botón de cambio de tamaño es un gran primer paso, pero hay otros detalles que se complementan perfectamente con esta funcionalidad. El más importante es el contraste entre el texto y el fondo: de nada sirve que el usuario agrande la letra si los colores hacen que cueste distinguirla. Apunta a un contraste alto en el cuerpo del artículo y evita los grises demasiado claros sobre fondos blancos.

Otro factor clave es la altura de línea o interlineado. Un texto con líneas demasiado pegadas es agotador de leer, sobre todo cuando alguien aumenta el tamaño de la fuente. Configurar en Divi una altura de línea generosa, alrededor de 1.6 a 1.8 para el cuerpo de texto, hace que la lectura respire incluso en tamaños grandes. Y, por último, asegúrate de que el botón de cambio de tamaño sea fácil de encontrar y de tocar, especialmente en móvil: ubícalo cerca del inicio del artículo, con un área de toque cómoda para el dedo, y verás cómo la gente realmente lo usa.

Consejo: Prueba tu blog tú mismo en condiciones reales: aléjate de la pantalla, reduce el brillo y trata de leer un artículo completo. Si tú te incomodas, tus lectores también. La accesibilidad no se valida solo con herramientas: a veces basta con ponerte en el lugar de quien lee.

Preguntas frecuentes

¿El plugin Easy Font Resize es realmente gratuito?

Sí, Easy Font Resize está disponible de forma gratuita en el repositorio oficial de plugins de WordPress. Puedes instalarlo directamente desde el panel de administración en Plugins > Añadir nuevo, buscándolo por su nombre. No requiere licencia ni versión de pago para la funcionalidad de cambio de tamaño que vimos en este tutorial.

¿Funciona el cambio de tamaño en dispositivos móviles?

Sí, los controles generados por el shortcode funcionan en móvil siempre que los ubiques en un lugar accesible y con un área de toque cómoda. Te recomiendo probarlo en tu teléfono después de implementarlo, porque la experiencia de tocar el botón con el dedo es distinta a hacer clic con el mouse, y querrás ajustar la posición para que sea fácil de usar.

¿Por qué uso el ID "#content" y no otro?

El ID "#content" es simplemente el identificador que conecta el plugin con el bloque de texto que quieres que cambie de tamaño. Puedes usar el nombre que prefieras, siempre que coincida exactamente en la configuración del plugin (jQuery selector) y en el módulo de publicar contenido de Divi. Lo importante es que ambos apunten al mismo contenedor, que es el que envuelve el cuerpo del artículo.

Conclusiones

Easy Font Resize es un plugin muy útil a la hora de mejorar la accesibilidad de lectura en un blog dentro de nuestro WordPress, y en este videotutorial te enseñamos como implementar esta funcionalidad de manera sencilla dentro de nuestro blog hecho con Divi.

Lo mejor de esta solución es que combina lo gratuito con lo profesional: un plugin sin costo, integrado de forma limpia en un layout hecho con el Theme Builder, que mejora de verdad la experiencia de tus lectores. Te animo a implementarlo y a complementarlo con las buenas prácticas de contraste e interlineado que vimos.

Si lo implementas, déjame un comentario contándome cómo te fue, y si te quedó alguna duda sobre la conexión del ID o la configuración del plugin, pregúntame aquí abajo. ¡Nos leemos en el próximo tutorial!

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐