Creación de mensajes de correo electrónico

Después de agregar un recurso de correo electrónico a un nodo de acción de recorrido, puede definir el contenido del mensaje de correo electrónico.

Haga clic en Editar contenido del correo electrónico en la ficha Detalles del panel derecho.

Haga clic en Editar contenido de correo electrónico ​ {width="700" modal="regular"}

Esta acción inicia las herramientas de diseño de correo electrónico, donde puede elegir cómo desea diseñar el correo electrónico entre las siguientes opciones:

Después de crear y personalizar el contenido del correo electrónico, puede exportarlo para su validación o uso posterior. Haga clic en Exportar HTML para guardar el contenido como un archivo .zip que incluya su HTML y sus recursos.

TIP
Utilice el asistente de IA en Adobe Journey Optimizer B2B edition, con tecnología de IA generativa, para elevar el contenido al siguiente nivel. El asistente de IA puede ayudarle a optimizar el impacto de sus envíos generando correos electrónicos completos, contenido de texto de destino y obteniendo recomendaciones del asistente de IA para imágenes que resuenen con su audiencia. Más información

Diseñe el correo electrónico desde cero design-from-scratch

Utilice el espacio de diseño de contenido visual para definir la estructura y el contenido del correo electrónico. Al agregar y mover componentes estructurales con sencillas acciones de arrastrar y soltar, puede diseñar la forma del contenido del correo electrónico reutilizable en cuestión de segundos.

  1. En la página de inicio de Diseña tu plantilla, selecciona la opción Diseñar desde cero.

  2. En el cuadro de diálogo Crear correo electrónico, elija el tipo de contenido de correo electrónico que desea crear.

    • Usar temas - Elija esta opción para crear el correo electrónico en Modo de temas. En este modo, puede utilizar un tema de marca definido para optimizar el proceso de creación de contenido y asegurarse de que el diseño se ajuste a los estándares definidos.

    • Estilo manual: elija esta opción para crear el correo electrónico en modo manual. En este modo, se establece manualmente el estilo para todos los componentes de estructura y contenido que se añaden al lienzo en blanco.

  3. Agregar estructura y contenido a la plantilla.

  4. Revisar y actualizar vínculos.

  5. Probar el correo electrónico.

Cuando esté satisfecho con el contenido, haga clic en Guardar.

Importar contenido existente de HTML

El contenido importado puede ser:

  • Archivo de HTML con una hoja de estilos incorporada

  • Archivo .zip que incluye un archivo de HTML, la hoja de estilos (.css) y las imágenes

    note note
    NOTE
    No hay restricciones en la estructura de archivos .zip. Sin embargo, las referencias deben ser relativas y ajustarse a la estructura de árbol de la carpeta .zip. Las imágenes siempre se cargan en el repositorio de recursos del Marketo Engage conectado. Si desea administrar los archivos de imagen en Experience Manager Assets, cárguelos por separado en esa interfaz de aplicación y cambie los vínculos de imagen en el diseñador de correo electrónico.

Para importar un archivo que contenga contenido de HTML:

  1. En la página de inicio de Diseña tu plantilla, selecciona la opción Importar HTML.

  2. Arrastre y suelte el archivo HTML o .zip que contiene el contenido del HTML y haga clic en Importar.

importar contenido html en un archivo zip {width="500"}

NOTE
El uso de una etiqueta <table> como primera capa de un archivo HTML puede causar la pérdida de estilo, incluida la configuración del fondo y el ancho en la etiqueta de la capa superior.

Puede personalizar el contenido importado según sea necesario con las herramientas visuales del editor de correo electrónico.

Seleccionar una plantilla

Puede elegir entre:

  • Plantillas de ejemplo. La interfaz de Journey Optimizer ofrece 20 plantillas de correo electrónico predeterminadas entre las que puede elegir.

  • Plantillas guardadas. Use una plantilla personalizada guardada que haya creado desde cero mediante el menú Plantillas o que se haya guardado desde un correo electrónico en un recorrido mediante la opción Guardar como plantilla de contenido.

Utilice la sección Seleccionar plantilla de diseño para empezar a crear contenido a partir de una plantilla. Puede utilizar una plantilla de ejemplo o una plantilla de correo electrónico personalizada guardada desde la instancia de Journey Optimizer B2B Edition.

Plantillas guardadas

