Editor de Plantillas de Email drag and drop
El Editor de Plantillas de Email de DANAConnect es una herramienta que permite crear y editar contenido desde una interfaz drag & drop, lo que significa que no es requerido tener conocimientos en HTML para crear emails ricos visualmente. Además el editor se integra con una librería de plantillas para poder usar su marca dinámicamente y agilizar la creación del html.
Se debe tener creada la marca en la cuenta DANAConnect. Ver cómo crear marcas
Ayuda a acelerar la creación de plantillas de email para todo el ciclo de vida del cliente. Entre estas se pueden destacar:
Posee un kit de plantillas especializadas para todo el ciclo de vida del cliente, haciendo mucho énfasis en productos de la industria de Servicios Financieros.
Gestor de marcas, lo cual permite adaptar de forma rápida las plantillas incluidas con la marca de su empresa.
Elementos especiales en los emails para facilitar la medición de experiencias de los clientes y adopción de aplicaciones móviles.
Para obtener la mejor experiencia de edición, le recomendamos encarecidamente que utilice, como navegador, la última versión de Chrome.
El editor se divide principalmente en 3 secciones diferentes:
Lienzo: la sección más grande e importante. Aquí verá que su proyecto cobra vida, al crear diseños con bloques y organizarlos mediante la capacidad de arrastrar y soltar
Barra lateral derecha: la barra lateral derecha es responsable de controlar el comportamiento y los estilos (color, fondo, etc.) de cualquier componente que se coloque en el lienzo, la configuración de los componentes, las capas o la estructura jerárquica de la página y los Bloques de componentes para agregar. la página.
Barra superior: esta sección contiene diferentes comandos para la edición y administración de su proyecto, como vista previa sin bordes, vista previa, ver código, deshacer, rehacer, importar, borrar lienzo y guardar página.
Debe saber que todos los elementos que se colocan en el lienzo son lo que llamamos Bloques. Un bloque puede ser un elemento realmente simple como una imagen y texto o también una composición compleja de otros bloques. Por esta razón, los hemos dividido en diferentes categorías, pero la más importante es definitivamente los Bloques Básicos, tener un buen conocimiento sobre cómo funcionan ayudará a crear y administrar todas las demás categorías.
Como puede ver, la categoría Bloques básicos está seleccionada de forma predeterminada y debajo también hay otras subcategorías, por ahora, nos vamos a enfocar en la básica.
Haga clic en la subcategoría Básica para mostrar todos los bloques disponibles en ella y centrémonos en 3 bloques realmente fundamentales: Bloque de Sección, Bloque de texto y Bloque de imágenes.
La sección es bastante fácil de usar y comprender, puede colocarla solo en la capa raíz (el cuerpo) de la página, no es encajable, por lo que no puede colocar una sección en otra. El propósito de este bloque es bastante simple, mantener su contenido centrado y responsive. Todo lo que debe hacer es colocarlo en el lienzo y verá su contorno.
Puede comenzar a colocar en el Lienzo lo que quiera, el editor no lo limita, pero para que su contenido se vea bien en múltiples dispositivos, le recomendamos que comience con este Bloque.
Verá que la Sección tiene un elemento interno llamado Celda, aquí es donde soltaremos nuestro contenido y es responsable de mantener nuestro contenido centrado. También tiene el ancho configurado como aplicado automáticamente de forma predeterminada, pero puede cambiarlo si desea que su contenido se coloque en un tamaño específico.
Para centrar el bloque, establezca el margen izquierdo y derecho en automático.
Ahora que hemos colocado un bloque de sección, podemos comenzar a explorar el siguiente bloque sugerido inmediatamente, el bloque de tres columnas.
El bloque de tres columnas es el principal responsable de diseñar su contenido, por lo que probablemente sea el que más necesitará usar. De hecho, le sugerimos que se tome su tiempo y se sienta muy seguro con este bloque, ya que una vez que haya comprendido los conceptos básicos, podrá crear cualquier diseño posible. Comencemos colocando un bloque de tres columnas en nuestra sección.
Como puede ver, el bloque está compuesto por un elemento horizontal de fila (rows) y 3 columnas internas (Celdas o cells). Al seleccionar la celda, verá en la barra lateral derecha las propiedades relacionadas con la celda.
Puede agregar tantas columnas como desee, seleccionando la celda y haciendo clic en duplicar una columna seleccionada (a través de la acción de clonar en la barra de herramientas del elemento de bloque o simplemente usando los accesos directos ⌘ + C / ⌘ + V)
Para eliminar columnas, simplemente seleccione una y presione la tecla ⌫ (Eliminar) o mediante la acción de eliminar (icono de la papelera) en la barra de herramientas del bloque
Si comete un error, recuerde que puede utilizar estos atajos:
⌘ + Z – Deshacer
⌘ + ⇧ + Z – Rehacer
Arrastre un bloque de texto a una celda.
Para actualizar bloques de texto, simplemente haga doble clic en ellos para ingresar al modo de edición y una vez que haya terminado, simplemente haga clic en cualquier otro lugar fuera del bloque.
Ahora probablemente haya notado que los textos tienen algún tipo de espacio en blanco entre ellos. El bloque de encabezado tiene márgenes superior e inferior predeterminados (espacio exterior, resaltado con color amarillo al desplazarse), en cambio, el texto tiene rellenos (espacio interior, resaltado con color azul al desplazarse) alrededor de todo su contenido. Cuando lo necesite, puede ajustarlos muy rápidamente a través del Administrador de estilos en la sección Dimensión.
Muchas cuadrículas o bloques anidadas pueden crear demasiado espacio en blanco alrededor del contenido, así que recuerde que puede ajustarlo cambiando sus márgenes / rellenos relativos en las propiedades de Dimensión.
Ahora arrastremos un bloque de imagen a la columna derecha de nuestro encabezado. Una vez que se suelta el bloque, aparecerá el modo de Image Manager.
Puede comenzar a cargar una imagen desde su computadora haciendo clic o arrastrando la imagen dentro del area de carga.
Ahora simplemente haz doble clic en la imagen que te gusta, para seleccionarla, luego la verás en el lienzo. Si necesita cambiar la imagen, siempre puede hacer doble clic en ese bloque para volver a abrir el Administrador de imágenes.
La imagen intentará, automáticamente, llenar el ancho disponible del elemento que contiene la imagen, pero siempre puede cambiar su tamaño utilizando controladores de cambio de tamaño.
Podemos soltar un enlace en cualquier lugar de una celda. Cuando selecciona un enlace, en la barra lateral derecha, puede ver todas las opciones disponibles en Configuración
Título: es un nombre para el enlace que solo aparece en ciertos dispositivos de audio accesibles para personas con discapacidad auditiva
Href: es la URL que desea vincular
Destino: sería la ventana en la que se abriría el enlace, podría ser la misma ventana en la que se encuentra el enlace u otra.
El componente Enlace no acepta ningún otro elemento que no sea texto dentro de él, pero si necesita aplicar un enlace en cualquier otra cosa (por ejemplo, una imagen) puede usar el Bloque de enlace que le permite tener las mismas opciones del Enlace pero con la posibilidad de dejar caer cualquier otra cosa en su interior
De forma predeterminada, todos los bloques se hacen teniendo en cuenta el diseño responsive, por lo que la mayoría de ellos se adaptan automáticamente al cambio de tamaño de la pantalla, pero como también permite un alto nivel de personalización del diseño, aún se requieren algunos cambios manuales para cada tipo de dispositivo. Por lo tanto, recuerde revisar su diseño con frecuencia y colocar las imágenes en tamaños adecuados y recomendamos usar porcentaje para que se adapten más fácilmente a la celda.
En la barra superior en la parte superior izquierda puede encontrar los botones para seleccionar la vista para cada dispositivo: computadora de escritorio, tableta y móvil
Al usar algún bloque, es posible que haya notado cómo el Administrador de estilos cambia sus propiedades en función del bloque seleccionado en ese momento. Por lo tanto, cada bloque puede tener su propio conjunto de propiedades para diseñar para evitar alguna incompatibilidad.
Casi todos los bloques tienen este conjunto de categorías de estilo, pero hay algunos casos particulares en los que este conjunto puede diferir (por ejemplo, el bloque Cuerpo solo tiene Fondo)
La categoría de Estado que ve sobre las clases es un poco diferente y su propósito principal es cambiar algún comportamiento del bloque.
Para cambiar el color de fondo, seleccione la sección principal y cambie su color de Relleno (bajo Fondo) al valor hexadecimal que necesita (por ejemplo, #FFFFF). Para cambiar el color de la fuente, seleccione el bloque de texto, vaya a Tipografía y actualice su color de fuente con el mismo valor.
Estilos compartidos con clases
Puede encontrar el visor de clases en la barra lateral derecha del editor, justo encima de las propiedades del Administrador de estilos
Este panel le mostrará todas las clases asignadas al bloque seleccionado (con múltiples selecciones mostrará todas las clases comunes entre los bloques seleccionados). También hay un menú desplegable con Estados y el botón “+” (Más) para agregar clases a los bloques seleccionados.
Puede editar haciendo doble clic en el nombre o eliminarlo haciendo clic en su botón “x”.
Tenga en cuenta que cuando actualice las propiedades de estilo de un bloque que contiene clases, se actualizará a todo el bloque con esa clase aplicada.
Prerrequisitos para usar las plantillas con marcas:
Se debe tener creada la marca en la cuenta DANAConnect. Ver cómo crear marcas
Beneficios de esta herramienta
Ayuda a acelerar la creación de plantillas de email para todo el ciclo de vida del cliente. Entre estas se pueden destacar:
Posee un kit de plantillas especializadas para todo el ciclo de vida del cliente, haciendo mucho énfasis en productos de la industria de Servicios Financieros.
Gestor de marcas, lo cual permite adaptar de forma rápida las plantillas incluidas con la marca de su empresa.
Elementos especiales en los emails para facilitar la medición de experiencias de los clientes y adopción de aplicaciones móviles.
Para obtener la mejor experiencia de edición, le recomendamos encarecidamente que utilice, como navegador, la última versión de Chrome.
Uso de la interfaz del editor de plantillas
El editor se divide principalmente en 3 secciones diferentes:
Lienzo: la sección más grande e importante. Aquí verá que su proyecto cobra vida, al crear diseños con bloques y organizarlos mediante la capacidad de arrastrar y soltar
Barra lateral derecha: la barra lateral derecha es responsable de controlar el comportamiento y los estilos (color, fondo, etc.) de cualquier componente que se coloque en el lienzo, la configuración de los componentes, las capas o la estructura jerárquica de la página y los Bloques de componentes para agregar. la página.
Barra superior: esta sección contiene diferentes comandos para la edición y administración de su proyecto, como vista previa sin bordes, vista previa, ver código, deshacer, rehacer, importar, borrar lienzo y guardar página.
Los Bloques
Debe saber que todos los elementos que se colocan en el lienzo son lo que llamamos Bloques. Un bloque puede ser un elemento realmente simple como una imagen y texto o también una composición compleja de otros bloques. Por esta razón, los hemos dividido en diferentes categorías, pero la más importante es definitivamente los Bloques Básicos, tener un buen conocimiento sobre cómo funcionan ayudará a crear y administrar todas las demás categorías.
Como puede ver, la categoría Bloques básicos está seleccionada de forma predeterminada y debajo también hay otras subcategorías, por ahora, nos vamos a enfocar en la básica.
Haga clic en la subcategoría Básica para mostrar todos los bloques disponibles en ella y centrémonos en 3 bloques realmente fundamentales: Bloque de Sección, Bloque de texto y Bloque de imágenes.
Bloque de sección
La sección es bastante fácil de usar y comprender, puede colocarla solo en la capa raíz (el cuerpo) de la página, no es encajable, por lo que no puede colocar una sección en otra. El propósito de este bloque es bastante simple, mantener su contenido centrado y responsive. Todo lo que debe hacer es colocarlo en el lienzo y verá su contorno.
Puede comenzar a colocar en el Lienzo lo que quiera, el editor no lo limita, pero para que su contenido se vea bien en múltiples dispositivos, le recomendamos que comience con este Bloque.
Verá que la Sección tiene un elemento interno llamado Celda, aquí es donde soltaremos nuestro contenido y es responsable de mantener nuestro contenido centrado. También tiene el ancho configurado como aplicado automáticamente de forma predeterminada, pero puede cambiarlo si desea que su contenido se coloque en un tamaño específico.
Para centrar el bloque, establezca el margen izquierdo y derecho en automático.
Ahora que hemos colocado un bloque de sección, podemos comenzar a explorar el siguiente bloque sugerido inmediatamente, el bloque de tres columnas.
Bloque de tres columnas
El bloque de tres columnas es el principal responsable de diseñar su contenido, por lo que probablemente sea el que más necesitará usar. De hecho, le sugerimos que se tome su tiempo y se sienta muy seguro con este bloque, ya que una vez que haya comprendido los conceptos básicos, podrá crear cualquier diseño posible. Comencemos colocando un bloque de tres columnas en nuestra sección.
Como puede ver, el bloque está compuesto por un elemento horizontal de fila (rows) y 3 columnas internas (Celdas o cells). Al seleccionar la celda, verá en la barra lateral derecha las propiedades relacionadas con la celda.
Copiar una celda
Puede agregar tantas columnas como desee, seleccionando la celda y haciendo clic en duplicar una columna seleccionada (a través de la acción de clonar en la barra de herramientas del elemento de bloque o simplemente usando los accesos directos ⌘ + C / ⌘ + V)
Eliminar una celda
Para eliminar columnas, simplemente seleccione una y presione la tecla ⌫ (Eliminar) o mediante la acción de eliminar (icono de la papelera) en la barra de herramientas del bloque
Undo o deshacer
Si comete un error, recuerde que puede utilizar estos atajos:
⌘ + Z – Deshacer
⌘ + ⇧ + Z – Rehacer
Bloques de texto
Arrastre un bloque de texto a una celda.Para actualizar bloques de texto, simplemente haga doble clic en ellos para ingresar al modo de edición y una vez que haya terminado, simplemente haga clic en cualquier otro lugar fuera del bloque.
Ahora probablemente haya notado que los textos tienen algún tipo de espacio en blanco entre ellos. El bloque de encabezado tiene márgenes superior e inferior predeterminados (espacio exterior, resaltado con color amarillo al desplazarse), en cambio, el texto tiene rellenos (espacio interior, resaltado con color azul al desplazarse) alrededor de todo su contenido. Cuando lo necesite, puede ajustarlos muy rápidamente a través del Administrador de estilos en la sección Dimensión.
Muchas cuadrículas o bloques anidadas pueden crear demasiado espacio en blanco alrededor del contenido, así que recuerde que puede ajustarlo cambiando sus márgenes / rellenos relativos en las propiedades de Dimensión.
Bloque de imágenes
Ahora arrastremos un bloque de imagen a la columna derecha de nuestro encabezado. Una vez que se suelta el bloque, aparecerá el modo de Image Manager.
Puede comenzar a cargar una imagen desde su computadora haciendo clic o arrastrando la imagen dentro del area de carga.
Ahora simplemente haz doble clic en la imagen que te gusta, para seleccionarla, luego la verás en el lienzo. Si necesita cambiar la imagen, siempre puede hacer doble clic en ese bloque para volver a abrir el Administrador de imágenes.
La imagen intentará, automáticamente, llenar el ancho disponible del elemento que contiene la imagen, pero siempre puede cambiar su tamaño utilizando controladores de cambio de tamaño.
Enlace
Podemos soltar un enlace en cualquier lugar de una celda. Cuando selecciona un enlace, en la barra lateral derecha, puede ver todas las opciones disponibles en Configuración
Título: es un nombre para el enlace que solo aparece en ciertos dispositivos de audio accesibles para personas con discapacidad auditiva
Href: es la URL que desea vincular
Destino: sería la ventana en la que se abriría el enlace, podría ser la misma ventana en la que se encuentra el enlace u otra.
El componente Enlace no acepta ningún otro elemento que no sea texto dentro de él, pero si necesita aplicar un enlace en cualquier otra cosa (por ejemplo, una imagen) puede usar el Bloque de enlace que le permite tener las mismas opciones del Enlace pero con la posibilidad de dejar caer cualquier otra cosa en su interior
Diseño Responsive
De forma predeterminada, todos los bloques se hacen teniendo en cuenta el diseño responsive, por lo que la mayoría de ellos se adaptan automáticamente al cambio de tamaño de la pantalla, pero como también permite un alto nivel de personalización del diseño, aún se requieren algunos cambios manuales para cada tipo de dispositivo. Por lo tanto, recuerde revisar su diseño con frecuencia y colocar las imágenes en tamaños adecuados y recomendamos usar porcentaje para que se adapten más fácilmente a la celda.
En la barra superior en la parte superior izquierda puede encontrar los botones para seleccionar la vista para cada dispositivo: computadora de escritorio, tableta y móvil
Estilo
Al usar algún bloque, es posible que haya notado cómo el Administrador de estilos cambia sus propiedades en función del bloque seleccionado en ese momento. Por lo tanto, cada bloque puede tener su propio conjunto de propiedades para diseñar para evitar alguna incompatibilidad.
Casi todos los bloques tienen este conjunto de categorías de estilo, pero hay algunos casos particulares en los que este conjunto puede diferir (por ejemplo, el bloque Cuerpo solo tiene Fondo)
La categoría de Estado que ve sobre las clases es un poco diferente y su propósito principal es cambiar algún comportamiento del bloque.
Para cambiar el color de fondo, seleccione la sección principal y cambie su color de Relleno (bajo Fondo) al valor hexadecimal que necesita (por ejemplo, #FFFFF). Para cambiar el color de la fuente, seleccione el bloque de texto, vaya a Tipografía y actualice su color de fuente con el mismo valor.
Estilos compartidos con clases
Puede encontrar el visor de clases en la barra lateral derecha del editor, justo encima de las propiedades del Administrador de estilos
Este panel le mostrará todas las clases asignadas al bloque seleccionado (con múltiples selecciones mostrará todas las clases comunes entre los bloques seleccionados). También hay un menú desplegable con Estados y el botón “+” (Más) para agregar clases a los bloques seleccionados.
Puede editar haciendo doble clic en el nombre o eliminarlo haciendo clic en su botón “x”.
Tenga en cuenta que cuando actualice las propiedades de estilo de un bloque que contiene clases, se actualizará a todo el bloque con esa clase aplicada.
Actualizado el: 20/07/2024
¡Gracias!