MMarcador arcaje de plantillas de correo electrónico

Last updated:

El siguiente artículo incluye información sobre cómo se codifican las plantillas de correo electrónico estándar de HubSpot. Los clientes de correo electrónico solo admiten ciertas funciones HTML y CSS. Por eso, codificar plantillas de correo electrónico que se reproduzcan de forma coherente en todos los clientes requiere bastante experiencia y paciencia. Para facilitar la vida más fácil, las plantillas de correo electrónico de HubSpot pueden crearse como plantillas de arrastrar y soltar fáciles de usar o como archivos codificados.

Diseños de plantillas y archivos codificados

Las plantillas de correo electrónico de arrastrar y soltar pueden ser adaptables o básicas. Adaptable significa que se adapta al tamaño de la ventana gráfica, básica significa que permanece estático.

Por opción predeterminada son adaptables, pero puedes convertirlas en plantillas básicas, haciendo clic en "Plantilla de correo electrónico adaptable" en el panel del inspector y eligiendo "Plantilla de correo electrónico básica".

Plantilla de correo electrónico - básica o adaptable

Los diseñadores tienen acceso a personalizar ciertos colores y fuentes predeterminados (Configuración > Marketing > Correo) y agregar CSS en línea a los módulos (icono de engranaje del módulo > Editar CSS) en las plantillas de arrastrar y soltar en el administrador de diseño.

Siempre puedes acceder al marcador de un diseño de plantilla clonándolo a HTML (Acciones > Clonar en HTML). Las plantillas codificadas te permiten personalizar completamente el marcador del correo electrónico, siempre que incluyas las variables que se indican a continuación. 

Variables necesarias de la plantilla de correo electrónico

Para poder enviar correos electrónicos con HubSpot, tus plantillas deben incluir cierta información. Consulta las variables requeridas del correo electrónico HubL. Cuando trabajes con plantillas codificadas, también querrás utilizar módulos para asegurarte de que el contenido del correo electrónico pueda editarse fácilmente en cada uno de los correos.

hs-inline-css y data-hse-inline-css

Uno de los aspectos más complicados de la codificación de plantillas de correo electrónico que se muestran correctamente, en todos los clientes, es la falta de soporte para CSS en un <style> dentro del <head>.

Para facilitar la codificación de las plantillas de correo electrónico, las plantillas de correo codificadas de HubSpot admiten una etiqueta de estilo especial que ofrece a los diseñadores la posibilidad de escribir CSS que se compilará y convertirá en CSS en línea y se agregará a los elementos seleccionados. Cualquier código que se agregue a una etiqueta de estilo con el ID de hs-inline-css, se agregará a las etiquetas objetivo.

Por ejemplo, Microsoft Outlook aplicará un tipo de letra predeterminado a todo el texto contenido en las etiquetas <td>, a menos que se especifique un tipo de letra en línea para esa columna de la tabla. El ejemplo siguiente utiliza una etiqueta de estilo hs-inline-css para agregar una familia de fuentes a todas las columnas de la tabla en la plantilla. Ten en cuenta que cualquier consulta de medios debe incluirse en un <style> separado, ya que no puede hacerse en línea.

