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.

La entrada Tres técnicas para el diseño visual se publicó por primera vez en Curso de WordPress 2020.

El porqué de la selección de Atomic Blocks

Entre las razones que nos han movido a seleccionar este plugin para utilizarlo en los sitios web de los centros dependientes del Departamento de Educación del Gobierno de Navarra, así como en las prácticas de este curso, se cuentan las siguientes:

• Tiene una excelente calidad, objetivamente mensurable de acuerdo con cualquiera de los criterios aplicados por el repositorio oficial de plugins de WordPress:
  • Es compatible con la última versión de WordPress.
  • Los usuarios le han otorgado una muy buena valoración, con 4,5 estrellas sobre 5; casi el 75% de valoraciones ha concedido al plugin la máxima puntuación.
  • El plugin registra más de 40.000 instalaciones.
  • Se actualiza frecuentemente.
  • Se ha traducido el español. Todavía no se ha traducido al euskera.
• Es compatible con la versión de PHP instalada en los servidores del Departamento de Educación.
• Presenta una excelente relación entre facilidad de uso y resultados obtenidos, así como una gran estabilidad y ausencia de conflictos o incompatibilidades graves.
• Ha sido programado por una empresa perteneciente al mismo grupo que se encuentra detrás del desarrollo del framework Genesis, lo cual asegura una integración sin fisuras con los temas de esta familia. De hecho, vatios de los temas más recientes permiten importar contenido basado en los bloques del plugin Atomic Blocks, a través del mecanismo de los denominados starter packs.
• Atomic Blocks dispone de una documentación muy bien elaborada (aunque para nuestro gusto demasiado escueta), que constituye un recurso formativo de gran calidad.

Algunos defectos del plugin Atomic Blocks

No todos los aspectos del plugin Atomic Blocks pueden considerarse positivos. De hecho, podemos anotar unos cuantos defectos:

• La documentación disponible es un tanto espartana, aunque de calidad indiscutible.
• El Interfaz de configuración de los bloques no es traducible al español. Véase, a este respecto, el hilo de los foros de WordPress dedicado a la traducción al español del plugin Atomic Blocks.
• El soporte en los foros de WordPress no parece todo lo sólido que cabría esperar.

Recursos sobre el plugin Atomic Blocks

Aunque a lo largo de esta tercera sesión del curso realizaremos varias prácticas de construcción de páginas con Atomic Blocks, aconsejamos a los asistentes que tengan a su alcance los siguientes recursos, con los que podrán afianzar los conocimientos y habilidades adquiridos:

• El sitio oficial del plugin, con documentación, un blog con noticias y tutoriales, demostraciones de los bloques, etc.
• Foro de soporte del plugin, en el repositorio oficial de WordPress.
• Sitio de desarrollo en GitHub. Lo más interesante para la mayoría de los usuarios es la documentación sobre uso y desarrollo del plugin.
• Y los demás materiales y recursos que mencionamos en el siguiente artículo de esta sección.

La entrada El plugin Atomic Blocks se publicó por primera vez en Curso de WordPress 2020.

Los bloques del plugin Atomic Blocks

A continuación enumeramos los quince bloques de la colección, con enlaces a sus correspondientes demostraciones, todas ellas publicadas en la página oficial del plugin:

1. Bloque de secciones y diseños (demostración).
2. Bloque de columnas avanzadas (demostración).
3. Bloque de boletín de noticias (demostración).
4. Bloque de precios (demostración).
5. Bloque de cuadrícula de entradas (demostración).
6. Bloque de contenedor (demostración).
7. Bloque de testimonios (demostración).
8. Bloque de aviso inline (demostración).
9. Bloque de acordeón (demostración).
10. Bloque de iconos de compartir (demostración).
11. Bloque de llamada a la acción (demostración).
12. Bloque de botón personalizable (demostración).
13. Bloque de espaciador y divisor (demostración).
14. Bloque de perfil de autor (demostración).
15. Bloque de letra capitular (demostración).

Las demostraciones de estos bloques son más elocuentes con respecto a su propósito y funcionalidades que ninguna explicación. No obstante, aprenderemos más sobre estos bloques, así como sobre sus opciones de configuración y procedimientos de uso, cuando practiquemos con ellos.

Prácticas con los bloques de Atomic Blocks

A lo largo de esta tercera sesión del curso realizaremos diversas prácticas con los bloques de Atomic Blocks. Estas demostraciones y tareas están detalladas en dos artículos de esta misma sesión: Creación de sitios nuevos con Genesis y Atomic Blocks, y Uso de los bloques de Atomic Blocks.

La entrada Funcionalidades de Atomic Blocks se publicó por primera vez en Curso de WordPress 2020.

