Cree una plantilla de correo electrónico HTML desde cero

Plantillas de correo electrónico HTML populares en Envato Elements

Si está buscando una solución profesional lista para usar, tome una de nuestras plantillas de correo electrónico HTML populares en Envato Elements. Tenemos cientos de opciones receptivas, todas incluidas con su membresía de Elements, con funciones fáciles de personalizar para que pueda comenzar.

Envato Elements es gratis por 7 días, sin compromiso. Si no le gusta, cancele en cualquier momento durante su prueba gratuita y no se le cobrará.

¿No es lo que estás buscando? ¡No hay problema, este tutorial te enseñará cómo construir el tuyo propio!

“Cuanto antes deje de luchar contra las peculiaridades del correo electrónico, antes podrá utilizarlas en su beneficio”. – Caity G. O’Connor

La plantilla de correo electrónico HTML que estamos creando

Aquí está el correo electrónico HTML que construiremos, siéntase libre de usar el bolígrafo y usarlo usted mismo. Tenga en cuenta que cuando estamos viendo esta plantilla a través de un navegador web, es mucho menos probable que tengamos problemas que con los clientes de correo electrónico.

1. Comience su documento de correo electrónico HTML

Para empezar, vale la pena mencionar de dónde saqué algunos de los recursos.

Ahora, como discutimos en el tutorial anterior, deberá comenzar su plantilla de correo electrónico HTML con un tipo de documento HTML y el idioma correcto para sus suscriptores. En este caso vamos a usar el tipo de documento HTML5, establezca nuestro idioma en inglés con <html lang="en">y también incluyen los espacios de nombres XML y Microsoft Office (el xmlns bits). Los necesitaremos unas líneas más abajo, como explicaré.

Hay bastantes cosas en el código anterior, pero es lo mínimo que necesita para asegurarse de que su correo electrónico final se vea hermoso en todas partes.

En primer lugar, tenemos algunos meta etiquetas para garantizar la codificación de texto correcta, la escala de la ventana gráfica en diferentes dispositivos móviles y una para evitar que Apple ajuste el tamaño de una manera extraña en sus aplicaciones de correo.

debajo de la <title></title> etiqueta verá un código entre <!--[if mso]> y <![endif]-->. Colocar código dentro de esas dos etiquetas significa que solo Microsoft Outlook en Windows lo aplicará (mso = ‘METROicrosa menudo Operspectiva’). Y ahí, tenemos una pequeña cantidad de XML que asegurará que las imágenes PNG se muestren en el tamaño correcto en Outlook en Windows. los xlmns ajustes que ponemos en el html La etiqueta garantiza que este código se interprete correctamente.

Debajo de eso, tenemos un style etiqueta con solo un par de reglas CSS. El primero establece la fuente para todos nuestros elementos principales, y esto es en beneficio del correo web de Gmail, que anulará nuestra configuración de fuente a menos que la incluyamos. Si termina cambiando sus fuentes más tarde, asegúrese de hacer el cambio aquí también.

