Cómo crear y enviar correos electrónicos HTML a través de Gmail usando Stripo

Sending elegant HTML emails through Gmail has never been easier! No add-ons, no extensions required. Because Stripo allows creating and pushing HTML emails to your favorite email client with just one click.

En este artículo, voy a:

• crear una plantilla de correo electrónico HTML;
• exportarla a mi cuenta de Gmail;
• destacaré algunas características técnicas de Gmail;
• y, por último, estudiaré cómo Stripo ayuda a lidiar con ellas; en otras palabras, qué hace que nuestras plantillas sean compatibles con Gmail.

1.Crear un correo electrónico

Antes de exportar las plantillas de correo electrónico a tu cuenta de Gmail, tienes que crear una.

Hay tres maneras de hacerlo:

Forma 1. Utilizando nuestras plantillas de correo electrónico HTML preconstruidas

Stripo ofrece más de 1000 plantillas listas para usar. Están clasificadas por tipos, como confirmación, carrito abandonado, promoción, bienvenida, etc., por características, como HTML tradicional, interactivo (escrito en HTML5), y correos electrónicos AMP (escritos en AMP HTML) - como sabemos, AMP para el correo electrónico es totalmente compatible con Gmail, y por temporadas y vacaciones. Elige el que más te guste. Definitivamente, tendrás que personalizarla para que tu plantilla de correo electrónico HTML de Gmail se adapte al estilo de tu marca. No te llevará mucho tiempo.

Forma 2. Crear una plantilla de correo electrónico HTML desde cero

Accede a tu cuenta de Stripo, ve a la pestaña de Plantillas y elige las "Plantillas básicas". Allí encontrarás 8 maquetas de correo electrónico, también conocidas como prototipos. La "Plantilla de formación" contiene una explicación de cómo utilizar nuestros bloques de arrastrar y soltar.

También puedes elegir la "Plantilla vacía" en esta sección para simplemente arrastrar los bloques básicos a tu plantilla de correo electrónico HTML de Gmail.

Forma 3. Importar tu código HTML personalizado

Ve a tu cuenta personal, a la pestaña "plantillas" -> "plantillas básicas", y elige la plantilla "Mi HTML".

Ábrela y pega tu código HTML personalizado.

La primera opción y la segunda son las más fáciles, en mi opinión. Vamos a examinarlas.

Entonces, ¿cómo modificar nuestras plantillas de correo electrónico listas para usar?

Hemos publicado un post en el blog "Stripo A to Z". Allí mostramos en detalle cómo trabajar en los correos electrónicos con Stripo. Aun así, me gustaría añadir unas líneas aquí.

Paso 1. Cómo establecer una línea de asunto y un preencabezado con Stripo y cómo será tu correo electrónico

Es un hecho bien conocido que el 69% de los destinatarios juzgan si van a abrir el correo electrónico por el nombre del remitente, la línea de asunto y el preencabezado.

Por ello, le recomendamos encarecidamente que no omita nunca esta opción:

Es importante tenerlo en cuenta:

Muy a menudo, los preencabezados sirven como continuación de la línea de asunto. Algunas marcas lo utilizan incluso para contar historias.

Sin embargo, si sólo pone la línea de asunto y no el preencabezado, cualquier cliente de correo electrónico mostrará una parte del texto escrito en el primer párrafo de su correo electrónico. Puede parecer algo incómodo, ya que normalmente dice algo así como: "¿No ves las imágenes? Aquí tienes el enlace a la versión web del correo". Puede evitarlo.

Si crees que la línea de asunto por sí sola es suficiente y no quieres mostrar ningún preencabezado, simplemente añade un espacio en blanco en lugar de este último.

Si activas esta opción, tu correo electrónico se parecerá al de WWF, el Fondo Mundial para la Naturaleza:

(Fuente: Gmail)

También puedes añadir espacios en blanco si tu preencabezado es lo suficientemente corto

Paso 2. Cómo añadir el enlace de la versión web a tus correos electrónicos

