Titulares de carrusel carousel-banners

Los titulares de carrusel permiten a los especialistas en marketing impulsar la conversión creando fácilmente contenido promocional giratorio interactivo y entregándolo en cualquier pantalla.

Crear y modificar contenido destacado en titulares promocionales puede llevar mucho tiempo, lo que limita la capacidad de publicar rápidamente contenido nuevo o de segmentarlo. Los titulares de carrusel permiten crear o modificar rápidamente titulares giratorios. Puede añadir interactividad, como puntos interactivos que se vinculan a detalles del producto o recursos relacionados, y enviarlos a cualquier pantalla, lo que le permite introducir nuevo contenido promocional en el mercado más rápido.

Los titulares de carrusel se designan mediante un titular con la palabra CONJUNTO DE CARRUSEL

chlimage_1-438

En el sitio web, un banner de carrusel puede tener el siguiente aspecto:

chlimage_1-439

Aquí puede navegar por las imágenes (haciendo clic en los números). Además, las diapositivas giran automáticamente en función de un intervalo de tiempo que puede personalizar. Las imágenes que agrega en los titulares del carrusel admiten puntos interactivos y mapas de imagen, donde los usuarios pueden seleccionar o ir a un hipervínculo o acceder a una ventana de vista rápida.

En este ejemplo, un usuario ha pulsado o hecho clic en un mapa de imagen y ha accedido a la ventana de vista rápida para ver si tiene guantes:

chlimage_1-440

Reproducir un tutorial en cómo se crean los titulares del carrusel(10 minutos y 33 segundos) También aprenderá a obtener una vista previa, editar y distribuir titulares de carrusel.

NOTE
Los usuarios no administrativos deben agregarse al dam-users para poder crear o editar titulares de carrusel. Si tiene problemas para crear o editar, consulte con el administrador del sistema, que puede agregarle al dam-users grupo.

Para ayudarle a ponerse en marcha rápidamente con titulares de carrusel:

  1. Identificación de variables de puntos interactivos y mapas de imagen (solo para clientes que utilizan Experience Manager Assets + Dynamic Media)

    Comience identificando las variables dinámicas utilizadas por la implementación de vista rápida existente para que pueda introducir correctamente los puntos interactivos y los datos del mapa de imagen durante el proceso de creación del banner de carrusel en Adobe Experience Manager Assets.

    note note
    NOTE
    Si es cliente de Experience Manager Sites o de comercio electrónico, puede utilizar la función integrada para navegar a las páginas de productos y buscar los SKU (código de referencia) existentes en el catálogo de productos. No es necesario introducir manualmente las variables de puntos interactivos o mapas de imagen. Ver información sobre configurar eCommerce.
    Si es cliente de Experience Manager Assets y Dynamic Media, debe introducir manualmente los datos de las zonas interactivas y los mapas de imagen y, a continuación, integrar la URL publicada o el código incrustado con el sistema de administración de contenido de terceros.
  2. Opcional: Cree un ajuste preestablecido de visualizador de conjuntos de carrusel, según sea necesario.

    Si es administrador, puede personalizar el comportamiento y el aspecto del carrusel creando su propio ajuste preestablecido de visualizador de carrusel. La principal ventaja es que puede reutilizar este ajuste preestablecido de visualizador personalizado para varios carruseles. Sin embargo, los usuarios pueden personalizar de forma opcional el comportamiento y el aspecto del carrusel directamente durante la creación. Este método es el preferido cuando se desea un diseño específico para un carrusel determinado.

  3. Cargar un titular de imagen.

    Cargue los titulares de las imágenes que desee hacer interactivos.

  4. Crear conjuntos de carrusel.

    En los conjuntos de carruseles, los usuarios navegan por las imágenes del titular y seleccionan zonas interactivas o mapas de imagen para acceder al contenido relevante.

    Para crear un conjunto de carrusel en Assets, seleccione Crear, luego seleccione Conjuntos de carrusel. Agregue recursos a cada diapositiva y seleccione Guardar. También puede editar el aspecto y el comportamiento del carrusel directamente en el editor.

  5. Añadir puntos interactivos o mapas de imagen a un titular de imagen.

    Añada una o más zonas interactivas o mapas de imagen a un titular de imagen y asócielos a una acción, como un vínculo, una vista rápida o un fragmento de experiencia. Después de agregar puntos interactivos o mapas de imagen, finalice esta tarea publicando el conjunto de carrusel. La publicación crea el código incrustado que puede utilizar para copiar y aplicar en la página de aterrizaje del sitio web.

    Consulte (Opcional) Previsualizar titulares de carrusel - Opcional. Si lo desea, puede ver una representación del conjunto de carrusel y probar su interactividad.

  6. Publicar titulares de carrusel.

    Publica un conjunto de carrusel como lo haría con cualquier recurso. En Assets, vaya al conjunto de carrusel, selecciónelo y seleccione Publish. La publicación de un conjunto de carrusel activa la URL y la cadena de incrustación.

  7. Realice una de las siguientes acciones:

