Plantillas de Dynamic Media 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 temporizador de imagen, texto, forma y cuenta atrás. Agregue parámetros a las capas de temporizador de imagen, texto, forma y cuenta atrás de la plantilla y use 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 funciones clave son las siguientes:
-
Dynamic MediaEditor de plantillas de WYSIWYG: Cree titulares personalizables con capas de temporizador de imagen, texto, forma y cuenta atrás.
-
Parametrización de capas: defina pares dinámicos de clave-valor para las capas con el fin de habilitar las actualizaciones en tiempo real.
-
Dynamic MediaCompatibilidad con URL: Use Dynamic Media URL para plantillas, integrando valores personalizados de aplicaciones de Adobe y que no sean de Adobe.
-
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.
-
Capa de temporizador de cuenta atrás: Agregue temporizadores de cuenta atrás a las plantillas y configure su hora de finalización, las unidades de visualización (días, horas, minutos), el sufijo, el texto de reserva y CTA.
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.
- Reducción del esfuerzo manual: automatice y acelere la creación y administración de contenido.
- Garantía de experiencias omnicanal coherentes: mantenga la coherencia de la marca en todos los canales.
- Reutilización del contenido de forma eficaz: evite el contenido de un solo uso y escale con plantillas dinámicas parametrizadas.
- Mitigación de riesgos: actualice precios, descuentos y vínculos en tiempo real.
- Mejora de 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 del servicio de nube de Dynamic Media 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
Ejecute 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 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 puntero del ratón por encima de las opciones del menú para ver su ayuda contextual.
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 añadir las capas de imágenes y texto necesarias al lienzo.
-
-
-
-
Opciones de menú en el panel izquierdo: Utilice estas opciones para las siguientes acciones comunes del editor.
-
-
](Windows) o Cmd +](Mac) para avanzar una capa seleccionada. -
[(Windows) o Cmd +[(Mac) para enviar una capa seleccionada hacia atrás. -
-
-
-
- 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
Ejecute estos pasos para añadir 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.
- Habilite la opción Radio uniforme y use el control deslizante Radio de vértice para ajustar la redondez de las cuatro esquinas de una imagen de manera uniforme. Desactive la opción para personalizar la redondez de la esquina asignando valores de radio específicos a cada esquina.
Expandir una imagen para que se ajuste a la capa
Puede estirar una imagen para que se ajuste exactamente a las dimensiones de la capa.
-
Seleccione una capa de imagen en el lienzo y expanda la sección Ajustar del panel Propiedades.
-
Habilitar Expandir Para Ajustar La Imagen.
Aparecerá un controlador de tamaño interactivo en el lienzo.
-
Cambie el tamaño de la imagen mediante el controlador interactivo.
-
Haga clic en Aceptar recorte para aplicar la nueva anchura y altura y volver a procesar la imagen para rellenar el área de tamaño.
-
Haga clic en Cancelar recorte para descartar los cambios.
-
También puede especificar los valores exactos de Ancho de ampliación y Altura de ampliación en el panel Propiedades.
Cuando acepte los cambios, la imagen se vuelve a procesar para rellenar las dimensiones de capa con la anchura y la altura especificadas.
Si deshabilita Ajustar para ajustar la imagen, la imagen se vuelve a procesar sin los modificadores de ampliación y se restaura su proporción de aspecto original. La imagen se escala a la última Altura de ampliación que se guardó, con la anchura ajustada según la proporción de aspecto natural de la imagen.
Uso de Stretch To Fit con la dirección URL de envío
Cuando se solicita la plantilla mediante su dirección URL de envío, la imagen se procesa según los ajustes de Ajustar al tamaño de la imagen, Ajustar ancho y Ajustar alto configurados para la capa de imagen.
Puede usar la dirección URL de envío de la misma manera que otras Dynamic Media direcciones URL de envío de plantilla.
Añadir capas de texto al lienzo add-text-to-the-canvas
Ejecute estos pasos para añadir 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.
Da formato a partes específicas del texto y paramétralas para controlarlas de forma independiente.
Dar formato a texto selectivo apply-formatting-to-substring
Ejecute los siguientes pasos para dar formato a partes específicas de una cadena:
-
Seleccione uno o varios caracteres en la cadena a los que desea dar formato.
-
Dar formato a la selección mediante el panel de propiedades. Las siguientes opciones de formato son aplicables a las subcadenas y sus partes:
- Estilo de fuente: negrita, cursiva, subrayado, subíndice y superíndice con la opción Estilo de fuente.
- Propiedades de fuente: cambie la familia de fuentes, el color, el tamaño y el interlineado mediante las opciones de panel correspondientes.
Cada parte de la cadena con formato se muestra como una subcadena en el selector de subcadenas, disponible en el panel Parámetros. Agregue parámetros a estas partes con formato para aplicarles formato dinámico mediante la dirección URL de envío de la plantilla.
Agregar formas al lienzo add-shapes-to-the-canvas
Siga estos pasos para agregar formas al lienzo:
- Haga clic en
- Desplácese hasta la sección Estilo del panel, defina un código hexadecimal en el campo Color de forma o use el selector de color para rellenar el color de la forma seleccionada.
- Habilite la opción Radio uniforme y use el control deslizante Radio de vértice para ajustar la redondez de las cuatro esquinas del rectángulo de forma uniforme. Desactive la opción para personalizar la redondez de la esquina asignando valores de radio específicos a cada esquina.
- Agregue el parámetro Hide a la capa seleccionada para mostrar u ocultar la capa en la plantilla en tiempo real mediante la dirección URL de la plantilla.
- Seleccione la capa a la que desea agregarle un vínculo CTA, lo que permitirá a los usuarios hacer clic en la forma como hipervínculo en la plantilla activa.
Añadir temporizador de cuenta atrás al lienzo add-countdown-timer-to-the-canvas
Ejecute estos pasos para agregar una capa de temporizador de cuenta atrás al lienzo:
-
Haga clic en
-
Seleccione la capa de temporizador de cuenta atrás para configurar sus propiedades.
-
Utilice la sección Position para cambiar la posición, el tamaño, la rotación u ocultar la capa del temporizador de cuenta atrás.
-
Utilice la sección Texto para configurar el aspecto del texto del temporizador de cuenta atrás, como la familia de fuentes, el tamaño de fuente, el color del texto, la alineación, la opacidad y la rotación.
-
Desplácese hasta la sección Temporizador y configure los valores del temporizador de cuenta atrás, como especificar la hora de finalización, habilitar o deshabilitar las unidades de tiempo, definir el texto del sufijo y especificar el texto de reserva.
-
Utilice la sección CTA para especificar una dirección URL de destino y hacer que la capa del temporizador de cuenta atrás se pueda seleccionar.
Consulte el [Panel de propiedades] para cambiar la posición, el tamaño, la rotación, la eliminación o los parámetros de la capa de temporizador de cuenta atrás.
Editar o eliminar una capa edit-or-delete-a-layer
Ejecute estos pasos para editar o eliminar una capa del 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 mediante el Panel de propiedades.
Panel Propiedades properties-panel
El panel Propiedades incluye secciones para cambiar la posición, cambiar el tamaño y rotar una capa. También proporciona opciones de relleno de color para capas de forma, opciones de formato de texto para capas de texto, opciones de configuración del temporizador de cuenta atrás para capas de temporizador de cuenta atrás y una opción para agregar un vínculo de CTA a cualquier capa seleccionada.
Para ir al panel de propiedades de una capa, haga clic en
En el panel Propiedades de una capa, seleccione otra capa del lienzo para ir a su panel 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 una capa de temporizador de imagen, texto, forma o cuenta atrás:
- 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. X e Y son las coordenadas del centro de la capa en el plano del lienzo.
- Cambiar el tamaño de la capa: seleccione la capa y arrastre sus controladores de bordes para cambiar su tamaño. Esta acción actualiza los valores W (anchura) y H (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: pulse 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 con 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 en 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.
Propiedades del temporizador de cuenta atrás countdown-timer-properties
Configure el temporizador de cuenta atrás con la sección Temporizador del panel Propiedades. Esta configuración controla la visualización del temporizador de cuenta atrás, el comportamiento de caducidad y la funcionalidad de hipervínculo opcional.
Utilice las siguientes opciones:
-
Días, horas, minutos: habilita o deshabilita unidades de tiempo específicas para controlar qué valores aparecen en el temporizador de cuenta atrás. Cuando están activadas, las unidades seleccionadas se muestran en el temporizador de cuenta atrás.
-
Sufijo: especifique el texto adicional que se muestra después de cada unidad de tiempo habilitada. Por ejemplo, puede utilizar valores de sufijo como “d”, “h” o “m”, o separadores como “:” para personalizar el formato de visualización.
-
Hora de finalización (Epoch): especifica la fecha y hora exactas de caducidad del temporizador de cuenta atrás. La cuenta atrás se actualiza dinámicamente y muestra el tiempo restante hasta la hora de finalización especificada.
-
Texto de reserva: especifica el texto mostrado después de que el temporizador de cuenta atrás alcance su hora de caducidad. Por ejemplo, puede mostrar un mensaje como “¡Se acabó el tiempo!” o “Oferta caducada”.
Para hacer que la capa del temporizador de cuenta atrás se pueda seleccionar, use la sección CTA y especifique una dirección URL de destino.
Parametrizar capas parameterise-a-layer
Después de crear una plantilla con varias capas de imágenes, textos, formas y temporizadores de cuenta atrás, parametriza las capas seleccionadas. Cuando se parametriza una capa o su propiedad, se le asigna un par clave-valor (también denominado 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 se traduce en la personalización de la plantilla al instante.
Para parametrizar una capa:
- haga clic en
- Active Incluir parámetro 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 explique 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 capa layer-parameters
Los siguientes son parámetros de capa que se aplican tanto a las capas de imagen como a las de texto.
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).
Parámetro de imagen image-parameter
Incluya el parámetro Source para reemplazar la imagen de la capa con una nueva imagen al cambiar la ruta de la imagen en el valor del parámetro en la dirección URL.
Parámetros de formato de texto text-formatting-parameters
Incluya los siguientes parámetros para editar el texto, su fuente, color y tamaño desde la dirección URL de envío al actualizar los valores de los parámetros en la dirección 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.
Parámetros del temporizador de cuenta atrás countdown-timer-parameters
Para las capas de temporizador de cuenta atrás, se pueden incluir los siguientes parámetros para actualizar dinámicamente el temporizador a través de la dirección URL:
-
Hora de finalización: incluye para establecer la hora de finalización de la cuenta atrás. Utilice una marca de tiempo Unix epoch o un formato de fecha y hora predefinido como valor del parámetro.
-
Texto adicional: Incluir para mostrar el texto después de que finalice la cuenta atrás (por ejemplo, “¡Se acabó el tiempo!”).
-
Parámetros de temporizador opcionales:
countdown_show_days,countdown_show_hours,countdown_show_mins- Establezca 1/0 para mostrar u ocultar unidades de tiempo específicas.countdown_cta: vínculo opcional de CTA para redirigir después de la finalización de la cuenta atrás.
Estos parámetros permiten actualizaciones en tiempo real del temporizador de cuenta atrás directamente desde la dirección URL de la plantilla.
Parametrizar subcadenas substring-parameterisation
En el panel Parámetros, desplácese hasta la sección Parámetros de subcadena. Esta sección incluye un selector de subcadena que muestra la cadena completa (capa de texto seleccionada) con formato coherente o sus partes con formato como subcadenas independientes. Seleccione una subcadena para parametrizar el texto, la familia de fuentes, el tamaño de fuente y el color.
Use el selector de subcadenas para dividir subcadenas para parametrizar sus partes individuales o combinar subcadenas para aplicar parámetros uniformes.
Dividir subcadena split-substring
Para parametrizar una parte específica de una subcadena, tire de la parte para convertirla en una subcadena independiente para la selección y parametrización individuales. Ejecute los siguientes pasos para dividir una subcadena en subcadenas independientes:
- En el selector de subcadenas, seleccione los caracteres de una subcadena para separarla.
- Haga clic en
Puede seleccionar la subcadena necesaria para parametrizar el texto, la familia de fuentes, el tamaño de fuente y el color.
Combinar subcadena merge-substring
La combinación de subcadenas elimina los parámetros individuales existentes y permite aplicar parámetros coherentes en toda la subcadena recién formada.
Ejecute los siguientes pasos para combinar dos subcadenas adyacentes y aplicar parámetros uniformes a la subcadena resultante:
-
En el selector de subcadenas, seleccione caracteres en dos subcadenas adyacentes con el mismo formato.
-
Haga clic en
Puede aplicar parámetros uniformes a la subcadena recién formada.
note NOTE Solo se pueden combinar subcadenas con un formato idéntico.
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 Hide (
- Vaya al Panel de propiedades de una capa.
- Active el parámetro Ocultar 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 active su parámetro Ocultar si no está parametrizado.
- Reemplace su nombre de parámetro Ocultar por el nombre copiado.
- Haga clic en Guardar para agrupar las capas.
- Ejecute los pasos 3 y 4 en la sección Previsualizar y publicar para ver los cambios.
Creación de una plantilla de Dynamic Media a partir de una PSD create-a-dynamic-media-template-from-a-psd
La función de conversión de PSD a plantilla de Dynamic Media permite generar una plantilla de Dynamic Media editable a partir de un archivo de Photoshop (PSD) en AEM as a Cloud Service. La plantilla generada está disponible en el editor de plantillas de Dynamic Media para su posterior edición.
Antes de convertir un PSD, asegúrese de que la configuración de Photoshop necesaria esté habilitada en Configuración general de Dynamic Media.
Antes de empezar before-you-begin
Antes de convertir un archivo de PSD en una plantilla de Dynamic Media, asegúrese de que la configuración de Photoshop necesaria esté habilitada en Configuración general de Dynamic Media.
-
En AEM, vaya a Herramientas > Assets > Configuración general de Dynamic Media.
-
Seleccione la ficha Photoshop.
-
Active las siguientes opciones:
- Mantener capas
- Crear plantilla
- Extraer texto
-
Seleccione Guardar.
Una vez habilitada esta configuración, puede importar un archivo de PSD para generar una plantilla de Dynamic Media.
Conversión de una plantilla de PSD en una plantilla de Dynamic Media convert-a-psd-to-a-dynamic-media-template
-
En AEM, seleccione Dynamic Media Assets.
-
Vaya a la carpeta en la que desea importar el archivo PSD.
-
Seleccione Importar PSD.
-
En el cuadro de diálogo Importar PSD, busque y seleccione el archivo
.PSDque desee convertir. -
Compruebe la ruta de destino.
-
Seleccione Importar.
El archivo PSD se procesa y se genera una plantilla de Dynamic Media.
La plantilla generada se muestra en Dynamic Media Assets.
De forma predeterminada, el nombre de la plantilla generada sigue este formato:
<PSD-file-name>_template
Puede abrir la plantilla generada en el Editor de plantillas de Dynamic Media para editarla más adelante.
Resolver fuentes que faltan resolve-missing-fonts
Si una PSD contiene fuentes que no están disponibles en Dynamic Media, la plantilla de Dynamic Media generada se mostrará con el indicador Missing Fonts. La vista previa de la plantilla no se procesará hasta que se resuelva el problema de fuente que falta.
Puede resolver las fuentes que faltan agregando la fuente original a Dynamic Media o reemplazándola con una fuente disponible.
Para resolver una fuente que falta:
-
Seleccione el indicador Fuentes faltantes.
-
Seleccione Editar para abrir la plantilla.
-
En el Editor de plantillas, seleccione la alerta de fuente que falta para ver las fuentes no disponibles.
-
Elija una de las siguientes opciones:
-
Para utilizar la fuente original, cargue la fuente que falta en AEM y haga que esté disponible para Dynamic Media. Una vez que la fuente esté disponible en Dynamic Media, estará disponible en el editor para su sustitución.
-
Para usar una fuente disponible, selecciona una fuente de la lista que se rellena automáticamente en la columna Replacement y, a continuación, selecciona Replace.
-
-
Si existen varias apariciones de la misma fuente que falta, seleccione Reemplazar todo.
-
Guarde la plantilla.
Una vez añadida o reemplazada la fuente que falta, se procesa la vista previa de la plantilla.
Volver a extraer una plantilla de un PSD re-extracting-a-template-from-a-psd
El reprocesamiento de una PSD que ya tiene una plantilla generada no crea una plantilla nueva ni actualiza la existente.
Para generar una nueva plantilla desde PSD:
- Elimine la plantilla generada existente.
- Vuelva a procesar el PSD original.
A continuación, se genera una nueva plantilla de Dynamic Media.
Recomendaciones de archivos de PSD psd-file-recommendations
Para obtener los mejores resultados al convertir un archivo de PSD en una plantilla de Dynamic Media, siga estas recomendaciones:
-
Usar una sola página o mesa de trabajo: La conversión de PSD a Dynamic Media admite una sola página o mesa de trabajo. Los archivos PSD con varias páginas o mesas de trabajo pueden dar como resultado una plantilla incompleta o incorrecta.
-
Evite usar
+en los nombres de las capas de imagen: Evite usar el carácter+en los nombres de las capas de imagen. Por ejemplo, usemy_sample_psd_fileen lugar demy_sample+psd_file. El uso del carácter+en el nombre de una capa de imagen puede hacer que la capa de imagen se convierta incorrectamente y provocar problemas de sincronización de imágenes. -
Aplicar rotación en el nivel de capa: Para las capas de imagen y texto que requieren rotación, aplique la rotación en el nivel de capa individual en lugar de en la composición de PSD general. Para las capas de texto, utilice solamente la rotación en el nivel de capa; evite Texto vertical u otras opciones de alineación del texto, ya que pueden causar una representación de capa inexacta en la plantilla de Dynamic Media generada.
Impacto de las operaciones de archivos de PSD impact-of-psd-file-operations
Copiar, mover o eliminar la plantilla original de PSD no afecta a la plantilla de Dynamic Media generada. La plantilla generada se administra por separado.
Si la plantilla ya no es necesaria, elimínela manualmente. Al eliminar la plantilla original de PSD, no se elimina automáticamente.
Descargar plantillas generadas downloading-generated-templates
Actualmente, las plantillas de Dynamic Media generadas no admiten la opción Descargar.
Recursos de imagen utilizados en PSD image-assets-used-in-the-psd
Las capas de imagen utilizadas en PSD se extraen y se muestran en la plantilla de Dynamic Media generada.
Sin embargo, las imágenes individuales extraídas de PSD no son visibles como recursos independientes en los AEM Assets. Por lo tanto, las imágenes extraídas no se pueden administrar de forma independiente en los AEM Assets.
Capas de degradado gradient-layers
El Editor de plantillas de Dynamic Media no admite capas de degradado de Photoshop ni capas de relleno degradado.
Si un PSD contiene capas de degradado:
- Es posible que la plantilla generada no coincida exactamente con la PSD original.
- En algunos casos, el degradado se puede convertir en una imagen.
- El aspecto final puede diferir del diseño original.
Para obtener los mejores resultados, evite utilizar capas de relleno degradadas o degradadas en archivos PSD destinados a la conversión de plantillas de Dynamic Media.
Objetos inteligentes con formas smart-objects-with-shapes
Es posible que los archivos PSD que contienen objetos inteligentes combinados con formas no se extraigan con precisión.
Por ejemplo, una imagen colocada dentro de una forma mediante un objeto inteligente puede aparecer de forma diferente en la plantilla generada.
Para obtener los mejores resultados, evite combinaciones complejas de objetos inteligentes y formas en archivos PSD destinados a la conversión de plantillas.
Capas de máscara masking-layers
Es posible que los archivos PSD que utilizan capas de enmascaramiento no siempre se extraigan con precisión. Como resultado, la plantilla de Dynamic Media generada puede tener un aspecto diferente al diseño original de PSD.
Para obtener los mejores resultados, evite configuraciones de enmascaramiento complejas en archivos PSD destinados a la conversión de plantillas.
Límite máximo de capa maximum-layer-limit
El editor de plantillas de Dynamic Media admite hasta 60 capas en una plantilla.
Si una PSD contiene más de 60 capas, es posible que la plantilla generada no coincida completamente con la PSD original. Las capas que superen el límite admitido no se procesan en el Editor de plantillas.
Para obtener los mejores resultados, use archivos PSD que contengan 60 capas o menos al convertirlos en plantillas de Dynamic Media.
Uso de imágenes rasterizadas use-rasterized-images
Si es posible, utilice imágenes rasterizadas en PSD para reducir el número de capas. Esto puede ayudar a facilitar la apertura y edición en el Editor de plantillas de Dynamic Media.
Previsualice y publique la plantilla de Dynamic Media para copiar la dirección URL de envío preview-and-publish-dynamic-media-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 Publicar.
-
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.
- Seleccione una capa de imagen, haga clic en
- Seleccione una capa de temporizador de cuenta atrás para modificar la hora de finalización, las unidades de visualización, el sufijo, el texto de reserva o CTA
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 la imagen. Asimismo, 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 Ocultar entre 0 y 1 y haga clic en Actualizar para ver los cambios. Las capas con el mismo parámetro Hide se ocultan o se muestran juntas. Asimismo, puede controlar la visibilidad de las capas desde la dirección URL.
También puede activar 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.
Copia de la 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 en directo. 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 Dynamic Media desde la dirección URL update-the-template-from-the-url
Editar parámetros directamente en la dirección URL puede ser una tarea 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.
- Edite el texto, la fuente, el color, el tamaño o la alineación de las 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 de Dynamic Media 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 plantillas de Dynamic Media add-CTA-in-dynamic-media-templates
Convierta cualquier imagen, texto o capa de forma 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/es/products.html" alt="Layer with CTA" title="https://business.adobe.com/es/products.html" target="_blank"> <area shape="rect" coords="6,206.57,129,231.43" href="https://business.adobe.com/es/products.html" alt="Layer with CTA" title="https://business.adobe.com/es/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.
Administración de plantillas de Dynamic Media en Adobe Journey Optimizer dynamic-media-templates-ajo-integration
Añada la plantilla de Dynamic Media en Journey Optimizer y actualice el contenido multimedia siempre que sea necesario. Ahora puede incorporar campos de personalización en los medios, lo que le permite crear contenido más personalizado y atractivo dentro de Journey Optimizer.
Para obtener más información, consulte Administrar plantillas de Dynamic Media en Adobe Journey Optimizer.
Puntos importantes a 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.
Ver también
- Explorar Dynamic Media y sus capacidades
- Explorar Dynamic Media con capacidades de OpenAPI