Saltar al contenido

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
  1. Ve a ContenidoContenido 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, 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
Botón Crear contenido de correo electrónico con un menú que muestra Usar una plantilla y Código HTML

Explora el diseño del editor

Anchor link to

Una 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 superior del editor de correo electrónico con el nombre de la plantilla, Deshacer, Rehacer, Correo electrónico de prueba y Guardar

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.

Barra de idioma, asunto y preencabezado sobre el lienzo con un selector de idioma y campos de texto

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.

Lienzo vacío en el editor de correo electrónico con el mensaje 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 de capas que enumera Tarjeta, Imagen, Encabezado, Texto y Pie de página en un árbol

Panel derecho

Cambia entre tres pestañas:

Empieza a crear tu correo electrónico

Anchor link to
  1. 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.
  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 estilos a todo el correo electrónico.

Añadir bloques de contenido

Anchor link to

Abre 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 to

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

Bloque de encabezado seleccionado en el lienzo con la barra de herramientas de formato de texto que muestra opciones de estilo y formato

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.

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

Panel de configuración de imagen con Reemplazar imagen, URL de la imagen, Texto alternativo, URL del enlace, Destino del enlace, Archivo y Relleno

Un 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.
Panel de configuración del bloque de tarjeta con opciones de Diseño, Imagen, Tamaño y ajuste, y Espaciado

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.
Bloque de botón en el lienzo con una barra de herramientas de formato y configuración de enlace en el 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.
Configuración de Estilos de botón en el panel derecho con Alineación, Fondo, Color del texto, Tamaño de la fuente, Radio del borde y Relleno

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 configuración.

Configuración del bloque Divisor con opciones de estilo de línea, color, grosor y ancho en el panel derecho

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

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

Formulario de clientes potenciales HTML en el editor de correo electrónico con un campo de correo electrónico y un botón Obtener mi código
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>

El 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
Configuración del bloque de menú con etiquetas de elementos, URL, dirección, alineación y opciones de separador

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 plataforma, luego establece la alineación, el tamaño de los iconos y el espacio entre ellos.

Configuración del bloque social con enlaces de plataforma más Alineación, Tamaño de icono y Espacio

Temporizador de cuenta atrás

Anchor link to

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.
Configuración del bloque de temporizador con fecha y hora de finalización de la cuenta atrás, etiquetas, apariencia y opciones de espaciado

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 AjustesValores 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 to

Guarda un bloque para reutilizarlo en este u otros correos electrónicos en lugar de reconstruirlo cada vez.

  1. 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.
  2. Haz clic en el icono de marcador en la barra de herramientas del bloque y dale un nombre.
Icono de marcador en la barra de herramientas de un bloque de Tarjeta abriendo un diálogo para nombrar y guardar el bloque

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

Sección de bloques guardados en la parte inferior de la pestaña Bloques con mosaicos de bloques guardados e iconos de eliminación
  • 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 to

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, 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 to

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 (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.
Sección móvil en el panel derecho con opciones de Apilar, Mantener fila e Invertir para un bloque de Columnas

Mostrar u ocultar contenido por dispositivo

Anchor link to

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

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

Añadir enlaces

Anchor link to

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

Abrir sitio web

Anchor link to

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

Diálogo Insertar/Editar enlace con el tipo de acción Abrir sitio web y un campo de URL

Enlace para gestionar preferencias

Anchor link to

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.

Diálogo Insertar/Editar enlace con Enlace para gestionar preferencias seleccionado como tipo de acción

Enlace para darse de baja

Anchor link to

Permite a los destinatarios darse de baja de acuerdo con las regulaciones y sus preferencias.

Diálogo Insertar/Editar enlace con Enlace para darse de baja seleccionado como tipo de acción y un campo de redirección opcional
Qué sucede cuando el destinatario hace clic en el enlace para darse de baja
Anchor link to
Si el centro de preferencias de suscripción está habilitado
Anchor link to

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

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

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.

Diálogo Insertar/Editar enlace con Enlace a la versión web seleccionado como tipo de acción

No rastrear estadísticas

Anchor link to

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

Diálogo Insertar/Editar enlace con No rastrear estadísticas seleccionado como tipo de acción y un campo de URL

Enlace de confirmación del formulario de suscripción

Anchor link to

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

Diálogo Insertar/Editar enlace con Enlace de confirmación del formulario de suscripción seleccionado como tipo de acción

Configurar estilos para todo el correo electrónico

Anchor link to

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

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

Panel de capas con Pie de página seleccionado y el pie de página resaltado en el lienzo del correo electrónico

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.
Configuración del pie de página con Cargar desde la cuenta, Tipo de correo electrónico, Logotipo, Nombre de la empresa, Dirección postal, Copyright y Enlaces e insignias

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 to

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

Selector de idioma sobre el lienzo con contenido no traducido atenuado visible en el editor de correo electrónico

Guarda tu correo electrónico

Anchor link to

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.

Enviar un correo electrónico de prueba

Anchor link to

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. Abre el menú en la barra superior y selecciona Correo electrónico de prueba.
Opción de correo electrónico de prueba en el menú desplegable de la barra superior
  1. En la ventana que se abre, elige un dispositivo de prueba guardado o escribe cualquier dirección de correo electrónico.
Diálogo de envío de correo electrónico de prueba con un campo para elegir un dispositivo de prueba o escribir una dirección de correo electrónico
  1. 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 to

Ahora 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