Crear contenido de correo electrónico con el editor de arrastrar y soltar

Cree contenido de correo electrónico en el editor integrado de Pushwoosh sin escribir código. Obtendrá un diseño reutilizable con bloques de contenido, imágenes, botones, texto personalizado y un pie de página compatible que puede usar en un Customer Journey o en un correo electrónico único.

Crear nuevo contenido de correo electrónico

Vaya a Contenido → Contenido de correo electrónico.
Elija cómo empezar:
- Haga clic en Crear contenido de correo electrónico para abrir el editor de arrastrar y soltar y crear un correo electrónico desde cero.
- Haga clic en la flecha junto a Crear contenido de correo electrónico y, a continuación, seleccione Usar una plantilla para empezar desde un diseño predefinido en la galería.
- Haga clic en la flecha junto a Crear contenido de correo electrónico y, a continuación, seleccione Código HTML para usar el editor de código HTML. Más información

Botón Crear contenido de correo electrónico con un menú que muestra Usar una plantilla y Código HTML

Explore el diseño del editor

Una vez que abre un correo electrónico, el editor integrado tiene estas áreas:

Barra superior

Cambie el nombre del correo electrónico, deshaga o rehaga cambios, ejecute Comprobar para detectar problemas antes de enviar y guarde su trabajo. Consulte Compruebe su correo electrónico antes de enviarlo. Abra el menú ⋮ para más acciones:

Vista previa: vea el correo electrónico tal como se renderizará para los destinatarios, con su propio selector de Escritorio/Móvil. Consulte Editar la vista móvil.
Correo electrónico de prueba: envíe una vista previa a un dispositivo o dirección de prueba. Consulte Enviar un correo electrónico de prueba.
Libro de marca: aplique su logotipo, colores, fuentes y valores predeterminados de bloque guardados a este correo electrónico con un solo clic. Más información
Sección Estilos de marca: aplique su marca guardada o restablezca las anulaciones de estilo por bloque sin abrir el Libro de marca. Más información
Historial de versiones: vea y restaure una versión guardada anteriormente de este correo electrónico. Consulte Restaurar una versión anterior.

Barra superior del editor de correo electrónico con nombre de plantilla, Deshacer, Rehacer, Correo electrónico de prueba y Guardar

Barra de Idioma / Asunto / Pre-encabezado

Encima del lienzo, cambie el idioma de edición, establezca la línea de asunto y el pre-encabezado para el correo electrónico y use Traducción automática para rellenar las traducciones que falten. Aprenda cómo configurar idiomas y localización.

Lienzo

Vea el correo electrónico como lo verán los destinatarios y edite texto, imágenes y botones directamente en el diseño. Un correo electrónico vacío muestra Comience con un bloque.

Panel de capas

Lista cada bloque de su correo electrónico como un árbol, en el mismo orden que en el lienzo. Ábralo desde el borde izquierdo para seleccionar un bloque anidado o arrastre filas para reordenar el contenido.

Panel derecho

Cambie entre tres pestañas:

Bloques: añada contenido al correo electrónico. Consulte Referencia de bloques de contenido de correo electrónico.
Configuración: aplique estilos a todo el correo electrónico a la vez. Consulte Configurar el estilo y el pie de página de todo el correo electrónico.
IA: chatee con el asistente de IA para generar o editar contenido a partir de una indicación.

Añadir bloques de contenido

Abra la pestaña Bloques en el panel derecho.
Arrastre un bloque al lienzo o haga clic en un bloque para añadirlo al final del correo electrónico.
Siga añadiendo bloques hasta que el diseño esté listo.

Cada tipo de bloque tiene un propósito diferente en el correo electrónico:

