Diseñar un email con el editor

El editor de email te permite componer un email apilando bloques: títulos, textos, botones, imágenes, columnas. El resultado se adapta a ordenadores y móviles y se muestra correctamente en los principales gestores de correo.

Dónde encontrar el editor

El mismo editor se usa en tres lugares:

• Campaña de email: en la ventana de contenido, en Diseño de correo electrónico, haz clic en Crea tu diseño o Edita tu diseño (consulta Crear y enviar una campaña).
• Automatización: en el contenido de un email, elige el modo Email Builder y luego Crea tu diseño (consulta Programar envíos automáticos).
• Invitación: consulta Personalizar el email de invitación.

Conocer la pantalla

El editor se abre a pantalla completa, con su título arriba a la izquierda, por ejemplo Diseña tu correo electrónico.

• A la izquierda, los bloques disponibles, agrupados en tres familias. El campo Buscar un bloque los filtra por nombre.
• En el centro, tu email tal y como se recibirá. Los iconos de encima permiten cambiar entre el ancho de ordenador y el ancho de móvil.
• A la derecha, los ajustes del bloque seleccionado. Cuando no hay ningún bloque seleccionado, son los ajustes del email completo.
• Arriba a la derecha, Cerrar el editor vuelve al formulario.

Un email nuevo no empieza en blanco: ya contiene una sección con un título ¡Hola!, un texto de ejemplo y un botón Descubrir. Modifícalos o elimínalos.

Construir el email

1. Arrastra un bloque desde la columna de la izquierda hasta el email, al lugar que quieras.

2. Haz clic en el bloque para seleccionarlo y ajústalo en la columna de la derecha.

3. Para mover un bloque, arrástralo a otro lugar. Para duplicarlo o eliminarlo, usa las acciones que aparecen cuando está seleccionado.

4. Cuando el email te guste, haz clic en Cerrar el editor.

5. De vuelta en el formulario, revisa la Vista previa y guarda: Guardar contenido en una campaña, Guardar en una automatización.

Cerrar el editor no guarda

Cerrar el editor lleva tu trabajo al formulario, pero no se guarda nada hasta que haces clic en el botón de guardar del formulario. Si cierras la ventana de contenido antes, pierdes tu email.

Los bloques disponibles

Diseño

Bloque	Para qué sirve	Ajustes
Sección	Un contenedor que agrupa otros bloques, con un fondo común.	Color de fondo, espaciados vertical y horizontal.
Columnas	Colocar bloques uno al lado de otro, de 1 a 4 columnas.	Número de columnas, Espacio entre columnas (px), Alineación vertical (Arriba, Centro, Abajo), En móvil (Apilar las columnas o Mantenerlas una al lado de otra), Color de fondo, espaciados.
Espaciado	Un espacio vacío entre dos bloques.	Altura (px), de 4 a 160.
Separador	Una línea horizontal.	Color de la línea, Grosor (px) de 1 a 12, espaciados.

Contenido

Bloque	Para qué sirve	Ajustes
Título	Un título en una línea.	Texto, Nivel (Título 1, Título 2, Título 3), Tamaño del texto (px), Alineación, Color del texto, espaciados.
Texto	Un párrafo con formato: negrita, cursiva, listas, enlaces.	Contenido, Tamaño del texto (px), Altura de línea, Alineación, Color del texto, espaciados.
Botón	Un botón en el que se puede hacer clic, por ejemplo hacia tu venta de entradas.	Etiqueta, Enlace, Color del botón, Color del texto, Tamaño del texto (px), Esquinas redondeadas (px), Alineación, Ancho (Ajustado al texto o Ancho completo), espaciados.
Imagen	Una foto, un cartel, un logotipo.	Consulta Añadir una imagen.
Botones Añadir al wallet	Los botones Apple Wallet y Google Wallet de la entrada.	Idioma de los botones (Francés o Inglés), Alineación, espaciados. Este bloque solo aparece en el email de invitación (consulta Tarjetas Wallet).

Avanzado

Bloque	Para qué sirve	Ajustes
Código personalizado	Insertar tu propio código HTML.	Código HTML.

Precaución

El bloque Código personalizado se inserta tal cual en el email. Un código mal cerrado puede estropear la maqueta de todo el email: revisa la vista previa y envíate una prueba.

Ajustar el email completo

