Esta guía explica cómo personalizar y dar estilo a la plantilla HTML externa para todos los correos electrónicos enviados desde su sitio de Discourse.
Nivel de usuario requerido: Administrador
Todos los correos electrónicos enviados desde su sitio están envueltos en una plantilla HTML que se puede personalizar.
Esta guía cubre:
- Acceso a la sección de personalización de estilos de correo electrónico
- Modificación de la plantilla HTML
- Adición de CSS personalizado
- Pruebas de plantillas de correo electrónico
- Reversión de cambios
- Un ejemplo de plantilla personalizada
- Interacción con los correos electrónicos de resumen (digest)
- Cambio de fuentes de correo electrónico
Acceso a la personalización de estilos de correo electrónico
- Navegue a Administrador / Correo electrónico / Apariencia en su sitio de Discourse.
- Verá un editor donde puede modificar el HTML y el CSS para su plantilla de correo electrónico.
Modificación de la plantilla HTML
El marcado predeterminado en el editor contiene un marcador de posición %{email_content} en la sección body. Este marcador de posición es donde se insertará el contenido de cada correo electrónico. Puede realizar cualquier cambio en la plantilla siempre y cuando no elimine este marcador de posición.
Para obtener información sobre cómo personalizar el contenido que reemplaza el marcador de posición %{email_content}, consulte cómo personalizar plantillas de correo electrónico específicas.
Adición de CSS personalizado
Puede utilizar la sección CSS del editor de Estilo de Correo Electrónico para inyectar estilos en línea en su plantilla. Aquí hay un ejemplo:
-
Agregue una clase CSS a un elemento HTML en la plantilla:
<td class="my-outer-td"> </td> -
Cree una regla para la clase en el editor de CSS:
.my-outer-td { padding: 30px 0 30px 0; }
Discourse reemplazará la clase CSS con la regla CSS real antes de enviar el correo electrónico. Puede agregar cualquier regla CSS que desee aquí.
Pruebas de plantillas de correo electrónico
Es fundamental probar los cambios de su plantilla de correo electrónico en varios clientes de correo electrónico, ya que pueden interpretar el HTML de manera diferente. Utilice un servicio de prueba de correo electrónico para previsualizar cómo aparecerán sus correos electrónicos en diferentes clientes, especialmente para cambios significativos.
Reversión de cambios
Para revertir la personalización de su plantilla:
- Desplácese hasta la parte inferior del editor de plantillas.
- Haga clic en el botón “Restablecer a predeterminado” (“Reset to default”).
Esta acción reemplazará sus cambios con la plantilla de correo electrónico predeterminada de Discourse.
Ejemplo de plantilla personalizada
Aquí hay una plantilla de correo electrónico básica que limita el ancho de los correos electrónicos a un máximo de 600px y agrega un logotipo en la parte superior:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<!--[if mso]>
<style type="text/css">
body, table, td, th, h1, h2, h3 { font-family: Helvetica, Arial, sans-serif !important; }
</style>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 10px 0 30px 0;">
<!--[if gte mso 9]>
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;border-collapse: collapse;">
<tr>
<td style="padding: 20px 15px 20px 15px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<a href="https://forum.example.com">
<img src="https://your-site-logo-url" alt="Your site name" width="150" height="40" style="display: block;"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 15px 0 15px;">
<hr style="background-color: #ddd; height: 1px; border: 1px;" />
</td>
</tr>
<tr>
<td style="padding: 20px 15px 30px 15px; color: #153643; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;">
%{email_content}
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
Recuerde reemplazar los atributos src, alt e href de la imagen con la información específica de su sitio.
Así es como se ve en diferentes tamaños de pantalla
iPad Pro (10.5 pulgadas) (iOS 13.1):
Gmail (Chrome):
iPhone 11 Pro Max (iOS 13.1):
Outlook 2019 (Windows 10)
Interacción con los correos electrónicos de resumen (digest)
Si su plantilla personalizada agrega un logotipo a todos los correos electrónicos, tiene dos opciones para los correos electrónicos de resumen:
-
Para usar el estilo predeterminado del correo electrónico de resumen:
- Deshabilite la configuración del sitio
apply custom styles to digest(aplicar estilos personalizados al resumen).
- Deshabilite la configuración del sitio
-
Para mantener un estilo consistente en todos los correos electrónicos de notificación:
- Elimine cualquier imagen configurada como la configuración del sitio
digest logo(logotipo del resumen). - Agregue
<span></span>a la personalización de texto en.../admin/customize/site_texts/user_notifications.digest.custom.html.header.
- Elimine cualquier imagen configurada como la configuración del sitio
Cambio de fuentes de correo electrónico
Para cambiar las fuentes en sus correos electrónicos:
-
Utilice fuentes seguras para la web para la máxima compatibilidad. Consulte CSS Font Stack para obtener una lista de fuentes disponibles en Windows y Mac.
-
Agregue reglas CSS para las fuentes a su plantilla de correo electrónico de Discourse.
-
Puede establecer fuentes directamente en elementos HTML, por ejemplo:
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;"> %{email_content} </td>
Tenga en cuenta que muchas aplicaciones de correo electrónico no admiten fuentes web de servicios externos.
Recursos adicionales
Para obtener más información sobre la creación de correos electrónicos HTML, puede consultar esta guía completa sobre cómo crear una plantilla de correo electrónico HTML desde cero.
