Diseño del contenido desde cero con el Diseñador de correo electrónico content-from-scratch

En esta página: Aprenda a diseñar contenido de correo electrónico desde cero en Adobe Journey Optimizer Email Designer agregando estructuras y componentes de contenido y, a continuación, personalizando y previsualizando el correo electrónico.

Use el Designer de correo electrónico Adobe Journey Optimizer para definir fácilmente la estructura de su contenido. Al agregar y mover elementos estructurales con simples acciones de arrastrar y soltar, puede diseñar la forma del contenido en cuestión de segundos.

NOTE
La Ley de accesibilidad europea estipula que todas las comunicaciones digitales deben ser accesibles. Asegúrese de seguir las directrices específicas que se enumeran en esta página al diseñar contenido en Journey Optimizer.

Para empezar a crear contenido, siga los pasos a continuación:

  1. En la página de inicio de Designer, seleccione la opción Diseñar desde cero.

    Cree su pantalla de correo electrónico con la opción Diseñar desde cero resaltada, junto con sus propias opciones de Codifique e Importe HTML y las plantillas de ejemplo que se muestran a continuación

  2. Para empezar rápidamente, usa Módulos —bloques de contenido prediseñados y listos para usar, como encabezados, secciones a pantalla completa y pies de página— para acelerar la creación de correo electrónico y mantener la coherencia visual de tus campañas. Más información sobre los módulos

    Envíe un correo electrónico a Designer con la ficha Módulos seleccionada en el panel izquierdo y enumere las categorías de módulos como Encabezados, Héroe, Testimonio, Tarjetas, Equipos y Pies de página

  3. De lo contrario, diseñe el contenido arrastrando y soltando Estructuras en el lienzo para definir el diseño del correo electrónico.

    note tip
    TIP
    También puedes acelerar la creación de correos electrónicos con Generar contenido para generar contenido de correo electrónico completo, incluidos texto e imágenes, con Generar contenido completo con IA. A continuación, puede ir directamente a la vista previa y validación del contenido.
  4. Agregue tantas estructuras como sea necesario y edite su configuración en el panel dedicado de la derecha.

    Enviar correo electrónico a Designer con el panel Estructuras que muestra los diseños de columna disponibles y las fichas Configuración y estilos resaltadas en el panel Estructura derecho

    note
    NOTE
    En pantallas estrechas (por ejemplo, móviles), las columnas se apilan verticalmente de forma predeterminada para facilitar la lectura. Algunos clientes de correo electrónico no admiten este comportamiento, en cuyo caso las columnas permanecen una al lado de la otra. También puede desactivarlo usando la opción No apilar columnas en el móvil en la pestaña Configuración.
  5. La mayoría de las estructuras (1:1 column, 2:2 column, 1:2 column Left, etc.) son ajustes preestablecidos fijos. Seleccione el componente n:n column en su lugar para definir cualquier número de columnas de su elección (entre 3 y 10).

    Designer de correo electrónico que muestra la ficha Configuración de un componente de estructura seleccionado, con el campo Número de columnas resaltado

    Puede aumentar las Columnas número de una estructura existente en cualquier momento desde la ficha Configuración, incluso después de agregarle contenido: el contenido existente se conserva en lugar de perderse.

    También puede ajustar el ancho de cada columna directamente en el lienzo o editando los porcentajes en la ficha Configuración.

    note
    NOTE
    Cada tamaño de columna no puede ser inferior al 10 % de la anchura total del componente de la estructura. No se puede quitar una columna que no esté vacía.
  6. Desde la sección Contents, agregue tantos elementos como necesite a uno o más componentes de estructura. Más información sobre los componentes de contenido

  7. Cada componente se puede personalizar aún más mediante las fichas Configuración o Estilo del menú derecho. Por ejemplo, puede cambiar el estilo, el relleno o el margen del texto de cada componente. Obtenga más información sobre la alineación y el relleno

    Enviar correo electrónico a Designer con el panel Contenido resaltado a la izquierda y la pestaña Configuración de un componente de imagen seleccionado resaltada a la derecha, que muestra el origen de la imagen, el texto alternativo y los campos de vínculo

  8. Desde el Selector de recursos, puede seleccionar directamente los recursos almacenados en la biblioteca de Assets. Más información acerca de la administración de recursos

    Haga doble clic en la carpeta que contiene los recursos. Arrástrelos y suéltelos en un componente de estructura.

    Panel de Assets de Designer de correo electrónico que muestra los archivos de la biblioteca de recursos, con una imagen arrastrada al lienzo

  9. Inserte campos de personalización para personalizar el contenido a partir de atributos de perfiles, suscripciones a audiencias, atributos contextuales, etc. Más información sobre la personalización de contenido

    Barra de herramientas de texto de Designer de correo electrónico con el botón Agregar Personalization resaltado encima de un bloque de texto seleccionado

  10. Haga clic en Habilitar contenido de condición para agregar contenido dinámico y adaptar el contenido a los perfiles de destino según las reglas condicionales. Introducción al contenido dinámico

    Barra de herramientas de Email Designer que muestra la opción Habilitar contenido condicional encima de un bloque de texto que contiene un token de personalización de perfil

  11. Haga clic en la ficha Vínculos del panel izquierdo para mostrar todas las direcciones URL del contenido de las que se realizará un seguimiento. Puede modificar su tipo de seguimiento o etiqueta y agregar etiquetas si es necesario. Más información sobre los vínculos y el seguimiento

    El panel Vínculos de Designer de correo electrónico enumera las direcciones URL rastreadas con su etiqueta y tipo de seguimiento, y los detalles de un vínculo seleccionado se han expandido

  12. Si es necesario, puede personalizar aún más el correo electrónico haciendo clic en Cambiar al editor de código en el menú avanzado. Esto le permite editar el código fuente del correo electrónico, por ejemplo, para agregar etiquetas HTML personalizadas o de seguimiento. Obtenga más información sobre el editor de código

    note caution
    CAUTION
    No puede volver al diseñador visual para este correo electrónico después de cambiar al editor de código.
  13. Una vez que el contenido esté listo, utilice cualquiera de los métodos de simulación para comprobar la renderización. Puede elegir la vista de escritorio o la vista móvil. Encontrará información detallada en la sección Administración de contenido.

    Lienzo de Designer de correo electrónico con el botón Simular contenido resaltado en la barra de herramientas superior

  14. También puede validar la calidad del contenido para evaluar la legibilidad, la eficacia y la coherencia del contenido. Más información sobre la validación de calidad del contenido

  15. Cuando el contenido esté listo, haz clic en Guardar.

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page explains how to design email content from scratch in the Email Designer by adding structure and content components, defining columns, personalizing, adding dynamic content and links, and previewing before saving.