NOTA: El atributo data-hse-inline-css en una etiqueta <style> en la sección Editar > Editar encabezado de las plantillas de arrastrar y soltar está en lugar de hs-inline-css para lograr este mismo objetivo. En los archivos codificados, se puede utilizar cualquiera de los dos métodos (siempre que solo haya un style#hs-inline-css por plantilla. Puedes tener varios elementos style[data-hs-inline-css="true"] .

<!doctype html> <html> <head> {# coded email templates ONLY: #} <style type="text/css" id="hs-inline-css"> td { font-family: Arial, sans-serif; } </style> {# coded OR drag-and-drop email templates: #} <style type="text/css" data-hse-inline-css="true"> table { font-family: 'Courier New', sans-serif; } </style> </head> <body> <table> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> </body> </html><!doctype html> <html> <head> <style type="text/css" id="hs-inline-css"> td { font-family: Arial, sans-serif; } </style> <style type="text/css" id=data-hse-inline-css="true"> table { font-family: 'Courier New', sans-serif; } </style> </head> <body> <table style="font-family: 'Courier New', sans-serif;"> <tr> <td style="font-family: Arial, sans-serif;">Column 1</td> <td style="font-family: Arial, sans-serif;">Column 2</td> </tr> </table> </body> </html>

Plantilla de correo adaptable

El diseño de la plantilla de correo electrónico predeterminado de HubSpot utiliza el siguiente marcador. Estos diseños adaptables incluyen consultas de medios que hacen que las imágenes y las tablas sean adaptables . Los diseños adaptables utilizan variables de color y fuente que conectan con Configuración > Marketing > Correo electrónico.

Al trabajar con el diseño adaptable de HubSpot, cualquier <td> con una clase que incluya el texto "column" se hará adaptable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}</title> <meta property="og:title" content="{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}"> <meta name="twitter:title" content="{% if content.html_title and content.html_title != ""%}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> {% if content.meta_description %}<meta name="description" content="{{ content.meta_description }}"/>{% endif %} <style type="text/css" id="hs-inline-css"> /*<![CDATA[*/ /* everything in this node will be inlined */ /* ==== Page Styles ==== */ body, #backgroundTable { background-color: {{ background_color }}; /* Use body to determine background color */ font-family: {{ primary_font }}; } #templateTable { width: {{ email_body_width }}px; background-color: {{ body_color }}; -webkit-font-smoothing: antialiased; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color:{{ primary_font_color }}; display:block; font-family: {{ primary_font }}; font-weight:bold; line-height:100%; margin-top:0; margin-right:0; margin-bottom:10px; margin-left:0; text-align:left; } h1, .h1 { font-size:26px; } h2, .h2 { font-size:20px; } h3, .h3 { font-size:15px; } h4, .h4 { font-size:13px; } h5, .h5 { font-size:11px; } h6, .h6 { font-size:10px; } /* ==== Header Styles ==== */ #headerTable { background-color: {{ background_color }}; color:{{ primary_font_color }}; font-family:{{ primary_font }}; font-size:10px; line-height:120%; text-align:right; border-collapse: separate !important; padding-right: {{email_body_padding}}px; } #headerTable a:link, #headerTable a:visited, /* Yahoo! Mail Override */ #headerTable a .yshortcuts /* Yahoo! Mail Override */{ font-weight:normal; text-decoration:underline; } /* ==== Template Wrapper Styles ==== */ #contentCell { padding: 10px 20px; background-color: {{ background_color }}; } #contentTableOuter { border-collapse: separate !important; background-color: {{ body_color }}; {% if email_main_body_box_shadow_css and email_main_body_box_shadow_css != "" %} box-shadow: {{ email_main_body_box_shadow_css }}; {% endif %} padding: {{email_body_padding}}px; } #contentTableInner { width: {{email_body_width}}px; } /* ==== Body Styles ==== */ .bodyContent { color:{{ primary_font_color }}; font-family:{{ primary_font }}; font-size: {{primary_font_size }}; line-height:150%; text-align:left; } /* ==== Column Styles ==== */ table.columnContentTable { border-collapse:separate !important; border-spacing:0; background-color: {{ body_color }}; } td[class~="columnContent"] { color:{{ primary_font_color }}; font-family:{{ primary_font }}; font-size:{{primary_font_size }}; line-height:120%; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; } /* ==== Footer Styles ==== */ #footerTable { background-color: {{ background_color }}; } #footerTable a { color: {{ secondary_font_color }}; } #footerTable { color:{{ secondary_font_color }}; font-family:{{ primary_font }}; font-size:12px; line-height:120%; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; text-align:center; } #footerTable a:link, #footerTable a:visited, /* Yahoo! Mail Override */ #footerTable a .yshortcuts /* Yahoo! Mail Override */{ font-weight:normal; text-decoration:underline; } .hs-image-social-sharing-24 { max-width: 24px; max-height: 24px; } /* ==== Standard Resets ==== */ .ExternalClass{ width:100%; } /* Force Hotmail to display emails at full width */ .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } /* Force Hotmail to display normal line spacing */ body, table, td, p, a, li, blockquote{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } /* Prevent WebKit and Windows mobile changing default text sizes */ table, td { mso-table-lspace:0pt; mso-table-rspace:0pt; } /* Remove spacing between tables in Outlook 2007 and up */ img { vertical-align: bottom; -ms-interpolation-mode:bicubic; } /* Allow smoother rendering of resized image in Internet Explorer */ /* Reset Styles */ body { margin:0; padding:0; } table { border-collapse:collapse !important; } body, #backgroundTable, #bodyCell{ height:100% !important; margin:0; padding:0; width:100% !important; } a:link, a:visited { border-bottom: none; } /* iOS automatically adds a link to addresses */ /* Style the footer with the same color as the footer text */ #footer a { color: {{ secondary_font_color }};; -webkit-text-size-adjust: none; text-decoration: underline; font-weight: normal } /* Hide preview text on rendering */ #preview_text { display: none; } /*]]>*/ </style> <style type="text/css"> /*<![CDATA[*/ /* ==== Mobile Styles ==== */ /* Constrain email width for small screens */ @media screen and (max-width: 650px) { table[id="backgroundTable"] { width: 95% !important; } table[id="templateTable"] { max-width:{{ email_body_width }}px !important; width:100% !important; } table[id="contentTableInner"] { max-width:{{ email_body_width }}px !important; width:100% !important; } /* Makes image expand to take 100% of width*/ img { width: 100% !important; height: auto !important; } #contentCell { padding: 10px 10px !important; } #headerTable { padding-right: {{email_body_padding_num / 2 |int}}px !important; } #contentTableOuter { padding: {{email_body_padding_num / 2 |int}}px !important; } } @media only screen and (max-width: 480px) { /* ==== Client-Specific Mobile Styles ==== */ body, table, td, p, a, li, blockquote{ -webkit-text-size-adjust:none !important; } /* Prevent Webkit platforms from changing default text sizes */ body{ width:100% !important; min-width:100% !important; } /* Prevent iOS Mail from adding padding to the body */ /* ==== Mobile Reset Styles ==== */ td[id="bodyCell"] { padding:10px !important; } /* ==== Mobile Template Styles ==== */ table[id="templateTable"] { max-width:{{ email_body_width }}px !important; width:100% !important; } table[id="contentTableInner"] { max-width:{{ email_body_width }}px !important; width:100% !important; } /* ==== Image Alignment Styles ==== */ h1, .h1 { font-size:26px !important; line-height:125% !important; } h2, .h2 { font-size:20px !important; line-height:125% !important; } h3, .h3 { font-size:15px !important; line-height:125% !important; } h4, .h4 { font-size:13px !important; line-height:125% !important; } h5, .h5 { font-size:11px !important; line-height:125% !important; } h6, .h6 { font-size:10px !important; line-height:125% !important; } .hide { display:none !important; } /* Hide to save space */ /* ==== Body Styles ==== */ td[class="bodyContent"] { font-size:16px !important; line-height:145% !important; } /* ==== Footer Styles ==== */ td[id="footerTable"]{ padding-left: 0px !important; padding-right: 0px !important; font-size:12px !important; line-height:145% !important; } /* ==== Image Alignment Styles ==== */ table[class="alignImageTable"] { width: 100% !important; } td[class="imageTableTop"] { display: none !important; /*padding-top: 10px !important;*/ } td[class="imageTableRight"] { display: none !important; } td[class="imageTableBottom"] { padding-bottom: 10px !important; } td[class="imageTableLeft"] { display: none !important; } /* ==== Column Styles ==== */ td[class~="column"] { display: block !important; width: 100% !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; } td[class~=columnContent] { font-size:14px !important; line-height:145% !important; padding-top: 10px !important; padding-right: 10px !important; padding-bottom: 10px !important; padding-left: 10px !important; } #contentCell { padding: 10px 0px !important; } #headerTable { padding-right: {{email_body_padding_num / 2 |int}}px !important; } #contentTableOuter { padding: {{email_body_padding_num / 2 |int}}px !important; } } #preview_text { display: none; } /*]]>*/ </style> <!-- http://www.emailon@cid.com/blog/details/C13/ensure_that_your_entire_email_is_rendered_by_default_in_the_iphone_ipad --> <!-- --> <!-- --> <!-- _/ _/ _/ _/_/_/ _/ --> <!-- _/ _/ _/ _/ _/_/_/ _/ _/_/_/ _/_/ _/_/_/_/ --> <!-- _/_/_/_/ _/ _/ _/ _/ _/_/ _/ _/ _/ _/ _/ --> <!-- _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ --> <!-- _/ _/ _/_/_/ _/_/_/ _/_/_/ _/_/_/ _/_/ _/_/ --> <!-- _/ --> <!-- _/ --> <!-- --> <!-- Extra White Space! --> <!-- --> <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> </head> <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0"> <!-- Preview text (text which appears right after subject) --> <div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}</div> <!-- The backgroundTable table manages the color of the background and then the templateTable maintains the body of the email template, including preheader & footer. This is the only table you set the width of to, everything else is set to 100% and in the CSS above. Having the width here within the table is just a small win for Lotus Notes. --> <!-- Begin backgroundTable --> <table align="center" bgcolor="{{ background_color }}" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable"> <tr> <td align="center" valign="top" id="bodyCell"> <!-- When nesting tables within a TD, align center keeps it well, centered. --> <!-- Begin Template Container --> <!-- This holds everything together in a nice container --> <table border="0" cellpadding="0" cellspacing="0" id="templateTable"> <tr> <td align="center" valign="top"> <!-- Begin Template Preheader --> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="headerTable"> <div class="header-container-wrapper"> <tr> <td align="center" valign="top" class="bodyContent" width="100%" colspan="12"> <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper"> <tr> <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; "> <div class="widget-span widget-type-email_view_as_web_page " style="" data-widget-type="email_view_as_web_page"> {% if content.create_page %} <div style="padding-top: 15px; font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: right; font-size: 9px; line-height: 1.34em; color: {{ secondary_font_color }}"> Not rendering correctly? View this email as a web page <a class="hubspot-mergetag" style="color: {{ secondary_font_color }}; text-decoration: underline; white-space: nowrap" data-viewaswebpage="true" href="{{ view_as_page_url }}">here</a>. </div> {% endif %} </div><!--end widget-span --> </td> </tr> </table> </td> </tr> </div><!--end header wrapper --> </table> <!-- End Template Preheader --> </td> </tr> <tr> <td align="center" valign="top" id="contentCell"> <!-- Begin Template Wrapper --> <!-- This separates the preheader which usually contains the "open in browser, etc" content from the actual body of the email. Can alternatively contain the footer too, but I choose not to so that it stays outside of the border. --> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="contentTableOuter" style="{{email_body_border_css}}"> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0" id="contentTableInner"> <div class="body-container-wrapper"> <tr> <td align="center" valign="top" class="bodyContent" width="100%" colspan="12"> <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper"> <tr> <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; "> <div class="widget-span widget-type-logo " style="" data-widget-type="logo"> <div class="layout-widget-wrapper"> {% logo "logo_image" suppress_company_name=True, overrideable=True, label='Logo' %} </div><!--end layout-widget-wrapper --> </div><!--end widget-span --> </td> </tr> </table> </td> </tr> <tr> <td align="center" valign="top" class="bodyContent" width="100%" colspan="12"> <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper"> <tr> <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; "> <div class="widget-span widget-type-email_body " style="" data-widget-type="email_body"> {% content_attribute "email_body" %}<p>Hi {{ contact.firstname }},</p> <p>Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...</p> <p>Use a list to:</p> <ul> <li>Explain the value of your offer</li> <li>Remind the reader what they’ll get out of taking action</li> <li>Show off your skill with bullet points</li> <li>Make your content easy to scan</li> </ul> <p><a href="http://hubspot.com">LINK TO A LANDING PAGE ON YOUR SITE</a> (This is the really important part.)</p> <p>Now wrap it all up with a pithy little reminder of how much you love them.</p> <p>Aw. You silver-tongued devil, you.</p> <p>Sincerely,</p> <p>Your name</p>{% end_content_attribute %} </div><!--end widget-span --> </td> </tr> </table> </td> </tr> <tr> <td align="center" valign="top" class="bodyContent" width="100%" colspan="12"> <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper"> <tr> <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; "> <div class="widget-span widget-type-text " style="padding: 10px 0px 0px 0px; text-align: right; " data-widget-type="text"> <div class="layout-widget-wrapper"> {% text "social_sharing_label" label='Social Sharing Label' %} </div><!--end layout-widget-wrapper --> </div><!--end widget-span --> </td> </tr> </table> </td> </tr> <tr> <td align="center" valign="top" class="bodyContent" width="100%" colspan="12"> <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper"> <tr> <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; "> <div class="widget-span widget-type-social_sharing " style="padding: 10px 0px 0px 0px; text-align: right; " data-widget-type="social_sharing"> <div class="layout-widget-wrapper"> {% widget_block social_sharing "Social Sharing" label="Social Sharing", use_page_url=False %} {% end_widget_block %} </div><!--end layout-widget-wrapper --> </div><!--end widget-span --> </td> </tr> </table> </td> </tr> </div><!--end body wrapper --> </table> </td> </tr> </table> <!-- End Template Wrapper --> </td> </tr> <tr> <td align="center" valign="top"> <!-- Begin Template Footer --> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="footerTable"> <div class="footer-container-wrapper"> <tr> <td align="center" valign="top" class="bodyContent" width="100%" colspan="12"> <table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper"> <tr> <td align="center" valign="top" colspan="12" width="100.0%" class="column" style="text-align: left; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; "> <div class="widget-span widget-type-email_can_spam " style="" data-widget-type="email_can_spam"> <p id="footer" style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: center; font-size: 12px; line-height: 1.34em; color: {{ secondary_font_color }}; display: block"> {{ site_settings.company_name }} {{ site_settings.company_street_address_1 }} {{ site_settings.company_street_address_2 }} {{ site_settings.company_city }}, {{ site_settings.company_state }} {{ site_settings.company_zip }} {{ site_settings.company_country }} <br/><br/> You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }}. <br/><br/> Update your <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};">email preferences</a> to choose the types of emails you receive. <br/><br/> <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link_all }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};">Unsubscribe from all future emails</a> </p> </div><!--end widget-span --> </td> </tr> </table> </td> </tr> </div><!--end footer wrapper --> <tr> {% hubspot_footer %} </tr> </table> <!-- End Template Footer --> </td> </tr> </table> <!-- End Template Container --> </td> </tr> </table> </body> </html>