A veces las imágenes, los GIFs en nuestros correos electrónicos no funcionan. O si su correo electrónico es lo suficientemente atractivo, los usuarios pueden querer compartirlo con sus amigos.

Por lo tanto, tenemos que añadir el enlace "Ver en el navegador", también conocido como "Versión web".

(Fuente: Correo Electrónico de Stripo)

Normalmente, se encuentra en la cabecera del correo electrónico o en el pie de página. No hay reglas estrictas.

Para obtener un enlace a la versión web de su correo electrónico con Stripo, usted necesita::

• entrar en el "modo de vista previa";
• en una nueva ventana, hacer clic en "Copiar" para guardar el enlace en tu portapapeles;

• pegar este enlace en el campo correspondiente de tu correo electrónico.

Paso 3. Cómo agregar un encabezado y un logotipo con Stripo y cómo se verá tu correo electrónico

Se ha dicho muchas veces que el encabezado del correo electrónico es la cara de tu correo y también de tu marca. Asegúrate de añadir el logo de tu empresa y su nombre.

Cómo construir el encabezado del correo electrónico con el logotipo y el menú en Stirpo:

• arrastra una estructura de dos columnas en tu plantilla de correo electrónico HTML para Gmail;
• tira el bloque "Imagen" en la izquierda. Sube tu logo;
• arrastra el bloque "Menú" en tu plantilla. Nombra cada elemento del menú. Añade tus enlaces;
• ahora para establecer el tamaño/ancho de cada columna, activa los ajustes para toda la estructura haciendo clic en la etiqueta "Estructura" en el área de la plantilla;
• en el panel de configuración, establece las columnas, también conocidas como contenedores, el ancho y la sangría entre ellas.

También puedes añadir iconos de redes sociales e información de contacto en la cabecera del correo electrónico.

Para obtener información más detallada sobre cómo trabajar en los menús de correo electrónico, consulte la entrada del blog "Añadir menú con Stripo".

Paso 4. Cómo añadir un banner con Stripo y cómo será tu email

Este es nuestro elemento favorito de las plantillas. Los banners marcan el estado de ánimo de todo un correo electrónico. Por lo tanto, tienes que trabajar a fondo en él. Encuentra e inserta la mejor imagen que te guste. Me enorgullece decir que, actualmente, somos el único editor que le permite aplicar filtros especiales a las imágenes de los banners sin necesidad de editores de fotos ni herramientas de terceros. A continuación, puede colocar texto sobre esta imagen y envolverlo con fuentes de banner/decorativas - ofrecemos más de 40.

Además, con nosotros, puede aplicar una imagen adicional sobre un banner. Esto le permite crear banners de varias capas sin necesidad de un editor de fotos.

Para obtener más información sobre cómo construir banners, por favor, consulte nuestra entrada del blog "Cómo construir banners con Stripo en menos de 10 minutos", o vea un breve vídeo.

Paso 5. Cómo añadir estructuras, también conocidas como filas, con Stripo y cómo será tu correo electrónico

¿Una imagen y un texto, dos fotos y dos bloques de texto en una fila? Tú decides. Esta es una característica común. Sin embargo, muchos editores te permiten elegir entre una o dos columnas en una fila. Con nosotros, puedes elegir hasta cuatro con un solo clic. A continuación, mostraremos cómo colocar hasta 8 contenedores en una fila.

Arrastre el necesario en su plantilla de correo electrónico HTML para Gmail.

Luego agregue el contenido necesario en cada columna/contenedor.

Vea el ejemplo de una estructura de dos columnas en el correo electrónico:

Una estructura de tres columnas en el correo electrónico:

Como puede ver, puede añadir un botón bajo la descripción a cada columna.

Una estructura de cuatro columnas:

Si 4 columnas por fila no son suficientes para usted, puede añadir 4 columnas más. Eso haría 8 columnas en total.

Para agregar columnas adicionales a tu correo electrónico HTML de Gmail, debes:

• poner el puntero del ratón sobre una estructura completa en la plantilla de correo electrónico HTML de Gmail - si se hace bien, verás la etiqueta "Estructura";

