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 beefree.io, 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.
Suscríbete y aprende gratis
¿Te apasiona el mundo web? Únete a la newsletter y recibe en tu correo un pequeño resumen donde hablo sobre WordPress, diseño y desarrollo web.
Resumen del video
- 00:00 📧 Creación de correo electrónico con befree.io
- Creación de un diseño de correo electrónico personalizado utilizando la plataforma befree.io.
- 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.
8 Responses
Gracias
Gracias a ti Carlos por visitar, ver y comentar!
Gracias
Gracias a ti David por tu comentario 😊
Hola Sebas, el link lleva al siguiente mensaje: El archivo que solicitaste no existe.
Asegúrate de que tienes la dirección URL correcta y de que el archivo existe
Hola Andrés, muchas gracias por tu observación, tienes razón, he tenido que migrar todo mi contenido de drive y he perdido la ruta, pero ya esta solucionado.
Un saludo,
Sebas, muchas gracias por tan generoso regalo. Tu video me aclaro mucho sobre cómo dar un nuevo estilo a mis correos. Una explicación, completa, asequible a la par que eficaz. nuevamente. ¡GRACIAS!
Elvira, mil gracias a ti por tu comentario, espero que le puedas sacar mucho provecho.
Un saludo,