Para editar los conjuntos de carrusel, consulte edición de conjuntos de carrusel. Además, puede ver y editar Propiedades del conjunto de carrusel.

Identificación de variables de puntos interactivos y mapas de imagen identifying-hotspot-and-image-map-variables

Comience identificando las variables dinámicas utilizadas por la implementación de vista rápida existente para que pueda introducir correctamente los puntos interactivos o los datos del mapa de imagen durante el proceso de creación del conjunto de carrusel en Experience Manager Assets.

Cuando añada puntos interactivos o mapas de imagen a una imagen de titular en Experience Manager Assets, asigne un SKU y variables adicionales opcionales a cada punto interactivo o mapa de imagen. Estas variables se utilizan más adelante para hacer coincidir puntos interactivos o mapas de imagen con contenido de vista rápida.

NOTE
Si es cliente de Experience Manager Sites o de comercio electrónico Experience Manager, omita este paso. No es necesario identificar manualmente las variables de puntos interactivos o mapas de imagen; puede utilizar la integración con Comercio electrónico para la integración del producto. Ver información sobre configurar eCommerce. Además, puede utilizar el componente interactivo y agregarlo a la página web.
Si es cliente de Experience Manager Assets o Media, publica la URL o el código incrustado y, a continuación, lo integra con el sistema de administración de contenido de terceros e identifica manualmente los puntos interactivos y los mapas de imagen.

Es importante identificar correctamente el número y el tipo de variables que se asociarán a los datos de puntos interactivos o mapas de imagen. Cada punto interactivo o mapa de imagen añadido a una imagen de titular debe llevar suficiente información para identificar de forma inequívoca el producto en el sistema back-end existente. Al mismo tiempo, cada punto interactivo o mapa de imagen no debe incluir más datos de los necesarios. El motivo es que esto haría que el proceso de entrada de datos fuera demasiado complejo y la administración continua de puntos interactivos o mapas de imágenes fuera más propensa a errores.

Existen diferentes maneras de identificar un conjunto de variables que se utilizarán para los datos de puntos interactivos o mapas de imagen.

A veces basta con consultar con los especialistas de TI responsables de la implementación de Quickview existente. Es probable que sepan cuál es el conjunto mínimo de datos necesario para identificar Quickview en el sistema. Sin embargo, normalmente también es posible analizar simplemente el comportamiento existente del código front-end.

La mayoría de las implementaciones de Quickview utilizan el siguiente paradigma:

  • El usuario activa un elemento de interfaz de usuario en el sitio web. Por ejemplo, al pulsar un botón Quickview botón.
  • El sitio web envía una solicitud Ajax al back-end para cargar los datos o el contenido de Quickview, si es necesario.
  • Los datos de vista rápida se traducen al contenido como preparación para su representación en la página web.
  • Finalmente, el código front-end procesa visualmente dicho contenido en la pantalla.

A continuación, el método consiste en visitar diferentes áreas del sitio web existente donde se ha implementado la función de vista rápida. Almacene en déclencheur la vista rápida y capture la URL de Ajax que envía la página web para cargar los datos o el contenido de la vista rápida.

