Cómo crear y enviar un correo electrónico HTML personalizado

Un correo electrónico HTML interactivo es una herramienta poderosa. Las empresas pueden usarlos para ofertas promocionales, los autónomos pueden usarlos para presentar sus servicios a clientes potenciales y nietos pueden hacer sonreír a sus abuelos con una linda costumbre diseño. Las únicas dos tecnologías que necesitará para crear un correo electrónico personalizado desde cero son HTML y CSS en línea. Todo lo que necesita hacer es tener un diseño en mente, analizarlo en forma de filas y columnas de tablas, y estará listo para comenzar a construir. En este artículo, aprenderá un método paso a paso para crear y enviar un correo electrónico HTML personalizado.

Cree la plantilla de correo electrónico utilizando HTML

La plantilla de correo electrónico se basa en técnicas HTML tradicionales. Trabajará con tablas y apilará filas de tablas y datos de la tabla todo el tiempo. La plantilla de correo electrónico HTML básica se ve así:

...
...
...
...
...
...
...




...

Producción:

Sería mejor preparar un diseño para que pueda trazar dónde y cómo va a dividir el diseño. Además, estará preparado mentalmente para redactar una estructura de tabla a partir de ella.

Aquí, está comenzando con el DOCTYPE del documento. A continuación, configura el juego de caracteres, el tipo de contenido, las metaetiquetas y el título dentro del etiqueta. La parte esencial comienza con la etiqueta donde colocas a un padre y agregue varias filas de la tabla dentro de eso. Después de dividir el contenido en una cantidad adecuada de filas, es hora de ingresar los datos de la tabla. dentro de ellos.

Como se dijo, debes trabajar simplemente con tablas. Por lo tanto, para ingresar diferentes datos dentro del etiqueta, debe seguir una ruta definida. Por ejemplo, creemos una plantilla de correo electrónico con un logotipo y una fecha dentro de un etiqueta.

 Logotipo y fecha dentro de la etiqueta 
 

















05 diciembre 2021

Ahora sabe cómo colocar etiquetas HTML y crear una buena estructura para su plantilla de correo electrónico. Avancemos para comprender mejor el estilo del correo electrónico.

Diseñe su correo electrónico HTML

Diseñar un correo electrónico HTML es una tarea engorrosa, ya que solo puede usar CSS en línea. Además, deberá iterar el estilo para cada elemento si posee un estilo similar. Si no está familiarizado con las hojas de estilo en cascada, explore empezando con CSS.

Avance:

 05 diciembre 2021 






































Hola John Doe



Gracias por visitar nuestro sitio. Esperamos que haya aprendido algo nuevo hoy.





 ¡Tu opinión nos importa! 

 Califica nuestros artículos aquí. 


012345678910

Producción:

Si quieres, puedes acceder al código completo en GitHub y clonar el repositorio para usarlo.

Enviando el correo

Ahora copie y pegue todo el código de GitHub. Si está utilizando VS Code, abra el archivo HTML con la extensión del servidor en vivo y copie el contenido haciendo clic en Ctrl + A>Ctrl + C. Abra Gmail y redacte un nuevo correo electrónico. Pegue el contenido e ingrese la identificación de correo del destinatario. Envíe el correo electrónico y obtendrá los resultados como se muestra a continuación:

Pruebe el código en diferentes dispositivos para ver cómo se ve y se comporta. Personalice su correo electrónico HTML y hágalo limpio, simple y receptivo.

Modificar las plantillas de correo electrónico existentes

La creación de un correo electrónico HTML desde cero exige un control sólido sobre HTML y CSS en línea. También puede modificar una plantilla de correo electrónico existente y personalizarla según sus necesidades. Tenga en cuenta que los correos electrónicos HTML suelen tardar unos segundos en cargarse. Planifique, diseñe, codifique y realice pruebas exhaustivas para evitar inconsistencias por parte del usuario final. Puede obtener más información sobre HTML semántico y CSS para escribir un código mejor y más accesible.

Naincy Mourya (17 Artículos publicados)

Naincy se especializa en la creación de sitios web altamente receptivos y una estrategia de contenido eficiente junto con copias web. Ella es una escritora de tecnología independiente que está muy atenta a las tecnologías de tendencia.

Más de Naincy Mourya