Crear contenido de correo electrónico con el editor de arrastrar y soltar
Crea contenido de correo electrónico 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 correo electrónico único.
Crear nuevo contenido de correo electrónico
Anchor link to- Ve a Contenido → Contenido de correo electrónico.
- Elige cómo empezar:
- Haz clic en Crear contenido de correo electrónico para abrir el editor de arrastrar y soltar y crear un correo electrónico desde cero.
- Haz clic en la flecha junto a Crear contenido de correo electrónico y, a continuación, 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 correo electrónico y, a continuación, selecciona Código HTML para utilizar el editor de código HTML. Más información

Explora el diseño del editor
Anchor link toUna vez que abres un correo electrónico, el editor integrado tiene estas áreas:
Barra superior
Cambia el nombre del correo electrónico, deshaz o rehaz cambios y guarda tu trabajo. Abre el menú ⋮ para más acciones:
- Vista previa: ve el correo electrónico tal y como se mostrará a los destinatarios, con su propio conmutador de Escritorio/Móvil. Consulta Editar la vista móvil.
- Validar Liquid: comprueba la sintaxis de Liquid en tu asunto, preencabezado, pie de página y cuerpo en todos los idiomas antes de enviar.
- Correo electrónico de prueba: envía una vista previa a un dispositivo o dirección de prueba. Consulta Enviar un correo electrónico de prueba.

Barra de Idioma / Asunto / Preencabezado
Encima del lienzo, cambia el idioma de edición y establece la línea de asunto y el preencabezado del correo electrónico. Aprende a configurarlos.

Lienzo
Ve el correo electrónico tal y como lo verán los destinatarios, y edita el texto, las imágenes y los botones directamente en el diseño. Un correo electrónico vacío muestra Empezar con un bloque.

Panel de capas
Enumera cada bloque de tu correo electrónico como un árbol, en el mismo orden que en el lienzo. Ábrelo desde el borde izquierdo para seleccionar un bloque anidado o arrastra las filas para reordenar el contenido.

Panel derecho
Cambia entre tres pestañas:
- Bloques: añade contenido al correo electrónico. Consulta Añadir bloques de contenido.
- Ajustes: aplica estilos a todo el correo electrónico a la vez. Consulta Configurar estilos para todo el correo electrónico.
- IA: chatea con el asistente de IA para generar o editar contenido a partir de una indicación.
Empieza a crear tu correo electrónico
Anchor link to- Arrastra un bloque desde el panel Bloques al lienzo, o haz clic en un bloque en el panel para añadirlo al final del correo electrónico.
- Sigue añadiendo bloques de la misma manera hasta que el diseño esté listo.
- Abre la pestaña Ajustes cuando necesites aplicar estilos a todo el correo electrónico.
Añadir bloques de contenido
Anchor link toAbre la pestaña Bloques y arrastra un bloque al lienzo, o haz clic en un bloque para añadirlo al final del correo electrónico. Bloques disponibles:
- Encabezado: títulos y titulares cortos en el correo electrónico
- 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
- Tarjeta: una imagen combinada con un encabezado, texto y botón en un solo diseño
- Divisor: una línea que separa visualmente las secciones
- 2 columnas: dos columnas iguales una al lado de la otra
- 3 columnas: tres columnas iguales una al lado de la otra
- 4 columnas: cuatro columnas iguales una al lado de la otra
- 33 / 67: dos columnas donde la izquierda ocupa aproximadamente el 33% del ancho y la derecha aproximadamente el 67%
- 67 / 33: dos columnas donde la izquierda ocupa aproximadamente el 67% del ancho y la derecha aproximadamente el 33%
- Temporizador: una cuenta atrás para ofertas y plazos
- Menú: una fila o columna de enlaces, como navegación o contactos
- Social: iconos que enlazan a tus perfiles sociales
- HTML: HTML personalizado, como un formulario, una encuesta o un vídeo incrustado
Encabezado y texto
Anchor link toLos bloques de Encabezado y Texto contienen el texto que los destinatarios leen en el correo electrónico. Edita el texto en el lienzo y dale formato con la barra de herramientas.
Haz clic en un bloque de Encabezado o Texto para editar su contenido en el lienzo. Selecciona un texto para que aparezca la barra de herramientas de formato: negrita, cursiva, subrayado, alineación, un botón de enlace y un menú desplegable de estilo de texto.

Las Etiquetas de combinación son marcadores de posición que insertan un valor de Etiqueta del perfil del destinatario en el correo electrónico, de modo que cada suscriptor ve un texto personalizado. Para añadir una, selecciona el texto, haz clic en Etiquetas de combinación en la barra de herramientas y elige una Etiqueta de tu cuenta.
Imagen
Anchor link toUn bloque de Imagen muestra una imagen en el correo electrónico. Selecciónalo en el lienzo para abrir los ajustes de Imagen en el panel derecho.
- Añadir imagen / Reemplazar imagen: haz clic en Añadir imagen cuando el bloque esté vacío, o en Reemplazar imagen cuando ya haya una imagen establecida. Puedes subir un archivo o elegir uno de tu Galería de medios.
- URL de la imagen: pega un enlace alojado a la imagen.
- Texto alternativo: describe la imagen para la accesibilidad.
- URL del enlace: abre un enlace cuando se hace clic en la imagen. Consulta Añadir enlaces para ver los tipos de enlace disponibles.
- Destino del enlace: abre el enlace en la misma pestaña o en una nueva.
- Archivo: después de añadir una imagen, muestra la ruta del archivo en uso.
En Espaciado, activa Relleno para añadir espacio alrededor de la imagen. Usa Todos los lados para el mismo relleno en cada lado, o activa Más opciones para establecer cada lado por separado.

Tarjeta
Anchor link toUn bloque de Tarjeta combina una imagen con un encabezado, texto y un botón en un único diseño ya preparado. Selecciónalo en el lienzo para abrir su configuración en el panel derecho.
- Diseño: elige en qué lado se sitúa la imagen en relación con el contenido.
- Imagen: reemplaza la imagen, establece el texto alternativo y (para imágenes generadas por IA) edita la indicación utilizada para crearla.
- Tamaño y ajuste: establece el tamaño de la imagen y cómo se ajusta y posiciona dentro de su área.
- Espaciado: establece el relleno alrededor del contenido de la tarjeta.

Botón
Anchor link toUn Botón es una llamada a la acción en la que se puede hacer clic en el correo electrónico.
Haz clic en un bloque de Botón para editar su etiqueta en el lienzo. Usa la barra de herramientas para cambiar el tamaño de la fuente, el color del texto, negrita, cursiva, subrayado y alineación.
Para establecer qué sucede cuando el destinatario hace clic en el botón:
- Haz clic en el icono de enlace en la barra de herramientas para abrir Insertar/Editar enlace.
- O usa Tipo de acción y URL en la sección Enlace del panel derecho.

Consulta Añadir enlaces para ver los tipos de acción disponibles.
En el panel derecho, en Estilos:
- Alineación: izquierda, centro o derecha.
- Fondo, Color del texto, Tamaño de la fuente y Familia de fuentes: activa cada opción para anular el aspecto predeterminado.
- Radio del borde, Color del borde y Ancho del borde: forma y contorno del botón.
- Ancho: establece un ancho de botón fijo o déjalo automático.
- Relleno: añade espacio dentro del botón. Usa Todos los lados para un relleno uniforme, o activa Más opciones para establecer cada lado por separado.

Divisor
Anchor link toUn Divisor es una línea horizontal entre bloques de contenido. Úsalo para separar secciones visualmente en el correo electrónico.
Configura el estilo de línea (Sólido, Discontinuo, Punteado), el color, el grosor y el ancho en el panel de configuración.

HTML
Anchor link toEl bloque HTML te permite pegar HTML personalizado en tu correo electrónico. Úsalo para un formulario personalizado, una encuesta o un vídeo incrustado.
Ejemplos
Anchor link toEste formulario de clientes potenciales recopila una dirección de correo electrónico para enviar un código promocional para la Venta de Año Nuevo.