En la página de inicio de Diseño de la plantilla, la ficha Plantillas de ejemplo está seleccionada de forma predeterminada. Para usar una plantilla personalizada, selecciona la pestaña Plantillas guardadas.

Se muestra la lista de todas las plantillas de correo electrónico creadas en la zona protegida actual. Puede ordenarlos por Nombre, Última modificación y Última creación.

Elegir una plantilla guardada {width="800" modal="regular"}

Seleccione la plantilla que desee en la lista.

Después de la selección, se muestra una previsualización de la plantilla. En el modo de vista previa, puede desplazarse entre todas las plantillas de una categoría (de ejemplo o guardadas, según su selección) utilizando las flechas derecha e izquierda.

Vista previa de la plantilla guardada {width="800" modal="regular"}

Cuando la pantalla coincida con lo que desea usar, haga clic en Usar esta plantilla en la parte superior derecha de la ventana de vista previa.

Esta acción copia el contenido en el diseñador de contenido visual, donde puede editarlo según sea necesario.

Plantillas de muestra

Adobe Journey Optimizer B2B Edition ofrece una selección de plantillas de correo electrónico listas para usar, que se pueden usar para crear correos electrónicos y plantillas de correo electrónico.

Elija una plantilla proporcionada por el Adobe {width="800" modal="regular"}

NOTE
Las plantillas guardadas pueden tener configuraciones de gobernanza (bloqueo de contenido) aplicadas a uno o varios componentes. El espacio de diseño visual proporciona directrices sobre los componentes bloqueados cuando crea un correo electrónico a partir de una plantilla controlada.

Añadir estructura y contenido structure-content

  1. Para iniciar el diseño de contenido, arrastre un elemento desde Structures y suéltelo en el lienzo.

    Agregue tantos elementos de Structures como necesite y edite la configuración de cada uno en el panel de la derecha.

    note tip
    TIP
    Seleccione el componente n:n column para definir el número de columnas que desee (entre tres y 10). También puede definir el ancho de cada columna moviendo las flechas debajo de la columna.

    Arrastre una estructura al lienzo y ajuste la configuración {width="800" modal="regular"}

    Cada tamaño de columna no puede ser inferior al 10 % de la anchura total del componente de estructura. Solo se pueden eliminar columnas vacías.

  2. Expanda la sección Contenido y agregue tantos componentes de contenido como necesite a uno o más componentes de estructura.

    Arrastre un elemento de contenido al lienzo y ajuste la configuración {width="800" modal="regular"}

  3. Si es necesario, puede realizar personalizaciones adicionales para cada componente en las fichas Configuración o Estilo.

    Por ejemplo, puede cambiar el estilo del texto, el relleno o el margen de cada componente.

  4. Para agregar contenido condicional y adaptar el contenido a los perfiles de destino según las reglas condicionales, seleccione un componente de contenido y haga clic en el icono Habilitar contenido condicional de la barra de herramientas de componentes.

    Para obtener más información, consulte Contenido condicional.

Añadir CSS personalizado

Puede agregar su propio CSS personalizado directamente en el espacio de diseño de correo electrónico. Utilice CSS personalizado para aplicar un estilo avanzado y específico, para una mayor flexibilidad y control sobre el aspecto del contenido. Se recomienda añadir este estilo de nivel superior antes de incluir componentes de contenido, como imágenes, botones y texto.

Con al menos un componente de contenido en el lienzo, selecciona el componente Cuerpo en el árbol de navegación izquierdo para acceder al editor CSS personalizado.

NOTE
Si el mensaje de correo electrónico está diseñado con una plantilla con contenido bloqueado, no podrá agregar CSS personalizado al contenido. La etiqueta del botón cambia a Ver CSS personalizado y cualquier CSS personalizado que ya esté presente en el contenido es de solo lectura.

