Referencia de bloques de contenido de correo electrónico

Referencia para cada bloque que puede agregar en el lienzo del editor de arrastrar y soltar, y para los tipos de enlace disponibles en botones y texto. Para controlar qué destinatarios ven un bloque, establezca una condición de visualización.

Agregar bloques de contenido

Abra la pestaña Bloques y arrastre un bloque al lienzo, o haga clic en un bloque para agregarlo 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 tienda de medios, subidas o desde una URL
• Video: un póster de video en el que se puede hacer clic que enlaza a un video de YouTube o Vimeo
• 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 regresiva para ofertas y plazos
• Código de barras: un código escaneable Code 128, EAN-13, EAN-8, UPC-A o QR generado a partir de un valor de personalización, como un cupón
• Menú: una fila o columna de enlaces, como navegación o contactos
• Social: iconos que enlazan a sus perfiles sociales
• HTML: HTML personalizado, como un formulario, una encuesta o un video incrustado
• Productos: una cuadrícula repetitiva de tarjetas de productos. Ingrese productos a mano o extráigalos de su catálogo de productos, del carrito abandonado de un destinatario o de una estrategia de recomendación integrada, como los más vendidos o los que vuelven a estar en stock.
• Noticias: una cuadrícula repetitiva de tarjetas de artículos. Selecciónelos a mano de una fuente RSS o Atom, o extráigalos en vivo de una fuente registrada para su aplicación.
• Espacio publicitario: una ubicación de pago que muestra una campaña patrocinada a los destinatarios

Encabezado y texto

Los bloques de Encabezado y Texto contienen el texto que los destinatarios leen en el correo electrónico. Use Encabezado para títulos y líneas cortas, Texto para el cuerpo del texto y descripciones más largas.

Haga clic en un bloque en el lienzo para comenzar a editar. Seleccione texto para que aparezca la barra de herramientas de formato.

Opciones de la barra de herramientas

• Estilo de texto: establezca un estilo de párrafo (Encabezado 1, Encabezado 2, Normal, etc.) para todo el bloque
• Tamaño de fuente: cambie el tamaño del texto seleccionado o aplique un tamaño a todo el párrafo
• Negrita / Cursiva / Subrayado / Tachado: formato de caracteres estándar
• Alineación: izquierda, centro o derecha
• Enlace: envuelva el texto seleccionado en un hipervínculo
• Lista con viñetas / Lista numerada: convierta las líneas seleccionadas en una lista. Cualquier viñeta o número con el que ya comiencen las líneas se elimina, para que no se duplique con el marcador propio de la lista.

Seleccione el bloque (no un rango de texto) para abrir su configuración en el panel derecho, luego active Espaciado entre letras para aflojar o apretar el espaciado de caracteres para todo el bloque. Acepta valores fraccionarios y negativos. Para aplicar el espaciado entre letras en todos los bloques de texto a la vez, configúrelo como un valor predeterminado para todo el correo electrónico en Tipografía. Consulte Configurar el estilo de todo el correo electrónico.

Pegar desde otros documentos

Pegar texto de Google Docs, Word o una página web mantiene la negrita, cursiva, subrayado, tachado y enlaces. El color, el tamaño de fuente y la familia de fuentes de origen no se transfieren; la tipografía propia del bloque siempre prevalece. Para ignorar por completo el formato de origen y adoptar el estilo del bloque, pegue con Ctrl+Shift+V (Cmd+Shift+V en Mac).

Una lista con viñetas o numerada pegada mantiene su viñeta o número como texto sin formato al principio de cada línea, en el mismo bloque. Seleccione esas líneas y haga clic en Lista con viñetas / Lista numerada para convertirlas en una lista real; el botón elimina el marcador sobrante por usted.

En los campos de una sola línea, como la etiqueta de un Botón, los saltos de línea pegados se colapsan en un solo espacio.

Personalización con Merge Tags

Las Merge Tags son marcadores de posición que insertan un valor de Tag del perfil del destinatario, para que cada suscriptor vea un texto personalizado. Para agregar una, seleccione el texto, haga clic en Merge Tags en la barra de herramientas y elija una Tag de su cuenta. Haga clic en una Merge Tag insertada para abrir un panel con los campos Predeterminado (el valor que se muestra cuando la etiqueta está vacía) y Formato (mayúsculas, formato de número o fecha para aplicar al valor).

Imagen

Un bloque de Imagen muestra una imagen en el correo electrónico. Selecciónelo en el lienzo para abrir la configuración de Imagen en el panel derecho.

Agregar una imagen

Haga clic en Agregar imagen cuando el bloque esté vacío, o en Reemplazar imagen cuando ya haya una imagen establecida. Esto abre la Galería de medios con tres pestañas:

• Biblioteca: sus archivos subidos, con capacidad de búsqueda por nombre de archivo.
• Fotos de stock: busque fotos gratuitas de Pexels sin salir del editor. Haga clic en una para copiarla a su biblioteca e insertarla.
• Generar con IA: describa la imagen que desea y elija una relación de aspecto. La imagen generada se guarda en su biblioteca.

También puede pegar un enlace alojado directamente en URL de la imagen para omitir la galería.

Eliminar imágenes de la Biblioteca

Elimine imágenes sin salir del editor: pase el cursor sobre un archivo y haga clic en Eliminar, o seleccione varios y haga clic en Eliminar seleccionados, luego confirme en el cuadro de diálogo.

Precaución