Normalmente no es necesario utilizar herramientas de depuración especializadas. Los navegadores web modernos cuentan con inspectores web que hacen un trabajo adecuado. A continuación se muestran algunos ejemplos de exploradores web que incluyen inspectores web:

  • Para ver todas las solicitudes HTTP salientes en Google Chrome, pulse F12 (Windows) o Comando-Opción-I (Mac) para abrir el panel Herramientas para desarrolladores y, a continuación, seleccione la pestaña Red.
  • En Firefox, puede activar el complemento Firebug pulsando F12 (Windows) o Comando-Opción-I (Mac) y utilizar su pestaña Red, o bien puede utilizar la herramienta Inspector integrada y su pestaña Red.

Cuando la monitorización de red está activada en el navegador, almacene en déclencheur la vista rápida en la página.

Ahora busque la URL de Ajax de vista rápida en el registro de red y copie la URL grabada para un análisis futuro. Normalmente, cuando se almacena en déclencheur la vista rápida, hay numerosas solicitudes que se envían al servidor. Normalmente, la URL de Ajax de vista rápida es una de las primeras en la lista. Tiene una parte de cadena de consulta o una ruta compleja y su tipo MIME de respuesta es text/html, text/xml, o text/javascript.

Durante este proceso, es importante visitar diferentes áreas del sitio web, con diferentes categorías y tipos de productos. El motivo es que las direcciones URL de Quickview tienen partes que son comunes para una categoría de sitio web determinada, pero que solo cambian si visita una zona diferente del sitio web.

En el caso más simple, la única parte de la variable en la URL de vista rápida es el SKU del producto. En este caso, el valor SKU es el único fragmento de datos que necesita para añadir puntos interactivos o mapas de imagen a la imagen del titular.

Sin embargo, en casos complejos, la dirección URL de vista rápida tiene diferentes elementos que difieren además del SKU, como ID de categoría, código de color y código de tamaño. En estos casos, cada elemento es una variable independiente en la definición de datos de punto interactivo o mapa de imagen en la función de titular del carrusel.

Considere los siguientes ejemplos de direcciones URL de vista rápida y las variables de puntos interactivos o mapas de imagen resultantes:

SKU único, encontrado en la cadena de consulta.

Las direcciones URL de vista rápida registradas incluyen lo siguiente:

  • https://server/json?productId=866558&source=100

  • https://server/json?productId=1196184&source=100

  • https://server/json?productId=1081492&source=100

  • https://server/json?productId=1898294&source=100

La única parte de la variable en la URL es el valor de productId= parámetro de cadena de consulta y es claramente un valor SKU. Por lo tanto, las zonas interactivas o los mapas de imagen solo necesitan campos SKU con valores como 866558, 1196184, 1081492, 1898294.

SKU único, encontrado en la ruta URL.

Las direcciones URL de vista rápida registradas incluyen lo siguiente:

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

La parte variable se encuentra en la última parte de la ruta y se convierte en el valor SKU de los puntos interactivos/mapas de imagen:6422350843, 1607745002, 0086724882.

SKU e ID de categoría en la cadena de consulta.

Las direcciones URL de vista rápida registradas incluyen lo siguiente:

  • https://server/quickView/product/?category=1100004&prodId=305466

  • https://server/quickView/product/?category=1100004&prodId=310181

  • https://server/quickView/product/?category=1740148&prodId=308706

En este caso, la dirección URL consta de dos partes diferentes. El SKU se almacena en prodId y el ID de categoría se almacena en la variable category=parámetro.

Como tal, las definiciones de mapa de imagen/punto interactivo son pares. Es decir, un valor SKU y una variable adicional llamada categoryId. Los pares resultantes son los siguientes:

  • El SKU es 305466 y categoryId es 1100004.

  • El SKU es 310181 y categoryId es 1100004.

  • El SKU es 308706 y categoryId es 1740148.

Cargar titulares de imagen uploading-image-banners

Si ya ha cargado las imágenes que desea utilizar, avance al siguiente paso, Crear conjuntos de carrusel. Tenga en cuenta que las imágenes utilizadas en el carrusel deben cargarse una vez habilitado Dynamic Media.

Para cargar titulares de imágenes, consulte Cargar recursos.

NOTE
Los usuarios no administrativos deben agregarse al dam-users para poder crear o editar titulares de carrusel. Si tiene problemas para crear o editar, consulte con el administrador del sistema, que puede agregarle al dam-users grupo.

