Qué tipo de sitio vamos a diseñar

La naturaleza de un sitio web impone exigencias insoslayables y es, por tanto, un aspecto esencial que debemos tener muy en cuenta a la hora de abordar su diseño. Así pues, la primera tarea que hemos de afrontar es la de decidir qué tipo de sitio vamos a montar, y cuáles son los destinatarios que van a consumir sus contenidos.

En efecto, no es lo mismo el sitio web del centro, que el de un departamento didáctico, un blog de aula, un sitio monográfico o temático, un sitio web de contenido exclusivo para docentes, etc. Cada uno de estos sitios corresponde a una situación comunicativa distinta, y, en consecuencia, reclama funcionalidades y principios de diseño diferentes.

Qué funcionalidades ha de tener el sitio

Una vez identificado el sitio web que queremos o necesitamos, debemos identificar qué funcionalidades ha de tener, cuáles deben implementarse desde el principio y cuáles pueden esperar a un desarrollo posterior. Aunque sea de forma muy sumaria, este diseño funcional debe tener en consideración los siguientes aspectos:

1. Tipo de contenido predominante. Conviene decidir si el sitio va a estar basado en páginas (contenido estático), en entradas (contenido dinámico), o en una combinación de ambos tipos de contenido.
2. Estructura básica. Hay que precisar aspectos fundamentales de la estructura del sitio, como por ejemplo la presentación del contenido (cronológica, al estilo blog, o no cronológica), la organización de los bloques de contenido (número y orden de presentación de las columnas en que suelen organizarse las páginas web), la disposición de las áreas de widgets, la ubicación de los menús, la estructura y contenido de la cabecera y el pie de página, etc.
3. Tema que se va a utilizar. Cada tema impone una serie de condicionamientos de diseño que pueden llegar a ser muy estrictos (sobre todo en lo que concierne a las paletas de colores, la tipografía y el tamaño y proporciones de las imágenes), por lo cual conviene acertar desde un principio. Cambiar de tema en WordPress es una operación muy segura que no supone ningún riesgo de pérdida de contenidos, pero que puede ser muy gravosa en términos de esfuerzo dedicado a las tareas de diseño.
4. Funcionalidades básicas del sitio web. Es preciso identificar si las funcionalidades apetecidas se pueden montar solo con WordPress o hace falta instalar plugins. Algunas de las funcionalidades básicas de los sitios web destinados a centros educativos, como por ejemplo la configuración multisitio o el contenido bilingüe o multilingüe, deben implementarse desde el momento mismo de la instalación, ya que resulta difícil, o al menos muy laborioso, añadírselas a un sitio web ya existente.
5. Organización de los roles de usuarios y del trabajo de edición. Hay que decidir si el sitio va a tener muchos usuarios registrados o solo unos pocos, así como los roles propios de cada uno de ellos. También es preciso saber de antemano cuántos usuarios van a crear contenido (y con qué roles), ya que la organización del trabajo de edición tiene repercusiones decisivas en muchos aspectos de funcionamiento y la gestión del sitio.

De qué recursos disponemos

Después de identificar la naturaleza del sitio web y sus funcionalidades básicas, conviene evaluar con precisión el esfuerzo que va a invertirse en su elaboración, y ponerlo en contraste con los recursos humanos, organizativos y materiales de los que disponemos.

Este análisis resulta capital, sobre todo en organizaciones como los centros escolares, que por lo general no andan sobradas de recursos. Hay pocas cosas tan frustrantes como abordar una tarea para la que no se está preparado, o para cuya realización no se cuenta con los medios necesarios.

Algunos consejos

Una vez tomadas las decisiones a las que acabamos de referirnos en los epígrafes precedentes, es preciso adaptar el planteamiento de elaboración de un sitio web a ciertas recomendaciones prácticas, que en su mayor parte no son sino aplicaciones concretas del sentido común:

