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. Obtendrás 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.

Nota

¿Prefieres HTML? Usa el editor de código HTML de Pushwoosh para tener más control. Aprende más

Importante

Antes de empezar, configura los idiomas, la línea de asunto y los detalles del remitente de tu correo electrónico. Aprende cómo

Crear nuevo contenido de correo electrónico

1. Ve a Contenido → Contenido de correo electrónico.
2. 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 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 correo electrónico y luego selecciona Código HTML para usar el editor de código HTML. Aprende más

Explora el diseño del editor

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

Barra superior

Renombra el correo electrónico, deshaz o rehaz cambios, guarda tu trabajo o envía 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 para el correo electrónico. Aprende cómo configurarlos.

Lienzo

Ve el correo electrónico como lo verán los destinatarios y edita texto, imágenes y botones directamente en el diseño. Un correo electrónico vacío muestra Comenzar 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 filas para reordenar el contenido.

Panel derecho

Usa Bloques para añadir contenido al correo electrónico y Ajustes para el estilo que se aplica a todo el correo electrónico a la vez. Consulta Configurar el estilo de todo el correo electrónico.

Comienza a construir tu correo electrónico

1. Arrastra un bloque desde el panel Bloques al lienzo, o haz clic en un bloque en el panel para añadirlo.
2. Sigue añadiendo bloques de la misma manera hasta que el diseño esté listo.
3. Abre la pestaña Ajustes cuando necesites aplicar un estilo a todo el correo electrónico.

Añadir bloques de contenido

Abre la pestaña Bloques y arrastra un bloque al lienzo, o haz clic en un bloque para añadirlo. 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
• Divisor: una línea que separa secciones visualmente
• 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 video incrustado

Encabezado y texto

Los 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 algo de 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 Merge Tags son marcadores de posición que insertan un valor de Tag del perfil del destinatario en el correo electrónico, para que cada suscriptor vea un texto personalizado. Para añadir una, selecciona el texto, haz clic en Merge Tags en la barra de herramientas y elige una Tag de tu cuenta.

Imagen

Un 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 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.

Botón

Un 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 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

Un 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 ajustes.

HTML

El bloque HTML te permite pegar HTML personalizado en tu correo electrónico. Úsalo para un formulario personalizado, una encuesta o un video incrustado.

Ejemplos

Formulario de cliente potencial

Este formulario de cliente potencial 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>

Encuesta

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>

Video

Este ejemplo incrusta un video 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>

Nota

También puedes añadir un enlace para cancelar la suscripción directamente en el bloque HTML:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

El marcador de posición %%PW_EMAIL_UNSUBSCRIBE%% se reemplaza con la URL de cancelación de suscripción de Pushwoosh cuando se envía el correo electrónico.

Menú

El bloque Menú coloca varios elementos en los que se puede hacer clic 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: a dónde se abre el elemento
• Destino: misma pestaña o una nueva pestaña

En los ajustes 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

El 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 plataformas, luego establece la alineación, el tamaño del icono y el espacio entre iconos.

Temporizador de cuenta atrás

El 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:

1. 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.
2. Activa Etiquetas para mostrar los subtítulos “días / horas / minutos / segundos” debajo de los dígitos, o desactívalo para solo números.
3. 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).
4. Ajusta el Espaciado (relleno) según sea necesario.

Columnas

Las 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.

Añadir enlaces

Usa 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 completa los campos para esa acción.

Abrir sitio web

Abre un enlace cuando el destinatario hace clic. Introduce la dirección en URL.

Enlace para gestionar preferencias

Añ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 cancelar la suscripción

Permite a los destinatarios optar por no participar de acuerdo con las regulaciones y sus preferencias.

Consejo

También puedes añadir un enlace para cancelar la suscripción en un bloque HTML:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

El marcador de posición %%PW_EMAIL_UNSUBSCRIBE%% se reemplaza con la URL de cancelación de suscripción de Pushwoosh cuando se envía el correo electrónico.

