AX - Galería
Resumen
AX - Galería es un componente de Experience Cloud que muestra imágenes y contenido en cuatro estilos de diseño en las páginas de Experience Sites: carrusel (presentación de diapositivas), pestañas (secciones organizadas), cuadrícula (varias columnas) o galería (exhibición de imágenes).
Úselo para mostrar fotos de productos, portafolios de proyectos, imágenes de estudios de caso, colecciones de recursos o cualquier contenido visual que los usuarios del portal necesiten explorar. Configure el estilo de diseño, la navegación y las fuentes de imágenes en Experience Builder sin código.
Perfecto para catálogos de productos, portafolios visuales, bibliotecas de imágenes, exhibiciones de antes/después o cualquier lugar donde su portal necesite presentaciones atractivas de imágenes o contenido
Conectarse a datos de Salesforce
La Fuente de Datos es donde define el contenido de su carrusel. Hay dos tipos principales de fuentes de datos: Manual y Consulta.
Fuente de Datos Manual
Implica ingresar manualmente los datos de los elementos de la galería. Útil para contenido estático o elementos predefinidos.
Ideal para contenido que no cambia con frecuencia o para una configuración rápida con elementos específicos.
Fuente de Datos por Consulta
Permite obtener datos mediante una consulta, extrayendo diversos registros/puntos de datos desde Salesforce.
Ideal para recuperación de datos compleja o cuando se está obteniendo la fuente.
Establecer una variante
Carrusel
La variante Carrusel ofrece una forma dinámica y atractiva de mostrar su contenido, imágenes o tarjetas. Está diseñada para mostrar elementos secuencialmente en un formato de presentación de diapositivas, lo que la convierte en una excelente opción para resaltar contenido destacado, imágenes de productos o anuncios importantes.
Cuándo usar: Utilice la variante Carrusel cuando quiera:
Captar la atención del usuario con una presentación visualmente atractiva.
Mostrar varios elementos o imágenes de manera eficiente en el espacio.
Crear banners rotativos o secciones de contenido destacado en su sitio.
Características:
Controles de navegación: Navegue por el carrusel usando controles intuitivos como botones de flecha o puntos de paginación.
Opción de reproducción automática: Configure el carrusel para que recorra los elementos automáticamente, con la capacidad de pausar y reanudar.
Apariencia personalizable: Adapte el aspecto del carrusel para que coincida con el diseño de su sitio, ajustando elementos como efectos de transición y duración de la visualización.
Pestañas
La variante Pestañas introduce un enfoque organizado y tabulado para la presentación de contenido. Esta variante es ideal para categorizar información, ofreciendo un diseño limpio y estructurado que permite a los usuarios navegar y acceder rápidamente a diferentes secciones de contenido.
Cuándo usar: Considere la variante Pestañas cuando necesite:
Presentar información categorizada en un formato claro y segmentado.
Permitir a los usuarios cambiar fácilmente entre diferentes secciones de contenido sin salir de la página.
Organizar contenido como especificaciones de productos, categorías de servicio o pestañas informativas de manera fácil de usar.
Características:
Contenido segmentado: Organice su contenido en pestañas claramente definidas, facilitando a los usuarios encontrar y ver diferentes secciones.
Navegación fácil para el usuario: Permita a los usuarios cambiar sin problemas entre pestañas, garantizando una interacción fluida e intuitiva.
Diseño personalizable: Adapte la apariencia de las pestañas para alinearlas con su marca y la estética del sitio, modificando elementos como las etiquetas de pestañas, el diseño y esquemas de color.
Cuadrícula
Presenta el contenido en un diseño estructurado de varias columnas. Cada elemento ocupa una celda dentro de la cuadrícula.
Cuándo usar: Ideal para mostrar una colección de elementos donde se desea un énfasis equitativo, como:
Listados de productos
Perfiles de miembros del equipo
Vistas previas de entradas de blog
Características
Número personalizable de columnas
Capacidad para definir el espaciado (separación) entre elementos
Opciones para imágenes, títulos, descripciones y botones de llamado a la acción dentro de cada celda de la cuadrícula
Galería
Un diseño centrado en lo visual que muestra imágenes de forma prominente.
Cuándo usar: Ideal para resaltar contenido basado en imágenes, como:
Portafolios de fotografía
Galerías de productos
Contenido destacado centrado en imágenes
Características
Enfoque en imágenes grandes y de alta calidad
Opciones para incluir subtítulos o funcionalidad de lightbox para ampliar las imágenes
Potencial para diseños creativos y efectos al pasar el cursor
Interacciones
La sección "Enlazar a" determina lo que sucede cuando un usuario hace clic en un elemento de su Avonni Gallery. Utilícelo para dirigir a los usuarios a páginas detalladas, abrir nuevo contenido o desencadenar otras acciones.
Ejemplo:
Por ejemplo, muestre casas destacadas en una galería y permita que los usuarios hagan clic en cada imagen para ver más detalles en una página aparte.
Apariencia y estilo
Explore los atributos de estilo para la Avonni Gallery, cada uno diseñado para refinar la presentación visual de su contenido, ya sea que esté utilizando la variante Carrusel o Pestañas:
Tamaño: Ajuste las dimensiones generales de la galería para que encaje perfectamente dentro de su diseño.
Borde: Personalice el estilo del borde, el ancho y el color para enmarcar eficazmente el contenido de su galería.
Subtítulo: Estilice el texto del subtítulo asociado a cada elemento para mayor claridad y énfasis.
Título: Modifique el texto del título de cada elemento de la galería para que destaque o se alinee con el tema de su sitio.
Contenido: Adapte la apariencia del área de contenido principal dentro de cada elemento de la galería para una presentación visual coherente.
Medios: Personalice cómo se muestran los medios (imágenes o videos), asegurando que complementen el diseño general de su galería.
Elemento de la presentación: Estilice elementos individuales en el carrusel, incluyendo fondo, alineación y espaciado.
Título del elemento de la presentación: Personalice la apariencia de los títulos dentro de cada elemento del carrusel para lograr un impacto y reconocimiento inmediatos.
Descripción del elemento de la presentación: Para mejorar la legibilidad, adapte la fuente, el tamaño y el color de las descripciones en los elementos del carrusel.
Imagen de la presentación: Para consistencia visual, ajuste el tamaño y el borde de las imágenes en el carrusel.
Indicador activo de la presentación: Estilice el indicador del elemento que se está visualizando actualmente, haciéndolo prominente y distintivo.
Indicador inactivo de la presentación: Personalice los indicadores para los elementos no activos para asegurar una navegación fluida por el carrusel.
Botón de navegación de la presentación: Adapte la apariencia de los botones de navegación, asegurando que sean amigables para el usuario y coincidan con el estilo de su galería.
Pestaña: Estilice pestañas individuales para diferenciar entre secciones de contenido activas e inactivas.
Borde de la pestaña: Personalice el borde de cada pestaña para una segmentación clara y atractivo visual.
Borde de pestaña activa/hover: Estilice el borde de las pestañas activas o al pasar el cursor para guiar visualmente a los usuarios durante sus interacciones.
Fondo de la pestaña: Ajuste el color de fondo o la imagen de las pestañas para que se alineen con el tema general de su sitio.
Etiqueta de la pestaña: Personalice la fuente, el tamaño y el color de las etiquetas de las pestañas para mayor claridad y armonía visual.
Subtítulo de la pestaña: Adapte la apariencia de los subtítulos de las pestañas, proporcionando de manera coherente contexto o información adicional.
Última actualización
¿Te fue útil?