# AX - Galería

## Descripción general

**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 (multicolumna) o galería (exhibición de imágenes).

Úsalo para mostrar fotos de productos, portafolios de proyectos, imágenes de casos de estudio, colecciones de recursos o cualquier contenido visual que los usuarios del portal necesiten explorar. Configura el estilo del 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 tu portal necesite atractivas presentaciones de imágenes o contenido

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FJToiKLlnA4RZIeE7I0Ni%2F2024-02-07_21-13-18%20(1).gif?alt=media&#x26;token=76515588-cbb1-4dcc-9004-5001d1189ff5" alt=""><figcaption></figcaption></figure>

***

## Primeros pasos

Usa este sencillo tutorial para aprender los conceptos básicos del componente Galería y comenzar a crear tus casos de uso.

{% @arcade/embed flowId="QrGyk84126ycSIM6P0oX" url="<https://app.arcade.software/share/QrGyk84126ycSIM6P0oX>" %}

***

## Conectarse a los datos de Salesforce

La fuente de datos es donde defines el contenido de tu carrusel. Hay dos tipos principales de fuentes de datos: **Manual** y **Consulta**.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F81HTiPtGZjjWPmHbMDF5%2F2024-02-07_21-14-11.png?alt=media&#x26;token=2179494c-b3d0-4570-b763-3f336626fb55" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th>Tipo de fuente de datos</th><th width="248.33333333333331">Descripción</th><th>Cuándo usar</th></tr></thead><tbody><tr><td><strong>Fuente de datos manual</strong></td><td>Implica introducir manualmente los datos de los elementos de la galería. Útil para contenido estático o elementos predefinidos.</td><td>Ideal para contenido que no cambia con frecuencia o para una configuración rápida con elementos específicos.</td></tr><tr><td><strong>Consultar fuente de datos</strong></td><td>Permite obtener datos mediante una consulta, extrayendo varios registros/puntos de datos de Salesforce.</td><td>Ideal para la recuperación de datos complejos o cuando se obtiene de una fuente.</td></tr></tbody></table>

## **Establecer una variante**

### **Carrusel**

La variante Carrusel ofrece una forma dinámica y atractiva de mostrar tu contenido, imágenes o tarjetas. Está diseñada para mostrar elementos secuencialmente en 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.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FSDPeJtaR0mY1bFLE2Dic%2F2024-02-07_21-17-09.png?alt=media&#x26;token=76edae56-e5be-4800-9299-e0ce0c69c213" alt=""><figcaption></figcaption></figure>

**Cuándo usar:** Utiliza la variante Carrusel cuando quieras:

* 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 tu sitio.

**Características:**

* **Controles de navegación:** Navega por el carrusel con controles intuitivos como botones de flecha o puntos de paginación.
* **Opción de reproducción automática:** Configura el carrusel para que recorra los elementos automáticamente, con la posibilidad de pausar y reanudar.
* **Apariencia personalizable:** Adapta el aspecto del carrusel al diseño de tu sitio ajustando elementos como los efectos de transición y la duración de la visualización.

### **Pestañas**

La variante Pestañas introduce un enfoque organizado y tabulado para la presentación del contenido. Esta variante es ideal para categorizar información, ofreciendo un diseño limpio y estructurado que permite a los usuarios navegar rápidamente y acceder a diferentes secciones de contenido.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FXPjifQ0PqC8J5k1SVBrq%2F2024-02-07_21-18-03.png?alt=media&#x26;token=88201252-88f4-4360-8cf7-135bab8bf714" alt=""><figcaption></figcaption></figure>

**Cuándo usar:** Considera la variante Pestañas cuando necesites:

* Presentar información categorizada en un formato claro y segmentado.
* Permitir que los usuarios cambien fácilmente entre diferentes secciones de contenido sin salir de la página.
* Organizar contenido como especificaciones de productos, categorías de servicios o pestañas informativas de una manera fácil de usar.

**Características:**

* **Contenido segmentado:** Organiza tu contenido en pestañas claramente definidas, facilitando a los usuarios encontrar y ver diferentes secciones.
* **Navegación fácil de usar:** Permite a los usuarios cambiar sin problemas entre pestañas, garantizando una interacción fluida e intuitiva.
* **Diseño personalizable:** Adapta la apariencia de las pestañas para alinearlas con tu marca y la estética de tu sitio, modificando elementos como las etiquetas de las pestañas, el diseño y las combinaciones de colores.

### **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 darles el mismo énfasis, como:

* Listados de productos
* Perfiles de miembros del equipo
* Previsualizaciones de entradas de blog

**Características**

* Número de columnas personalizable
* Posibilidad de definir el espaciado (separación) entre elementos
* Opciones para imágenes, títulos, descripciones y botones de llamada a la acción dentro de cada celda de la cuadrícula