Qué sucede cuando el destinatario hace clic en el enlace para cancelar la suscripción

Si el centro de preferencias de suscripción está habilitado

El destinatario cancela la suscripción 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 tag Categorías de correo electrónico canceladas.

Aparece una pantalla de confirmación con las opciones Volver a suscribirse y Gestionar preferencias. Aprende más.

Si el centro de preferencias de suscripción no está habilitado

El destinatario opta por no recibir todos los correos electrónicos de marketing y la tag Correos electrónicos cancelados se establece en true. Los correos electrónicos transaccionales no se ven afectados y seguirán entregándose. Aprende más sobre los tipos de mensajes.

Importante

Para permitirte entregar correos electrónicos importantes a tus clientes, no eliminamos a los usuarios que han cancelado su suscripción de tu base de usuarios.

Para seguir enviando mensajes a los destinatarios comprometidos, crea un segmento filtrado por Correos electrónicos cancelados = false. Para evitar quejas, no envíes correos electrónicos a los destinatarios que han cancelado su suscripción.

Los clics se cuentan en la tasa de cancelación de suscripción en el Historial de mensajes.

Enlace a la versión web

Da a los destinatarios acceso a una versión web del correo electrónico, útil si tienen problemas para verlo en su bandeja de entrada.

Enlace de confirmación de formulario de suscripción

Inserta un enlace de confirmación para el envío de un formulario de suscripción (por ejemplo, para confirmar una doble suscripción). Aprende más sobre la doble suscripción.

Configurar el estilo de todo el correo electrónico

Los 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 de la derecha.

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 cancelar la suscripción para el correo electrónico.
• Valores predeterminados de los bloques: estilos iniciales compartidos para los bloques que añadas más tarde, para 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 todos los diseños de Columnas: relleno exterior, relleno dentro de cada columna y el espacio entre columnas.
• Valores predeterminados de la tarjeta: 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 del botón: aspecto inicial para los nuevos bloques de Botón para que las llamadas a la acción se mantengan consistentes en todo el correo electrónico hasta que diseñes uno por separado.
• Valores predeterminados del divisor: estilo de línea, color, grosor y ancho iniciales para los nuevos bloques de Divisor.

Los valores predeterminados se aplican siempre que un bloque individual no los anule.

Configurar el pie de página del correo electrónico

Cada correo electrónico incluye un bloque de Pie de página para la información del remitente y el enlace para cancelar la suscripción requeridos por ley. Selecciona Pie de página en el Panel de capas para abrir sus ajustes.

Usa Cargar desde la cuenta para traer 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 cancelación de suscripción 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.

Precaución

Los correos electrónicos de marketing deben incluir una dirección postal física (CAN-SPAM).

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 URLs 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 cancelar la suscripción: 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.

Localizar el contenido de tu correo electrónico

Usa el selector de idioma sobre el lienzo para añadir idiomas y editar el contenido por idioma. Aprende cómo añadir idiomas.

El contenido que aún no has traducido para el idioma actual se muestra atenuado. Comienza a escribir para crear la traducción. El idioma predeterminado seguirá mostrándose hasta que lo hagas.

Nota

Cualquier bloque que añadas aparece con el mismo contenido para cada idioma. Recuerda traducir el nuevo texto y las etiquetas de los botones para cada idioma que uses en tu correo electrónico.

Guardar tu correo electrónico

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.

Nota

Al guardar, tu correo electrónico se almacena en Contenido → Contenido de correo electrónico. Desde allí puedes editarlo y gestionarlo, y usarlo en tus campañas. Aprende más

Enviar un correo electrónico de prueba

Antes 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.

1. Haz clic en Correo de prueba en la barra superior.

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

3. Haz clic en Enviar para enviar el mensaje de prueba a la dirección que elegiste.

Usar tu contenido de correo electrónico guardado

Ahora que tu contenido de correo electrónico está listo, se puede usar en campañas de correo electrónico. Aprende más sobre cómo usarlo