Diseño visual con el editor de WordPress

Antes de abordar cualquier trabajo de diseño visual con el editor de WordPress debemos tener en cuenta ciertos aspectos que afectan sobremanera al trabajo de edición y diseño: en primer lugar, las circunstancias en que se encuentra el sitio web; a continuación, las limitaciones Inherentes al actual editor; por último, las restricciones que imponen los temas.

Cuándo hay que rediseñar un sitio web

El rediseño de un sitio web es un proceso complejo que puede representar muchas horas de trabajo Por tanto, conviene plantearse seriamente en qué circunstancias merece la pena embarcarse en esa tarea, ya que, a menudo, el rediseño no es más que una parte de un proceso más amplio de cambios y actualizaciones. A continuación detallamos algunas de las circunstancias más habituales, con las orientaciones correspondientes.

• Cuando el sitio web no funciona bien o presenta errores. Este es probablemente el peor escenario posible, pues las causas de este comportamiento pueden ser muchas y a menudo no fáciles de resolver si no medía el asesoramiento de un experto. Por tanto, mucho antes de plantearse cualquier trabajo de diseño, habrá que realizar un análisis técnico a fondo, y actuar en función de sus resultados.
• Cuando el sitio web tiene un aspecto y funcionalidad desfasados. En la mayor parte de los casos, esta situación obligará a un cambio de tema y un rediseño a fondo de todo el sitio.
• Cuando el sitio web no se comporta bien en dispositivos móviles o tabletas. Esta situación no es sino una variante de la anterior, pero la hemos desglosado por la importancia que desde hace años tiene la experiencia de navegación en dispositivos móviles. Como en el punto anterior, cualquier mejora de diseño probablemente pase antes por un cambio de tema, lo cual, a su vez, puede exigir muchas e importantes modificaciones del sitio web.
• Cuando el aspecto y funcionalidad del sitio son aceptables, pero existen aspectos inadecuados. En la mayor parte de estos casos, los fallos se deben a prácticas incorrectas, que habrán de ser identificadas y corregidas.
• Cuando el aspecto y funcionalidad del sitio son aceptables, pero se pretende hacerlo más funcional y atractivo. Esta es la situación en la que vamos a centrarnos en este curso, y para ello veremos cómo se pueden rediseñar algunas de las páginas clave de un sitio web, como por ejemplo la página de inicio, algunas páginas especiales, etc.

Qué conviene rediseñar

Tal como hemos indicado en artículos previos, recomendamos que los trabajos de rediseño de un sitio web determinen, al menos en un principio, unos objetivos modestos y factibles que puedan alcanzarse en un periodo de tiempo relativamente breve y con un esfuerzo razonable.

De acuerdo con este principio operativo, las demostraciones y prácticas que vamos a realizar en esta primera sesión del curso se centrarán en el diseño de una nueva página estática, destinada a convertirse en la página de inicio del sitio web.

Esa página puede mantenerse en estado de borrador todo el tiempo que sea necesario, y solo se publicará y configurará como página de inicio del sitio (desde el menú Ajustes> Lectura), cuando hayamos cobrado suficiente confianza en las técnicas y procedimientos de diseño visual que proporciona el editor de WordPress.

Limitaciones del editor de WordPress

Es preciso tener muy en cuenta que el editor de bloques de WordPress: está limitado por el momento a la edición del contenido de las entradas y las páginas. Esto significa que el editor no puede utilizarse para modificar varios elementos clave de un sitio web, a saber:

• La cabecera.
• El pie de página.
• Los menús.
• Las áreas de widgets y los widgets.
• Las páginas de archivo o índice, y las páginas especiales, como la página de error 404.
• Las plantillas de páginas y entradas.

Si nos vemos en la necesidad de rediseñar esos elementos, tendremos que utilizar técnicas y herramientas especiales, que abordaremos en la cuarta y quinta sesiones de este curso.

El futuro del editor de WordPress

La situación que hemos descrito en el párrafo precedente va a cambiar de forma radical en un tiempo relativamente breve. De hecho, está previsto que la edición basada en bloques pueda llegar a utilizarse en todas las demás áreas de WordPress. En esta dirección avanza el desarrollo del plugin Gutenberg, cuyas últimas versiones ya incluyen, aunque todavía de forma experimental, la capacidad de utilizar la edición con bloques en el diseño global del tema. Un panorama muy sugestivo del estado actual de la evolución de la edición mediante bloques es el que describen estos dos artículos: Cómo crear un tema con bloques desde el editor – La revolución llega por fin a WordPress. y WordPress en 2020 – Lo que nos espera … quieras o no.

El problema de los temas

Además de las limitaciones propias del editor de WordPress, la tarea de rediseño de un sitio web puede verse entorpecida por otro obstáculo: que el tema utilizado en el sitio web no sea compatible con las innovaciones propias del nuevo editor de WordPress y su enorme variedad de bloques.

En efecto, si el tema no es compatible con esas innovaciones, resultará imposible utilizar muchos de los bloques más vistosos y elegantes, como por ejemplo las imágenes de anchura completa o las imágenes de fondo. Mejor dicho, se podrán utilizar, pero no tendrán el efecto apetecido sobre la apariencia del sitio web; en algunos casos, hasta es posible que tengan un efecto negativo.

Desde un punto de vista conceptual, la solución a este problema es fácil: sustituir el tema por otro que esté actualizado y sea plenamente compatible con el nuevo editor. Sin embargo, esa alternativa a veces puede ser imposible de abordar, porque obliga a un rediseño completo de todo el sitio.

Situación de los temas de la familia Genesis

Aunque el framework Genesis es plenamente compatible con el editor de WordPress, no todos los temas-hijos basados en Genesis permiten obtener todo el partido posible de sus bloques. Conviene elegir, por tanto, un tema moderno que asegure la mayor compatibilidad posible, y de aquí que para las prácticas de este curso vayamos a utilizar el tema hijo Magazine Pro, el cual nos ofrece una compatibilidad máxima con el editor.

En cuanto a los plugins de colecciones de bloques, que abordaremos en la tercera sesión del curso, hemos optado por seleccionar el plugin Atomic Blocks porque se integra perfectamente con los temas de la familia Genesis. Y no solo eso: algunos de los temas más modernos permiten configurar páginas espectaculares basadas en los bloques de este plugin (si la marcha del curso lo permite, haremos alguna demostración de esta técnica).

Por último, los temas de la familia Genesis se comportan razonablemente bien en conjunción con los plugins Elementor y Elementor Pro. Es cierto que su integración mutua no es perfecta, pero las dificultades que puedan derivarse del uso conjunto de estas tres piezas pueden superarse con un esfuerzo relativamente pequeño.