---
title: "Plantillas de correo electrónico HTML y CSS"
description: "https://www.youtube.com/watch?v=Nfs4AxMQhCU&feature=youtu.be En este video vamos a aprender a usar una herramienta en línea para crear y descargar plantillas de correo electrónico HTML y CSS,..."
url: https://sebasweb.net/plantillas-de-correo-electronico-html-y-css/
date: 2022-02-13
modified: 2024-01-20
author: "Sebasweb"
image: https://sebasweb.net/wp-content/uploads/2022/02/Plantillas-de-correo-electrónico-HTML-y-CSS.jpeg
categories: ["Wordpress"]
type: post
lang: es
---

# Plantillas de correo electrónico HTML y CSS

https://www.youtube.com/watch?v=Nfs4AxMQhCU&feature=youtu.be

En este video vamos a aprender a usar una herramienta en línea para crear y descargar plantillas de correo electrónico HTML y CSS, simplemente con el concepto de arrastrar y soltar. Para ello, usaremos la página (https://url.sebasweb.net/beefree), aunque tienen una opción premium, lo que veremos en el video será con su versión gratuita y con la posibilidad de evitar cualquier marca de agua para tus diseños, además de tener un email en html y css listo para usar en cualquier plataforma de envíos, o como en nuestro caso, para el correo de autorespuesta del formulario creado en Elementor PRO.

(https://url.sebasweb.net/descarga-correos-html)

### Resumen del video

- **00:00 📧 Creación de correo electrónico con (https://url.sebasweb.net/descarga-correos-html)**

Creación de un diseño de correo electrónico personalizado utilizando la plataforma (https://url.sebasweb.net/descarga-correos-html)

- Introducción al entorno de diseño en befree.io con dos espacios: uno para diseño y otro con pestañas de contenido, filas y ajustes.

- **01:42 🎨 Diseño del encabezado y saludo**

Personalización del encabezado del correo electrónico, incluyendo el logo y ajustes de estilo.

- Uso de herramientas de befree.io para añadir imágenes, definir colores de fondo y ajustar propiedades de las filas.

- **04:51 📝 Creación del cuerpo del correo**

Diseño del contenido principal del correo electrónico, incluyendo texto personalizado y elementos dinámicos.

- Utilización de bloques de texto, ajuste de tipografía, colores y alineación para lograr un diseño atractivo.

- **08:32 🖼️ Diseño de sección con dos columnas**

Creación de una sección con dos columnas, cada una conteniendo una imagen y texto relacionado.

- Ajuste de espacios entre columnas, personalización de fondo y disposición de elementos para lograr una estructura visualmente equilibrada.

- **10:36 📱 Creación de botones y sección de vídeos**

Personalización de botones en befree.io para incluir enlaces y ajustes visuales.

- Diseño de una sección que presenta vídeos con imágenes, títulos y enlaces correspondientes.

- **11:46 🌐 Inclusión de redes sociales y finalización del diseño**

Agregado de una sección final con enlaces a redes sociales.

- Ajustes finales en colores, espaciados y diseño general del correo electrónico.

- **13:28 💻 Exportación y ajustes finales del código HTML**

Demostración de cómo exportar el diseño y obtener el código HTML.

- Eliminación de elementos no deseados en el código HTML y ajustes para la correcta visualización en emails.

- **17:49 🎁 Regalo y cierre del tutorial**

Oferta de un regalo consistente en códigos HTML de diseños adicionales.

- Invitación a comentar sobre la experiencia y sugerencias para futuros tutoriales.