1. Consultar ejemplos y modelos previos, repasar tutoriales y videotutoriales, y preguntar a compañeros y a expertos, si se tiene acceso a ellos.
2. Definir la estructura del contenido y los aspectos básicos del diseño al viejo estilo, con lápiz, papel, y tiempo de reflexión. Lo primero que hay que decidir son las páginas fijas que debe tener el sitio (mejor que no sean muchas) y, luego las categorías o temas en que van a organizarse las entradas (es aconsejable que el número de categorías no sea excesivo, y que correspondan a temas cuyos respectivos ámbitos no se solapen entre sí). Una vez elaboradas y publicadas unas cuantas páginas, entradas y categorías, y solo entones, ya se puede abordar la elaboración de los menús.
3. Proceder con precaución y cautela. Aconsejamos encarecidamente elaborar borradores y hacer pruebas antes de publicar, sobre todo cuando se haga uso de técnicas y herramientas que no se dominan a fondo.
4. Personalizar solo los elementos que necesiten un “toque” especial. En la mayor parte de los casos, no hace falta diseñar específicamente todas las páginas y entradas de un sitio web (cuyo diseño ya está predefinido por el tema), sino solo aquellas donde tal proceder resulta aconsejable: la página de inicio, las llamadas landing pages, etc.
5. Dar primacía a la funcionalidad sobre los aspectos decorativos u ornamentales. Todo esfuerzo de diseño o rediseño debe estar enfocado a lograr una mejora de funcionalidad.
6. Aplicar el principio “menos es más”. Este principio no es solo ni principalmente de orden estético. De hecho, cuanto más claro, legible y limpio sea un sitio web, probablemente también sea más rápido al cargarse, y más eficiente desde un punto de vista técnico.
7. Tener muy presentes los principios de homogeneidad y coherencia del sitio web. Aunque Los elementos personalizados sean singulares, no deben ser contradictorios o heterogéneos con respecto al conjunto del sitio.
8. Diseñar, escribir y publicar pensando siempre en los visitantes del sitio. Hay que esforzarse por ponerse siempre en la mente de alguien que no conoce en detalle un sitio web y llega a este por primera vez. Una aplicación concreta de este principio es que el sitio web debe funcionar bien en todo tipo de dispositivos, sean ordenadores de escritorio, tabletas o móviles.
9. Rentabilizar los esfuerzos. Todos los sistemas de edición de páginas web modernos hacen un uso masivo de las técnicas de composición basadas en plantillas, elementos reutilizables y otros mecanismos semejantes, y por tanto hay que aprender a utilizarlas. Incluso la humilde técnica de copiar-pegar-modificar puede dar resultados espléndidos si se utiliza juiciosamente.
10. No caer en la ansiedad. Hay que proceder con calma y sensatez, y no pretender resolver todos los problemas a la vez. Las grandes dificultades a menudo se resuelven segmentándolas en obstáculos más pequeños, que se acometen sucesivamente.
11. Utilizar solo los plugins imprescindibles. Un número excesivo de plugins, o una inadecuada selección de estos, pueden afectar muy negativamente al funcionamiento de un sitio web.
12. Seleccionar un tema de calidad. Los temas de calidad profesional garantizan el cumplimento de muchas de las recomendaciones que acabamos de hacer, minimizan los esfuerzos necesarios para conseguir los objetivos propuestos y ayudan a dar a los sitios web un acabado impecable. El Departamento de Educación del Gobierno de Navarra aconseja a tal efecto los temas de la familia Genesis, que están disponibles, bajo pedido, para todos los centros que lo soliciten.

A lo largo de este curso, y en especial en los artículos pertenecientes a esta primera sesión, iremos concretando algunos de los principios y recomendaciones que acabamos de exponer.

La entrada Planteamiento general de la elaboración de un sitio web se publicó por primera vez en Curso de WordPress 2020.

El concepto de página o lienzo en blanco

Sin olvidar los conceptos convencionales del diseño de páginas web, que siguen siendo necesarios para entender su estructura y función, conviene que, a la hora de elaborar diseños más modernos e innovadores, pensemos más en términos de página en blanco (o lienzo en blanco), sobre el que podemos «pintar», más o menos libremente. Nuestra capacidad de «pintar» dependerá en gran medida de la potencia de las herramientas que manejemos, pero también, y sobre todo, de nuestro talento como diseñadores.