• en el panel de configuración, hacer clic en "+";

• añadir 1-4 contenedores más;
• a continuación, puede establecer el ancho de sus columnas.
• Establece un ancho individual para cada contenedor, o iguala todos ellos.

Aplica imágenes o colores de fondo a cada columna por separado, o una sola para toda una estructura/fila.

Paso 6. Cómo añadir los iconos de las redes sociales con Stripo y cómo se verá su correo electrónico

Ubícalos donde quieras. 

Ofrecemos 70 iconos de medios sociales, no sólo los más populares para Facebook, Twitter e Instagram. Hemos hecho todo lo posible por reunirlos todos para tu comodidad.

Puedes seleccionar la combinación de colores y establecer su tamaño.

Es muy sencillo: arrastra y suelta el bloque "Social" en la estructura necesaria, diseña tus iconos y pega tus URLs en los campos "Enlace".

¿Qué tienen de bueno nuestros iconos de redes sociales?

Puedes configurarlos una sola vez y utilizarlos en todas las campañas sin necesidad de añadir enlaces ni trabajar en su diseño.

Para ello, tienes que rellenar la información de tus redes sociales en tu perfil con Stripo. Cuando construyas tu próxima campaña - sólo tienes que arrastrar el bloque básico "Social" en tu correo electrónico HTML de Gmail y Stripo insertará los iconos que ya has elegido, con sus respectivos enlaces, y el diseño que hayas establecido.

Para más información sobre cómo añadir y diseñar los iconos de las redes sociales en tus plantillas de correo electrónico HTML, por favor, consulta nuestra publicación en el blog.

Paso 7. Cómo utilizar nuestra biblioteca de Módulos de Contenido para que le ayude a crear correos electrónicos HTML en Gmail más rápidamente

Definitivamente, usted valora mucho su tiempo y no tiene ganas de crear plantillas similares todos los días. Lo mismo ocurre aquí. Por esta razón, decidimos inventar la Biblioteca de Módulos de Contenido. Es muy fácil utilizar nuestra Biblioteca: Una vez que haya creado una plantilla, guarde el módulo/elemento de correo electrónico que necesita en la biblioteca, déle un nombre. Y la próxima vez que inicie una nueva campaña, sólo tendrá que arrastrarlo y soltarlo en una nueva plantilla.

Guarde cualquier elemento de correo electrónico que necesite: Desde pequeños contenedores hasta filas/estructuras enteras.

En la pestaña "Mis módulos", verás los módulos que has guardado previamente. En los "Módulos de la plantilla", podrá obtener los módulos que han sido extraídos de la propia plantilla por el sistema. Y la sección "Pre-construidos" contiene los módulos que fueron construidos por nuestros codificadores y diseñadores.

Estos módulos reutilizables ahorran tiempo. Nuestro cliente Felipe Guerra de iLogica comparte su experiencia con nuestros lectores para que todos los que han estado dudando si darle una oportunidad a esta opción, comiencen a usarla de inmediato y ahorren horas en la producción de emails

Paso 8. Cómo crear anotaciones de promoción de Gmail con Stripo y cómo se verá tu correo electrónico en los dispositivos móviles

Gmail divide los correos electrónicos entrantes en pestañas: la principal para los correos personales, los correos de promoción, las actualizaciones, etc. Los usuarios establecen el número de estas pestañas por su cuenta.

Si envías correos electrónicos masivos a través de Gmail, lo más probable es que tus correos lleguen a la pestaña de promociones

Las anotaciones de promoción ayudarán a que tus correos electrónicos destaquen entre la cantidad de correos electrónicos entrantes en las bandejas de entrada de los usuarios.

Esta función está pensada únicamente para dispositivos móviles.

Para obtener más información sobre cómo crear anotaciones, consulte nuestra publicación del blog.

Paso 9. Cómo añadir elementos AMP a tus correos electrónicos y cómo se verá tu correo electrónico en Gmail

En marzo de 2019, Google desplegó su AMP para correos electrónicos. Y Stripo es el primer constructor de plantillas de correo electrónico de arrastrar y soltar que permite crear correos electrónicos AMP sin ninguna habilidad de codificación.