Para crear conjuntos de carrusel:

  1. En Assets, vaya a la carpeta en la que desea crear el conjunto de carrusel y vaya a Crear > Conjunto de carrusel.

  2. En la página del editor de banners de carrusel, seleccione Pulse para abrir el Selector de recursos para seleccionar la imagen de la primera diapositiva.

    En la página del editor de banners de carrusel, realice una de las acciones siguientes:

    • Cerca de la esquina superior izquierda de la página, seleccione Agregar diapositiva icono.

    • Cerca del centro de la página, seleccione Pulse para abrir el Selector de recursos.

    Seleccione para seleccionar los recursos que desea incluir en el conjunto de carrusel. Los recursos seleccionados tienen un icono de marca de verificación sobre ellos. Cuando haya terminado, cerca de la esquina superior derecha de la página, seleccione Seleccionar.

    Con el Selector de recursos, puede buscar recursos escribiendo una palabra clave y pulsando o haciendo clic en Retorno. También puede aplicar filtros para restringir los resultados de búsqueda. Puede filtrar por ruta, colección, tipo de archivo y etiqueta. Seleccione el filtro y, a continuación, seleccione el Filtrar en la barra de herramientas. Para cambiar la vista, pulse el icono Ver y seleccione Vista de columna, Vista de tarjeta o Vista de lista.

    Consulte Trabajo con selectores para obtener más información.

  3. Siga agregando diapositivas hasta que haya agregado todas las imágenes por las que desea girar en el conjunto de carrusel.

  4. (Opcional) Realice una de las siguientes acciones:

    • Si es necesario, arrastre la diapositiva para reorganizar las imágenes en la lista establecida.

    • Para eliminar una imagen, seleccione la imagen y, a continuación, seleccione Eliminar diapositiva en la barra de herramientas.

    • Para aplicar un ajuste preestablecido, cerca de la esquina superior derecha de la página, seleccione la lista desplegable de ajustes preestablecidos y, a continuación, seleccione un ajuste preestablecido para aplicarlo a la vez.

    Para eliminar una diapositiva, selecciónela y, en la barra de herramientas, seleccione Eliminar diapositiva. Para mover una diapositiva, seleccione el icono de reordenar y mantenga pulsado y desplácese hasta la ubicación deseada.

  5. Después de agregar las imágenes en las diapositivas, puede agregar un punto interactivo, un mapa de imagen o ambos a la imagen. Consulte Añadir puntos interactivos o mapas de imagen a un titular de imagen.

  6. Puede cambiar el diseño visual y el comportamiento de los conjuntos de carrusel. Seleccione el Comportamiento y Aspecto y ajuste cómo aparece el titular del carrusel o cómo se comportan los componentes específicos. Consulte Administrar ajustes preestablecidos de visor para obtener más información sobre cómo utilizar el editor de visualizadores.

    note note
    NOTE
    Para los titulares de carrusel, puede ajustar lo siguiente:
    code language-none
    * Duración que muestra una imagen. De forma predeterminada, cada imagen se muestra durante 9 segundos.
    * Animación. De forma predeterminada, cada transición de diapositiva es una transición gradual. Puede cambiarlo a una transición de diapositivas.
    * Estilo de los botones. Los usuarios pueden girar a través de los titulares tocando cada punto o número. Puede cambiar el lugar en el que aparecen los botones del indicador de conjunto (y si son numéricos o un estilo de puntos) y el tamaño.
    * Cambie el estilo de resaltado de un mapa de imagen o el icono utilizado para las zonas interactivas.
    * Antes de editar un ajuste preestablecido de visualizador, elija el estilo en el que desea basarlo. Si no elige un estilo, cuando empiece a editar el ajuste preestablecido de visualizador, perderá todos los cambios si decide cambiar a otro ajuste preestablecido.
    
    Consulte Consideraciones especiales para titulares de carrusel para obtener instrucciones detalladas y más información sobre el editor del visor.

    También puede obtener una vista previa del aspecto del titular del carrusel. Consulte (Opcional) Previsualizar titulares de carrusel.

  7. Seleccionar Guardar cuando termine.

Adición de puntos interactivos o mapas de imagen a un titular de imagen adding-hotspots-or-image-maps-to-an-image-banner