Pensemos, pues, en nuestras futuras páginas web no tanto como construcciones dependientes de un marco de referencia prefijado (el tema o plantilla), sino como espacios vacíos que vamos a organizar de acuerdo con nuestras necesidades funcionales, el contenido que pensamos insertar, y el diseño más apropiado para lograr los objetivos comunicativos y de diseño que nos hayamos marcado.

El concepto de cuadrícula

Como ocurre a muchos escritores cuando se ponen ante la hoja de papel en blanco, dibujar o pintar sobre un lienzo vacío genera a menudo una sensación de angustia, especialmente a los usuarios noveles, porque no saben por dónde empezar ni cómo manejar sus herramientas. Pues bien, para alejar de nosotros esta molestísima sensación y aproximarnos de forma eficiente a la realidad de un sitio web, aconsejamos añadir a la metáfora del «lienzo en blanco» otra metáfora visual y conceptual: la de «cuadrícula» o «rejilla».

Si concebimos nuestra página web como un espacio dividido en filas y columnas que se cruzan entre sí, enseguida podremos imaginar la cuadrícula formada por esa intersección. Esta idea de la página web organizada en una o varias cuadrículas nos ayudará sobremanera a diseñar los elementos constitutivos de la página e insertar contenido en ellos.

El concepto de cajas

Cada uno de los espacios delimitados por la intersección de las columnas y las filas de la cuadrícula imaginaria que acabamos de definir puede concebirse, a su vez, como una «caja», en la que podemos insertar diversos elementos de contenido. Pulsando sobre el botón que aparece a continuación podemos ver un ejemplo de este modelo de diseño:

En resumen, hemos de pensar en nuestra página web como un lienzo en blanco, sobre el que superpondremos una o varias cuadrículas. En cada cuadro de esas cuadrículas, es decir, en cada caja, insertaremos (o no) los elementos de contenido que nos hagan falta para lograr los objetivos planteados. A lo largo de las diferentes sesiones de este curso, y especialmente en las sesiones cuarta y quinta, aprenderemos las técnicas necesarias para conseguirlo.

La entrada Página en blanco, cuadrícula y cajas se publicó por primera vez en Curso de WordPress 2020.

Concepto visual de las secciones

Desde un punto de vista puramente visual o de diseño, y de acuerdo con nuestro modelo conceptual de cuadrícula, una sección equivale, grosso modo, a una fila. La sección puede tener cualquier altura, puede estar formada por una o varias columnas, y puede ocupar todo el ancho de la página o solo un determinado porcentaje de esta.

Una página web puede estar formada solo por una sección, pero lo más habitual es que esté formada por varias secciones. A su vez, las diferentes secciones de una página web pueden tener o no el mismo número de columnas. Por último, los bordes de las columnas de las diferentes secciones de una página web no tienen por qué coincidir verticalmente entre sí:

Concepto organizativo de las secciones

Una sección no es solo una fila o franja horizontal, sino un elemento dotado de una dimensión estructural y organizativa. Para hablar en sentido estricto de una “sección”, es necesario que este elemento desempeñe una clara función en el sitio web, tanto a nivel de diseño como de contenido.

Un ejemplo de este concepto puede verse en la página de inicio de este sitio web: dejando aparte el menú de cabecera, y el pie de página, que son elementos estructurales básicos equivalentes a secciones, el contenido de la página está organizado en seis áreas horizontales consecutivas (seis secciones): presentación, contenido, metodología, localización, calendario de las sesiones y profesor del curso. Las ultimas cinco secciones están enlazadas entre sí mediante un menú de anclaje vertical.

La entrada Secciones de una página web se publicó por primera vez en Curso de WordPress 2020.

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.

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.

La entrada Diseño visual con el editor de WordPress se publicó por primera vez en Curso de WordPress 2020.

