El editor de email permite diseñar, de forma responsive y muy visual, el contenido de los correos electrónicos que serán enviados a tus clientes desde tu cuenta, a través de workflows creados para dicho fin.
¿Cómo acceder?
Puedes acceder al editor de email a través de dos rutas:
1. Desde “Contenido > Emails”. Haz clic en Crear nuevo email para generar un nuevo contenido, o en Más y selecciona Editar para modificar un email existente.
2. Desde el nodo "Enviar email" de un workflow, haciendo clic en (Editar configuración de nodo). Haz clic en Crear nuevo contenido o en Editar para modificar un email existente.
Interfaz
El editor de email está compuesto por tres paneles:
1. Previsualización y guardado: para guardar o descartar los cambios realizados y previsualizar el resultado final del email que será enviado.
2. Diseño: para construir visualmente el email haciendo uso de las estructuras y componentes del panel 3 (herramientas).
3. Herramientas: para configurar todas las propiedades del email, acceder a plantillas y añadir variables. Este panel puede ser expandido o contraído haciendo clic en (Abrir herramientas) o (Cerrar herramientas).
Funcionamiento
El editor de email se basa en el método de diseño ‘drag and drop’ (arrastrar y soltar), por lo que permite armar los correos electrónicos de forma rápida, sencilla y muy visual.
1. Clasificar el email
En el panel de diseño (2), cataloga tu email y localízalo de forma rápida haciendo clic en Introduce etiquetas y añadiendo palabras clave que te ayuden a identificarlo.
Las etiquetas son muy útiles tanto para encontrar tus workflows más rápido como para extraer informes a través de Data Explorer. Te recomendamos añadir etiquetas con:
— Nombre de la campaña.
— Fecha en que será lanzada.
— Público objetivo.
— Objetivo de la campaña (venta, fidelización, captación…).
Por ejemplo, utilizando las etiquetas “Navidad 2022”, “Clientes B2B” y “Captación”.
2. Editar estilo general
En el panel de Herramientas (3), haz clic en la pestaña General para editar los parámetros del aspecto general. También puedes acceder haciendo clic en Propiedades generales del panel de diseño (2).
Los parámetros a definir son:
-
Nombre del contenido: nombre que quieres dar al contenido para identificarlo en tu cuenta de Connectif.
El nombre del contenido no es el asunto del email. Para configurar el asunto, revisa el artículo Campaña de email masiva.
-
Colores: color de fondo del contenido y color de fondo general.
-
Disposición: anchura que tendrá el contenido en píxeles y umbral responsive (hasta qué anchura de pantalla se entenderá que es un dispositivo móvil).
-
Texto: fuente o tipografía de los textos del email por defecto.
Puedes añadir nuevas tipografías para personalizar al máximo tus emails. Para ello, te recomendamos solicitar la ayuda de un experto en maquetación y diseño CSS y HTML.
-
Resumen: texto que aparecerá al cliente en la previsualización del email, tras el asunto del mismo.
-
Header: título que adoptará la pestaña del navegador del contacto cuando haga clic en “ver en el navegador”.
-
Opciones HTML: configuración general de estilo basado en estilos CSS y HTML.
Recomendamos no editar esta sección a menos que cuentes con la ayuda de un experto en maquetación y diseño CSS y HTML.
3. Construir el email por bloques
En el panel de Herramientas (3), haz clic en la pestaña Componentes para elaborar tu composición arrastrando y soltando estructuras o elementos en el panel de diseño (2).
Estructura
Distribución que adoptará un bloque de contenido dentro del email. Puede presentarse en una o varias columnas, con proporciones idénticas o dispares.
La estructura se ha de insertar en primer lugar. En caso de no incluirla, por defecto se utilizará la estructura de una columna.
Una vez creada una estructura, posiciona el ratón encima de la misma y haz clic en (Editar bloque) para modificarlo, (Duplicar bloque) para crear otro idéntico o (Borrar bloque) para eliminarlo.
Elementos
Contenidos multimedia que puedes añadir a tu email, arrastrándolos al panel de diseño (2). Al igual que con la estructura, puedes editarlos posicionando el ratón encima de dicho elemento y haciendo clic en el botón (Editar elemento) o sobre el contenido en sí. También puedes duplicarlos haciendo clic en (Duplicar elemento), o eliminarlo haciendo clic en (Borrar elemento).
Los elementos de los que dispones son:
-
"Texto".
Redacta tu escrito aplicándole formato enriquecido (negrita, cursiva, enlaces…), insertando variables dinámicas o modificando su disposición en el bloque insertado.
Las variables dinámicas permiten personalizar el texto en base a los datos recopilados en el perfil de cada contacto. Para saber más sobre variables y mejorar los resultados de tu email, te recomendamos revisar el artículo Variables predefinidas para personalizar emails y contenidos.
El botón (Convertir a HTML) de este y futuros elementos, convierte el elemento de texto a formato HTML de forma irreversible. Para hacer uso de esta función, necesitarás conocimientos básicos de HTML & CSS. En caso de no contar con un experto en la materia, te recomendamos no convertirlo.
-
"Imagen".
Si tu imagen ya está publicada en Internet, pega la URL de la imagen para incluirla en el contenido web. Si prefieres subirla desde tu dispositivo, haz clic en Subir imagen o en la figura de las montañas, y selecciona el archivo en la ventana del explorador que aparecerá de forma emergente. Al cargarse, se completará la URL de la imagen de forma automática.
Como configuraciones extra, puedes redactar el texto alternativo (que aparecerá en caso de no cargar la imagen), el texto del ‘title’ (también conocido como atributo alt, se muestra al posicionar el ratón sobre la imagen) y la disposición dentro del bloque.Si necesitas modificar tu imagen puedes usar el editor de imagen.
-
"Botón".
Define el texto que aparecerá en tu botón, el atributo ‘title’ y el enlace (podrá ser uno específico o predefinido para ejecutar una acción concreta). Para configurar su aspecto visual, selecciona los colores de texto y fondo y ajusta la disposición dentro del bloque. -
"Social".
Escoge las redes sociales que desees incluir y modifica la URL del enlace, además de la disposición dentro del bloque. -
"Divisor".
Configura tanto el color como la disposición de la línea horizontal para separar contenidos de forma visual. -
"Espacio".
Define la distancia de espacio en blanco que deseas insertar entre dos bloques. -
"Productos" (OLD).
Inserta un bloque de productos que podrás completar a través de un workflow con los artículos de interés para el contacto. Puedes seleccionar una de las tres plantillas por defecto (Producto básico, Producto con marca o Producto con precio) o personalizar su aspecto final en el editor de texto o como HTML. También puedes definir su estructura de filas y columnas en escritorio y móvil.
-
"Productos" (NEW).
Inserta un bloque de productos que podrás completar a través de un workflow con los artículos de interés para el contacto. Puedes editarlo usando una plantilla o el editor HTML. Al editarlo como plantilla, selecciona una de las tres opciones (Vertical, Imagen a la Izquierda o Imagen a la Derecha) y personaliza fácilmente cada uno de los elementos para definir qué atributos de producto quieres mostrar en la tarjeta, ordenarlos, estilarlos, etc. Además, puedes elegir el número de filas y columnas que quieres mostrar en modo escritorio o móvil. Podrás ver en cada momento cómo será el resultado final del diseño en el editor.
Para que el bloque de productos sea completado con los artículos en los que el contacto muestra interés, es imprescindible el uso de un nodo “Obtener productos” antes del nodo “Enviar Email”. Puedes aprender más en los artículos Mostrar productos personalizados en el email de carrito abandonado y Nodo “Obtener productos”.
-
"HTML".
Incrusta un código HTML personalizado y ajusta su disposición.
Para insertar este elemento, necesitarás de un experto en maquetación y diseño CSS y HTML para asegurar la correcta visualización del contenido.
-
"Ver en el navegador."
Texto predefinido para insertar un enlace que permite ver el contenido del email en una ventana del navegador. Al editar el enlace, podrás modificar el texto para mostrar, el título y si deseas que se abra en una nueva ventana.
El enlace siempre es “#__cn_view_in_browser” y viene configurado por defecto. Puedes acceder a él a través de la opción Insertar/Editar enlace del editor.
-
"Pie de página".
Texto predefinido para insertar un pie de página a tu email, en el que puedes especificar los datos de tu empresa y proporcionar al cliente la opción de cancelar su suscripción o reenviar un email.
El RGPD obliga a ofrecer a los clientes la opción de cancelar su suscripción de forma visible, por lo que el enlace de “Cancelar suscripción” deberá estar siempre presente en emails de tipo newsletter. El enlace a la cancelación siempre deberá ser “#__cn_unsubscribe”.
4. Crear, editar o eliminar un bloque global
Guarda un bloque como global para poder utilizarlo en todos tus emails y editarlo simultáneamente en aquellos en los que lo añadas.
Los bloques globales son muy útiles, por ejemplo, para crear la cabecera de tus emails, bloques de productos visitados, y otros elementos que puedas utilizar en tus emails con frecuencia.
Para ello, una vez que hayas añadido los elementos deseados a tu bloque, pasa el cursor sobre el mismo y haz clic en el botón Crear bloque global.
A continuación, en la ventana emergente, se mostrará la Tienda en la que vas a crear este bloque. Indica un nombre para el mismo y haz clic en el botón Crear bloque global.
Una vez creado, guarda el email y ya podrás utilizarlo en tus contenidos de email. Para utilizarlo, en la pestaña Componentes del editor, dirígete a Mis bloques globales y localiza el bloque que has creado. Arrástralo al editor como cualquier otro componente.
Hasta que no se guarda el email donde has creado o añadido un bloque global, no se considerará que se está usando.
Podrás editar el bloque a nivel global para que se edite en todos tus correos, haciendo clic en el bloque y seleccionando la opción Edición Global.
Si quieres editar el bloque para el email actual únicamente, haz clic en Desenlazar y editar para realizar los cambios.
Una vez modificado, haz clic en Publicar cambios para que el nuevo diseño se guarde y publique automáticamente en todos los emails que se está usando.
Para eliminar el bloque global, en la pestaña Componentes del editor, dirígete a Mis bloques globales, localiza el bloque que quieras borrar y haz clic en (Eliminar).
En la ventana emergente, podrás ver los usos que tiene este bloque. Para confirmar el borrado, haz clic en el botón Eliminar bloque global.
El bloque se desenlazará de todo el contenido donde se esté usando, pero no se eliminará del mismo. Además, esta acción no puede deshacerse.
Además, podrás acceder a todos tus Bloques Globales en cualquier momento sin necesidad de entrar en el Editor de Email, desde "Contenido > Bloques globales de email".
5. Crear y personalizar un bloque de productos
El bloque Productos te permite insertar un elemento que podrás rellenar en un workflow con productos personalizados para el contacto, según tus intereses (productos en oferta, productos del carrito, últimos productos visitados, etc.)
Para ello, en el panel de Herramientas (3), haz clic en la pestaña Componentes para y localiza el bloque Productos (New). Selecciónalo y arrástralo al panel de Diseño (2), en el lugar donde desees colocarlo.
Haz clic sobre el elemento o en (Editar).
(Opcional) añádele un Nombre y selecciona una de las tres plantillas (Vertical, Imagen a la Izquierda o Imagen a la Derecha).
En nuestro ejemplo, se ha escogido la plantilla Vertical.
En Enlace a la página de producto, puedes indicar el ID de la variable que dirigirá a la página de producto. Por defecto se indica buttonURL.
Aprende qué son cómo funcionan las variables en Connectif en este artículo.
Si marcas la casilla Enlazar toda la tarjeta de producto (por defecto activa) cualquier elemento que se incluya sobre el producto en el email enlazará a la página.
Por el contrario, si quieres que no se enlacen todos los elementos, desmarca la casilla y, en el desplegable de cada elemento, personaliza en el apartado Enlace si quieres que dicho elemento se enlace (a través de la opción Enlace a la página de producto) o si deseas que no se enlace (con la opción Sin Enlace).
En nuestro ejemplo, estaríamos activando el enlazado a la página de producto en su Nombre.
Para editar cada uno de los elementos que pueden componer la tarjeta de Producto, haz clic en el desplegable que estos contienen.
Personaliza fácilmente cada uno de los elementos para definir su aspecto final sin necesidad de editarlo como HTML. Cada uno de ellos contiene unas opciones relacionadas a su aspecto y contenido, así como el ID de la Variable que lo contiene y que deberás completar a través de la asignación de variables con el nodo "Enviar email".
Aprende paso a paso cómo mostrar productos personalizados en un email con este caso de uso de variables.
Si necesitas añadir otra información a las tarjetas de Producto, haz clic en la opción Añadir variable y, en el nuevo elemento creado (por defecto bajo el nombre variable1) edita el contenido que desees que incluya, tal como con el resto de elementos.
Una vez configurado tu bloque de Productos, podrás guardarlo como Bloque Global (ver punto 3.3) para poder utilizarlo en otros emails con el mismo diseño y objetivo.
6. Aplicar una condición a un bloque
Aplica una condición a los bloques que desees, para mostrarlo solo si el contacto cumple la condición establecida. Puedes establecer condición en base a la pertenencia o no a un segmento o en base al valor de un campo del contacto.
Para ello, pasa el cursor sobre el bloque que quieras mostrar u ocultar dependiendo de las condiciones y haz clic en el botón Añadir condición.
Para establecer una condición en base al valor de un campo del contacto elige la opción Campos del contacto. A continuación elige el campo, el operador y el valor que el campo debería contener para que se muestre el bloque al contacto.
Para establecer una condición en base a la pertenencia o no del contacto a uno o varios segmentos, escoge la opción Segmento. En Selecciona el operador, escoge si debe pertenecer a uno de los segmentos indicados, a todos, si no debe pertenecer a alguno de los seleccionados o a todos ellos. Finalmente, selecciona el o los segmentos que actuarán de filtro condicional.
Haz clic en Seleccionar y, después, en Aplicar. De este modo, Connectif solo mostrará este bloque a los contactos que cumplan dicha condición.
7. Utilizar plantilla existente o guardar una nueva
Crea rápidamente tus emails haciendo uso de plantillas predefinidas por Connectif o creadas por ti desde el panel de Herramientas (3), en la pestaña Plantillas, haciendo clic en Usar plantilla. También podrás guardar el diseño que hayas elaborado como plantilla haciendo clic en Crear plantilla desde este contenido.
8. Añadir enlaces predefinidos a un botón
Además de los elementos predefinidos explicados en el punto 3, (Ver en el Navegador y Darse de Baja), Connectif ofrece varios enlaces predefinidos que se pueden añadir a los botones de los emails y ofrecen ciertas funcionalidades sin necesidad de generarlas a mano.
Para añadir uno de estos enlaces añade un botón a tu plantilla de email, añade un componente Botón a tu email y edita su configuración.
En el apartado Botón del enlace, haz clic en el botón Añadir enlace predefinido.
Haz clic en el desplegable y selecciona el enlace predefinido que quieras que incluya tu botón. Están disponibles:
- Confirmar suscripción a la newsletter: si un contacto hace clic en este enlace, Connectif cambiará su "Estado de suscripción a la newsletter" a "Suscrito". Además, se notificará la suscripción automáticamente al backoffice de tu web.
- Darse de baja de la newsletter: si un contacto hace clic en este enlace, Connectif cambiará su "Estado de suscripción a newsletter" a "Dado de baja" y notificará este cambio al backoffice de tu web.
- Ver en el navegador: si un contacto hace clic verá el email en una pestaña de su navegador. Esta página se genera automáticamente por Connectif.
- Reenviar email: si un contacto hace clic en este enlace podrá reenviar el email a través de su cliente de correo por defecto.
Una vez seleccionado, haz clic en Aceptar y el enlace predefinido se añadirá a tu botón.
9. Revisar las variables
Examina las variables creadas y cuántas veces se repiten en los elementos de texto desde el panel de Herramientas (3), en la pestaña Variables. Para editar su formato, haz clic en .
Si has añadido una nueva variable de forma reciente y no aparece, haz clic en para refrescar.
Aprende más sobre formato de las variables haciendo clic aquí.
10. Previsualizar resultado final y guardar
En el panel de previsualización y guardado (1) podrás ver el resultado final de tu email. Todos los contenidos creados son responsive, por lo que puedes hacer clic en Previsualizar para desplegar un nuevo panel y revisar el resultado final. Haz clic en (Vista en escritorio) para ver el resultado en desktop, o haz clic en (Vista en móvil) para ver el resultado en móvil.
También podrás enviarte un email de previsualización haciendo clic en (Enviar email de previsualización) para recibir un email de prueba al correo que selecciones y revisar cómo lo recibirá el cliente.
Una vez satisfecho con el resultado, haz clic en Guardar.
Connectif está preparado para recuperar contenido que haya sido cerrado de forma accidental. No obstante, para evitar pérdidas de información debidas al dispositivo desde el que se está editando y a la red del mismo, te recomendamos guardar tu email cada pocos minutos.
¡Enhorabuena!
Has llegado al final de la lección.
¿Te han quedado dudas sin resolver?
Recuerda que tienes a tu disposición a nuestros especialistas en Connectif. Para contactar con ellos, tan solo tendrás que abrir ticket a Soporte haciendo clic en el botón azul de “Ayuda” de tu dashboard.
¡Sigue aprendiendo!
Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:
-
Crear bloque de productos personalizados en un email, para enviar a tus clientes productos de su interés.
- Enlaces en emails: ver en el navegador, darse de baja y botones, para configurar enlaces predefinidos.
- Campaña semanal de productos recomendados, para programar envíos automáticos a los clientes con artículos recomendados.
-
Cupón masivo por email, para mandar un descuento exclusivo a tus clientes.