En este curso vamos a explicar tres técnicas de diseño visual diferentes, destinadas a elaborar diseños de páginas web de gran impacto. En primer lugar, veremos cómo se utilizan los bloques nativos del editor de WordPress (sesiones 1 y 2) . A continuación, utilizaremos Atomic Blocks, un plugin que sirve para mejorar el editor mediante una colección de bloques, capaz de crear diseños más complejos y vistosos (sesión 3). Por último, haremos uso de dos plugins de maquetación visual, Elementor y Elementor Pro, que proporcionan una enorme libertad y potencia para diseñar no solo páginas individuales, sino un sitio web completo sesiones 4 y 5).
Las técnicas que acabamos de esbozar responden a un proceso creciente de complejidad conceptual y técnica. En todo caso, la organización y metodología del curso parten de un conocimiento que este curso da por supuesto: el manejo básico de los bloques del editor de WordPress. A partir de este punto, el curso se irá adentrando progresivamente en terrenos desconocidos para la mayoría de los asistentes, pero que al mismo tiempo ofrecen un gran potencial de crecimiento y mejora.
Uso de los bloques nativos del editor de WordPress
El nuevo editor incorporado a la versión 5 de WordPress, denominado Gutenberg, no es un maquetador o diseñador de páginas en sentido estricto, pero lleva camino de serlo. En el momento de publicar este artículo, con WordPress en su versión 5.3.2, el editor ya cuenta con un buen número de bloques que permiten crear diseños muy funcionales y atractivos.
La primera sesión del curso la dedicaremos precisamente a realizar prácticas con varios bloques de gran impacto visual:
- Fondo.
- Espaciador.
- Medios y texto.
- Grupo.
- Columnas.
- Galería de imágenes.
- Botón.
Uso de colecciones de bloques adicionales
El editor de WordPress no solo puede trabajar con los bloques proporcionados por la propia aplicación, sino también con bloques creados por diversos plugins y temas, e incluso con bloques diseñados por los propios usuarios.
La aparición de la versión 5 de WordPress y su nuevo editor ha traído consigo una auténtica proliferación de plugins de colecciones de bloques, que aumentan, casi indefinidamente, las capacidades de diseño isual del editor. En la segunda y tercera sesión del curso trabajaremos con una de las colecciones de bloques más potentes y mejor valoradas, Atomic Blocks.
Uso de sistemas de maquetación visual
Un sistema de maquetación o diseño visual propiamente dicho no solo permite diseñar a voluntad entradas y páginas (que es el ámbito para el que ha sido programado el editor de WordPress y en el que se mueven la mayoría de plugins de colecciones de bloques), sino también modificar radicalmente la apariencia de todo un sitio web.
Mediante el uso de un sistema de maquetación visual completo, el diseñador de un sitio web no está limitado por las características del tema, ya que puede modificar enteramente aspectos como su estructura, paletas de colores, tipografía, menús, áreas de widgets, plantillas de artículos, etc.
Las sesiones cuarta y quinta del curso estarán dedicadas a trabajar con uno de estos sistemas de maquetación visual, formado por Elementor y Elementor Pro. El primero es un plugin gratuito que se puede descargar e instalar libremente desde el repositorio de plugins de WordPress; el segundo, en cambio, es un plugin de pago cuya licencia ha sido adquirida por el Departamento de Educación del Gobierno de Navarra para su uso en los sitios web de los centros educativos.