Eliminar un archivo lo elimina por completo de la tienda de medios, junto con cualquier variante creada a partir de él, y esto no se puede deshacer. Cualquier contenido que haga referencia a la imagen eliminada dejará de cargarla.

Texto alternativo

Describa la imagen en Texto alternativo para la accesibilidad, o haga clic en Generar alt con IA para que la IA lo escriba a partir de la imagen en su idioma de edición actual. Las imágenes agregadas desde Fotos de stock o Generar con IA obtienen texto alternativo automáticamente.

Tamaño y ajuste

• Ancho: establezca el ancho de la imagen en px, o como un porcentaje del espacio disponible para que se mantenga fluida. Déjelo en el valor predeterminado para usar el ancho natural de la imagen.
• Alto (px): establezca una altura de renderizado fija. Déjelo vacío para escalar automáticamente, desde la relación de recorte si se establece una, de lo contrario, desde las proporciones naturales de la imagen.
• Recorte: elija Original para mantener las proporciones naturales de la imagen, o una relación (Cuadrado (1:1), 4:3, 3:2, 16:9) para recortar la imagen a ese cuadro.
• Ajuste: elija Cubrir para llenar el cuadro y recortar a él. Establezca el punto de recorte con Punto focal. O elija Contener para escalar toda la imagen dentro del cuadro sin recortar. Posiciónela con Establecer posición.
• Radio de esquina (px): redondee las esquinas de la imagen. Active Más opciones para establecer cada esquina por separado, o déjelo desactivado para aplicar el mismo radio a las cuatro.

Nota

Gmail y Apple Mail renderizan las esquinas redondeadas en el correo electrónico enviado, incluidos los valores por esquina. Outlook Desktop ignora el radio de esquina en las imágenes, al igual que lo hace en todas partes del correo electrónico, por lo que las imágenes permanecen con esquinas cuadradas allí.

Cambie el lienzo a Móvil (consulte Editar la vista móvil) para establecer cualquiera de estos por separado para las pantallas de los teléfonos. Marque Ancho (móvil), Alto (móvil), Recorte (móvil) o Ajuste (móvil) para anular esa configuración, comenzando desde su valor de escritorio; deje una casilla sin marcar para seguir heredando la configuración de escritorio. Recorte (móvil) solo aparece cuando Recorte está establecido en una relación en el escritorio, y cambiar Recorte de nuevo a Original en el escritorio descarta cualquier anulación de Recorte (móvil).

Enlaces y espaciado

Para abrir un enlace cuando se hace clic en la imagen, ingréselo en URL del enlace y establezca Destino del enlace para abrir en la misma pestaña o en una nueva. Consulte Agregar enlaces para los tipos de enlace disponibles.

En Espaciado, active Relleno para agregar espacio alrededor de la imagen. Use Todos los lados para un relleno uniforme, o active Más opciones para establecer cada lado por separado.

Video

Un bloque de Video agrega un video de YouTube o Vimeo al correo electrónico como una miniatura en la que se puede hacer clic. Los clientes de correo electrónico no pueden reproducir videos dentro del mensaje, por lo que el bloque muestra una imagen fija con una superposición de ▶. Cuando el destinatario la toca, el video se abre en YouTube o Vimeo. Esto funciona en todos los clientes principales, incluido Outlook.

Seleccione el bloque de Video en el lienzo para abrir su configuración en el panel derecho.

• URL del video: pegue un enlace de YouTube o Vimeo. El editor obtiene una miniatura automáticamente.
• Texto alternativo: describa el video para la accesibilidad.
• URL de la miniatura: mantenga la miniatura obtenida automáticamente, o haga clic en Agregar miniatura / Reemplazar miniatura para elegir una de la Galería de medios, o pegue un enlace alojado directamente.
• Superposición del botón de reproducción: activada por defecto. Desactívela para mostrar la miniatura simple sin la superposición de ▶. La superposición no está disponible para miniaturas en algunos hosts externos. El editor le advierte cuando eso se aplica, y el correo electrónico muestra la miniatura simple en su lugar.
• Ancho (px), Radio de esquina (px) y Alineación: controlan cómo se ve la miniatura y dónde se ubica en el diseño. Puede establecer la alineación por separado para dispositivos móviles.

Tarjeta

Un bloque de Tarjeta combina una imagen con un encabezado, texto y botón en un único diseño predefinido. Selecciónelo en el lienzo para abrir su configuración en el panel derecho.

• Diseño: elija en qué lado se ubica la imagen en relación con el contenido.
• Imagen: reemplace la imagen, establezca el texto alternativo o edite la indicación para una imagen que creó con Generar con IA.
• Tamaño y ajuste: los campos de tamaño dependen del Diseño. Recorte está disponible para todos los diseños. Ajuste se aplica a todos los diseños:
  • Superior: Alto establece la altura de la imagen en px o como un porcentaje del ancho de la tarjeta. Ancho (px) estrecha la imagen a un ancho de píxel fijo y la centra.
  • Fondo: Alto establece la altura de la tarjeta en px o como un porcentaje de su ancho. No hay campo de Ancho (px). La imagen es el fondo de la tarjeta. Ajuste también funciona aquí: Cubrir recorta la imagen a la tarjeta (establezca el punto de recorte con Punto focal) y Contener escala toda la imagen dentro de ella, ubicada con Establecer posición. Outlook Desktop aproxima Contener e ignora ambos.
  • Izquierda o Derecha: Ancho establece el ancho de la columna de la imagen en px o como un porcentaje de la tarjeta. Alto (px) fija la imagen a una altura en píxeles. Establecer una altura en píxeles borra la relación de recorte a continuación. Elegir una relación de recorte borra la altura en píxeles. No puede usar ambos a la vez.
  • Para todos los diseños:
    • Recorte: elija Original para mantener las proporciones naturales de la imagen, o una relación (Cuadrado (1:1), 4:3, 3:2, 16:9) para recortar la imagen a ese cuadro.
    • Ajuste: elija Cubrir para llenar el cuadro y recortar a él. Establezca el punto de recorte con Punto focal. O elija Contener para escalar toda la imagen dentro del cuadro sin recortar. Posiciónela con Establecer posición.
    • Radio de esquina (px): redondee las esquinas de la imagen. Active Más opciones para establecer cada esquina por separado, o déjelo desactivado para aplicar el mismo radio a las cuatro. Gmail y Apple Mail lo renderizan; Outlook Desktop lo ignora, al igual que el bloque de Imagen.