Plantilla de correo básica

Los diseños básicos de las plantillas de HubSpot utilizan un marcador diferente y no incluyen las consultas de medios que hacen que el correo electrónico sea adaptable. Los diseños básicos también utilizan variables de color y fuente que se conectan con Configuración > Marketing > Correo electrónico.

<!DOCTYPE html> <html bgcolor="{{ background_color }}" style="margin: 0; padding: 0; background-color: {{ background_color }}"> <head> <title>{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}</title> <meta property="og:title" content="{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}"> <meta name="twitter:title" content="{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}"> {% if content.meta_description %}<meta name="description" content="{{ content.meta_description }}" />{% endif %} <style type="text/css"> /*<![CDATA[*/ /* iOS automatically adds a link to addresses */ /* Style the footer with the same color as the footer text */ #footer a { color: {{ secondary_font_color }}; -webkit-text-size-adjust: none; text-decoration: underline; font-weight: normal } {% if email_main_body_box_shadow_css and email_main_body_box_shadow_css != '' %} #main_body { box-shadow: {{ email_main_body_box_shadow_css }}; } {% endif %} /* Hide preview text on rendering */ #preview_text { display: none; } /*]]>*/ </style> <!-- http://www.emailon@cid.com/blog/details/C13/ensure_that_your_entire_email_is_rendered_by_default_in_the_iphone_ipad --> <!-- --> <!-- --> <!-- _/ _/ _/ _/_/_/ _/ --> <!-- _/ _/ _/ _/ _/_/_/ _/ _/_/_/ _/_/ _/_/_/_/ --> <!-- _/_/_/_/ _/ _/ _/ _/ _/_/ _/ _/ _/ _/ _/ --> <!-- _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ --> <!-- _/ _/ _/_/_/ _/_/_/ _/_/_/ _/_/_/ _/_/ _/_/ --> <!-- _/ --> <!-- _/ --> <!-- --> <!-- Extra White Space! --> <!-- --> <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> </head> <body bgcolor="{{ background_color }}" style="margin: 0; padding: 0; background-color: {{ background_color }}" marginheight="0" marginwidth="0" topmargin="0"> <!-- Preview text (text which appears right after subject) --> <div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}</div> <!-- start container --> <table bgcolor="{{ background_color }}" style="background-color: {{ background_color }}; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td bgcolor="{{ background_color }}" style="background-color: {{ background_color }};"> <div align="center"> <table cellpadding="0" width="{{ email_body_width }}" cellspacing="0" border="0"> <tr> <td align="center" bgcolor="{{ background_color }}" style="background-color: {{ background_color }}"> <!-- start header section --> <div class="header-container-wrapper"> <table class="wrappertable" cellpadding="0" cellspacing="0" border="0" width="{{ email_body_width }}"> <tr class="scaffold" style="font-size:0; height: 0px" height="0"><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td></tr> <tr> <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; "> <div class="widget-span widget-type-email_view_as_web_page " style="" data-widget-type="email_view_as_web_page"> {% if content.create_page %} <div style="padding-top: 15px; font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: right; font-size: 9px; line-height: 1.34em; color: {{ secondary_font_color }}"> Not rendering correctly? View this email as a web page <a class="hubspot-mergetag" style="color: {{ secondary_font_color }}; text-decoration: underline; white-space: nowrap" data-viewaswebpage="true" href="{{ view_as_page_url }}">here</a>. </div> {% endif %} </div><!--end widget-span --> </td> </tr> </table> </div><!--end header wrapper --> <!-- end header section --> </td> </tr> </table> </div> </td> </tr> <tr> <td bgcolor="{{ background_color }}" style="padding: 10px 20px; background-color: {{ background_color }}"> <div align="center"> <table cellpadding="0" width="{{ email_body_width }}" cellspacing="0" border="0"> <tr> <td id="main_body" width="{{ email_body_width }}" bgcolor="{{ body_color }}" style="padding: {{ email_body_padding }}px; background-color: {{ body_color }}; {{ email_body_border_css }}; border-radius: 4px"> <div align="center"> <table cellpadding="0" width="{{ email_body_width }}" cellspacing="0" border="0"> <!-- start content --> <tr> <td style="padding: 0; background-color: {{ body_color }}"> <div align="center"> <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}"> <tr> <td> <div align="center"> <!-- start body section --> <div class="body-container-wrapper"> <table class="wrappertable" cellpadding="0" cellspacing="0" border="0" width="{{ email_body_width }}"> <tr class="scaffold" style="font-size:0; height: 0px" height="0"><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td></tr> <tr> <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; "> <div class="widget-span widget-type-logo " style="" data-widget-type="logo"> <div class="layout-widget-wrapper"> {% logo "logo_image" suppress_company_name=True, overrideable=True, label="Logo" %} </div><!--end layout-widget-wrapper --> </div><!--end widget-span --> </td> </tr> <tr> <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; "> <div class="widget-span widget-type-email_body " style="" data-widget-type="email_body"> {% content_attribute "email_body" %}<p>Hi {{ contact.firstname }},</p> <p>Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...</p> <p>Use a list to:</p> <ul> <li>Explain the value of your offer</li> <li>Remind the reader what they’ll get out of taking action</li> <li>Show off your skill with bullet points</li> <li>Make your content easy to scan</li> </ul> <p><a href="http://hubspot.com">LINK TO A LANDING PAGE ON YOUR SITE</a> (This is the really important part.)</p> <p>Now wrap it all up with a pithy little reminder of how much you love them.</p> <p>Aw. You silver-tongued devil, you.</p> <p>Sincerely,</p> <p>Your name</p>{% end_content_attribute %} </div><!--end widget-span --> </td> </tr> <tr> <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; "> <div class="widget-span widget-type-text " style="padding: 10px 0px 0px 0px; text-align: right; " data-widget-type="text"> <div class="layout-widget-wrapper"> {% text "social_sharing_label" overrideable=True, label="Social Sharing Label" %} </div><!--end layout-widget-wrapper --> </div><!--end widget-span --> </td> </tr> <tr> <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; "> <div class="widget-span widget-type-social_sharing " style="padding: 10px 0px 0px 0px; text-align: right; " data-widget-type="social_sharing"> <div class="layout-widget-wrapper"> {% widget_block social_sharing "Social Sharing" label='Social Sharing', overrideable=True, use_page_url=False %} {% end_widget_block %} </div><!--end layout-widget-wrapper --> </div><!--end widget-span --> </td> </tr> </table> </div><!--end body wrapper --> <!-- end body section --> </div> </td> </tr> </table> </div> </td> </tr> <!-- end content --> </table> </div> </td> </tr> </table> </div> </td> </tr> <tr> <td bgcolor="{{ background_color }}" style="background-color: {{ background_color }}; padding: 13px {{ email_body_padding }}px"> <div align="center"> <table cellpadding="0" width="{{ email_body_width }}" cellspacing="0" border="0"> <tr> <td align="center" bgcolor="{{ background_color }}" style="background-color: {{ background_color }}"> <!-- start footer section --> <div class="footer-container-wrapper"> <table class="wrappertable" cellpadding="0" cellspacing="0" border="0" width="{{ email_body_width }}"> <tr class="scaffold" style="font-size:0; height: 0px" height="0"><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td><td colspan="1" height="0" width="8.33%" style="line-height: 0px; font-size: 0px; height: 0px"> </td></tr> <tr> <td valign="top" colspan=12 width="100.0%" class="" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; "> <div class="widget-span widget-type-email_can_spam " style="" data-widget-type="email_can_spam"> <p id="footer" style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: center; font-size: 12px; line-height: 1.34em; color: {{ secondary_font_color }}; display: block"> {{ site_settings.company_name }} {{ site_settings.company_street_address_1 }} {{ site_settings.company_street_address_2 }} {{ site_settings.company_city }}, {{ site_settings.company_state }} {{ site_settings.company_zip }} {{ site_settings.company_country }} <br/><br/> You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }}. <br/><br/> Update your <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};">email preferences</a> to choose the types of emails you receive. <br/><br/> <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link_all }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};">Unsubscribe from all future emails</a> </p> </div><!--end widget-span --> </td> </tr> </table> </div><!--end footer wrapper --> <!-- end footer section --> </td> </tr> <tr> {% hubspot_footer %} </tr> </table> </div> </td> </tr> </table> <!-- end container --> </body> </html>