Puede añadir zonas interactivas o mapas de imagen a un titular mediante el editor de conjuntos de carrusel.

Al agregar zonas interactivas o mapas de imagen, puede definirlos como una visualización emergente de vista rápida, como un hipervínculo o como un fragmento de experiencia.

Consulte Fragmento de experiencia.

NOTE
Las herramientas de uso compartido de medios sociales del titular del carrusel no son compatibles cuando se incrusta el visualizador en un fragmento de experiencia.
Para solucionar este problema, puede utilizar o crear ajustes preestablecidos de visualizador que no tengan herramientas de uso compartido de medios sociales. Estos ajustes preestablecidos de visualizador le permiten incrustarlo correctamente en los fragmentos de experiencias.

Recuerde guardar su trabajo a medida que añada puntos interactivos o mapas de imagen a una imagen. Las opciones Deshacer y Rehacer, cerca de la esquina superior derecha de la página, son compatibles durante la sesión de creación y edición actual.

Cuando termine de crear el titular del carrusel, puede utilizar la opción Previsualizar para ver una representación de cómo se muestra el titular del carrusel a los clientes.

Consulte (Opcional) Previsualizar titulares de carrusel.

NOTE
Cuando se añaden puntos interactivos a una imagen en una Imagen interactiva Para un banner de carrusel, la información del punto interactivo se almacena en la misma ubicación de metadatos. Esa ubicación es relativa a la ubicación de la imagen, independientemente de si es una imagen interactiva o un titular de carrusel. Esta funcionalidad significa que puede reutilizar fácilmente la misma imagen, junto con sus datos de punto interactivo definidos, en cualquier visor.
Sin embargo, tenga en cuenta que los titulares de carrusel admiten mapas de imagen en imágenes que también pueden contener puntos interactivos; una imagen interactiva no. Tenga en cuenta esta regla si desea crear una imagen interactiva o un titular de carrusel que utilice la misma imagen. Considere la posibilidad de crear imágenes interactivas y titulares de carrusel con copias independientes de la misma imagen en su lugar.
NOTE
Si está editando imágenes interactivas con zonas interactivas y recorta la imagen, se eliminan las zonas interactivas.

Consulte también Añadir mapas de imagen.