Stirpo ofrece tres bloques AMP de arrastrar y soltar:

• Acordeón - para presentar tu contenido en secciones. Funciona mejor para correos electrónicos largos;;
• carrusel de imágenes - para colocar de 3 a 16 banners en una pantalla. Los destinatarios sólo tendrán que hacer clic en la "flecha" para ver todas las imágenes del carrusel;
• formulario - los formularios interactivos permiten a los usuarios dejar un comentario y compartir su opinión sobre sus servicios directamente en los correos electrónicos. La prueba AB muestra que los formularios interactivos son 5,2X tiempo más comentarios en comparación con los formularios externos regulares.

También puedes construir componentes AMP con Google playground, e incrustarlos en tus plantillas de correo electrónico HTML de Gmail para nuestro editor de código abierto.

Para obtener más información sobre cómo construir correos electrónicos AMP con Stripo, por favor consulte nuestra entrada de blog dedicada.

Recuerda que también puedes añadir las siguientes características en tus correos electrónicos HTML de Gmail:

• efecto de rollover de imagen - funciona en los equipos de escritorio;
• temporizadores de cuenta atrás - funciona tanto en ordenadores de sobremesa como en móviles;
• enlaces de anclaje a las pestañas del menú - funciona tanto en los ordenadores de sobremesa como en los móviles;
• Botones animados con CSS - funcionan en ordenadores de sobremesa.

Todos los elementos mencionados anteriormente se muestran perfectamente bien en Gmail, pero se pueden crear fácilmente con Stripo sin apenas conocimientos de codificación HTML.

Paso 10. Cómo previsualizar los correos electrónicos HTML antes de exportarlos a Gmail

Sólo tienes que hacer clic en el botón de vista previa justo encima de tu correo electrónico.

Aquí verás las versiones de escritorio y móvil de tu correo electrónico.

Ambas versiones tienen sus subversiones: AMP y HTML. Asegúrate de comprobarlas todas.

Si tu correo electrónico AMP tiene algún error, nuestro editor lo mostrará.

Haz clic en el icono de error para ver qué errores tienes y pequeños consejos para solucionarlos.

Es importante tener en cuenta:

La aplicación de Gmail no es compatible con las consultas de medios, tanto en Android como en iOS.

No, esto no significa que tus destinatarios verán un desplazamiento horizontal. Simplemente verán una versión de escritorio de tu correo electrónico en lugar de la versión móvil.

(La aplicación de Gmail. El correo electrónico enviado a través de Gmail)

Esto sólo ocurre cuando envías tu correo electrónico a los borradores de Gmail.

Si envías correos electrónicos masivos a través de tu ESP, el correo electrónico será totalmente responsivo, todos los contenedores se extenderán al ancho de la pantalla - un contenedor por fila.

(La aplicación de Gmail. Correo electrónico enviado a través de ESP)

2. Exportación de correos electrónicos HTML a Gmail

Para entregar su plantilla de correo electrónico HTML a Gmail, debe:

• hacer clic en el botón de exportación;

• en una ventana emergente, elegir Gmail. Asegúrate de que la opción de ventana emergente esté activa en tu navegador;

• en una nueva ventana emergente, se le pedirá que inicie sesión con Google. Introduce tu nombre de usuario y contraseña;
• dale a Stripo acceso a tus borradores haciendo clic en el botón "Permitir";

• encuentra tu plantilla de correo electrónico HTML en la carpeta de borradores.

Esto se hace sólo una vez. La próxima vez que exportes correos electrónicos HTML a Gmail, sólo tendrás que elegir Gmail en la lista de Exportación, y el correo electrónico se exportará a este cliente de correo electrónico de inmediato.

Es importante tener en cuenta:

En primer lugar, cada año, desde que hemos implementado la exportación directa a Gmail, pasamos la prueba de seguridad de Bishop Fox para garantizar que tus datos están seguros con nosotros.

