El bloque de Galería Avanzada te permite incorporar fácilmente galerías de imágenes únicas o múltiples en tus páginas de SeedProd. Este bloque te da control total sobre cómo se presentan tus imágenes, con opciones de columnas, espaciado, superposiciones y efectos interactivos.
Ya sea que estés mostrando un portafolio, exhibiendo fotos de productos, creando una galería de fotos o destacando a los miembros del equipo, el bloque de Galería Avanzada ofrece la flexibilidad y las opciones de estilo que necesitas para crear colecciones de imágenes visualmente impactantes que atraigan a tus visitantes.
Añadir el Bloque de Galería Avanzada a tus Páginas
Sigue estos pasos para añadir un bloque de Galería Avanzada a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Galería Avanzada en la sección deseada de tu página.
El bloque de Galería Avanzada se encuentra en Diseño > Avanzado y se puede arrastrar a cualquier sección de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Galería Avanzada para abrir su configuración. En la pestaña Contenido, puedes añadir imágenes y configurar cómo se muestra tu galería.
Imágenes de la Galería:
- Tipo: Elige entre el modo de visualización Única (una imagen) o Múltiple (galería de imágenes).
- Imagen / Elegir Nueva Imagen: Para el tipo Única, haz clic para seleccionar una imagen de tu biblioteca de medios.
- Añadir Imágenes de Galería: Para el tipo Múltiple, haz clic para seleccionar varias imágenes a la vez y crear tu galería. Puedes seleccionar tantas imágenes como necesites.
Selecciona Única para mostrar una imagen, o Múltiple para crear una galería de varias imágenes.
Haz clic en Añadir Imágenes de Galería para seleccionar varias imágenes de tu biblioteca de medios.
Ajustes:
- Columnas: Establece el número de columnas en la cuadrícula de tu galería. Más columnas crean un diseño más compacto, mientras que menos columnas dan más protagonismo a cada imagen.
- Espaciado: Controla el espacio entre las imágenes de tu galería. Ajusta este valor para crear diseños más compactos o más espaciosos.
- Enlace: Elige a dónde enlazan las imágenes al hacer clic. Las opciones incluyen Ninguno (sin enlace), Archivo multimedia (abre la imagen a tamaño completo) o URL personalizada (enlaza a una página específica).
- Relación de Aspecto: Selecciona las proporciones para tus imágenes. Las opciones incluyen 1:1 (cuadrado), 3:2, 4:3, 9:16 (vertical), 16:9 (horizontal) y 21:9 (ultrapanorámico). Esto asegura que todas las imágenes se muestren de forma consistente.
- Tamaño de Imagen: Elige qué versión del tamaño de tus imágenes mostrar: Miniatura, Mediana o Grande. Los tamaños más grandes muestran más detalles pero cargan más lentamente.
Superposición:
- Superposición de Fondo: Activa o desactiva una superposición de color que aparece sobre tus imágenes. Esto ayuda a que el texto y la información destaquen.
- Título: Elige qué mostrar como superposición de título en las imágenes. Las opciones incluyen Ninguno, Título, Pie de foto, Texto alternativo o Descripción de los metadatos de tu imagen.
- Descripción: Elige qué mostrar como superposición de la descripción. Las opciones incluyen Ninguna, Título, Pie de foto, Texto alternativo o Descripción
- Color del texto: Establece el color del texto de la superposición para garantizar un buen contraste y legibilidad
- Color de fondo: Elige el color del fondo de la superposición que aparece detrás del texto
- Tipografía del encabezado: Personaliza las propiedades de la fuente para los títulos de la superposición, incluyendo familia de fuentes, tamaño, grosor y estilo
La sección Configuración te permite personalizar columnas, espaciado, enlaces, relación de aspecto, tamaño de imagen y opciones de superposición.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque de Galería Avanzada:
Estilos:
- Sombra de imagen: Añade efectos de sombra a tus imágenes para darles profundidad. Elige entre Ninguna, Fina, Pequeña, Mediana, Grande, Extragrande, 2X Extragrande o Sombra de caída inferior
- Borde de imagen: Habilita bordes alrededor de las imágenes de tu galería
- Radio del borde: Controla la redondez de las esquinas de las imágenes. Valores más altos crean esquinas más redondeadas, mientras que cero crea esquinas afiladas
- Estilo del borde: Elige la apariencia del borde: Sólido (línea continua), Punteado (puntos pequeños) o Discontinuo (líneas cortas)
- Color del borde: Selecciona el color para los bordes de tus imágenes
- Ancho del borde: Establece el grosor individual del borde para cada lado (Superior, Derecho, Inferior, Izquierdo). Esto te permite crear efectos de borde únicos
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de galería (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre la galería y los elementos circundantes
- Relleno: Ajusta el espaciado interior dentro de tu bloque de galería (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el contenido de la galería y sus bordes
Atributos:
- ID CSS: Muestra el identificador único generado automáticamente para tu bloque de galería. Esta ID es creada automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript
- Clase personalizada: Agrega clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor de la galería. Introduce cada atributo en una nueva línea usando el formato: nombre-atributo|valor (por ejemplo, data-gallery|portfolio)
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de galería en pantallas de escritorio
- Ocultar en tableta: Oculta el bloque de galería en dispositivos tableta
- Ocultar en móvil: Oculta el bloque de galería en dispositivos móviles
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando la galería entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Rotación de entrada y muchas más. Esto añade interés visual y atrae la atención a tu galería
La pestaña Avanzado proporciona opciones para sombras de imagen, bordes, espaciado, atributos, visibilidad del dispositivo y efectos de animación.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Galería Avanzada y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Galería Avanzada a tu página! Este potente bloque te permite mostrar galerías de imágenes únicas o múltiples con control total sobre el diseño, el estilo y los efectos interactivos. Experimenta con diferentes diseños de columnas, relaciones de aspecto y estilos de superposición para crear una galería que se adapte perfectamente a tu marca y atraiga a tu audiencia.