--- title: Cómo crear una cuadrícula de imágenes con enlaces description: Aprende a crear una cuadrícula de imágenes personalizada, configurar diseños de columna manuales y añadir enlaces en los que se pueda hacer clic a tus imágenes para mejorar la navegación de tu sitio web. --- [Ir directamente al contenido](https://help.indiegraf.com/es/how-to-create-an-image-grid-with-links#main-content) - [Español](https://help.indiegraf.com/es/how-to-create-an-image-grid-with-links) - [English](https://help.indiegraf.com/how-to-create-an-image-grid-with-links) Español Traducciones de Mostrar submenú de [Publisher Portal](https://portal.indiegraf.com/tickets?hsLang=es) [![Indiegraf-PrimaryLogo-FullColor-1](https://help.indiegraf.com/hs-fs/hubfs/Indiegraf-PrimaryLogo-FullColor-1.png?width=262&height=60&name=Indiegraf-PrimaryLogo-FullColor-1.png)](https://help.indiegraf.com/?hsLang=es) Abrir navegación principal Cerrar navegación principal - - [Español](https://help.indiegraf.com/es/how-to-create-an-image-grid-with-links) - [English](https://help.indiegraf.com/how-to-create-an-image-grid-with-links) Español Traducciones de Mostrar submenú de - [Publisher Portal](https://portal.indiegraf.com/tickets) ¿Cómo podemos ayudarte? - No hay sugerencias porque el campo de búsqueda está vacío. 1. [Indiegraf (es)](https://help.indiegraf.com/es/?hsLang=es) 2. [Indie Website](https://help.indiegraf.com/es//indie-website?hsLang=es) 3. [Diseño y estructura de la página](https://help.indiegraf.com/es//indie-website?hsLang=es#dise%C3%B1o-y-estructura-de-la-p%C3%A1gina) 25 de marzo de 2026 # Cómo crear una cuadrícula de imágenes con enlaces ## Aprende a crear una cuadrícula de imágenes personalizada, configurar diseños de columna manuales y añadir enlaces en los que se pueda hacer clic a tus imágenes para mejorar la navegación de tu sitio web. 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 ![Add Grid](https://help.indiegraf.com/hs-fs/hubfs/Add%20Grid.png?width=670&height=348&name=Add%20Grid.png) 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 ![Adjust Columns to 4](https://help.indiegraf.com/hs-fs/hubfs/Adjust%20Columns%20to%204.png?width=670&height=349&name=Adjust%20Columns%20to%204.png) 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 ![Add Image block to first grid](https://help.indiegraf.com/hs-fs/hubfs/Add%20Image%20block%20to%20first%20grid.png?width=670&height=348&name=Add%20Image%20block%20to%20first%20grid.png) 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. ![Adding Image Blocks to other Grid boxes](https://help.indiegraf.com/hs-fs/hubfs/Adding%20Image%20Blocks%20to%20other%20Grid%20boxes.png?width=670&height=349&name=Adding%20Image%20Blocks%20to%20other%20Grid%20boxes.png) - 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 ![Duplicate Grid-1](https://help.indiegraf.com/hs-fs/hubfs/Duplicate%20Grid-1.png?width=670&height=349&name=Duplicate%20Grid-1.png) 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 ![Screenshot 2026-01-07 at 1.45.59 PM](https://help.indiegraf.com/hs-fs/hubfs/Screenshot%202026-01-07%20at%201.45.59%20PM.png?width=670&height=481&name=Screenshot%202026-01-07%20at%201.45.59%20PM.png) 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). 1. **Selecciona el bloque de cuadrícula:** Haz clic en la cuadrícula en el editor para seleccionar todo el contenedor. 2. **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). 3. **Busca Dimensiones:** Desplázate hacia abajo dentro de la pestaña de Estilos hasta llegar a la sección de **Dimensiones**. 4. **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. --- - [Bienvenido(a) a Indiegraf](https://help.indiegraf.com/es//bienvenidoa-a-indiegraf?hsLang=es) - [Orientación](https://help.indiegraf.com/es//orientaci%C3%B3n?hsLang=es#main-content) - [Guía de inicio rápido](https://help.indiegraf.com/es//orientaci%C3%B3n?hsLang=es#gu%C3%ADa-de-inicio-r%C3%A1pido) - [Indie Website](https://help.indiegraf.com/es//indie-website?hsLang=es#main-content) - [Analítica y crecimiento](https://help.indiegraf.com/es//indie-website?hsLang=es#anal%C3%ADtica-y-crecimiento) - [Participación y formularios de audiencia](https://help.indiegraf.com/es//indie-website?hsLang=es#participaci%C3%B3n-y-formularios-de-audiencia) - [Configurando tu Página de Inicio](https://help.indiegraf.com/es//indie-website?hsLang=es#configurando-tu-p%C3%A1gina-de-inicio) - [Creación y gestión de contenido](https://help.indiegraf.com/es//indie-website?hsLang=es#creaci%C3%B3n-y-gesti%C3%B3n-de-contenido) - [Diseño y estructura de la página](https://help.indiegraf.com/es//indie-website?hsLang=es#dise%C3%B1o-y-estructura-de-la-p%C3%A1gina) - [Indiegraf Pay](https://help.indiegraf.com/es//indie-website?hsLang=es#indiegraf-pay) - [Medios y activos visuales](https://help.indiegraf.com/es//indie-website?hsLang=es#medios-y-activos-visuales) - [Herramientas de SEO y Google](https://help.indiegraf.com/es//indie-website?hsLang=es#herramientas-de-seo-y-google) - [Administración del Sitio](https://help.indiegraf.com/es//indie-website?hsLang=es#administraci%C3%B3n-del-sitio) - [Preguntas Técnicas](https://help.indiegraf.com/es//indie-website?hsLang=es#preguntas-t%C3%A9cnicas) - [Indie Email](https://help.indiegraf.com/es//indie-email?hsLang=es#main-content) - [Configuración de la cuenta y fundaciones](https://help.indiegraf.com/es//indie-email?hsLang=es#configuraci%C3%B3n-de-la-cuenta-y-fundaciones) - [Gestión de Contacto](https://help.indiegraf.com/es//indie-email?hsLang=es#gesti%C3%B3n-de-contacto) - [Creación de campañas](https://help.indiegraf.com/es//indie-email?hsLang=es#creaci%C3%B3n-de-campa%C3%B1as) - [Envío de campañas y automatización](https://help.indiegraf.com/es//indie-email?hsLang=es#env%C3%ADo-de-campa%C3%B1as-y-automatizaci%C3%B3n) - [Solución de problemas y entregabilidad](https://help.indiegraf.com/es//indie-email?hsLang=es#soluci%C3%B3n-de-problemas-y-entregabilidad) - [Analíticas](https://help.indiegraf.com/es//indie-email?hsLang=es#anal%C3%ADticas) - [Indie Ads Manager (IAM)](https://help.indiegraf.com/es//indie-ads-manager-iam?hsLang=es#main-content) - [Informes y Estadísticas](https://help.indiegraf.com/es//indie-ads-manager-iam?hsLang=es#informes-y-estad%C3%ADsticas) - [Artículos Esenciales](https://help.indiegraf.com/es//indie-ads-manager-iam?hsLang=es#art%C3%ADculos-esenciales) - [Guía de Inicio Rápido](https://help.indiegraf.com/es//indie-ads-manager-iam?hsLang=es#gu%C3%ADa-de-inicio-r%C3%A1pido) - [Indiegraf Expertos](https://help.indiegraf.com/es//indiegraf-expertos?hsLang=es) - [General](https://help.indiegraf.com/es//general?hsLang=es) [![Indiegrf](https://help.indiegraf.com/hs-fs/hubfs/Indiegraf-SecondaryLogo-DarkNavy-2.png?width=260&height=130&name=Indiegraf-SecondaryLogo-DarkNavy-2.png "Indiegrf")](https://help.indiegraf.com/?hsLang=es) Indiegraf is on a mission to make local news entrepreneurship a great career and life choice for journalists everywhere. [mailto:support@indiegraf.com](mailto:support@indiegraf.com) Copyright © 2025, Indiegraf Media