Esta guía explica cómo personalizar y aplicar estilo a la plantilla HTML externa de 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 se envuelven 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 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 la página Apariencia (Appearance) en la sección Correo electrónico (Email) en la barra lateral de administración, o vaya directamente a
/admin/customize/email_style. - Verá un editor con dos pestañas: HTML y CSS, donde puede modificar la plantilla y los estilos de sus correos electrónicos.
Modificación de la plantilla HTML
El marcado predeterminado en la pestaña HTML contiene varios marcadores de posición (placeholders):
%{email_content}— Requerido. Aquí es donde se insertará el contenido de cada correo electrónico. No debe eliminar este marcador de posición.%{email_preview}— Inserta un texto de vista previa oculto para los clientes de correo electrónico que muestran un fragmento.%{html_lang}— Inserta el código de idioma del sitio en la etiqueta<html>.%{dark_mode_meta_tags}— Inserta etiquetas meta para la compatibilidad con el modo oscuro.%{dark_mode_styles}— Inserta estilos CSS para la representación en modo oscuro.
Al crear una plantilla personalizada, debe incluir todos estos marcadores de posición para garantizar la compatibilidad total. Puede consultar la plantilla predeterminada (visible al abrir el editor por primera vez) como punto de partida.
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 pestaña CSS del editor de Estilo de Correo Electrónico (Email Style) 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 la pestaña 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 las reglas CSS que desee aquí.
Pruebas de plantillas de correo electrónico
Es fundamental probar los cambios en la 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:
- Seleccione la pestaña que desea restablecer (HTML o CSS).
- Haga clic en el botón “Restablecer a predeterminado” (Reset to default) debajo del editor.
Esto restablecerá esa sección específica (HTML o CSS) a la plantilla de correo electrónico predeterminada de Discourse. Cada pestaña se restablece de forma independiente.
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 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 inch) (iOS 13.1):
Gmail (Chrome):
iPhone 11 Pro Max (iOS 13.1):
Outlook 2019 (Windows 10)
Interacción con 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 utilizar 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 coherente 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 (web-safe fonts) para 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 configurar 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 muchos clientes 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.
