4 Cosas que debes evitar con el editor visual de WordPress


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.

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. Vamos a ver algunas de las cosas que debes evitar hacer en el editor visual, y por qué.

cabecera errores editor visual wordpress

Imagen de Fotolia - ©WavebreakMediaMicro

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.

captura editor visual color

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.

Si te interesa el tema blogging, tampoco te pierdas nuestra recopilación de los mejores recursos para blogs & bloggers

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.

captura texto justificado blog

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.

Multiplica el Nº de gente que lee tu blog

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.
¡Buenas! ¿Me dices tu nombre?

¡Un placer conocerte!

Apuntáte aquí y recibirás gratis una copia del eBook.

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.

captura texto estilizado

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.

Si tienes un blog WordPress, tampoco te pierdas nuestra recopilación de los mejores plugins de WordPress

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:

captura copiar de pagina web

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:

captura pegar en editor wordpress

… 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.

1 Star2 Stars3 Stars4 Stars5 Stars (4 valoraciones, media: 4,00 sobre 5)
Cargando…

Acerca del autor: Manuel Vicedo

Soy desarrollador y diseñador web, especializado en el uso de la plataforma WordPress para crear proyectos online y páginas web. Me gusta crear productos y servicios que funcionan, aportando valor al usuario y resolviendo los problemas que aparecen a diario. Trabajo a diario en CPOthemes, mi pequeña tienda de temas premium de WordPress.


