Crear contenido de email con el editor de arrastrar y soltar

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

Crear nuevo contenido de email

Ve a Contenido → Contenido de email.
Elige cómo empezar:
- Haz clic en Crear contenido de email para abrir el editor de arrastrar y soltar y crear un email desde cero.
- Haz clic en la flecha junto a Crear contenido de email, luego selecciona Usar una plantilla para empezar desde un diseño predefinido en la galería.
- Haz clic en la flecha junto a Crear contenido de email, luego selecciona Código HTML para usar el editor de código HTML. Más información

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

Explorar el diseño del editor

Una vez que abres un email, el editor integrado tiene estas áreas:

Barra superior

Renombra el email, deshaz o rehaz cambios, ejecuta Revisar para detectar problemas antes de enviar y guarda tu trabajo. Consulta Revisar tu email antes de enviarlo. Abre el menú ⋮ para más acciones:

Vista previa: ve el email tal como se renderizará para los destinatarios, con su propio interruptor de Escritorio/Móvil. Consulta Editar la vista móvil.
Email de prueba: envía una vista previa a un dispositivo o dirección de prueba. Consulta Enviar un email de prueba.
Brand book: aplica tu logo, colores, fuentes y valores predeterminados de bloque guardados a este email con un solo clic. Más información
Sección Estilos de marca: aplica tu marca guardada o restablece las anulaciones de estilo por bloque sin abrir el Brand book. Más información
Historial de versiones: ve y restaura una versión guardada anteriormente de este email. Consulta Restaurar una versión anterior.

Barra superior del editor de email con el nombre de la plantilla, Deshacer, Rehacer, Email de prueba y Guardar

Barra de Idioma / Asunto / Pre-encabezado

Encima del lienzo, cambia el idioma de edición, establece la línea de asunto y el pre-encabezado para el email, y usa Traducción automática para rellenar las traducciones que falten. Aprende a configurar idiomas y localización.

Lienzo

Ve el email como lo verán los destinatarios y edita texto, imágenes y botones directamente en el diseño. Un email vacío muestra Empezar con un bloque.

Panel de capas

Enumera cada bloque de tu email como un árbol, en el mismo orden que en el lienzo. Ábrelo desde el borde izquierdo para seleccionar un bloque anidado o arrastra filas para reordenar el contenido.

Panel derecho

Cambia entre tres pestañas:

Bloques: añade contenido al email. Consulta Referencia de bloques de contenido de email.
Ajustes: aplica estilo a todo el email a la vez. Consulta Configurar el estilo y el pie de página de todo el email.
IA: chatea con el asistente de IA para generar o editar contenido a partir de una indicación.

Añadir bloques de contenido

Abre la pestaña Bloques en el panel derecho.
Arrastra un bloque al lienzo o haz clic en un bloque para añadirlo al final del email.
Sigue añadiendo bloques hasta que el diseño esté listo.

Cada tipo de bloque tiene un propósito diferente en el email:

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 Galería de medios, subidas o desde una URL
Vídeo: un póster de vídeo 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 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: introduce los productos a mano o extráelos de tu Catálogo de productos o del carrito abandonado de un destinatario
Temporizador: una cuenta atrás para ofertas y fechas límite
Menú: una fila o columna de enlaces de navegación o de contacto
Social: iconos que enlazan a tus perfiles sociales
HTML: HTML personalizado, como un formulario, una encuesta o un vídeo incrustado

Consulta la Referencia de bloques de contenido de email para ver los ajustes 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, establece una condición de visualización.

Editar la vista móvil

Una vez que hayas añadido tus bloques de contenido, cambia 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, usa el interruptor Escritorio / Móvil para cambiar a una vista móvil totalmente editable con el ancho real de un teléfono. Selecciona, edita y reorganiza el contenido exactamente de la misma manera que tus suscriptores lo verán en su teléfono, en lugar de solo previsualizar cómo se adapta el diseño de escritorio.

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

Establecer un relleno y tamaño de fuente diferente por dispositivo

Relleno: cada bloque, columna, tarjeta y elemento individual (como texto, una imagen o un botón) tiene un control de relleno que puedes anular para móvil. Cambia el lienzo a Móvil, activa la casilla de verificación junto a Relleno y establece el nuevo valor. El relleno de escritorio permanece igual hasta que actives la casilla de verificación.
Tamaño de fuente: activa Tamaño de fuente (móvil) en un elemento de texto para establecer un tamaño solo para 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 el móvil

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

Apilar: las columnas fluyen en una sola columna, de arriba a abajo (por defecto).
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: mantén la imagen a la derecha en el escritorio, pero muéstrala en la parte superior en el 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

Abre los ajustes de un bloque o elemento y usa Ocultar en móvil u Ocultar en escritorio en Visibilidad para mostrarlo solo en un dispositivo, de modo que puedas crear banners, CTAs o navegación específicos para cada dispositivo sin mantener dos plantillas.

Ajustes de visibilidad con las 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 email

Una vez que el diseño principal está en su lugar, abre la pestaña Ajustes para establecer fuentes, colores y espaciado que se aplican a todo el email, y rellena el Pie de página con los detalles de tu empresa y el enlace para darse de baja. Los valores predeterminados aquí mantienen la consistencia de los nuevos bloques hasta que los anules en el lienzo. Más información

Guardar tu email

Haz clic en Guardar en la barra superior para guardar tus cambios. Usa Deshacer/Rehacer en la barra superior para retroceder y avanzar en tus ediciones.

Restaurar una versión anterior

Pushwoosh guarda una instantánea cada vez que haces clic en Guardar. Para acceder a ellas, abre el menú ⋮ en la barra superior y selecciona Historial de versiones, disponible una vez que el email se ha guardado al menos una vez.

El panel izquierdo enumera 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. Selecciona cualquier versión para previsualizarla a la derecha, luego haz clic en Restaurar para cargarla en el editor.

Panel del historial de versiones con las versiones guardadas a la izquierda y una vista previa del email a la derecha

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

Revisar tu email antes de enviarlo

Haz clic en Revisar en la barra superior para abrir Smart check y escanear tu email 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
Falta la dirección postal del remitente en el pie de página de un email 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, revisada en cada idioma que añadiste
Un bloque de Productos que usa Regla de catálogo, Carrito o Recomendaciones sin un token de acceso a la API

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

Haz 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 abres; 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 haya regresado, por lo que una comprobación de Liquid lenta o fallida no puede ocultarse detrás de un falso “todo correcto”.

Enviar un email de prueba

Antes de enviar tu campaña de email, puedes enviar un email de prueba para previsualizar cómo aparecerá el contenido en las bandejas de entrada de los destinatarios.

Abre el menú ⋮ en la barra superior y selecciona Email de prueba.

Opción de email de prueba en el menú desplegable de la barra superior

En la ventana que se abre, añade hasta 50 destinatarios: elige uno o más dispositivos de prueba guardados, o escribe cualquier dirección de email válida para añadirla a la lista. Para eliminar un destinatario, haz clic en la × que aparece sobre él.

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

Haz 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, enumera las direcciones fallidas en una notificación y aun así realiza la entrega al resto.

Usar tu contenido de email guardado

Ahora que tu contenido de email está listo, se puede usar en campañas de email. Más información sobre cómo usarlo