Encabezado: títulos y titulares cortos
Texto: cuerpo del texto y descripciones más largas
Botón: una llamada a la acción en la que se puede hacer clic
Imagen: imágenes de la Tienda de medios, subidas o desde una URL
Video: un póster de video en el que se puede hacer clic que se abre en YouTube o Vimeo
Tarjeta: una imagen con encabezado, texto y botón en un solo diseño
Divisor: una línea que separa secciones
Columnas: diseños de lado a lado (2, 3 o 4 columnas iguales, o divisiones de 33/67 y 67/33)
Productos: una cuadrícula de tarjetas de productos: introduzca los productos a mano o extráigalos de su Catálogo de productos o del carrito abandonado de un destinatario
Temporizador: una cuenta atrás para ofertas y plazos
Menú: una fila o columna de enlaces de navegación o de contacto
Social: iconos que enlazan con sus perfiles sociales
HTML: HTML personalizado, como un formulario, una encuesta o un video incrustado

Consulte la Referencia de bloques de contenido de correo electrónico para ver la configuración de cada bloque, cómo guardar y reutilizar bloques y los tipos de enlace para botones y texto.

Mostrar contenido a destinatarios específicos

Para mostrar un bloque solo a algunos destinatarios, establezca una condición de visualización.

Editar la vista móvil

Una vez que haya añadido sus bloques de contenido, cambie a la vista móvil para comprobar y ajustar cómo se ven en un teléfono. Junto al selector de idioma sobre el lienzo, use el selector Escritorio / Móvil para cambiar a una vista móvil totalmente editable con el ancho real de un teléfono. Seleccione, edite y reorganice el contenido exactamente de la misma manera que sus suscriptores lo verán en su teléfono, en lugar de solo previsualizar cómo se adapta el diseño de escritorio.

Cada configuración que se puede anular en la vista móvil tiene una casilla de verificación al lado. Cuando la casilla de verificación está desactivada, una pista muestra el valor heredado del escritorio y la configuración sigue usándolo. Active la casilla de verificación para establecer un valor separado para la vista móvil. Desactívela de nuevo para volver al valor de escritorio.

Establecer diferentes rellenos y tamaños de fuente por dispositivo

Relleno: cada bloque, columna, tarjeta y elemento individual (como texto, una imagen o un botón) tiene un control de relleno que puede anular para la vista móvil. Cambie el lienzo a Móvil, active la casilla de verificación junto a Relleno y establezca el nuevo valor. El relleno de escritorio permanece igual hasta que active la casilla de verificación.
Tamaño de fuente: active Tamaño de fuente (móvil) en un elemento de texto para establecer un tamaño solo para la vista móvil. Sin esta anulación, los titulares grandes se reducen automáticamente para ajustarse a la pantalla del teléfono.

Controlar cómo se apilan las columnas en la vista móvil

Los diseños de Columnas se apilan verticalmente en los teléfonos de forma predeterminada. En la vista móvil, use Apilar columnas para establecer cómo se comporta cada bloque de Columnas:

Apilar: las columnas fluyen en una sola columna, de arriba a abajo (predeterminado).
Mantener fila: las columnas permanecen una al lado de la otra, conservando el diseño de escritorio.
Invertir: las columnas se apilan en orden inverso. Útil para filas de imagen + texto: mantenga la imagen a la derecha en el escritorio, pero muéstrela en la parte superior en la vista móvil.

Sección móvil en el panel derecho con las opciones Apilar, Mantener fila e Invertir para un bloque de Columnas

Mostrar u ocultar contenido por dispositivo

Abra la configuración de un bloque o elemento y use Ocultar en móvil u Ocultar en escritorio en Visibilidad para mostrarlo solo en un dispositivo, de modo que pueda crear banners, CTA o navegación específicos para cada dispositivo sin mantener dos plantillas.

Configuración de visibilidad con casillas de verificación Ocultar en móvil y Ocultar en escritorio para un bloque seleccionado

Configurar el estilo y el pie de página de todo el correo electrónico

Una vez que el diseño principal esté en su lugar, abra la pestaña Configuración para establecer fuentes, colores y espaciado que se apliquen a todo el correo electrónico, y rellene el Pie de página con los detalles de su empresa y el enlace para darse de baja. Los valores predeterminados aquí mantienen la coherencia de los nuevos bloques hasta que los anule en el lienzo. Más información

