¿Alguna vez has hecho el diseño de newsletters y se veían perfectas en tu pantalla, pero al enviarla se desconfiguró por completo? En el email marketing, la imagen importa, pero la estructura técnica que hay detrás importa aún más.
Bienvenido a la Sesión 2 de nuestro curso práctico de teenvio. En esta clase dejamos atrás la configuración técnica inicial para sumergirnos de lleno en el diseño. Aprenderás a utilizar nuestro editor de plantillas para crear piezas impactantes, profesionales y 100 % adaptadas a cualquier dispositivo (responsive) sin tener que tocar una sola línea de código.
1. La realidad del HTML en el Email Marketing
Antes de arrastrar el primer bloque de diseño, es fundamental entender las reglas del juego. Las páginas web modernas utilizan un lenguaje HTML muy avanzado. En cambio, el correo electrónico utiliza un HTML “antiguo” o primario. ¿Por qué ocurre esto? Por estricta seguridad. Para proteger a los usuarios, los gestores de correo (como Gmail u Outlook) bloquean elementos complejos.
- ❌ Lo que NO puedes usar: Formularios activos, efectos de movimiento avanzados (rollover), scripts de JavaScript o videos incrustados.
- Lo que SÍ puedes usar: Textos, tablas, colores de fondo e imágenes.
A pesar de estas limitaciones, el editor visual de teenvio está diseñado para exprimir al máximo estos cuatro elementos y lograr acabados espectaculares.
2. Tipos de piezas: ¿Por qué recomendamos usar Plantillas?
Cuando entras a la sección de Piezas en teenvio, la plataforma te ofrece cuatro métodos para volcar tu contenido:
- Plantillas (recomendado): Es el motor visual nativo de la herramienta. Sus bloques de arrastrar y soltar están optimizados para garantizar la máxima compatibilidad con todos los gestores de correo.
- Tu propio HTML: Si tienes un equipo de diseño externo o una agencia que te maquete la pieza, puedes importar el código. Ten en cuenta que este método no permite la edición visual posterior dentro de la plataforma.
- URL: El sistema lee una dirección web donde tengas alojado el diseño e importa todo su contenido (textos e imágenes) de forma estática para generar la pieza.
- URL dinámica: Ideal para portales de noticias o medios de comunicación. Teenvio no guarda el contenido al crear la pieza; va a buscar la información a esa URL justo en el milisegundo antes de realizar el envío, asegurando que los suscriptores reciban la información de última hora.
3. Trucos de maquetación: Trabajar de fuera hacia dentro
El editor de plantillas se divide en tres pestañas principales: Estructura (columnas y filas), Contenido (textos, imágenes, botones) y Previsualización.
A la hora de aplicar estilos, el error más común es diseñar “parcheando” elementos sueltos. El truco de los profesionales en teenvio consiste en aplicar la regla del pintor: si vas a pintar una casa, primero decides el color general de las paredes y luego decoras los detalles.
- Estilos globales: Utiliza el botón de estilos para definir la tipografía base (ej. Arial, 16px, color gris oscuro) y los márgenes de toda la newsletter. Así, cada bloque nuevo que arrastres adoptará ese diseño de forma automática.
- Fuentes seguras: Recuerda que el email no “envía” la tipografía; le da una instrucción al teléfono o al ordenador del usuario para que la dibuje. Por eso, usa siempre fuentes del sistema (Arial, Verdana, Tahoma) para evitar que el diseño se rompa si el destinatario no tiene instalada una tipografía de pago.
4. Dominando los bloques de contenido
Imágenes y el «Efecto Responsive»
Todas las imágenes en teenvio son adaptables por defecto. Al subir un logotipo o banner (en formato JPG o PNG), notarás que el editor te pide un tamaño mínimo de 480 píxeles.
¿Por qué el editor pide imágenes grandes? Porque al visualizar el correo en un dispositivo móvil, las columnas se reestructuran (se apilan una debajo de otra) y la imagen necesita crecer para ocupar el ancho de la pantalla del teléfono sin pixelarse.
El falso bloque de Vídeo
Como los gestores de correo no reproducen vídeo nativo, el bloque de vídeo de teenvio realiza un “truco”: pegas el enlace de YouTube o Vimeo, la plataforma genera automáticamente una captura de pantalla con el botón de Play superpuesto y le añade el hipervínculo para que, al pulsar, el usuario vaya a reproducirlo en su navegador.
Tablas y separadores HTML
Nunca utilices una imagen para mostrar una tabla de precios o una línea separadora. Si el usuario tiene el bloqueo de imágenes activado, no verá nada. Al usar los bloques nativos de Tablas y Separadores de teenvio, estos se dibujan mediante código HTML puro, garantizando una nitidez absoluta y visibilidad inmediata.
Botones (Call to Action)
Los botones nativos son la joya de la corona para tus llamadas a la acción. Al estar construidos en HTML (puedes redondear sus bordes, cambiar el color y el relleno), nunca se bloquean, asegurando que el botón de “Comprar” o “Registrarse” esté siempre visible.
5. Personalización avanzada y gestión de Ficheros
Correos individuales para envíos masivos
Teenvio no envía un solo correo a 5,000 personas; envía 5,000 correos individuales. Esto nos permite personalizar la pieza utilizando los “códigos cortos” que encontramos en la configuración avanzada.
Al incluir la etiqueta del campo correspondiente en tu texto (por ejemplo, [nombre]), el sistema sustituirá automáticamente ese código por el nombre real de cada contacto de tu base de datos cuando reciba el email.
Ejemplo: «Hola [nombre], tenemos un descuento para ti.»
Resultado: «Hola Alfonso, tenemos un descuento para ti.»
Enlazar documentos pesados (PDFs o Catálogos)
Nunca adjuntes un archivo PDF pesado a un envío masivo, ya que arruinará tu entregabilidad. La forma correcta es usar la sección de Ficheros de teenvio:
- Subes tu documento, PDF o archivo a la nube de la plataforma.
- Copias el hipervínculo único que te genera el sistema.
- Pegas ese enlace en el botón de “Descarga” de tu newsletter.
Consejo de experto: Alojar los archivos en los servidores de teenvio te asegura que no habrá límites de descarga ni caídas del enlace, algo que sí ocurre frecuentemente con las versiones gratuitas de Dropbox o Google Drive al recibir miles de clics simultáneos.
Próxima sesión…
¡Tu newsletter ya está lista y maquetada! En la Sesión 3: Emisión de campañas y analítica. Aprenderás el proceso correcto para realizar envíos de prueba reales (enviando a un ecosistema de prueba con Gmail, Outlook, etc.), cómo programar tu campaña final y, lo más divertido, cómo interpretar las estadísticas de apertura y clics para medir el éxito de tu estrategia. También puedes ver la Sesión 1: crear remitentes y gestión de base de datos en email marketing.
También puedes acceder al curso completo en youtube.