Los temas de la familia Genesis y Atomic Blocks

En todos los temas de la familia Genesis (y en prácticamente cualquier otro tema para WordPress que sea compatible con el nuevo editor) se puede crear contenido con los bloques del plugin Atomic Blocks. Ahora bien, hay algunos temas-hijo de Genesis que cuentan, además, con la capacidad de generar contenido, de forma automática, con los bloques aportados por este plugin. Esto se logra mediante un sistema denominado One-Click Theme Setup, o “configuración del tema con un clic” que hace posible completar la configuración de un tema mediante un mecanismo tan simple como el de hacer clic sobre un botón.

Algunos temas, además, disponen de los llamados starter packs, que son paquetes constituidos por un conjunto de plugins y de ficheros que funcionan a modo de plantillas. Durante el proceso de “configuración del tema con un clic”, el usuario puede seleccionar uno de estos paquetes de inicio y determinar así el tipo de contenido que desea crear para su sitio web.

Cuando se activa uno de estos “paquetes de inicio” o “paquetes de arranque”, el tema descarga los plugins necesarios (Atomic Blocks entre ellos), y se configura a sí mismo a partir de las plantillas prediseñadas con tal propósito. De este modo, se puede crear un sitio completo, totalmente diseñado y configurado, en unos pocos minutos. A lo largo de la tercera sesión del curso, haremos una demostración de este procedimiento sobre un sitio de nueva creación que no tiene ningún contenido previo.

Temas que permiten la configuración con un clic

En el momento de escribir este artículo, los temas que disponen de la capacidad de configuración con un clic y, en ciertos casos, también de la capacidad de seleccionar el “paquete de arranque”, son los siguientes:

1. Agent Foused Pro.
2. Authority Pro.
3. Course Maker Pro.
4. Essence Pro.
5. Hello Pro.
6. Magazine Pro. Este es el tema que estamos utilizando en este curso, en los blogs de práctica de los alumnos.
7. Monochrome Pro.
8. Navigation Pro. Y este es tema que vamos a utilizar en la demostración de creación de sitios nuevos con Genesis y Atomic Blocks.
9. Recipe Blogger.
10. Sample Child.
11. Revolution Pro.

Demostración de la configuración de temas en un clic

La configuración de temas en un clic y el uso de los paquetes de inicio están descritos con todo detalle en el artículo How you can set up your next web design project in <30 seconds with Genesis child themes… Really!. , en el que se incluye un screencast de demostración. Por otro lado, el profesor del curso llevará a cabo una demostración de esta funcionalidad en un sitio nuevo, con el objetivo de presentar las potencialidades de esta técnica.

Algunas desventajas de la configuración de temas en un clic

La configuración de los temas en un clic y los starter packs son funcionalidades diseñadas para que se apliquen a sitios nuevos, recién creados, que no tienen contenido previo. Aplicarlas a sitios web que ya tienen contenido puede ser causa de diversos problemas y conflictos:

• La estructura y apariencia del sitio se modifican, porque se publican nuevos menús y nuevas disposiciones de páginas.
• El sitio recibe nuevos plugins, que pueden resultar poco adecuados o incluso inconvenientes.
• La disposición y apariencia de los nuevos contenidos pueden ser poco coherentes con los artículos ya existentes.
• El idioma de los nuevos contenidos (inglés) obliga a un esfuerzo añadido de modificación del sitio.

A nuestro modo de ver, el uso de la configuración en un clic y los paquetes de inicio no solo resulta demasiado invasivo si se utiliza en sitios con contenido previo, sino también poco controlable. No negamos su utilidad y pertinencia en determinados casos, pero nos parece que un usuario acostumbrado a trabajar con bloques y que conozca el funcionamiento de los temas de la familia Genesis puede utilizar otras técnicas que le garanticen un control más preciso del contenido. En este sentido, creemos que una alternativa perfectamente viable podría ser la de exportar e importar bloques en formato JSON, que tratamos en detalle durante la segunda sesión del curso.

La entrada Integración entre Atomic Blocks y Genesis se publicó por primera vez en Curso de WordPress 2020.

Sitios web de demostración

La demostración se realizará con un sitio nuevo y recién instalado, creado ex profeso para tal propósito, en el que se activará el tema Navigation Pro. El sitio presenta las siguientes características:

• Se encuentra dentro de la misma plataforma de blogs de formación en la que se han dado de alta los sitios de práctica de los alumnos. Es, por tanto, un sitio funcionalmente idéntico a los demás.
• No tiene ningún contenido: ni entradas, ni comentarios, ni páginas.
• Carece de menús y de widgets.
• Solo tiene la configuración básica necesaria para que pueda funcionar correctamente.