En segundo lugar, al permitir el acceso de Stripo a tu cuenta de Gmail, nos das acceso únicamente a la carpeta de Borradores. No tendremos acceso a ninguna otra carpeta, ni a tu base de contactos.

Ahora que su correo electrónico ha sido entregado a su cuenta de Gmail, a la carpeta Borradores, está listo para ser enviado.

Establece la línea de asunto, introduce los destinatarios. Ya está hecho.

En la entrada del blog "Cómo enviar correos electrónicos masivos con Gmail", mostramos cómo enviar correos electrónicos masivos a 2 000 destinatarios a la vez.

¡Prueba Stripo!

!Por cierto, ¡todavía puedes editar las plantillas de correo electrónico antes de enviarlas!  

3 y 4. Restricciones técnicas de Gmail y cómo lidiar con algunas usando Stripo

He leído una serie de datos e hipótesis sobre Gmail y he decidido probarlos todos. Aquí están:

Hipótesis 1. Gmail sugiere a los destinatarios que descarguen imágenes sin enlaces

La web dice que si alguna imagen en un correo electrónico con formato HTML no contiene ningún enlace, entonces Gmail sugerirá a sus usuarios que lo descarguen.

Lo he comprobado: esto es muy cierto. Es posible que no quieras este botón de "descarga" porque perjudica todo el diseño, y el correo electrónico no tiene un aspecto profesional de esa manera

Solutción:

Cuando añadas imágenes para insertar en un correo electrónico, puedes añadir un enlace. Pero incluso si te olvidas, nuestro sistema tiene un "enlace" establecido por defecto:

Definitivamente, no llevará a sus clientes a ninguna parte, pero no habrá el irritante botón de "descarga" sobre las imágenes en los correos electrónicos.

Conclusión: es cierto.

Hipótesis 2. Las imágenes sin Alt-text pueden ir a la carpeta de Spam

Apuesto a que usted también ha oído que los correos electrónicos con imágenes van a la carpeta de spam cuando no hay texto alternativo (etiqueta alt) para cada imagen utilizada.

He enviado deliberadamente muchos correos electrónicos con el texto alt eliminado, y han llegado al botón de la bandeja de entrada sin ningún problema. Sin embargo, esta vez sólo he probado con Gmail. Así que no podemos prometer que sus correos electrónicos sin texto alternativo pasen los filtros de spam de Outlook o Apple Mail. En consecuencia, si vas a enviar correos electrónicos no sólo a los usuarios de Gmail, necesitarás el texto alternativo para pasar los filtros de spam.

Es importante tenerlo en cuenta:

Por muy fácil que sea pasar los filtros de SPAM, te recomendamos encarecidamente que añadas textos alternativos a las imágenes. En primer lugar, por razones de accesibilidad al correo electrónico. En segundo lugar, si los clientes de correo electrónico los bloquean, los destinatarios seguirán teniendo una idea de lo que trata el mensaje. Intenta que los textos alternativos sean lo más claros posible.

Conclusión: los correos electrónicos sin texto alternativo sí se entregan a Incoming. Pero eso podría ser sólo suerte :) Además, necesitamos añadir texto Alt a las imágenes para otros clientes de correo electrónico y para la accesibilidad

Hipótesis 3. Gmail recorta los mensajes

Esto es cierto.

Gmail recorta los mensajes de correo electrónico que son más grandes que:

• 102 kB, correo electrónico HTML tradicional;
• 200 kB, correo electrónico HTML AMP

Al final de la parte visible de un correo electrónico, ofrece "ver el mensaje completo.

Solución:

Actualmente, no hay ninguna posibilidad técnica de ganarle a esto. Sin embargo, usted puede pesar sus correos electrónicos con nosotros:

• simplemente hacer clic en el botón "exportar";
• elegir "HTML";
• descargar el HTML;

• y luego con el clic derecho sólo comprobar las propiedades del archivo.

Las propiedades del archivo dicen que esta plantilla de correo electrónico HTML de Gmail tiene 65 kB. He verificado esta información con algunas aplicaciones, incluyendo mail-tester.com. Todas han confirmado el peso del archivo.

