En este artículo vamos a pasar revista a aquellos bloques que presentan un mayor potencial en relación con el diseño visual. Debe entenderse, por tanto, que no vamos a considerar todos los bloques del editor de WordPress, sino solo algunos muy concretos. El orden en que vamos a presentarlos y trabajar con ellos será el mismo con el que se han utilizado en la página web que propondremos como modelo de prácticas.
¿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:
- Fondo.
- Espaciador.
- Medios y texto.
- Grupo.
- Columnas.
- Galería de imágenes.
- 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.
Ejemplo de bloque de fondo
A este bloque de fondo, compuesto por imagen, titular y texto, se le ha aplicado una capa de superposición en color verde, con una opacidad del 70%. El conjunto se completa con un botón.
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.
| Producto A |
| Descripción |
| Precio |
| Producto B |
| Descripción |
| Precio |
| Producto C |
| Descripción |
| Precio |
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
Leyendo un mapa Buzón de Correos Contacto Fuegos artificiales Trabajo con ordenadores
Galería 2
Trabajando con portátil Presentación Trabajando con WordPress Escalera
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:
Botón cuadrado, de estilo por defecto, con fondo de color rojo oscuro y texto de color blanco.
Botón cuadrado, de estilo contorneado, con fondo de color amarillo y borde y texto de color negro.
Botón con esquinas redondeadas, de estilo por defecto, con fondo de color azul y texto de color blanco.
Botón con esquinas redondeadas, de estilo contorneado, con fondo de color verde y borde y texto de color negro.
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.
Un comentario