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.

Resolver los problemas de 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.

1. En tu cuenta de HubSpot, dirígete a Marketing > Correo electrónico.
2. Haga clic en el nombre del correo electrónico redactado utilizando una plantilla codificada personalizada.
3. En el editor de correo electrónico, haga clic en el módulo que desea editar.
4. En la barra de herramientas de texto enriquecido, haga clic en el menú desplegable Avanzado y seleccione Códigofuente. 
5. En el cuadro de diálogo, añada hspace="10" vspace="10" al final del código de la imagen. Sustituya 10 por la cantidad de espaciado deseada.

Utilizar tablas

Puede utilizar una tabla de 3 columnas para contener uniformemente la imagen, el espaciado y el texto.

1. En tu cuenta de HubSpot, dirígete a Marketing > Correo electrónico.
2. Haga clic en el nombre del correo electrónico redactado utilizando una plantilla codificada personalizada.
3. En el editor de correo electrónico, haga clic en el módulo que desea editar.
4. En la barra de herramientas de texto enriquecido, haga clic en el menú desplegable Insertar , seleccione Tabla y cree una tabla de 3x1. 

5. En la barra de herramientas del editor de texto enriquecido, haga clic en elmenú desplegable Avanzado y seleccione Código fuente.

6. En el cuadro de diálogo, añada una anchura para la celda vacía, como <td width="10">, para ajustar el espacio entre la imagen y el texto.
7. Ajuste la familia, el tamaño y el color de la fuente, así como la altura de línea, ya que Outlook añadirá su propio estilo cuando no se especifique.

Solucionar problemas de líneas horizontales inesperadas

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