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.

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.
Imagen de Sobre el autor:<br>Sebastián echeverri Jaramillo - Sebasweb

Sobre el autor:
Sebastián echeverri Jaramillo - Sebasweb

Apasionado de WordPress, diseñador web y creador de contenido. Ayudo a emprendedores y negocios a construir su presencia online con sitios web funcionales y bien optimizados. Fundador de SEBASWEB, donde comparto tutoriales, guías y recursos sobre desarrollo web.

Enamorado de mis dos hijos y mi esposa, quienes son el motor de mi vida. Me encanta la fotografía y disfruto compartir conocimientos con profesionales de los sectores en los que trabajo. Siempre explorando nuevas herramientas digitales y tendencias del mundo web.

Sígueme en YouTube para más consejos sobre WordPress y desarrollo web.

Comparte este artículo

¿Que tal te pareció este artículo?

8 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,

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

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…

Este blog se mantiene en parte gracias a enlaces de afiliación, que me generan una pequeña comisión sin costo adicional para ti. Solo recomiendo productos que he probado y confío. ¡Mil gracias por tu apoyo, significa muchísimo para mí!

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

Amelia: un plugin de reservas para WordPress muy completo y fácil de usar

Si estás buscando un plugin de reservas para WordPress, probablemente ya te habrás dado cuenta de la cantidad...

Code Snippets: una forma práctica de personalizar WordPress con código

Si alguna vez has necesitado agregar código personalizado en tu sitio WordPress, seguro que te has encontrado con...

Desactivar los avisos de nuevos usuarios en WordPress

Si estas gestionado un sitio en WordPress con registro de usuarios habilitado y estas aquí, seguramente quieres desactivar...

Desactivar los correos electrónicos al administrador de cambio de contraseña de los usuarios (WooCommerce)

Si gestionas una tienda online con WooCommerce, seguro que ya estás acostumbrado a recibir montones de correos cada...

Redirigir la página principal en WordPress usando un contenido específico de tu CPT

En este artículo te explicaré paso a paso cómo redirigir la página principal en WordPress a un contenido...

Cómo Configurar el Certificado de Seguridad SSL en Local WP con Mac

En este artículo, vamos a aprender cómo configurar un certificado de seguridad SSL en Local WP utilizando una...

Algunas plataformas con las que trabajo

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.