Las cuadrículas son una herramienta potente para organizar el contenido de tu sitio web de forma visual. Esta guía te orientará paso a paso para configurar una cuadrícula personalizada, añadir imágenes y enlazar dichas imágenes a URLs específicas.
Paso 1: Crea una página nueva
Para comenzar, navega al escritorio de tu sitio web:
-
Ve a Páginas > Todas las páginas.
-
Haz clic en Añadir nueva para crear un lienzo en blanco para tu cuadrícula.
Paso 2: Inserta el bloque de cuadrícula
Una vez que estés en el editor:
-
Haz clic en el icono Más (+) o escribe una barra diagonal (/) seguida de la palabra "cuadrícula" (grid).
-
Selecciona el bloque de Cuadrícula en el menú. Por defecto, esto suele generar un diseño de 5 columnas.
Paso 3: Configura el diseño
Para tener un control total sobre el aspecto de tu cuadrícula, debes cambiar a la configuración manual:
-
Selecciona el bloque de Cuadrícula.
-
En el panel de configuración de la derecha, cambia el ajuste de diseño a Manual.
-
Ajusta el número de columnas. Para este ejemplo, selecciónalo en 4 columnas.
Paso 4: Añade bloques de imagen a la cuadrícula
Ahora que tu estructura está lista, es momento de completar los espacios vacíos:
-
En la primera columna, haz clic en el icono Más (+) y selecciona Imagen.
-
Para completar los espacios restantes, busca el icono Más (+) en la esquina inferior derecha de tu área de bloque actual.
-
Repite este proceso hasta que tengas un bloque de imagen en cada una de las cuatro columnas.
Paso 5: Sube y enlaza tus imágenes
Con tus espacios listos, es hora de añadir el contenido:
-
Haz clic en un bloque de imagen y selecciona Subir o Biblioteca de medios para añadir tu foto.
-
Una vez colocada la imagen, haz clic sobre ella para abrir la barra de herramientas de imagen.
-
Haz clic en el icono de Enlace (tiene forma de eslabón de cadena).
-
Introduce la URL de la página a la que quieres que la imagen redirija.
-
Repite estos pasos para todas las imágenes de tu cuadrícula.
Paso 6: Expande tu cuadrícula
Si necesitas más de una fila, no tienes que empezar desde cero:
-
Haz clic en todo el bloque de Cuadrícula para seleccionarlo.
-
Haz clic en el menú de tres puntos (Opciones) en la barra de herramientas.
-
Selecciona Duplicar. Esto creará una fila idéntica debajo, la cual podrás editar con nuevas imágenes y enlaces.
Consejo profesional: Aunque esta guía se enfoca en imágenes, en realidad puedes colocar cualquier bloque dentro de estas columnas de cuadrícula, incluyendo encabezados, párrafos o botones.
Ajustar el espaciado (relleno) en tu cuadrícula
Una vez que tus imágenes estén en su lugar, es posible que quieras ajustar el espacio interno dentro de las columnas de la cuadrícula para asegurar que estén perfectamente alineadas y visualmente equilibradas. En el editor de bloques de WordPress, esto se gestiona a través de los ajustes de Relleno (Padding).
-
Selecciona el bloque de cuadrícula: Haz clic en la cuadrícula en el editor para seleccionar todo el contenedor.
-
Ve a la pestaña de Estilos: En la barra lateral derecha, busca la pestaña de Estilos. Esta se representa con un icono de un círculo dividido en blanco y negro (como una media luna).
-
Busca Dimensiones: Desplázate hacia abajo dentro de la pestaña de Estilos hasta llegar a la sección de Dimensiones.
-
Ajusta el Relleno: Busca el deslizador de Relleno. Al moverlo, añadirás espacio dentro de las columnas de la cuadrícula, alejando tus imágenes de los bordes hacia el interior.
-
Si no ves la opción de Relleno, haz clic en el menú de tres puntos verticales (Opciones) junto al encabezado de "Dimensiones" y asegúrate de que la opción "Relleno" esté marcada.
- Desvincula los lados: Si quieres un espaciado diferente para la parte superior/inferior en comparación con la izquierda/derecha, haz clic en el icono de enlace para "desvincular" los lados e introducir valores personalizados para cada uno.
-
Finalización
Una vez que estés conforme con tu diseño, haz clic en Guardar borrador o Publicar para que tu cuadrícula esté en línea.