El constructor de emails te permite crear y personalizar correos con una experiencia visual e intuitiva. Editas directamente sobre el diseño, ves los cambios en tiempo real y publicas más rápido con un flujo de trabajo optimizado.
¿Qué es el editor en línea?
El editor en línea está integrado en el constructor de Templates y Campañas. Funciona con el principio WYSIWYG ("lo que ves es lo que obtienes"): cada cambio que haces —negrita, imagen, color de encabezado— se refleja de inmediato tal como aparecerá en el email final.
Puedes:
- Usar múltiples estilos de encabezado y párrafo
- Elegir entre fuentes compatibles y tamaños de 8px a 96px
- Colorear texto con código hexadecimal
- Aplicar negrita, cursiva, subrayado y tachado
- Agregar hipervínculos
- Usar valores personalizados y generación de contenido con IA
Padding por defecto
El padding predeterminado para todos los bloques de contenido es: Superior: 12 · Inferior: 12 · Izquierdo: 24 · Derecho: 24. Puedes ajustarlo en cada elemento.
Casos de uso
Algunos ejemplos de para qué puedes aprovechar el constructor:
- Campaña promocional: Colores de marca, imágenes llamativas, botón CTA destacado en columna única para mejor lectura en móvil.
- Newsletter estacional: Diseño multi-sección con categorías de productos, imagen optimizada y fondo complementario.
- Reactivación: Personalización con el nombre del contacto, formato tipo carta, colores cálidos y contenido dinámico.
- Carrito abandonado: Dos columnas —producto abandonado a un lado, oferta especial al otro— con valores dinámicos automáticos.
- Invitación a evento: Diseño limpio, columna única, CTA claro y posibilidad de agregar un contador regresivo con código personalizado.
- Serie educativa: Mezcla de texto, imágenes y video para explicar el tema. Bullets y subtítulos para puntos clave.
- Apreciación al cliente: Muy personalizado: nombre, historial, colores cálidos.
- Seguimiento post-compra: Columna única, marca consistente, detalles del pedido y sugerencias relacionadas con contenido dinámico.
- Secuencia de onboarding: Serie de emails con pasos ilustrados y personalización del nombre.
- Lanzamiento de producto: Colores vibrantes, texto grande en datos clave, imágenes de alta calidad.
- Anuncio de webinar: Titular prominente, CTA y contenido dinámico según intereses del contacto.
- Resumen semanal: Multi-sección con resúmenes de artículos, videos o productos y CTA a "Leer más".
- Invitación a encuesta: Columna única, explicación clara y botón grande para iniciar.
- Solicitud de donación: Columna única, contenido emotivo, imágenes de la causa y CTA de donación.
- Solicitud de testimonial: Email simple y personal con CTA directo.
- Renovación de membresía: Multi-sección: recordatorio + beneficios disfrutados.
- Invitación a beta: Titular atractivo, descripción breve y CTA para unirse.
- Revisión de fin de año: Multi-sección con gráficos y resúmenes trimestrales.
- Comunicación interna: Columna única con secciones claras: anuncios, actualizaciones, recordatorios.
- Cross-sell / Upsell: Productos relacionados con imágenes, descripciones y CTA de compra.
Beneficios clave del editor
- Consistencia visual: Padding uniforme en todos los emails de tu cuenta.
- Fuentes personalizadas: Arial, Georgia, Verdana y más para alinear con tu marca.
- Texto con precisión: Negrita, cursiva, subrayado, tachado y colores exactos por código hex.
- Hipervínculos: Agrega enlaces a palabras o frases en cualquier parte del contenido.
- IA para contenido: El asistente de IA puede sugerirte texto a partir de tus inputs iniciales.
- Limpieza de formato: Al pegar texto externo, puedes limpiar el estilo con un clic y aplicar el tuyo.
Cómo acceder al constructor de emails
Ve a Marketing > Emails > Templates
Desde el menú principal, navega a Marketing, luego a Emails y finalmente a Templates.
Crea o edita un template
Puedes crear un nuevo template desde cero o abrir uno existente para editarlo.
Navegando la interfaz
Al abrir el constructor verás una barra de herramientas en la parte superior con tres secciones principales:
- Agregar elementos: Introduce nuevos contenidos al email (texto, imágenes, botones, etc.).
- Gestionar elementos: Vista general de todos los elementos del email para seleccionarlos y ajustarlos.
- Apariencia: Controla el estilo global: color de fondo, divisores, CSS personalizado y formato móvil.
Panel flexible: izquierda / derecha
Puedes anclar el panel de edición a la derecha (o volver a la izquierda) para trabajar de forma más eficiente, especialmente si usas la IA de email junto con edición manual.
Requisito previo
Para ver la IA de email y el control de posición del panel, activa Email AI en Configuración de Agencia > Labs para la sub-cuenta correspondiente.
Abre una campaña o template
Ve a Marketing > Emails y abre la campaña o template en modo edición.
Activa Email AI (opcional)
Si quieres usar la IA en paralelo, enciéndela desde el editor.
Cambia la posición del panel
Haz clic en el control de posición del panel para anclarlo a la derecha o moverlo a la izquierda.
Continúa editando
Trabaja con la IA y el canvas visibles al mismo tiempo.
Usa el panel anclado a la derecha cuando esperes muchas sugerencias de IA; cambia a la izquierda si prefieres paridad con otras herramientas.
Tipos de elementos que puedes agregar
Texto
Úsalo para encabezados, párrafos y leyendas. El editor en línea te permite ajustar fuente, tamaño, color, negrita, cursiva, subrayado y tachado. Para encabezados H1–H4, usa el botón B de la barra para activar o desactivar negrita sin cambiar el nivel.
Imagen
Incluye fotos, gráficos o cualquier contenido visual. Puedes subir desde tu dispositivo o enlazar desde una fuente externa.
| Opción | Descripción |
|---|---|
| Subir imagen | Desde tu dispositivo. Máximo 10 MB. |
| URL de imagen | Desde fuente externa o la biblioteca de medios de tu CRM. |
| Texto alternativo | Mejora la accesibilidad y se muestra si la imagen no carga. |
| Enlace (opcional) | Redirige a una URL al hacer clic en la imagen. |
| Ancho y alto | Valores en píxeles o auto para mantener proporciones originales. |
| Padding | Espacio alrededor de la imagen. |
| Alineación | Izquierda, centro o derecha. |
Botón
Agrega interacción con llamadas a la acción. Configura texto, fuente, colores, radio de borde y la acción que ejecuta al hacer clic.
Acciones disponibles:
- URL: Redirige a una página web.
- Correo: Abre el cliente de email del destinatario.
- Descarga de archivo: Descarga un archivo directamente.
- Teléfono: Inicia una llamada en dispositivos móviles.
- Otro: Para acciones personalizadas.
Valores personalizados en campos de color
Puedes usar tokens de Valores Personalizados en los campos de color (fondo, cuerpo, botón). El constructor los aplica al instante en el canvas — no necesitas ir al modo Vista previa para confirmar el cambio.
Divisor
Introduce separaciones visuales entre secciones. Ajusta color, ancho, estilo (sólido, punteado, rayado) y grosor.
Redes sociales
Incluye íconos con enlaces a tus perfiles. Configura estilo de ícono, visualización (solo ícono, solo texto o ambos), alineación, tamaño y espaciado.
Pie de página (Footer)
Agrega información esencial: dirección, políticas, enlace de baja. El editor en línea te permite modificar texto, fuente, estilos, hipervínculos y alineación directamente en el footer.
Código personalizado
Inserta HTML directamente en el email para crear layouts y componentes avanzados.
Para usuarios con conocimiento de HTML
El bloque de código está pensado para quienes conocen HTML. Ten en cuenta que los clientes de email tienen distintos niveles de soporte para HTML y CSS, así que prueba siempre antes de enviar.
Video
Integra contenido multimedia enlazado a tu video alojado. Soporta YouTube, Vimeo, Wistia y HTML5.
Configura: tipo de plataforma, URL, miniatura personalizada, dimensiones, tamaño y opacidad del botón de reproducción, y padding.
Carrito de compras
Ideal para e-commerce. Muestra productos, precios, cantidad y total por línea. Úsalo en emails de carrito abandonado para recordar los artículos pendientes.
Encabezado RSS
Muestra dinámicamente las etiquetas <channel> de tu feed RSS en la campaña.
Variables disponibles: {{rss_feed.title}}, {{rss_feed.description}}, {{rss_feed.url}}, {{rss_feed.date}}.
Puedes elegir entre Básico (texto no editable con las variables) o Personalizado (texto editable donde tú decides la estructura).
Elementos RSS
Importa contenido dinámico de tu feed RSS: artículos, noticias o cualquier publicación. Elige entre:
- Extractos: Solo un resumen de cada ítem, con enlace a leer más.
- Extractos con imagen: Resumen más imagen asociada.
- Título: Solo el título de cada ítem.
- Contenido completo: El artículo entero dentro del email.
- Personalizado: Tú eliges qué información mostrar y cómo.
Variables disponibles por ítem: {{rss_item.title}}, {{rss_item.content}}, {{rss_item.url}}, {{rss_item.date}}, {{rss_item.author}}.
Layouts (Estructuras de columnas)
Definen la estructura de tu email. Arrástralos al canvas y coloca elementos dentro.
| Layout | Descripción |
|---|---|
| 1 | Columna única. Ideal para móvil y contenido lineal. |
| 2 | Dos columnas iguales para mostrar dos grupos de contenido en paralelo. |
| 1/3 : 2/3 | Una columna angosta + una ancha. Útil para imagen + descripción. |
| 2/3 : 1/3 | Lo contrario del anterior. |
| 1/4 : 3/4 | Columna muy angosta (menú) + área principal de contenido. |
| 3/4 : 1/4 | Lo contrario del anterior. |
| 4 | Cuatro columnas iguales para grillas de imágenes o artículos. |
Gestión de texto y formato
Al seleccionar cualquier texto, el editor en línea muestra opciones de formato:
- Cambiar tipo de encabezado (H1–H4, párrafo)
- Seleccionar fuente y tamaño
- Negrita, cursiva, subrayado, tachado
- Agregar o editar hipervínculos
| Campo | Descripción |
|---|---|
| URL del enlace | La página a la que redirige el link. |
| Texto a mostrar | El texto clicable que aparece en el email. |
| Título | Tooltip que aparece al pasar el cursor. |
| Abrir en nueva ventana | Abre en otra pestaña para no navegar fuera del email. |
| Lista de enlaces | Acceso rápido a enlaces usados frecuentemente. |
- Alineación, interlineado y listas
Tipos de viñeta disponibles: Disco · Círculo · Cuadrado · Decimal · Alfa minúscula · Griego minúsculo · Romano minúsculo · Alfa mayúscula · Romano mayúsculo.
Opciones avanzadas de edición
- Limpiar formato: Elimina todo el estilo de un bloque de texto. Útil al pegar contenido externo.
- Valores personalizados: Insertan datos específicos del contacto (nombre, ciudad, etc.) para personalizar cada envío y mejorar la tasa de apertura y clic.
- Links de acción (Trigger links): Permiten que el destinatario ejecute acciones desde el email: confirmar una suscripción, darse de baja o acceder a una oferta especial.
- IA de contenido: Genera texto automáticamente. Configura:
- Contexto: Tema general (ej. "Marketing Digital").
- Título del contenido: Idea principal a desarrollar.
- Descripción breve: Detalles o ángulos específicos.
- Palabras clave: Términos que la IA debe incorporar.
- Tono de escritura: Profesional, amigable, informal, etc.
- Número de variaciones: Hasta 5 versiones para elegir.
Gestión de elementos
La sección Gestionar elementos te da control total sobre cada pieza del email.
- Visibilidad móvil: Muestra u oculta elementos en dispositivos pequeños.
- Visibilidad escritorio: Muestra u oculta elementos en pantallas grandes. Aquí puedes incluir elementos que requieren hover, no disponibles en móvil.
- Puedes editar las propiedades de cada elemento de forma independiente.
- Y eliminar cualquier elemento que no necesites.
Al pasar el cursor sobre una sección, columna o elemento en el panel, el canvas hace scroll automáticamente a esa posición.
Apariencia y estilo global
La sección Apariencia controla el look general del template.
Template
| Opción | Descripción |
|---|---|
| Color de fondo | Color detrás de todo el contenido. |
| Color del cuerpo | Color del área principal donde vive el contenido. |
| Ancho del contenido | Por defecto 600px. Ajústalo según tu diseño. |
| Imagen de fondo | Sube una imagen o usa URL. Ten un color de respaldo porque no todos los clientes de email la muestran. |
Valores personalizados en colores
Puedes usar tokens de Valores Personalizados en los campos de color. El constructor aplica el color al instante en el canvas — no necesitas ir a Vista previa.
Botón
Ajusta el radio de esquina, color, fuente y estilos de texto (negrita, cursiva, subrayado) para todos los botones del template.
Divisor
Define el grosor, color y estilo de los divisores del template.
CSS personalizado
Requiere conocimiento de CSS
El CSS en emails funciona diferente al de páginas web por las limitaciones de los clientes de email. Prueba siempre en múltiples clientes antes de enviar.
Formato para móvil
El constructor incluye configuración específica para dispositivos móviles. Estos ajustes solo afectan la vista móvil en clientes que soportan media queries.
Puedes configurar tamaño de fuente, alineación e interlineado para: Encabezado H1 · H2 · H3 · Párrafo · Botón.
Guía de referencia:
- H1: Tamaño grande para captar atención sin dominar la pantalla. Alineación centrada, interlineado 1.5.
- H2: Más pequeño que H1, mantiene la jerarquía. Mismos principios de alineación.
- H3: Diferencia claramente de H1 y H2; coherente con el diseño general.
- Párrafo: Tamaño algo mayor que en escritorio para facilitar la lectura en pantallas pequeñas.
- Botón: Texto grande para evitar clics erróneos en pantalla táctil.
Mejores prácticas para email en móvil
- Columna única: Escala mejor en pantallas pequeñas; múltiples columnas se vuelven confusas.
- Imágenes optimizadas: Alta calidad pero tamaño de archivo pequeño; siempre con texto alternativo.
- Botones táctiles: Mínimo 44×44px para evitar clics erróneos.
- Texto conciso: Párrafos cortos, bullets y subtítulos para facilitar el escaneo.
- Diseño responsivo: El email se adapta automáticamente a cualquier pantalla.
- Prueba en diferentes clientes: Revisa siempre en iOS Mail, Gmail, Outlook.
- Espacio en blanco: No es espacio perdido — hace el email más limpio y legible.
- Tamaños recomendados: 14px para texto, 22px para encabezados.
- CTA claro y visible: Colócalo en zona prominente, preferiblemente centrado.
- Líneas de asunto cortas: Concisas y atractivas; prueba variantes con A/B testing.
- Opción de baja visible: Facilita el opt-out — es requisito legal y mejora la experiencia.
- Accesibilidad: Buen contraste, fuentes legibles y texto alternativo en imágenes.
Vista previa en navegador
Todos los templates nuevos incluyen por defecto un enlace de "Ver en navegador" en la parte superior. Esto permite que los destinatarios vean el email exactamente como fue diseñado, aunque su cliente de email no lo renderice correctamente.
Agregar el enlace en campañas o templates existentes
Abre la campaña o template
Ve a Marketing > Emails y abre el elemento a editar.
Agrega el elemento 'Preview URL'
En el panel de elementos, busca Preview URL y arrástralo al canvas.
Personaliza el texto y estilo
Edita el texto del enlace y aplica el formato que prefieras.
Cómo probarlo
Desde la vista previa del editor
Abre la vista previa del email y haz clic en el enlace para ver la versión en navegador.
Desde un email de prueba
Envía un email de prueba y haz clic en el enlace "Ver en navegador" que aparece en el correo.
Si tu agencia o sub-cuenta tiene configurado un dominio de API propio, se usará por defecto en la URL de vista previa para respetar las guías de marca blanca.
Preguntas frecuentes
¿Cómo puedo probar diferentes elementos para ver qué funciona mejor?
Usa la función de A/B testing para comparar líneas de asunto, contenido y CTAs, y descubrir qué resonó más con tu audiencia.
¿Qué template uso para un restaurante anunciando nuevos platos?
Busca las plantillas de tipo "Restaurant Generic" — ofrecen layouts pensados para mostrar productos.
¿Y para una firma legal o de contabilidad?
Hay plantillas específicas para servicios profesionales con diseños formales y limpios.
¿Qué pasa con los clientes de email que no muestran imágenes?
Siempre configura un color de fondo de respaldo y usa texto alternativo en todas tus imágenes. Así el mensaje llega aunque las imágenes no carguen.
¿El enlace de "Ver en navegador" funciona con marca blanca?
Sí. Si tienes configurado un dominio de API propio, la URL usará ese dominio automáticamente.
Siguientes pasos
- Configuración de email en Sixteam — Configura tu cuenta de email antes de enviar campañas
- Mejores prácticas de calentamiento (warmup) — Prepara tu dominio para envíos masivos
- Introducción a la entregabilidad — Entiende por qué llegan (o no) tus emails