¿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.

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.

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.

La primera actividad del curso consiste en una tarea práctica de utilidad inmediata: los alumnos y alumnas deberán elaborar, publicar y enviar al profesor una página creada con los bloques del editor de WordPress que se describen en el artículo Bloques más adecuados para el diseño visual.

La página que debe utilizarse como modelo es esta, creada por el profesor del curso con los bloques nativos del editor de WordPress, el tema hijo Magazine Pro e imágenes descargadas de Unsplash. El contenido de la página propuesta como modelo es irrelevante, pero la estructura de bloques que describimos a continuación no debe modificarse en absoluto.

Descripción de la primera actividad del curso

La página propuesta como modelo es de anchura completa y no muestra su título, lo cual se consigue seleccionando el diseño adecuado y desactivando el título de la página. Para acceder a ambas configuraciones desde el editor de WordPress, hay que utilizar la barra de funciones de los temas de la familia Génesis (esta barra se activa pulsando sobre el icono que tiene forma de bola o planeta, con una letra “G” en su centro), y activar o desactivar las opciones correspondientes. El procedimiento para llevar a cabo esta acción se detalla en este artículo.

Para que la actividad se considere correctamente realizada, la página deberá contener todos los elementos que se describen a continuación, y en el mismo orden en que se describen.

Elementos constitutivos de la página web

Sección de cabecera

Esta sección corresponde a lo que se denomina imagen ”hero”, y debe estar compuesta por los siguientes bloques:

• Imagen de fondo (bloque “fondo”). La imagen debe tener anchura completa y opacidad adecuada para que el texto sea legible sin dificultades. Por su parte, la altura de la imagen debe ser la necesaria para permitir que dentro de la imagen se incluyan, sin «apreturas», los siguientes elementos.
  • Bloque de titular h1, con texto de color blanco
  • Bloque espaciador de altura adecuada.
  • Bloque de párrafo, con texto de color blanco y tamaño de letra muy grande.

Bloque espaciador

Debe tener una altura adecuada (unos 100 píxeles).

Sección de proyecto educativo

Esta sección debe constar de los siguientes bloques:

• Bloque de titular h2, en un color diferente al color por defecto.
• Bloque espaciador, de altura adecuada (unos 30 píxeles).
• Tres bloques de “Medios y texto”, con distribución alternativa de imágenes y texto. Cada bloque de medios y texto debe tener una composición no simétrica en cuanto a la anchura respectiva de sus componentes (60%-40% o 70%-30%, por ejemplo). Las imágenes deben adaptar su altura a la caja de texto; además, los bloques de texto deben utilizar dos y solo dos colores de fondo y de texto diferentes (oscuro- claro / claro-oscuro).

Bloque espaciador

Debe tener una altura adecuada (unos 100 píxeles).

Sección de instalaciones y recursos

Esta sección debe constar de los siguientes bloques:

• Bloque de titular h2, en un color diferente al color por defecto.
• Bloque espaciador, de altura adecuada (unos 30 píxeles).
• Un bloque de grupo con fondo de color oscuro:, que contendrá, a su vez, los siguientes elementos:
  • Un bloque de dos columnas. La columna de la izquierda debe contener un bloque de párrafo cuyo texto será de color blanco y tamaño de letra muy grande, mientras que la columna de la derecha contendrá un bloque de galería con seis imágenes. Para conseguir un mejor efecto, el contenido de ambas columnas debe estar centrado en su dimensión vertical. Las imágenes de la galería, por su parte, deben enlazarse a sus respectivos ficheros de imagen, para conseguir así que se abran con un elegante efecto de superposición u overlay.

Bloque espaciador

Debe tener una altura adecuada (unos 100 píxeles).

Sección de pie de página

Esta sección debe constar de los siguientes bloques:

• Bloque de titular h2, en un color diferente al color por defecto.
• Bloque espaciador, de altura adecuada (unos 30 píxeles).
• Imagen de fondo (bloque “fondo”). La imagen debe tener anchura completa y opacidad adecuada para que el texto sea legible sin dificultades.
• Bloque de dos columnas. Dentro de cada una de las dos columnas deben incluirse los siguientes bloques:
  • Bloque de párrafo, con el texto de color claro.
  • Bloque de botón. Los dos botones deben tener textos y colores diferentes, y deben apuntar a sendos enlaces vacíos.

Algunos consejos y normas

Aconsejamos tener en cuenta algunas recomendaciones a la hora de realizar esta actividad:

1. Conviene tener a la vista los artículos de la Sesión 1 del curso. Quienes tengan más dificultades para utilizar el editor de WordPress, pueden consultar también los recursos del Curso de WordPress 2019.
2. Se gana mucho tiempo si se utilizan las funciones de duplicación y reordenación de bloques. Por ejemplo, se pueden escribir todos los bloques de titular a la vez, y luego reordenarlos. En cuanto a los bloques espaciadores, es muy fácil crear uno y luego duplicarlos y ordenarlos correctamente.
3. Para moverse con agilidad por entre los bloques y no perder de vista la estructura de la página, conviene utilizar con frecuencia el navegador de bloques del editor.
4. Queda estrictamente prohibido copiar y pegar el modelo de página propuesto por el profesor.

Envío de la actividad

Una vez realizada la primera actividad del curso, hay que enviar su dirección al profesor, junto con una breve descripción del trabajo realizado, y sobre todo de las dificultades y problemas observados durante la realización de la actividad.

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

La entrada Primera actividad del curso 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.