Sistema de notificaciones v2 - Edición de las plantillas de correo electrónico
Para poder editar las plantillas de correo electrónico tenemos un sistema What You See Is What You Get que permite personalizar el diseño y los contenidos de una forma sencilla.
Al clicar sobre el icono Editar plantilla en el menú de la plantilla creada o de una plantilla base se abrirá el editor.
En el editor podremos añadir, borrar y editar contenido personalizando la plantilla. También podremos editar los estilos.
Principales funcionalidades del editor
1 - Configuración del cuerpo (body)
- Bloques / columnas
- Divisores
- Textos: Títulos y otros textos
- Imágenes
- HTML
- Botones
- Tags dinámicos
- Tags cíclicos (merge tags)
4 - Previsualización
Configuración del cuerpo (body)
Desde esta configuración se pueden definir diferentes campos. Al clicar sobre el elemento de menú body se abre la ventana lateral para editar.
| Atributo | Descripción |
|---|---|
| Color del texto | Define el color del texto a nivel global |
| Color de fondo | Define el color del fondo del cuerpo de la notificación |
| Anchura del contenido | Anchura en pixeles del contenido que se centrará en la página |
| Alineamiento del contenido | Alineamiento del contenido con respecto al espacio |
| Fuente | Fuente del texto |
| Peso de la fuente | Normal, bold etc |
| Configuración del email (cabecera) | Texto que se muestra en el listado de emails en el inbox |
| Enlaces (color y subrayado) | Color de los enlaces y aparecen subrayados o no |
Edición de contenido
Bloques / columnas
Lo primero que hay que añadir son bloques que pueden ocupar todo el ancho o una parte como si fueran columnas
En el ejemplo hay bloques o columnas 4 a un 25% de anchura cada una.
Estas se pueden configurar seleccionandolas, por lo que puedes modificar su número, el porcentaje y otros atributos como el color de fondo, el espacio entre contenido y borde (padding), el borde o otras propiedades de la columna y de la fila.
Estos bloques se pueden borrar o duplicar desde el menú contextual que aparece al seleccionarlo.
Una parte importante a tener en cuenta es configurar también si ese contenido se va a mostrar en formato móvil o o si se van apilar o no las columnas. El acceso a estas configuraciones esta siempre en el panel derecho cuando se selecciona el elemento.
Divisores, textos, imágenes, HTML y botones se pueden configurar de igual manera desde el menú Contenido
Tags dinámicos
Los tags dinámicos nos van a servir para introducir datos que cambian dependiendo de los datos que tenemos que enviar al cliente.
En el ejemplo he seleccionado Nombre completo del cliente y como se puede ver se sustituye por este. Durante el proceso de edición aparecerá un código que después será sustituido al enviarse por correo.
Puedes consulta los códigos más relevantes desde este artículo
Tags cíclicos (merge tags)
Estos tags son similares a los anteriores pero sirven para un conjunto de datos como puede ser un listado de productos o una tabla con los extras como en el ejemplo. La ventana modal para configurar esos datos se abre desde la etiqueta en el menú contextual.
Edición de estilos
Durante la edición se pueden configurar estilos como el tamaño de los textos, colores, espacios, alineamientos, etc siempre seleccionando el elemento en cuestión y con el panel derecho. Ojo porque los estilos definidos en desktop son los mismos que se mostrarán en móvil salvo que en la pestaña Móvil se configure de otra manera.
Previsualización
Una vez terminada la edición puedes ver el resultado pulsando sobre el botón Previsualizar en la cabecera de la página.