Intents:

  • Start an email from the Design from scratch option and add structure components
  • Define the number and width of columns in a structure component
  • Add content components, personalization fields, and dynamic (conditional) content
  • Review and configure tracked links from the Links tab
  • Preview rendering with a simulation method and validate content quality
  • Switch to the code editor for advanced source editing

Glossary:

  • Design from scratch: The Designer home page option to start building content by adding structures and components (product-specific)
  • Structure components: Elements that define the layout of the email, added by drag and drop into the canvas (product-specific)
  • n:n column: A structure component whose number of columns can be defined between 3 and 10 (product-specific)
  • Switch to code editor: An advanced-menu option to edit the email source code (for example to add tracking or custom HTML tags) (product-specific)

Guardrails:

  • The n:n column component supports between 3 and 10 columns.
  • Each column size cannot be under 10% of the total width of the structure component.
  • You cannot remove a column that is not empty.
  • After switching to the code editor, you cannot revert back to the visual designer for that email.
  • Stacking columns is not compatible with all email programs; when not supported, columns will not be stacked.

Terminology:

  • Canonical name: Structure components — Acronym: n/a — variants: Structures, structure component
  • Synonyms: “Design from scratch” = starting content with no template
  • Do not confuse: “Structure components” (define layout) ≠ “Content components” (elements placed inside structures)
  • Do not confuse: “Settings tab” ≠ “Style tab” (both used to customize components)

FAQ:

  • Q: How many columns can a structure have? — Between 3 and 10, defined with the n:n column component.
  • Q: Can I make a column narrower than 10%? — No, each column size cannot be under 10% of the total width of the structure component.
  • Q: Can I go back to the visual designer after using the code editor? — No, you cannot revert back to the visual designer for that email after switching to the code editor.
  • Q: How do I check rendering before saving? — Use either simulation method to check rendering, choosing the desktop or mobile view.
  • Q: Where do I manage tracked links? — In the Links tab from the left pane, where you can modify Tracking Type or Label and add Tags.
recommendation-more-help
journey-optimizer-help