Aquí encontrará recetas que le ayudarán a usar HTML para personalizar el aspecto de los correos electrónicos que envía desde su cuenta. Personalizar el aspecto de su correo electrónico contribuye a dar una imagen más coherente de su marca y mejorar la interacción con el cliente. Por ejemplo, puede agregar el logotipo de su compañía o una pancarta con una llamada a la acción al diseño del correo electrónico para reflejar la identidad de la marca de su compañía o el aspecto de su centro de ayuda.
El aspecto y funcionamiento de las notificaciones de correo electrónico que se envían desde su cuenta de Zendesk dependen en gran medida de un par de plantillas del Centro de administración, una de HTML y la otra de texto sin formato. La plantilla de texto sin formato no admite el tipo de personalización que describimos en este recetario. Si desea detalles sobre este asunto, consulte Personalización de las plantillas de correo electrónico para las notificaciones.
Este recetario contiene los siguientes temas:
- Patrones de diseño comunes para las notificaciones por correo electrónico
- Pautas y mejores prácticas de HTML para el correo electrónico
- Receta: Agregar el logotipo de la compañía
- Receta: Agregar el estandarte de la compañía
- Receta: Agregar una pancarta de llamada a la acción
- Receta: Agregar un pie de página
- Receta: Agregar vínculos de redes sociales en el pie de página
- Receta: Personalizar el cuerpo del correo electrónico
- Probar los cambios
Las recetas emplean HTML y CSS para personalizar las notificaciones por correo electrónico. Si desea una introducción y referencia de CSS, consulte CSS en Mozilla Developer Network.
Patrones de diseño comunes para las notificaciones por correo electrónico
Comprender los patrones de diseño comunes le ayudará a crear diseños más cohesivos y eficaces que reflejen bien su marca.
La mayoría de los correos electrónicos de notificación tienen unos pocos componentes:
- Logotipo: una imagen de logotipo.
- Estandarte de la compañía: una opción para no usar solo el logotipo.
- Contenido: el cuerpo del correo electrónico.
- Pancarta de llamada a la acción: una invitación pensada para que el usuario haga algo (incorporarse a su comunidad, usar su centro de ayuda, probar un nuevo producto, etc).
- Pie de página: puede contener diversos tipos de información, como datos de contacto, vínculos de redes sociales, etc.
Todos los componentes de la plantilla de correo electrónico son opcionales, excepto el contenido.
En este recetario se describe cómo crear e insertar elementos de diseño en la plantilla de correo electrónico. También puede combinar distintos elementos para crear su propio diseño de correo electrónico. A continuación puede ver algunos patrones de diseño habituales:
| Logotipo de la compañía | Logotipo de la compañía con pie de página |
 |
 |
| Estandarte de la compañía con pie de página | Estandarte de la compañía con pancarta de llamada a la acción y pie de página |
 |
 |