Comentarios

  1. Muy buen aporte. Sinceramente solo una vez utilice Visual Composer y la verdad no me gusto mucho, prefiero utilizar Elementor.

  2. Gracias por el aporte

  3. Hola

    Estoy tradando de instalar un plugin para evitar que mi contenido sea copiado cual me recomiendas ya que lo pocos que he encontrado han sido de poca ayuda muchas gracias.

    • Berto López dice:

      Hola Andrés,

      No te sé decir ninguno y es prácticamente imposible evitar que te copien.

      Mi consejo es que dejes de dedicarle tiempo a esa preocupación porque ese tipo de sitios “copiones” no suelen llegar a ninguna parte, suelen estar más que penalizados por Google y es absurdo que hagan lo que hacen.

      ¡Un saludo!
      Berto

  4. Hola. Quería ver si me puedes ayudar. En el editor desapareció la parte visual y ahora solo tengo la ventana de texto para editar. ¿Qué hago?

  5. Hola.
    Una de las páginas de mi web en WPress tiene estructura de pregunta-respuesta.

    Las preguntas están en el color “corporativo” y 1-2 palabras de cada pregunta están en negrita. Las respuestas están respuestas en negro.

    Acabo de leer vuestros post y me habéis matado; la codificación del color ¿perjudicará mi SEO?

    Gracias.

  6. Hola!! Me pareció super interesante este post, pero tengo una duda, para crear un post que tamaño de letra en el título y en el contenido me recomiendan. Hay veces que veo blogs que el contenido tiene letra muy chica y no quiero que eso me pase. Espero su ayuda, gracias.

  7. Hola, tengo un problema. Tengo el tema “evolve” instalado en varias webs y este problema sólo me sucede en el blog de Onlineyoffline. Dentro del editor, cuando escribo una entrada el color del texto es blanco, es decir no lo veo, porque el fondo es blanco, sólo cuando lo selecciono veo que hay texto. Las entradas se publican con el color correcto, pero yo no veo el texto que publico, claro para resaltar negritas o poner colores o links es un gran inconveniente. Es dentro del wp-admin/post-new.php cuando yo escribo. Podéis saber cómo arreglarlo, no me pasa con otras webs que tienen el mismo tema. Mil gracias!!!!Me encanta el blog y la nueva actualización de la página. Un abrazo,

  8. Hola amigos tengo un problema con la plataforma de wordpress, y tengo casi listo mi website pero ahora no me deja editar los textos 🙁 ayuda.

  9. Diego Artola dice:

    Hola Berto y Manuel.
    Tengo una web en beta editada con el Visual Composer. Hoy me han desaconsejado que use este editor porque no es nativo de WordPress y podría dar problemas en caso de cambios. Tendría que descartarlo?

    • Si necesitas crear páginas con contenidos multimedia, yo recomiendo usarlo.

      No, no es nativo de WordPress sino que hace uso de los shortcodes que tiene la plataforma. Eso quiere decir que si lo desactivas se romperán.

      Pero al ser un plugin, no hay problema en utilizarlo– de hecho, no existe otra forma de maquetar contenidos directamente en WordPress que no sea con un page builder. Yo lo uso en todos mis proyectos avanzados y funciona bien con cualquier tema, y no me compromete el diseño del sitio.

      Sólo debes tener cuidado con los page builders que vienen integrados en un tema, como Divi.

  10. Buenos dias, en mi pagina no me deja editar con visual.. alguna suggerencia?

    • Berto López dice:

      Hola Blanca,

      No es normal, tiene pinta de que hay algún problema con tu instalación, aunque desde la distancia es imposible decir a qué se puede deber.

      ¡Un saludo!
      Berto

  11. Genial post. A mi me han desaparecido las opciones visual y texto después de actualizar mi php. ¿alguna idea de como volver a verlo por php 5.4?
    Gracias.

  12. Que opinas si usas un plugin shortcode o sino que un theme te venga con shortcodes en el editor, cuando te aburres de ese theme y decides cambiar a otro theme de otra empresa ya esos shortcodes del theme anterior ya dejan de funcionar, el texto te queda

     [ the_shortcode ] texto[ / the_shortcode ]

    esto hara que tu texto se vea mal, que puede decir sobre esto. Salu2

  13. Hola Manuel,

    Enhorabuena por el post, muy interesante, y la parte de “evita justificar tus párrafos” la desconocía, por lo tanto lo tendré en cuenta a la hora de escribir.

    Gracias por compartir todos estos detalles.

    Un saludo

  14. Juan Modesto Rodriguez dice:

    Es un excelente aporte. Hay mucha potencia, pero al mismo tiempo muchos inconvenientes en el editor, pero muchos usuarios no lo conocemos. Como usuario algo cuidadoso, me he acostumbrado a manejar las herramientas simples disponibles y creo que he evitado muchos problemas.

  15. Hola, Manuel. Sólo quiero decir que ojala todo el mundo siguiera estas recomendaciones, porque he visto cada cosa… y sería genial si esas páginas pueden ser de más amigable lectura, así que lo compartiré, saludos.

    PD: siempre suele entrarme la duda acerca de cuándo usar y cuando no usar negritas, a veces es un pequeño “inconveniente”.

    • El uso de la negrita es un poco ambiguo, pero eso es porque le podemos dar un uso bastante liberal. Se suele usar para resaltar algo y darle más atención, así que si tu crees que alguna frase, término o mención lo merece, se puede utilizar.

  16. No se porqué dices lo de justificar los texto, a mi me es mucho más cómodo y lo veo mucho más organizado en una estructura web.

    Lo de colorear los textos la verdad es que mata la vista ; )

    • Si sabes inglés, échale un ojo a esto:
      https://www.wmich.edu/writing/readability

      El consenso general es que justificar en web crea espacios que son incómodos para el ojo humano y son, aunque algunos no lo notemos, malos para la legibilidad. Esto se puede mitigar aumentando la longitud de línea, pero eso también tiene sus efectos adversos.

      Hay técnicas mucho más avanzadas en programas como Adobe InDesign, como por ejemplo el interletraje o el ajuste manual del kerning. El problema es que eso no lo tenemos aún en la web.

  17. Muy interesante el artículo para nosotros los que no sabemos de css o programación. Me queda una duda y es saber si sucede lo mismo con plugins tipo “composer”, com el visual composer. Buena suerte.

  18. Me ha encantado el post, porque precisamente ahora me estoy lanzando a utilizar un poco más el editor visual.

    La justificación de textos la dejé atrás hace tiempo, aunque sin saber muy bien por qué, y resistiéndome bastante; pero ahora he entendido por qué es conveniente hacerlo.

    Y en cuanto a los formatos del texto, creo que los voy utilizando más o menos bien. Igual que los diferentes niveles de títulos.

    Me ha gustado mucho este artículo, Manuel.

    Muchas gracias.

    • Me alegra que te haya servido! Aunque el editor es relativamente fácil de usar, aún le queda bastante por mejorar. Hasta la fecha, no conozco todavía ningún editor HTML que ejecute todo a la perfección.

  19. Muy buen artículo.
    Desconocía estos fallos y por suerte hasta ahora no he cometido ningún fallo de los que comentas (que raro) pero esta muy bien saberlo.

    Ademas que quisquilloso es Google por dios, se fija en todo.

    • Enhorabuena por ello entonces! El editor visual tiene sus particularidades, pero normalmente caminarás seguro si no abusas de las herramientas de estilizado.

      Yo por mi parte, sólo utilizo normalmente las cabeceras y la negrita, ya que me son suficientes para hacer los artículos más atractivos.

  20. No entiendo por que en todos los medios solo hablan de wordpress como si no existieran mas gestores de contenidos y solo sacan “la mega guía para wordpress” “los 12 plugins para wordpress” entiendo que sea un gestor muy fácil de manejar para alguien con pocos conocimientos, pero saben que aun hay mucho mercado que trabaja con joomla, drupal y otros, yo por ejemplo trabajo bajo joomla y me va muy bien y se enseñar a utilizarlo a alguien que no tenga conocimientos y también lo hacen muy bien y administran sus paginas. Lo único que creo es que se debería dar contenido de este tipo mas abierto no solo orientado al tema de moda, (o sera mi turno de ser el que de las charlas sobre joomla como experto)… saludos y espero no molestar a nadie igual muy buen post como todos los de este sitio

    • Berto López dice:

      Hola Rolando,

      No interpretes el hecho de que este sitio se centre en WordPress como desprecio hacia otras herramientas como Joomla, aquí simplemente nos centramos en blogging & WordPress porque es la temática del sitio, nada más.

      ¡Un saludo!
      Berto

    • La verdad es que se le da bastante atención a WordPress, pero seguramente es porque es el CMS más utilizado con muchísima diferencia.

      Personalmente, probé Joomla! y Drupal hace tiempo, y aunque puede que hayan mejorado sí que los encontré menos amigables para quien no sabe nada de programación. Eso no quiere decir que sean menos potentes, claro.

  21. Hola Manuel,

    lo de no usar distintos tipos de estilo y letra, o lo de colores chillones para no dañar el posicionamiento seo lo conociamos ya, pero lo de no justificar no teniamos ni idea, ha sido un gran aporte , muchas gracias por compartirlo. Saludos desde emprendetodos.

    • Más que por el SEO, es también para la gente que entre y lea tus contenidos. Recuerda, aunque Google te posicione bien, de nada te serviría si la gente se da media vuelta porque tus contenidos no convierten 😉

Deja un comentario

Para ello, por favor, sigue estas pautas, por respeto a nuestra comunidad (y a nosotros):

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

*

 

Rellena el formulario y accede a nuestro training rápido de pro-blogging

Aprenderás paso a paso y desde cero cómo usar las mejores técnicas, trucos y secretos de los top bloggers para dar el salto al siguiente nivel

Y todo 100% gratis :)