Finalmente, estamos incluyendo table, td {border:2px solid #000000 !important;} que dibujará un borde en todo. Esto es puramente para que podamos ver lo que estamos haciendo a medida que construimos, y lo eliminaremos al final.

Con eso resuelto, podemos comenzar a construir el resto de la estructura.

2. Crear el cuerpo y la tabla principal

Primero, agregaremos una estructura general para nuestro correo electrónico, comenzando con un <body> etiqueta. Agregue el siguiente código directamente debajo del </head> etiqueta:

Puede ver que el margen y el relleno en la etiqueta del cuerpo están configurados en cero para evitar cualquier espacio inesperado.

También hemos agregado una tabla con un ancho del 100%. Esto actúa como una verdadera etiqueta de cuerpo para nuestro correo electrónico, porque a veces los clientes de correo electrónico eliminan la etiqueta de cuerpo. Aplique cualquier color de fondo de ‘cuerpo’ que desee a esta etiqueta de tabla.

Todas nuestras mesas estarán puestas a role="presentation". Esto los hace más accesibles, ya que les dice a los lectores de pantalla que lo traten como una tabla visual, no como una tabla de datos.

hemos establecido border-collapse a collapsey ambos border y border-spacing a cero para evitar cualquier espacio inesperado en la tabla.

Notarás que estamos usando <td align="center">y si ya está familiarizado con HTML, puede que se pregunte por qué, ya que align es en realidad una propiedad HTML en desuso. Lo usamos porque los clientes de correo electrónico varían mucho en su nivel de soporte de CSS y, a menudo, aún necesitamos usar HTML obsoleto para garantizar que todo se muestre correctamente en todas partes. En este caso es porque Outlook para Windows no obedece margin:0 auto; en CSS para centrar las cosas.

Finalmente, asegúrese de establecer siempre el relleno en las celdas de su tabla en cero en los estilos en línea, por ejemplo <td style="padding:0;">, de lo contrario, los clientes de correo electrónico agregarán su propia cantidad de relleno. Cuando agregamos relleno nosotros mismos, podemos ajustar este valor, pero si no hay relleno para aplicar a ninguno de los lados, debe establecerlo explícitamente en cero.

Nuestra primera sección de diseño de correo electrónico HTML

Una nota sobre el uso de la taquigrafía de relleno CSS

Al usar el relleno CSS en las celdas de la tabla, puede escribirlo de manera confiable de tres maneras. Especifique un valor, por ejemplo padding:20px que aplicará 20 píxeles de relleno a cada lado de su celda (arriba, derecha, abajo e izquierda), o especificará el relleno en pares, es decir padding: 10px 20px, que agregará 10 píxeles de relleno tanto en la parte superior como en la inferior, más 20 píxeles a la izquierda y a la derecha. Si ninguno de los dos es adecuado, debe declarar todos los lados, es decir padding: 10px 10px 0 5px. En todos los casos debe establecer cada valor, incluso si algunos de ellos son cero. Además, especificar solo tres valores puede tener resultados impredecibles en los clientes de correo electrónico.

El relleno funciona de manera confiable en las celdas de la tabla en todos los clientes de correo electrónico, pero si tiene problemas con el relleno, no es necesario recurrir a los GIF espaciadores. En caso de apuro, puede usar divs espaciadores o celdas espaciadoras. Simplemente incluya un carácter de espacio que no se rompa (&nbsp;) dentro, establezca una coincidencia height y line heighty asegúrese de incluir mso-line-height-rule:exactly lo que garantizará que Microsoft Outlook para Windows lo represente en el tamaño perfecto de píxel. (Si está creando un espacio horizontal, debe especificar un width en lugar de altura, y es posible que deba agregar también font-size:0;.) Aquí hay un ejemplo o una celda espaciadora dentro de una fila:

Y aquí hay un div espaciador:

Agregar la tabla principal

Ahora coloquemos una tabla de 602 píxeles de ancho dentro de la tabla contenedor.

600 píxeles es un ancho máximo seguro para que sus correos electrónicos se muestren cómodamente en la mayoría de los clientes de correo web y de escritorio en la mayoría de las resoluciones de pantalla, y estamos agregando 2 píxeles para que podamos tener un borde de 1 píxel alrededor, lo que agrega un píxel a cada lado .

Reemplazaremos nuestro pequeño ‘¡Hola!’ saludo con esta mesa.

¡Excelente! Ahora tenemos nuestra tabla exterior y nuestra tabla de contenido principal sentada adentro, lista para algunas filas de contenido.

La tabla de contenedores para nuestro diseño de correo electrónico HTML

3. Crear la estructura y el encabezado de la plantilla de correo electrónico HTML

En nuestro diseño de correo electrónico, podemos ver que el diseño está dividido en algunas secciones lógicas, por lo que crearemos una fila para cada una.

Dupliquemos la única fila en la última tabla que agregamos para tener tres en total, copiando todo entre (e incluyendo) el <tr> y </tr> y pegándolo dos veces por debajo.

He cambiado el ‘¡Hola!’ text para leer Fila 1, Fila 2 y Fila 3, por lo que ahora debería verse así:

Filas adicionales en nuestro diseño de correo electrónico HTML

Ahora los colorearemos de acuerdo con el diseño agregando un background propiedad CSS a la style etiqueta. Recuerde siempre usar los seis caracteres completos de un código hexadecimal como #ffffffcomo taquigrafía de tres caracteres como #fff no siempre funcionará en todos los clientes de correo electrónico.

filas de colores

Bien, a continuación, en nuestro diseño de correo electrónico, nos centraremos en la Fila 1. En la celda, cambiemos el relleno de 0 a 40px 0 30px 0. Luego dentro de la celda insertaremos nuestra imagen:

Siempre especifique el ancho de sus imágenes usando el atributo de ancho HTML en lugar de CSS, por ejemplo width="300" como se ve arriba, en lugar de style="width:300px;". Si no lo hace, Microsoft Outlook para Windows mostrará su imagen en su tamaño físico.

También hemos configurado la imagen. height a auto para evitar cualquier aplastamiento, y display a blockque evita que aparezcan huecos debajo en algunos clientes de correo electrónico.

Finalmente, si su imagen contiene información importante que no se menciona en el texto de su correo electrónico, asegúrese de agregar una descripción al alt etiqueta para que los lectores de pantalla la anuncien a quienes las usen.

Nota: Las imágenes no siempre se cargan y el texto alternativo no siempre se muestra visualmente como respaldo, por lo que cualquier información crucial siempre debe incluirse como texto en vivo en su correo electrónico en lugar de incrustarse en una imagen.

¡Y ese es nuestro encabezado HTML hecho!

El encabezado del correo electrónico html junto con imagen

4. Crear el área de contenido

Pasando del encabezado, concentrémonos ahora en el área de contenido de nuestro correo electrónico HTML. En primer lugar, agregaremos algo de relleno a la celda de la Fila 2 para que la tabla interior tenga algo de espacio alrededor, según nuestro diseño, para que ahora se vea así:

Añadido relleno a la celda del medio.

Ahora reemplazaremos el texto de la ‘Fila 2’ con otra tabla para anidar nuestro contenido principal dentro. Cuando creamos correo electrónico HTML usando tablas, necesitamos anidarlas porque colspan y rowspan no son ampliamente compatibles con los clientes de correo electrónico.

Hemos establecido el ancho de esta tabla al 100%. Es una buena práctica usar anchos porcentuales en lugar de usar un valor de píxel siempre que sea posible porque esto lo ayudará más adelante si desea que su correo electrónico responda, o incluso si simplemente necesita ajustar el ancho de su correo electrónico más adelante. Los anchos porcentuales se adaptarán automáticamente a un nuevo tamaño de contenedor, mientras que los anchos de píxeles deberán actualizarse individualmente.

Dos filas anidadas para nuestro contenido principal

Ahora agregaremos nuestro contenido a la fila superior, que es un encabezado, un párrafo de texto y un párrafo final con un enlace dentro. En esta etapa, no estamos agregando ningún estilo a estos elementos.

Se agregó contenido y relleno a la fila superior.

Reemplace el texto de la ‘Fila 1’ con lo siguiente:

A continuación, agregaremos nuestras dos columnas de contenido a la Fila 2. Como queremos un espacio entre estas dos celdas, crearemos una tabla de tres columnas con una celda vacía entre las dos columnas exteriores. Hay algunas formas de crear este diseño, pero esta es la más confiable para nuestros propósitos.

Por mucho que me guste ceñirme a los porcentajes, cuando tienes contenido de un tamaño específico, puede ser complicado convertirlo a un porcentaje (en este ejemplo, las columnas serían 48,1 %, lo que podría volverse confuso). Por esta razón, dado que nuestras dos imágenes tienen un ancho de 260 px, crearemos columnas que también tengan un ancho de 260 px, con una celda de margen de 20 px en el medio. (Esto totalizará 540 px, que es el ancho de 600 px de nuestra tabla menos el relleno de 30 px en cada lado). Asegúrese de poner a cero su font-size y line-height y agregue un carácter de espacio que no se rompa &nbsp; en la celda del medio.

También estableceremos el vertical-align a top para ambas celdas para que se alineen verticalmente en la parte superior, incluso si una columna tiene más texto que la otra. La alineación vertical predeterminada es middle.

Reemplace ‘Fila 2’ con esta tabla:

Dos columnas a la fila de contenido dos

Ahora agreguemos nuestras imágenes y contenido a esas columnas. Los márgenes están muy bien soportados en <p> etiquetas en todos los clientes de correo electrónico, por lo que envolveremos nuestro texto e imágenes en <p> etiquetas y ajuste el espacio entre ellas usando margin más tarde cuando agreguemos todo nuestro estilo de texto.

Agreguemos contenido a las Columnas 1 y 2 para que toda la tabla ahora se vea así:

Aquí hemos establecido el ancho de las imágenes usando el HTML width atributo nuevamente, tal como lo hicimos cuando insertamos la imagen del encabezado.

Imágenes en las columnas

5. Aplicar estilo al pie de página de la plantilla de correo electrónico

Ahora agregaremos nuestro relleno a la fila del pie de página.

Relleno a la fila de pie de página

Dentro de esa celda, reemplazaremos el texto ‘Fila 3’ con otra tabla para obtener dos columnas, cada una con un 50% de ancho, con la izquierda establecida en align="left" y derecho a align="right" para que el contenido de cada uno se fije a esos lados y nos brinde un diseño de correo electrónico equilibrado.

Dos columnas para el pie de página.

Reemplace ‘Columna izquierda’ con un párrafo de texto:

Crearemos otra pequeña tabla para nuestros íconos de redes sociales, ya que es la mejor manera de obtener el espaciado más preciso que se muestra correctamente en todas partes. Reemplace el texto de la ‘Columna derecha’ con la siguiente tabla.

Notará que no estamos especificando un ancho de tabla, y esto es para que el ancho de la tabla sea determinado por las celdas dentro. Cada uno tiene 38 px de ancho (el ancho de nuestros íconos) más 10 px de relleno a la izquierda.

Tabla para iconos de redes sociales

Y ahí lo tenemos; ¡Nuestro diseño de plantilla de correo electrónico HTML está completo!

6. Dale estilo al texto

Diseñar el texto dentro de nuestra plantilla de correo electrónico HTML es un paso realmente importante. Primero, veamos la fila superior de contenido con nuestro h1 y texto introductorio.

Nota importante al usar etiquetas de párrafo y encabezado

Cuando utilice etiquetas de párrafo y encabezado (p, h1, h2, etc.) debe especificar su parte superior y abajo configuración de margen, de lo contrario, cada cliente de correo electrónico aplicará sus propios márgenes predeterminados muy diferentes a estos elementos. También debe asegurarse de que sus márgenes superior e inferior estén configurados en cero si no desea ninguno, en cuyo caso configuraría su encabezado en margin:0;. Si solo desea un margen inferior, aún debe establecer el margen superior en cero, por ejemplo margin:0 0 10px 0;.

Con eso en mente, estableceremos nuestros márgenes deseados en todas nuestras etiquetas, y también queremos establecer el color del texto para que sea #153643, que podemos aplicar a la celda, ya que todo lo que hay dentro heredará ese color. Después de estos cambios, toda la celda se ve así:

Notarás arriba que también hemos establecido el font-family en cada individuo h1 y p y es posible que se pregunte por qué no podemos simplemente establecer esto en la etiqueta del cuerpo o de la tabla. Esto se debe a que algunos clientes de correo web anularán su fuente si no los configura en línea en cada párrafo o elemento de encabezado. Hay otras consideraciones y enfoques para este problema, pero por simplicidad y para garantizar que nuestro correo electrónico se muestre perfectamente en todas partes en esta etapa, lo configuraremos en línea en cada elemento.

Ahora, moviéndose hacia abajo a nuestra área de dos columnas, agregue el color a cada una de las celdas de 260 px de ancho para que ambas se vean así:

Como arriba, agregaremos algunos estilos de texto y márgenes a nuestros párrafos y enlaces, y estableceremos un tamaño de fuente base para toda la tabla. En conjunto, la tabla ahora se ve así:

Finalmente, diseñaremos el pie de página. En primer lugar, agregaremos un estilo de fuente a la tabla de pie de página principal, dentro de nuestra celda de pie de página roja con el relleno de 30 px, para que ahora lea:

En la columna izquierda de esta tabla, podemos actualizar nuestro párrafo y enlace para incluir estilo y color:

Y en nuestros íconos de redes sociales, diseñaremos cada enlace para que sea blanco, de modo que si las imágenes no se cargan, cualquier texto alternativo será visible en el fondo rojo. Ajusta cada enlace para que se vea así:

y

Casi ahí

¡Y ahí lo tenemos! Todo está adentro.

7. Ejecutar algunas pruebas

En este punto, es una buena idea ejecutar su código HTML a través de un servicio de prueba de correo electrónico como Tornasolo Correo electrónico en ácido. Dejar los bordes en todas las tablas y celdas puede ser útil para ver qué sucede en cada cliente de correo electrónico. (Dependiendo de cómo esté probando su correo electrónico, es posible que primero deba alojar sus imágenes de forma remota e insertar las URL remotas completas para cada imagen en su código. Consulte el sitio web de su servicio de prueba para aprender cómo probar su HTML).

Estos son algunos de los resultados de mis pruebas de Email on Acid:

Ahora es el momento de desactivar los bordes y ver el diseño del correo electrónico hermoso. En el style etiqueta en el headelimine la línea que dice:

Bordes desactivados

¡Y eso es!

¡Ha creado un correo electrónico HTML simple!

Antes de terminar, si ha utilizado comentarios en su CSS en el encabezado de su archivo por algún motivo, deshágase de ellos. Algunos clientes de correo electrónico pueden atragantarse con los comentarios de CSS, por lo que es mejor no incluirlos.

Ahora es un buen momento para hacer una prueba final con Tornasolo Correo electrónico en ácido¡y su correo electrónico HTML estará listo para enviarse!

Descargar plantillas de correo electrónico

Si necesita más opciones, entonces uno de nuestros plantillas de correo electrónico receptivas puede ser justo lo que necesita. Suscríbete a Envato Elements y tendrás acceso ilimitado a cientos de plantillas de correo electrónico personalizables, así como fotografías de archivo, íconos, gráficos y muchos otros activos creativos para tus proyectos.

Más información sobre el correo electrónico HTML

¡Para llevar lo que has aprendido al siguiente nivel! Consulte nuestra guía de aprendizaje Dominar el correo electrónico HTML para obtener más tutoriales sobre plantillas de correo electrónico HTML, diseño de correo electrónico, codificación de correo electrónico receptivo, accesibilidad, marketing, correo electrónico transaccional, proveedores de servicios de correo electrónico (ESP), consejos de flujo de trabajo de desarrollo y más.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *