Plantillas de correo electrónico HTML y CSS

Plantillas de correo electrónico HTML y CSS

Tabla de contenido

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.

Tengo un regalo para ti

Apúntate a la newsletter y recibirás GRATIS un pack exclusivo de plantillas para Elementor PRO

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.

Comparte este artículo

¿Que tal te pareció este artículo?

6 Responses

    1. 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,

Deja una respuesta

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

Información base sobre privacidad:
Responsable: Sebastián Echeverri (portafolio@sebasweb.net)
Fin del tratamiento: Moderación de comentarios para evitar spam
Legitimación: Tu consentimiento
Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
Derechos: Acceso, rectificación, portabilidad, olvido

Recomiendo:

Sobre la afiliación…

Para mantener este blog, cuento parcialmente con el respaldo de enlaces de afiliación, los cuales generan una pequeña comisión si decides adquirir algo a través de ellos. Esto no implica ningún gasto adicional para ti y solo enlazo productos que personalmente he utilizado y recomiendo.

También te podría interesar ver estos artículos

🔐 Cómo Implementar Encabezados de Seguridad en WordPress

Los encabezados de seguridad son una parte crucial de la defensa de tu sitio web contra diversas amenazas....

WordCamp Madrid 2023

A continuación un pequeño resumen en imágenes de lo que fue la WordCamp Madrid 2023.

Webinar Emprende: Diseña tu web con WordPress – Las Rozas Next

En este artículo encontrarás el resumen en texto y videos de lo que fue el webinar «Diseña tu...

Redirecciones masivas en Rank Math

Si llegaste a este artículo es porque seguramente estas buscando la forma de hacer redirecciones masivas en Rank...

Evitar que WordPress pida los datos FTP al instalar o actualizar un plugin o tema

Cuando trabajamos en el diseño y desarrollo web utilizando un servidor web local o un entorno LAMP, es...

Modular DS: Administrar varios sitios web en WordPress a la vez

Un sitio web para Administrar varios WordPress con Modular DS Administrar varios WordPress a la vez puede resultar...

Algunas plataformas con las que trabajo

No te vayas sin tu regalo!

Apúntate a la newsletter y recibirás GRATIS un pack exclusivo de plantillas para Elementor PRO

Apúntate GRATIS a la newsletter y llévate de regalo un pack de plantillas exclusivas para Elementor!

SUSCRÍBETE

No te pierdas los artículos y trucos relacionados con WordPress, Elementor y diseño y desarrollo web en general.