Acceder a los estilos del cuerpo {width="800" modal="regular"}

  1. En la ficha Estilos que se muestra a la derecha, haga clic en Agregar CSS personalizado.

    note note
    NOTE
    El botón Agregar CSS personalizado solo está disponible cuando se selecciona el componente Cuerpo. Sin embargo, puede aplicar estilos CSS personalizados a todos sus componentes.

    El editor emergente Agregar CSS personalizado se muestra con comentarios de código de marcador de posición.

  2. Introduzca su código CSS en el editor.

    Asegúrese de que CSS personalizado es válido y sigue la sintaxis adecuada. Si el CSS introducido no es válido, se muestra un mensaje de error y no se puede guardar el CSS. Para obtener más información, consulte Validez de CSS.

  3. Haga clic en Guardar para guardar el CSS personalizado.

    La hoja de estilos personalizada se aplica al contenido existente. Puede comprobar que el CSS personalizado se aplica según sus necesidades. Para obtener información sobre cómo realizar cambios y ajustar la aplicación de hojas de estilos, vea Solución de problemas.

NOTE
Si elimina todo el contenido, la sección CSS dejará de aparecer en el panel Estilos de cuerpo y dejará de aplicarse el CSS personalizado definido anteriormente. Si vuelve a agregar contenido, vuelve a aparecer la sección estilos CSS y se vuelve a aplicar el CSS personalizado.

Añadir fragmentos

NOTE
Los fragmentos no son compatibles entre el modo de tema y el modo manual del contenido del correo electrónico. Para utilizar un fragmento en el contenido del correo electrónico donde se aplique un tema, el fragmento también debe crearse en Modo de tema.

Un fragmento visual es un componente de diseño reutilizable al que varios recursos de contenido de Adobe Journey Optimizer B2B edition pueden hacer referencia. Normalmente es un bloque de contenido que se puede crear previamente e insertarse rápidamente para que la creación sea más rápida y coherente.

En el siguiente ejemplo se describen los pasos para agregar fragmentos a medida que crea el contenido.

  1. Para abrir la lista de fragmentos, seleccione el icono Fragmentos ( icono Fragmentos ).

    Puede hacer lo siguiente:

    • Ordenar el listado.
    • Examine, busque o filtre la lista.
    • Cambiar entre las vistas de miniaturas y de lista.
    • Actualice la lista para reflejar cualquiera de los fragmentos creados recientemente.

    Seleccionar un fragmento de la lista {width="700" modal="regular"}

  2. Arrastre y suelte cualquiera de los fragmentos en el componente estructural.

    El editor procesa el fragmento dentro de la sección o el elemento de la estructura de correo electrónico.

    note tip
    TIP
    Para agregar el fragmento de modo que ocupe todo el diseño horizontal dentro del correo electrónico, agregue una estructura de columna 1:1 y, a continuación, arrastre y suelte el fragmento en él.

    El contenido del fragmento se actualiza dinámicamente dentro de la estructura para mostrar cómo aparece el contenido en el contenido.

recommendation-more-help

Campos editables en fragmentos personalizables

Un fragmento visual puede incluir campos editables que se pueden personalizar. Los campos personalizados le permiten modificar parámetros al incorporar el fragmento en el contenido y crear una experiencia adaptada sin afectar al fragmento original. El autor del fragmento puede diseñar el fragmento para la personalización de los componentes de texto, imagen y botón. Si un fragmento incluido contiene componentes con campos editables, puede cambiar los valores predeterminados para personalizarlos según el contenido.

  1. Seleccione el componente de fragmento.

    La configuración que se muestra a la derecha incluye campos editables y con los valores predeterminados.

    Cambiar parámetros de componente de fragmento {width="700" modal="regular"}

  2. Cambie cualquier campo editable que sea necesario.

Una vez guardado el correo electrónico, aparecerá en la página de detalles del fragmento al seleccionar la pestaña Utilizado por en el resumen.

Añadir recursos de imagen

En el editor de contenido visual, seleccione el icono Marketo Engage Assets ( Marketo Engage Assets icon ) o el icono Experience Manager Assets ( AEM Assets ) en la barra de navegación izquierda. Desde el selector de recursos, puede seleccionar directamente los recursos almacenados en la biblioteca de origen.

NOTE
Si se le proporciona Adobe Experience Manager as a Cloud Services, tendrá acceso a los repositorios tanto para Marketo Engage Design Studio como para Adobe Experience Manager Assets as a Cloud Service cuando su cuenta de usuario tenga los permisos necesarios. Estos repositorios son independientes y no están sincronizados. Puede utilizar recursos de imagen de cualquier origen.
  • Añada un nuevo recurso arrastrando y soltando el recurso de imagen en un componente de estructura.

    Arrastre un recurso de Marketo Engage al lienzo y ajuste la configuración {width="800" modal="regular"}

  • Reemplace un recurso de imagen existente seleccionándolo en el lienzo y haciendo clic en Seleccionar un recurso en las herramientas de origen de imagen.

    Seleccione un recurso de la biblioteca de origen {width="600" modal="regular"}

