Crear y personalizar una galería de tarjetas en Power Pages

Una galería de tarjetas es un control de datos que muestra los datos de una tabla y una vista en tarjetas. Puede usar el estudio de diseño o código Liquid para agregar, aplicar estilo y configurar una galería de tarjetas en sitios de Power Pages.

Agregar una galería de tarjetas

Para agregar una galería de tarjetas con el estudio de diseño:

1. Abra el estudio de diseño para editar el contenido y los componentes del sitio.

   Propina

   También puede agregar una galería de tarjetas usando código.

2. Vaya al espacio de trabajo Páginas.

3. Seleccione la página que desea editar.

4. Seleccione la sección en la que desea agregar la galería de tarjetas.

5. Pase el cursor sobre un área editable del lienzo y luego seleccione el icono Galería de tarjeta en el panel de componentes.

   

Elegir un diseño

Seleccione el botón Diseño de galería de tarjetas para elegir cualquiera de los cuatro diseños disponibles.

También puede elegir entre galerías de tarjetas existentes si están disponibles.

Configure el origen de datos de su galería de tarjetas

Para configurar el origen de datos de su galería de tarjetas:

1. Seleccione el botón Diseño de galería de tarjetas y elija Datos.

   

2. Seleccione una tabla existente en el campo de búsqueda de origen de datos.

3. Seleccione una vista correspondiente en el menú desplegable Vista .

4. Para cada elemento de la galería de tarjetas (imagen, título, descripción, botón, hipervínculo de texto), elija la opción Seleccionar datos para vincularlo a una columna de vista.

   Nota

   Para los elementos de botón e hipervínculo, debe configurar dos opciones: nombre y dirección URL. Ambas configuraciones deben estar vinculadas a una columna de vista.

Desactive el interruptor de alternancia junto a cualquier elemento que no desee incluir.

Puede reorganizar la posición de cada elemento seleccionando el icono a la izquierda del interruptor de palanca y arrastrando el elemento a la posición deseada.

Tipos de columna admitidos

Cada elemento admite tipos de datos específicos.

Tipos de columna admitidos

Cada elemento admite tipos de datos específicos.

Elemento	Tipos de datos
Nombre	Texto (una sola línea de texto) Teléfono Número entero Decimal Buscar Solo fecha Fecha y hora
Descripción	Texto enriquecido Área de texto (varias líneas de texto) Teléfono Número entero Decimal Solo fecha Fecha y hora
Image	Archivo - imagen
Button	Etiqueta de botón: Texto (una sola línea de texto) Fragmento de contenido Botón URL: Dirección URL Página web
Hipervínculo de texto	Etiqueta de hipervínculo de texto: Texto (una sola línea de texto) Fragmento de contenido URL del hipervínculo de texto: Dirección URL Página web
Texto personalizado	Texto (una sola línea de texto)

Diseñe y configure su galería de tarjetas

Puede darle estilo a su galería de tarjetas configurando propiedades de estilo a nivel de galería, tarjeta y elemento.

Filtro de búsqueda

Active/desactive la opción Habilitar búsqueda para agregar o eliminar el filtrado de búsqueda.

Obtener una vista previa de su galería de tarjetas

Después de configurar su galería de tarjetas, puede ver la vista previa en lienzo con datos de ejemplo.

Nota

Debe establecer permisos de tabla para permitir que los visitantes del sitio vean e interactúen con su galería de tarjetas.

Agregar una galería de tarjetas usando código

También puede usar Liquid para editar su galería de tarjetas.

Agregar una galería de tarjetas nueva

Para agregar una nueva galería de tarjetas sin ningún enlace de datos o configuración, use la siguiente etiqueta de Liquid:

{% codecomponent name:Pages.CardGallery %}

Agregar una galería de tarjetas existente

Para agregar una galería de tarjetas existente, use la etiqueta Liquid y reemplace {your card gallery id} con la identificación de la galería de tarjetas existente:

{% codecomponent name:Pages.CardGallery id: '{your card gallery id}' %}