En esta página: aprenda a diseñar el contenido de su correo electrónico en el diseñador de correo electrónico, los pasos clave para crearlo desde cero, el código o el HTML importado, y las prácticas recomendadas que mantienen el procesamiento de sus correos electrónicos en todos los clientes.
Para acceder al Diseñador de correo electrónico y comenzar a diseñar el contenido de su correo electrónico, primero debe crear un correo electrónico en un recorrido o una campaña.
A continuación, puede usar Journey Optimizer funcionalidades de diseño de correo electrónico para importar el contenido existente o empezar a crear correos electrónicos adaptables desde cero. Más información
El Diseñador de correo electrónico también le permite lo siguiente:
-
Aproveche Adobe Experience Manager Assets Essentials para enriquecer los correos electrónicos, crear y administrar su propia base de datos de activos. Más información
-
Encuentre fotos de Adobe Stock para crear su contenido y mejorar su diseño de correo electrónico. Más información
-
Mejore la experiencia de los clientes creando mensajes y de correo electrónico personalizados en función de sus atributos de perfil. Más información sobre personalización y contenido dinámico.
➡️ Descubra esta funcionalidad en vídeo
Pasos clave para crear contenido de correo electrónico key-steps
Una vez creado un correo electrónico, puede empezar a diseñar su contenido.
-
Desde la pantalla de configuración de recorrido o de campaña, pase por la pantalla Editar contenido para acceder al Diseñador de correo electrónico. Más información
-
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 opciones siguientes:
-
Diseñe su correo electrónico desde cero a través de la interfaz del diseñador de correo electrónico y aproveche las imágenes de Adobe Experience Manager Assets. Información sobre cómo diseñar el contenido de su correo electrónico en esta sección.
-
Codifique o pegue el HTML sin procesar directamente en el diseñador de correo electrónico. Información sobre cómo codificar su propio contenido en esta sección.
note NOTE En una campaña, también puede seleccionar el botón Editor de código del Editar contenido en el Navegador. Más información -
Importe contenido de HTML existente desde un archivo o una carpeta .zip. Obtenga información sobre cómo importar contenido de correo electrónico en esta sección.
-
Convierta diseños de imagen en plantillas de HTML con el conversor de imagen a HTML con tecnología de IA. Aprenda a transformar imágenes estáticas en plantillas de correo electrónico editables en esta sección.
-
Seleccione un contenido existente de una lista de plantillas integradas o personalizadas. Aprenda a trabajar con plantillas de correo electrónico en esta sección.
-
-
Una vez definido y personalizado el contenido del correo electrónico, puede verificarlo con comprobaciones de contenido automatizadas para detectar problemas de HTML y CSS, como etiquetas no admitidas, divs vacíos e infracciones del límite de tamaño, directamente en el panel de creación, antes de enviarlo. Más información
note NOTE El sistema también comprueba la configuración de las claves mientras diseña y muestra alertas para detectar advertencias (recomendaciones y prácticas recomendadas) y errores (problemas de bloqueo que impiden realizar pruebas o activaciones). Más información sobre las alertas por correo electrónico 
-
También puede validar la calidad del contenido para identificar posibles problemas con legibilidad, coherencia del contenido y eficacia. Más información sobre la validación de calidad del contenido
-
Finalmente, puede exportar el contenido para su validación o para utilizarlo posteriormente. Haga clic en HTML de exportación para guardar en su equipo un archivo .zip que incluirá su HTML y sus recursos.
Prácticas recomendadas para el diseño de correo electrónico best-practices
Al enviar correos electrónicos, es importante tener en cuenta que los destinatarios pueden reenviarlos, lo que a veces puede causar problemas con el procesamiento del correo electrónico. Esto es especialmente cierto cuando se utilizan clases CSS que tal vez el proveedor de correo electrónico no admita para el reenvío, por ejemplo, si utiliza la clase de CSS “is-desktop-hidden” para ocultar una imagen en dispositivos móviles.
Para minimizar estos problemas de renderización, se recomienda mantener la estructura de diseño del correo electrónico lo más sencilla posible. Intente utilizar un único diseño que funcione bien tanto para dispositivos de escritorio como móviles, y evite utilizar clases CSS complejas u otros elementos de diseño que puedan no ser totalmente compatibles con todos los clientes de correo electrónico.
Siguiendo estas prácticas recomendadas, puede ayudar a garantizar que los mensajes de correo electrónico se procesen correctamente, independientemente de cómo los destinatarios los vean o los reenvíen.
Consulte la tabla siguiente para conocer las prácticas recomendadas sobre el diseño de correo electrónico:
- Diseños estáticos basados en tablas para la estructura
- Tablas HTML y tablas anidadas para mantener la coherencia del diseño
- Anchuras de plantilla entre 600 y 800 píxeles
- CSS en línea simple para diseñar
- Fuentes seguras para la web para compatibilidad universal
- Es posible que las imágenes de fondo no aparezcan en ciertas plataformas de correo electrónico.
- Las fuentes web personalizadas carecen de compatibilidad universal.
- Los diseños anchos pueden visualizarse mal en las pantallas más pequeñas.
- Los mapas de imagen ofrecen una funcionalidad limitada.
- Un CSS incrustado a veces se elimina durante el envío del correo electrónico.
- JavaScript generalmente no es compatible en los entornos de correo electrónico.
- Las etiquetas
<iframe>se bloquean en la mayoría de las plataformas. - Flash está obsoleto y ya no es compatible.
- El audio incrustado a menudo no se reproduce.
- El vídeo incrustado no es compatible con muchas plataformas de correo electrónico.
- Los formularios no funcionan en los correos electrónicos.
- Las capas
<div>pueden dar lugar a problemas de renderizado.
Limitaciones y mecanismos de protección específicos email-guardrails
Incluso los correos electrónicos bien estructurados pueden procesarse de forma diferente en función del cliente o del entorno en el que se abran. Las secciones siguientes documentan las limitaciones conocidas y los comportamientos específicos del cliente que se deben tener en cuenta al diseñar los correos electrónicos.
Limitaciones del explorador web móvil mobile-web-limitations
El procesamiento del correo electrónico puede diferir cuando los destinatarios abren Gmail u Outlook a través de un explorador web móvil (por ejemplo, Chrome en un teléfono), en lugar de usar una aplicación móvil nativa o un cliente de escritorio. Se trata de una limitación conocida de los entornos de correo web móviles y no es específica de Journey Optimizer.
Esta diferencia de procesamiento se debe al comportamiento de los clientes de correo web en un explorador móvil. El explorador procesa primero la interfaz de usuario completa del correo web de escritorio y ubica el correo electrónico a dos capas de profundidad, fuera del alcance de cualquier CSS adaptable o consulta de medios. Gmail Web también elimina los bloques de CSS <style> y ajusta el contenido del correo electrónico en su propio <div>, lo que puede anular los estilos y crear conflictos de alineación.
Los síntomas habituales incluyen el desplazamiento de la alineación del texto (el texto alineado a la izquierda aparece centrado), líneas de separador blancas adicionales entre secciones de contenido y un diseño general que difiere del diseño de la plantilla.
Estos problemas solo se producen en Gmail Web y Outlook Web cuando se accede a ellos a través de un explorador móvil. Las aplicaciones móviles nativas de Outlook y Gmail, así como todos los clientes de escritorio, no se ven afectados.
-
Utilice diseños sencillos basados en tablas con CSS totalmente en línea.
-
Evite depender de consultas de medios o bloques de
<style>para propiedades de diseño críticas, como la alineación del texto.
Consideraciones de procesamiento de Outlook outlook-tips
Outlook tiene varias peculiaridades de procesamiento que pueden afectar al diseño del correo electrónico si no se tienen en cuenta durante el diseño. Para garantizar que los correos electrónicos se representan correctamente en Outlook, siga estas prácticas recomendadas:
- Utilice números pares para el relleno, los tamaños de fuente y las anchuras. Outlook convierte los píxeles en puntos internamente, lo que puede provocar un espaciado desigual y líneas blancas no deseadas cuando se emplean números impares.
- Establezca las anchuras de la tabla en píxeles, no porcentajes. Las anchuras basadas en porcentajes pueden alterar el diseño en Outlook. Aplique los valores de anchura directamente en el atributo estilo de cada tabla.
- Establezca siempre las anchuras de la imagen con el atributo
width. Outlook ignora las propiedades CSSwidthyheightde las imágenes y recurre a las dimensiones nativas del archivo si no hay ningún atributo HTML presente. - Incluya texto alternativo en todas las imágenes. Esto evita problemas de visualización y seguridad cuando las imágenes están bloqueadas.
- Aplique bordes a las celdas de la tabla, no al propio elemento de la tabla. Si un borde no se representa como se espera, muévalo de
<table>a<td>. - Evite las esquinas redondeadas. El
border-radiusde CSS no se admite de forma fiable en Outlook; las esquinas cuadradas son la opción predeterminada segura.
Para obtener información sobre el diseño en modo oscuro, incluido cómo usar consultas de medios y técnicas de intercambio de imágenes específicas de Outlook.com, consulte esta página.
Vídeotutoriales video
Aprenda a crear contenido de correo electrónico con el editor de mensajes.
Aprenda a configurar experimentos de contenido para realizar pruebas A/B y explorar el contenido de correo electrónico que mejor impulsa sus objetivos empresariales.
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 in the Email Designer — building from scratch, code, or imported HTML — verify it with automated content checks and content quality validation, export it, and follow rendering best practices and client-specific limitations.
Intents:
- Choose how to design an email: from scratch, code/paste raw HTML, import existing HTML, convert image designs to HTML, or select an existing content template
- Verify email content with automated content checks before sending
- Validate content quality for readability, cohesiveness, and effectiveness
- Export email content as a zip file containing HTML and assets
- Apply email design best practices to keep emails rendering well across clients
- Account for mobile web browser and Outlook rendering limitations
Glossary:
- Email Designer: The Journey Optimizer interface used to import content or build responsive emails from scratch, code, or imported HTML (product-specific)
- Automated content checks: A check that catches HTML and CSS issues — such as unsupported tags, empty divs, and size limit violations — directly in the authoring panel, before sending (product-specific)
- Content quality validation: A validation that identifies potential issues with readability, content cohesiveness, and effectiveness (product-specific)
- Image to HTML converter: An AI-powered converter that transforms static image designs into editable email templates (product-specific)
- Export HTML: An action that saves a zip file to your computer including your HTML and assets (product-specific)
Guardrails:
- Recommended template widths are between 600px and 800px (recommended).
- Recommended practices: static, table-based layouts; HTML tables and nested tables; simple, inline CSS; web-safe fonts.
- Use with care (may not render everywhere): background images, custom web fonts, wide layouts, image maps, and embedded CSS (embedded CSS is sometimes removed during email delivery).
- Not recommended (generally unsupported in email): JavaScript,
<iframe>tags, Flash, embedded audio, embedded video, forms, and<div>layering. - Alerts distinguish warnings (recommendations and best practices) from errors (blocking issues that prevent testing or activation).
- Mobile web rendering differences occur only in Gmail Web and Outlook Web when accessed via a mobile browser; Gmail/Outlook native mobile apps and all desktop clients are not affected.
- Outlook rendering: use even numbers for padding, font sizes, and widths; set table widths in pixels not percentages; set image widths using the
widthattribute; include Alt text on all images; apply borders to<td>not<table>; avoidborder-radius(rounded corners).
Terminology:
- Canonical name: Email Designer — Acronym: n/a — variants: message editor, email design capabilities
- Synonyms: “automated content checks” = “content check”
- Do not confuse: “automated content checks” (HTML/CSS issue detection) ≠ “content quality validation” (readability, cohesiveness, effectiveness)
- Do not confuse: “warnings” (recommendations and best practices) ≠ “errors” (blocking issues that prevent testing or activation)
FAQ:
- Q: What options are available for designing an email? — Design from scratch, code or paste raw HTML, import existing HTML from a file or .zip, convert image designs to HTML templates, or select an existing built-in or custom template.
- Q: How can I catch HTML and CSS issues before sending? — Use automated content checks, which flag unsupported tags, empty divs, and size limit violations in the authoring panel.
- Q: What template width is recommended? — Between 600px and 800px.
- Q: Why does my email look different in Gmail or Outlook on a phone browser? — This is a known limitation of Gmail Web and Outlook Web via a mobile browser; use simple table-based layouts with fully inlined CSS and avoid relying on media queries or
<style>blocks for critical layout. - Q: How do I export my content? — Click Export HTML to save a zip file containing your HTML and assets to your computer.