Un clúster de contenidos en forma de grid o baldosas es una excelente manera de organizar y presentar información de forma atractiva y organizada. En esta guía, aprenderás a hacerlo utilizando el editor por defecto de WordPress, Gutenberg, sin necesidad de plugins.
Crear un clúster de contenidos manual
Paso 1: Crear una nueva página o entrada
- Accede a tu panel de wordpress: ve a tu panel de administración de WordPress.
- Crear nueva página o entrada: dirígete a «páginas» > «añadir nueva» o «entradas» > «añadir nueva», dependiendo de dónde quieras crear el clúster de contenidos.
Paso 2: Añadir un contenedor de columnas
- Añadir bloque de columnas: en el editor Gutenberg, haz clic en el botón «+» para añadir un nuevo bloque o escribe ‘/’ seguido de columnas en el editor. Selecciona «columnas» en el menú de bloques.
- Seleccionar estructura de columnas: elige la estructura de columnas que desees para tu grid. Por ejemplo, puedes seleccionar una estructura de 3 columnas para un diseño de tres baldosas por fila.
Paso 3: Añadir contenido a las columnas
- Añadir bloques de contenido: dentro de cada columna, puedes añadir bloques de contenido como imágenes, encabezados, párrafos, y botones. Haz clic en el botón «+» dentro de una columna para añadir un bloque.
- Agregar imágenes: selecciona el bloque «imagen» y sube una imagen o selecciona una de tu biblioteca de medios.
- Agregar encabezados y texto: añade un bloque «encabezado» para el título de cada baldosa y un bloque «párrafo» para una breve descripción.
En el ejemplo de este post he añadido un bloque de imagen, otro de encabezado y uno de párrafo:
Paso 4: Hacer los elementos clicables
- Añadir bloque de botón: para hacer que las baldosas sean clicables, puedes añadir un bloque de «botón» debajo del texto descriptivo dentro de cada columna. Enlaza este botón a la URL deseada.
- Enlazar imágenes y texto: también puedes hacer que la imagen o el encabezado sean los elementos clicables. Haz clic en la imagen o texto y utiliza la opción de «enlace» en la barra de herramientas para añadir la URL.
Paso 5: Personalizar el estilo
- Ajustar el diseño: utiliza las opciones de diseño de gutenberg para ajustar el espaciado, alineación y otros estilos de las columnas y los bloques individuales.
- Agregar fondos y bordes: puedes añadir colores de fondo y bordes a las columnas para mejorar la apariencia visual. Selecciona la columna y utiliza las opciones en la barra lateral para personalizar el estilo.
Si tu plantilla de WordPress no permite añadir bordes y espaciado desde la barra derecha del editor o quieres personalizar los estilos mediante CSS, dale un nombre de clase a cada bloque de columna seleccionándola y escribiendo la clase en la barra derecha dentro de CLASE(S) CSS ADICIONAL(ES) en el apartado Avanzado. En el siguiente ejemplo la he nombrado columna-frutas.
Para añadir tu CSS personalizado, desde el panel de WordPress vete a Apariencia > Personalizar > CSS adicional y añade el código CSS. Aquí un ejemplo que se puede modificar según tus preferencias:
/* Estilos bloque columna */
.columna-frutas {
border: solid 1px #FFDFB5;
box-shadow: 3px 3px 10px #E6E6E6;
border-radius: 10px;
background-color: #FFF9F2;
transition: ease 0.1s;
}
/* imagen de la columna*/
.columna-frutas img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* Al pasar el cursor */
.columna-frutas:hover {
box-shadow: 6px 6px 15px #D9D9D9;
-webkit-transform: translateY(-2px);
}Este sería el resultado final:
Peras
Descripción.
Piñas
Descripción.
Melocotones
Descripción.
Crear un clúster de contenidos para posts del blog con el bloque ‘bucle de consulta’
El bloque bucle de consulta de Gutenberg te permite mostrar una lista de posts del blog en forma de grid o baldosas. Es una herramienta poderosa y flexible para agrupar y presentar contenido dinámico basado en ciertos criterios como categorías, etiquetas, o fechas.
Paso 1: Crear una nueva página o entrada
- Accede a tu panel de wordpress: ve a tu panel de administración de WordPress.
- Crear nueva página o entrada: dirígete a «páginas» > «añadir nueva» o «entradas» > «añadir nueva», dependiendo de dónde quieras crear el clúster de contenidos.
Paso 2: Añadir el bloque ‘bucle de consulta’
- Añadir bloque ‘bucle de consulta’: en el editor gutenberg, haz clic en el botón «+» para añadir un nuevo bloque. Busca y selecciona el bloque «bucle de consulta». Esto añade el bloque de consulta que contiene a su vez 3 bloque más: plantilla de entrada, paginación y sin resultados
- Seleccionar un diseño: al añadir el bloque ‘bucle de consulta’, se te presentarán varias opciones de diseño predefinido. Selecciona un diseño de grid o baldosas que se ajuste a tus necesidades.
Paso 3: Configurar el bloque ‘bucle de consulta’
Desde los ajustes del bloque de consulta puedes modificar los siguientes elementos:
- Elementos por página: cuántas entradas mostrar.
- Desplazamiento: 0 para mostrar todos los posts, 1 para que no se muestre el último post publicado, 2 para ocultar los últimos dos posts.
- Páginas máximas a mostrar: limita el número de páginas a mostrar incluso si tienes muchos más posts. 0 muestra todas las páginas.
Desde los ajustes del bloque plantilla de entrada puedes mostrar los posts en lista o en columnas, mientras que desde las opciones de la barra derecha seleccionas el número de columnas:
A continuación puedes añadir los diferentes elementos que quieras mostrar en cada post:
- Imagen destacada: añade el bloque «imagen destacada» para mostrar la imagen principal de cada post.
- Título del post: añade el bloque «título del post» para mostrar el título.
- Extracto: añade el bloque «extracto» para mostrar un resumen del post.
- Botón de leer más: añade el bloque «botón de leer más» para enlazar al post completo.
Por defecto los elementos de cada post no enlazan a nada. Recuerda seleccionarlos y, desde los ajustes de la barra lateral, activar Enlace a Entrada:
Paso 4: Filtrar el contenido del ‘bucle de consulta’
- Configurar filtros: con el bloque ‘bucle de consulta’ seleccionado, ve a la barra lateral derecha. Aquí puedes establecer filtros para mostrar posts específicos:
- Categorías: selecciona las categorías que deseas mostrar en el clúster.
- Etiquetas: filtra los posts por etiquetas específicas.
- Ordenar por: configura el orden de los posts (por más recientes o más antiguos).
Paso 5: Personalizar el estilo del clúster
- Ajustar el diseño: utiliza las opciones de diseño de gutenberg para ajustar el espaciado, alineación, y otros estilos del ‘bucle de consulta’ y los bloques individuales dentro de cada item.
- Agregar fondos y bordes: puedes añadir colores de fondo y bordes a los items para mejorar la apariencia visual.
De nuevo, si tu plantilla no tiene opciones para añadir estilos desde el editor, mediante CSS puedes personalizar hasta el mínimo detalle.
Paso 6: Publicar
Revisar y publicar: revisa tu diseño en la vista previa para asegurarte de que todo se ve bien. Si te parece correcto, haz clic en «publicar» para hacer tu clúster de contenido visible en tu sitio.
Crear un clúster de contenidos en WordPress utilizando Gutenberg es una manera efectiva y sencilla de organizar y presentar tu contenido de forma visualmente atractiva.
Los métodos explicados en este artículo te permiten construir un grid de baldosas desde el editor de WordPress sin necesidad de añadir plugins adicionales a tu web.