• Espaciado: establezca el relleno alrededor del contenido de la tarjeta.

Botón

Un Botón es una llamada a la acción en la que se puede hacer clic en el correo electrónico.

Haga clic en un bloque de Botón para editar su etiqueta en el lienzo. Use la barra de herramientas para cambiar el tamaño de la fuente, el color del texto, negrita, cursiva, subrayado, tachado y alineación. La etiqueta es de una sola línea: los saltos de línea pegados se colapsan en un espacio. Consulte Pegar desde otros documentos para saber qué mantiene y qué descarta un pegado.

Para establecer qué sucede cuando el destinatario hace clic en el botón:

• Haga clic en el icono de enlace en la barra de herramientas para abrir Insertar/Editar enlace.
• O use Tipo de acción y URL en la sección Enlace del panel derecho.

Consulte Agregar enlaces para los tipos de acción disponibles.

En el panel derecho, en Estilos:

• Alineación: izquierda, centro o derecha.
• Fondo: actívelo para anular el aspecto predeterminado, luego elija Sólido para un color sólido o Gradiente para un gradiente lineal de dos paradas (un color de inicio, un color de finalización y un ángulo en grados, predeterminado 90°). Con Gradiente seleccionado, el botón aún muestra un relleno sólido en los clientes de correo electrónico que no admiten fondos de gradiente, como Outlook en Windows. Los botones que ya tenían un fondo sólido lo conservan y se abren con Sólido seleccionado.
• Color de texto, Tamaño de fuente y Familia de fuentes: active cada opción para anular el aspecto predeterminado.
• Radio de esquina, Color de borde y Ancho de borde: forma y contorno del botón. Gmail y Apple Mail renderizan el radio de esquina del botón; Outlook Desktop lo ignora y muestra esquinas cuadradas, al igual que lo hace con las imágenes.
• Ancho: establezca un ancho de botón fijo o déjelo automático.
• Relleno: agregue espacio dentro del botón. Use Todos los lados para un relleno uniforme, o active Más opciones para establecer cada lado por separado.

Divisor

Un Divisor es una línea horizontal entre bloques de contenido. Úselo para separar visualmente las secciones en el correo electrónico.

Configure el estilo de línea (Sólido, Discontinuo, Punteado), color, grosor y ancho en el panel de configuración.

HTML

El bloque HTML le permite pegar HTML personalizado en su correo electrónico. Úselo para un formulario personalizado, una encuesta o un video incrustado.

Sobre el campo de código, haga clic en Merge tag para buscar las Tags de su cuenta e insertar una Merge Tag en la posición del cursor (la misma función de personalización descrita anteriormente), o haga clic en el icono de emoji para insertar un emoji de la misma manera. Haga clic en una Merge Tag insertada para abrir el mismo panel de Predeterminado / Formato que en un bloque de Encabezado o Texto.

Ejemplos

Formulario de clientes potenciales

Este formulario de clientes potenciales recopila una dirección de correo electrónico para enviar un código de promoción 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 puede agregar 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. Úselo para una barra de navegación o una lista de contactos de la empresa.

Para cada elemento del menú, establezca:

• 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 puede 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 sus perfiles. Úselo para enviar a los destinatarios a Facebook, Instagram, X y otras plataformas desde el correo electrónico.

Agregue entradas de plataforma, luego establezca la alineación, el tamaño del icono y el espacio entre iconos.

Temporizador de cuenta regresiva

El bloque Temporizador es una cuenta regresiva en el correo electrónico. Úselo para ofertas por tiempo limitado, ventas flash y recordatorios de eventos.

Para configurarlo:

1. En Cuenta regresiva, establezca la Fecha de finalización y la Hora de finalización, luego elija la Zona horaria y el Idioma para las etiquetas del temporizador.
2. Active Etiquetas para mostrar los subtítulos “días / horas / minutos / segundos” debajo de los dígitos, o desactívelo para solo números.
3. En Apariencia, establezca 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. Ajuste el Espaciado (relleno) según sea necesario.

El temporizador se renderiza como una imagen nítida en cualquier idioma o tamaño, con un fondo que se extiende por toda la fila del correo electrónico y una versión renderizada de forma nativa para el ancho móvil en lugar de una imagen de escritorio encogida.

Código de barras

El bloque Código de barras renderiza un código de barras o código QR escaneable a partir de un valor de personalización, más comúnmente un cupón.

Para configurarlo:

1. En Código, mantenga {{voucher}} cuando el correo electrónico se envíe con un grupo de cupones o haga clic en Merge tag y elija la etiqueta que almacena el código de cada destinatario. El correo electrónico resuelve la etiqueta en el momento del envío para que cada persona obtenga su propio valor escaneable.

2. Elija Simbología:
   • QR: un código 2D cuadrado que los teléfonos pueden escanear. Acepta cualquier texto, incluidos códigos alfanuméricos como WELCOME2025-A1
   • Code 128: un código de barras lineal para cualquier texto, incluidos los mismos códigos alfanuméricos
   • EAN-13: el código de barras minorista común en Europa y muchas otras regiones. Solo dígitos, 12-13 caracteres
   • EAN-8: un código de barras minorista más corto para paquetes pequeños. Solo dígitos, 7-8 caracteres
   • UPC-A: el código de barras minorista común en América del Norte. Solo dígitos, 11-12 caracteres
3. Si eligió QR, establezca la Corrección de errores. Esto agrega datos de repuesto para que el código aún se pueda escanear cuando una parte de él está cubierta, desgastada o es difícil de ver. Elija L, M, Q o H (M por defecto). Los niveles más altos sobreviven a más daños pero hacen que el patrón sea más denso, lo que puede ser más difícil de leer en tamaños pequeños. Omita este campo para otras simbologías.
4. Opcionalmente, active Imprimir el código en dígitos para mostrar el valor debajo del código.

5. En Apariencia, establezca el Color de las barras, el Fondo, el Ancho (px) y el Alto (px). Deje la Zona de silencio, módulos en Automático para el margen predeterminado.

Nota

En el lienzo, el bloque muestra un código de barras de muestra, no el código real del destinatario. {{voucher}} y otros marcadores de posición no se pueden convertir en una imagen escaneable hasta el momento del envío. Envíe un correo electrónico de prueba para ver el código real antes de que salga la campaña. Use EAN-13, EAN-8 o UPC-A solo para un valor que sea solo de dígitos, con la longitud que cada uno espera. Para códigos alfanuméricos como WELCOME2025-A1, use Code 128 o QR en su lugar. La verificación inteligente también le advierte si el valor no coincide con la Simbología que eligió.

Columnas

Las Columnas dividen el lienzo en secciones una al lado de la otra para que pueda colocar contenido uno junto al otro en una fila.

Arrastre 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 agregue contenido a cada columna. Para cambiar el espaciado de todas las columnas en el correo electrónico, abra Configuración → Valores predeterminados de las columnas y ajuste el relleno exterior, el relleno de la columna y el espacio entre columnas.

Para la propia imagen de la columna (la que agrega con Agregar imagen en la configuración de la columna), la configuración muestra una sección de Tamaño y ajuste. Este es el mismo control que el diseño Izquierda / Derecha del bloque de Tarjeta. Un bloque de Imagen arrastrado a una columna es un elemento de contenido separado y mantiene sus propios campos de tamaño simples; consulte Imagen.

También puede pegar un enlace alojado directamente en URL de la imagen para omitir la galería.

• Ancho: establezca el ancho de la imagen en px o como un porcentaje de la columna. Déjelo sin establecer para llenar la columna.
• Alto (px): fije la imagen a una altura en píxeles. Establecer una altura en píxeles borra la relación de recorte a continuación. Elegir una relación de recorte borra la altura en píxeles. No puede usar ambos a la vez.
• Recorte: elija Original para mantener las proporciones naturales de la imagen, o una relación (Cuadrado (1:1), 4:3, 3:2, 16:9) para recortar la imagen a ese cuadro.
• Ajuste: elija Cubrir para llenar el cuadro y recortar a él. Establezca el punto de recorte con Punto focal. O elija Contener para escalar toda la imagen dentro del cuadro sin recortar. Posiciónela con Establecer posición.
• Radio de esquina (px): redondee las esquinas de la imagen. Active Más opciones para establecer cada esquina por separado, o déjelo desactivado para aplicar el mismo radio a las cuatro. Gmail y Apple Mail lo renderizan; Outlook Desktop lo ignora, al igual que el bloque de Imagen.

Nota

Una imagen de columna con solo Alto (px) establecido se estira al ancho de la columna y se recorta a esa altura.

Productos

Un bloque de Productos muestra una cuadrícula de tarjetas de productos de una plantilla compartida. Cada tarjeta puede incluir una imagen, título, descripción, precio y un botón de compra. La plantilla se repite para cada producto.

Haga clic en una tarjeta en el lienzo para activarla y editarla:

• Cambie el título, la descripción, el precio, la imagen o el enlace por producto para actualizar solo esa tarjeta.
• Cambie el diseño de la plantilla, los colores, el relleno o los elementos que contiene para actualizar todas las tarjetas.

En el panel de configuración, en Fuente, elija de dónde provienen los productos:

• Manual: ingrese productos a mano, selecciónelos de su catálogo de productos por ID o mezcle ambos.
• Regla de catálogo: extraiga productos automáticamente por categoría y orden de clasificación, resueltos de nuevo desde el catálogo en el momento del envío.
• Carrito: muestre los artículos del carrito abandonado actual de cada destinatario.
• Recomendaciones: extraiga productos clasificados por una estrategia integrada (más vendidos, novedades, de vuelta en stock o bajada de precio) resueltos desde su catálogo en el momento del envío.

Nota

Estas fuentes necesitan Content Templates en su plan. Si el selector de Fuente no cambia a Regla de catálogo, Carrito o Recomendaciones, comuníquese con el Soporte o su gerente de cuenta.