Para añadir puntos interactivos o mapas de imagen a un titular de imagen:

  1. En Recursos, vaya al conjunto de carrusel que desee hacer interactivo.

  2. Seleccione el conjunto de carrusel y seleccione Editar. Se abre el Editor del visor de carrusel.

  3. Seleccione la diapositiva que desea convertir en interactiva.

  4. Cerca de la esquina superior izquierda de la página, seleccione Punto interactivo o Mapa de imagen.

  5. Realice una de las acciones siguientes:

    • Para zonas interactivas: en la imagen, seleccione una ubicación en la que desee que aparezca la zona interactiva.
    • Para mapas de imagen: en la imagen, seleccione y, a continuación, arrastre de la parte superior izquierda a la inferior derecha para crear el área del mapa de imagen. Puede ajustar el tamaño del mapa de imagen arrastrando las esquinas.

    Si es necesario, arrastre el punto interactivo o el mapa de imagen a una nueva ubicación. Añada más puntos interactivos o mapas de imagen según sea necesario.

    Para eliminar un punto interactivo o un mapa de imagen, seleccione la Acciones pestaña. En el encabezado Mapas y zonas interactivas, del menú desplegable Tipo seleccionado, seleccione el nombre del punto interactivo o del mapa de imagen que desea eliminar. Seleccione el Papelera junto al menú y, a continuación, seleccione Eliminar.

  6. En el campo de texto Nombre, escriba el nombre del punto interactivo o del mapa de imagen. Este nombre también aparece en la Mapas y puntos interactivos lista desplegable. Proporcionar un nombre facilita la identificación del punto interactivo o el mapa de imagen si decide cambiarlo en el futuro.

  7. Realice una de las siguientes acciones en la Acciones pestaña:

    • Seleccionar Quickview.

      • Si es cliente de Experience Manager Sites y de comercio electrónico, seleccione el icono Selector de productos (lupa) para abrir la página Seleccionar producto. Seleccione el producto que desea utilizar y, a continuación, seleccione la marca de verificación en la esquina superior derecha de la página para poder volver al editor de banners de carrusel.

      • Si no es cliente de Experience Manager Sites o de comercio electrónico

        • Consulte Identificación de variables de punto interactivo si desea definir estas variables.

        • A continuación, introduzca manualmente el valor SKU. En el campo de texto Valor de SKU, escriba la SKU del producto (unidad de stock), que es un identificador único para cada producto o servicio distinto que ofrece. El valor de SKU introducido rellena automáticamente la parte variable de la plantilla de vista rápida para que el sistema sepa que debe asociar el punto interactivo tocado con la vista rápida de una SKU en particular.

        • (Opcional) Si hay otras variables dentro de la vista rápida que debe utilizar para identificar un producto con más detalle, seleccione Añadir variable genérica. En el campo de texto, especifique una variable adicional. Por ejemplo, category=Mens es una variable agregada.

        • Consulte Trabajo con selectores para obtener más información.

    • Seleccionar Hipervínculo.

      • Si es cliente de Experience Manager Sites, seleccione el icono Selector de sitio (carpeta) para ir a una dirección URL.

        note note
        NOTE
        El método de vinculación basado en URL no es posible si el contenido interactivo tiene vínculos con direcciones URL relativas, especialmente vínculos a páginas de Experience Manager Sites.
      • Si es cliente independiente, en el campo de texto HREF, especifique la ruta de URL completa a una página web vinculada.

    Asegúrese de especificar si desea abrir el vínculo en una nueva pestaña del explorador (opción predeterminada recomendada) o en la misma pestaña.

    Consulte Uso de selectores para obtener más información.

    • Seleccionar Fragmento de experiencia.

      • Si es cliente de Experience Manager Sites, seleccione el icono Buscar (lupa) para abrir la página Fragmento de experiencia. Seleccione el fragmento de experiencia que desee utilizar y, a continuación, seleccione Seleccionar en la esquina superior derecha de la página para poder volver a la página administración de puntos interactivos.
        Consulte Fragmentos de experiencias.

      • Especifique la anchura y altura del fragmento de experiencia tal como aparece en el banner.

        note note
        NOTE
        Las herramientas de uso compartido de medios sociales del titular del carrusel no son compatibles cuando se incrusta el visualizador en un fragmento de experiencia.
        Para solucionar este problema, cree ajustes preestablecidos de visualizador que no tengan herramientas de uso compartido de medios sociales. Estos ajustes preestablecidos de visualizador le permiten incrustarlo correctamente en los fragmentos de experiencias.

    experience_fragment-carouselbanner

    También puede obtener una vista previa del aspecto del titular del carrusel. Consulte (Opcional) Vista previa de los titulares del carrusel.

  8. Seleccione Guardar.

  9. Publique el conjunto de carrusel. Al publicar, se crea el código incrustado o la dirección URL que puede utilizar en la página del sitio web. Si es cliente de Experience Manager Sites, puede agregar el conjunto de carrusel directamente a la página web.

    Consulte Publicación de recursos.

    Consulte Añadir un conjunto de carrusel a la página de aterrizaje del sitio web

NOTE
Los usuarios no administrativos deben agregarse al dam-users para poder crear o editar titulares de carrusel. Si tiene problemas para crear o editar, consulte con el administrador del sistema, que puede agregarle al dam-users grupo.

Puede realizar varias tareas de edición en los conjuntos de carrusel, como las siguientes:

  • Agregar diapositivas a un conjunto de carrusel. Consulte también Trabajo con selectores.
  • Reordene las diapositivas del conjunto de carrusel.
  • Elimine recursos en el conjunto de carrusel.
  • Aplique un ajuste preestablecido de visor.
  • Elimine el conjunto de carrusel.
  • Añada o edite puntos interactivos y mapas de imagen. Consulte también Trabajo con selectores.