Código HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style> body { margin: 0; padding: 20px; font-family: Arial, sans-serif; } h2 { font-size: 18px; margin-bottom: 8px; color: #222; } p { font-size: 14px; color: #666; margin-bottom: 20px; } input { width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; box-sizing: border-box; } button { width: 100%; padding: 14px; background: #CC0000; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; }</style></head><body>
<h2>Get your New Year Sale code</h2><p>Enter your email and we'll send you an exclusive promo code for up to 50% off.</p>
<div id="form"> <input type="email" placeholder="Your email address" /> <button type="button">Get my code</button></div>
</body></html>Esta encuesta pregunta por qué categoría está comprando el destinatario y enlaza cada opción a la página de venta correspondiente.

Código HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style> body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; } h2 { font-size: 18px; margin-bottom: 6px; color: #222; } p { font-size: 13px; color: #888; margin-bottom: 20px; } .option { display: block; width: 100%; padding: 14px; margin-bottom: 10px; background: #f5f5f5; border: 2px solid transparent; border-radius: 10px; font-size: 15px; cursor: pointer; box-sizing: border-box; text-decoration: none; color: #222; } .option:hover { border-color: #CC0000; background: #fff5f5; }</style></head><body>
<h2>What are you shopping for?</h2><p>Pick a category and go straight to your deals</p>
<a class="option" href="https://example.com/sale/clothing">👗 Clothing</a><a class="option" href="https://example.com/sale/electronics">📱 Electronics</a><a class="option" href="https://example.com/sale/beauty">💄 Beauty</a><a class="option" href="https://example.com/sale/home">🏠 Home & Living</a>
</body></html>Este ejemplo incrusta un vídeo promocional de la Venta de Año Nuevo en el correo electrónico.
Código HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; text-align: center; } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style></head><body>
<h1>New Year Sale — Up to 50% Off</h1>
<div class="video-container"> <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</body></html>Menú
Anchor link toEl bloque Menú coloca varios elementos clicables en una fila o columna. Úsalo para una barra de navegación o una lista de contactos de la empresa.
Para cada elemento del menú, establece:
- Etiqueta: el texto que ven los destinatarios
- URL: dónde se abre el elemento
- Destino: misma pestaña o una nueva pestaña
En la configuración del bloque, también puedes establecer:
- Dirección: Horizontal o Vertical
- Alineación: Izquierda, Centro o Derecha
- Separador: un divisor opcional entre elementos
- Fuente, tamaño, peso, espaciado entre letras y colores de enlace/texto

Social
Anchor link toEl bloque Social muestra una fila de iconos de redes sociales que enlazan a tus perfiles. Úsalo para enviar a los destinatarios a Facebook, Instagram, X y otras plataformas desde el correo electrónico.
Añade entradas de plataforma, luego establece la alineación, el tamaño de los iconos y el espacio entre ellos.

Temporizador de cuenta atrás
Anchor link toEl bloque Temporizador es una cuenta atrás en el correo electrónico. Úsalo para ofertas por tiempo limitado, ventas flash y recordatorios de eventos.
Para configurarlo:
- En Cuenta atrás, establece la Fecha de finalización y la Hora de finalización, luego elige la Zona horaria y el Idioma para las etiquetas del temporizador.
- Activa Etiquetas para mostrar los subtítulos “días / horas / minutos / segundos” debajo de los dígitos, o desactívalo para solo números.
- En Apariencia, establece el Fondo, el Color de los dígitos, el Color de las etiquetas y el tamaño de la fuente para los dígitos (predeterminado 40px) y las etiquetas (predeterminado 16px).
- Ajusta el Espaciado (relleno) según sea necesario.

Columnas
Anchor link toLas Columnas dividen el lienzo en secciones una al lado de la otra para que puedas colocar contenido uno junto al otro en una sola fila.
Arrastra uno de estos bloques al lienzo:
- 2 columnas: dos columnas iguales
- 3 columnas: tres columnas iguales
- 4 columnas: cuatro columnas iguales
- 33 / 67: columna izquierda de aproximadamente 33% de ancho, derecha de aproximadamente 67%
- 67 / 33: columna izquierda de aproximadamente 67% de ancho, derecha de aproximadamente 33%
Luego añade contenido a cada columna. Para cambiar el espaciado de todas las columnas en el correo electrónico, abre Ajustes → Valores predeterminados de las columnas y ajusta el relleno exterior, el relleno de la columna y el espacio entre columnas.
Guardar y reutilizar bloques
Anchor link toGuarda un bloque para reutilizarlo en este u otros correos electrónicos en lugar de reconstruirlo cada vez.
- Haz clic en el bloque mismo (su marco o fondo, no el texto o botón dentro de él) para seleccionar todo el bloque. Tarjeta, Columnas y Social son ejemplos de bloques que funcionan de esta manera.
- Haz clic en el icono de marcador en la barra de herramientas del bloque y dale un nombre.

