{"id":53729,"date":"2022-06-30T10:57:04","date_gmt":"2022-06-30T08:57:04","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=53729&#038;preview=true&#038;preview_id=53729"},"modified":"2023-08-21T11:17:25","modified_gmt":"2023-08-21T09:17:25","slug":"html-email","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/html-email\/","title":{"rendered":"Gu\u00eda para principiantes sobre c\u00f3mo crear y enviar un correo electr\u00f3nico HTML"},"content":{"rendered":"<p>Prueba r\u00e1pida: \u00bfC\u00f3mo se llama el lenguaje que utilizan los desarrolladores web para crear las estructuras de los sitios que visitas cada d\u00eda? Dejando a un lado las respuestas inteligentes y demasiado ingeniosas, <a href=\"https:\/\/kinsta.com\/es\/blog\/aprender-html\/\">el Lenguaje de Marcado de Hipertexto (HTML)<\/a> es un est\u00e1ndar imperecedero, presente en el nacimiento de la web. Sin embargo, no s\u00f3lo se aplica a las p\u00e1ginas web. Tu bandeja de entrada es un terreno f\u00e9rtil para el dise\u00f1o de correos electr\u00f3nicos en HTML.<\/p>\n<p>Esto tiene sentido si consideras la cantidad de im\u00e1genes, GIFs, v\u00eddeos y contenido de marca que ves casi cada hora en tus correos electr\u00f3nicos. Aunque podr\u00edas ofrecer un correo electr\u00f3nico en texto plano, una versi\u00f3n en HTML te ofrecer\u00e1 m\u00e1s ventajas y te dar\u00e1 m\u00e1s oportunidades de <a href=\"https:\/\/kinsta.com\/es\/blog\/posicionamiento-estrategia\/\">hacer marca y comercializarte a ti y a tu empresa<\/a>.<\/p>\n<p>En este post, vamos a hablar de c\u00f3mo crear y enviar correos electr\u00f3nicos en HTML, y de por qu\u00e9 deber\u00edas hacerlo. En algunos puntos, nos adentraremos en c\u00f3mo codificar un correo electr\u00f3nico, pero no necesitar\u00e1s estos conocimientos para crear el tuyo propio.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>\u00bfQu\u00e9 es un correo electr\u00f3nico HTML?<\/h2>\n<p>Los correos electr\u00f3nicos que <a href=\"https:\/\/kinsta.com\/es\/blog\/diseno-de-correos-electronicos\/\" rel=\"noopener\">llegan a tu bandeja de<\/a> entrada pueden ser de dos tipos:<\/p>\n<ul>\n<li><strong>Texto simple:<\/strong> Es casi un telegrama para la era moderna. No hay estilo ni formato m\u00ednimo, y el destinatario ver\u00e1 las palabras excluyendo todo lo dem\u00e1s.<\/li>\n<li><strong>HTML:<\/strong> Es un petardo comparado con el texto plano, y tiene mucho dise\u00f1o. Utiliza el c\u00f3digo HTML para presentar un correo electr\u00f3nico, aunque, como veremos, no siempre va a utilizar los est\u00e1ndares web modernos.<\/li>\n<\/ul>\n<p>Por ejemplo, sabr\u00e1s si recibes un correo electr\u00f3nico de texto plano, ya que tiene el mismo aspecto que un documento de texto plano. Por el contrario, un correo electr\u00f3nico HTML tiene un aspecto casi id\u00e9ntico al de una p\u00e1gina web moderna (m\u00e1s o menos en cuanto a estilo y formato):<\/p>\n<figure id=\"attachment_123704\" aria-describedby=\"caption-attachment-123704\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123704\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/html-email-example.png\" alt=\"A HTML email displayed within the browser, showing a title containing a cookie emoji, and body content showing images, emojis, and typography formatting.\" width=\"1000\" height=\"756\"><figcaption id=\"caption-attachment-123704\" class=\"wp-caption-text\">Un correo electr\u00f3nico HTML dentro del navegador.<\/figcaption><\/figure>\n<p>En la mayor\u00eda de los casos, un correo electr\u00f3nico HTML no se esforzar\u00e1 por ofrecer lo \u00faltimo en interactividad o compromiso din\u00e1mico. De nuevo, es algo que trataremos m\u00e1s adelante, pero el correo electr\u00f3nico en HTML va por <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-html\/\">detr\u00e1s de la web<\/a>, en cuanto a est\u00e1ndares. Como tal, el HTML es m\u00e1s una herramienta impulsada por el dise\u00f1o que una que ayude a proporcionar una experiencia. Sin embargo, esto plantea una pregunta: \u00bfPor qu\u00e9 querr\u00edas utilizar el correo electr\u00f3nico HTML si la \u00fanica raz\u00f3n es visual? A continuaci\u00f3n trataremos de responder a esta pregunta.<\/p>\n\n<h2>\u00bfPor qu\u00e9 utilizar el correo electr\u00f3nico en HTML en lugar del formato de texto plano?<\/h2>\n<p>Es raro que veas un correo electr\u00f3nico en texto plano de una empresa, por varias razones. Sin embargo, el texto plano no es <em>malo en s\u00ed mismo<\/em>, sino que no ofrece ninguna de las ventajas del formato de correo electr\u00f3nico HTML. Por ejemplo:<\/p>\n<ul>\n<li>Puedes utilizar los elementos visuales inherentes para ayudar a centrar la atenci\u00f3n en las distintas partes del <a href=\"https:\/\/kinsta.com\/es\/blog\/diseno-de-correos-electronicos\/\">contenido de tu correo electr\u00f3nico<\/a>.<\/li>\n<li>Por extensi\u00f3n, un correo electr\u00f3nico HTML es un formato rico para presentar tu contenido. Esto significa que puedes aprovechar los elementos que los usuarios esperan para atraerlos, como im\u00e1genes, <a href=\"https:\/\/kinsta.com\/es\/blog\/hosting-video\/\" rel=\"noopener\">v\u00eddeos<\/a> y otros.<\/li>\n<li>Combinados, estos dos aspectos pueden ofrecerte una magn\u00edfica oportunidad para marcar tu contenido, al igual que lo har\u00edas con tu sitio web principal.<\/li>\n<\/ul>\n<p>Sin embargo, decidirse por un correo electr\u00f3nico en HTML no es la tormenta perfecta que se podr\u00eda pensar. Tambi\u00e9n hay que tener en cuenta algunos inconvenientes. En primer lugar, tienes que tener en cuenta la experiencia del usuario, igual que cuando dise\u00f1as un sitio web. Esto no s\u00f3lo puede <a href=\"https:\/\/kinsta.com\/es\/cuota-mercado-mundial-navegadores\/\" rel=\"noopener\">incluir un navegador<\/a>: muchos usuarios tambi\u00e9n prefieren leer los correos electr\u00f3nicos en un cliente dedicado.<\/p>\n<p>Adem\u00e1s, tambi\u00e9n tienes que tener en cuenta algunas de las <a href=\"https:\/\/kinsta.com\/es\/blog\/seguridad-en-el-trabajo-desde-casa\/\">cuestiones de privacidad y seguridad<\/a> que dominan el desarrollo web. Esto es especialmente cierto si quieres incluir JavaScript, si utilizas fuentes de terceros y otros aspectos.<\/p>\n<p>Por ello, tienes que librar batallas de accesibilidad y est\u00e1ndares casi en m\u00e1s frentes que la web. Es dif\u00edcil crear un correo electr\u00f3nico HTML que funcione en todos los navegadores y clientes. Por supuesto, es posible hacerlo, y cubriremos el aspecto t\u00e9cnico en una secci\u00f3n futura. Por ahora, querr\u00e1s tener decididos los distintos elementos de tu correo electr\u00f3nico, y luego tratar de ponerlos en pr\u00e1ctica.<\/p>\n<h2>Los elementos esenciales (y las pr\u00e1cticas habituales) de un correo electr\u00f3nico HTML<\/h2>\n<p>Este art\u00edculo <a href=\"https:\/\/kinsta.com\/es\/blog\/cursos-diseno-web\/\" rel=\"noopener\">har\u00e1 referencia al dise\u00f1o web<\/a> en varios lugares, debido a las similitudes inherentes. Un aspecto que ofrece un flujo de trabajo similar es \u00bfc\u00f3mo decidir las facetas y secciones de tu correo electr\u00f3nico HTML?<\/p>\n<p>Al igual que en la web, hay algunos elementos que son pr\u00e1cticamente innegociables para tus correos electr\u00f3nicos. Por supuesto, necesitas contenido. Aqu\u00ed hay algunos elementos t\u00edpicos a tener en cuenta:<\/p>\n<ul>\n<li>Tu cabecera es importante porque es la primera impresi\u00f3n que tu correo electr\u00f3nico ofrecer\u00e1 a los lectores.<\/li>\n<li>Al igual que el dise\u00f1o web, pensar en qu\u00e9 elementos se muestran por encima del pliegue tambi\u00e9n ser\u00e1 beneficioso.<\/li>\n<li>El cuerpo del contenido es vital porque, al fin y al cabo, esta es la raz\u00f3n por la que el lector <a href=\"https:\/\/kinsta.com\/es\/blog\/automatizacion-marketing-correo-electronico\/\">se suscribir\u00e1 a tus correos electr\u00f3nicos<\/a>.<\/li>\n<li>El pie de p\u00e1gina de tu correo electr\u00f3nico HTML tambi\u00e9n ofrece mucho valor para ti y para tus suscriptores, y puede ser un elemento subestimado de tus correos electr\u00f3nicos.<\/li>\n<\/ul>\n<p>Aqu\u00ed hay algunos puntos que podemos tocar m\u00e1s a fondo. En primer lugar, considera lo mucho que los emojis impregnan nuestro uso cotidiano de la web. Aunque no son un elemento HTML estricto, la aplicaci\u00f3n de emojis con buen gusto puede hacer maravillas en tu contenido, especialmente en tu cabecera:<\/p>\n<figure id=\"attachment_123702\" aria-describedby=\"caption-attachment-123702\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123702\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/emoji-usage.png\" alt=\"A section of an email with a black background reading, \u201cHow quick videos help us share thoughts\u201d and a lightbulb emoji.\" width=\"1000\" height=\"207\"><figcaption id=\"caption-attachment-123702\" class=\"wp-caption-text\">Una selecci\u00f3n de emojis utilizados en la cabecera del t\u00edtulo.<\/figcaption><\/figure>\n<p>El pie de p\u00e1gina es tambi\u00e9n el mejor lugar para la informaci\u00f3n legal esencial. Dos de los mayores problemas relacionados con los correos electr\u00f3nicos son el spam y si un correo electr\u00f3nico llega a las bandejas de entrada correctas (si es que llega). Esto es algo que vamos a ver en una secci\u00f3n posterior, ya que es una parte vital de la creaci\u00f3n y el env\u00edo de correos electr\u00f3nicos HTML.<\/p>\n<h3>Considerar algunas pr\u00e1cticas t\u00edpicas para tus correos electr\u00f3nicos HTML<\/h3>\n<p>Hay mucho cruce con el <a href=\"https:\/\/kinsta.com\/es\/blog\/email-marketing-mejores-practicas\/\" rel=\"noopener\">marketing por correo<\/a> electr\u00f3nico en lo que respecta a algunas de las pr\u00e1cticas m\u00e1s \u00f3ptimas que utilizar\u00e1s en tus dise\u00f1os y composiciones. Hay una que querr\u00e1s incluir casi como elemento no negociable: Un doble opt-in.<\/p>\n<p>Uno de los mayores <a href=\"https:\/\/kinsta.com\/es\/blog\/estadisticas-marketing-correo-electronico\/\" rel=\"noopener\">trucos de marketing por correo electr\u00f3nico<\/a> es que quieres llevar tus correos electr\u00f3nicos al lector. En otras palabras, proporcionar un <a href=\"https:\/\/kinsta.com\/es\/blog\/mailchimp-para-wordpress\/\">formulario de opt-in<\/a> en un sitio web, ya que esto tiene una <a href=\"https:\/\/kinsta.com\/es\/blog\/consejos-optimizacion-tasa-conversion\/\" rel=\"noopener\">gran tasa de conversi\u00f3n<\/a>. Sin embargo, no debe ser el \u00fanico momento en el que pidas confirmaci\u00f3n. Es una pr\u00e1ctica excelente enviar tambi\u00e9n un segundo opt-in en forma de correo electr\u00f3nico:<\/p>\n<figure id=\"attachment_123710\" aria-describedby=\"caption-attachment-123710\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123710\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/opt-in.png\" alt=\"A portion of a double opt-in message from a HTML email, telling the user why they are receiving an email, and asking them to verify using a green button reading, \u201cVerify Email.\u201d\" width=\"1000\" height=\"585\"><figcaption id=\"caption-attachment-123710\" class=\"wp-caption-text\">Un correo electr\u00f3nico de doble opt-in.<\/figcaption><\/figure>\n<p>Hay varias razones para ello:<\/p>\n<ul>\n<li>En primer lugar, genera confianza con tu lector, porque obtienes un permiso expreso para enviarle correos electr\u00f3nicos.<\/li>\n<li>Por extensi\u00f3n, tambi\u00e9n tienes el consentimiento expl\u00edcito en el caso de una remisi\u00f3n de spam (m\u00e1s adelante se habla de esto).<\/li>\n<li>Ayudas a detener el <a href=\"https:\/\/kinsta.com\/es\/blog\/administrador-entregabilidad-correo-electronico\/\">abuso del correo electr\u00f3nico y del<\/a> spam para otros, porque tienen que optar espec\u00edficamente por una suscripci\u00f3n a tus correos electr\u00f3nicos.<\/li>\n<\/ul>\n<p>De hecho, como un doble opt-in implica que env\u00edes un correo electr\u00f3nico a la direcci\u00f3n en cuesti\u00f3n, es la mejor manera de <a href=\"https:\/\/kinsta.com\/es\/blog\/autenticacion-email\/\" rel=\"noopener\">validar la direcci\u00f3n de correo electr\u00f3nico<\/a>.<\/p>\n<p>Tambi\u00e9n hay otras buenas pr\u00e1cticas a tener en cuenta. Sin embargo, las siguientes son m\u00e1s bien opcionales, en el sentido de que obtendr\u00e1s resultados fant\u00e1sticos, pero habr\u00e1 ocasiones en las que no querr\u00e1s seguir estas pautas:<\/p>\n<ul>\n<li>Tu l\u00ednea de asunto debe ser perfecta, y el contenido de tu correo electr\u00f3nico debe ir al grano. Dado el advenimiento y ahora el <a href=\"https:\/\/kinsta.com\/es\/movil-vs-escritorio-cuota-mercado\/\">dominio de la navegaci\u00f3n m\u00f3vil<\/a>, esto es especialmente importante.<\/li>\n<li>Hablando de esto, deber\u00e1s asegurarte de que tu correo electr\u00f3nico HTML se lee sin problemas en las pantallas m\u00e1s peque\u00f1as, lo que significa que no hay banners exagerados ni logotipos de gran tama\u00f1o.<\/li>\n<li>Si incluyes una fuerte llamada a la acci\u00f3n (CTA) dentro de cada correo electr\u00f3nico, tendr\u00e1s una buena oportunidad de mejorar el compromiso del usuario.<\/li>\n<li>El seguimiento es un tema controvertido, pero te ayudar\u00e1 a comprender lo que hacen tus usuarios cuando les env\u00edas un correo electr\u00f3nico. Algunos proveedores incluyen un s\u00f3lido conjunto de an\u00e1lisis como est\u00e1ndar.<\/li>\n<\/ul>\n<p>Tan importante como la forma de presentar y configurar tu correo electr\u00f3nico, es la forma de crear el dise\u00f1o y la disposici\u00f3n. En las pr\u00f3ximas secciones, veremos c\u00f3mo construir un correo electr\u00f3nico HTML, y terminaremos con algunos consejos para enviarlos.<\/p>\n<h2>El enfoque t\u00e9cnico que necesitar\u00e1s para crear un correo electr\u00f3nico HTML<\/h2>\n<p>Si tienes alguna experiencia en desarrollo web, sin duda <a href=\"https:\/\/kinsta.com\/es\/blog\/html-vs-html5\/\" rel=\"noopener\">utilizar\u00e1s HTML5<\/a> como lenguaje de marcado. \u00c9ste es un mundo aparte de las instancias anteriores de <a href=\"https:\/\/kinsta.com\/es\/blog\/xml-vs-html\/\">HTML y XHTML<\/a>, e incluye una mayor divisi\u00f3n entre el estilo (del que hay pr\u00e1cticamente cero elementos v\u00e1lidos) y la estructura.<\/p>\n<p>Como ejemplo de esto \u00faltimo, HTML5 ofrece una serie de etiquetas diferentes para definir las \u00e1reas de contenido de tu sitio.<\/p>\n<figure id=\"attachment_123705\" aria-describedby=\"caption-attachment-123705\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123705\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/html-tags.png\" alt=\"A snippet of HTML in the Onivim2 app, showing a number of tags to help define content areas, such as &lt;html&gt;, &lt;head&gt;, &lt;body&gt;, and more.\" width=\"1000\" height=\"799\"><figcaption id=\"caption-attachment-123705\" class=\"wp-caption-text\">Una serie de etiquetas estructurales de HTML.<\/figcaption><\/figure>\n<p>Sin embargo, el HTML del correo electr\u00f3nico es una bestia diferente, en la medida en que est\u00e1 algo atrasado. Por ello, tendr\u00e1s que utilizar todas esas viejas tablas de HTML4 y el estilo en l\u00ednea para crear tu dise\u00f1o. Para saber por qu\u00e9 es esto, tendr\u00edas que hablar con los desarrolladores de los clientes de correo electr\u00f3nico, ya que suelen alterar el correo electr\u00f3nico HTML cuando llega a tu bandeja de entrada. Uno de los actos m\u00e1s comunes es eliminar el <a href=\"https:\/\/kinsta.com\/es\/blog\/css-wordpress\/\">CSS<\/a> y el <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-javascript\/\">JavaScript<\/a> de los correos electr\u00f3nicos por razones de seguridad (entre otras).<\/p>\n<p>Esto significa que tendr\u00e1s que proporcionar otra forma de a\u00f1adir estilo a tus correos electr\u00f3nicos HTML: la \u00fanica opci\u00f3n para la compatibilidad es inline. Hablando de compatibilidad, \u00e9sta es una consideraci\u00f3n importante. Tienes que equilibrar un estilo \u00fanico con las capacidades del cliente de correo electr\u00f3nico del usuario final. Por ello, hay algunas otras consideraciones t\u00e9cnicas que deber\u00e1s tener en cuenta:<\/p>\n<ul>\n<li>Utilizar <a href=\"https:\/\/kinsta.com\/es\/blog\/html-fuentes\/\" rel=\"noopener\">fuentes del sistema<\/a> en lugar de una de terceros te ahorrar\u00e1 una <a href=\"https:\/\/kinsta.com\/es\/blog\/codigos-de-estado-de-http\/\">petici\u00f3n HTTP<\/a>, cargar\u00e1 el correo electr\u00f3nico r\u00e1pidamente para el usuario y, adem\u00e1s, ofrecer\u00e1 un <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-fuentes-para-correo-electronico\/\" rel=\"noopener\">correo electr\u00f3nico de aspecto consistente<\/a>.<\/li>\n<li>Podr\u00edas ir a\u00fan m\u00e1s lejos y ofrecer una versi\u00f3n en texto plano de tu correo electr\u00f3nico para aquellos que no puedan ver el correo HTML en su cliente. Muchos sitios ofrecen una versi\u00f3n HTML a la que se puede acceder en l\u00ednea, tanto por esta raz\u00f3n como por la de copia de seguridad.<\/li>\n<li>El texto alternativo es tan importante para los correos electr\u00f3nicos HTML como para la web. Por lo tanto, utiliza el texto alternativo siempre que a\u00f1adas una imagen a tu contenido <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-accesible\/\" rel=\"noopener\">para que sea accesible<\/a>.<\/li>\n<\/ul>\n<p>Hay un aspecto t\u00e9cnico de un correo electr\u00f3nico HTML en el que deber\u00edas pensar m\u00e1s, ya que puede cruzar la l\u00ednea entre el estilo en l\u00ednea, el CSS y otros factores. Vamos a hablar brevemente de los \u00abcondicionales\u00bb.<\/p>\n<h3>Uso de los condicionales<\/h3>\n<p>Un remanente de los correos electr\u00f3nicos HTML que sol\u00eda estar en el conjunto de herramientas de los desarrolladores web de HTML m\u00e1s antiguos es el de los condicionales. Aqu\u00ed es donde se especifica qu\u00e9 navegador utilizar\u00e1 un determinado fragmento de c\u00f3digo.<\/p>\n<p>Sinceramente, esto es casi siempre un problema de Microsoft. Para los desarrolladores web, Internet Explorer (IE) era el demonio de los navegadores. Sin embargo, para los correos electr\u00f3nicos HTML, es <a href=\"https:\/\/kinsta.com\/es\/blog\/alternativas-a-outlook\/\">Outlook<\/a>. Entre las diferentes versiones, puede que veas que tu estilo se representa de una manera que no esperabas.<\/p>\n<p>Por ello, puedes a\u00f1adir bloques de condiciones a tu c\u00f3digo y definir esos elementos. Por ejemplo, puedes dirigirte a las versiones de Outlook basadas en Word y en IE.<\/p>\n<p>Primero, Word:<\/p>\n<pre><code class=\"language-html\">&lt;!--[if mso]&gt;<\/code><\/pre>\n<p>Esto es para las versiones de Outlook basadas en Word:<\/p>\n<pre><code class=\"language-html\">&lt;![endif]--&gt;<\/code><\/pre>\n<p>Para Internet Explorer, se utiliza una etiqueta diferente:<\/p>\n<pre><code class=\"language-html\">&lt;!--[if (IE)]&gt;<\/code><\/pre>\n<p>Esto es para las versiones de Outlook basadas en IE:<\/p>\n<pre><code class=\"language-html\">&lt;![endif]--&gt;<\/code><\/pre>\n<p>Si el navegador al que te diriges est\u00e1 basado en WebKit (como Apple Safari, el navegador PlayStation, el Kindle de Amazon, etc.), puedes utilizar una consulta de medios para proporcionar un estilo espec\u00edfico:<\/p>\n<pre><code class=\"language-html\">.html-email-webkit {\n  display: none;\n}\n@media screen and (-webkit-min-device-pixel-ratio:0) {\n  ..html-email-webkit {\n    display: block !important;\n  }\n}<\/code><\/pre>\n<p>Esto te proporciona una forma ligeramente mejor de adaptar tu correo electr\u00f3nico HTML a la pantalla del usuario final. En general, el estilo HTML para los correos electr\u00f3nicos no es perfecto, pero hay suficiente fuerza bajo el cap\u00f3 de cada <a href=\"https:\/\/kinsta.com\/es\/secciones\/consejos-email-marketing\/\">cliente de correo electr\u00f3nico<\/a> para ayudarte a crear algunos dise\u00f1os impresionantes.<\/p>\n<h2>Tus opciones para crear correos electr\u00f3nicos en HTML<\/h2>\n<p>A pesar de lo que ya hemos comentado, tienes una serie de opciones flexibles para ayudarte a crear correos electr\u00f3nicos HTML. Por ejemplo, puedes crearlos desde cero utilizando un <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-editores-texto\/\" rel=\"noopener\">buen editor de texto<\/a> y HTML.<\/p>\n<p>Sin embargo, hay otras opciones que podemos considerar:<\/p>\n<ul>\n<li>Puedes utilizar un servicio dedicado, como una aplicaci\u00f3n de marketing por correo electr\u00f3nico, para crear tus correos electr\u00f3nicos. Muchas aplicaciones ofrecen un constructor visual, pero tambi\u00e9n te dan la posibilidad de escribir tu propio c\u00f3digo y crear tu propia plantilla.<\/li>\n<li>Hablando de eso, puedes descargar una plantilla para tus correos electr\u00f3nicos HTML. Esto es muy parecido a un tema de WordPress, ya que proporciona una base para el resto de tu dise\u00f1o. A partir de ah\u00ed, puedes personalizarla a tu gusto. Es un buen punto intermedio entre las opciones de codificaci\u00f3n y construcci\u00f3n.<\/li>\n<\/ul>\n<p>M\u00e1s adelante, construiremos nuestro correo electr\u00f3nico utilizando HTML. Sin embargo, antes de esto, veamos algunos de los proveedores de servicios de correo electr\u00f3nico que puedes considerar, independientemente del m\u00e9todo que elijas para crear tus correos electr\u00f3nicos.<\/p>\n<h2>3 proveedores perfectos de servicios de correo electr\u00f3nico para crear correos electr\u00f3nicos en HTML<\/h2>\n<p>Dado que este post se centra en la creaci\u00f3n de correos electr\u00f3nicos HTML, no necesitamos profundizar demasiado en lo que respecta a los proveedores de servicios de correo electr\u00f3nico. Aun as\u00ed, <a href=\"https:\/\/kinsta.com\/es\/blog\/alternativas-mailchimp\/#mailchimp-alternatives-with-free-plans\" rel=\"noopener\">hay algunos<\/a> que seguramente tendr\u00e1s en cuenta.<\/p>\n<p>No podemos enumerarlos todos, as\u00ed que vamos a mencionar tres de los m\u00e1s populares. Hagamos un repaso de ellos.<\/p>\n<h3>1. Mailchimp<\/h3>\n<figure id=\"attachment_123707\" aria-describedby=\"caption-attachment-123707\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123707\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/mailchimp-logo.png\" alt=\"The Mailchimp logo, showing the mascot Freddie, winking, and the words \u201cIntuit Mailchimp.\u201d.\" width=\"1000\" height=\"215\"><figcaption id=\"caption-attachment-123707\" class=\"wp-caption-text\">El logotipo de Mailchimp.<\/figcaption><\/figure>\n<p>Este proveedor de servicios de correo electr\u00f3nico es una soluci\u00f3n de referencia, casi una decisi\u00f3n instintiva para muchos. <a href=\"http:\/\/mailchimp.com\" target=\"_blank\" rel=\"noopener noreferrer\">Mailchimp<\/a> es el est\u00e1ndar de oro en aplicaciones de marketing por correo electr\u00f3nico <a href=\"https:\/\/kinsta.com\/es\/blog\/como-utilizar-mailchimp\/\" rel=\"noopener\">para muchos<\/a>, y hay muchas buenas razones para ello:<\/p>\n<ul>\n<li>Incluye un mont\u00f3n de funciones t\u00edpicas que encontrar\u00e1s en muchas otras aplicaciones similares.<\/li>\n<li>Hay mucha ayuda a la hora de promocionar un negocio, como la automatizaci\u00f3n del marketing, las herramientas de gesti\u00f3n de la audiencia y mucho m\u00e1s.<\/li>\n<li>Dispone de un conjunto de herramientas creativas de primera categor\u00eda para ayudarte a crear correos electr\u00f3nicos HTML.<\/li>\n<\/ul>\n<p>Por supuesto, aqu\u00ed queremos fijarnos en esta \u00faltima. El <a href=\"https:\/\/mailchimp.com\/create-content\/\" target=\"_blank\" rel=\"noopener noreferrer\">Asistente Creativo<\/a> es una forma de que Mailchimp conozca tu marca y te ayude a crear y personalizar tus correos electr\u00f3nicos. Tambi\u00e9n puede conectar aplicaciones de terceros, como Adobe Photoshop, para ayudarte a crear el correo electr\u00f3nico perfecto.<\/p>\n<p>Tambi\u00e9n es sencillo trabajar con el HTML existente, especialmente si utilizas el Constructor cl\u00e1sico de Mailchimp. En cualquier caso, tienes formas de <a href=\"https:\/\/kinsta.com\/es\/blog\/componentes-web\/#html-templates\" rel=\"noopener\">importar plantillas HTML<\/a> si las necesitas.<\/p>\n<p>Mailchimp utiliza un complicado h\u00edbrido de niveles de suscripci\u00f3n mensual y el n\u00famero de contactos para llegar a un precio final. Sugerir\u00edamos que las peque\u00f1as empresas necesitar\u00edan un plan de unos 35 d\u00f3lares al mes, hasta 2.500 contactos. Sin embargo, tendr\u00e1s que investigar cu\u00e1l es el mejor plan para ti en funci\u00f3n de las funciones que necesites y del n\u00famero de contactos que creas que vas a incorporar.<\/p>\n<h3>2. AWeber<\/h3>\n<p>Para algunos, <a href=\"http:\/\/aweber.com\" target=\"_blank\" rel=\"noopener noreferrer\">AWeber<\/a> representa la c\u00faspide del marketing por correo electr\u00f3nico. Es una plataforma fant\u00e1stica y potente e incluye un conjunto de funciones posiblemente m\u00e1s centrado que Mailchimp.<\/p>\n<figure id=\"attachment_123699\" aria-describedby=\"caption-attachment-123699\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123699\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/aweber.png\" alt=\"AWeber\u2019s interface, showing the Canva interface overlaid onto the visual builder. The canvas shows the logo for \u201cTara\u2019s Healthy Eats\u201d, and the sidebar contains a number of graphics and images.\" width=\"1000\" height=\"596\"><figcaption id=\"caption-attachment-123699\" class=\"wp-caption-text\">El logotipo de AWeber.<\/figcaption><\/figure>\n<p>Incluye una serie de funciones esenciales que necesitar\u00e1s para enviar correos electr\u00f3nicos:<\/p>\n<ul>\n<li>La posibilidad de automatizar y programar mensajes, campa\u00f1as y mucho m\u00e1s.<\/li>\n<li>Tienes grandes herramientas de organizaci\u00f3n, como el etiquetado y la segmentaci\u00f3n de los suscriptores.<\/li>\n<li>AWeber tambi\u00e9n te permite automatizar el contenido que creas para tus correos electr\u00f3nicos. Por ejemplo, puedes convertir las entradas del blog en correos con un m\u00ednimo de trabajo.<\/li>\n<\/ul>\n<p>Cuando se trata de crear tus correos electr\u00f3nicos, AWeber tiene algunos trucos bajo la manga. Utiliza un constructor visual de arrastrar y soltar e incluye una <a href=\"https:\/\/www.aweber.com\/html-email-templates.htm\" target=\"_blank\" rel=\"noopener noreferrer\">biblioteca de plantillas personalizadas<\/a> para empezar. Adem\u00e1s, puedes conectar AWeber con tu cuenta de Canva y utilizar esta \u00faltima para ayudarte a dise\u00f1ar tus correos electr\u00f3nicos.<\/p>\n<p>Tambi\u00e9n hay un <a href=\"https:\/\/help.aweber.com\/hc\/en-us\/articles\/204030836-How-Do-I-Use-The-HTML-Editor-\" target=\"_blank\" rel=\"noopener noreferrer\">editor HTML dedicado<\/a>, lo que no ocurre con Mailchimp. Incluso tienes esto en el nivel gratuito de AWeber. Hablando de eso, <a href=\"https:\/\/www.aweber.com\/pricing.htm\" target=\"_blank\" rel=\"noopener noreferrer\">el precio<\/a> es m\u00e1s sencillo aqu\u00ed. Pagar\u00e1s unos 25 d\u00f3lares al mes por hasta 2.500 contactos.<\/p>\n<h3>3. Constant Contact<\/h3>\n<p><a href=\"https:\/\/www.constantcontact.com\">Constant Contact<\/a> es un caso at\u00edpico cuando se trata de proveedores de servicios de correo electr\u00f3nico, pero es m\u00e1s bien un arma secreta. Ofrece una fant\u00e1stica gama de caracter\u00edsticas y funcionalidades, y adem\u00e1s te permite trabajar con HTML cuando lo necesites.<\/p>\n<figure id=\"attachment_123700\" aria-describedby=\"caption-attachment-123700\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123700\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/constant-contact.png\" alt=\"The Constant Contact logo, in blue, with a circular logo containing a section in yellow.\" width=\"1000\" height=\"500\"><figcaption id=\"caption-attachment-123700\" class=\"wp-caption-text\">El logotipo de Constant Contact.<\/figcaption><\/figure>\n<p>Al igual que AWeber, <a href=\"https:\/\/kinsta.com\/es\/blog\/constant-contact-vs-mailchimp\/\">Constant Contact<\/a> se centra en el marketing por correo electr\u00f3nico por encima de otras \u00e1reas centradas en el negocio. Como tal, tiene un <a href=\"https:\/\/www.constantcontact.com\/features\/view-all-features\" target=\"_blank\" rel=\"noopener noreferrer\">conjunto de caracter\u00edsticas<\/a> que disfrutar\u00e1s:<\/p>\n<ul>\n<li>Tienes herramientas de gesti\u00f3n de listas de clientes y funciones de automatizaci\u00f3n del marketing.<\/li>\n<li>Hay amplias opciones de informes.<\/li>\n<li>Puedes integrar programas de publicidad de Facebook, Instagram y Google.<\/li>\n<li>Hay muchas formas de captar y atraer nuevos suscriptores a tus listas.<\/li>\n<\/ul>\n<p>La funcionalidad de dise\u00f1o de Constant Contact tambi\u00e9n es buena. Puedes <a href=\"https:\/\/www.constantcontact.com\/features\/email-templates\" target=\"_blank\" rel=\"noopener noreferrer\">elegir una plantilla<\/a> y trabajar con un editor visual para construir todo el dise\u00f1o. Sin embargo, tambi\u00e9n puedes trabajar <a href=\"https:\/\/v3.developer.constantcontact.com\/api_guide\/design_code_emails.html\" target=\"_blank\" rel=\"noopener noreferrer\">con HTML<\/a>, a veces de forma avanzada en relaci\u00f3n con otras herramientas.<\/p>\n<p>El precio tambi\u00e9n es razonable. Pagar\u00e1s unos 35 d\u00f3lares al mes por el plan Core y 2.500 contactos, o 70 d\u00f3lares por el plan Plus.<\/p>\n<h2>\u00bfQu\u00e9 necesitar\u00e1s para crear un correo electr\u00f3nico HTML?<\/h2>\n<p>Antes de empezar a crear tus correos electr\u00f3nicos HTML, necesitar\u00e1s tener a mano algunas herramientas y conocimientos. Esto es lo que debes organizar antes de romperte los nudillos y empezar:<\/p>\n<ul>\n<li>Querr\u00e1s utilizar un editor de c\u00f3digo con el que te sientas c\u00f3modo, porque tendr\u00e1 que apoyarte durante el proceso. Si no sabes cu\u00e1l elegir, muchos usuarios optan por <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a>, aunque <a href=\"https:\/\/brackets.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Brackets<\/a> ser\u00eda ideal para esta tarea en particular. Vamos a utilizar <a href=\"https:\/\/www.onivim.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Onivim2<\/a>, que es un editor de estilo Vim basado en la infraestructura central de VS Code.<\/li>\n<li>Aunque necesitar\u00e1s <a href=\"https:\/\/kinsta.com\/es\/blog\/aprender-html\/\" rel=\"noopener\">conocimientos de HTML<\/a>, no necesitar\u00e1s el mismo conjunto de conocimientos que un desarrollador web moderno (aunque no perjudica tus perspectivas).<\/li>\n<li>Necesitar\u00e1s una forma de probar tus correos electr\u00f3nicos: <a href=\"https:\/\/kinsta.com\/es\/blog\/mailhog\/\" rel=\"noopener\">MailHog es una soluci\u00f3n<\/a> que presentamos en otra parte del blog de Kinsta.<\/li>\n<li>Aunque no vamos a utilizar una plantilla preconstruida, es posible que quieras utilizar una de ellas en el futuro.<\/li>\n<li>Tambi\u00e9n necesitar\u00e1s un proveedor de correo electr\u00f3nico, ya que necesitar\u00e1s alguna forma de enviar tu correo electr\u00f3nico HTML terminado.<\/li>\n<\/ul>\n<p>Con todo esto, est\u00e1s listo para abrir un editor de texto y empezar. A continuaci\u00f3n, recorreremos el proceso para crear un correo electr\u00f3nico HTML b\u00e1sico.<\/p>\n<h2>\u00bfC\u00f3mo crear un correo electr\u00f3nico HTML desde cero?<\/h2>\n<p>Antes de empezar, vale la pena se\u00f1alar que no vamos a utilizar un servicio dedicado como Mailchimp o AWeber. En su lugar, vamos a crear una plantilla sencilla desde cero que podr\u00e1s importar donde necesites.<\/p>\n<p>Dividiremos el proceso en varias secciones diferentes porque, aunque un correo electr\u00f3nico HTML es simplemente relativo a un sitio web, todav\u00eda hay mucho que considerar.<\/p>\n<h3>1. Crea la base de tu correo electr\u00f3nico HTML<\/h3>\n<p>Es una buena idea empezar con el esqueleto de tu plantilla de correo electr\u00f3nico. Esto seguir\u00e1 algunas pr\u00e1cticas t\u00edpicas para el HTML en general:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE PUBLIC \u201c-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\u201d \u201chttps:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\u201d&gt;\n&lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"&gt;\n    &lt;title&gt;&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Aqu\u00ed hay algunas cosas que debemos mencionar. En primer lugar, especificamos un \u00abdoctype\u00bb para el <a href=\"https:\/\/kinsta.com\/es\/blog\/html-vs-html5\/\" rel=\"noopener\">XHTML transicional 1.0<\/a>, que es una pr\u00e1ctica habitual entre los desarrolladores de correo electr\u00f3nico. A partir de ah\u00ed, especificamos un espacio de nombres XML, que ser\u00e1 importante m\u00e1s adelante.<\/p>\n<p>Tambi\u00e9n ver\u00e1s algunas metaetiquetas, que definen el conjunto de caracteres y la forma en que el navegador debe representar el HTML que sigue en su ventana gr\u00e1fica.<\/p>\n<p>El resto del esqueleto es sencillo: est\u00e1n las etiquetas title y body que utilizaremos a continuaci\u00f3n.<\/p>\n<h3>2. A\u00f1ade la estructura de tu plantilla de correo electr\u00f3nico<\/h3>\n<p>Volviendo a nuestra discusi\u00f3n sobre qu\u00e9 etiquetas HTML utilizar, recordar\u00e1s que no queremos utilizar &lt;div&gt; ni otros elementos estructurales t\u00edpicos. En su lugar, queremos utilizar tablas, ya que se ven bien en los clientes y servicios de correo electr\u00f3nico.<\/p>\n<p>Todo comenzar\u00e1 con un simple conjunto de etiquetas &lt;table&gt; dentro del cuerpo:<\/p>\n<pre><code class=\"language-html\">&lt;body&gt;\n  &lt;table role=\"presentation\"&gt;\n    &lt;tr&gt;\n      &lt;td&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/table&gt;\n&lt;\/body&gt;<\/code><\/pre>\n<p>El atributo que establecemos dentro de la etiqueta &lt;table&gt; ayuda a los lectores de pantalla a analizar el texto que contiene, por lo que es bueno para la accesibilidad.<\/p>\n<p>A partir de aqu\u00ed, tendr\u00e1s que a\u00f1adir nuevas filas y columnas a tu tabla para construir la plantilla de correo electr\u00f3nico HTML. La forma de hacerlo depende de ti, pero es bueno empezar con una base de secciones de cabecera, pie de p\u00e1gina y cuerpo. No las repetiremos aqu\u00ed por brevedad, pero las mencionaremos a medida que avancemos.<\/p>\n<p>La buena noticia es que puedes seguir a\u00f1adiendo nuevas filas a tu tabla si necesitas a\u00f1adir m\u00e1s secciones. Sin embargo, a partir de aqu\u00ed, querr\u00e1s empezar a introducir estilos y otros elementos.<\/p>\n<h3>3. Incluye el estilo de tus elementos<\/h3>\n<p>Lo bueno de HTML es que es casi agn\u00f3stico en cuanto a su estilo. El marcado es sencillo, pero los estilos que aplicas pueden no serlo. Aqu\u00ed es donde ver\u00e1s que tu correo electr\u00f3nico HTML cobra vida.<\/p>\n<p>Como gu\u00eda mientras dise\u00f1amos, a\u00f1adiremos una etiqueta &lt;style&gt; al &lt;head&gt; para mostrar un borde general:<\/p>\n<pre><code class=\"language-html\">&lt;style&gt;\n  table, td {border:2px solid #000000 !important;}\n&lt;\/style&gt;<\/code><\/pre>\n<p>Para empezar, vamos a asegurarnos de que no hay ning\u00fan espacio inesperado en el cuerpo o en la tabla principal (que aqu\u00ed act\u00faa como nuestro cuerpo porque algunos clientes de correo electr\u00f3nico eliminan esa etiqueta):<\/p>\n<pre><code class=\"language-html\">&lt;body style=\"margin:0;padding:0;\"&gt;\n  &lt;table role=\"presentation\" style=\"width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;\"&gt;\n&lt;\/body&gt;<\/code><\/pre>\n<p>Tambi\u00e9n vamos a a\u00f1adir un poco de centrado y a eliminar el relleno extra de nuestras diferentes celdas de secci\u00f3n:<\/p>\n<pre><code class=\"language-html\">&lt;tr&gt;\n  &lt;td align=\"center\" style=\"padding:0;\"&gt;Header\n  &lt;\/td&gt;\n&lt;\/tr&gt;<\/code><\/pre>\n<p>Si echas un vistazo a esto en tu navegador, no parecer\u00e1 gran cosa:<\/p>\n<figure id=\"attachment_123703\" aria-describedby=\"caption-attachment-123703\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123703\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/front-end-skeleton.png\" alt=\"A browser window showing black text on a white background reading, \u201cHeader\u201d, \u201cBody\u201d, and \u201cFooter\u201d. Each cell has a black border.\" width=\"1000\" height=\"253\"><figcaption id=\"caption-attachment-123703\" class=\"wp-caption-text\">Una ventana del navegador mostrando el esqueleto del correo electr\u00f3nico HTML.<\/figcaption><\/figure>\n<p>Sin embargo, a partir de aqu\u00ed, puedes seguir desarrollando tu plantilla de correo electr\u00f3nico utilizando tablas y etiquetas de estilo. Por ejemplo, hemos creado una secci\u00f3n heroica para nuestra cabecera, y hemos ampliado el pie de p\u00e1gina y el cuerpo:<\/p>\n<figure id=\"attachment_123709\" aria-describedby=\"caption-attachment-123709\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123709\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/mockup-email.png\" alt=\"A HTML email showing an airmail envelope complete with stickers, stamp, and red and blue flecks, body text from the Kinsta website, and a footer section containing a privacy policy, support, and terms links. There\u2019s also a copyright notice for Kinsta, and an unsubscribe link.\" width=\"1000\" height=\"616\"><figcaption id=\"caption-attachment-123709\" class=\"wp-caption-text\">Un modelo de plantilla de correo electr\u00f3nico durante su creaci\u00f3n (Fuente de la imagen: <a href=\"https:\/\/pixabay.com\/vectors\/post-office-airmail-letter-403145\/\" target=\"_blank\" rel=\"noopener noreferrer\">Settergren<\/a>).<\/figcaption><\/figure>\n<p>Seguramente crear\u00e1s una plantilla mejor y m\u00e1s adecuada a tus necesidades, pero utilizando tablas anidadas y algunos conocimientos b\u00e1sicos de HTML, puedes crear una plantilla de correo electr\u00f3nico HTML adaptable y personalizada que d\u00e9 en el clavo.<\/p>\n<h3>4. Prueba tu correo electr\u00f3nico<\/h3>\n<p>Antes de terminar, querr\u00e1s probar tu correo electr\u00f3nico para asegurarte de que se visualiza bien en diferentes dispositivos. Hay algunos servicios diferentes que pueden ayudar en este sentido.<\/p>\n<p>Por ejemplo, <a href=\"https:\/\/www.emailonacid.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Email on Acid<\/a> incluye una completa lista de comprobaci\u00f3n previa a la implementaci\u00f3n que te ayudar\u00e1 a asegurarte de que tu plantilla no causa problemas:<\/p>\n<figure id=\"attachment_123701\" aria-describedby=\"caption-attachment-123701\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123701\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/email-on-acid.png\" alt=\"The Email On Acid interface, showing an email, a black sidebar, a pre-deployment checklist in progress, and code relating to an element within the email.\" width=\"1000\" height=\"602\"><figcaption id=\"caption-attachment-123701\" class=\"wp-caption-text\">El sitio web de Email on Acid.<\/figcaption><\/figure>\n<p>Los usuarios de <a href=\"http:\/\/litmus.com\" target=\"_blank\" rel=\"noopener noreferrer\">Litmus<\/a> conocer\u00e1n <a href=\"https:\/\/putsmail.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">PutsMail<\/a>, pero es accesible para todos:<\/p>\n<figure id=\"attachment_123706\" aria-describedby=\"caption-attachment-123706\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123706\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/litmus.png\" alt=\"The Litmus website with three mockup panels - one in dark mode \u2013 showing options to build and share emails, along with icons displaying a lock, and envelope.\" width=\"1000\" height=\"598\"><figcaption id=\"caption-attachment-123706\" class=\"wp-caption-text\">El sitio web de Litmus.<\/figcaption><\/figure>\n<p>Tendr\u00e1s que registrarte para obtener una cuenta para utilizar el servicio, pero su uso es sencillo. Aprovechas la funcionalidad para previsualizar los correos electr\u00f3nicos en diferentes navegadores y en varios dispositivos.<\/p>\n<p><a href=\"https:\/\/www.mailgun.com\/email-testing-tool\/html-email-tester\/free-html-email-tester\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mailgun tambi\u00e9n ofrece<\/a> un fant\u00e1stico servicio relacionado con su oferta principal. Puedes probar clientes de correo electr\u00f3nico, navegadores y mucho m\u00e1s a trav\u00e9s de la interfaz. Adem\u00e1s, puedes probar elementos como las l\u00edneas de asunto, para asegurarte de que mantienes altas tus tasas de apertura.<\/p>\n<figure id=\"attachment_123708\" aria-describedby=\"caption-attachment-123708\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123708\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/mailgun-tester.png\" alt=\"Two panels showing a colorful graph and a collection of metrics relating to deliverability, risk, and more.\" width=\"1000\" height=\"522\"><figcaption id=\"caption-attachment-123708\" class=\"wp-caption-text\">Herramienta de comprobaci\u00f3n de correo electr\u00f3nico de Mailgun.<\/figcaption><\/figure>\n<p>Sin embargo, una vez que pruebes tu correo electr\u00f3nico, tendr\u00e1s que asegurarte de que llega a la bandeja de entrada del destinatario. En la \u00faltima secci\u00f3n, hablaremos m\u00e1s de esto.<\/p>\n<h2>Enviar un correo electr\u00f3nico HTML: Lo que debes saber<\/h2>\n<p>Una de las ventajas de utilizar un servicio de marketing por correo electr\u00f3nico que a\u00fan no hemos mencionado es c\u00f3mo se gestionar\u00e1 el aspecto legal del env\u00edo de correos electr\u00f3nicos. Esto es importante porque si te equivocas en este aspecto, no s\u00f3lo no llegar\u00e1s a un destinatario, sino que te meter\u00e1s en problemas.<\/p>\n<p>Un servicio de marketing por correo electr\u00f3nico ya tendr\u00e1 una buena relaci\u00f3n de trabajo con las organizaciones que gestionan el spam y las facetas relacionadas con el env\u00edo de un correo electr\u00f3nico. Por ello, suele ser una buena idea elegir uno de ellos si no quieres preocuparte por el env\u00edo de spam.<\/p>\n<p>Sin embargo, hay algunos consejos que podemos dar que importan independientemente de la plataforma que utilices:<\/p>\n<ul>\n<li>Aseg\u00farate de que sigues todas las directrices de la <a href=\"https:\/\/www.congress.gov\/bill\/108th-congress\/senate-bill\/877\/text\" target=\"_blank\" rel=\"noopener noreferrer\">ley CAN-SPAM<\/a>, especialmente si tu p\u00fablico principal est\u00e1 en Estados Unidos. Por supuesto, los distintos pa\u00edses tendr\u00e1n <a href=\"https:\/\/mailchimp.com\/help\/anti-spam-requirements-for-email\/\" target=\"_blank\" rel=\"noopener noreferrer\">sus propias directrices legales<\/a>.<\/li>\n<li>Incluye un doble opt-in para los suscriptores. Esto es cuando les pides que confirmen una suscripci\u00f3n, pero tambi\u00e9n env\u00edas una segunda confirmaci\u00f3n. Esto te protege a ti y al suscriptor si hay una consulta de spam o una solicitud de privacidad m\u00e1s adelante.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/por-que-emails-terminan-como-spam\/\" rel=\"noopener\">La entregabilidad<\/a> es un elemento clave de tus correos electr\u00f3nicos, y esto es algo que tratamos en otro art\u00edculo, en profundidad. Sin embargo, este concepto es una mezcla de varios aspectos, como el uso de un buen c\u00f3digo, la obtenci\u00f3n del nivel adecuado de permiso, y m\u00e1s.<\/p>\n<p>Esto se relaciona con otra faceta: tu puntuaci\u00f3n de env\u00edo. Esta es similar a la puntuaci\u00f3n de cr\u00e9dito y, en \u00faltima instancia, es una medida de tu reputaci\u00f3n. Aqu\u00ed hay varios componentes diferentes que conforman el conjunto:<\/p>\n<ul>\n<li>La tasa de rebote de tu sitio.<\/li>\n<li>El n\u00famero de quejas que recibe tu sitio en relaci\u00f3n con los correos electr\u00f3nicos que env\u00edas.<\/li>\n<li>La reputaci\u00f3n de tu direcci\u00f3n IP.<\/li>\n<li>La firma de tu nombre de dominio.<\/li>\n<\/ul>\n<p>Este \u00faltimo est\u00e1 relacionado con tu <a href=\"https:\/\/kinsta.com\/es\/blog\/autenticacion-email\/\" rel=\"noopener\">Correo Identificado con Clave de Dominio (DKIM)<\/a> y con el Marco de Pol\u00edtica de Remitentes (SPF). Adem\u00e1s, puedes comprobar la reputaci\u00f3n de tu IP a trav\u00e9s de servicios como <a href=\"https:\/\/senderscore.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">SenderScore<\/a>, o <a href=\"https:\/\/www.ipqualityscore.com\/ip-reputation-check\" target=\"_blank\" rel=\"noopener noreferrer\">IPQualityScore<\/a>.<\/p>\n<p>Si eliges el <a href=\"https:\/\/kinsta.com\/es\/blog\/servidor-smtp-gratuito\/\" rel=\"noopener\">proveedor de protocolo simple de transporte de correo (SMTP) adecuado<\/a> en primer lugar, puedes marcar algunas de estas casillas de un plumazo. Al igual que tu elecci\u00f3n de la soluci\u00f3n de marketing por correo electr\u00f3nico, este servicio entender\u00e1 lo que necesitas para mantener tu capacidad de entrega alta, y en el lado correcto de los poderes f\u00e1cticos.<\/p>\n<p>Mailgun es una soluci\u00f3n que hemos mencionado antes, y podr\u00eda ser ideal. Sin embargo, hay otras como <a href=\"https:\/\/www.mailjet.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mailjet<\/a>, <a href=\"https:\/\/www.sendinblue.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sendinblue<\/a>, e incluso <a href=\"https:\/\/kinsta.com\/es\/blog\/gmail-smtp-servidor\/\" rel=\"noopener\">el propio servicio de Gmail<\/a>.<\/p>\n\n<h2>Resumen<\/h2>\n<p>El correo electr\u00f3nico no est\u00e1 cerca de llegar a su fin. Por ello, utilizar el correo electr\u00f3nico para tus propias necesidades -como la promoci\u00f3n y el marketing- es una forma fant\u00e1stica y rentable de llegar a los suscriptores, usuarios y clientes potenciales.<\/p>\n<p>Aunque podr\u00edas comprar una plantilla HTML dedicada, crear tus propios correos electr\u00f3nicos HTML no es tan dif\u00edcil. Podr\u00eda ser la forma de triunfar si tienes una visi\u00f3n espec\u00edfica en mente. Sin embargo, tendr\u00e1s que sacar tus viejos trucos de HTML, como los condicionales y las tablas anidadas. El dise\u00f1o de correos electr\u00f3nicos en HTML a\u00fan no est\u00e1 al nivel del dise\u00f1o web moderno, pero a\u00fan puedes conseguir mucho con poco.<\/p>\n<p>\u00bfTienes necesidad de crear correos electr\u00f3nicos en HTML y, si es as\u00ed, qu\u00e9 preguntas tienes? \u00a1H\u00e1znoslo saber en la secci\u00f3n de comentarios m\u00e1s abajo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Prueba r\u00e1pida: \u00bfC\u00f3mo se llama el lenguaje que utilizan los desarrolladores web para crear las estructuras de los sitios que visitas cada d\u00eda? Dejando a un &#8230;<\/p>\n","protected":false},"author":117,"featured_media":53730,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[602,918,105,658],"topic":[1285],"class_list":["post-53729","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-email-deliverability","tag-email-marketing","tag-html","tag-html-editors","topic-consejos-email-marketing"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gu\u00eda para novatos sobre c\u00f3mo crear y enviar un email HTML<\/title>\n<meta name=\"description\" content=\"Si quieres enviar correos electr\u00f3nicos atractivos a los suscriptores, puede que necesites tu propia plantilla. \u00a1Aprende a crear tus propios emails HTML!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/html-email\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gu\u00eda para principiantes sobre c\u00f3mo crear y enviar un correo electr\u00f3nico HTML\" \/>\n<meta property=\"og:description\" content=\"Si quieres enviar correos electr\u00f3nicos atractivos a los suscriptores, puede que necesites tu propia plantilla. \u00a1Aprende a crear tus propios emails HTML!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/html-email\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-30T08:57:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-21T09:17:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/html-email.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Si quieres enviar correos electr\u00f3nicos atractivos a los suscriptores, puede que necesites tu propia plantilla. \u00a1Aprende a crear tus propios emails HTML!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/html-email.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-email\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-email\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Gu\u00eda para principiantes sobre c\u00f3mo crear y enviar un correo electr\u00f3nico HTML\",\"datePublished\":\"2022-06-30T08:57:04+00:00\",\"dateModified\":\"2023-08-21T09:17:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-email\/\"},\"wordCount\":5168,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-email\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/html-email.jpg\",\"keywords\":[\"email deliverability\",\"email marketing\",\"html\",\"HTML editors\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/html-email\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-email\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/html-email\/\",\"name\":\"Gu\u00eda para novatos sobre c\u00f3mo crear y enviar un email HTML\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-email\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-email\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/html-email.jpg\",\"datePublished\":\"2022-06-30T08:57:04+00:00\",\"dateModified\":\"2023-08-21T09:17:25+00:00\",\"description\":\"Si quieres enviar correos electr\u00f3nicos atractivos a los suscriptores, puede que necesites tu propia plantilla. \u00a1Aprende a crear tus propios emails HTML!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-email\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/html-email\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-email\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/html-email.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/html-email.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-email\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Consejos de Email Marketing\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/consejos-email-marketing\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gu\u00eda para principiantes sobre c\u00f3mo crear y enviar un correo electr\u00f3nico HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Gu\u00eda para novatos sobre c\u00f3mo crear y enviar un email HTML","description":"Si quieres enviar correos electr\u00f3nicos atractivos a los suscriptores, puede que necesites tu propia plantilla. \u00a1Aprende a crear tus propios emails HTML!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/html-email\/","og_locale":"es_ES","og_type":"article","og_title":"Gu\u00eda para principiantes sobre c\u00f3mo crear y enviar un correo electr\u00f3nico HTML","og_description":"Si quieres enviar correos electr\u00f3nicos atractivos a los suscriptores, puede que necesites tu propia plantilla. \u00a1Aprende a crear tus propios emails HTML!","og_url":"https:\/\/kinsta.com\/es\/blog\/html-email\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2022-06-30T08:57:04+00:00","article_modified_time":"2023-08-21T09:17:25+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/html-email.jpg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Si quieres enviar correos electr\u00f3nicos atractivos a los suscriptores, puede que necesites tu propia plantilla. \u00a1Aprende a crear tus propios emails HTML!","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/html-email.jpg","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Salman Ravoof","Tiempo de lectura":"23 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/html-email\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/html-email\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Gu\u00eda para principiantes sobre c\u00f3mo crear y enviar un correo electr\u00f3nico HTML","datePublished":"2022-06-30T08:57:04+00:00","dateModified":"2023-08-21T09:17:25+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/html-email\/"},"wordCount":5168,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/html-email\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/html-email.jpg","keywords":["email deliverability","email marketing","html","HTML editors"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/html-email\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/html-email\/","url":"https:\/\/kinsta.com\/es\/blog\/html-email\/","name":"Gu\u00eda para novatos sobre c\u00f3mo crear y enviar un email HTML","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/html-email\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/html-email\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/html-email.jpg","datePublished":"2022-06-30T08:57:04+00:00","dateModified":"2023-08-21T09:17:25+00:00","description":"Si quieres enviar correos electr\u00f3nicos atractivos a los suscriptores, puede que necesites tu propia plantilla. \u00a1Aprende a crear tus propios emails HTML!","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/html-email\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/html-email\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/html-email\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/html-email.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/06\/html-email.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/html-email\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Consejos de Email Marketing","item":"https:\/\/kinsta.com\/es\/secciones\/consejos-email-marketing\/"},{"@type":"ListItem","position":3,"name":"Gu\u00eda para principiantes sobre c\u00f3mo crear y enviar un correo electr\u00f3nico HTML"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/53729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=53729"}],"version-history":[{"count":13,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/53729\/revisions"}],"predecessor-version":[{"id":54268,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/53729\/revisions\/54268"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53729\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53729\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53729\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53729\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53729\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53729\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53729\/translations\/nl"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/53729\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/53730"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=53729"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=53729"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=53729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}