Añade una galería a tu sitio web
Con el creador de sitios web de SendPulse, puedes añadir una galería para mostrar varias imágenes en forma de carrusel, cuadrícula o collage. Por ejemplo, puedes utilizar la galería como portafolio o para mostrar tus productos y las opiniones de tus clientes.
En este artículo encontrarás un tutorial para saber cómo añadir una galería a tu sitio web y configurar su visualización.
Añadir elemento
Añade el widget Galería a una sección de tu sitio web.
Subir imágenes
Haz clic en Elegir archivo y selecciona una opción para añadir tu imagen:
| Administrador de archivos | Abre el administrador de archivos donde puedes seleccionar una imagen existente o subir una nueva. |
| Administrador de stock | Abre una ventana modal donde puedes elegir una imagen de las fotos de stock gratuitas de Unsplash.
Puedes buscar por nombre de imagen, seleccionar una imagen de la lista y hacer clic en Seleccionar en la parte inferior para añadirla a tu página. |
Las imágenes del sitio web cambian de tamaño automáticamente para que coincidan con el tamaño de la pantalla del dispositivo del visitante (720, 1080 o 1920 px) y se convierten al formato webp. Si el tamaño requerido no está disponible, el visitante del sitio web verá la imagen original, que se almacena en el administrador de archivos.
Para añadir más imágenes, haz clic en Añadir.
Para sustituir o eliminar una imagen, pasa el cursor sobre ella y haz clic en el icono correspondiente.
Para reorganizar las imágenes en la parrilla, arrástralas y suéltalas en la posición deseada.
Configura tu galería
Selecciona el tipo de galería (carrusel, cuadrícula o collage) y haz clic en Personalizar.
Carrusel
Personaliza la apariencia de tu carrusel:
| Número de imágenes por fila | Selecciona cuántas imágenes se mostrarán en una sola fila. |
| Mostrar como | Selecciona un modo de visualización de carrusel.
Las opciones incluyen: Fila: todas las imágenes aparecen en una sola fila. Miniaturas: aparece una imagen principal con una fila de miniaturas debajo. |
| Mostrar el borde de la última miniatura | Selecciona esta opción para mostrar parcialmente la siguiente miniatura en el borde de la fila, indicando que hay más imágenes disponibles.
Aplicable solo a Miniaturas. |
| Escalar imagen | Decide cómo se ajustan las imágenes a sus contenedores.
Las opciones son: Cubrir: ocupa todo el espacio, las imágenes pueden recortarse. Contener: muestra la imagen completa sin recortarla. Utiliza la opción Contener para imágenes con relaciones de aspecto no estándar, como capturas de pantalla de testimonios. |
| Vista previa de escala de imagen | Selecciona cómo se ajustan las imágenes en miniatura dentro de sus contenedores. Elige Cubrir o Contener.
Aplicable solo a Miniaturas. |
| Color de fondo | Selecciona un color de fondo para los contenedores de imágenes.
Este color aparece cuando se utiliza el modo de escalado Contener o cuando la galería tiene más imágenes de las que caben en la pantalla. |
| Espaciado | Establece el espaciado entre imágenes en la fila utilizando valores en píxeles. |
| Redondeo | Redondea las esquinas de las imágenes utilizando valores en píxeles. |
| Color de los botones Anterior/Siguiente | Selecciona un color para las flechas de navegación del carrusel. |
También puedes configurar opciones adicionales para la interacción del usuario activando o desactivando la apertura de la imagen tras hacer clic* y automatizando las transiciones entre diapositivas.
*Cuando esta opción está activada, la imagen se abrirá en una ventana modal con su tamaño original.
Cuadrícula
Personaliza el aspecto de tu cuadrícula:
| Número de imágenes por fila | Selecciona cuántas imágenes quieres mostrar en una sola fila. |
| Escalar imagen | Decide cómo se ajustan las imágenes dentro de sus contenedores.
Las opciones son: Cubrir: ocupa todo el espacio, las imágenes pueden recortarse. Contener: muestra la imagen completa sin recortarla. Utiliza la opción Contener para imágenes con relaciones de aspecto no estándar, como capturas de pantalla de testimonios. |
| Color de fondo | Selecciona un color de fondo para los contenedores de imágenes.
Este color aparece cuando se utiliza el modo de escalado Contener o cuando la galería tiene más imágenes de las que caben en la pantalla. |
| Espaciado | Establece el espaciado entre imágenes en la fila utilizando valores en píxeles. |
| Redondeo | Redondea las esquinas de las imágenes utilizando valores en píxeles. |
También puedes configurar más opciones de interacción activando o desactivando la apertura de imágenes al hacer clic.
Collage
Selecciona una plantilla de diseño del collage.
| Mostrar como | Select a collage layout template. |
| Escalar imagen | Decide cómo se ajustan las imágenes dentro de sus contenedores.
Las opciones son: Cubrir: ocupa todo el espacio, las imágenes pueden recortarse. Contener: muestra la imagen completa sin recortarla. Utiliza la opción Contener para imágenes con relaciones de aspecto no estándar, como capturas de pantalla de testimonios. |
| Color de fondo | Selecciona un color de fondo para los contenedores de imágenes.
Este color aparece cuando se utiliza el modo de escalado Contener o cuando la galería tiene más imágenes de las que caben en la pantalla. |
| Espaciado | Establece el espaciado entre imágenes en la fila utilizando valores en píxeles. |
| Redondeo | Redondea las esquinas de las imágenes utilizando valores en píxeles. |
También puedes configurar más opciones de interacción activando o desactivando la apertura de imágenes al hacer clic.
Edita tus imágenes
Puedes personalizar el tamaño de la imagen y añadir un punto focal (una parte de la imagen que quieras destacar) para resaltar el objeto principal en una foto grande.
Haz clic en una imagen del widget y arrastra el cursor para cambiar su tamaño. Haz clic en el centro de la imagen para establecer su punto focal.
Puedes editar imágenes directamente en el creador de sitios web, por ejemplo, agregar texto o usar varios efectos.
Leer más: Cómo editar imágenes usando el creador de sitios web.
Copia el ID de tu elemento
Cada elemento tiene un ID con el que es identificado en la página. A través de él, puedes añadir estilos, scripts, mostrar ventanas emergentes y rastrear los eventos de este elemento.
Para copiar un ID, haz clic en él. Para editarlo, haz clic en el ícono del lápiz.
Más información: ID de Bloques y Widgets.
Última actualización: 04.04.2025
o