Dynamic Media plantillas dynamic-media-templates
Cree plantillas personalizables en tiempo real para sus banners y folletos usando Dynamic Media templates, un editor de plantillas de WYSIWYG. Publique la plantilla Dynamic Media y utilícela en aplicaciones de flujo descendente. Una plantilla Dynamic Media incluye capas de imagen y texto. Agregue parámetros a las capas de imagen y texto de la plantilla y utilice Dynamic Media URL para cambiar la posición y el tamaño de la capa y actualizar su contenido en tiempo real.
Algunas de las características principales incluyen:
- Dynamic MediaEditor de plantillas de WYSIWYG: Cree titulares personalizables con capas de texto e imagen.
- Parametrización de capas: Defina pares dinámicos de clave-valor para las capas a fin de habilitar las actualizaciones en tiempo real.
- Dynamic MediaCompatibilidad con URL: Use Dynamic Media URL para plantillas, integrando valores personalizados de aplicaciones de origen o de terceros.
- Control de visibilidad de la capa: Oculte o muestre de forma dinámica las capas según sea necesario.
- Cambio de tamaño del texto inteligente: Ajuste automáticamente el tamaño del texto para ajustar las áreas designadas.
Algunas de las ventajas clave de las plantillas de Dynamic Media son:
- Optimizar Personalization 1:1: Adapte el contenido a las señales de clientes en tiempo real.
- Reducir el esfuerzo manual: Automatizar y acelerar la creación y administración de contenido.
- Garantizar experiencias omnicanal coherentes: Mantener la coherencia de la marca en todos los canales.
- Reutilizar contenido de forma eficaz: Evite el contenido de un solo uso y escale con plantillas dinámicas parametrizadas.
- Mitigar riesgos: Actualizar precios, descuentos y vínculos en tiempo real.
- Mejore la participación del cliente: Impulse experiencias interactivas y relevantes para el contexto.
Aprenda a crear una plantilla Dynamic Media paso a paso en este vídeo.
Antes de empezar prerequisites-for-dynamic-media-wysiwyg-template
Complete los siguientes requisitos para crear una plantilla Dynamic Media y generar su dirección URL de envío:
-
Acceso a Dynamic Media.
-
En la página de inicio Assets View, tiene una carpeta en Dynamic Media Assets para guardar la plantilla. Cree una carpeta en
-
Publique las imágenes que desee utilizar para crear la plantilla y generar la dirección URL de entrega de la plantilla después de crearla. La dirección URL de envío se puede utilizar en aplicaciones de flujo descendente.
-
Para usar una fuente distinta a la predeterminada Adobe Sans F2 en la capa de texto de la plantilla, cargue y publique el archivo de fuente en AEM y Dynamic Media simultáneamente. Los formatos de archivo de fuente admitidos son, AFM, OTF, PFB, PFM, PhotoFont, TTC, TTF. Además, asegúrese de reprocesar las fuentes existentes para usarlas. Consulte Fuentes para obtener más información.
-
compruebe lo siguiente en la interfaz de usuario táctil:
- En la página Editar configuración de Dynamic Media, el modo de sincronización Dynamic Media establecido en Deshabilitado de forma predeterminada no se aplica a todas las carpetas de AEM (Sincronizar todo el contenido está desmarcado). Consulte Configuración de Dynamic Media Cloud Service para obtener más información.
- El modo de sincronización Dynamic Media se ha establecido en Habilitar para subcarpetas para la carpeta o subcarpeta de destino en la que guardará la plantilla después de crearla. Consulte configurar Dynamic Media Cloud Service para obtener más información.
Crear plantilla Dynamic Media how-to-create-dynamic-media-template
Ejecute los siguientes pasos para crear una plantilla Dynamic Media:
Crear un lienzo en blanco create-a-canvas
Siga estos pasos para crear un lienzo en blanco:
-
Vaya a Assets View, seleccione Dynamic Media Assets disponible en el panel izquierdo y vaya a la carpeta para guardar la plantilla en ella.
-
Seleccione Crear plantilla. Se muestra el cuadro de diálogo Nueva plantilla.
note note NOTE La plantilla se guardará en la ubicación en la que la haya creado. En la página de inicio de Assets View, seleccione Dynamic Media Assets y haga clic en Crear plantilla para guardar la plantilla en la carpeta raíz de Dynamic Media Assets. -
Especifique un nombre de plantilla, defina la anchura y altura del lienzo y haga clic en Crear. Se muestra un lienzo en blanco con opciones de menú en ambos lados que se utilizan para crear la plantilla. Pase el ratón sobre las opciones del menú para ver su información sobre herramientas.
note note NOTE El intervalo de anchura y altura permitido es de 50 a 5000.
Opciones de menú en el panel derecho: Utilice estas opciones para agregar las imágenes y las capas de texto necesarias al lienzo.
-
-
-
Opciones de menú en el panel izquierdo: Utilice estas opciones para las siguientes acciones comunes del editor.
-
-
-
-
-
-
-
- Pulse Retroceso o eliminar para eliminar la capa seleccionada si no se está editando ningún texto o propiedad.
Haga clic en
Añadir imágenes al lienzo add-images-to-the-canvas
Siga estos pasos para agregar imágenes al lienzo:
- Haga clic en
- Examine el panel o utilice palabras clave en la barra de búsqueda para encontrar una imagen específica.
- Arrastre y suelte una imagen en el lienzo para utilizarla. Consulte el Panel de propiedades para cambiar el tamaño o la posición de una capa en el lienzo.
Añadir capas de texto al lienzo add-text-to-the-canvas
Siga estos pasos para agregar capas de texto al lienzo:
- Haga clic en
- Seleccione la capa y haga clic en el texto para actualizarla.
- Seleccione Cambio de tamaño del texto inteligente en el panel Propiedades para ajustar automáticamente la longitud del texto y el tamaño de la fuente para que se ajusten de forma óptima en el área designada.
Consulte el Panel de propiedades para cambiar la posición, el tamaño, la rotación o la eliminación de la capa. Dé formato al texto con la fuente, el tamaño, el color, el estilo y la alineación necesarios (en la capa) cambiando sus valores en los campos respectivos de la sección Texto del panel. El campo Familia de fuentes muestra la fuente predeterminada Adobe Sans F2, las fuentes existentes reprocesadas y las fuentes recién cargadas y publicadas. Consulte el punto 5 de la sección Antes de comenzar anterior para obtener más información.
Edición o eliminación de una capa edit-or-delete-a-layer
Siga estos pasos para editar o eliminar una capa de lienzo:
- Haga clic en
- Haga clic en más opciones (
- Haga clic en Eliminar para eliminar la capa.
- Haga clic en Editar para editar la capa con el Panel Propiedades.
Panel Propiedades properties-panel
Para desplazarse al panel de propiedades de una capa:
- Haga clic en
- Seleccione la capa de la lista.
Este panel muestra la posición del punto central de la capa en el plano del lienzo (valores X e Y) y las dimensiones de la capa (anchura y altura) junto con las opciones de formato de texto.
En el panel de propiedades de una capa, seleccione otra capa del lienzo para ir a su panel de propiedades.
Cambiar la posición, el tamaño, la rotación o la eliminación de una capa reposition-resize-delete-a-layer
Consulte estas acciones comunes de edición de capas para editar un texto o una capa de imagen:
- Cambiar la posición de la capa: Arrastre la capa para moverla a cualquier lugar del lienzo. Esta acción actualiza los valores X e Y en el panel de propiedades.
- Cambiar el tamaño de la capa: Seleccione la capa y arrastre sus controladores de borde para cambiar su tamaño. Esta acción actualiza los valores de anchura y altura en el panel de propiedades.
- Rotar la capa: Arrastre el controlador cuadrado colocado verticalmente sobre la capa para girarlo alrededor de su centro. Esta acción actualiza los valores de ángulo en el panel de propiedades.
- Eliminar la capa: Presione Retroceso o eliminar y luego haga clic en Confirmar para eliminar una capa seleccionada.
Opciones de formato de texto text-formatting-options-on-properties-panel
Dé formato al texto según la fuente, el tamaño, el color, el estilo y la alineación necesarios (dentro de la capa) cambiando sus valores en los campos respectivos de la sección Texto del panel.
Asegúrese de incluir Cambio de tamaño de texto inteligente. Cambio de tamaño del texto inteligente funciona con el algoritmo Ajuste de texto para rellenar de manera óptima el texto en el área de texto y evita que el texto se desborde y minimiza el espacio adicional en la parte inferior del texto.
Parametrizar capas parameterise-a-layer
Después de crear una plantilla con varias capas de imágenes y textos, parametriza las capas seleccionadas. Cuando se parametriza una capa o su propiedad, obtiene un par clave-valor (también denominado como parámetro). Este parámetro se puede incluir en la dirección URL de la plantilla para actualizar la posición, el tamaño o el contenido de la capa en tiempo real, lo que resulta en la personalización de la plantilla en poco tiempo.
Para parametrizar una capa:
- haga clic en
- Cambie Include Parameter para asignar parámetros a una propiedad. Consulte la opción Parámetros del panel para conocer el comportamiento de la propiedad después de la parametrización.
- Opcional: Cambie el nombre del parámetro. Un nombre de parámetro tiene un nombre de capa seguido de un sufijo. Para una capa seleccionada, todas sus propiedades parametrizadas comparten el mismo nombre de capa seguido de un sufijo variable. Cambie el nombre de la capa siguiendo la convención de nomenclatura semántica, de modo que cuando incluya el parámetro en la URL, el nombre del parámetro explica por sí mismo el contenido de la capa o su propósito.
- Haga clic en Guardar.
Para cambiar entre el panel Parámetro de una capa de imagen y de texto, seleccione la capa en el lienzo y haga clic en Parámetros.
Opción del panel Parámetros parameterisation-options-or-allowed-parameters
Las propiedades parametrizadas se pueden incluir como parámetros de URL en la URL de la plantilla para editar la plantilla en tiempo real mediante la URL.
Parámetros de imagen:
X: Incluir para mover la capa horizontalmente a lo largo de su línea central, paralela al eje X del plano de plantilla, cambiando el valor del parámetro en la dirección URL.
Y: Incluir para mover la capa verticalmente a lo largo de su línea central, paralela al eje Y del plano de la plantilla, cambiando el valor del parámetro en la dirección URL.
Anchura: Incluir para ajustar el ancho de la capa cambiando el valor del parámetro en la dirección URL.
Altura: Incluir para ajustar la altura de la capa cambiando el valor del parámetro en la dirección URL.
Ocultar: Incluir para ocultar o mostrar la capa en la plantilla usando 0 (mostrar) y 1 (ocultar).
Source: Incluir para reemplazar la imagen de la capa con una nueva imagen cambiando la ruta de la imagen en el valor del parámetro en la dirección URL.
Parámetros de formato de texto:
Incluya los siguientes parámetros para editar el texto, su fuente, color y tamaño desde la URL al actualizar los valores de los parámetros en la URL.
Texto: Incluir para actualizar el texto de la dirección URL.
Familia de fuentes: Incluir para actualizar la fuente del texto desde la dirección URL.
Tamaño de fuente: Incluir para actualizar el tamaño de fuente del texto desde la dirección URL.
Color del texto: Incluir para actualizar el color de fuente del texto de la dirección URL.
Agrupar capas para controlar su visibilidad simultáneamente group-layers
Otra forma de mantener las plantillas flexibles es utilizar un nombre de parámetro único para controlar varias capas. Esta estrategia es útil para el parámetro de visibilidad (ocultar o mostrar capas), para actualizar el diseño o los gráficos de una sola plantilla.
Siga estos pasos para asignar el mismo nombre a los parámetros de ocultación (
- Vaya al Panel de propiedades de una capa.
- Cambie el parámetro Hide si no está parametrizado anteriormente.
- Opcional: Cambie el nombre del parámetro Hide.
- Copie el nombre del parámetro Hide.
- Vaya al panel Parámetro de otras capas seleccionándolas en el lienzo y alterne su parámetro Hide si no está parametrizado.
- Reemplace su nombre Hide parameter con el nombre copiado.
- Haga clic en Guardar para agrupar las capas.
- Ejecute el paso 3 y luego el 4 en la sección Previsualizar y publicar para ver los cambios.
Previsualice y publique la plantilla para copiar la dirección URL de envío preview-and-publish-template-and-copy-template-deliver-url
Siga estos pasos para previsualizar y publicar la plantilla y copiar la dirección URL de envío:
-
En la página de lienzo, haga clic en Vista previa. También puede ir a la vista de Assets > Dynamic Media Assets > para buscar y seleccionar su plantilla > y hacer clic en Editar plantilla > y hacer clic en Vista previa. La página de vista previa muestra la plantilla, sus parámetros (capas y propiedades parametrizadas), el estado de publicación y la opción Publish.
-
Seleccione parámetros del panel Parámetros de plantilla para editar sus valores y actualizar instantáneamente el contenido, el tamaño, la posición o el formato de texto de la capa de plantilla correspondiente en la vista previa. Por ejemplo:
- Seleccione una capa de texto y edite su texto o
- Seleccione una capa de imagen, haga clic en
La plantilla se actualiza inmediatamente, mostrando el texto editado y reemplazando la imagen anterior por la nueva. Además, el valor del parámetro de imagen refleja la nueva ruta de imagen. Del mismo modo, puede cambiar el tamaño de una capa ajustando sus valores, y los cambios se aplican a la plantilla en tiempo real.
-
Seleccione el parámetro Hide para capas agrupadas de la lista para mostrarlas u ocultarlas juntas en la plantilla.
-
Opcional: Cambie el valor del parámetro Hide entre 0 y 1 y haga clic en Refresh para ver los cambios. Las capas con el mismo parámetro Hide se ocultan o se muestran juntas. Del mismo modo, se puede controlar la visibilidad de las capas desde la dirección URL.
También puede alternar Incluir todos los parámetros para editar todos los valores de parámetros mostrados y ver las actualizaciones en la vista previa de la plantilla. -
Para publicar la plantilla desde la página de vista previa, haz clic en Publicar y confirma la publicación. Aparece un mensaje Publicación completa y el estado de publicación se actualiza a Publicado.
Copiar la dirección URL de envío
Los parámetros seleccionados en la página Vista previa se convierten en los parámetros de URL en la URL de la plantilla.
Asegúrese de que las imágenes de la plantilla ya se han publicado en AEM y Dynamic Media para generar la dirección URL de envío de la plantilla.
Ejecute los siguientes pasos para copiar la dirección URL de entrega de la plantilla:
- Haga clic en Copiar URL. Se muestra el cuadro de diálogo Copiar URL. Seleccione y copie la dirección URL mostrada. El primer parámetro de la dirección URL comienza después del signo de interrogación (?) y un par clave-valor comienza con $ y termina con &. La clave y el valor están separados por un signo igual (=), con la clave a la izquierda y el valor a la derecha.
- Pegue esta dirección URL en la pestaña del explorador y vea la plantilla activa. Personalice la plantilla en tiempo real actualizando el valor del parámetro requerido (valor de clave) en la dirección URL directamente, tal como se muestra en el paso 2 de la sección Previsualizar y publicar.
- Utilice esta URL para la comercialización rápida de sus productos o servicios. Puede compartir esta URL con sus clientes o integrarla en su sitio web o en cualquier aplicación de terceros descendente para mostrar el banner y realizar actualizaciones en tiempo real para reflejar las ofertas en curso.
Realice actualizaciones en tiempo real de la plantilla desde la dirección URL update-the-template-from-the-url
La edición de parámetros directamente en la dirección URL puede resultar tediosa. Para simplificar:
-
Copie la dirección URL y péguela en un bloc de notas.
-
Utilice Cmd+F (Mac) o Ctrl+F (Windows) para buscar y editar los valores de parámetro. Por ejemplo:
- Buscar y reemplazar trazados de imagen para capas de imagen.
- Busque las coordenadas parametrizadas de la capa, anchura y altura, para ajustar sus valores.
- Editar texto, fuente, color, tamaño o alineación para capas de texto.
- Cambie los valores de visibilidad entre 0 y 1.
Pegue esta URL actualizada en el explorador para ver los cambios.
Editar la plantilla edit-the-template
Edite la plantilla siguiendo estos pasos:
- En Assets view, haga clic en Dynamic Media Assets.
- Navegue hasta la ubicación de la plantilla.
- Seleccione la plantilla.
- Haga clic en Editar plantilla. El lienzo de la plantilla muestra la plantilla y la lista de todas sus capas en el panel Capas. Comience a editar la plantilla según sus necesidades.
Añadir el vínculo de Call to action (CTA) a la capa de plantilla add-CTA-in-dynamic-media-templates
Convierta cualquier imagen o capa de texto de la plantilla Dynamic Media en un hipervínculo agregándole un vínculo de CTA que dirija a los usuarios a una página de destino.
Siga estos pasos para agregar un vínculo de CTA a una capa:
-
Vaya a la ubicación de la plantilla, seleccione la plantilla y haga clic en
-
Seleccione la capa de plantilla y navegue hasta su panel de propiedades para agregarle un vínculo de CTA.
-
En el panel Propiedades, seleccione Agregar CTA, especifique la dirección URL de destino en el campo URL y haga clic en Guardar.
-
Haga clic en Vista previa y seleccione Publicar para publicar la plantilla, si no se publicó anteriormente.
-
Vaya a la carpeta donde se guardó esta plantilla, selecciónela y haga clic en
-
Haga clic en Opciones de copia y seleccione Copiar código incrustado. Asegúrese de publicar las imágenes de la plantilla en AEM and Dynamic Media para copiar el código incrustado.
El siguiente es un ejemplo de código incrustado:
code language-json <div class="adobe-dynamicmedia-template-embed-container"> <img id="<Image ID>>" src="<Image Source>>" alt="adobe dynamicmedia template" usemap="#adobe-dynamicmedia-template-map" width="800" height="300"> <map name="adobe-dynamicmedia-template-map"> <area shape="rect" coords="417,-60,817,340" href="https://business.adobe.com/products.html" alt="Layer with CTA" title="https://business.adobe.com/products.html" target="_blank"> <area shape="rect" coords="6,206.57,129,231.43" href="https://business.adobe.com/products.html" alt="Layer with CTA" title="https://business.adobe.com/products.html" target="_blank"> </map> </div> -
Agregue el código incrustado copiado al archivo HTML del sitio y ejecútelo en el explorador para mostrar la plantilla.
Haga clic en el elemento CTA de la plantilla para desplazarse a la página de destino.
Vea este vídeo paso a paso para aprender a añadir un vínculo de CTA a una capa de plantilla.
Puntos importantes que debe tener en cuenta important-points-to-note
- Después de crear una plantilla con capas de imagen parametrizadas para actualizaciones dinámicas, asegúrese de que las imágenes destinadas a actualizaciones futuras compartan las mismas dimensiones que las imágenes parametrizadas. Esto garantiza que las imágenes se ajusten perfectamente dentro de las capas sin desbordarse ni dejar espacios vacíos. Actualmente, la plantilla no admite ajustes de dimensión automáticos para ajustar las imágenes a las capas.
- No se admiten subcadenas en una capa de texto. El usuario no puede aplicar propiedades de fuente diferentes en la subcadena de una capa de texto.
- La compatibilidad con varias Dynamic Media empresas no está disponible actualmente con Dynamic Media plantillas.
- En caso de copiar o mover, el Selector de destino muestra todas las carpetas (incluidas las carpetas no sincronizadas Dynamic Media). Además, actualmente no muestra los recursos de plantilla Dynamic Media (ambas son limitaciones del selector de destino).
- Cualquier operación de actualización en una carpeta (por ejemplo, Publicar o Eliminar) desde la sección de Assets afecta a las Dynamic Media plantillas disponibles en esa carpeta.
- La papelera no funciona para Dynamic Media plantillas. Si un recurso se mueve a la papelera y luego se restaura, se restaurará en AEM pero no en Dynamic Media. Lo mismo es válido para Dynamic Media plantillas.
Véase también
- Explorar Dynamic Media y sus capacidades
- Explorar Dynamic Media con capacidades de OpenAPI