### **Galería**

Un diseño visualmente orientado que muestra las imágenes de forma destacada.

**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 caja de luz para hacer zoom en las imágenes
* Potencial para diseños creativos y efectos al pasar el cursor

## Interacciones

La sección "Enlace a" determina qué sucede cuando un usuario hace clic en un elemento de tu Galería Avonni. Úsala para dirigir a los usuarios a páginas detalladas, abrir nuevo contenido o activar otras acciones.

**Ejemplo:**

* Por ejemplo, muestra casas destacadas en una galería y permite a los usuarios hacer clic en cada imagen para ver más detalles en una página aparte.

***

## Apariencia de estilo

Explora los atributos de estilo de la Galería Avonni, cada uno diseñado para refinar la presentación visual de tu contenido, ya sea que uses la variante Carrusel o Pestañas:

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FtiBUANZLlzY5aTG4C29z%2F2024-02-07_21-18-53.png?alt=media&#x26;token=5eb49b41-6c43-4f90-bc97-acc5b1fabce7" alt=""><figcaption></figcaption></figure>

1. **Tamaño:** Ajusta las dimensiones generales de la galería para que encajen perfectamente en tu diseño.
2. **Borde:** Personaliza el estilo, el ancho y el color del borde para enmarcar eficazmente el contenido de tu galería.
3. **Subtítulo:** Da estilo al texto del subtítulo asociado con cada elemento para lograr claridad y énfasis.
4. **Título:** Modifica el texto del título de cada elemento de la galería para que destaque o se alinee con el tema de tu sitio.
5. **Adapta la apariencia del área principal de contenido de cada elemento de la galería para asegurar una** presentación visual coherente.
6. **Multimedia:** Personaliza cómo se muestran los recursos multimedia (imágenes o videos) para asegurarte de que complementen el diseño general de tu galería.
7. **Elemento de presentación de diapositivas:** Da estilo a los elementos individuales del carrusel, incluyendo fondo, alineación y espaciado.
8. **Título del elemento de presentación de diapositivas:** Personaliza la apariencia de los títulos dentro de cada elemento del carrusel para lograr un impacto y reconocimiento inmediatos.
9. **Descripción del elemento de presentación de diapositivas:** Para mejorar la legibilidad, adapta la fuente, el tamaño y el color de las descripciones en los elementos del carrusel.
10. **Imagen de la presentación de diapositivas:** Para mantener la coherencia visual, ajusta el tamaño y el borde de las imágenes del carrusel.
11. **Indicador activo de la presentación de diapositivas:** Da estilo al indicador del elemento que se está viendo actualmente, haciéndolo prominente y distintivo.
12. **Indicador inactivo de la presentación de diapositivas:** Personaliza los indicadores de los elementos no activos para asegurar una navegación fluida por el carrusel.
13. **Botón de navegación de la presentación de diapositivas:** Adapta la apariencia de los botones de navegación, asegurando que sean fáciles de usar y que coincidan con el estilo de tu galería.
14. **Pestaña:** Da estilo a las pestañas individuales para diferenciar entre secciones de contenido activas e inactivas.
15. **Borde de la pestaña:** Personaliza el borde de cada pestaña para lograr una segmentación clara y atractivo visual.
16. **Borde de la pestaña activa/hover:** Da estilo al borde de las pestañas activas o sobre las que se pasa el cursor para guiar visualmente a los usuarios en sus interacciones.
17. **Fondo de la pestaña:** Ajusta el color de fondo o la imagen de las pestañas para alinearlos con el tema general de tu sitio.
18. **Etiqueta de la pestaña:** Personaliza la fuente, el tamaño y el color de las etiquetas de las pestañas para lograr claridad y armonía visual.
19. **Subtítulo de la pestaña:** Adapta la apariencia de los subtítulos de las pestañas, proporcionando de forma coherente contexto o información adicional.

***

## Ejemplos de casos de uso

### Ejemplo 1: Carrusel de noticias de clientes

{% @arcade/embed flowId="pOjxSsq8rQ3YgZFvjMgr" url="<https://app.arcade.software/share/pOjxSsq8rQ3YgZFvjMgr>" %}

Mantén a tus clientes informados y comprometidos mostrando tus artículos más recientes directamente en la página de inicio de Experience Cloud. El componente AX Gallery facilita mostrar un carrusel de noticias dinámico y rico en imágenes que se actualiza automáticamente a medida que se publica nuevo contenido.

***

#### **Lo que lograrás**