Para obtener más información sobre el uso de recursos del tipo de origen, consulte Uso de recursos para la creación de contenido.

Desplazamiento por las capas, la configuración y los estilos

A medida que trabaja con el contenido en el espacio de diseño visual, puede acceder a los componentes, columnas y elementos de contenido mediante el árbol de navegación. Haga clic en el icono Árbol de navegación ( Icono del árbol de navegación ) en la parte izquierda para mostrar el árbol.

Acceder a las capas de contenido {width="800" modal="regular"}

En el siguiente ejemplo se describen los pasos para ajustar el relleno y la alineación vertical dentro de un componente de estructura con columnas.

  1. Seleccione la columna en el componente de estructura directamente en el lienzo o mediante el árbol de navegación que se muestra a la izquierda.

  2. En la barra de herramientas de la columna, haga clic en la herramienta Seleccionar una columna y elija la que desee editar.

    También puede seleccionarlo en el árbol de estructura. Los parámetros editables de esa columna se muestran en las fichas Configuración y Estilos de la derecha.

    Componentes de columna mostrados en el diseñador visual {width="800" modal="regular"}

  3. Para editar las propiedades de la columna, haga clic en la ficha Estilos de la derecha y cámbielas según sus necesidades:

    • Para Background, cambie el color de fondo según sea necesario.

      Desactive la casilla de verificación para un fondo transparente. Habilite la configuración de imagen de fondo para usar una imagen como fondo en lugar de un color sólido.

    • Para Alignment, selecciona el icono Top, Middle o Bottom.

    • Para Padding, defina el relleno para todos los lados.

      Seleccione relleno diferente para cada lado si desea ajustar el relleno. Haga clic en el icono Bloquear para interrumpir la sincronización.

    • Expanda la sección Avanzado para definir estilos en línea para la columna.

    Cambiar los estilos de la columna seleccionada {width="700" modal="regular"}

  4. Si es necesario, repita estos pasos para ajustar la alineación y el relleno de las demás columnas del componente.

  5. Guarde los cambios.

Personalización del contenido

Journey Optimizer B2B edition utiliza una sintaxis simple en línea que le permite crear expresiones con contenido personalizado entre llaves {}. Puede agregar varias expresiones en el mismo contenido o campo sin restricciones.

Ejemplos:

  • Hello {{lead.firstName}} {{lead.lastName}}
  • Hello {%= lead.mktoName ?: "Marketer" %}
NOTE
Journey Optimizer B2B edition ahora sigue la sintaxis de camel case para los tokens de personalización en los correos electrónicos que coincidan con otras aplicaciones de Adobe Experience Platform para lograr una experiencia coherente. Este formato de token es totalmente compatible con el idioma de plantilla Handlebars. Todos los tokens que se hayan agregado antes de este cambio se actualizan automáticamente.

Al procesar el contenido, Journey Optimizer B2B edition reemplaza la expresión con los datos contenidos en la base de datos de Experience Platform. Así, el primer ejemplo se convierte en Hello John Doe.

En el siguiente ejemplo se describen los pasos para personalizar el contenido mediante atributos de cliente potencial/cuenta y tokens del sistema.

  1. Seleccione el componente de texto y haga clic en el icono Agregar personalización de la barra de herramientas.

    Haga clic en el icono Personalizar {width="600"}

    Esta acción abre el diálogo Editar Personalization.

  2. Agregue un token haciendo clic en el símbolo más ( + ) que hay junto a él.

    Si desea agregar el token con una reserva (texto predeterminado que aparece cuando ese campo no está disponible para un posible cliente), haga clic en el icono Más ( ) y elija Insertar con texto de reserva.

    Construir texto personalizado con tokens {width="700" modal="regular"}

  3. Agregue cualquier token adicional u otro texto estático que desee incluir.

  4. Haga clic en Guardar.

    Los scripts de personalización se muestran en el espacio de diseño visual. Puede seleccionarlo para realizar cambios cuando sea necesario.

    Seleccionar script de personalización {width="600"}