En qué consiste la demostración

La demostración de creación de un sitio nuevo basado en las funcionalidades de la configuración de temas en un clic y los paquetes de inicio comprende las siguientes fases o etapas

• Presentación del sitio nuevo, sin ningún tipo de contenido.
• Activación del tema Navigation Pro.
• Descripción de la funcionalidad de configuración de tema en un clic y de los paquetes de inicio.
• Selección de uno de los paquetes de inicio.
• Presentación y análisis crítico de los resultados del proceso.

Tal como ya hemos indicado en el artículo precedente, esta tarea de creación de sitios nuevos no la llevarán a cabo los alumnos y alumnas del curso, pues presenta ciertas dificultades técnicas que hacen poco aconsejable su aplicación masiva en los blogs de práctica.

No obstante, hemos creado y publicado un videotutorial en YouTube que explica, paso a paso, la técnica utilizada, así como sus ventajas e inconvenientes. Aunque los alumnos del curso no deban practica este procedimiento en sus propios sitios, siempre pueden ver el tutorial y comprender así en qué consiste la técnica utilizada.

La entrada Creación de sitios nuevos con Genesis y Atomic Blocks se publicó por primera vez en Curso de WordPress 2020.

Funcionamiento general del plugin Atomic Blocks

Los alumnos y alumnas del curso no deben sentirse abrumados ante la variedad y aparente complejidad de los bloques de este plugin; de hecho, para una persona habituada a trabajar con el editor actual de WordPress, el uso de los bloques de Atomic Blocks no es difícil, pero requiere práctica, paciencia y mucha atención a los detalles.

Lo primero que vamos a hacer es mostrar el funcionamiento general del plugin una vez activado, y para ello vamos a presentar sus bloques y la forma de acceder a ellos. El screencast que incluimos a continuación muestra cómo hacerlo.

Uso de las secciones y los diseños

La forma más sencilla y productiva de comenzar a trabajar con los bloques de Atomic Blocks es utilizar el botón de Layouts, que aparece en la parte superior del editor de WordPress. Una vez que se instala y activa el plugin Atomic Blocks, cuando pulsemos sobre este botón se abrirá una ventana modal que muestra una serie de diseños organizados en tres pestañas:

• Sections, que equivalen a secciones de página.
• Layouts, o diseños completos de varios tipos de páginas.
• Favorites, o favoritos. Esta pestaña aparece vacía hasta que marquemos un diseño o sección como favorito, para lo cual hay que hacer clic sobre el icono con forma de corazón que vemos bajo cada diseño.

Si hacemos clic sobre cualquiera de los diseños que acabamos de mencionar, ese diseño se incluirá en el editor de WordPress, y podremos comenzar a trabajar y experimentar con él, tal como nos muestra el siguiente vídeo:

Quienes se desenvuelvan con comodidad en inglés, también pueden consultar estos otros dos videotutoriales, que explican cómo utilizar los diseños (layouts):

Prácticas con diseños y bloques de Atomic Blocks

Con el fin de demostrar algunas de entre las muchas posibilidades que ofrece este plugin, vamos a realizar ejercicios con dos elementos prediseñados (la sección de cabecera, y la de miembros del equipo) y con uno de los bloques más distintivos del plugin, el de cuadrícula de entradas.

Sección de cabecera

La primera de las secciones con las que vamos a trabajar, denominada Cabecera héroe, está formada a su vez por un bloque contenedor de Atomic Blocks (AB Container), dentro del cual se insertan otros bloques que ya conocemos:

• Bloque de titular.
• Bloque de párrafo.
• Bloque de botón.

El bloque contenedor dispone de opciones que permiten determinar la imagen de fondo, el color de superposición y su opacidad, el margen exterior y el margen interior («relleno» o «padding»), etc. Haciendo un uso inteligente de estas opciones, es muy fácil crear bonitas y expresivas imágenes de cabecera, tal como muestra este screencast:

Sección de miembros del equipo

Podemos repetir el procedimiento con otro elemento prediseñado, que en este caso será el de la sección Miembros del equipo. Cuando lo insertemos, veremos que este es un diseño mucho más complejo, formado por una jerarquía de bloques anidados (columnas avanzadas, contenedor, cajas de perfil de autor, etc.), lo cual permite crear diseños muy sofisticados. Al principio puede parecer complicado manejar esta estructura, pero una vez que practiquemos con ella no resultará tan difícil.

Bloque de cuadrícula de entradas

El tercer elemento de Atomic Blocks con el que vamos a practicar no es un diseño predefinido, sino uno de los bloques más potentes de toda la colección, que se llama AB Post And Page Grid. Como,su nombre indica, este bloque permite generar cuadrículas de entradas muy elegantes y vistosas, que se pueden utilizar para crear listados de artículos, organizados por tipos de contenido, fechas, categorias, etc.

