Consejos y Códigos Útiles para Configurar Correos HTML en Albato

Si envías correos electrónicos a través de Albato usando la conexión Email (SMTP e IMAP), pequeñas decisiones de formato — el texto de vista previa, el tamaño de fuente, el espaciado — pueden afectar cómo se ven y funcionan tus mensajes. Ajustar estos detalles es importante para las tasas de apertura y la imagen de tu marca.

Albato se encarga de esto por ti. En el momento en que configuras la acción Send Email (Enviar correo), puedes definir todo el diseño HTML directamente en el constructor de automatizaciones — sin necesidad de ninguna herramienta externa.

Esta guía cubre las personalizaciones HTML más comunes: vista previa del correo, color y tamaño de fuente, tipo de fuente y márgenes. Usa las opciones que mejor se adapten a tu configuración.

Para esto, utilizaremos la conexión del aplicativo Email (SMTP e IMAP). Si aún no has creado esta conexión, consulta la guía paso a paso.

Configurando la Acción en tu Automatización

En este caso, no importa qué disparador estés usando — la idea es configurar la acción Send Email (Enviar correo).

Como ejemplo, imaginemos un escenario en el que se envía un correo a un lead marcado como oportunidad en RD Station.

Nota: Puedes seguir las instrucciones a continuación independientemente del disparador que uses. Solo presta atención a los ajustes en la acción Send Email (Enviar correo) que configuraremos a continuación.

En tu automatización, haz clic para agregar una nueva acción:

Selecciona la aplicación Email y luego la acción Send email via SMTP (Enviar correo vía SMTP):

A continuación, completa los campos obligatorios como remitente, destinatario y asunto. En estos campos puedes usar valores recibidos del disparador o valores fijos ingresados manualmente.

Además, asegúrate de activar la opción que indica que el cuerpo del correo está en HTML.

Nota: Para garantizar el funcionamiento correcto, todo el contenido del correo también debe estar formateado en HTML.

Otros campos como CC, BCC y similares son opcionales.

Ahora, personalicemos el campo Text (Texto) usando algunos códigos HTML. A continuación encontrarás algunas opciones — usa las que mejor se adapten a tu estrategia.

Vista Previa del Correo

La vista previa del correo es una frase corta que aparece en algunos clientes de correo justo después de la línea de asunto cuando se recibe un nuevo mensaje:

Por defecto, esta información suele ser la primera línea de tu correo.

Sin embargo, si deseas personalizarla, agrega el siguiente código antes del texto principal de tu correo en Albato (en la primera línea):

<span style="display:none; font-size:1px; color:#ffffff; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;">preview text</span>

Reemplaza preview text con la frase que deseas que aparezca como vista previa del correo.

En Albato, se vería así:

De esta forma, la vista previa de tu correo quedará configurada correctamente.

Color y Tamaño de Fuente

Para configurar estos detalles, también puedes usar HTML.

Para cambiar el tamaño y el color de la fuente, usa el siguiente código:

<p style="font-size:15px; color:#333;">Text to be modified</p>

Copia y pega este código, modificando los valores según sea necesario.

Ajusta el tamaño de fuente (font-size), el color (color) y el texto al que deseas aplicar el nuevo estilo.

Para el color, deberás usar un código estándar conocido como RGB.

Tipo de Fuente

Para cambiar la fuente de tu texto, usa el siguiente código.

Al igual que en el ejemplo anterior, modifica los valores y agrega la línea a tu correo:

<p style="font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:22px;color:#333;">Text to be modified</p>

Este ejemplo usa una fuente generalmente recomendada para la mayoría de los clientes de correo.

• font-family: Arial, sans-serif — universal y compatible.
• line-height: 1.5 o 22px — mejora la legibilidad.

Estos ajustes son sugerencias — puedes elegir cualquier familia de fuentes, alineación, color o espaciado que prefieras.

Márgenes y Espaciado

Para ajustar el espaciado, usa el siguiente código:

<td style="padding:20px 30px;">Text inside the margin to be modified</td>

Modifica el padding (espaciado interno) y los valores siguientes (espaciado externo) según sea necesario.

Si deseas separar bloques de contenido, también puedes usar este código:

<div style="margin-bottom:25px;"></div>

Todos los valores son ejemplos — modifícalos según sea necesario.

Revisando el Correo Antes de Guardar Este Paso

Puedes continuar personalizando tu correo usando otros códigos o configuraciones en este campo de texto.

Lo importante es que, después de terminar el correo, verifiques que todas las etiquetas y ajustes estén correctamente insertados y sigan la sintaxis HTML adecuada.

Ejemplo de un correo configurado:

Si no estás seguro de que todo esté correcto, guarda el paso, activa la automatización y realiza una prueba real — actívala y verifica cómo aparece el correo directamente en tu bandeja de entrada.

Si encuentras errores o formatos no deseados, vuelve y edita el código HTML en el campo de texto.

Ahora puedes enviar correos HTML bien formateados a través de tus automatizaciones en Albato. Si tienes alguna pregunta, contacta a nuestro soporte a través del chat.