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 comentarios

    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

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

Unidades CSS personalizadas, min(), max() y clamp(): tres funciones lógicas de CSS

Antes de comenzar con el artículo, te comparto un corto video de mi participación en la Meetup «Aplica...

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.