En este tramo final de la tercera sesión del curso vamos a abordar el uso de los bloques de Atomic Blocks. Dado que el tiempo disponible nos impide tratar todos los bloques, varios de los cuales tienen múltiples opciones de configuración, solo nos ocuparemos de aquellos que ofrecen mayor potencial en tareas de diseño global y de configuración de la estructura del contenido.
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.
Un comentario