El bloque Galería avanzada te permite incorporar fácilmente galerías de una o varias imágenes en tus páginas de SeedProd. Este bloque te ofrece un control total sobre cómo se presentan tus imágenes, con opciones para columnas, espaciado, superposiciones y efectos interactivos.
Ya sea que desees mostrar un portafolio, exhibir fotos de productos, crear una galería de fotos o destacar a los miembros de tu equipo, el bloque Galería avanzada ofrece la flexibilidad y las opciones de estilo que necesitas para crear colecciones de imágenes visualmente impresionantes que atraigan a tus visitantes.
Añadir el bloque Galería avanzada a tus páginas
Sigue estos pasos para añadir un bloque de galería avanzada a tu página 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 Galería avanzada se encuentra en Diseño > Avanzado y se puede arrastrar a cualquier sección de la página.
Paso 2: Configurar los ajustes de contenido
Una vez añadido, haz clic en el bloque 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: Elija entre el modo de visualización Único (una imagen) o Múltiple (galería de imágenes).
- Imagen / Elegir nueva imagen: Para el tipo Único, haga clic para seleccionar una imagen de su biblioteca multimedia.
- Añadir imágenes a la galería: Para el tipo «Múltiple», haga clic para seleccionar varias imágenes a la vez y crear su galería. Puede seleccionar tantas imágenes como necesite.
Seleccione «Único» para mostrar una sola imagen, o «Múltiple» para crear una galería con varias imágenes.
Haga clic en Añadir imágenes de la galería para seleccionar varias imágenes de su biblioteca multimedia.
Configuración:
- Columna: Establezca el número de columnas en la cuadrícula de su galería. Cuantas más columnas, más compacto será el diseño, mientras que con menos columnas cada imagen tendrá más protagonismo.
- 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 espaciados.
- Enlace: Elige dónde enlazan las imágenes al hacer clic en ellas. Las opciones son 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: Seleccione las proporciones para sus imágenes. Las opciones incluyen 1:1 (cuadrado), 3:2, 4:3, 9:16 (retrato), 16:9 (paisaje) y 21:9 (ultraancho). Esto garantiza que todas las imágenes se muestren de forma coherente.
- Tamaño de imagen: Elige qué tamaño de imagen quieres mostrar: miniatura, mediano o grande. Los tamaños más grandes muestran más detalles, pero tardan más en cargarse.
Superposición:
- Superposición de fondo: Activa o desactiva una superposición de color que aparece sobre tus imágenes. Esto ayuda a resaltar el texto y la información.
- Título: Elige qué mostrar como título superpuesto en las imágenes. Las opciones incluyen Ninguno, Título, Pie de foto, Texto alternativo o Descripción de los metadatos de la imagen.
- Descripción: Elija qué mostrar como superposición de descripción. Las opciones incluyen Ninguna, Título, Leyenda, Texto alternativo o Descripción.
- Color del texto: Establezca el color del texto superpuesto 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 superpuestos, incluyendo la familia tipográfica, el tamaño, el grosor y el estilo.
La sección Configuración te permite personalizar las columnas, el espaciado, los enlaces, la relación de aspecto, el tamaño de las imágenes y las opciones de superposición.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar el aspecto visual de tu bloque 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 inferior.
- Borde de imagen: habilita los bordes alrededor de las imágenes de tu galería.
- Radio del borde: controla la redondez de las esquinas de la imagen. Los valores más altos crean esquinas más redondeadas, mientras que el valor cero crea esquinas afiladas.
- Estilo del borde: Elija el aspecto del borde: Sólido (línea continua), Punteado (pequeños puntos) o Discontinuo (trayectos cortos).
- Color del borde: Seleccione el color para los bordes de su imagen.
- 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 espacio exterior alrededor del bloque de la galería (superior, derecho, inferior, izquierdo). Esto determina cuánto espacio aparece entre la galería y los elementos circundantes.
- Relleno: ajusta el espacio interior dentro del bloque de la galería (arriba, derecha, abajo, izquierda). Esto crea un 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. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade 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 utilizando el formato: nombre-del-atributo|valor (por ejemplo, data-gallery|portfolio).
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque de la galería en las pantallas de escritorio.
- Ocultar en tableta: Ocultar el bloque de galería en dispositivos tableta.
- Ocultar en dispositivos móviles: Ocultar 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 aparece en pantalla. Las opciones incluyen Rebotar, Aparecer gradualmente, Acercar, Girar y muchas más. Esto añade interés visual y llama la atención sobre tu galería.
La pestaña Avanzado ofrece opciones para sombras de imagen, bordes, espaciado, atributos, visibilidad del dispositivo y efectos de animación.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Galería avanzada y de personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque Galería avanzada a tu página! Este potente bloque te permite mostrar galerías de una o varias imágenes 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 público.