* **Contenido nuevo de un vistazo:** Muestra tus artículos más recientes de Knowledge en la página de inicio, completos con imágenes, para que los visitantes no se pierdan ninguna actualización.
* **Navegación sin esfuerzo:** Permite a los clientes desplazarse por las noticias de la empresa en un diseño de carrusel limpio y estructurado.
* **Filtrado dirigido:** Muestra solo los artículos de Noticias aprovechando un campo de lista de selección personalizado, manteniendo el carrusel enfocado y relevante.

***

#### **Antes de comenzar**

* **`ImageId__c` campo:** Crea un campo de texto en el objeto Knowledge para almacenar el ID de Content Document de la imagen de cada artículo.
* **`Type__c` campo:** Crea un campo de lista de selección en el objeto Knowledge para categorizar los artículos, asegurándote de que el **Noticias** valor exista y se aplique a tus artículos.

***

#### **Cómo configurarlo**

{% stepper %}
{% step %}

#### **Añade el componente a tu página**

* Arrastra el **AX Gallery** componente a la página que desees en Experience Builder.
  {% endstep %}

{% step %}

#### **Personaliza la visualización del componente**

* Establece el **Título** en `Carrusel de noticias`.
* Establece el **Subtítulo** en `Explora nuestros artículos semanales`.
* Establece el **Número de columnas** en `3`.
  {% endstep %}

{% step %}

#### **Configura tu fuente de datos**

* Crea una nueva consulta en la configuración de la fuente de datos.
* Selecciona **Knowledge** como objeto (asegúrate de seleccionar la segunda opción de Knowledge en la lista).
* Agrega un filtro: **Type\_\_c es igual a** `Noticias`.
* Establece el orden de clasificación en **Fecha de creación, descendente** para que tus artículos más recientes aparezcan siempre primero.
  {% endstep %}

{% step %}

#### **Configura la asignación de datos**

* Mapea **Título** al campo de Knowledge `Título` .
* Mapea **Fuente de multimedia** en `ImageId__c` para cargar las imágenes del artículo.
* Establece el **Tasa de reproducción** en `5`.
  {% endstep %}

{% step %}

#### **Previsualiza tu trabajo**

* Usa la vista previa de Experience Builder para confirmar que tu carrusel muestra los artículos, imágenes y diseño correctos antes de publicarlo.
  {% endstep %}
  {% endstepper %}

***

### Ejemplo 2: Galería de productos de clientes

{% @arcade/embed flowId="aIu9ZNuteXdewe19LJL0" url="<https://app.arcade.software/share/aIu9ZNuteXdewe19LJL0>" %}

Ofrece a tus clientes una forma visualmente atractiva de descubrir tu catálogo de productos, directamente desde tu página de inicio. Al combinar el componente AX Gallery con tus datos de Product, puedes crear un carrusel llamativo que destaque los productos principales y guíe a los visitantes directamente a las páginas de detalle del producto.

***

#### **Lo que lograrás**

* **Una exhibición visual de productos:** Muestra auriculares destacados en un carrusel rico en imágenes que invita a explorar.
* **Navegación fluida:** Permite a los clientes pasar del carrusel directamente a las páginas de detalle de cada producto con facilidad.
* **Una experiencia de inicio seleccionada:** Resalta los productos que más importan mostrando solo tu catálogo destacado en la página de inicio.

***

#### **Antes de comenzar**

* **`Type__c` campo:** Crea un campo de lista de selección en el objeto Product2 y asegúrate de que el **Auriculares** valor exista, para que puedas filtrar el carrusel a los productos correctos.
* **`ContentDocumentId__c` campo:** Crea un campo de texto en el objeto Product2 para almacenar la URL de la imagen de cada producto.

***

#### **Cómo configurarlo**

{% stepper %}
{% step %}

#### **Añade el componente a tu página**

* Arrastra el **AX Gallery** componente a la página que desees en Experience Builder.
  {% endstep %}

{% step %}

#### **Personaliza la visualización del componente**

* Establece el **Título** en `Carrusel de productos`.
* Establece el **Subtítulo** en `¡Explora nuestros productos destacados!`
* Establece el **Número de columnas** en `3`.
  {% endstep %}

{% step %}

#### **Configura tu fuente de datos**

* Crea una nueva consulta en la configuración de la fuente de datos.
* Selecciona **Producto** como objeto.
  {% endstep %}

{% step %}

#### **Configura la asignación de datos**

* Mapea **Título** a `Nombre del producto` .
* Mapea **Fuente de multimedia** en `ContentDocumentId__c` para mostrar la imagen de cada producto.
* Establece el **Tasa de reproducción** en `5`.
  {% endstep %}

{% step %}

#### **Previsualiza tu trabajo**

* Usa la vista previa de Experience Builder para confirmar que tus productos, imágenes y diseño del carrusel aparecen como se espera antes de publicarlo.
  {% endstep %}
  {% endstepper %}