Agregar webpart y configuración

1. Ve a la página donde deseas agregar el webpart «Scroll de imágenes».

2. Si la página aún no está en modo de edición, haz clic en Editar en la parte superior derecha de la página.

3. Coloca el cursor sobre o debajo de un webpart y en el centro de la sección donde deseas agregar el webpart para ver una línea con un + dentro de un círculo, como este:

5. Observa cómo se renderiza el webpart en ese momento. En este punto, el usuario necesita configurarlo para ingresar datos y definir otros parámetros.

6. Haz clic en «configurar» para abrir el panel de configuración.

7. Para configurar el elemento web, el usuario cuenta con dos secciones: Configuración y Datos.

Configuración

• Diseño: selecciona una orientación entre «Solo imagen» o «Imagen & tarjeta»
• Ancho de cada tarjeta: ancho de cada tarjeta. Valor entre 50 y 550
• Alto de cada tarjeta: alto de cada tarjeta. Valor entre 30 y 500
• Alto de contenido: diseño de texto plano con contenido «Marked» (opcional)
• Tamaño de la letra: selecciona entre «pequeño», «mediano» o «grande»
• Usar sombra: selecciona si las tarjetas tendrán sombra o no.
• Dirección: selecciona una orientación entre «Hacia la izquierda» o «Hacia la derecha»
• Velocidad: velocidad de la animación. Usa un número menor para que sea más lenta. Valor entre 1 y 40
• Texto del enlace: texto del ‘llamado a la acción’ cuando la tarjeta tiene un enlace

Datos

• Si el usuario selecciona “Mostrar datos a partir de una”: Colección de datos, diríjase al tema a continuación llamado «Configuración de datos estáticos».
• Si el usuario selecciona “Mostrar datos a partir de una”: Lista, diríjase al tema a continuación llamado «Configuración de datos dinámicos».

8. Guarda los cambios en la página que contiene el elemento web.

Configuración de datos estáticos

Después de seleccionar Mostrar datos a partir de una: Colección de datos, el usuario debe hacer clic en el botón «Gestionar colección de datos» para registrar el contenido de cada tarjeta.

• Orden: orden entre una tarjeta y otra

• Imagen: selecciona una imagen de las bibliotecas del sitio (obligatorio).

• Título / Encabezado: título de la tarjeta que aparece sobre el contenido (opcional)

• Contenido: diseño en texto plano con contenido «marcado» (opcional)

• Enlace (URL): URL que se abrirá al hacer clic en el botón CTA, después del contenido (opcional)

• Pestaña: marcar si se desea abrir en una nueva pestaña o en la misma pestaña

• Color de fondo: seleccionar un color de fondo según el diseño elegido

• Color del texto: seleccionar un color de texto según el diseño elegido

Código «Marked»: Si necesitas agregar estilos al texto, utiliza estos consejos.

• Usa _texto_ para letra en cursiva o itálica
• Usa **texto** para letra en negrita
• Usa { color: HEX o Nombre} { text0 } para cambiar el color de la fuente
  Ejemplo:
  Pos 1 🡺 Cras sagittis. _Donec id_ justo. **Quisque malesuada** placerat nisl. Nulla porta dolor. {color:darkred}{Ut non enim} – {color:#0000ff}{eleifend felis pretium}

Configuración de datos dinámicos

Después de seleccionar Mostrar datos a partir de una: Lista, los usuarios deben seleccionar un sitio para buscar el repositorio de listas.

• Sitio: cualquier sitio dentro del tenant

• Lista: cualquier lista o biblioteca del sitio seleccionado, incluyendo eventos y páginas

• Imagen: campo relacionado con la URL de la imagen desde los recursos del sitio (obligatorio); puedes elegir el campo de imagen en una lista, la ruta URL en una biblioteca o la URL de la imagen del banner en eventos o páginas.

• Título / Encabezado: campo relacionado con el título de la tarjeta sobre el contenido (obligatorio)

• Contenido: campo relacionado con el texto principal que se desplazará de un extremo al otro

• Enlace (URL): campo relacionado con la URL que se abrirá al hacer clic en el contenido

• Color de fondo: campo relacionado con el color de fondo según el diseño. Si está vacío, se usa el color primario del tema

• Color del texto: campo relacionado con el color del texto según el diseño. Si está vacío, se usa el color del cuerpo del tema

• Cantidad máxima de elementos de lista: número de tickers que se mostrarán, según los elementos de la lista

• Filtrar lista por: campo para aplicar filtros según los siguientes parámetros: Tipo de comparación del filtro, Valor del filtro y Ordenar por