Creación de plantillas de correo electrónico

Después de crear una plantilla de correo electrónico, use el diseñador visual para crear los componentes estructurales y de contenido en la plantilla de correo electrónico.

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 elementos 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 fragmentos

En el editor de contenido visual, el icono Fragmentos se muestra a la izquierda. En el siguiente ejemplo se describen los pasos para agregar fragmentos al contenido de la plantilla.

  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 Miniaturas y 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 marcador de posición del componente estructural.

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

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

TIP
Si desea que el fragmento 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.

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. Los fragmentos agregados a una plantilla de correo electrónico no se pueden editar dentro de la plantilla: el fragmento de origen define el contenido.

Añadir recursos

En el editor de contenido visual, seleccione el icono Assets ( Mostrar Assets ) que se muestra a la izquierda.

NOTE
Si tiene una suscripción al as a Cloud Service de Experience Manager Assets junto con el Adobe Marketo Engage Design Studio predeterminado, elija el origen de imagen en el momento de la creación para un correo electrónico, una plantilla de correo electrónico o un fragmento visual. También puede seleccionar el origen de la imagen antes de abrir el diseñador visual para editarlo.

En el siguiente ejemplo se describen los pasos para agregar recursos al contenido de la plantilla:

  1. Para abrir la biblioteca de recursos, haga clic en el icono Assets.

    Desde el selector de recursos, puede seleccionar directamente los recursos almacenados en la biblioteca de origen.

  2. 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"}

    Para obtener más información sobre el uso de recursos del tipo de origen, consulte Agregar recursos al contenido.

  3. 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"}

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

A medida que trabaja con el contenido en el diseñador visual, puede tener acceso a las capas, contenedores y elementos mediante el árbol Navegación. Haga clic en el icono Navegación para mostrar el árbol a la izquierda del lienzo.

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

En el ejemplo siguiente se describen los pasos para ajustar el relleno y la alineación vertical dentro de un componente de estructura compuesto por 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.

Personalizar contenido

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

Ejemplos:

  • Hello {{profile.person.name.firstName}} {{profile.person.name.lastName}}

  • Hello {{profile.person.name.fullName}}

Al procesar el mensaje (correo electrónico y SMS), Journey Optimizer B2B Edition reemplaza la expresión por 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. Haga clic en + o para agregar un token al espacio en blanco.

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

  3. Haga clic en Guardar.

Editar seguimiento de URL vinculadas

  1. Haga clic en el icono Links de la izquierda para mostrar todas las direcciones URL del contenido que se va a rastrear.

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

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

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

Ver opciones

Aproveche las opciones de vista y validación de contenido disponibles en el diseñador 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 Ojo para obtener una vista previa del contenido en varios 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 diseñador de correo electrónico, puede realizar las siguientes acciones:

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

  • Restablecer plantilla - Haga clic en esta opción para borrar el lienzo del diseñador visual en una pizarra en blanco y reiniciar la creación de contenido.
  • Guardar como fragmento: guarde toda la plantilla o partes de ella 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 plantilla. A partir de ahí, puede elegir diseñar la plantilla desde cero o utilizar una plantilla existente para reiniciar el proceso de diseño.
  • HTML de exportación: descargue el contenido del lienzo visual en su sistema local en formato de HTML empaquetado como archivo zip.
recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0