¿Qué hago si no sé utilizar el editor de WordPress?

El manejo básico de las técnicas y procedimientos de uso del editor de WordPress es un contenido que se da por supuesto en este curso avanzado. No obstante, como es probable que los alumnos y alumnas alberguen dudas sobre algún punto concreto, les aconsejamos que tengan a su alcance los recursos y materiales del Curso de WordPress 2019, en el que se tratan por extenso casi todos los aspectos relacionados con el manejo del editor. También aconsejamos que consulten las páginas que la ayuda de WordPress.com dedica al editor de WordPress y sus bloques.

Bloques para diseño visual

Los bloques para diseño visual con los que vamos a trabajar en esta primera sesión del curso son los siguientes:

1. Fondo.
2. Espaciador.
3. Medios y texto.
4. Grupo.
5. Columnas.
6. Galería de imágenes.
7. Botón.

Bloque de fondo

El bloque de fondo (”cover”, en inglés, que significa ‘portada’) pertenece al grupo de bloques comunes. Consiste en una imagen sobre la cual se pueden superponer otros bloques, como por ejemplo titulares, texto, botones, etc. Este bloque permite personalizar la altura mínima de la imagen y hacer que esta sobrepase los límites de la caja de texto, de modo que la imagen pueda llegar a ocupar toda la anchura de la página (esto solo ocurrirá si el tema es compatible con este tipo de diseño). Por último, el bloque de fondo permite utilizar un color de superposición, lo cual hace posible atenuar la opacidad de la imagen y destacar así los textos y titulares.

Todas estas características hacen que el bloque de fondo sea idóneo para crear ciertos diseños muy habituales en las páginas web modernas:

• Cabeceras de página que ocupan toda la anchura de la pantalla.
• Imágenes “hero”, que ocupan gran parte de la zona visible de la parte superior de la página, o incluso la pantalla completa. Estas imágenes, destinadas a crear el tono y estilo propios de un sitio web, deben diseñarse para crear un fuerte impacto visual.
• Fondos que identifican o distinguen las secciones de contenido de un sitio web. A menudo se suelen encadenar varias imágenes de fondo para crear distintos efectos.
• Fondos con efecto “parallax”. Para lograr este efecto, el bloque dispone de una opción (“fondo fijo”) que permite que la imagen aparezca fija, mientras que los demás elementos de la página se desplazan sobre ella.
• Mecanismos de llamada a la acción (call to action o CTA), destinados a captar la atención del visitante y animarle a realizar algún tipo de interacción con el sitio web. En este caso, es muy habitual que el bloque de fondo vaya acompañado de enlaces o botones.

Bloque espaciador

El bloque espaciador, que forma parte de los bloques de diseño, tiene un propósito muy simple: definir una zona de separación entre bloques, cuya altura se puede precisar a voluntad. Este bloque solo permite utilizar un parámetro: la altura del espacio entre bloques, medida en píxeles.

Pudiera parecer que, con tan escasas opciones, el espaciador es un elemento poco aprovechable, peo en realidad ocurre al contrario, ya que este bloque garantiza que el espacio entre las diferentes secciones de una página sea perfectamente controlable. Por supuesto, el espaciador debe ser utilizado de forma coherente, organizada y planificada.

El bloque espaciador no debe confundirse con otro bloque parecido, que es el separador, mediante el cual se puede trazar una línea de separación horizontal entre bloques.

Bloque de medios y texto

Como su propio nombre indica, el bloque de medios y texto, que forma parte de los bloques de diseño, hace posible la creación de combinaciones de imagen y texto, formadas por un bloque de imagen y otro de párrafo. Ambos elementos aparecen dispuestos lado a lado, formando una unidad de elementos inseparables.

Esto es un bloque de medios y texto, en este caso con la imagen en el lado izquierdo. Se puede “recortar” la imagen verticalmente, para que abarque toda la altura ocupada por el texto. De esta manera, se consigue un efecto muy elegante y vistoso, con un esfuerzo realmente mínimo. También se puede arrastrar el borde de la imagen para modificar la proporción de anchura de ambos elementos. Por último, también es posible determinar la alineación vertical de la imagen.