También necesita un token de acceso a la API (Configuración → Acceso a la API) para guardar el correo electrónico. La vista previa, la ejecución de la verificación inteligente y todo lo demás en el editor funcionan sin uno. Solo falla Guardar, con un aviso que le indica que el bloque no tiene un token de acceso a la API.

Agregar productos manualmente

Llene la cuadrícula usted mismo, ya sea ingresando productos a mano o seleccionando artículos específicos de su catálogo de productos por ID. Puede mezclar ambos en el mismo bloque.

• Número de productos: establezca cuántas tarjetas mostrar (1–24).
• Agregar producto: agregue una tarjeta y complete su título, descripción, precio, imagen y enlace usted mismo.
• Seleccionar del catálogo…: seleccione productos específicos de su catálogo de productos en lugar de escribirlos.
• Actualizar desde el catálogo: extraiga el último título, descripción, precio e imagen de los productos que seleccionó del catálogo, en caso de que hayan cambiado desde que los agregó. No afecta a los productos ingresados a mano.
• Imágenes de productos: haga clic en una miniatura para reemplazar la imagen de ese producto.
• Enlaces de productos: ingrese o edite la URL de cada producto.

Extraer productos con una regla de catálogo

Extraiga productos automáticamente por categoría y orden de clasificación, sin selección manual.

• Categoría: limite a una categoría de catálogo específica, o Todas las categorías.
• Ordenar: elija el orden en que se extraen los productos: Más nuevos primero, Precio: de menor a mayor, Precio: de mayor a menor o Título A-Z.
• Número de productos: establezca un límite de cuántas tarjetas mostrar (1–12).
• Actualizar vista previa: recalcule la vista previa del lienzo con el catálogo en este momento.

Vista previa vs. momento del envío

La vista previa del lienzo muestra los productos que coinciden con la regla en este momento. Si el catálogo cambia antes de que envíe el correo electrónico, por ejemplo, un producto se agota o se agrega uno nuevo, los destinatarios ven la coincidencia actualizada en el momento del envío, no la vista previa.

Mostrar artículos del carrito

Renderice los artículos actuales del carrito abandonado de un destinatario.

• Máximo de productos mostrados: establezca un límite de cuántas tarjetas mostrar (1–12).
• Previsualizar el carrito de un usuario: ingrese un ID de usuario o correo electrónico y haga clic en Previsualizar carrito para ver cómo se renderiza el bloque para ese destinatario específico.

Nota

Cada destinatario obtiene su propio carrito abandonado actual en el momento del envío. Los destinatarios sin uno simplemente omiten el bloque, así que dirija su audiencia usando la etiqueta PW_AbandonedCartID. El lienzo en sí muestra tarjetas de muestra, no datos reales del carrito. Consulte Cómo configurar una campaña de carrito abandonado para la configuración completa.

Obtener productos recomendados

Extraiga productos clasificados por una estrategia integrada en lugar de seleccionarlos usted mismo o escribir una regla de catálogo.

• Estrategia: elija cómo se clasifican los productos: Más vendidos (7 días), Más vendidos (30 días), Novedades, De vuelta en stock, Bajada de precio, Comprados juntos o Basado en lo que vieron. Seleccionar Recomendaciones reemplaza el control Ordenar de Regla de catálogo con este selector de Estrategia. Más vendidos, Comprados juntos y Basado en lo que vieron necesitan eventos de su backend. Consulte Cómo configurar recomendaciones de productos en el correo electrónico.

• Categoría: limite a una categoría de catálogo específica, o Todas las categorías.
• Número de productos: establezca un límite de cuántas tarjetas mostrar (1–12).
• Actualizar vista previa: recalcule la vista previa del lienzo con el catálogo en este momento.

Comprados juntos necesita una etiqueta de Producto

Seleccionar Comprados juntos agrega un campo de Etiqueta de producto: ingrese el nombre de la etiqueta del dispositivo que contiene el producto ancla, y el bloque muestra productos comprados frecuentemente junto con él. Sin una etiqueta establecida, el bloque recurre al catálogo regular.

El nombre de la etiqueta solo acepta letras, dígitos, guiones bajos y espacios; cualquier otra cosa se rechaza con un error en línea, ya que la etiqueta debe ser direccionable en Liquid.

Nota

Más vendidos clasifica los productos por historial de pedidos específicamente. Comprados juntos se basa en el mismo flujo de interacción amplio que Basado en lo que vieron: vistas, carrito y compras por igual, no exclusivamente compras. Las cuentas nuevas, o las cuentas que aún no han recopilado suficiente historial para una estrategia determinada, obtienen el catálogo regular en su lugar hasta que se acumule lo suficiente.

La configuración del bloque de Productos aún no está traducida

La configuración del bloque de Productos, incluido el nombre de la fuente Recomendaciones y sus etiquetas de estrategia, se muestran en inglés independientemente del idioma de su cuenta.

Estilizar la cuadrícula

Una vez que haya elegido una fuente, estas configuraciones controlan cómo se ven la cuadrícula y sus tarjetas. Permanecen iguales sin importar qué fuente use:

• Columnas: elija 1, 2 o 3 tarjetas por fila. En dispositivos móviles, las tarjetas siempre se apilan en una columna.
• Espacio: actívelo para establecer el espacio entre las tarjetas. Desactivado usa el predeterminado (16px).
• Límite de descripción: el límite de caracteres al que se recorta el texto de la descripción, para que las tarjetas mantengan un tamaño consistente.
• Plantilla de tarjeta: elija un diseño, luego establezca el Fondo de la tarjeta, el Radio de esquina de la tarjeta y el Relleno de contenido para cada tarjeta.
• Tamaño y ajuste: se muestra para cada diseño que tiene una imagen. Los mismos controles de Ancho, Alto, Recorte y Ajuste que el tamaño de imagen por diseño del bloque de Tarjeta, dimensionados en relación con el ancho de la tarjeta en lugar de todo el correo electrónico.

La configuración de Estilo de bloque a continuación estiliza el bloque en su conjunto, por separado de las tarjetas que contiene:

• Fondo e Imagen de fondo: establezca un color de fondo o una imagen detrás de toda la cuadrícula. Con una imagen establecida, Ajuste elige cómo se ubica en el bloque: Cubrir la recorta al bloque, Contener ajusta toda la imagen dentro de él, y Punto focal / Establecer posición la coloca. Outlook Desktop muestra solo el color de fondo e ignora la imagen, así que mantenga un color legible detrás de ella.
• Color de borde, Ancho de borde y Radio de esquina: agregue un contorno y esquinas redondeadas alrededor de toda la cuadrícula. Active Más opciones en Radio de esquina para establecer cada esquina por separado, o déjelo desactivado para aplicar el mismo radio a las cuatro. Gmail y Apple Mail lo renderizan; Outlook Desktop lo ignora y muestra esquinas cuadradas, al igual que lo hace con las imágenes.
• Ocultar en móvil y Ocultar en escritorio: oculte todo el bloque en un dispositivo. Consulte Mostrar u ocultar contenido por dispositivo.

Cómo aparece el precio de oferta

Si un producto tiene un precio de oferta en su catálogo, la tarjeta muestra el precio con descuento con el original tachado. Esto se aplica a Regla de catálogo, Carrito y artículos de catálogo en Manual. Los productos ingresados a mano no tienen precio de oferta.

Noticias

Un bloque de Noticias muestra una cuadrícula de tarjetas de artículos. Cada tarjeta puede incluir una imagen, fecha, titular, resumen y un enlace “Leer más”. La plantilla se repite para cada artículo, de la misma manera que lo hace para el bloque de Productos. Un nuevo bloque de Noticias comienza con 2 tarjetas de muestra.

En el panel de configuración, en Fuente, elija de dónde provienen los artículos:

• Seleccionados: cargue artículos de una fuente RSS o Atom una vez, o seleccione artículos específicos a mano. Se copian en el correo electrónico y no vuelven a cambiar.
• Fuente en vivo: extraiga artículos de una fuente registrada para su aplicación, resueltos de nuevo en el momento del envío para que cada destinatario obtenga los más nuevos.

Nota

Fuente en vivo necesita Content Templates en su plan. Si Fuente no cambia a Fuente en vivo, Pushwoosh muestra una pista de que el contenido dinámico no está habilitado para la cuenta. Comuníquese con el Soporte o su gerente de cuenta.

Seleccionar artículos de una fuente

Haga clic en una tarjeta en el lienzo para activarla y editarla:

• Cambie la fecha, el titular, el resumen, la imagen o el enlace por artículo para actualizar solo esa tarjeta.
• Cambie el diseño de la plantilla, los colores, el relleno o los elementos que contiene para actualizar todas las tarjetas.

Los artículos se copian en el contenido del correo electrónico una vez que los carga; no se vuelve a obtener nada en el momento del envío. Las imágenes de los artículos se copian en su tienda de medios y se convierten de WebP a JPEG si es necesario, ya que Outlook no puede renderizar WebP.

Pegue una URL de fuente RSS 2.0 o Atom, luego:

• Cargar últimos artículos: reemplace las tarjetas actuales con los artículos más recientes de la fuente, el mismo número de tarjetas que ya tiene (2 por defecto).
• Seleccionar artículos…: abra un cajón que enumera hasta 12 de los últimos artículos de la fuente, con miniatura, titular, fecha, categoría y autor, y elija cuáles agregar. Los artículos seleccionados se agregan a las tarjetas existentes, hasta un total de 12; los artículos que ya están en el lienzo no se pueden seleccionar dos veces.

Nota

Si la URL de la fuente está vacía, no es válida o la fuente no tiene artículos, Pushwoosh muestra un error y deja las tarjetas actuales sin cambios.

El cajón le permite seleccionar artículos específicos a mano en lugar de tomar siempre los más nuevos.

• Imágenes de artículos: haga clic en una miniatura para reemplazar la imagen de ese artículo.
• Enlaces de artículos: se muestra cuando la plantilla de la tarjeta tiene un enlace vinculado al artículo (el botón predeterminado “Leer más”). Enumera cada artículo por titular para que pueda editar o anular su URL de destino, inicialmente extraída de la fuente.

Extraer artículos de una fuente en vivo

Los artículos se obtienen cuando se envía el correo electrónico, para que cada destinatario obtenga los más frescos. En lugar de seleccionar los artículos usted mismo, elija una fuente y un límite:

• Fuente registrada: elija una fuente ya registrada para su aplicación, o Todas las fuentes de la aplicación para extraer de todas ellas. Este panel solo selecciona una fuente, no la registra; si aún no existe ninguna, agregue una en la página de Fuentes de noticias usando Agregar fuente.
• Filtro de categoría: un filtro de texto libre opcional que se compara con la categoría del artículo de la fuente (predeterminado: cualquier categoría).
• Artículos: cuántas tarjetas mostrar (1–12, 3 por defecto).
• Actualizar vista previa: recalcule la vista previa del lienzo con la fuente en este momento. Si la fuente no devuelve artículos, Pushwoosh deja las tarjetas actuales sin cambios; si no se puede acceder a la fuente, Pushwoosh muestra un error en su lugar.

Vista previa vs. momento del envío

La vista previa del lienzo muestra los artículos que coinciden en este momento. Los destinatarios obtienen la coincidencia resuelta de nuevo en el momento del envío, deduplicada por el GUID de la fuente de cada artículo y limitada a los artículos publicados en los últimos 30 días.

Nota

Una fuente faltante, vacía o inalcanzable, incluida una fuente registrada que fue eliminada, no falla el envío: Pushwoosh oculta la cuadrícula de tarjetas para ese destinatario, mientras que el fondo y el borde del bloque aún se renderizan. Solo una referencia de fuente mal configurada, por ejemplo, una aplicación o fuente de origen corrupta, recurre en su lugar a las tarjetas que ya están en el lienzo.

Estilizar la cuadrícula

Una vez que haya elegido una fuente, estas configuraciones controlan cómo se ven la cuadrícula y sus tarjetas. Permanecen iguales sin importar qué fuente use:

• Columnas: elija 1, 2 o 3 tarjetas por fila. En dispositivos móviles, las tarjetas siempre se apilan en una columna.
• Espacio: actívelo para establecer el espacio entre las tarjetas. Desactivado usa el predeterminado (16px).
• Límite de resumen: el límite de caracteres al que se recorta el resumen del artículo, para que las tarjetas mantengan un tamaño consistente.
• Plantilla de tarjeta: elija un diseño, luego establezca el Fondo de la tarjeta, el Radio de esquina de la tarjeta y el Relleno de contenido para cada tarjeta. Para el diseño Izquierda o Derecha, active Ajustar texto alrededor de la imagen para que el titular y el resumen fluyan alrededor de la imagen en lugar de mantenerlos en una columna fija. Tamaño y ajuste (Ancho, Alto, Recorte, Ajuste) funciona de la misma manera que el tamaño de imagen por diseño del bloque de Tarjeta, dimensionado en relación con el ancho de la tarjeta.

La configuración de Estilo de bloque a continuación estiliza el bloque en su conjunto, por separado de las tarjetas que contiene:

• Fondo e Imagen de fondo: establezca un color de fondo o una imagen detrás de toda la cuadrícula. Con una imagen establecida, Ajuste elige cómo se ubica en el bloque: Cubrir la recorta al bloque, Contener ajusta toda la imagen dentro de él, y Punto focal / Establecer posición la coloca. Outlook Desktop muestra solo el color de fondo e ignora la imagen, así que mantenga un color legible detrás de ella.
• Color de borde, Ancho de borde y Radio de esquina: agregue un contorno y esquinas redondeadas alrededor de toda la cuadrícula. Active Más opciones en Radio de esquina para establecer cada esquina por separado, o déjelo desactivado para aplicar el mismo radio a las cuatro. Gmail y Apple Mail lo renderizan; Outlook Desktop lo ignora y muestra esquinas cuadradas, al igual que lo hace con las imágenes.
• Ocultar en móvil y Ocultar en escritorio: oculte todo el bloque en un dispositivo. Consulte Mostrar u ocultar contenido por dispositivo.

Nota

Como cualquier otro bloque, un bloque de Noticias admite condiciones de visualización para mostrarlo solo a un subconjunto de destinatarios.

Espacio publicitario

Un bloque de Espacio publicitario muestra una campaña patrocinada a los destinatarios del correo electrónico. Es una ubicación de pago que su gerente de cuenta vende, no un bloque que usted llena con su propio creativo.

Nota

Espacio publicitario debe estar habilitado para su cuenta. Si no está en su pestaña de Bloques, comuníquese con el Soporte o su gerente de cuenta. Una vez que esté activado, cree y administre las campañas que puede mostrar desde la pantalla de Inventario de anuncios.

Seleccione el bloque en el lienzo para abrir su configuración en el panel derecho.

• ID de campaña: el ID numérico de la campaña publicitaria que se mostrará. Déjelo en 0 para que coincida con cualquier campaña Activa en su lugar. La lista de inventario de anuncios no muestra un ID para una campaña; copie el número de la barra de direcciones del navegador en la propia página de la campaña después de guardarla.
• Categoría: limite la coincidencia a las campañas etiquetadas con esta categoría. Establézcalo junto con el ID de campaña para requerir ambos: el anuncio solo se muestra si esa campaña exacta también lleva esta categoría. Deje el ID de campaña en 0 para que coincida con cualquier campaña Activa en la categoría en su lugar.
• Etiqueta sobre el creativo: una línea corta que se muestra sobre el anuncio, por ejemplo, “Patrocinado”. Déjelo vacío para no mostrar ninguna etiqueta.
• Cuando no se vende nada: elija qué muestra el bloque si ninguna campaña coincide. Ocultar el espacio (el predeterminado) no deja nada en su lugar. Mostrar mi propio texto agrega una segunda sección dentro del mismo bloque, marcada como “Se muestra cuando no hay ninguna campaña en ejecución”, donde escribe su propio texto de reemplazo y agrega una imagen. Esa sección se envía en el correo electrónico en lugar de un anuncio cada vez que ninguna campaña coincide. Dejarlo vacío se guarda como Ocultar el espacio; un reemplazo vacío nunca se envía como un bloque en blanco.