Para editar conjuntos de carrusel:

  1. Realice una de las siguientes acciones:

    • Pase el ratón sobre un recurso de conjunto de carrusel y seleccione Editar (icono de lápiz).

    • Pase el ratón sobre un recurso de conjunto de carrusel y seleccione Seleccionar (icono de marca de verificación), luego seleccione Editar en la barra de herramientas.

    • Seleccione un recurso de conjunto de carrusel y, en la esquina superior izquierda de la página, seleccione Editar (icono de lápiz).

  2. Para editar el conjunto de carrusel, realice una de las siguientes acciones:

    • Para añadir una diapositiva, seleccione la Agregar diapositiva luego, vaya al recurso que desee agregar a esa diapositiva y seleccione la marca de verificación.
    • Para reordenar las diapositivas, arrastre una diapositiva a una nueva ubicación (seleccione el icono de reordenar para mover los elementos).
    • Para añadir un punto interactivo o un mapa de imagen, seleccione los iconos del punto interactivo o del mapa de imagen y consulte adición de puntos interactivos y mapas de imagen.
    • Para editar el aspecto o el comportamiento del conjunto de carrusel, seleccione la Aspecto pestaña o Comportamiento y, a continuación, defina las opciones que desee.
    • Para editar puntos interactivos o mapas de imagen, en la diapositiva adecuada, seleccione un punto interactivo o mapa de imagen y cámbielo según sea necesario en la Acciones pestaña.
    • Para eliminar una diapositiva, selecciónela y, a continuación, seleccione Eliminar diapositiva en la barra de herramientas.
    • Para aplicar un ajuste preestablecido, cerca de la esquina superior derecha de la página, seleccione la Preestablecido y, a continuación, seleccione un ajuste preestablecido de visualizador.
    • Para eliminar un conjunto de carrusel completo, vaya al conjunto de carrusel, selecciónelo y, a continuación, seleccione Eliminar.
    note note
    NOTE
    Si está editando imágenes interactivas con zonas interactivas y recorta la imagen, se eliminan las zonas interactivas.

Puede usar Vista previa para ver cómo aparece el banner del carrusel para los clientes y probar los puntos interactivos de los banners del carrusel y los mapas de imagen para asegurarse de que se comportan según lo esperado.

Cuando esté satisfecho con el titular del carrusel, puede publicarlo.
Consulte Incrustación del visualizador de imágenes o vídeos en una página web.
Consulte Vinculación de URL en la aplicación web. El método de vinculación basado en URL no es posible si el contenido interactivo tiene vínculos con direcciones URL relativas, especialmente vínculos a páginas de Experience Manager Sites.
Consulte Añadir recursos de Dynamic Media a las páginas.

Puede previsualizar los titulares del carrusel desde el Editor de carrusel (método preferido) o desde el Espectadores lista.

Para previsualizar titulares de carrusel:

  1. Entrada Assets, navegue hasta un banner de carrusel existente que haya creado y seleccione para abrirlo.

  2. Seleccione Editar.

  3. En la lista de ajustes preestablecidos de visualizador, en la esquina derecha de la barra de herramientas, seleccione un visualizador para previsualizar el titular del carrusel.

    experience_fragment-carouselbanner-viewerdropdown

  4. Seleccionar Previsualizar.

  5. Seleccione las zonas interactivas o los mapas de imagen de la imagen para poder probar sus acciones asociadas.

Para previsualizar titulares de carrusel desde la lista Visualizadores:

  1. Entrada Assets, navegue hasta un banner de carrusel existente que haya creado y seleccione para abrirlo.
  2. Cerca de la esquina superior izquierda de la página Vista previa, seleccione el icono Contenido.
  3. En el Espectadores en el panel situado en la parte izquierda de la página, seleccione el nombre del ajuste preestablecido del visualizador de banners de carrusel que desee utilizar.
  4. Seleccione las zonas interactivas o los mapas de imagen de la imagen para poder probar sus acciones asociadas.

Publique el carrusel para poder utilizarlo. La publicación de un conjunto de carrusel activa la URL y el código de incrustación. También publica el carrusel en la nube de Dynamic Media, que está integrado con una CDN para una entrega escalable y con rendimiento.

NOTE
Si utiliza una imagen interactiva existente con puntos interactivos para el titular del carrusel, debe publicar la imagen interactiva por separado después de publicar el titular del carrusel.
Además, si modifica una imagen interactiva publicada preexistente que esté utilizando en un titular de carrusel, debe publicar la imagen interactiva antes de que esos cambios se reflejen en el titular del carrusel.