Guardar su correo electrónico

Haga clic en Guardar en la barra superior para guardar sus cambios. Use Deshacer/Rehacer en la barra superior para retroceder y avanzar en sus ediciones.

Restaurar una versión anterior

Pushwoosh guarda una instantánea cada vez que hace clic en Guardar. Para acceder a ellas, abra el menú ⋮ en la barra superior y seleccione Historial de versiones, disponible una vez que el correo electrónico se ha guardado al menos una vez.

El panel izquierdo lista las versiones guardadas, de la más nueva a la más antigua, con el autor, la marca de tiempo y una insignia de Última en la versión actual. Seleccione cualquier versión para previsualizarla a la derecha y, a continuación, haga clic en Restaurar para cargarla en el editor.

Panel de historial de versiones con versiones guardadas a la izquierda y una vista previa del correo electrónico a la derecha

La restauración carga la versión como cambios no guardados. No se sobrescribe nada hasta que haga clic en Guardar. Para deshacer una restauración, presione Cmd/Ctrl+Z. Pushwoosh guarda las 20 versiones más recientes por correo electrónico.

Compruebe su correo electrónico antes de enviarlo

Haga clic en Comprobar en la barra superior para abrir Smart check y escanear su correo electrónico en busca de problemas comunes:

Botones sin enlace
Marcadores de posición de IA sin rellenar
Espacios de imagen vacíos y texto alternativo faltante
Contraste de texto que no cumple con WCAG AA
Una línea de asunto vacía o demasiado larga
Una dirección postal del remitente faltante en el pie de página de un correo electrónico de marketing
Contenido que supera el límite de recorte de Gmail (~102 KB, después del cual Gmail trunca el mensaje)
Contenido sin traducir
Un temporizador de cuenta atrás cuya fecha de finalización ya ha pasado
Una condición de visualización con una regla rota o vacía, una rama que perdió el bloque al que se encadena o una condición que no se aplicará porque el contenido dinámico está deshabilitado para la cuenta
Sintaxis de Liquid rota en el asunto, pre-encabezado, pie de página o cuerpo, comprobada en cada idioma que añadió

Panel de Smart check con un error de sintaxis de Liquid, un error de enlace de botón, una dirección postal faltante y un pre-encabezado vacío

Haga clic en un hallazgo para saltar directamente al elemento afectado en el lienzo.

Smart check valida la sintaxis de Liquid automáticamente cada vez que lo abre; no hay un botón separado para hacer clic. Mientras se ejecuta la comprobación, el panel muestra Comprobando sintaxis de Liquid…; Smart check no informa de que todo ha pasado hasta que esta comprobación ha finalizado, por lo que una comprobación de Liquid lenta o fallida no puede ocultarse detrás de un falso “todo correcto”.

Enviar un correo electrónico de prueba

Antes de enviar su campaña de correo electrónico, puede enviar un correo electrónico de prueba para previsualizar cómo aparecerá el contenido en las bandejas de entrada de los destinatarios.

Abra el menú ⋮ en la barra superior y seleccione Correo electrónico de prueba.

Opción de correo electrónico de prueba en el menú desplegable de la barra superior

En la ventana que se abre, añada hasta 50 destinatarios: elija uno o más dispositivos de prueba guardados, o escriba cualquier dirección de correo electrónico válida para añadirla a la lista. Para eliminar un destinatario, haga clic en la × que aparece sobre él.

Diálogo de envío de correo electrónico de prueba con dos destinatarios añadidos mostrados como etiquetas, cada uno con una × para eliminarlo

Haga clic en Enviar para enviar el mensaje de prueba a todos los destinatarios elegidos. Si todas las direcciones fallan, Pushwoosh muestra un error en el diálogo; si solo algunas fallan, lista las direcciones fallidas en una notificación y aun así entrega al resto.

Usar su contenido de correo electrónico guardado

Ahora que su contenido de correo electrónico está listo, puede usarse en campañas de correo electrónico. Más información sobre cómo usarlo