El lienzo muestra el ID, la categoría o la etiqueta que estableció como marcador de posición, no el creativo publicitario real. Pushwoosh elige la campaña coincidente una vez, cuando el correo electrónico comienza a enviarse, por lo que cada destinatario de ese envío ve el mismo anuncio; no hay segmentación por destinatario para qué campaña se muestra, y no hay limitación de frecuencia en esta versión.

Nota

Como cualquier otro bloque, un bloque de Espacio publicitario admite condiciones de visualización para mostrarlo solo a un subconjunto de destinatarios. Eso es independiente de la coincidencia de campañas anterior. Una condición de visualización controla quién ve el bloque en absoluto, no qué campaña muestra.

Nota

Si Espacio publicitario se renderiza depende de la cuenta propietaria del correo electrónico, no de la plantilla. Duplicar una plantilla no cambia esto: una copia hecha de una cuenta donde Espacio publicitario no está habilitado tampoco mostrará el anuncio. Si Espacio publicitario se habilita o deshabilita para su cuenta después de haber creado el correo electrónico, guardarlo nuevamente aplica el cambio. Desactívelo y guarde, y el anuncio dejará de mostrarse. Vuelva a activarlo y guarde, y se reanudará.

Guardar y reutilizar bloques

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

1. Haga clic en un bloque (su marco o fondo, no el texto o el botón dentro de él) para seleccionarlo. Tarjeta, Columnas y Social son ejemplos de bloques que funcionan de esta manera.

Consejo

Para guardar varios bloques juntos, haga clic con la tecla Mayús en más bloques hermanos, en el lienzo o en el Panel de capas, para extender la selección a un rango contiguo. No se ofrece la opción de guardar para un rango que incluya un bloque ya sincronizado o un marcador de posición de IA vacío.

2. Haga clic en el icono de marcador en la barra de herramientas del bloque y asígnele un nombre.

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

• Arrastre un bloque guardado al lienzo, o haga clic en él para agregarlo al final del correo electrónico.
• Haga clic en la × en el mosaico de un bloque guardado para eliminarlo.

Mantener las copias sincronizadas

Cuando guarde un bloque, active Mantener las copias sincronizadas para vincular cada copia insertada a la misma fuente. Edite la fuente una vez y el cambio se aplicará en todas partes donde se use ese bloque, incluidos los correos electrónicos ya programados para enviar.

Guardar un rango de bloques funciona de la misma manera. Edite cualquier bloque dentro de él, luego aplique el cambio para actualizar cada copia donde sea que se use.

Una copia sincronizada está bloqueada en el lienzo. No puede editarla directamente. Seleccione la copia para abrir su configuración:

• Editar bloque sincronizado: desbloquee esta copia para poder cambiarla. Aparece un banner en la parte superior. Haga clic en Aplicar a todos para guardar sus cambios en la fuente y en todas las demás copias, o en Cancelar para descartarlos. Solo puede desbloquear un bloque sincronizado a la vez.
• Actualizar desde la fuente: reemplace esta copia con la última versión de la fuente.
• Desvincular de la fuente: desvincule esta copia de la fuente para poder editarla por su cuenta.

Mientras un bloque sincronizado está desbloqueado para su edición, el resto del correo electrónico está bloqueado: no puede seleccionar, editar ni eliminar nada más, y Guardar está deshabilitado hasta que termine. Haga clic en Aplicar a todos para guardar sus cambios en todas partes, o en Cancelar para descartarlos y desbloquear el resto del correo electrónico nuevamente.

Nota

Cada vez que abre un correo electrónico, Pushwoosh verifica sus copias sincronizadas y actualiza las que están desactualizadas. Un aviso muestra cuántas se actualizaron. Si la fuente tiene contenido más nuevo, la configuración de la copia muestra una advertencia hasta que vuelva a abrir el correo electrónico o haga clic en Actualizar desde la fuente. Si la fuente fue eliminada, la copia conserva su último contenido y solo puede Desvincular de la fuente.

Agregar enlaces

Use el cuadro de diálogo Insertar/Editar enlace para establecer qué sucede cuando un destinatario hace clic en un botón o en texto seleccionado. Elija un Tipo de acción, luego complete los campos para esa acción.

Abrir sitio web

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

Enlace para administrar preferencias

Agrega 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 puede agregar 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 se da de baja solo de la categoría asignada a ese correo electrónico (p. ej., Newsletter). El nombre de la categoría se elimina de su etiqueta Categorías de correo electrónico suscritas.

Aparece una pantalla de confirmación con las opciones Volver a suscribirse y Administrar preferencias. Más información.

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

El destinatario se da de baja de todos los correos electrónicos de marketing y la etiqueta Correos electrónicos no suscritos 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.

Importante

Para permitirle entregar correos electrónicos importantes a sus clientes, no eliminamos a los usuarios no suscritos de su base de usuarios.

Para continuar enviando mensajes a los destinatarios comprometidos, cree un segmento filtrado por Correos electrónicos no suscritos = false. Para evitar quejas, no envíe correos electrónicos a los destinatarios que se han dado de baja.

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.

No rastrear estadísticas

Abre un enlace cuando el destinatario hace clic, sin contar el clic para las estadísticas de clics de su correo electrónico. Ingrese la dirección en URL.

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). Más información sobre la doble suscripción.