Diseño del contenido del correo electrónico en la interfaz de usuario

Una vez que haya crear el mensaje, puede empezar a crear su contenido de correo electrónico.

  1. En el mensaje recién creado, seleccione Email designer en el Body para obtener más información.

  2. En la página de inicio del Diseñador de correo electrónico, elija cómo desea diseñar el correo electrónico desde las siguientes opciones:

    • Select Design from scratch para utilizar las capacidades del diseñador de correo electrónico para crear su contenido de correo electrónico. Más información

    • Select Start from template para crear su correo electrónico a partir de una lista integrada de plantillas. Tenga en cuenta que no puede crear otras plantillas.

    • Select Code your own para introducir o pegar código sin procesar del HTML. Más información.

    • Select Import HTML para importar un archivo HTML o una carpeta .zip. Más información.

Diseño desde cero

El Diseñador de correo electrónico le permite definir fácilmente la estructura del correo electrónico. Al agregar y mover elementos estructurales con simples acciones de arrastrar y soltar, puede diseñar la forma de su correo electrónico en cuestión de segundos.

Para empezar a crear el contenido del correo electrónico con el diseñador de correo electrónico, siga los pasos a continuación:

  1. Después de seleccionar la variable Design from scratch para diseñar el contenido del correo electrónico, arrastre y suelte Structure components para definir el diseño del correo electrónico.

    NOTA

    Tenga en cuenta que la pila de columnas no es compatible con todos los programas de correo electrónico. Cuando no se admita, las columnas no se apilarán.

    Una vez colocados en el correo electrónico, no puede mover ni eliminar los componentes a menos que ya haya un componente de contenido o un fragmento colocado en él.

  2. Agregar tantos Structure components según sea necesario.

    Seleccione el n:n column para definir el número de columnas que elija (entre 3 y 10). También puede definir el ancho de cada columna moviendo las flechas en la parte inferior de cada columna.

    NOTA

    Cada tamaño de columna no puede ser inferior al 10 % de la anchura total del componente de estructura. No se puede quitar una columna que no esté vacía.

  3. En el Content components , puede agregar Content components según sus necesidades en el componente de estructura. Descubra más información sobre los componentes de contenido.

  4. Cada componente se puede personalizar aún más con el Component settings para obtener más información. Por ejemplo, puede cambiar el estilo del texto, el relleno o el margen del componente. Obtenga más información sobre la alineación y el relleno.

  5. En el Assets picker, puede añadir directamente los recursos almacenados en la variable Assets library a su correo electrónico. Obtenga más información sobre la administración de recursos.

    Haga doble clic en la carpeta que contiene los recursos y arrastre y suelte el recurso que desea agregar al correo electrónico.

  6. Agregue campos de personalización para personalizar el contenido de los datos de perfil. Descubra más información sobre la personalización del contenido.

  7. En el Links en el panel izquierdo, compruebe la lista de todas las direcciones URL del contenido que se rastrearán. Puede modificar sus Tracking Type, Label y Tags si es necesario.

    NOTA

    Obtenga más información sobre los vínculos y el seguimiento de mensajes en esta página.

  8. Si es necesario, puede cambiar al editor de código para personalizar aún más el correo electrónico haciendo clic en Switch to code editor en el menú avanzado. Para obtener más información sobre el editor de código, consulte esta página.

    NOTA

    No podrá utilizar el diseñador visual para este correo electrónico después de cambiar al editor de código.

  9. Haga clic en Show preview para comprobar la renderización del correo electrónico. Puede elegir la vista de escritorio o la vista móvil.

    Para obtener más información sobre la vista previa del correo electrónico, consulte Previsualizar y probar los mensajes.

  10. Cuando el correo electrónico esté listo, haga clic en Save & Close.

El contenido del correo electrónico ahora se puede utilizar en un mensaje. Obtenga información sobre cómo enviar un mensaje.

Creación de la versión de texto de un correo electrónico

Se recomienda crear una versión de texto del cuerpo del correo electrónico, que se utiliza cuando no se puede mostrar el contenido del HTML.

De forma predeterminada, el Diseñador de correo electrónico crea un Plain text versión del correo electrónico, incluidos los campos de personalización. Esta versión se genera y sincroniza automáticamente con la versión HTML del contenido.

Si prefiere usar un contenido diferente para la versión de texto sin formato, siga los pasos a continuación:

  1. En el correo electrónico, seleccione Plain text pestaña .

  2. Utilice la variable Sync with HTML para desactivar la sincronización.

  3. Haga clic en la marca de verificación para confirmar su elección.

  4. A continuación, puede editar la versión de texto sin formato como desee.

PRECAUCIÓN
  • Cambios realizados en Plain text la vista no se refleja en la vista del HTML.

  • Si vuelve a habilitar la variable Sync with HTML después de actualizar el contenido de texto sin formato, se perderán los cambios y se reemplazarán con el contenido de texto generado a partir de la versión del HTML.

Uso de un encabezado previo

