Los mensajes de email marketing con código personalizado tienen un aspecto diferente en Outlook

Si ha creado un correo electrónico de marketing con código personalizado, es posible que observe discrepancias en la forma en que se muestra el correo electrónico en Outlook, como problemas de posicionamiento o espaciado. Puede seguir los pasos de solución de problemas en las secciones siguientes para ayudar a

Si observas que el posicionamiento o el espaciado del correo electrónico no se ven bien en Outlook, sigue los pasos de solución de problemas a continuación.

Aprende más sobre diseño de correo electrónico en la Comunidad de Diseñadores de HubSpot . 

Espaciado

Hay dos métodos para ajustar el espaciado alrededor de las imágenes en Outlook: con hspace o vspace, y con tablas.

Utilizar hspace y vspace

El atributo HTML vspace define el espacio vertical y agrega un espaciado igual a la parte superior e inferior de tu imagen. El atributo hspace define el espacio horizontal y agrega un espaciado igual a la derecha e izquierda de tu imagen.

• En tu cuenta de HubSpot, dirígete a Marketing > Correo electrónico.

• Pase el ratón por encima del nombre del correo electrónico con una plantilla codificada personalizada y, a continuación, haga clic en Editar.

• Haga clic en el módulo de contenido.

• Al final del código de la imagen, añada uno o ambos de los siguientes códigos: hspace="10" vspace="10" sustituyendo 10 por la cantidad deseada de espaciado.

Utilizar tablas

Crea una tabla de 3 columnas que contenga tu imagen, espaciado y texto:

• En tu cuenta de HubSpot, dirígete a Marketing > Correo electrónico.

• Pase el ratón por encima del nombre del correo electrónico con una plantilla codificada personalizada y, a continuación, haga clic en Editar.

• En la barra de herramientas del editor de texto enriquecido, haz clic en Insertar > Tabla.   Crea una tabla 3x1.
  
  

  

• En la barra de herramientas del editor de texto enriquecido, haga clic en Avanzado y, a continuación, seleccione Código fuente.

• Especifique un ancho en la celda vacía, como por ejemplo <td width="10">para la cantidad de espacio que desea entre la imagen y el texto.

• Especifique una familia de fuentes, tamaño de fuente, color de fuente y altura de línea como style="font-family: sans-serif; font-size:15px; line-height: 1.5em; color: #000000" ya que Outlook añadirá su propio estilo cuando no se especifique.

Solucionar las líneas horizontales inesperadas que aparecen en tu correo electrónico

Debido a un error conocido en algunas versiones de Outlook, puede aparecer una línea horizontal entre las secciones de tu correo electrónico. Aunque no hay una forma consistente de solucionar el problema, puedes probar los siguientes pasos para solucionarlo:

• Configura el color de fondo de tu correo electrónico para que sea el mismo que el color del cuerpo.
• Actualiza el tamaño de letra y la altura de línea de tu contenido para que sean números pares.
• Incluye los siguientes estilos CSS en la sección head de tu plantilla de correo electrónico:

ms-text-size-adjust: none; mso-line-height-rule: exactly;