En este art\u00edculo te explicar\u00e9 ambos m\u00e9todos. C\u00f3mo crear emails HTML con c\u00f3digo y sin c\u00f3digo.<\/p>\n\n\n\n
<\/span>\u00bfQu\u00e9 es un email HTML?<\/span><\/h2>\n\n\n\nUn email HTML es un email creado con c\u00f3digo de programaci\u00f3n. Al igual que las p\u00e1ginas web, los emails HTML se crean utilizando los llamados lenguajes de \u00abmarcado\u00bb HTML, CSS y XML. HTML son las siglas de \u00ablenguaje de marcado de hipertexto\u00bb. Y permite crear la estructura de una p\u00e1gina web o un email.<\/p>\n\n\n\n
CSS son las siglas de \u00abhojas de estilo en cascada\u00bb. Este lenguaje determina el aspecto de los elementos en la pantalla. XML es la abreviatura de \u00ablenguaje de marcado extensible\u00bb. Y ayuda a diferentes plataformas inform\u00e1ticas a leer los mismos datos.<\/p>\n\n\n\n
En t\u00e9rminos m\u00e1s sencillos, un email HTML es un email con un dise\u00f1o visual claro. Ve a tu bandeja de entrada y abre un email est\u00e1ndar de un amigo o compa\u00f1ero de trabajo. \u00bfQu\u00e9 ves? En su mayor parte, solo texto. Esto se denomina email de texto sin formato.<\/p>\n\n\n\n
Un email HTML es diferente porque no solo contiene texto. Vuelve a buscar en tu bandeja de entrada un email de una empresa. Algo como un bolet\u00edn informativo o un email promocional. \u00bfEs diferente? No solo tiene texto sin formato, \u00bfverdad?<\/p>\n\n\n\n
Un email HTML est\u00e1 dise\u00f1ado para verse bien y llamar la atenci\u00f3n. Tiene colores. Tiene im\u00e1genes y gr\u00e1ficos. Tiene un formato y un estilo agradables a la vista. Las empresas suelen usar los emails HTML en sus campa\u00f1as de marketing. Los emails son fundamentales para la gesti\u00f3n de las relaciones con los clientes de muchas empresas. Pero para que funcionen, tienen que llamar la atenci\u00f3n. Y precisamente por eso las empresas utilizan los emails HTML: para que destaquen y llamar la atenci\u00f3n.<\/p>\n\n\n\n
Las empresas necesitan emails de marketing para provocar una respuesta. Por eso, los emails HTML suelen incluir \u00abllamadas a la acci\u00f3n\u00bb o CTA. No basta con que los destinatarios abran y lean el email. Las empresas necesitan que los suscriptores act\u00faen. Hacer clic para ver una oferta especial. O registrarse en un servicio nuevo.<\/p>\n\n\n\n
Un email HTML es un veh\u00edculo para estas CTA. Crea un email bonito. Capta la atenci\u00f3n. Haz que tu p\u00fablico act\u00fae. Veamos c\u00f3mo se hace.<\/p>\n\n\n\n
<\/span>C\u00f3mo crear un email HTML sin c\u00f3digo<\/span><\/h2>\n\n\n\n\u00bfPuede usar HTML sin programar? \u00bfNo es una contradicci\u00f3n? No, si tienes un editor de arrastrar y soltar.<\/p>\n\n\n\n
Las plataformas web como Wix y Squarespace han utilizado estos editores desde hace a\u00f1os. Supusieron un aut\u00e9ntico punto de inflexi\u00f3n en el dise\u00f1o web. Con un editor de arrastrar y soltar, cualquiera puede crear sitios web atractivos y funcionales. No es necesario tener conocimientos de programaci\u00f3n.<\/p>\n\n\n\n
Lo mismo ha ocurrido con los emails. Si utilizas un servicio de email marketing, es probable que tenga un creador de emails de arrastrar y soltar. As\u00ed es como se acelera la creaci\u00f3n de emails. Al igual que sus primos, los editores web, son muy f\u00e1ciles de usar. Solo necesitas conocimientos b\u00e1sicos de inform\u00e1tica.<\/p>\n\n\n\n
Para este art\u00edculo, he decidido utilizar Stripo<\/a>. Es uno de los mejores creadores de plantillas de email. No solo puedes crear emails atractivos y responsive de forma r\u00e1pida y sencilla. Adem\u00e1s, es gratuito. \u00bfHe mencionado lo f\u00e1cil que es?<\/p>\n\n\n\n![\"Pa\u0301gina](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/Pagina-de-registro-del-editor-de-email-gratuito-Stripo.png\")
<\/figure>\n\n\n\nStripo te permite guardar algunos elementos del dise\u00f1o para volver a utilizarlos en futuros proyectos. Si formas parte de un equipo, puedes a\u00f1adir comentarios para tus compa\u00f1eros y colaborar en tiempo real. Y obtienes asistencia por email gratuita. Veamos c\u00f3mo funciona. <\/p>\n\n\n\n
1. Selecciona una plantilla o empieza desde cero<\/h3>\n\n\n\n![\"Plantillas](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/Plantillas-de-email-HTML-de-Stripo.png\")
<\/figure>\n\n\n\nStripo<\/a> tiene m\u00e1s de 1600 plantillas de email HTML gratuitas<\/a>. \u00a1Es una barbaridad! Sea cual sea tu tipo de negocio, seguro que encuentras una plantilla de email HTML que se adapte a lo que haces.<\/p>\n\n\n\nPara ayudarte a encontrar la m\u00e1s adecuada, las plantillas est\u00e1n agrupadas por tipo, sector, temporada, funciones e integraciones. Las categor\u00edas de tipo y sector son las que me parecen m\u00e1s \u00fatiles. Aqu\u00ed puedes acceder a 406 plantillas de email promocionales diferentes. O a 275 plantillas para promocionar un evento. Tambi\u00e9n hay algunas categor\u00edas de nichos muy interesantes. \u00bfQuieres intrigar a tus contactos con un email HTML que les haga adivinar qu\u00e9 vendr\u00e1 despu\u00e9s? \u00a1Elige una de las 16 plantillas teaser!<\/p>\n\n\n\n
Las plantillas de temporada tambi\u00e9n son \u00fatiles para vincular una promoci\u00f3n a la \u00e9poca del a\u00f1o. Stripo tiene m\u00e1s de 800 plantillas con una tem\u00e1tica festiva. La categor\u00eda de funciones incluye plantillas de email con gr\u00e1ficos en 3D, elementos AMP, animaciones CSS, carruseles y v\u00eddeos.<\/p>\n\n\n\n
Y no tienes que elegir una plantilla de email HTML si no quieres. Si prefieres hacerlo por tu cuenta, solo tienes que seleccionar la opci\u00f3n \u00abEmpezar desde cero\u00bb. Eso es lo que hice para crear la plantilla de email que se muestra a continuaci\u00f3n. Y te explicar\u00e9 exactamente c\u00f3mo lo hice.<\/p>\n\n\n\n![\"gui\u0301a](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/Guia-para-crear-emails-HTML-en-Stripo.png\")
<\/figure>\n\n\n\nExplora m\u00e1s de 1600 plantillas de email HTML<\/strong><\/a><\/p>\n\n\n\n2. Personaliza tu email<\/h3>\n\n\n\n
Tanto si eliges una plantilla HTML predise\u00f1ada como una en blanco, el proceso es el mismo. El editor de Stripo te permite personalizar los dise\u00f1os, el texto, las im\u00e1genes y las combinaciones de colores. Y puedes utilizar las mismas herramientas para crear dise\u00f1os desde cero.<\/p>\n\n\n\n
Crear el dise\u00f1o<\/h4>\n\n\n\n![\"editor](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/Editor-de-plantillas-de-email-de-Stripo-empezar-desde-cero.png\")
<\/figure>\n\n\n\nAs\u00ed es como se ve el editor con una plantilla en blanco. Podr\u00eda haber empezado a arrastrar bloques de contenido desde la izquierda directamente. Pero en lugar de ello, elimin\u00e9 los contenedores vac\u00edos y abr\u00ed Estructuras y m\u00f3dulos para encontrar algunas estructuras predefinidas y ahorrar tiempo. Decid\u00ed arrastrar tres bloques predefinidos y mi plantilla ya empez\u00f3 a tomar forma.<\/p>\n\n\n\n![\"creacio\u0301n](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/Creacion-de-plantillas-de-email-HTML-en-el-editor-Stripo.png\")
<\/figure>\n\n\n\nAhora tengo una plantilla de email HTML con un logotipo, navegaci\u00f3n y dos tarjetas en el encabezado.<\/p>\n\n\n\n
\u00bfY si quiero que los colores coincidan con los de mi marca? Para configurar una combinaci\u00f3n de colores para todo el email, ve a Stripes<\/em> y all\u00ed podr\u00e1s elegir los colores de fondo para las rayas y los bloques de contenido. Ya estoy contento con los colores, as\u00ed que los dej\u00e9 tal cual.<\/p>\n\n\n\nA\u00f1adir im\u00e1genes<\/h4>\n\n\n\n
Decid\u00ed que tambi\u00e9n quer\u00eda a\u00f1adir una imagen principal a la tarjeta del encabezado de la derecha. As\u00ed que elimin\u00e9 el encabezado, el texto y el bot\u00f3n para dejar espacio para una imagen.<\/p>\n\n\n\n![\"Co\u0301mo](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/Como-anadir-imagenes-a-tu-email-HTML-en-Stripo.png\")
<\/figure>\n\n\n\nStripo hace que a\u00f1adir im\u00e1genes a tu email HTML sea f\u00e1cil. Cuando a\u00f1ades un bloque de imagen, ver\u00e1s la \u00abGaler\u00eda de im\u00e1genes\u00bb a la derecha.<\/p>\n\n\n\n![\"Subir](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/Subir-imagenes-al-editor-de-Stripo.png\")
<\/figure>\n\n\n\nPuedes a\u00f1adir tus propias im\u00e1genes subi\u00e9ndolas desde tu ordenador. O pegar las URL de las im\u00e1genes para a\u00f1adir im\u00e1genes de la web.<\/p>\n\n\n\n
La biblioteca de im\u00e1genes gratuitas de Stripo se llama Photostock. Es un recurso fant\u00e1stico. Hay m\u00e1s de 500 000 im\u00e1genes disponibles a trav\u00e9s de Pexels y Pixabay.<\/p>\n\n\n\n
Stripo tambi\u00e9n tiene una funci\u00f3n integrada para generar im\u00e1genes. Puedes generar im\u00e1genes con DALL-E, Gemini y Stability en tres formatos de aspecto diferente. Y las enormes galer\u00edas de iconos y GIF integradas facilitan mucho la adici\u00f3n de cualquier tipo de elemento visual.<\/p>\n\n\n\n
Tambi\u00e9n puedes encontrar gr\u00e1ficos de temporada para Navidad, Black Friday, Cyber Monday, Pascua, Halloween, A\u00f1o Nuevo y todas las fiestas internacionales importantes. Las decoraciones incluyen globos, marcos de banners, marcas de verificaci\u00f3n, descuentos, cargadores y regalos. Algunos de los gr\u00e1ficos est\u00e1n un poco desactualizados.<\/p>\n\n\n\n
Todas las im\u00e1genes se guardan en tu propio administrador de archivos. Una vez a\u00f1adidas, ver\u00e1s todos tus archivos de imagen cada vez que hagas clic en el bot\u00f3n de exploraci\u00f3n del bloque de im\u00e1genes. Solo tienes que hacer clic en Insertar para a\u00f1adir una imagen a tu email.<\/p>\n\n\n\n![\"Editar](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/Editar-bloques-de-imagenes-en-el-editor-de-Stripo.png\")
<\/figure>\n\n\n\nDe vuelta en el editor, haz clic en el bloque de imagen para editarlo. Yo quer\u00eda cambiar el tama\u00f1o de mi imagen. Y redondear las esquinas para que encajara en la tarjeta de la izquierda. Ambas opciones eran visibles y de f\u00e1cil acceso en el panel derecho de la interfaz.<\/p>\n\n\n\n![\"Editor](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/Editor-de-imagenes-integrado-en-Stripo.png\")
<\/figure>\n\n\n\nStripo tambi\u00e9n tiene un editor de im\u00e1genes integrado. Para editar tu imagen, haz clic en el icono del marco. Aqu\u00ed encontrar\u00e1s m\u00e1s opciones para cambiar el tama\u00f1o y el dise\u00f1o de tu imagen. Tambi\u00e9n puedes aplicar filtros y a\u00f1adir texto a tu imagen.<\/p>\n\n\n\n
Empieza a usar Stripo gratis aqu\u00ed<\/strong><\/a><\/p>\n\n\n\nA\u00f1adir texto<\/h4>\n\n\n\n
A continuaci\u00f3n, es el momento de a\u00f1adir nuestro texto. Los emails HTML pueden contener tanto texto como quieras. Todo depende de lo que quieras conseguir. Pero yo creo que es una buena idea llamar la atenci\u00f3n primero. C\u00e9ntrate en tener un dise\u00f1o llamativo y mensajes breves y claros. Siempre puedes a\u00f1adir m\u00e1s detalles m\u00e1s abajo en el email.<\/p>\n\n\n\n
A\u00f1adir o editar texto en Stripo es muy f\u00e1cil. Solo tienes que hacer clic en un bloque de texto y escribir.<\/p>\n\n\n\n![\"formatear](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/formatear-texto-en-el-editor-de-Stripo.png\")
<\/figure>\n\n\n\nYo empec\u00e9 por el encabezado. Al hacer clic en un bloque de texto, aparece el men\u00fa de formato a la derecha. Puedes cambiar el estilo del p\u00e1rrafo, el estilo del texto, la alineaci\u00f3n, el tama\u00f1o y el color. Tambi\u00e9n tiene opciones adicionales, como a\u00f1adir caracteres especiales y emoticonos, o hiperv\u00ednculos.<\/p>\n\n\n\n
Stripo incluye fuentes seguras para el email e incluso algunas fuentes de Google, como Arvo, Lato, Lora, Merriweather, Open Sans y Roboto. Y puedes incluso a\u00f1adir fuentes personalizadas a Stripo.<\/p>\n\n\n\n
Incluir tu CTA<\/h4>\n\n\n\n
Pasemos ahora a la \u00faltima pieza del dise\u00f1o, el bot\u00f3n CTA. Para personalizar tu bot\u00f3n CTA, haz clic en el bloque en la vista previa del editor. Ver\u00e1s todas las opciones de edici\u00f3n a la derecha. Aqu\u00ed es donde puedes a\u00f1adir el enlace, editar el texto del bot\u00f3n y dar formato al propio bot\u00f3n.<\/p>\n\n\n\n![\"incluir](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/incluir-un-boton-CTA-en-el-editor-de-email-de-Stripo.png\")
<\/figure>\n\n\n\nDespu\u00e9s de escribir mi CTA y a\u00f1adir mi enlace, quise cambiar el color del bot\u00f3n. Abr\u00ed \u00abEstilos\u00bb y copi\u00e9 y pegu\u00e9 el c\u00f3digo de color de un bloque m\u00e1s abajo para obtener un color m\u00e1s contrastado que se ajustara a mi paleta de colores.<\/p>\n\n\n\n
3. Exporta tu email HTML<\/h3>\n\n\n\n
Tu email HTML sin c\u00f3digo ya est\u00e1 listo. Ahora viene la parte importante. \u00a1Enviarlo!<\/p>\n\n\n\n
Stripo no es un Proveedor de Servicios de Email (ESP) ni una plataforma de email marketing. Por lo tanto, no puedes enviarlo directamente desde Stripo. Pero es muy f\u00e1cil exportar tu dise\u00f1o a las mejores plataformas de email marketing<\/a>.<\/p>\n\n\n\nCuando tu dise\u00f1o est\u00e9 listo, haz clic en Exportar. Aparecer\u00e1 un men\u00fa emergente con tres opciones:<\/p>\n\n\n\n![\"aplicaciones](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/aplicaciones-a-las-que-puedes-exportar-emails-HTML-en-Stripo.png\")
<\/figure>\n\n\n\nArchivo:<\/strong> descarga tu plantilla de email en formatos AMPHTML, HTML, Image o PDF. El formato HTML funciona con la mayor\u00eda de los ESP y es gratuito. Comprueba si tu ESP tiene una opci\u00f3n de importaci\u00f3n de HTML. Si es as\u00ed, genial. Puedes subir el archivo ZIP y enviar campa\u00f1as con tu plantilla personalizada.<\/p>\n\n\n\nAplicaci\u00f3n: <\/strong>incluye integraciones con Gmail, Make, n8n, Outlook, Webhook y Zapier.<\/p>\n\n\n\n![\"proveedores](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/proveedores-de-email-integrados-con-Stripo.png\")
<\/figure>\n\n\n\nProveedor de email:<\/strong> es la opci\u00f3n m\u00e1s sencilla. Utiliza integraciones para exportar tu email HTML directamente a tu ESP. Est\u00e1 disponible para m\u00e1s de 75 plataformas, como ActiveCampaign<\/a>, Brevo<\/a>, Hubspot<\/a>, MailerLite<\/a>, Moosend<\/a> y GetResponse<\/a>.<\/p>\n\n\n\nPrueba Stripo gratis aqu\u00ed<\/strong><\/a><\/p>\n\n\n\n<\/span>C\u00f3mo codificar un email HTML<\/span><\/h2>\n\n\n\nPasemos al segundo m\u00e9todo para crear un email HTML: escribir el c\u00f3digo HTML. Para ello, necesitas saber HTML y CSS.<\/p>\n\n\n\n
\u00bfPor qu\u00e9 hacerlo si los editores modernos sin c\u00f3digo son tan f\u00e1ciles de usar? Los programadores HTML argumentan que la codificaci\u00f3n les da m\u00e1s libertad y control. Los editores de arrastrar y soltar son f\u00e1ciles de usar. Pero siempre est\u00e1s utilizando plantillas y bloques de contenido predise\u00f1ados. S\u00ed, puedes personalizarlo todo. Pero hay l\u00edmites en lo que puedes hacer.<\/p>\n\n\n\n
Si creas un email HTML utilizando tus conocimientos de programaci\u00f3n, eliminas esos l\u00edmites. Creas las plantillas, los bloques de contenido y los dise\u00f1os generales completamente desde cero.<\/p>\n\n\n\n
Entonces, \u00bfc\u00f3mo se hace? No necesitas un software especial para codificar un email en HTML. Puedes utilizar un sencillo editor de texto plano como el Bloc de notas. Una vez que hayas escrito tu script, s\u00fabelo a tu plataforma de email.<\/p>\n\n\n\n
Pero es una buena idea utilizar un editor HTML. Estos incluyen muchas funciones \u00fatiles, como resaltar los errores en el c\u00f3digo. Algunos incluso muestran el dise\u00f1o que el c\u00f3digo est\u00e1 creando mientras lo escribes. La mayor\u00eda de los programadores web profesionales utilizan editores HTML hoy en d\u00eda. Hay muchas opciones disponibles. Lee nuestra gu\u00eda de los mejores editores HTML<\/a> para que puedas elegir el que mejor se adapte a tus necesidades. <\/p>\n\n\n\nPara este proyecto, me decid\u00ed por CoffeeCup. Es un editor HTML WYSIWYG, que significa \u00ablo que ves es lo que obtienes\u00bb. Eso significa que ves el c\u00f3digo tal y como lo escribes. Tambi\u00e9n tiene funciones \u00fatiles, como plantillas de c\u00f3digo HTML que puedes utilizar. Es una buena opci\u00f3n intermedia. Te ofrece m\u00e1s control que un editor de arrastrar y soltar, pero te ayuda si no eres un experto en programaci\u00f3n.<\/p>\n\n\n\n
1: Doctype<\/h3>\n\n\n\n
La primera etapa en la codificaci\u00f3n de un email HTML es configurar un Doctype. Esto le indica al software que lee el c\u00f3digo que se trata de HTML. Y tambi\u00e9n qu\u00e9 versi\u00f3n de HTML est\u00e1s utilizando. Esto es importante para que los clientes de email sepan qu\u00e9 etiquetas esperar e interpretarlas correctamente.<\/p>\n\n\n\n
Cada fragmento de c\u00f3digo HTML debe comenzar con la etiqueta <!DOCTYPE html>.<\/p>\n\n\n\n
Durante mucho tiempo, la versi\u00f3n recomendada de HTML para codificar emails fue XHTML 1.0 Traditional. Se trata de un lenguaje h\u00edbrido que abarca tanto la sintaxis HTML como la XML. XML facilita que diferentes servicios interpreten los datos de forma coherente. Esto es importante si quieres que tus emails se vean bien en muchos clientes de email diferentes.<\/p>\n\n\n\n
Hoy en d\u00eda, lo mejor es utilizar HTML 5 para codificar los emails. HTML 5 es la \u00faltima versi\u00f3n de HTML y tambi\u00e9n cubre la sintaxis XML. Esto te facilita la vida, ya que solo tienes que utilizar la etiqueta <!DOCTYPE html>. El software asume que te refieres a HTML 5 por defecto. Si deseas utilizar otra versi\u00f3n de HTML, debes especificarlo.<\/p>\n\n\n\n![\"Opciones](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/Opciones-de-inicio-rapido-de-CoffeeCup-para-configurar-una-plantilla-HTML.png\")
<\/figure>\n\n\n\nEn CoffeeCup, puedes configurar el tipo de documento utilizando la opci\u00f3n Inicio r\u00e1pido. Esto te ofrece una selecci\u00f3n de versiones HTML en un men\u00fa desplegable. HTML 5 es la opci\u00f3n predeterminada.<\/p>\n\n\n\n
La etiqueta <!DOCTYPE html> por s\u00ed sola no es suficiente para empezar a codificar. Tambi\u00e9n necesitas un par de etiquetas de apertura <html> y cierre <\/html>. Todo el c\u00f3digo que escribas para tu email debe estar dentro de estas etiquetas.<\/p>\n\n\n\n
Tambi\u00e9n debes utilizar la etiqueta <html> para establecer el idioma de tu email. La etiqueta para el ingl\u00e9s, por ejemplo, es <html lang=\u201den\u201d>.<\/p>\n\n\n\n
Una vez m\u00e1s, la opci\u00f3n Inicio r\u00e1pido de CoffeeCup te permite configurarlo autom\u00e1ticamente.<\/p>\n\n\n\n
2: C\u00f3mo preparar tu plantilla HTML <Head><\/h3>\n\n\n\n
Hay mucho trabajo de preparaci\u00f3n cuando se codifica HTML. Dedicas tanto tiempo a configurar el documento como a dise\u00f1ar y a\u00f1adir contenido. Las etiquetas Doctype y <html> son solo el principio. Despu\u00e9s, es el momento de a\u00f1adir toda una secci\u00f3n de c\u00f3digo dedicada a la configuraci\u00f3n. La secci\u00f3n <head>.<\/p>\n\n\n\n
No la confundas con el encabezado <\/em>de tu email HTML. El encabezado es la secci\u00f3n superior del contenido de tu email. La secci\u00f3n <head> del c\u00f3digo no se ve en el dise\u00f1o. Establece los metadatos para el resto del documento. Al igual que la etiqueta Doctype, los metadatos proporcionan informaci\u00f3n importante al cliente de email. Esto incluye m\u00e1s informaci\u00f3n sobre c\u00f3mo debe leerse el c\u00f3digo. Pero tambi\u00e9n es donde se establecen las reglas espec\u00edficas de estilo y formato del documento.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n <meta charset=\"utf-8\">\n<title>Plantilla de email de ejemplo<\/title>\n<\/code><\/pre>\n\n\n\nTodos los metadatos deben ir entre las etiquetas <head> y <\/head>. Aqu\u00ed tienes dos metaetiquetas comunes que puedes utilizar:<\/p>\n\n\n\n
\n- Viewport:<\/strong> Todos los encabezados de email deben contener esta etiqueta: <meta name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1.0\u2033>. Esto fija el \u00e1rea visible de tu email al ancho de la pantalla del dispositivo.<\/li>\n\n\n\n
- Charset: <\/strong>El software inform\u00e1tico no puede leer los caracteres de texto directamente. Necesita c\u00f3digos para interpretarlos. El juego de caracteres le indica al software qu\u00e9 biblioteca de c\u00f3digos debe utilizar. UTF-8 es el m\u00e1s com\u00fan.<\/li>\n<\/ul>\n\n\n\n
Tambi\u00e9n puedes darle un nombre a tu plantilla de email HTML. Escribe el nombre entre las etiquetas <title><\/title>. Si alguien abre tu email en un navegador web, el t\u00edtulo se mostrar\u00e1 en la pesta\u00f1a.<\/p>\n\n\n\n
3: C\u00f3mo personalizar el estilo de tu email HTML<\/h3>\n\n\n\n
La secci\u00f3n <head> tambi\u00e9n es importante para personalizar el estilo de tu email HTML. Es donde se crean las reglas de estilo para todo el email.<\/p>\n\n\n\n
El estilo para el HTML se trabaja utilizando un lenguaje de programaci\u00f3n diferente llamado CSS. El CSS se utiliza para establecer los colores, los tipos de fuente, los tama\u00f1os y los dise\u00f1os.<\/p>\n\n\n\n
<style>\n body {\n color:#000000;\n background-color:#FFFFFF;\n background-image:url('Background Image');\n background-repeat:no-repeat;\n }\n a { color:#0000FF; }\n a:visited { color:#800080; }\n a:hover { color:#008000; }\n a:active { color:#FF0000; }\n p1 {font-family: Arial, sans-serif;}\n <\/style>\n<\/code><\/pre>\n\n\n\nLas reglas de estilo CSS se pueden a\u00f1adir a cualquier parte del c\u00f3digo HTML. Pero hay una raz\u00f3n muy importante para a\u00f1adir el CSS a la secci\u00f3n <head> de un email HTML. Gmail ignora el CSS en el contenido del cuerpo. Es muy probable que algunos de tus suscriptores utilicen Gmail. Es el proveedor de servicios de email m\u00e1s popular del mundo. Si no creas reglas CSS en la secci\u00f3n <head>, tu email no se ver\u00e1 correctamente en su bandeja de entrada.<\/p>\n\n\n\n
Todas las instrucciones de estilo van dentro de las etiquetas <style><\/style>. En el c\u00f3digo anterior, he establecido las siguientes reglas de estilo.<\/p>\n\n\n\n
En primer lugar, he establecido el color predeterminado de la fuente (\u00abcolor\u00bb) en negro (#000000). Y el color de fondo en blanco (#FFFFFF). Tambi\u00e9n he creado un espacio para a\u00f1adir una imagen de fondo desde una URL web. La instrucci\u00f3n \u00abno repeat\u00bb significa que cualquier imagen de fondo solo aparecer\u00e1 una vez.<\/p>\n\n\n\n
Debajo, las etiquetas \u00aba\u00bb establecen los colores del texto para los enlaces abiertos y sin abrir. A continuaci\u00f3n, la etiqueta <p1> establece el tipo de fuente predeterminado para los p\u00e1rrafos. Puedes establecer diferentes fuentes para diferentes secciones utilizando <p2>, <p3>. Y puedes hacer lo mismo con los encabezados utilizando <h1>, <h2>, <h3>, etc.<\/p>\n\n\n\n
Consultas de medios: codificaci\u00f3n de una plantilla de email responsive<\/h4>\n\n\n\n
Debes pensar en c\u00f3mo se ver\u00e1 el dise\u00f1o de tu email en diferentes dispositivos y en diferentes clientes de email.<\/p>\n\n\n\n
Los diferentes tama\u00f1os de pantalla y los diferentes programas cambian el aspecto del mismo email. El objetivo es que tu dise\u00f1o \u00fanico se vea lo mejor posible en todas las plataformas. Esto se denomina dise\u00f1o responsive.<\/p>\n\n\n\n
HTML y CSS te ofrecen otras herramientas para hacerlo. Ya hemos visto la metaetiqueta viewport. Un buen comienzo es asegurarte de que el \u00e1rea visible de tu email cambia con los diferentes tama\u00f1os de pantalla. Pero hay otras diferencias que debes tener en cuenta. Como la resoluci\u00f3n de la pantalla y las dimensiones de la ventana del navegador, etc.<\/p>\n\n\n\n
Las consultas de medios CSS indican a los diferentes clientes de email y dispositivos c\u00f3mo mostrar tu email. Aqu\u00ed tienes un ejemplo:<\/p>\n\n\n\n
@media screen and (max-width: 600px) {\n .column {\n width: 100%;\n }\n div.example {\n font-size: 30px;\n }\n }\n @media screen and (max-width: 900px) {\n .column {\n width: 50%;\n }\n {\n div.example {\n font-size: 80px;\n }\n }\n <\/style>\n<\/code><\/pre>\n\n\n\nEste c\u00f3digo cambia el dise\u00f1o en funci\u00f3n del tama\u00f1o de la pantalla. La regla \u00abmax-width: 600px\u00bb se aplica a pantallas m\u00e1s peque\u00f1as de 600 p\u00edxeles de ancho. Por ejemplo, los dispositivos m\u00f3viles. En estas pantallas, mi email se mostrar\u00e1 con una sola columna y un tama\u00f1o de fuente predeterminado de 30 p\u00edxeles. En pantallas de hasta 900 p\u00edxeles, tendr\u00e1 dos columnas y un texto m\u00e1s grande.<\/p>\n\n\n\n
4: Ejemplo de c\u00f3digo <head> final del email<\/h3>\n\n\n\n
Con esto ya hemos terminado el c\u00f3digo <head>. As\u00ed es como ha quedado el m\u00edo:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n <meta charset=\"utf-8\">\n <title>Plantilla de email de ejemplo<\/title>\n <style>\n body {\n color:#000000;\n background-color:#FFFFFF;\n background-image:url('Background Image');\n background-repeat:no-repeat;\n }\n a { color:#0000FF; }\n a:visited { color:#800080; }\n a:hover { color:#008000; }\n a:active { color:#FF0000; }\n p1 {font-family: Arial, sans-serif;}\n @media screen and (max-width: 600px) {\n .column {\n width: 100%;\n }\n div.example {\n font-size: 30px;\n }\n }\n @media screen and (max-width: 900px) {\n .column {\n width: 50%;\n }\n {\n div.example {\n font-size: 80px;\n }\n }\n <\/style><!--[if IE]>\n <script src=\"http:\/\/html5shim.googlecode.com\/svn\/trunk\/html5.js\"><\/script>\n <![endif]-->\n<\/head>\n<\/code><\/pre>\n\n\n\nDebo destacar que esta es una versi\u00f3n simplificada. Una secci\u00f3n <head> real para un email HTML puede ser mucho m\u00e1s larga. Parece mucho solo para configurar tu plantilla de email HTML. Pero esta etapa es esencial. Garantiza que las diferentes plataformas muestren tu email de la forma que deseas. Y tambi\u00e9n te otorga un control total sobre el estilo.<\/p>\n\n\n\n
5: C\u00f3mo crear el <body> de tu email<\/h3>\n\n\n\n
Ahora vamos a crear el contenido del email HTML. Todo lo que quieras que sea visible en tu email debe ir entre las etiquetas <body><\/body>.<\/p>\n\n\n\n
Si tienes experiencia en la programaci\u00f3n de sitios web, hay un par de cosas que sabr\u00e1s. A estas alturas, es posible que esperes haber establecido las reglas de estilo para toda la p\u00e1gina en la secci\u00f3n <head>. Pero no funciona as\u00ed cuando creas un email HTML. Y es que tambi\u00e9n personalizas el estilo en el cuerpo.<\/p>\n\n\n\n
\u00bfPor qu\u00e9? Muchos ESP son muy malos leyendo las reglas de dise\u00f1o CSS. Para solucionar esto, es m\u00e1s seguro crear dise\u00f1os de email HTML utilizando tablas. Pero seguir\u00e1s teniendo problemas si el ESP elimina las reglas de estilo de tus tablas en la secci\u00f3n <head>. Por lo tanto, es m\u00e1s seguro aplicar el estilo a las tablas \u00aben l\u00ednea\u00bb a medida que las creas.<\/p>\n\n\n\n
Aqu\u00ed tienes un ejemplo:<\/p>\n\n\n\n
<body style=\"margin:0;padding:0;\">\n <table role=\"presentation\" style=\"width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff\"><\/table>\n <table align=\"center\" style=\"width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;\">\n <tr>\n <td align=\"center\" style=\"padding:0;\">Email Vendor Selection<\/td>\n <\/tr>\n <\/table>\n<\/body>\n<\/code><\/pre>\n\n\n\nEsto crea una \u00abtabla anidada\u00bb. O una tabla dentro de otra tabla. La primera es la tabla principal. Se convierte en el fondo para el resto de mi dise\u00f1o. He fijado el ancho en 100 %, para que ocupe toda la pantalla en cualquier dispositivo. Y he establecido un color de fondo, porque esta tabla ahora se superpondr\u00e1 al fondo del cuerpo. El c\u00f3digo role=\u00bbpresentation\u00bb indica al cliente que la tabla es para su visualizaci\u00f3n. No son datos.<\/p>\n\n\n\n
La segunda tabla es ahora mi \u00e1rea de contenido. La etiqueta <tr> crea una fila. La etiqueta <td> crea una celda. Por ahora, solo mostrar\u00e1 el texto \u00abEmail Vendor Selection\u00bb.<\/p>\n\n\n\n
F\u00edjate en que esta vez he fijado el ancho de la tabla en 600 p\u00edxeles. Este sigue siendo el ancho est\u00e1ndar para los elementos de contenido en los emails HTML. Se basa en c\u00f3mo la mayor\u00eda de los clientes de email de ordenador muestran los emails, por lo que est\u00e1 un poco desfasado. Pero si configuras correctamente las consultas de medios CSS, se renderizar\u00e1 f\u00e1cilmente en dispositivos m\u00f3viles.<\/p>\n\n\n\n
F\u00edjate tambi\u00e9n en que los valores de margen, relleno y espaciado del borde est\u00e1n fijados en cero. Esto se debe a que muchos motores de email a\u00f1aden sus propios m\u00e1rgenes a las tablas. Por lo tanto, podr\u00edas terminar con mucho espacio en blanco que no hab\u00edas previsto. Es m\u00e1s seguro que no a\u00f1adas ninguno. <\/p>\n\n\n\n
Hasta ahora he codificado una secci\u00f3n de mi plantilla. Esta se situar\u00e1 en la parte superior de mi p\u00e1gina, as\u00ed que la llamaremos encabezado. Para a\u00f1adir m\u00e1s secciones, solo tengo que repetir el c\u00f3digo de la tabla anidada. Al repetir la tabla dos veces m\u00e1s, ahora tengo una estructura de tres partes: encabezado, cuerpo principal y pie de p\u00e1gina. Una plantilla de email HTML sencilla.<\/p>\n\n\n\n
<body style=\"margin:0;padding:0;\">\n <table role=\"presentation\" style=\"width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff\"><\/table>\n <table align=\"center\" style=\"width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;\">\n <tr>\n <td align=\"center\" style=\"padding:0;\">Email Vendor Selection<\/td>\n <\/tr>\n <\/table>\n <table align=\"center\" style=\"width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;\">\n <tr>\n <td align=\"center\" style=\"padding:0;\">Logo<\/td>\n <\/tr>\n <tr>\n <td align=\"center\" style=\"padding:0;\">Header 1 Text<\/td>\n <\/tr>\n <tr>\n <td align=\"center\" style=\"padding:0;\">Header 2 Text<\/td>\n <\/tr>\n <tr>\n <td align=\"center\" style=\"padding:0;\">Image<\/td>\n <\/tr>\n <tr>\n <td align=\"center\" style=\"padding:0;\">CTA<\/td>\n <\/tr>\n <\/table>\n <table align=\"center\" style=\"width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;\">\n <tr>\n <td align=\"center\" style=\"padding:0;\">Footer<\/td>\n <\/tr>\n <\/table>\n<\/body>\n<\/code><\/pre>\n\n\n\nA continuaci\u00f3n, a\u00f1ad\u00ed m\u00e1s filas y celdas a la tabla central o cuerpo principal. Cre\u00e9 marcadores de posici\u00f3n para el texto y las im\u00e1genes. As\u00ed es como se ve mi email hasta ahora:<\/p>\n\n\n\n![\"esquema](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/esquema-basico-para-una-estructura-de-email-HTML.png\")
<\/figure>\n\n\n\nSencillo, s\u00ed. Pero ahora que tengo una estructura, puedo empezar a a\u00f1adir contenido. Puedo formatear cada fila y celda como elementos diferentes. Puedo establecer diferentes alturas y anchuras para darles forma. Puedo formatear los colores, los tipos de texto y los tama\u00f1os. A partir de este dise\u00f1o b\u00e1sico, ahora tengo un control total sobre mi dise\u00f1o.<\/p>\n\n\n\n
Es necesario mucho c\u00f3digo para convertir este sencillo esquema en un email completo. Esto es lo que hice a continuaci\u00f3n en la secci\u00f3n del encabezado:<\/p>\n\n\n\n
<body style=\"margin:0;padding:0;\">\n <table role=\"presentation\" style=\"width:100%;border-collapse:collapse;border:0;border-spacing:0;\"><\/table>\n <table align=\"center\" style=\"width:600px;background:#000000;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:center;\">\n <tr>\n <td align=\"center;\">\n <h1 style=\"font-size:18px;margin:10px 0 10px 0;font-family:Arial,sans-serif;color:#ffffff;\">Email Vendor Selection<\/h1>\n <\/td>\n <\/tr>\n <\/table>\n<\/code><\/pre>\n\n\n\n![\"formato](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/formato-de-la-seccion-de-encabezado-de-una-plantilla-de-email-HTML.png\")
<\/figure>\n\n\n\nHe utilizado la etiqueta <background> para hacer que la tabla sea negra. Como estoy utilizando tablas anidadas para estructurar mi email, tendr\u00e9 que hacer esto con todas las tablas. A continuaci\u00f3n, he cambiado el color del texto de la etiqueta <h1> a blanco. Establecer el color de cada elemento de texto por separado te ofrece m\u00e1s flexibilidad.<\/p>\n\n\n\n
F\u00edjate en que tambi\u00e9n he establecido m\u00e1rgenes para la etiqueta <h1> en lugar de para la tabla. Esto evita que los clientes de email apliquen m\u00e1rgenes predeterminados alrededor del texto. Si lo hacen, tu email se ver\u00e1 diferente en cada cliente. El tama\u00f1o de la fuente y los m\u00e1rgenes tambi\u00e9n controlan la altura de la fila.<\/p>\n\n\n\n
6: Pie de p\u00e1gina del email HTML<\/strong><\/h3>\n\n\n\nPodr\u00edas pensar que la secci\u00f3n inferior de tu email no es muy importante. \u00bfAlguien llega a leer hasta aqu\u00ed? Sin embargo, es importante prestar atenci\u00f3n al pie de p\u00e1gina de tu newsletter.<\/p>\n\n\n\n
Es donde incluyes la informaci\u00f3n de contacto y suscripci\u00f3n. Debe incluir detalles sobre c\u00f3mo se suscribi\u00f3 el destinatario a tu newsletter. Y c\u00f3mo puede darse de baja. Actualmente, esto es una norma legal en la mayor\u00eda de los pa\u00edses.<\/p>\n\n\n\n
Algunas cosas que debes incluir en el pie de p\u00e1gina de tu plantilla de email son:<\/p>\n\n\n\n
\n- Datos de la empresa.<\/li>\n\n\n\n
- Una direcci\u00f3n de email para enviar consultas.<\/li>\n\n\n\n
- Iconos de redes sociales. Ofrece a los suscriptores la oportunidad de seguirte en otros sitios.<\/li>\n\n\n\n
- Un recordatorio de c\u00f3mo se registr\u00f3 la persona para recibir tus emails.<\/li>\n\n\n\n
- Un enlace para darse de baja.<\/li>\n\n\n\n
- Detalles de los derechos de autor.<\/li>\n<\/ul>\n\n\n\n
En cuanto a la creaci\u00f3n del pie de p\u00e1gina, la forma m\u00e1s f\u00e1cil es volver a anidar tablas. Esta vez he a\u00f1adido una nueva tabla dentro de la celda \u00abpie de p\u00e1gina\u00bb existente. Esto me ha permitido crear dos nuevas celdas para hacer columnas. Al establecer el ancho de la celda en 50 %, se obtienen autom\u00e1ticamente dos columnas.<\/p>\n\n\n\n
<table align=\"center\" style=\"width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;\">\n <tr>\n <td align=\"center\" style=\"padding:0;\">\n\t <table role=\"presentation\" style=\"width:300px;border-collapse:collapse;border:0;border-spacing:0;\">\n\t<tr>\n\t\t<td style=\"padding:0;width:50%;\" align=\"left\">\n\t\t\t<p style=\"font-size:8px;margin:5px 0 0 0;font-family:Arial,sans-serif;\">© Email Vendor Selection 2026<\/p>\n\t\t<\/td>\n\t\t<td style=\"padding:0;width:50%;\" align=\"right\">\n\t\t\t<a href=\"url\" style=\"font-size:8px;font-family:Arial,sans-serif;\">Unsubscribe from this newsletter<\/a>\n\t\t<\/td>\n\t<\/tr>\n<\/table>\n\t <\/td>\n <\/tr>\n <\/table>\n<\/code><\/pre>\n\n\n\n![\"formato](\"https:\/\/www.emailvendorselection.com\/wp-content\/uploads\/formato-de-la-seccion-de-pie-de-pagina-de-una-plantilla-de-email-HTML.png\")
<\/figure>\n\n\n\nA continuaci\u00f3n, establezco las reglas de estilo como antes. La etiqueta <a href> crea un hiperv\u00ednculo para mi opci\u00f3n de cancelar la suscripci\u00f3n. Debes crear una p\u00e1gina dedicada a la cancelaci\u00f3n de la suscripci\u00f3n en tu sitio web. Pega la URL junto a la etiqueta href. De este modo, los usuarios podr\u00e1n utilizar este enlace para darse de baja de tus emails. Incluso puedes configurarlo para que la baja se realice con un solo clic.<\/p>\n\n\n\n
Encabezado para darse de baja de la lista<\/h4>\n\n\n\n
El pie de p\u00e1gina de tu email no es el \u00fanico lugar donde debes incluir una opci\u00f3n para darse de baja. Es recomendable incluir un enlace en el encabezado del cliente de email. Aqu\u00ed es donde se muestran el asunto y el remitente del email cuando alguien abre un email.<\/p>\n\n\n\n
Es posible que necesites ayuda para configurar un encabezado de cancelaci\u00f3n de suscripci\u00f3n a la lista. Si env\u00edas emails a trav\u00e9s de un servicio de email marketing, no deber\u00edas tener problemas. La mayor\u00eda tienen la opci\u00f3n de cancelar la suscripci\u00f3n a la lista. Algunos la tienen por defecto.<\/p>\n\n\n\n
Pero si env\u00edas emails a trav\u00e9s de clientes de email normales, tendr\u00e1s que ponerte en contacto con el administrador. Y tendr\u00e1n que habilitar la cancelaci\u00f3n de la suscripci\u00f3n a la lista en tus emails.<\/p>\n\n\n\n
Puedes utilizar una URL con una p\u00e1gina de destino como se ha explicado anteriormente. Esto se denomina encabezado HTTP list-unsubscribe. Otra opci\u00f3n es proporcionar a tu ESP una direcci\u00f3n de email. Esto se denomina encabezado mailto unsubscribe. Cuando alguien haga clic en el enlace, se enviar\u00e1 un email a la direcci\u00f3n que hayas proporcionado. A continuaci\u00f3n, tendr\u00e1s que darles de baja manualmente.<\/p>\n\n\n\n
7: Prueba el c\u00f3digo de tu plantilla de email<\/h3>\n\n\n\n
Dejo las pruebas para el final, pero t\u00fa no deber\u00edas hacerlo. Es importante que pruebes los emails HTML durante todo el proceso de desarrollo. Debes saber inmediatamente si algo no funciona correctamente. Si lo dejas para despu\u00e9s de terminar de programar todo, podr\u00edas tener mucho trabajo para arreglarlo.<\/p>\n\n\n\n
Una de las razones por las que utilizo CoffeeCup es que puedes previsualizar tu c\u00f3digo con un solo clic. Esto es ideal para comprobar que tu email HTML se ve como quieres mientras trabajas. Pero no te dice c\u00f3mo se ver\u00e1n tus emails en diferentes clientes de email o navegadores. Ni c\u00f3mo se renderizar\u00e1n en dispositivos m\u00f3viles.<\/p>\n\n\n\n
Para ello, necesitas una herramienta de prueba de emails espec\u00edfica. Algunas opciones populares son HTML Email Check<\/a>, Litmus o Email on Acid<\/a>.<\/p>\n\n\n\n<\/span>Usa el c\u00f3digo de tu plantilla de email HTML en tu ESP<\/span><\/h2>\n\n\n\nYa has probado tu c\u00f3digo y se ve muy bien en todas las plataformas. Ahora viene la parte importante: enviarlo.<\/p>\n\n\n\n
La forma de a\u00f1adir c\u00f3digo HTML a un email depende del ESP. En Gmail, hay un truco sencillo. No es necesario a\u00f1adir el c\u00f3digo HTML al email. En su lugar, guarda el c\u00f3digo como un archivo .html<\/strong>. A continuaci\u00f3n, \u00e1brelo con tu navegador. Deber\u00edas ver el dise\u00f1o completo de tu email. Copia y pega esto en la ventana de redacci\u00f3n de Gmail y pulsa enviar.<\/p>\n\n\n\nEn Outlook, tienes que cambiar el formato del mensaje a HTML. En Configuraci\u00f3n, habr\u00e1 una opci\u00f3n llamada \u00abRedactar mensaje en formato<\/strong>\u00bb. Haz clic en ella y selecciona HTML. Ahora puedes pegar tu c\u00f3digo en la ventana de redacci\u00f3n. Outlook lo convertir\u00e1 cuando lo env\u00ede.<\/p>\n\n\n\nLa mayor\u00eda de los proveedores de servicios de email<\/a> y herramientas de CRM con email marketing<\/a> te permiten importar c\u00f3digo HTML para crear una nueva plantilla. Y luego puedes utilizarla para enviar una campa\u00f1a. La forma de a\u00f1adir HTML ser\u00e1 diferente en cada plataforma.<\/p>\n\n\n\n<\/span>Conclusi\u00f3n: c\u00f3mo crear un email HTML<\/span><\/h2>\n\n\n\n\u00bfCodificar o no codificar? Esa es la gran pregunta cuando se crea un email HTML. En este art\u00edculo, he repasado ambas opciones. Pero, \u00bfcu\u00e1l es la adecuada para ti?<\/p>\n\n\n\n
No hay duda de que utilizar un editor de arrastrar y soltar sin c\u00f3digo es la forma m\u00e1s f\u00e1cil de crear un email HTML. Si no tienes conocimientos de programaci\u00f3n en HTML, esta es la opci\u00f3n ideal para ti. O incluso si sabes utilizar el HTML, un editor sin c\u00f3digo sigue siendo m\u00e1s r\u00e1pido. Puedes ahorrar mucho tiempo.<\/p>\n\n\n\n
Con una herramienta como Stripo, puedes crear plantillas de email HTML con un aspecto fant\u00e1stico en cuesti\u00f3n de minutos. Son responsive por defecto. Y puedes usarlas gratis. Si quieres encontrar alternativas a Stripo, lee nuestra rese\u00f1a de los 12 mejores editores de email HTML gratuitos<\/a>.<\/p>\n\n\n\nAs\u00ed que, \u00bfcaso cerrado? \u00bfNada de codificar un email HTML? No, no podemos descartar por completo utilizar HTML para los emails.<\/p>\n\n\n\n
Recordemos por qu\u00e9 queremos crear plantillas HTML en primer lugar. Para obtener dise\u00f1os \u00fanicos que reflejen nuestra marca. Utilizar c\u00f3digo desde cero te da mayor libertad y control sobre el dise\u00f1o. As\u00ed que, si tienes los conocimientos y quieres algo muy personalizado, programar sigue teniendo sentido. Tan solo recuerda que es un proceso t\u00e9cnico.<\/p>\n\n\n\n
\u00bfPuede usar HTML sin programar? \u00bfNo es una contradicci\u00f3n? No, si tienes un editor de arrastrar y soltar.<\/p>\n\n\n\n
Las plataformas web como Wix y Squarespace han utilizado estos editores desde hace a\u00f1os. Supusieron un aut\u00e9ntico punto de inflexi\u00f3n en el dise\u00f1o web. Con un editor de arrastrar y soltar, cualquiera puede crear sitios web atractivos y funcionales. No es necesario tener conocimientos de programaci\u00f3n.<\/p>\n\n\n\n
Lo mismo ha ocurrido con los emails. Si utilizas un servicio de email marketing, es probable que tenga un creador de emails de arrastrar y soltar. As\u00ed es como se acelera la creaci\u00f3n de emails. Al igual que sus primos, los editores web, son muy f\u00e1ciles de usar. Solo necesitas conocimientos b\u00e1sicos de inform\u00e1tica.<\/p>\n\n\n\n
Para este art\u00edculo, he decidido utilizar Stripo<\/a>. Es uno de los mejores creadores de plantillas de email. No solo puedes crear emails atractivos y responsive de forma r\u00e1pida y sencilla. Adem\u00e1s, es gratuito. \u00bfHe mencionado lo f\u00e1cil que es?<\/p>\n\n\n\n Stripo te permite guardar algunos elementos del dise\u00f1o para volver a utilizarlos en futuros proyectos. Si formas parte de un equipo, puedes a\u00f1adir comentarios para tus compa\u00f1eros y colaborar en tiempo real. Y obtienes asistencia por email gratuita. Veamos c\u00f3mo funciona. <\/p>\n\n\n\n Stripo<\/a> tiene m\u00e1s de 1600 plantillas de email HTML gratuitas<\/a>. \u00a1Es una barbaridad! Sea cual sea tu tipo de negocio, seguro que encuentras una plantilla de email HTML que se adapte a lo que haces.<\/p>\n\n\n\n Para ayudarte a encontrar la m\u00e1s adecuada, las plantillas est\u00e1n agrupadas por tipo, sector, temporada, funciones e integraciones. Las categor\u00edas de tipo y sector son las que me parecen m\u00e1s \u00fatiles. Aqu\u00ed puedes acceder a 406 plantillas de email promocionales diferentes. O a 275 plantillas para promocionar un evento. Tambi\u00e9n hay algunas categor\u00edas de nichos muy interesantes. \u00bfQuieres intrigar a tus contactos con un email HTML que les haga adivinar qu\u00e9 vendr\u00e1 despu\u00e9s? \u00a1Elige una de las 16 plantillas teaser!<\/p>\n\n\n\n Las plantillas de temporada tambi\u00e9n son \u00fatiles para vincular una promoci\u00f3n a la \u00e9poca del a\u00f1o. Stripo tiene m\u00e1s de 800 plantillas con una tem\u00e1tica festiva. La categor\u00eda de funciones incluye plantillas de email con gr\u00e1ficos en 3D, elementos AMP, animaciones CSS, carruseles y v\u00eddeos.<\/p>\n\n\n\n Y no tienes que elegir una plantilla de email HTML si no quieres. Si prefieres hacerlo por tu cuenta, solo tienes que seleccionar la opci\u00f3n \u00abEmpezar desde cero\u00bb. Eso es lo que hice para crear la plantilla de email que se muestra a continuaci\u00f3n. Y te explicar\u00e9 exactamente c\u00f3mo lo hice.<\/p>\n\n\n\n Explora m\u00e1s de 1600 plantillas de email HTML<\/strong><\/a><\/p>\n\n\n\n Tanto si eliges una plantilla HTML predise\u00f1ada como una en blanco, el proceso es el mismo. El editor de Stripo te permite personalizar los dise\u00f1os, el texto, las im\u00e1genes y las combinaciones de colores. Y puedes utilizar las mismas herramientas para crear dise\u00f1os desde cero.<\/p>\n\n\n\n As\u00ed es como se ve el editor con una plantilla en blanco. Podr\u00eda haber empezado a arrastrar bloques de contenido desde la izquierda directamente. Pero en lugar de ello, elimin\u00e9 los contenedores vac\u00edos y abr\u00ed Estructuras y m\u00f3dulos para encontrar algunas estructuras predefinidas y ahorrar tiempo. Decid\u00ed arrastrar tres bloques predefinidos y mi plantilla ya empez\u00f3 a tomar forma.<\/p>\n\n\n\n Ahora tengo una plantilla de email HTML con un logotipo, navegaci\u00f3n y dos tarjetas en el encabezado.<\/p>\n\n\n\n \u00bfY si quiero que los colores coincidan con los de mi marca? Para configurar una combinaci\u00f3n de colores para todo el email, ve a Stripes<\/em> y all\u00ed podr\u00e1s elegir los colores de fondo para las rayas y los bloques de contenido. Ya estoy contento con los colores, as\u00ed que los dej\u00e9 tal cual.<\/p>\n\n\n\n Decid\u00ed que tambi\u00e9n quer\u00eda a\u00f1adir una imagen principal a la tarjeta del encabezado de la derecha. As\u00ed que elimin\u00e9 el encabezado, el texto y el bot\u00f3n para dejar espacio para una imagen.<\/p>\n\n\n\n Stripo hace que a\u00f1adir im\u00e1genes a tu email HTML sea f\u00e1cil. Cuando a\u00f1ades un bloque de imagen, ver\u00e1s la \u00abGaler\u00eda de im\u00e1genes\u00bb a la derecha.<\/p>\n\n\n\n Puedes a\u00f1adir tus propias im\u00e1genes subi\u00e9ndolas desde tu ordenador. O pegar las URL de las im\u00e1genes para a\u00f1adir im\u00e1genes de la web.<\/p>\n\n\n\n La biblioteca de im\u00e1genes gratuitas de Stripo se llama Photostock. Es un recurso fant\u00e1stico. Hay m\u00e1s de 500 000 im\u00e1genes disponibles a trav\u00e9s de Pexels y Pixabay.<\/p>\n\n\n\n Stripo tambi\u00e9n tiene una funci\u00f3n integrada para generar im\u00e1genes. Puedes generar im\u00e1genes con DALL-E, Gemini y Stability en tres formatos de aspecto diferente. Y las enormes galer\u00edas de iconos y GIF integradas facilitan mucho la adici\u00f3n de cualquier tipo de elemento visual.<\/p>\n\n\n\n Tambi\u00e9n puedes encontrar gr\u00e1ficos de temporada para Navidad, Black Friday, Cyber Monday, Pascua, Halloween, A\u00f1o Nuevo y todas las fiestas internacionales importantes. Las decoraciones incluyen globos, marcos de banners, marcas de verificaci\u00f3n, descuentos, cargadores y regalos. Algunos de los gr\u00e1ficos est\u00e1n un poco desactualizados.<\/p>\n\n\n\n Todas las im\u00e1genes se guardan en tu propio administrador de archivos. Una vez a\u00f1adidas, ver\u00e1s todos tus archivos de imagen cada vez que hagas clic en el bot\u00f3n de exploraci\u00f3n del bloque de im\u00e1genes. Solo tienes que hacer clic en Insertar para a\u00f1adir una imagen a tu email.<\/p>\n\n\n\n De vuelta en el editor, haz clic en el bloque de imagen para editarlo. Yo quer\u00eda cambiar el tama\u00f1o de mi imagen. Y redondear las esquinas para que encajara en la tarjeta de la izquierda. Ambas opciones eran visibles y de f\u00e1cil acceso en el panel derecho de la interfaz.<\/p>\n\n\n\n Stripo tambi\u00e9n tiene un editor de im\u00e1genes integrado. Para editar tu imagen, haz clic en el icono del marco. Aqu\u00ed encontrar\u00e1s m\u00e1s opciones para cambiar el tama\u00f1o y el dise\u00f1o de tu imagen. Tambi\u00e9n puedes aplicar filtros y a\u00f1adir texto a tu imagen.<\/p>\n\n\n\n Empieza a usar Stripo gratis aqu\u00ed<\/strong><\/a><\/p>\n\n\n\n A continuaci\u00f3n, es el momento de a\u00f1adir nuestro texto. Los emails HTML pueden contener tanto texto como quieras. Todo depende de lo que quieras conseguir. Pero yo creo que es una buena idea llamar la atenci\u00f3n primero. C\u00e9ntrate en tener un dise\u00f1o llamativo y mensajes breves y claros. Siempre puedes a\u00f1adir m\u00e1s detalles m\u00e1s abajo en el email.<\/p>\n\n\n\n A\u00f1adir o editar texto en Stripo es muy f\u00e1cil. Solo tienes que hacer clic en un bloque de texto y escribir.<\/p>\n\n\n\n Yo empec\u00e9 por el encabezado. Al hacer clic en un bloque de texto, aparece el men\u00fa de formato a la derecha. Puedes cambiar el estilo del p\u00e1rrafo, el estilo del texto, la alineaci\u00f3n, el tama\u00f1o y el color. Tambi\u00e9n tiene opciones adicionales, como a\u00f1adir caracteres especiales y emoticonos, o hiperv\u00ednculos.<\/p>\n\n\n\n Stripo incluye fuentes seguras para el email e incluso algunas fuentes de Google, como Arvo, Lato, Lora, Merriweather, Open Sans y Roboto. Y puedes incluso a\u00f1adir fuentes personalizadas a Stripo.<\/p>\n\n\n\n Pasemos ahora a la \u00faltima pieza del dise\u00f1o, el bot\u00f3n CTA. Para personalizar tu bot\u00f3n CTA, haz clic en el bloque en la vista previa del editor. Ver\u00e1s todas las opciones de edici\u00f3n a la derecha. Aqu\u00ed es donde puedes a\u00f1adir el enlace, editar el texto del bot\u00f3n y dar formato al propio bot\u00f3n.<\/p>\n\n\n\n Despu\u00e9s de escribir mi CTA y a\u00f1adir mi enlace, quise cambiar el color del bot\u00f3n. Abr\u00ed \u00abEstilos\u00bb y copi\u00e9 y pegu\u00e9 el c\u00f3digo de color de un bloque m\u00e1s abajo para obtener un color m\u00e1s contrastado que se ajustara a mi paleta de colores.<\/p>\n\n\n\n Tu email HTML sin c\u00f3digo ya est\u00e1 listo. Ahora viene la parte importante. \u00a1Enviarlo!<\/p>\n\n\n\n Stripo no es un Proveedor de Servicios de Email (ESP) ni una plataforma de email marketing. Por lo tanto, no puedes enviarlo directamente desde Stripo. Pero es muy f\u00e1cil exportar tu dise\u00f1o a las mejores plataformas de email marketing<\/a>.<\/p>\n\n\n\n Cuando tu dise\u00f1o est\u00e9 listo, haz clic en Exportar. Aparecer\u00e1 un men\u00fa emergente con tres opciones:<\/p>\n\n\n\n Archivo:<\/strong> descarga tu plantilla de email en formatos AMPHTML, HTML, Image o PDF. El formato HTML funciona con la mayor\u00eda de los ESP y es gratuito. Comprueba si tu ESP tiene una opci\u00f3n de importaci\u00f3n de HTML. Si es as\u00ed, genial. Puedes subir el archivo ZIP y enviar campa\u00f1as con tu plantilla personalizada.<\/p>\n\n\n\n Aplicaci\u00f3n: <\/strong>incluye integraciones con Gmail, Make, n8n, Outlook, Webhook y Zapier.<\/p>\n\n\n\n Proveedor de email:<\/strong> es la opci\u00f3n m\u00e1s sencilla. Utiliza integraciones para exportar tu email HTML directamente a tu ESP. Est\u00e1 disponible para m\u00e1s de 75 plataformas, como ActiveCampaign<\/a>, Brevo<\/a>, Hubspot<\/a>, MailerLite<\/a>, Moosend<\/a> y GetResponse<\/a>.<\/p>\n\n\n\n Prueba Stripo gratis aqu\u00ed<\/strong><\/a><\/p>\n\n\n\n Pasemos al segundo m\u00e9todo para crear un email HTML: escribir el c\u00f3digo HTML. Para ello, necesitas saber HTML y CSS.<\/p>\n\n\n\n \u00bfPor qu\u00e9 hacerlo si los editores modernos sin c\u00f3digo son tan f\u00e1ciles de usar? Los programadores HTML argumentan que la codificaci\u00f3n les da m\u00e1s libertad y control. Los editores de arrastrar y soltar son f\u00e1ciles de usar. Pero siempre est\u00e1s utilizando plantillas y bloques de contenido predise\u00f1ados. S\u00ed, puedes personalizarlo todo. Pero hay l\u00edmites en lo que puedes hacer.<\/p>\n\n\n\n Si creas un email HTML utilizando tus conocimientos de programaci\u00f3n, eliminas esos l\u00edmites. Creas las plantillas, los bloques de contenido y los dise\u00f1os generales completamente desde cero.<\/p>\n\n\n\n Entonces, \u00bfc\u00f3mo se hace? No necesitas un software especial para codificar un email en HTML. Puedes utilizar un sencillo editor de texto plano como el Bloc de notas. Una vez que hayas escrito tu script, s\u00fabelo a tu plataforma de email.<\/p>\n\n\n\n Pero es una buena idea utilizar un editor HTML. Estos incluyen muchas funciones \u00fatiles, como resaltar los errores en el c\u00f3digo. Algunos incluso muestran el dise\u00f1o que el c\u00f3digo est\u00e1 creando mientras lo escribes. La mayor\u00eda de los programadores web profesionales utilizan editores HTML hoy en d\u00eda. Hay muchas opciones disponibles. Lee nuestra gu\u00eda de los mejores editores HTML<\/a> para que puedas elegir el que mejor se adapte a tus necesidades. <\/p>\n\n\n\n Para este proyecto, me decid\u00ed por CoffeeCup. Es un editor HTML WYSIWYG, que significa \u00ablo que ves es lo que obtienes\u00bb. Eso significa que ves el c\u00f3digo tal y como lo escribes. Tambi\u00e9n tiene funciones \u00fatiles, como plantillas de c\u00f3digo HTML que puedes utilizar. Es una buena opci\u00f3n intermedia. Te ofrece m\u00e1s control que un editor de arrastrar y soltar, pero te ayuda si no eres un experto en programaci\u00f3n.<\/p>\n\n\n\n La primera etapa en la codificaci\u00f3n de un email HTML es configurar un Doctype. Esto le indica al software que lee el c\u00f3digo que se trata de HTML. Y tambi\u00e9n qu\u00e9 versi\u00f3n de HTML est\u00e1s utilizando. Esto es importante para que los clientes de email sepan qu\u00e9 etiquetas esperar e interpretarlas correctamente.<\/p>\n\n\n\n Cada fragmento de c\u00f3digo HTML debe comenzar con la etiqueta <!DOCTYPE html>.<\/p>\n\n\n\n Durante mucho tiempo, la versi\u00f3n recomendada de HTML para codificar emails fue XHTML 1.0 Traditional. Se trata de un lenguaje h\u00edbrido que abarca tanto la sintaxis HTML como la XML. XML facilita que diferentes servicios interpreten los datos de forma coherente. Esto es importante si quieres que tus emails se vean bien en muchos clientes de email diferentes.<\/p>\n\n\n\n Hoy en d\u00eda, lo mejor es utilizar HTML 5 para codificar los emails. HTML 5 es la \u00faltima versi\u00f3n de HTML y tambi\u00e9n cubre la sintaxis XML. Esto te facilita la vida, ya que solo tienes que utilizar la etiqueta <!DOCTYPE html>. El software asume que te refieres a HTML 5 por defecto. Si deseas utilizar otra versi\u00f3n de HTML, debes especificarlo.<\/p>\n\n\n\n En CoffeeCup, puedes configurar el tipo de documento utilizando la opci\u00f3n Inicio r\u00e1pido. Esto te ofrece una selecci\u00f3n de versiones HTML en un men\u00fa desplegable. HTML 5 es la opci\u00f3n predeterminada.<\/p>\n\n\n\n La etiqueta <!DOCTYPE html> por s\u00ed sola no es suficiente para empezar a codificar. Tambi\u00e9n necesitas un par de etiquetas de apertura <html> y cierre <\/html>. Todo el c\u00f3digo que escribas para tu email debe estar dentro de estas etiquetas.<\/p>\n\n\n\n Tambi\u00e9n debes utilizar la etiqueta <html> para establecer el idioma de tu email. La etiqueta para el ingl\u00e9s, por ejemplo, es <html lang=\u201den\u201d>.<\/p>\n\n\n\n Una vez m\u00e1s, la opci\u00f3n Inicio r\u00e1pido de CoffeeCup te permite configurarlo autom\u00e1ticamente.<\/p>\n\n\n\n Hay mucho trabajo de preparaci\u00f3n cuando se codifica HTML. Dedicas tanto tiempo a configurar el documento como a dise\u00f1ar y a\u00f1adir contenido. Las etiquetas Doctype y <html> son solo el principio. Despu\u00e9s, es el momento de a\u00f1adir toda una secci\u00f3n de c\u00f3digo dedicada a la configuraci\u00f3n. La secci\u00f3n <head>.<\/p>\n\n\n\n No la confundas con el encabezado <\/em>de tu email HTML. El encabezado es la secci\u00f3n superior del contenido de tu email. La secci\u00f3n <head> del c\u00f3digo no se ve en el dise\u00f1o. Establece los metadatos para el resto del documento. Al igual que la etiqueta Doctype, los metadatos proporcionan informaci\u00f3n importante al cliente de email. Esto incluye m\u00e1s informaci\u00f3n sobre c\u00f3mo debe leerse el c\u00f3digo. Pero tambi\u00e9n es donde se establecen las reglas espec\u00edficas de estilo y formato del documento.<\/p>\n\n\n\n Todos los metadatos deben ir entre las etiquetas <head> y <\/head>. Aqu\u00ed tienes dos metaetiquetas comunes que puedes utilizar:<\/p>\n\n\n\n Tambi\u00e9n puedes darle un nombre a tu plantilla de email HTML. Escribe el nombre entre las etiquetas <title><\/title>. Si alguien abre tu email en un navegador web, el t\u00edtulo se mostrar\u00e1 en la pesta\u00f1a.<\/p>\n\n\n\n La secci\u00f3n <head> tambi\u00e9n es importante para personalizar el estilo de tu email HTML. Es donde se crean las reglas de estilo para todo el email.<\/p>\n\n\n\n El estilo para el HTML se trabaja utilizando un lenguaje de programaci\u00f3n diferente llamado CSS. El CSS se utiliza para establecer los colores, los tipos de fuente, los tama\u00f1os y los dise\u00f1os.<\/p>\n\n\n\n Las reglas de estilo CSS se pueden a\u00f1adir a cualquier parte del c\u00f3digo HTML. Pero hay una raz\u00f3n muy importante para a\u00f1adir el CSS a la secci\u00f3n <head> de un email HTML. Gmail ignora el CSS en el contenido del cuerpo. Es muy probable que algunos de tus suscriptores utilicen Gmail. Es el proveedor de servicios de email m\u00e1s popular del mundo. Si no creas reglas CSS en la secci\u00f3n <head>, tu email no se ver\u00e1 correctamente en su bandeja de entrada.<\/p>\n\n\n\n Todas las instrucciones de estilo van dentro de las etiquetas <style><\/style>. En el c\u00f3digo anterior, he establecido las siguientes reglas de estilo.<\/p>\n\n\n\n En primer lugar, he establecido el color predeterminado de la fuente (\u00abcolor\u00bb) en negro (#000000). Y el color de fondo en blanco (#FFFFFF). Tambi\u00e9n he creado un espacio para a\u00f1adir una imagen de fondo desde una URL web. La instrucci\u00f3n \u00abno repeat\u00bb significa que cualquier imagen de fondo solo aparecer\u00e1 una vez.<\/p>\n\n\n\n Debajo, las etiquetas \u00aba\u00bb establecen los colores del texto para los enlaces abiertos y sin abrir. A continuaci\u00f3n, la etiqueta <p1> establece el tipo de fuente predeterminado para los p\u00e1rrafos. Puedes establecer diferentes fuentes para diferentes secciones utilizando <p2>, <p3>. Y puedes hacer lo mismo con los encabezados utilizando <h1>, <h2>, <h3>, etc.<\/p>\n\n\n\n Debes pensar en c\u00f3mo se ver\u00e1 el dise\u00f1o de tu email en diferentes dispositivos y en diferentes clientes de email.<\/p>\n\n\n\n Los diferentes tama\u00f1os de pantalla y los diferentes programas cambian el aspecto del mismo email. El objetivo es que tu dise\u00f1o \u00fanico se vea lo mejor posible en todas las plataformas. Esto se denomina dise\u00f1o responsive.<\/p>\n\n\n\n HTML y CSS te ofrecen otras herramientas para hacerlo. Ya hemos visto la metaetiqueta viewport. Un buen comienzo es asegurarte de que el \u00e1rea visible de tu email cambia con los diferentes tama\u00f1os de pantalla. Pero hay otras diferencias que debes tener en cuenta. Como la resoluci\u00f3n de la pantalla y las dimensiones de la ventana del navegador, etc.<\/p>\n\n\n\n Las consultas de medios CSS indican a los diferentes clientes de email y dispositivos c\u00f3mo mostrar tu email. Aqu\u00ed tienes un ejemplo:<\/p>\n\n\n\n Este c\u00f3digo cambia el dise\u00f1o en funci\u00f3n del tama\u00f1o de la pantalla. La regla \u00abmax-width: 600px\u00bb se aplica a pantallas m\u00e1s peque\u00f1as de 600 p\u00edxeles de ancho. Por ejemplo, los dispositivos m\u00f3viles. En estas pantallas, mi email se mostrar\u00e1 con una sola columna y un tama\u00f1o de fuente predeterminado de 30 p\u00edxeles. En pantallas de hasta 900 p\u00edxeles, tendr\u00e1 dos columnas y un texto m\u00e1s grande.<\/p>\n\n\n\n Con esto ya hemos terminado el c\u00f3digo <head>. As\u00ed es como ha quedado el m\u00edo:<\/p>\n\n\n\n Debo destacar que esta es una versi\u00f3n simplificada. Una secci\u00f3n <head> real para un email HTML puede ser mucho m\u00e1s larga. Parece mucho solo para configurar tu plantilla de email HTML. Pero esta etapa es esencial. Garantiza que las diferentes plataformas muestren tu email de la forma que deseas. Y tambi\u00e9n te otorga un control total sobre el estilo.<\/p>\n\n\n\n Ahora vamos a crear el contenido del email HTML. Todo lo que quieras que sea visible en tu email debe ir entre las etiquetas <body><\/body>.<\/p>\n\n\n\n Si tienes experiencia en la programaci\u00f3n de sitios web, hay un par de cosas que sabr\u00e1s. A estas alturas, es posible que esperes haber establecido las reglas de estilo para toda la p\u00e1gina en la secci\u00f3n <head>. Pero no funciona as\u00ed cuando creas un email HTML. Y es que tambi\u00e9n personalizas el estilo en el cuerpo.<\/p>\n\n\n\n \u00bfPor qu\u00e9? Muchos ESP son muy malos leyendo las reglas de dise\u00f1o CSS. Para solucionar esto, es m\u00e1s seguro crear dise\u00f1os de email HTML utilizando tablas. Pero seguir\u00e1s teniendo problemas si el ESP elimina las reglas de estilo de tus tablas en la secci\u00f3n <head>. Por lo tanto, es m\u00e1s seguro aplicar el estilo a las tablas \u00aben l\u00ednea\u00bb a medida que las creas.<\/p>\n\n\n\n Aqu\u00ed tienes un ejemplo:<\/p>\n\n\n\n Esto crea una \u00abtabla anidada\u00bb. O una tabla dentro de otra tabla. La primera es la tabla principal. Se convierte en el fondo para el resto de mi dise\u00f1o. He fijado el ancho en 100 %, para que ocupe toda la pantalla en cualquier dispositivo. Y he establecido un color de fondo, porque esta tabla ahora se superpondr\u00e1 al fondo del cuerpo. El c\u00f3digo role=\u00bbpresentation\u00bb indica al cliente que la tabla es para su visualizaci\u00f3n. No son datos.<\/p>\n\n\n\n La segunda tabla es ahora mi \u00e1rea de contenido. La etiqueta <tr> crea una fila. La etiqueta <td> crea una celda. Por ahora, solo mostrar\u00e1 el texto \u00abEmail Vendor Selection\u00bb.<\/p>\n\n\n\n F\u00edjate en que esta vez he fijado el ancho de la tabla en 600 p\u00edxeles. Este sigue siendo el ancho est\u00e1ndar para los elementos de contenido en los emails HTML. Se basa en c\u00f3mo la mayor\u00eda de los clientes de email de ordenador muestran los emails, por lo que est\u00e1 un poco desfasado. Pero si configuras correctamente las consultas de medios CSS, se renderizar\u00e1 f\u00e1cilmente en dispositivos m\u00f3viles.<\/p>\n\n\n\n F\u00edjate tambi\u00e9n en que los valores de margen, relleno y espaciado del borde est\u00e1n fijados en cero. Esto se debe a que muchos motores de email a\u00f1aden sus propios m\u00e1rgenes a las tablas. Por lo tanto, podr\u00edas terminar con mucho espacio en blanco que no hab\u00edas previsto. Es m\u00e1s seguro que no a\u00f1adas ninguno. <\/p>\n\n\n\n Hasta ahora he codificado una secci\u00f3n de mi plantilla. Esta se situar\u00e1 en la parte superior de mi p\u00e1gina, as\u00ed que la llamaremos encabezado. Para a\u00f1adir m\u00e1s secciones, solo tengo que repetir el c\u00f3digo de la tabla anidada. Al repetir la tabla dos veces m\u00e1s, ahora tengo una estructura de tres partes: encabezado, cuerpo principal y pie de p\u00e1gina. Una plantilla de email HTML sencilla.<\/p>\n\n\n\n A continuaci\u00f3n, a\u00f1ad\u00ed m\u00e1s filas y celdas a la tabla central o cuerpo principal. Cre\u00e9 marcadores de posici\u00f3n para el texto y las im\u00e1genes. As\u00ed es como se ve mi email hasta ahora:<\/p>\n\n\n\n Sencillo, s\u00ed. Pero ahora que tengo una estructura, puedo empezar a a\u00f1adir contenido. Puedo formatear cada fila y celda como elementos diferentes. Puedo establecer diferentes alturas y anchuras para darles forma. Puedo formatear los colores, los tipos de texto y los tama\u00f1os. A partir de este dise\u00f1o b\u00e1sico, ahora tengo un control total sobre mi dise\u00f1o.<\/p>\n\n\n\n Es necesario mucho c\u00f3digo para convertir este sencillo esquema en un email completo. Esto es lo que hice a continuaci\u00f3n en la secci\u00f3n del encabezado:<\/p>\n\n\n\n He utilizado la etiqueta <background> para hacer que la tabla sea negra. Como estoy utilizando tablas anidadas para estructurar mi email, tendr\u00e9 que hacer esto con todas las tablas. A continuaci\u00f3n, he cambiado el color del texto de la etiqueta <h1> a blanco. Establecer el color de cada elemento de texto por separado te ofrece m\u00e1s flexibilidad.<\/p>\n\n\n\n F\u00edjate en que tambi\u00e9n he establecido m\u00e1rgenes para la etiqueta <h1> en lugar de para la tabla. Esto evita que los clientes de email apliquen m\u00e1rgenes predeterminados alrededor del texto. Si lo hacen, tu email se ver\u00e1 diferente en cada cliente. El tama\u00f1o de la fuente y los m\u00e1rgenes tambi\u00e9n controlan la altura de la fila.<\/p>\n\n\n\n Podr\u00edas pensar que la secci\u00f3n inferior de tu email no es muy importante. \u00bfAlguien llega a leer hasta aqu\u00ed? Sin embargo, es importante prestar atenci\u00f3n al pie de p\u00e1gina de tu newsletter.<\/p>\n\n\n\n Es donde incluyes la informaci\u00f3n de contacto y suscripci\u00f3n. Debe incluir detalles sobre c\u00f3mo se suscribi\u00f3 el destinatario a tu newsletter. Y c\u00f3mo puede darse de baja. Actualmente, esto es una norma legal en la mayor\u00eda de los pa\u00edses.<\/p>\n\n\n\n Algunas cosas que debes incluir en el pie de p\u00e1gina de tu plantilla de email son:<\/p>\n\n\n\n En cuanto a la creaci\u00f3n del pie de p\u00e1gina, la forma m\u00e1s f\u00e1cil es volver a anidar tablas. Esta vez he a\u00f1adido una nueva tabla dentro de la celda \u00abpie de p\u00e1gina\u00bb existente. Esto me ha permitido crear dos nuevas celdas para hacer columnas. Al establecer el ancho de la celda en 50 %, se obtienen autom\u00e1ticamente dos columnas.<\/p>\n\n\n\n A continuaci\u00f3n, establezco las reglas de estilo como antes. La etiqueta <a href> crea un hiperv\u00ednculo para mi opci\u00f3n de cancelar la suscripci\u00f3n. Debes crear una p\u00e1gina dedicada a la cancelaci\u00f3n de la suscripci\u00f3n en tu sitio web. Pega la URL junto a la etiqueta href. De este modo, los usuarios podr\u00e1n utilizar este enlace para darse de baja de tus emails. Incluso puedes configurarlo para que la baja se realice con un solo clic.<\/p>\n\n\n\n El pie de p\u00e1gina de tu email no es el \u00fanico lugar donde debes incluir una opci\u00f3n para darse de baja. Es recomendable incluir un enlace en el encabezado del cliente de email. Aqu\u00ed es donde se muestran el asunto y el remitente del email cuando alguien abre un email.<\/p>\n\n\n\n Es posible que necesites ayuda para configurar un encabezado de cancelaci\u00f3n de suscripci\u00f3n a la lista. Si env\u00edas emails a trav\u00e9s de un servicio de email marketing, no deber\u00edas tener problemas. La mayor\u00eda tienen la opci\u00f3n de cancelar la suscripci\u00f3n a la lista. Algunos la tienen por defecto.<\/p>\n\n\n\n Pero si env\u00edas emails a trav\u00e9s de clientes de email normales, tendr\u00e1s que ponerte en contacto con el administrador. Y tendr\u00e1n que habilitar la cancelaci\u00f3n de la suscripci\u00f3n a la lista en tus emails.<\/p>\n\n\n\n Puedes utilizar una URL con una p\u00e1gina de destino como se ha explicado anteriormente. Esto se denomina encabezado HTTP list-unsubscribe. Otra opci\u00f3n es proporcionar a tu ESP una direcci\u00f3n de email. Esto se denomina encabezado mailto unsubscribe. Cuando alguien haga clic en el enlace, se enviar\u00e1 un email a la direcci\u00f3n que hayas proporcionado. A continuaci\u00f3n, tendr\u00e1s que darles de baja manualmente.<\/p>\n\n\n\n Dejo las pruebas para el final, pero t\u00fa no deber\u00edas hacerlo. Es importante que pruebes los emails HTML durante todo el proceso de desarrollo. Debes saber inmediatamente si algo no funciona correctamente. Si lo dejas para despu\u00e9s de terminar de programar todo, podr\u00edas tener mucho trabajo para arreglarlo.<\/p>\n\n\n\n Una de las razones por las que utilizo CoffeeCup es que puedes previsualizar tu c\u00f3digo con un solo clic. Esto es ideal para comprobar que tu email HTML se ve como quieres mientras trabajas. Pero no te dice c\u00f3mo se ver\u00e1n tus emails en diferentes clientes de email o navegadores. Ni c\u00f3mo se renderizar\u00e1n en dispositivos m\u00f3viles.<\/p>\n\n\n\n Para ello, necesitas una herramienta de prueba de emails espec\u00edfica. Algunas opciones populares son HTML Email Check<\/a>, Litmus o Email on Acid<\/a>.<\/p>\n\n\n\n Ya has probado tu c\u00f3digo y se ve muy bien en todas las plataformas. Ahora viene la parte importante: enviarlo.<\/p>\n\n\n\n La forma de a\u00f1adir c\u00f3digo HTML a un email depende del ESP. En Gmail, hay un truco sencillo. No es necesario a\u00f1adir el c\u00f3digo HTML al email. En su lugar, guarda el c\u00f3digo como un archivo .html<\/strong>. A continuaci\u00f3n, \u00e1brelo con tu navegador. Deber\u00edas ver el dise\u00f1o completo de tu email. Copia y pega esto en la ventana de redacci\u00f3n de Gmail y pulsa enviar.<\/p>\n\n\n\n En Outlook, tienes que cambiar el formato del mensaje a HTML. En Configuraci\u00f3n, habr\u00e1 una opci\u00f3n llamada \u00abRedactar mensaje en formato<\/strong>\u00bb. Haz clic en ella y selecciona HTML. Ahora puedes pegar tu c\u00f3digo en la ventana de redacci\u00f3n. Outlook lo convertir\u00e1 cuando lo env\u00ede.<\/p>\n\n\n\n La mayor\u00eda de los proveedores de servicios de email<\/a> y herramientas de CRM con email marketing<\/a> te permiten importar c\u00f3digo HTML para crear una nueva plantilla. Y luego puedes utilizarla para enviar una campa\u00f1a. La forma de a\u00f1adir HTML ser\u00e1 diferente en cada plataforma.<\/p>\n\n\n\n \u00bfCodificar o no codificar? Esa es la gran pregunta cuando se crea un email HTML. En este art\u00edculo, he repasado ambas opciones. Pero, \u00bfcu\u00e1l es la adecuada para ti?<\/p>\n\n\n\n No hay duda de que utilizar un editor de arrastrar y soltar sin c\u00f3digo es la forma m\u00e1s f\u00e1cil de crear un email HTML. Si no tienes conocimientos de programaci\u00f3n en HTML, esta es la opci\u00f3n ideal para ti. O incluso si sabes utilizar el HTML, un editor sin c\u00f3digo sigue siendo m\u00e1s r\u00e1pido. Puedes ahorrar mucho tiempo.<\/p>\n\n\n\n Con una herramienta como Stripo, puedes crear plantillas de email HTML con un aspecto fant\u00e1stico en cuesti\u00f3n de minutos. Son responsive por defecto. Y puedes usarlas gratis. Si quieres encontrar alternativas a Stripo, lee nuestra rese\u00f1a de los 12 mejores editores de email HTML gratuitos<\/a>.<\/p>\n\n\n\n As\u00ed que, \u00bfcaso cerrado? \u00bfNada de codificar un email HTML? No, no podemos descartar por completo utilizar HTML para los emails.<\/p>\n\n\n\n Recordemos por qu\u00e9 queremos crear plantillas HTML en primer lugar. Para obtener dise\u00f1os \u00fanicos que reflejen nuestra marca. Utilizar c\u00f3digo desde cero te da mayor libertad y control sobre el dise\u00f1o. As\u00ed que, si tienes los conocimientos y quieres algo muy personalizado, programar sigue teniendo sentido. Tan solo recuerda que es un proceso t\u00e9cnico.<\/p>\n\n\n\n<\/figure>\n\n\n\n1. Selecciona una plantilla o empieza desde cero<\/h3>\n\n\n\n
<\/figure>\n\n\n\n<\/figure>\n\n\n\n2. Personaliza tu email<\/h3>\n\n\n\n
Crear el dise\u00f1o<\/h4>\n\n\n\n
<\/figure>\n\n\n\n<\/figure>\n\n\n\nA\u00f1adir im\u00e1genes<\/h4>\n\n\n\n
<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\nA\u00f1adir texto<\/h4>\n\n\n\n
<\/figure>\n\n\n\nIncluir tu CTA<\/h4>\n\n\n\n
<\/figure>\n\n\n\n3. Exporta tu email HTML<\/h3>\n\n\n\n
<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/span>C\u00f3mo codificar un email HTML<\/span><\/h2>\n\n\n\n
1: Doctype<\/h3>\n\n\n\n
<\/figure>\n\n\n\n2: C\u00f3mo preparar tu plantilla HTML <Head><\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n <meta charset=\"utf-8\">\n<title>Plantilla de email de ejemplo<\/title>\n<\/code><\/pre>\n\n\n\n\n
3: C\u00f3mo personalizar el estilo de tu email HTML<\/h3>\n\n\n\n
<style>\n body {\n color:#000000;\n background-color:#FFFFFF;\n background-image:url('Background Image');\n background-repeat:no-repeat;\n }\n a { color:#0000FF; }\n a:visited { color:#800080; }\n a:hover { color:#008000; }\n a:active { color:#FF0000; }\n p1 {font-family: Arial, sans-serif;}\n <\/style>\n<\/code><\/pre>\n\n\n\nConsultas de medios: codificaci\u00f3n de una plantilla de email responsive<\/h4>\n\n\n\n
@media screen and (max-width: 600px) {\n .column {\n width: 100%;\n }\n div.example {\n font-size: 30px;\n }\n }\n @media screen and (max-width: 900px) {\n .column {\n width: 50%;\n }\n {\n div.example {\n font-size: 80px;\n }\n }\n <\/style>\n<\/code><\/pre>\n\n\n\n4: Ejemplo de c\u00f3digo <head> final del email<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n <meta charset=\"utf-8\">\n <title>Plantilla de email de ejemplo<\/title>\n <style>\n body {\n color:#000000;\n background-color:#FFFFFF;\n background-image:url('Background Image');\n background-repeat:no-repeat;\n }\n a { color:#0000FF; }\n a:visited { color:#800080; }\n a:hover { color:#008000; }\n a:active { color:#FF0000; }\n p1 {font-family: Arial, sans-serif;}\n @media screen and (max-width: 600px) {\n .column {\n width: 100%;\n }\n div.example {\n font-size: 30px;\n }\n }\n @media screen and (max-width: 900px) {\n .column {\n width: 50%;\n }\n {\n div.example {\n font-size: 80px;\n }\n }\n <\/style><!--[if IE]>\n <script src=\"http:\/\/html5shim.googlecode.com\/svn\/trunk\/html5.js\"><\/script>\n <![endif]-->\n<\/head>\n<\/code><\/pre>\n\n\n\n5: C\u00f3mo crear el <body> de tu email<\/h3>\n\n\n\n
<body style=\"margin:0;padding:0;\">\n <table role=\"presentation\" style=\"width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff\"><\/table>\n <table align=\"center\" style=\"width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;\">\n <tr>\n <td align=\"center\" style=\"padding:0;\">Email Vendor Selection<\/td>\n <\/tr>\n <\/table>\n<\/body>\n<\/code><\/pre>\n\n\n\n<body style=\"margin:0;padding:0;\">\n <table role=\"presentation\" style=\"width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff\"><\/table>\n <table align=\"center\" style=\"width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;\">\n <tr>\n <td align=\"center\" style=\"padding:0;\">Email Vendor Selection<\/td>\n <\/tr>\n <\/table>\n <table align=\"center\" style=\"width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;\">\n <tr>\n <td align=\"center\" style=\"padding:0;\">Logo<\/td>\n <\/tr>\n <tr>\n <td align=\"center\" style=\"padding:0;\">Header 1 Text<\/td>\n <\/tr>\n <tr>\n <td align=\"center\" style=\"padding:0;\">Header 2 Text<\/td>\n <\/tr>\n <tr>\n <td align=\"center\" style=\"padding:0;\">Image<\/td>\n <\/tr>\n <tr>\n <td align=\"center\" style=\"padding:0;\">CTA<\/td>\n <\/tr>\n <\/table>\n <table align=\"center\" style=\"width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;\">\n <tr>\n <td align=\"center\" style=\"padding:0;\">Footer<\/td>\n <\/tr>\n <\/table>\n<\/body>\n<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\n<body style=\"margin:0;padding:0;\">\n <table role=\"presentation\" style=\"width:100%;border-collapse:collapse;border:0;border-spacing:0;\"><\/table>\n <table align=\"center\" style=\"width:600px;background:#000000;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:center;\">\n <tr>\n <td align=\"center;\">\n <h1 style=\"font-size:18px;margin:10px 0 10px 0;font-family:Arial,sans-serif;color:#ffffff;\">Email Vendor Selection<\/h1>\n <\/td>\n <\/tr>\n <\/table>\n<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\n6: Pie de p\u00e1gina del email HTML<\/strong><\/h3>\n\n\n\n
\n
<table align=\"center\" style=\"width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;\">\n <tr>\n <td align=\"center\" style=\"padding:0;\">\n\t <table role=\"presentation\" style=\"width:300px;border-collapse:collapse;border:0;border-spacing:0;\">\n\t<tr>\n\t\t<td style=\"padding:0;width:50%;\" align=\"left\">\n\t\t\t<p style=\"font-size:8px;margin:5px 0 0 0;font-family:Arial,sans-serif;\">© Email Vendor Selection 2026<\/p>\n\t\t<\/td>\n\t\t<td style=\"padding:0;width:50%;\" align=\"right\">\n\t\t\t<a href=\"url\" style=\"font-size:8px;font-family:Arial,sans-serif;\">Unsubscribe from this newsletter<\/a>\n\t\t<\/td>\n\t<\/tr>\n<\/table>\n\t <\/td>\n <\/tr>\n <\/table>\n<\/code><\/pre>\n\n\n\n<\/figure>\n\n\n\nEncabezado para darse de baja de la lista<\/h4>\n\n\n\n
7: Prueba el c\u00f3digo de tu plantilla de email<\/h3>\n\n\n\n
<\/span>Usa el c\u00f3digo de tu plantilla de email HTML en tu ESP<\/span><\/h2>\n\n\n\n
<\/span>Conclusi\u00f3n: c\u00f3mo crear un email HTML<\/span><\/h2>\n\n\n\n