Si busca inspiración, puede examinar algunos diseños de correo electrónico en el blog de Lotus Themes.
Pautas y mejores prácticas de HTML para el correo electrónico
Diseñar el aspecto y funcionamiento de los correos electrónicos puede ser todo un reto porque HTML y CSS pueden generar resultados distintos según las aplicaciones de correo electrónico. Puede suceder incluso que algunos tipos de formato se interpreten como spam.
Guíese por las pautas indicadas a continuación a la hora de diseñar su correo electrónico.
- Optar siempre por la sencillez. Elija un diseño sencillo y evite las estructuras complejas.
- Usar tablas. Algunas aplicaciones de correo electrónico podrían no representar correctamente los diseños basados en CSS, por lo que crear diseños con tablas de HTML le resultará más seguro.
-
Usar estilos CSS incorporados. Use estilos incorporados, es decir, estilos que se definen en el atributo
stylede un elemento HTML, como este:<p style="width=400px;">. No todas las aplicaciones de correo electrónico admiten las hojas de estilo importadas o los estilos que se definen en una etiqueta<style>. - Usar tipos de letra seguros para la web. Use tipos de letra seguros para la web, como Arial, Verdana o Georgia. Las fuentes tipográficas personalizadas podrían no ser admitidas o no ser representadas correctamente en todas las aplicaciones de correo electrónico.
- Limitar el formato de texto al mínimo. Reducir al mínimo el formato de texto ayuda a mantener el diseño pulcro y ordenado. Cabe señalar, además, que el uso de mucho texto en negrita puede activar los filtros de spam.
Siga estas pautas en lo que respecta a las imágenes.
- Usar imágenes con moderación. Un número reducido de imágenes ayuda a mantener el diseño pulcro y ordenado. Cabe señalar, además, que el uso de muchas imágenes puede activar los filtros de spam.
- Establecer el tamaño de las imágenes con CSS. Use estilos incorporados para ajustar el tamaño de las imágenes en su diseño. Las imágenes que no tienen un tamaño definido tienden a distorsionar la presentación de los correos electrónicos. Para mayor tranquilidad, cambie el tamaño de las imágenes físicamente por medio de remuestreo.
- Usar las etiquetas ALT en todas las imágenes. Las etiquetas ALT muestran una descripción de la imagen que el usuario verá antes de permitir que se muestre la imagen.
- No vincular imágenes en una cuenta de Zendesk cerrada. Las imágenes se dañan si el destinatario previsto no es un usuario registrado y no ha iniciado sesión.
Receta: Agregar el logotipo de la compañía
En esta receta aprenderá a agregar el logotipo de su compañía a la plantilla de correo electrónico. Ejemplo:
Ingredientes
- URL de la imagen de logotipo de la compañía
Receta
- Pegue el siguiente bloque de código en un editor de HTML o de texto:
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 0px; padding-bottom: 0px;"> <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto;"> </td> </tr> </tbody> </table> - Haga cualquiera de los siguientes cambios para personalizar el logotipo:
Cambio Imagen de logotipo
Elemento: img > src
Cambie el valor del marcador de posición del atributo
srcpor el URL de la imagen de logotipo.Ejemplo:
img src="https://www.example.com/images/logo_acme.png"Tamaño de logotipo
Elemento: img > style > width
Cambie el valor
widthpara cambiar el tamaño del logotipo.Ejemplo:
img style="width: 120px; height: auto; ..."Espacio alrededor del logotipo
Si tiene demasiado espacio alrededor de su logotipo, es posible que deba recortar el espacio en blanco que rodea la imagen con una herramienta de edición.
Si no hay suficiente espacio alrededor de la imagen, puede aumentar el relleno de la celda de la tabla.
Elemento: td > style
Agregue
paddingal atributostyley ajuste su valor.Ejemplo:
td style="padding: 10px; ..."Alineación horizontal del logotipo
Elemento: td > align
Elija center, left o right (centro, izquierda, derecha).
Ejemplo:
td align="left"Espaciado vertical del logotipo
Elemento: td > style > padding-top
Cambie el valor
padding-toppara insertar espacio encima del logotipo.Elemento: td > style > padding-bottom
Cambie el valor
padding-bottompara insertar espacio debajo del logotipo.Ejemplo:
td style="padding-top: 15px; padding-bottom: 5px; ..." - Ajuste otros valores según se necesite.
- Guarde el archivo con una extensión .html y previsualice los cambios con frecuencia en un navegador.
- Previsualice el logotipo en una plantilla de correo electrónico de prueba antes de agregarlo a la plantilla de correo electrónico de su cuenta.
- Cuando tenga todo listo para publicar, inserte el bloque del código de logotipo en el siguiente lugar en la plantilla de HTML para correo electrónico del Centro de administración (Centro de administración > Canales > Correo electrónico).
Receta: Agregar el estandarte de la compañía
En esta receta aprenderá a agregar el estandarte de su compañía a la plantilla de correo electrónico. El estandarte de una compañía normalmente está compuesto por el logotipo de la compañía y el nombre sobre un color de fondo. Ejemplo:
Ingredientes
- URL de la imagen de logotipo de la compañía
- Valores de colores emblemáticos de la marca
Receta
- Pegue el siguiente bloque de código en un editor de HTML o de texto:
<table style="background-color: #c0c7d8;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px;"> <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto; margin-right: 10px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 24px; font-weight: bold; color: #333; margin-top: 50px;">Company name</p> </td> </tr> </tbody> </table> - Haga cualquiera de los siguientes cambios para personalizar el estandarte de la compañía:
Cambio Imagen de logotipo
Elemento: img > src
Cambie el valor del marcador de posición del atributo
srcpor el URL de la imagen de logotipo.Ejemplo:
img src="https://www.example.com/images/logo_acme.png"Tamaño de logotipo
Elemento: img > style > width
Cambie el valor
widthpara cambiar el tamaño del logotipo.Ejemplo:
img style="width: 120px; height: auto; ..."Espacio alrededor del logotipo
Si hay demasiado espacio alrededor de su logotipo, es posible que tenga que recortar el espacio en blanco alrededor de la imagen con una herramienta de edición de imágenes.
Si no hay suficiente espacio alrededor de la imagen, puede aumentar el relleno de la celda de la tabla.
Elemento: td > style
Agregue
paddingal atributostyley ajuste su valor.Ejemplo:
td style="padding: 10px; ..."Formato del nombre de la compañía
Elemento: p > style
Cambie cualquiera de los estilos de texto o añada el suyo propio.
Ejemplo:
p style="font-size: 30px; color: #553e3e; ..."Espacio entre el logotipo y el nombre de la compañía
Elemento: img > style > margin-right
Aumente o reduzca el valor
margin-rightpara aumentar o reducir el espacio entre el logotipo y el nombre.Ejemplo:
img style="margin-right: 15px; ..."Alineación vertical del nombre de la compañía en relación al logotipo
Elemento: p > style > margin-top
Aumente o reduzca el valor
margin-toppara mover el nombre de la compañía más arriba o más abajo en relación al logotipo.Ejemplo:
p style="margin-top: 40px; ..."Color de fondo del estandarte
Elemento: table > style > background-color
Cambie el valor hexadecimal de #d3d3d3 del estilo
background-colorpor su propio valor. Consulte las pautas de su marca o un selector de colores en línea como html-color.codes.Ejemplo:
table style="background-color: #d8e3fb; ..." - Ajuste otros valores según se necesite.
- Guarde el archivo con una extensión .html y previsualice los cambios con frecuencia en un navegador.
- Previsualice el estandarte en una plantilla de correo electrónico de prueba antes de agregarlo a la plantilla de correo electrónico de su cuenta.
- Cuando tenga todo listo para publicar, pegue el bloque del código del estandarte en el siguiente lugar en la plantilla de HTML para correo electrónico del Centro de administración (Centro de administración > Canales > Correo electrónico).
Receta: Agregar una pancarta de llamada a la acción
En esta receta aprenderá a agregar una pancarta de llamada a la acción a la plantilla de correo electrónico. La pancarta de llamada a la acción por lo general se encuentra después del cuerpo del correo electrónico. Normalmente se usa para invitar al usuario a que haga algo: incorporarse a su comunidad, usar su centro de ayuda, probar un nuevo producto, etc. Consta de un gráfico, un texto y un vínculo, todo sobre un color de fondo. Ejemplo:
Ingredientes
- Texto de llamada a la acción
- URL de una imagen de llamada a la acción
- URL de un vínculo para ayudar a los usuarios a completar la llamada a la acción
- Valores de colores emblemáticos de la marca
Receta
- Pegue el siguiente bloque de código en un editor de HTML o de texto:
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px; padding-left: 50px; margin-top: 12px; margin-bottom: 8px;"> <div id="cta-text" style="width: 300px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #333; margin-top: 6px;">Take a hand, lend a hand</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 14px;">Join our worldwide community to ask expert users for advice or share your own.</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px;"><a href="#">Ask the community</a></p> </div> <div id="cta-image" style="padding-left: 20px;"> <img src="cta_image.png" alt="cta_image" style="width: 140px; height: auto; border-radius: 50% 50% 0 0;"> </div> </td> </tr> </tbody> </table> - Agregue su llamada a la acción en las tres etiquetas de párrafo. Agregue o elimine los párrafos según se necesite.
- Haga cualquiera de los siguientes cambios para personalizar la pancarta de llamada a la acción:
Cambio Imagen de la llamada a la acción
Elemento: img > src
Cambie el valor del marcador de posición del atributo
srcpor el URL de la imagen de llamada a la acción.Ejemplo:
img src="https://www.example.com/images/cta_image.png"Tamaño de imagen
Elemento: img > style > width
Cambie el valor
widthpara cambiar el tamaño de su imagen.Ejemplo:
img style="width: 120px; height: auto; ..."Formato de los mensajes de llamada a la acción
Elemento: p > style
Cambie cualquiera de los estilos de texto o añada el suyo propio.
Ejemplo:
p style="font-size: 30px; color: #553e3e; ..."Espacio entre los mensajes y la imagen
Elemento: div id="cta-image" > style > padding-left
Aumente o reduzca el valor de
padding-leftpara aumentar o reducir el espacio entre los mensajes y la imagen.Ejemplo:
div id="cta-image" style="padding-left: 30px; ..."Color de fondo de la pancarta
Elemento: table > style > background-color
Cambie el valor hexadecimal de #d8e3fb del estilo
background-colorpor su propio valor. Consulte las pautas de su marca o un selector de colores en línea como html-color.codes.Ejemplo:
table style="background-color: #d3d3d3; ..." - Ajuste otros valores según se necesite.
- Guarde el archivo con una extensión .html y previsualice los cambios con frecuencia en un navegador.
- Previsualice la pancarta en una plantilla de correo electrónico de prueba antes de agregarla a la plantilla de correo electrónico de su cuenta.
- Cuando tenga todo listo para publicar, pegue el bloque del código del estandarte en el siguiente lugar en la plantilla de HTML para correo electrónico del Centro de administración (Centro de administración > Canales > Correo electrónico).
Receta: Agregar un pie de página
En esta receta aprenderá a agregar el pie de página a la plantilla de correo electrónico. Un pie de página puede contener varios tipos de información, como los datos de contacto, los vínculos de redes sociales, etc. Si desea información sobre los vínculos de redes sociales, consulte la siguiente receta, Receta: Agregar vínculos de redes sociales en el pie de página.
La plantilla de correo electrónico estándar ya ofrece los siguientes marcadores de posición para un pie de página:
-
{{footer}}: muestra la frase "Este correo electrónico es un servicio de Acme.", donde "Acme" es el nombre de su compañía. -
{{footer_link}}: muestra en el correo electrónico la frase "Entregado por Zendesk.", junto con un vínculo en "Zendesk" que lleva a zendesk.com.
Estos marcadores de posición se pueden complementar o reemplazar con su propio pie de página.
En esta receta, podrá crear un pie de página que ofrece información de contacto y se encargará de reemplazar los marcadores de posición {{footer}} y {{footer_link}}. Ejemplo:
Ingredientes
- Información de contacto de su compañía
- Valores de colores emblemáticos de la marca
Receta
- Pegue el siguiente bloque de código en un editor de HTML o de texto:
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p> </td> </tr> </tbody> </table> - Cambie la información de contacto en las tres etiquetas de párrafo.
- Haga cualquiera de los siguientes cambios para personalizar el pie de página:
Cambio Color de fondo del pie de página
Elemento: table > style > background-color
Cambie el valor hexadecimal de #d8e3fb del estilo
background-colorpor su propio valor. Consulte las pautas de su marca o un selector de colores en línea como html-color.codes.Ejemplo:
table style="background-color: #d3d3d3; ..."Color de texto
Elemento: p > style > color
Seleccione el valor
color.Ejemplo:
p style="color: #553e3e; ..."Formato de texto
Elemento: p > style
Cambie cualquiera de los estilos de texto o añada el suyo propio.
Ejemplo:
p style="font-family: Georgia, sans-serif; ..."Espacio desde los márgenes superior e inferior
Elemento: td > style > padding-top
Aumente o reduzca el valor
padding-toppara cambiar el espacio entre el margen superior y el texto.Ejemplo:
td style="padding-top: 8px; ..."Elemento: td > style > padding-bottom
Aumente o reduzca el valor
padding-bottompara cambiar el espacio entre el texto y el margen inferior.Ejemplo:
td style="padding-bottom: 8px; ..." - Ajuste otros valores según se necesite.
- Guarde el archivo con una extensión .html y previsualice los cambios con frecuencia en un navegador.
- Previsualice el pie de página en una plantilla de correo electrónico de prueba antes de agregarlo a la plantilla de correo electrónico de su cuenta.
- Cuando tenga todo listo para publicar, pegue el bloque de código en el siguiente lugar en la plantilla de HTML para correo electrónico del Centro de administración (Centro de administración > Canales > Correo electrónico).
Receta: Agregar vínculos de redes sociales en el pie de página
Esta receta muestra cómo agregar vínculos de redes sociales a un pie de página personalizado.
{{footer}} presente botones que lleven a sus canales de redes sociales. Consulte Agregar botones de redes sociales al correo electrónico. Ejemplo:
Ingredientes
- URL de imágenes de redes sociales que se pueden usar como botones
- Vínculos a las cuentas de redes sociales
Receta
- Pegue el siguiente bloque de código en un editor de HTML o de texto:
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p> </td> </tr> </tbody> </table>Esta es la receta para crear un pie de página con información de contacto (Receta: Agregar un pie de página).
- Agregar iconos de redes sociales al HTML antes de la primera etiqueta de párrafo. Ejemplo:
<div style="padding-top: 12px; padding-bottom: 0px;"> <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_facebook.png"/></a> <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_x.png"/></a> <a href="#"><img style="width: 30px;" src="https://www.example.com/images/icon_instagram.png"/></a> </div> - Para cada vínculo de red social, cambie el URL para el vínculo (
href="...") y la imagen de icono (src="..."). - Haga cualquiera de los siguientes cambios para personalizar los iconos:
Cambio
Tamaño de los iconos
Elemento: img > style > width
Asegúrese de que todos los iconos tengan el mismo valor de ancho.
Ejemplo:
img style="width: 24px; ..."Espaciado entre los iconos
Elemento: img > style > padding-right
Cambie el valor del estilo
padding-rightde cada vínculo de red social, excepto el último.Ejemplo:
img style="padding-right: 8px; ..."Espacio encima y debajo de los iconos
Elemento: div > style > padding-top
Aumente o reduzca el valor de
padding-toppara ajustar el espacio encima de los iconos.Ejemplo:
div style="padding-top: 8px; ..."Elemento: div > style > padding-bottom
Aumente o reduzca el valor de
padding-bottompara ajustar el espacio debajo de los iconos.Ejemplo:
div style="padding-bottom: 10px; ..." - Ajuste otros valores según se necesite.
- Guarde el archivo con una extensión .html y previsualice los cambios con frecuencia en un navegador.
- Previsualice el pie de página en una plantilla de correo electrónico de prueba antes de agregarlo a la plantilla de correo electrónico de su cuenta.
- Cuando tenga todo listo para publicar, pegue el bloque de código en el siguiente lugar en la plantilla de HTML para correo electrónico del Centro de administración (Centro de administración > Canales > Correo electrónico).
Receta: Personalizar el cuerpo del correo electrónico
Esta receta muestra cómo personalizar el cuerpo del correo electrónico. Va a cambiar el tipo de letra y el tamaño del texto, así como el espacio alrededor del cuerpo del correo electrónico.
El correo electrónico consta del mensaje de notificación y la conversación por correo electrónico. En la plantilla de correo electrónico, el cuerpo del correo se representa por medio del marcador de posición {{content}}. Zendesk reemplaza el marcador de posición con el HTML antes de enviar el correo electrónico. Ejemplo:
Parte del HTML insertado por Zendesk contiene estilos que no se pueden modificar ni anular. Si desea detalles sobre este tema, consulte Limitaciones de la personalización del cuerpo del correo electrónico.
Receta
- Pegue el marcador de posición
{{content}}y su etiqueta principal div en un editor de HTML o de texto. Ejemplo:<div style="padding: 10px; line-height: 1.5; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#444444;"> {{content}} </div> - Haga cualquiera de los siguientes cambios a los estilos de la etiqueta div principal para personalizar el cuerpo del correo electrónico.
Cambio Tamaño del texto del mensaje
Elemento: div > style > font-size
Cambie el valor
font-size.Cabe señalar que este cambio no modifica el tamaño del texto del nombre del usuario ni de la hora en que fue enviado el correo electrónico.
Ejemplo:
div style="font-size: 11px; ..."Fuente de texto
Elemento: div > style > font-family
La fuente se puede cambiar hasta cierto punto. Use fuentes compatibles con la web como Trebuchet MS, Verdana o Georgia. Otras fuentes podrían no ser admitidas por algunas aplicaciones de correo electrónico.
Ejemplo:
div style="font-family: 'Trebuchet MS', sans-serif; ..."Espacio alrededor del cuerpo del correo electrónico
Elemento: div > style > padding
Aumente o reduzca el valor
paddingpara cambiar el espacio alrededor del cuerpo del correo electrónico.Ejemplo:
div style="padding: 15px; ..."Si desea cambiar el espacio del lado izquierdo y derecho (digamos a 25 px), especifique dos valores para el estilo
padding. El primer valor es el relleno para la parte superior e inferior y el segundo es el relleno para la izquierda y la derecha.Ejemplo:
div style="padding: 15px 25px; ..." - Agregue otros estilos incorporados o ajuste otros valores según sea necesario.
Tenga en cuenta que determinadas propiedades del cuerpo del correo electrónico no se pueden cambiar. Consulte Limitaciones de la personalización del cuerpo del correo electrónico.
- Guarde el archivo con una extensión .html y previsualice los cambios con frecuencia en un navegador.
- Previsualice los cambios en una plantilla de correo electrónico de prueba antes de agregarlos a la plantilla de correo electrónico de su cuenta.
- Cuando tenga todo listo para publicar, pegue el bloque de código en el siguiente lugar en la plantilla de HTML para correo electrónico del Centro de administración (Centro de administración > Canales > Correo electrónico).
Limitaciones de la personalización del cuerpo del correo electrónico.
Zendesk reemplaza el marcador de posición {{content}} con su propio HTML cuando envía el correo electrónico. Sin embargo, el HTML generado por el sistema contiene estilos incorporados para determinados elementos del cuerpo del correo electrónico. Lamentablemente, estos estilos no se pueden modificar. Tampoco se pueden anular usando estilos incorporados en la plantilla de correo electrónico. En CSS, los estilos incorporados de elementos secundarios tienen preferencia sobre los estilos incorporados de elementos principales, como los divs.
Esta sección describe algunas de las limitaciones de la personalización del cuerpo del correo electrónico. Asegúrese de tomarlas en cuenta a la hora de tomar decisiones de diseño sobre el resto del cuerpo del correo electrónico.
Texto del cuerpo
No es posible cambiar los siguientes estilos para el texto del cuerpo:
- Color de fuente
- Altura de línea
- Márgenes alrededor del texto
La configuración para estos estilos es como sigue:
color: #2b2e2f; line-height: 22px; margin: 15px 0Texto del nombre y la fecha de envío
No es posible cambiar los siguientes estilos para el texto del nombre y de la fecha de envío:
- Color de fuente
- Familia de fuente
- Tamaño de fuente
- Altura de línea
- Márgenes alrededor del texto
La configuración para el texto del nombre es como sigue:
color: #1b1d1e"; font-family: Verdana, Tahoma, sans-serif; font-size: 15px;
line-height: 18px; margin-bottom: 0; margin-top: 0;padding: 0; color: #1b1d1e"La configuración para el texto de la fecha de envío es como sigue:
font-family: Verdana, Tahoma, sans-serif; font-size: 13px; line-height: 25px;
margin-bottom: 15px; margin-top: 0; padding: 0; color: #bbbbbb"Probar los cambios
Puede probar los cambios con la plantilla de correo electrónico de prueba adjunta a esta receta.
Los cambios que se hacen directamente en la plantilla de correo electrónico del Centro de administración se publican de inmediato. Por esa razón, es aconsejable que pruebe los cambios en la plantilla de prueba antes de agregarlos a la plantilla de correo electrónico de su cuenta y se asegure de que están funcionando como es de esperar.
Para probar sus cambios
- Descargue la plantilla de correo electrónico de prueba ( test_email_template.html) adjunta a este artículo y ábrala en un editor de HTML o de texto.
- Pegue el bloque de código para su componente en la ubicación que se indica en la plantilla de correo electrónico de prueba. Ejemplo:
<!-- Paste logo or company banner code block here --> - Abra la plantilla de prueba en un navegador y haga la ventana del navegador más angosta para emular una aplicación de correo electrónico.
- Haga ajustes al código en la plantilla de prueba y luego actualice la página del navegador para ver el efecto que tienen los cambios.
- Continúe haciendo cambios iterativos hasta quedar satisfecho con el diseño.
- Cuando tenga todo listo para publicar, pegue el bloque del código para el componente en la misma ubicación de la plantilla de HTML para correo electrónico del Centro de administración (Centro de administración > Canales > Correo electrónico).