Charles Nadeau

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:

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.

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.

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.

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

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

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

2. 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 src por 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 width para 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 padding al atributo style y 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-right para 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-top para 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-color por 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; ..."

3. Ajuste otros valores según se necesite.
4. Guarde el archivo con una extensión .html y previsualice los cambios con frecuencia en un navegador.
5. 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.
6. 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).

   

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

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

2. Agregue su llamada a la acción en las tres etiquetas de párrafo. Agregue o elimine los párrafos según se necesite.
3. 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 src por 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 width para 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-left para 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-color por 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; ..."

4. Ajuste otros valores según se necesite.
5. Guarde el archivo con una extensión .html y previsualice los cambios con frecuencia en un navegador.
6. 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.
7. 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).

   

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:

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

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

2. Cambie la información de contacto en las tres etiquetas de párrafo.
3. 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-color por 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-top para 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-bottom para cambiar el espacio entre el texto y el margen inferior. Ejemplo: td style="padding-bottom: 8px; ..."

4. Ajuste otros valores según se necesite.
5. Guarde el archivo con una extensión .html y previsualice los cambios con frecuencia en un navegador.
6. 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.
7. 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).

   

Esta receta muestra cómo agregar vínculos de redes sociales a un pie de página personalizado.

Ejemplo:

Ingredientes

• URL de imágenes de redes sociales que se pueden usar como botones
• Vínculos a las cuentas de redes sociales

Receta

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

2. 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>

3. Para cada vínculo de red social, cambie el URL para el vínculo (href="...") y la imagen de icono (src="...").
4. 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-right de 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-top para 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-bottom para ajustar el espacio debajo de los iconos. Ejemplo: div style="padding-bottom: 10px; ..."

5. Ajuste otros valores según se necesite.
6. Guarde el archivo con una extensión .html y previsualice los cambios con frecuencia en un navegador.
7. 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.
8. 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).

   

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

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

2. 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 padding para 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; ..."

3. 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.

4. Guarde el archivo con una extensión .html y previsualice los cambios con frecuencia en un navegador.
5. 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.
6. 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).

   

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

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

3. 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.
4. 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.
5. Continúe haciendo cambios iterativos hasta quedar satisfecho con el diseño.
6. 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).