NOTE
Si Mis tokens están definidos para el recorrido de la cuenta, también puede usar estos tokens específicos del recorrido para el contenido del correo electrónico. Consulte Tokens personalizados para personalización de correo electrónico para obtener más información.

Editar seguimiento de URL vinculadas

  1. Haga clic en el icono Vínculos ( Mostrar icono de vínculos ) de la izquierda para mostrar todas las direcciones URL vinculadas en el contenido que se va a rastrear.

  2. Si es necesario, haz clic en el icono Editar ( Editar icono ) y modifica el Tipo de seguimiento o Etiqueta.

    También puede agregar Etiquetas para un vínculo.

Haga clic en el icono Editar para acceder al seguimiento de vínculos {width="500"}

Aplicar estilo de modo oscuro

Use Modo oscuro para revisar la visualización del correo electrónico en busca de un tema oscuro en un cliente de correo electrónico. Un modo o tema oscuro permite a un cliente de correo electrónico o a una aplicación de soporte mostrar correos electrónicos con fondos más oscuros y colores más claros para el texto, los botones y otros elementos visuales. En la parte superior derecha del lienzo de diseño, cambie el selector a Modo oscuro ( Icono de modo oscuro ). A continuación, obtenga una vista previa y defina la configuración personalizada específica que los clientes de correo electrónico de soporte utilizarán para la visualización cuando se active su tema oscuro.

Lienzo de diseño de correo electrónico que muestra el selector de modo oscuro y el contenido de correo electrónico que se muestra en modo oscuro {width="700" modal="regular"}

Para obtener más información acerca del estilo en modo oscuro y las prácticas recomendadas, consulte Modo oscuro para el contenido de correo electrónico.

Ver opciones

Aproveche las opciones de vista y validación de contenido disponibles en el editor de correo electrónico visual.

  • Acercar/alejar el contenido en las opciones de zoom preestablecidas.

  • Cambie la visualización del contenido en Escritorio, Móvil o Solo texto/Texto sin formato.

    • Haz clic en el icono Ver para obtener una vista previa del contenido entre dispositivos.
    • Seleccione uno de los dispositivos predeterminados o introduzca dimensiones personalizadas para obtener una vista previa del contenido.

Más opciones

En el menú Más… de la parte superior del espacio de diseño visual, puede realizar las siguientes acciones:

Haga clic en Más para acceder a las acciones de plantilla {width="500"}

  • Restablecer correo electrónico: haga clic en esta opción para borrar el lienzo del diseño del correo electrónico en una pizarra en blanco y reiniciar la creación del contenido.
  • Guardar como fragmento: guarde todo o parte del correo electrónico como un fragmento para reutilizarlo en varios correos electrónicos o plantillas de correo electrónico. Proporcione un nombre y una descripción para el fragmento y guárdelo en la lista de fragmentos disponibles.
  • Cambia tu diseño - Vuelve a la página Diseña tu correo electrónico. Desde allí, puede elegir otra plantilla para reiniciar el proceso de diseño. También puede diseñar el contenido desde cero con un lienzo en blanco (Modo clásico) o con un tema de marca (Modo de tema).
  • Guardar como plantilla de contenido - Guarde el cuerpo del correo electrónico como una plantilla de correo electrónico para reutilizarla en varios correos electrónicos o plantillas de correo electrónico. Proporcione un nombre y una descripción para la plantilla y guárdela en la lista de plantillas de correo electrónico guardadas.
  • Exportar HTML: descargue el contenido del lienzo visual en su sistema local en formato HTML empaquetado como archivo zip.

Compruebe y pruebe el correo electrónico email-testing

Cuando se define el contenido del mensaje, puede utilizar perfiles de prueba para previsualizarlo, enviar pruebas y revisar su procesamiento en las relaciones de aspecto del escritorio y del dispositivo móvil. Si ha insertado contenido personalizado, puede obtener una vista previa de cómo se muestra este contenido en el mensaje mediante los datos del perfil de prueba.

Para obtener una vista previa del contenido del correo electrónico, haga clic en Simular contenido y seleccione un perfil de prueba para comprobar el mensaje con los datos del perfil de la persona.

Simule el contenido del correo electrónico para comprobar su diseño {width="700" modal="regular"}

Puede acceder a herramientas adicionales para validar y revisar el contenido del correo electrónico:

6ef00091-a233-4243-8773-0da8461f7ef0