Este post es un post de invitado de Manuel Vicedo. Manuel es desarrollador y diseñador web, especializado en WordPress para proyectos online y páginas web, y el creador de CPOThemes.
El editor visual WordPress es una herramienta sumamente flexible a la hora de crear tus contenidos. Gracias a él, no sólo puedes darle formato a tus textos y controlar a detalle todo el estilizado de una página, sino que además puedes crear verdaderas landing pages gracias al uso de shortcodes.
Imagen de Shutterstock - © WavebreakMediaMicro
Pero al ser una utilidad tan potente, también hay que hacer un uso responsable de ella. Crear contenidos de calidad no es cuestión de estilizar tus textos con todo lo que te ofrece, sino de aprovechar la flexibilidad que esta herramienta te da para facilitar la lectura a los visitantes.
¿Qué encontrarás aquí?
Veamos algunas de las cosas que debes evitar hacer en el editor visual, y por qué.
Evita colorear los textos en el editor visual de WordPress
Una de las opciones más potentes que tiene el editor visual de WordPress es el selector de colores. Gracias a ella, tienes la capacidad de darle cualquier color a tus textos a partir de una paleta RGB prácticamente ilimitada.
Sólo hay un problema con todo esto: también es una de las opciones que nunca deberías tener que utilizar.
El uso de textos coloreados en el editor visual de WordPress es un arma de doble filo.
El principal problema de estilizar textos con el selector de colores de WordPress es la consistencia. A diferencia de otros tipos de estilizado como el texto en negrita o cursiva, los colores no son una herramienta estandarizada o definida por el CSS de tu tema, sino que se insertan como código HTML directamente en tu texto:
Esto es un ejemplo
Tus páginas no sólo se ensuciarán con atributos CSS incrustados, sino que además serán mucho más difíciles de mantener.
Por ejemplo: si decides colorear el nombre de tu marca cada vez que aparece en una página con tal de darle un toque especial, tendrías que asegurate de que ese mismo color sea aplicado en todas las páginas para ser consistente.
Y si en algún momento en concreto quisieras cambiar la apariencia de esos colores en todo tu sitio, sería una tarea muy difícil de realizar porque los colores están incrustados directamente en tus contenidos.
Utilizar los colores personalizados del editor visual no es malo en sí; el problema es más bien el mantenimiento que conlleva, además de que no te beneficiará a nivel de SEO o de usabilidad.
Si quieres usar colores en el editor, mi recomendación es hacer uso de cualquiera de las demás etiquetas HTML: negrita, cursiva, subrayado, etc… Dado que son parte del estándar de HTML, podrás luego hacer cambios con CSS de forma global sin tener que retocar ninguno de tus artículos.
Evita justificar tus párrafos
Otra opción que suele ser utilizada más de lo normal es la de Texto Justificado. A muchos esta opción les recordará a Microsoft Word, en donde por regla general los documentos que creas suelen ir con textos completamente justificados para que ocupen todo el ancho disponible.
Sin embargo, la Web es un entorno completamente diferente al de los documentos imprimibles y tiene un conjunto de reglas para la usabilidad y la legibilidad algo peculiar.
En comparación con programas especializados para redactar documentos, los navegadores web no tienen tanta flexibilidad a la hora de controlar los párrafos de texto al detalle. No hay división automática de palabras, ni tampoco un ajuste del interletraje que permita hacer que un párrafo justificado sea igual de legible que uno normal.
Aunque este tipo de tecnologías está empezando a aparecer en algunos de los navegadores más modernos, aún queda mucho para que sea una opción viable.
No es lo mismo usar texto justificado en Word que en WordPress.
Al justificar un texto en la web, lo que estamos haciendo es repartir todo el espacio que sobra al final de una línea entre los todos espacios. De esta forma, las frases ocupan todo el ancho disponible y dan una forma de bloque más compacta. El problema es que al justificar los textos se puede perder mucha legibilidad, debido a que los espacios se vuelven inconsistentes y hacen que el texto sea más dificil leer de forma seguida y sin interrupciones.
A causa de esto, justificar los textos en WordPress muchas veces acaba dando un peor resultado que simplemente alineándolos a la izquierda. Esto ocurre bastante al utilizar palabras muy largas en espacios muy cerrados, como en columnas o artículos con poco ancho, donde los espacios pueden crear cortes muy visibles entre cada palabra.
Por el contrario, alinear los textos a la izquierda sin ningún tipo de justificado puede muchas veces ayudar a que sean más fáciles de leer. Debido a las diferentes longitudes de cada línea, los ojos del lector pueden recordar más fácilmente en qué línea se encuentran, facilitando la velocidad de lectura.
Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos:
- 77 Plantillas de títulos probadas que multiplicarán los clics.
- Sacaras infinitas ideas crear tus propios títulos.
- Con las palabras "mágicas" redactarás textos irresistibles.
- Vale para todo: blogs, tiendas online, redes sociales, etc.
Obtén tu eBook aquí
Apúntate a nuestra Zona VIP y descárgate tu eBook ya
Es 100% gratis 🙂
Evita solapar estilos
Ante la gran cantidad de opciones que tienes a tu alcance para estilizar tus páginas, puede que sientas la tentación de hacer uso de muchas de ellas para darle vida a tus contenidos– pero hay que tener cuidado con eso.
Cada uno de los elementos HTML que puedes utilizar en el editor visual tiene un uso semántico; eso quiere decir que etiquetas como la negrita, cursiva o incluso el subrayado han sido creadas para tener un significado muy particular, y que se deben tener en cuenta al usarlas en un texto. Por ejemplo, según las especificaciones de WHATWG:
- Los textos en negrita o <strong> se utilizan para dar importancia o urgencia a un fragmento de texto. Generalmente se utiliza para extraer alguna frase o información de un párrafo.
- Los textos en cursiva o <em> sirven para dar énfasis en una frase sin que necesariamente indique importancia, o que pueda ser leído en otro tono de voz.
- El estilo Dirección o <address> se utiliza para proporcionar información de contacto relevante a la página. A diferencia de lo que mucha gente piensa, esta etiqueta no tiene porqué contener una dirección postal.
Al redactar tus páginas, es importante tener en consideración lo que representan cada uno de estos elementos y hacer un uso correcto de ellos. En otras palabras, hay que evitar mezclar varios estilos diferentes sólo por su aspecto visual.
Si por ejemplo quieres hacer que tus titulares sean más visibles, no es buena idea utilizar la herramienta negrita para resaltarlos, o solapar varias etiquetas al mismo tiempo. En su lugar, puedes aprovechar las ventajas de CSS para modificar la apariencia o tamaño de los encabezados sin que esto afecte el markup de tus contenidos.
La mejor manera de implementar una estética y semántica coherente es con estilos.
Redactar artículos que son semánticamente correctos puede traer beneficios para tu página web. A medida que los motores de búsqueda se vuelven más avanzados, es posible que más adelante empiecen a hacer uso de estos elementos semánticos para posicionar las páginas web, y tengan en cuenta si se utilizan correctamente o no.
Un claro ejemplo de ello es el uso que tienen ahora las etiquetas H1-H6 para determinar la importancia de los contenidos, y cómo pueden influir en el posicionamiento de palabras clave de una página. Dentro de unos años, es posible que hagan un uso más extendido de las etiquetas HTML5 para determinar qué tipo de información contiene cada sección de un sitio web.
Evita pegar contenidos estilizados
Aunque TinyMCE– el software que da vida al editor visual de WordPress– procura mantener el estilizado de un texto al copiarlos de una ventana a otra, es muy probable que los resultados no sean óptimos. Debido a que cada procesador de textos WYSIWYG tiene su propia forma de gestionar los estilos que aplica a un texto, lograr una apariencia consistente al copiar y pegar es una tarea muy difícil.
Esto suele pasar también al copiar contenidos desde una página web, ya que es posible que durante el proceso de copia se seleccionen varias etiquetas HTML indeseadas como <div> y <span>. Por ejemplo, si intento copiar los contenidos de la siguiente página:
Al copiar de una página web se incluyen también elementos «indeseados» que no se ven como tales en la página…
Al pegar este pequeño párrafo no sólo aparecerán los contenidos de una forma muy diferente a los originales, sino que observando el código HTML se puede ver que hay muchas etiquetas <div> y clases CSS que pueden estorbar:
… el resultado es que estos elementos se pegarán junto con el texto en el editor de WordPress.
Siempre es recomendable que revises a fondo los contenidos que has pegado en el editor visual de WordPress antes de retocarlos, ya que es posible que te lleves alguna sorpresa. Puede que la hoja de estilos CSS de tu tema aplique afecte a estas etiquetas, provocando resultados inesperados.
Es preferible limpiar todos estos estilos, ya que en el peor de los casos puede que los estilos CSS de tu tema interfieran con los contenidos que has pegado, y descuadren el diseño por completo. La mejor forma de evitar esto es utilizar la opción de Pegar Como Texto, y realizar todo el estilizado con el propio editor visual.
Muchísimas gracias por tus consejos, Manuel.
Un favorcillo, por favor: ¿cómo le pones es suave línea a tus subtítulos? ¿Es necesario un plugin o con un poco de CSS (para novatos torpes 🙂 se podría conseguir?
Hola. Me ha servido mucho tu artículo. Sólo tengo una duda cuando hablar de «texto dirección» ¿a qué te refieres o cómo luce?, ¿Es el subrayado o entrecomillas o tachado?. Saludos
Muy buen aporte. Sinceramente solo una vez utilice Visual Composer y la verdad no me gusto mucho, prefiero utilizar Elementor.