Los bloques guardados aparecen en Bloques guardados en la parte inferior de la pestaña Bloques.

- Arrastra un bloque guardado al lienzo, o haz clic en él para añadirlo al final del correo electrónico.
- Haz clic en la × en el mosaico de un bloque guardado para eliminarlo.
Editar la vista móvil
Anchor link toUna 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, utiliza el conmutador 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 como lo verán tus suscriptores 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 la vista móvil tiene una casilla de verificación al lado. Cuando la casilla está desactivada, una pista muestra el valor heredado del escritorio, y el ajuste sigue usándolo. Activa la casilla para establecer un valor separado para el móvil. Desactívala de nuevo para volver al valor de escritorio.
Establecer diferentes rellenos y tamaños de fuente por dispositivo
Anchor link to- 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 la vista 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.
- Tamaño de la fuente: activa Tamaño de la fuente (móvil) en un elemento de texto para establecer un tamaño solo para móviles. 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
Anchor link toLos 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 (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: mantén la imagen a la derecha en el escritorio, pero muéstrala en la parte superior en el móvil.

Mostrar u ocultar contenido por dispositivo
Anchor link toAbre la configuración 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.

Añadir enlaces
Anchor link toUsa el diálogo Insertar/Editar enlace para establecer qué sucede cuando un destinatario hace clic en un botón o en un texto seleccionado. Elige un Tipo de acción y luego rellena los campos para esa acción.
Abrir sitio web
Anchor link toAbre un enlace cuando el destinatario hace clic. Introduce la dirección en URL.

Enlace para gestionar preferencias
Anchor link toAñade un enlace al centro de preferencias de suscripción donde los destinatarios pueden elegir qué categorías de correo electrónico reciben. El enlace se inserta automáticamente.

Enlace para darse de baja
Anchor link toPermite a los destinatarios darse de baja de acuerdo con las regulaciones y sus preferencias.

Qué sucede cuando el destinatario hace clic en el enlace para darse de baja
Anchor link toSi el centro de preferencias de suscripción está habilitado
Anchor link toEl destinatario se da de baja solo de la categoría asignada a ese correo electrónico (p. ej., Boletín). El nombre de la categoría se añade a su etiqueta Categorías de correo electrónico de las que se ha dado de baja.
Aparece una pantalla de confirmación con las opciones Volver a suscribirse y Gestionar preferencias. Más información.
Si el centro de preferencias de suscripción no está habilitado
Anchor link toEl destinatario se da de baja de todos los correos electrónicos de marketing y la etiqueta Correos electrónicos de los que se ha dado de baja se establece en true. Los correos electrónicos transaccionales no se ven afectados y seguirán entregándose. Más información sobre los tipos de mensajes.
Los clics se cuentan en la tasa de cancelación de suscripción en el Historial de mensajes.
Enlace a la versión web
Anchor link toDa a los destinatarios acceso a una versión web del correo electrónico, útil si tienen problemas para verlo en su bandeja de entrada.

No rastrear estadísticas
Anchor link toAbre un enlace cuando el destinatario hace clic, sin contar el clic para las estadísticas de clics de tu correo electrónico. Introduce la dirección en URL.

Enlace de confirmación del formulario de suscripción
Anchor link toInserta un enlace de confirmación para el envío de un formulario de suscripción (por ejemplo, para confirmar una doble suscripción). Más información sobre la doble suscripción.

Configurar estilos para todo el correo electrónico
Anchor link toLos ajustes del correo electrónico controlan el estilo de todo el correo electrónico: tamaño y fondo del documento, opciones orientadas al remitente y estilos predeterminados para los bloques.
Abre la pestaña Ajustes en el panel derecho.
Secciones disponibles:
- Documento: tamaño y aspecto de toda el área del correo electrónico: ancho, relleno, color de fondo, imagen o gradiente de fondo, color del texto, familia de fuentes y el espacio entre bloques.
- Opciones de correo electrónico: activa o desactiva Ver en el navegador y Enlace para darse de baja para el correo electrónico.
- Valores predeterminados de los bloques: fondo inicial, imagen de fondo, color del borde, ancho del borde, radio del borde y visibilidad predeterminada móvil/escritorio para los bloques que añadas más tarde, de modo que el nuevo contenido coincida con el correo electrónico hasta que anules un bloque en el lienzo.
- Valores predeterminados de las columnas: espaciado para cada diseño de Columnas: relleno exterior, relleno dentro de cada columna y el espacio entre columnas.
- Valores predeterminados de las tarjetas: aspecto inicial para los contenedores de Tarjeta que agrupan contenido en el diseño, aplicado hasta que diseñes una tarjeta individualmente.
- Valores predeterminados del grupo de botones: espaciado y alineación cuando varios botones se sientan juntos como un grupo.
- Valores predeterminados de los botones: aspecto inicial para los nuevos bloques de Botón para que las CTAs se mantengan consistentes en todo el correo electrónico hasta que diseñes uno por separado.
- Valores predeterminados del divisor: estilo de línea inicial, color, grosor y ancho para los nuevos bloques de Divisor.
Los valores predeterminados se aplican donde un bloque individual no los anule.
Configurar el pie de página del correo electrónico
Anchor link toCada correo electrónico incluye un bloque de Pie de página para la información del remitente y el enlace para darse de baja requeridos por ley. Selecciona Pie de página en el Panel de capas para abrir su configuración.

Usa Cargar desde la cuenta para importar tu pie de página guardado a nivel de cuenta, o Guardar como predeterminado de la cuenta para reutilizar el pie de página actual como punto de partida para futuros correos electrónicos.
- Tipo de correo electrónico: Marketing o Transaccional. La visibilidad de la opción para darse de baja sigue esta configuración.
- Logotipo: establece la URL del logotipo o elige uno de la galería, luego establece el ancho en px y un enlace opcional para hacer clic.
- Nombre de la empresa, Dirección postal y Copyright: tu identidad de remitente en el pie de página.
En Enlaces e insignias:
- Enlaces del pie de página: añade enlaces con etiqueta, como Política de privacidad o Términos.
- Insignias de la tienda de aplicaciones: añade insignias de App Store o Google Play con URL de destino.
- Enlaces sociales: añade iconos que enlacen a tus perfiles sociales.

En Estilo:
- Color del texto: establece el color del texto del pie de página.
- Tamaño de la fuente (px): establece el tamaño de la fuente del pie de página.
- Alineación: izquierda, centro o derecha.
- Subrayar enlaces: activa para subrayar los enlaces del pie de página.
En Opciones:
- Texto del enlace para darse de baja: la etiqueta para el enlace de cancelación de suscripción gestionado en los correos electrónicos de marketing. Los correos electrónicos transaccionales lo omiten.
Localiza el contenido de tu correo electrónico
Anchor link toUsa el selector de idioma sobre el lienzo para añadir idiomas y editar el contenido por idioma. Aprende a añadir idiomas.
El contenido que aún no has traducido para el idioma actual se muestra atenuado. Empieza a escribir para crear la traducción. El idioma predeterminado seguirá mostrándose hasta que lo hagas.

Guarda tu correo electrónico
Anchor link toHaz 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.
Enviar un correo electrónico de prueba
Anchor link toAntes de enviar tu campaña de correo electrónico, puedes enviar un correo electrónico 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 Correo electrónico de prueba.

- En la ventana que se abre, elige un dispositivo de prueba guardado o escribe cualquier dirección de correo electrónico.

- Haz clic en Enviar para enviar el mensaje de prueba a la dirección que elegiste.
Usa tu contenido de correo electrónico guardado
Anchor link toAhora que tu contenido de correo electrónico está listo, se puede usar en campañas de correo electrónico. Más información sobre cómo usarlo