Haz clic junto al email, sobre el fondo, para que no haya ningún bloque seleccionado. La columna de la derecha muestra entonces los ajustes de Correo electrónico:

• Texto de vista previa (se muestra tras el asunto en la bandeja de entrada): la frase que acompaña al asunto en la lista de mensajes. Pon en ella un dato útil, por ejemplo la fecha del evento.
• Fondo de la página: el color alrededor del email. Por defecto, un gris claro.
• Fondo del email: el color de la zona de contenido. Por defecto, blanco.
• Ancho del email (px): de 320 a 800 píxeles, 600 por defecto.
• Fuente: Arial, Helvetica, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman o Courier New. Son fuentes habituales, disponibles en la mayoría de los dispositivos.
• Color del texto y Color de los enlaces: los colores por defecto de todos los bloques.

Los colores se escriben en código hexadecimal (#1F2937) o se eligen en la paleta. Un campo vacío muestra Heredado: el bloque usa entonces el color definido para el email completo.

Añadir una imagen

El ajuste Imagen del bloque de imagen ofrece tres pestañas:

• Enlace: pega la dirección de una imagen que ya está en internet.
• Subir: suelta una imagen de tu ordenador y haz clic en Subir esta imagen. Formatos PNG, JPG o GIF, 5 MB como máximo. El formato WEBP no se acepta en los emails, porque algunos gestores de correo no lo muestran.
• Biblioteca: encuentra las imágenes que ya subiste para tus emails y reutilízalas con un clic.

Los demás ajustes de la imagen:

• Texto alternativo (se muestra cuando las imágenes están bloqueadas): describe la imagen, por ejemplo «Cartel SUBSOL #15». Muchos gestores de correo bloquean las imágenes por defecto.
• Enlace (opcional): la dirección que se abre al hacer clic en la imagen.
• Ancho: Ancho personalizado, con un Ancho máximo (px), o Ancho completo.
• Visualización: Imagen completa, o Recortar a una altura con una Altura del recorte (px) y un Punto focal que elige la parte de la imagen que se conserva. No todos los gestores de correo aplican el recorte: algunos muestran la imagen completa, nunca deformada.
• Esquinas redondeadas (px), Alineación y espaciados.

Tu biblioteca de email

Las imágenes subidas para tus emails se comparten entre todas tus campañas, automatizaciones e invitaciones. Tu cuenta puede guardar 500; por encima, un mensaje te invita a reutilizar una imagen de la Biblioteca o a usar la pestaña Enlace. Una imagen que no se ha usado en ningún envío desde hace un año, o desde que se subió si nunca se ha usado, se elimina automáticamente: tenlo en cuenta para un email preparado con mucha antelación.

Personalizar el texto

Puedes insertar variables, como el nombre del destinatario, que se sustituyen al enviar:

• en un bloque Texto, con el menú { } de la barra de herramientas del texto;
• en el Texto de un título, la Etiqueta y el Enlace de un botón, el Enlace (opcional) de una imagen y el Texto de vista previa, con la lista Insertar una variable… bajo el campo.

Las variables que se ofrecen dependen de dónde estés: columnas de la audiencia en una campaña, datos de los participantes en una automatización. Consulta Personalizar con variables.

Visualización en móvil

En una pantalla de 600 píxeles de ancho o menos, el email ocupa todo el ancho. Los bloques Columnas configurados en Apilar las columnas se colocan uno debajo de otro. Usa el icono de móvil encima de la vista previa para comprobar el resultado.

Vista previa y prueba

• En el editor, el email se muestra tal y como se enviará, sin el aviso de baja que Sweescape añade a las campañas.
• En el formulario, la Vista previa muestra el email completo después de cerrar el editor.
• En una campaña, envíate una prueba con Probar esta campaña (consulta Enviar una prueba). Las automatizaciones no tienen envío de prueba.

Retomar un email existente

• Un email de automatización escrito en modo Simple Email Message se abre en el editor como un bloque Texto que recoge tu mensaje.
• Un email diseñado con el antiguo editor de Sweescape que no se pudo convertir en bloques se abre como un solo bloque Código personalizado. Puedes conservarlo tal cual, o reconstruirlo con bloques y luego eliminar el bloque Código personalizado.

Páginas relacionadas

• Crear y enviar una campaña
• Programar envíos automáticos
• Personalizar con variables