Consulte Publicar recursos de Dynamic Media para obtener información sobre cómo publicar titulares de carrusel.

Después de cargar imágenes de titular para crear un carrusel, añadir zonas interactivas o mapas de imagen al titular y publicar el conjunto de carrusel, ya puede añadirlo a la página web existente.

NOTE
Si es cliente de Experience Manager Sites, puede agregar el titular del carrusel directamente a la página arrastrando el componente Medios interactivos a la página. Consulte Añadir recursos de Dynamic Media a las páginas.

Sin embargo, si es cliente independiente de Experience Manager Assets, puede añadir manualmente el banner de carrusel a la página de aterrizaje del sitio web como se describe en esta sección.

  1. Copie el código incrustado del conjunto de carrusel publicado.
    Consulte Incrustar el vídeo o el visualizador de imágenes en una página web.

  2. Agregue el código incrustado que ha copiado de Experience Manager Assets a su página web.
    El código incrustado copiado es adaptable, por lo que debe ajustarse automáticamente al área de incrustación de la página.

NOTE
Este paso solo se aplica si es cliente independiente de Experience Manager Assets.

El último paso de este proceso es integrar el banner de carrusel con una implementación de Quickview existente en su sitio web. Cada implementación de Quickview es única y se necesita un enfoque específico que implique la asistencia de un profesional de TI front-end.

La implementación de Quickview existente normalmente representa una cadena de acciones interrelacionadas que se producen en la página web en el siguiente orden:

  1. Un usuario almacena en déclencheur un elemento en la interfaz de usuario del sitio web.
  2. El código front-end obtiene una URL de vista rápida basada en el elemento de interfaz de usuario activado en el paso 1.
  3. El código front-end envía una solicitud de Ajax utilizando la URL obtenida en el paso 2.
  4. La lógica back-end devuelve los datos de vista rápida o el contenido correspondiente al código front-end.
  5. El código front-end carga los datos de vista rápida o el contenido.
  6. De forma opcional, el código front-end convierte los datos de vista rápida cargados en una representación de HTML.
  7. El código front-end muestra un cuadro de diálogo o panel modal y procesa el contenido del HTML en la pantalla para el usuario final.

Estas llamadas no representan llamadas de API públicas independientes a las que la lógica de página web puede llamar desde un paso arbitrario. En su lugar, es una llamada encadenada en la que cada paso siguiente se oculta en la última fase (llamada de retorno) del paso anterior.

Al mismo tiempo que el banner de carrusel reemplaza el paso 1 y parcialmente el paso 2, cuando un usuario toque un punto interactivo o un mapa de imagen dentro del banner de carrusel, el visualizador se encargará de esta interacción. El visor devuelve un evento a la página web que contiene todos los datos de puntos interactivos o mapas de imagen añadidos anteriormente.

En un controlador de eventos de este tipo, el código front-end hace lo siguiente:

  • Escucha un evento emitido por el titular del carrusel.
  • Construye una URL de vista rápida basada en los datos de puntos interactivos o mapas de imagen.
  • Déclencheur el proceso de cargar la vista rápida desde el backend y procesarla en la pantalla para mostrarla.

El código incrustado devuelto por Experience Manager Assets ya tiene un controlador de eventos listo para usar que se comenta.

Por lo tanto, solo es necesario descomentar el código y reemplazar el cuerpo del controlador ficticio con el código específico de la página web en particular.

El proceso de construir la URL de vista rápida es opuesto al proceso utilizado para identificar las variables de puntos interactivos y mapas de imagen que se trataron anteriormente.

Consulte Identificación de variables de puntos interactivos y mapas de imagen.

El último paso para almacenar en déclencheur la URL de vista rápida y activar el panel de vista rápida muy probablemente requiera la asistencia de una persona de TI front-end de su departamento de TI. Tienen los conocimientos necesarios para saber cómo almacenar en déclencheur con precisión la implementación de Quickview desde el paso adecuado, teniendo una URL de Quickview lista para usar.

Creación de ventanas emergentes personalizadas con Quickview using-quickviews-to-create-custom-pop-ups

Consulte Creación de ventanas emergentes personalizadas con Quickview.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2