Esto es un bloque de medios y texto, en este caso con la imagen en el lado derecho. Se puede “recortar” la imagen verticalmente, para que abarque toda la altura ocupada por el texto. De esta manera, se consigue un efecto muy elegante y vistoso, con un esfuerzo realmente mínimo. También se puede arrastrar el borde de la imagen para modificar la proporción de anchura de ambos elementos. Por último, también es posible determinar la alineación vertical de la imagen.

El bloque de medios y texto dispone de opciones muy interesantes, que permiten modificar el color de fondo de todo el bloque, o solo del bloque de párrafo. Con un uso juicioso de los colores, la posición y proporción de la imagen con respecto al texto, y la alternancia o sucesión de bloques, se pueden lograr efectos muy elegantes.

Bloque de grupo

El bloque de grupo, que portenece a la sección de elementos de diseño, sirve para agrupar varios bloques en un conjunto único. Este bloque permite elaborar diseños complejos formados por otros bloques; además, la agrupación de varios bloques en una unidad Facilita su gestión y manejo.

Por el momento, el editor solo permite aplicar al bloque de grupo un color de fondo y opciones de anchura ampliada o anchura completa, pero seguramente las futuras versiones del editor de WordPress incorporarán muchas más opciones.

Bloque de columnas

Este bloque, que forma parte de los elementos de diseño, permite crear columnas en las que posteriormente se pueden insertar otros bloques, lo cual hace posible elaborar diseños avanzados, como por ejemplo el que ofrecemos a continuación, formado por un bloque de tres columnas de igual anchura, en cada una de las cuales se ha insertado una tabla see tres filas.

Bloque de galería

El bloque de galería de imágenes, que forma parte de la sección de bloques comunes, permite crear conjuntos de imágenes muy vistosos y elegantes con poquísimo esfuerzo. Veamos dos ejemplos con diferente número y disposición de las imágenes:

Galería 1

Galería 2

Bloque de botón

El bloque de botón pertenece al grupo de bloques de diseño, y es uno de los elementos más importantes a la hora de crear los dispositivos de interacción con los,usuarios típicos de los sitios web modernos.

Gracias a las opciones de color de fondo, color del texto y radio del borde, el editor de WordPress permite diseñar en muy poco tiempo botones muy vistosos, como los que mostramos a continuación:

Ninguno de los botones anteriores contiene enlaces funcionales, pero lo cierto es que estos son un aspecto fundamental del bloque de botón.En efecto, los botones normalmente enlazan con un parte importante del contenido del sitio, o forman parte de un mecanismo de interacción: una llamada a la acción, un formulario, etc.

Como utilizar estos bloques para diseño visual

A lo largo de la primera sesión del curso se harán continuas demostraciones de uso de los bloques antedichos, teniendo a la vista diversos modelos y páginas de ejemplo. El objetivo es que los alumnos y alumnas aprendan a elaborar por sus propios medios una página semejante a esta, que posteriormente puedan utilizar como página de inicio de sus sitios web.

Ejemplos de diseños

A continuación incluimos diversos ejemplos de diseños que pueden servir de modelo para las tareas solicitadas en esta primera sesión del curso. Conviene tener en cuenta que muchos diseños son irrealizables si solo se cuenta con los bloques nativos del editor de WordPress, pero siempre pueden ofrecer ideas e inspiración.

• Biblioteca de diseños de DesignHub.
• Elementor Template Library.
• Gutenberg Template Library. Es un excelente repositorio de plantillas, cuyo código se puede copiar y pegar, lo cual permite reproducir los diseños en cualquier instalación de WordPress.
• Plantillas de ejemplo del tema Astra.
• Secciones prediseñadas de Stackable.
• ShareABlock. Para más información sobre este repositorio de bloques, véase el artículo Recursos sobre el plugin EditorsKit.

La entrada Bloques más adecuados para el diseño visual se publicó por primera vez en Curso de WordPress 2020.