Un encabezado previo es un breve texto de resumen que sigue la línea del asunto cuando se visualiza un correo electrónico desde su cliente de correo electrónico. El encabezado previo puede ayudarle a rastrear y personalizar mejor sus correos electrónicos.

  1. En el Diseñador de correo electrónico, agregue una Structure components para empezar a diseñar el correo electrónico.

  2. En el Body settings panel derecho, haga clic en Editar junto a la variable Preheader para añadir contenido.

  3. Añada el encabezado previo. Puede personalizarlo aún más haciendo clic en el Add personalization icono.

  4. En el Edit Personalization ventana, puede añadir Content block, Dynamic content o Personalization fields.

  5. Haga clic en Validate para comprobar la sintaxis de personalización.

  6. Haga clic en Save.

El encabezado previo ya está configurado para el correo electrónico.

Configuración de fondo

En cuanto a la configuración de fondos con el Diseñador de correo electrónico, Adobe recomienda lo siguiente:

  1. Aplique un color de fondo al cuerpo del correo electrónico si lo requiere el diseño.
  2. En la mayoría de los casos, defina los colores de fondo en el nivel de columna.
  3. Intente no utilizar colores de fondo en componentes de imagen o texto, ya que son difíciles de administrar.

A continuación se muestran los ajustes de fondo disponibles que puede utilizar.

  • Configure un Background color para todo el correo electrónico. Asegúrese de seleccionar la configuración de cuerpo en el árbol de navegación accesible desde la paleta izquierda.

  • Establezca el mismo color de fondo para todos los componentes de estructura seleccionando Viewport background color. Esta opción le permite seleccionar una configuración diferente del color de fondo.

  • Defina un color de fondo diferente para cada componente de estructura. Seleccione una estructura del árbol de navegación accesible desde la paleta izquierda para aplicar un color de fondo específico solo a esa estructura.

    Asegúrese de no establecer un color de fondo de ventanilla móvil, ya que podría ocultar los colores de fondo de la estructura.

  • Configure un Background image para el contenido de un componente de estructura.

    NOTA

    Algunos programas de correo electrónico no admiten imágenes de fondo. Cuando no se admita, se utilizará el color de fondo de fila. Asegúrese de seleccionar un color de fondo alternativo adecuado en caso de que la imagen no se pueda mostrar.

  • Establezca un color de fondo en el nivel de columna.

    NOTA

    Este es el caso de uso más común. Adobe recomienda configurar los colores de fondo en el nivel de columna, ya que esto permite una mayor flexibilidad al editar todo el contenido del correo electrónico.

    También puede establecer una imagen de fondo en el nivel de columna, pero esto no se suele utilizar.

Ajustar alineación vertical y relleno

En este ejemplo, ajustaremos el relleno y la alineación vertical dentro de un componente de estructura compuesto por tres columnas.

  1. Seleccione el componente de estructura directamente en el correo electrónico o utilizando el Navigation tree disponible en el menú de la izquierda.

  2. En la barra de herramientas, haga clic en Select a column y elija el que desea editar. También puede seleccionarlo en el árbol de estructura.

    Los parámetros editables de esa columna se muestran en la sección Column settings para abrir el Navegador.

  3. En Vertical alignment, seleccione Bottom.

    El componente de contenido se desplaza a la parte inferior de la columna.

  4. En Padding, defina el relleno superior dentro de la columna . Haga clic en el icono de candado para romper la sincronización con el relleno inferior.

    Defina el relleno izquierdo y derecho para esa columna.

  5. Proceda de forma similar para ajustar la alineación y el relleno de las demás columnas.

  6. Guarde los cambios.

Puede subrayar un vínculo y seleccionar su color y destino en el Diseñador de correo electrónico.

  1. En un texto Content component donde se inserta un vínculo, seleccione el vínculo .

  2. En el Component settings menú, marque Underline link para subrayar el texto de la etiqueta del vínculo.

  3. Elija cómo se redirigirá a su audiencia con la variable Target lista desplegable:

    • None: abre el vínculo en el mismo marco en el que se hizo clic (predeterminado).
    • Blank: abre el vínculo en una nueva ventana o pestaña.
    • Self: abre el vínculo en el mismo marco en el que se hizo clic.
    • Parent: abre el vínculo en el marco principal.
    • Top: abre el vínculo en todo el cuerpo de la ventana.

  4. Para cambiar el color del vínculo, haga clic en Link color.

  5. Elija el color que necesite.

  6. Guarde los cambios.

Añadir atributos de estilo en línea

En la interfaz del Diseñador de correo electrónico, al seleccionar un elemento y mostrar su configuración en el panel lateral, puede personalizar los atributos en línea y su valor para ese elemento específico.

  1. Seleccione un elemento en el contenido.

  2. En el panel lateral, busque el Styles Inline configuración.

  3. Modifique los valores de los atributos existentes o agregue otros nuevos utilizando la variable + botón. Puede añadir cualquier atributo y valor que sea compatible con CSS.

A continuación, el estilo se aplica al elemento seleccionado. Si los elementos secundarios no tienen atributos de estilo específicos definidos, se hereda el estilo del elemento principal.

En esta página