Conclusión: es cierto. Sabemos cómo pesar nuestros correos electrónicos.

Hipótesis 4. El botón de deshacer no funciona para los correos masivos

Totalmente falso en caso de que uses Gmail sin ningún complemento como Gmail Mail Merge. Sólo tienes que ir a tu configuración.

Intenté aplicar este truco a mis correos masivos y funcionó.

Solutción:

En el panel de configuración, busca la opción "Deshacer envío" y establece el tiempo que te convenga. Varía entre 5 y 30 segundos.

He intentado aplicar este truco a mis correos masivos y ha funcionado.

Conclusión: falso.

Hipótesis 5. Los bloques de texto con más de 8.500 caracteres se eliminan

Como copywriter o simplemente como mujer, me encantan las frases largas, las explicaciones detalladas. Y decidí insertar uno de los artículos en el bloque de texto. Ese artículo contenía unos 10.000 caracteres sin contar los espacios. Y envié ese correo electrónico a mi amigo. Mi correo electrónico fue entregado, ninguno de los bloques fue recortado o eliminado.

Así que podemos decir que esta hipótesis no se confirmó. Lo cual es estupendo, por cierto. Pero sinceramente dudo que ninguno de nosotros envíe ese largo correo electrónico a nuestros clientes.

Conclusión: falso.

Hipótesis 6. Los números de teléfono y las direcciones de correo electrónico son clicables en los correos electrónicos HTML de Gmail

He oído que Gmail inserta enlaces a nuestras direcciones de correo electrónico y números de teléfono en los correos electrónicos, es decir, los hace clicables. He probado toneladas de números de teléfono móvil. ¿Sabéis qué? Ninguno de los números era cliqueable. Todavía tengo que resaltarlo y copiarlo para usarlo.

¡Todavía! La situación con las direcciones de correo electrónico era bastante divertida. Estaban en gris pero se podía hacer clic en ellas o en azul, subrayadas pero no se podía hacer clic en ellas.

Conclusión: falso. Tenemos que ocuparnos de ello manualmente :)

Solución:

Añade enlaces "Mailto" a cada dirección de correo electrónico que compartas en tu correo.

Para obtener más información sobre cómo establecer enlaces "Mailto" en los correos electrónicos, consulte la entrada del blog que se indica a continuación.

Hipótesis 7. Los fondos no se muestran en el escritorio de Gmail si el ancho del correo electrónico supera los 640 píxeles

Muchos vendedores de correo electrónico afirman que Gmail no muestra el color de fondo de un correo electrónico, ni la imagen de fondo si el ancho del correo electrónico supera los 640 píxeles.

Y, por supuesto, lo hemos probado.

a imagen/color de fondo -hemos probado ambos- se mostraron en Gmail en todos los dispositivos y en todos los navegadores web.

(Ancho de la parte de contenido - 670 píxeles, SO - macOS)

Conclusión: falso.

Hipótesis 8. Gmail sustituye las fuentes personalizadas por las predeterminadas

Las fuentes personalizadas hacen que el diseño de tu correo electrónico sea aún más único. Sin embargo, es cierto: Gmail tiende a sustituir algunas fuentes personalizadas por la predeterminada: Arial.

He probado 4 tipos de letra diferentes.

He aquí cómo han funcionado:

1. Great Vibes — funcionó bien en el móvil y en el escritorio;
2. Dokdo — fue sustituida por Arial;
3. Alexa Std — fue sustituida por Arial;
4. Montserrat — fue sustituida por Arial.

Conclusión: parcialmente cierto. Pero tienes que probar para encontrar qué fuentes de las que realmente te gustan no son reemplazadas por las fuentes por defecto.

Recuerda que puedes subir fuentes personalizadas con Stripo.

Reflexiones finales

Ahora que sabes cómo crear un correo electrónico HTML en Gmail, cómo enviar correos electrónicos masivos a través de Gmail de forma gratuita, esperamos que envíes sólo elegantes correos electrónicos HTML incluso para la correspondencia personal.