Utilizados en lugares estrategicos del sitio web, como por ejemplo la página principal, este bloque de cuadrículas es capaz de dar a cualquier sitio web un toque muy elegante y profesional.

Otros bloques de Atomic Blocks

Dado el escaso tiempo de que disponemos, es imposible mostrar cómo se utilizan todos los bloques de este plugin. No obstante, los vídeos que ofrecemos a continuación permitirán que los alumnos y alumnas del curso se hagan una idea cabal de todas sus posibilidades y afiancen sus habilidades en el uso de los bloques de Atomic Blocks.

La entrada Uso de los bloques de Atomic Blocks se publicó por primera vez en Curso de WordPress 2020.

Esta actividad es algo diferente de la primera y la segunda. En efecto, en lugar de proponer un modelo de diseño que debe reproducirse al pie de la letra, la tercera actividad del curso está mucho menos acotada. Su objetivo será, como siempre, el de crear una página web, en este caso con los bloques propios del plugin Atomic Blocks. Ahora bien, en vez de precisar los bloques que hay que utilizar, estableceremos unas condiciones mucho más generales, que describimos a continuación.

Descripción de la tercera actividad del curso

Los alumnos y alumnas deberán elaborar y publicar una página web, de acurdo con las siguientes condiciones:

1. Crear una nueva página web y guardarla como borrador. La página no debe tener barra lateral, y hay que ocultar su título, tal como se explicó en la descripción de la actividad 1.
2. El contenido de la página es irrelevante, pero su diseño debe procurar ser elegante, armonioso y funcional. Se puede utilizar cualquier generador de texto tipo «lorem ipsum», o se puede utilizar contenido real, a gusto de cada cual.
3. Estructurar la página en al menos 3 secciones diferentes.
4. Utilizar en las secciones antedichas al menos 5 bloques diferentes del pluigin Atomic Blocks. Dado que algunos bloques de este plugin requieren configuraciones especiales, solo deberán utilizarse cinco bloques de entre los siguientes:
   • Bloque de secciones y diseños (demostración).
   • Bloque de columnas avanzadas (demostración).
   • Bloque de cuadrícula de entradas (demostración).
   • Bloque de contenedor (demostración).
   • Bloque de testimonios (demostración).
   • Bloque de aviso inline (demostración).
   • Bloque de acordeón (demostración).
   • Bloque de llamada a la acción (demostración).
   • Bloque de botón personalizable (demostración).
   • Bloque de espaciador y divisor (demostración).
5. Además de los bloques de Atomic Blocks, se puede utilizar cualquier otro bloque de WordPress que se considere necesario.
6. Combinar bloques de anchura completa y bloques de anchura limitada, de forma que la página sea armoniosa.
7. Utilizar no más de tres colores diferentes en el texto, titulares, botones y colores de fondo. Por supuesto, las imágenes pueden tener los colores que se consideren más convenientes, pero se aconseja utilizar imágenes que tengan una gama cromática compatible con los colores utilizados en los bloques.
8. Publicar la página web creada.

Recursos para realizar la actividad

El mejor recurso para realizar correctamente la actividad es tener a mano la documentación del plugin Atomic Blocks y sus ejemplos de uso. Además de las demostraciones de los bloques que ya hemos enlazado, conviene repasar los siguientes enlaces:

• Demostración del tema Atomic Blocks, que permite ver algunos diseños muy inspiradores, así como ejemplos de uso de los bloques.
• Fichero de ayuda del plugin (en inglés), con explicaciones de su uso y ejemplos.
• Entradas del blog de Atomic Blocks dedicadas a algunos de sus bloques más característicos (en inglés).
• Videotutoriales sobre Atomic Blocks, tanto en español como en inglés, que hemos recopilado en el artículo sobre el uso de este plugin.
• Para quien no pueda leer el inglés o tenga muchas dificultades con esta lengua, recomendamos utilizar extensiones como Traductor de Google (navegador Chrome), que permiten traducir cualquier página web. La traducción no es perfecta, desde luego, pero puede ser de gran ayuda. Existen extensiones parecidas para otros navegadores.

Envío de la actividad

Una vez publicada la página, hay que enviar su dirección al profesor, junto con una breve descripción de las secciones de la página, los bloques de Atomic Blocks utilizados y las dificultades y problemas observados durante la realización de la tercera actividad del curso.

Como siempre, el envío de la tarea deberá realizarse mediante el formulario de contacto de este mismo sitio web.

La entrada Tercera actividad del curso se publicó por primera vez en Curso de WordPress 2020.