Comenzar desde cero

Cuando empiezas desde cero creando un correo electrónico .html en el Administrador de diseño, HubSpot generará automáticamente el marcador de abajo.

<!doctype html> <html> <head> <title>{% if content.html_title and content.html_title != '' %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}</title> {% if content.meta_description %}<meta name="description" content="{{ content.meta_description }}"/>{% endif %} <style type="text/css" id="hs-inline-css"> /*<![CDATA[*/ /* everything in this style tag will be inlined onto matching elements */ .sample-rule { } /*]]>*/ </style> </head> <body> <!-- Preview text (text which appears right after subject in certain email clients) --> <div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}</div> <!-- View as webpage link --> {% if content.create_page %} <div> Not rendering correctly? View this email as a web page <a class="hubspot-mergetag" data-viewaswebpage="true" href="{{ view_as_page_url }}">here</a>. </div> {% endif %} <!-- Insert body here --> <!-- Office location information and unsubscribe links --> <p id="footer"> {{ site_settings.company_name }}&nbsp; {{ site_settings.company_street_address_1 }}&nbsp; {{ site_settings.company_street_address_2 }}&nbsp; {{ site_settings.company_city }}&nbsp; {{ site_settings.company_state }}&nbsp; {{ site_settings.company_zip }}&nbsp; {{ site_settings.company_country }}&nbsp; <br/> You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }}. <br/> Update your <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link }}">email preferences</a> to choose the types of emails you receive. <br/> <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link_all }}">Unsubscribe from all future emails</a> </p> </body> </html>
¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.