Saltar al contenido principal

​
Descripción general

El Editor de Correo Electrónico de Arrastrar y Soltar de OneSignal le permite diseñar correos electrónicos visualmente exactamente como aparecerán en las bandejas de entrada de sus usuarios. Consiste en tres componentes principales:
  • Configuración – configuraciones globales que se aplican a todo su mensaje
  • Filas – contenedores estructurales para distribuir contenido horizontalmente
  • Contenido – bloques individuales como imágenes, texto y botones
Esta guía lo guiará a través de cada componente y cómo usarlos para crear su correo electrónico. Para detalles sobre características adicionales:

​
Importar sus propias plantillas

¿Ya tiene plantillas de correo electrónico? Puede agregarlas a su aplicación de OneSignal con las siguientes opciones:
  1. Reenvío de plantillas de correo electrónico
  2. API de crear plantilla
  3. Copiar y pegar su HTML en el Editor HTML

​
Configuración

La configuración controla el estilo y diseño fundamental de su mensaje. Estas configuraciones se aplican en cascada a las filas y bloques de contenido a menos que se reemplacen explícitamente.

La imagen muestra la configuración para el editor

Configuración de diseñoDescripción
Ancho del área de contenidoAncho del correo electrónico en píxeles. El predeterminado es 600px.
Alineación del área de contenidoAlinear contenido a la izquierda o al centro.
Color de fondoColor de fondo detrás del área de contenido.
Color de fondo del área de contenidoColor de fondo dentro del área de contenido.
Fuente predeterminadaFuente aplicada en todo el correo electrónico a menos que se personalice a nivel de fila o contenido. Las fuentes personalizadas requieren HTML.
Color de enlaceColor para todo el texto de hipervínculo.
IdiomaEstablece el atributo lang en HTML para accesibilidad. El predeterminado es inglés.

​
Filas

Las filas son los bloques de construcción horizontales del diseño de su correo electrónico. Cada fila puede contener múltiples columnas y bloques de contenido. Simplemente arrastre y suelte filas en el editor de correo electrónico para agregarlas.

La imagen muestra la capacidad de usar múltiples filas

Cada fila y sus columnas pueden reemplazar la configuración global, dándole control granular sobre el diseño y la responsividad.

​
Eliminar y duplicar filas

Seleccione la fila y use los íconos de eliminar y duplicar.

La imagen muestra la capacidad de eliminar y duplicar filas

​
Filas guardadas

Haga clic en el ícono de guardar en cualquier fila para reutilizarla en todas las plantillas. Las actualizaciones a una fila guardada opcionalmente pueden aplicarse a todas las plantillas que la usan.

Cómo guardar una fila

Para acceder a las filas guardadas, vaya a la pestaña Rows y abra el menú desplegable de filas guardadas:

Seleccionar fila guardada

Categorías del menú desplegable:
  • Empty – plantillas de fila en blanco
  • My Saved Rows – filas que ha guardado
  • Sample Rows – plantillas preconstruidas por OneSignal

​
Propiedades de fila

Haga clic en una fila para editar propiedades. Asegúrese de ver la palabra “Row” cuando pase el cursor sobre la fila. De lo contrario, seleccionará el bloque de Contenido.
Propiedades de filaDescripción
FondosColor o imagen de fondo detrás del área de contenido. Recomendado: Establezca el color de fondo en Configuración para consistencia. Si no hay contenido en el que se pueda hacer clic, considere usar un Bloque de Imagen en lugar de una imagen de fondo de fila.
BordesColor, ancho y estilo del borde.
DiseñoPersonalizar u ocultar la fila en móvil vs escritorio.
ColumnasAgregar, eliminar, ajustar columnas dentro de la fila y agregar más bloques de Contenido. Ajustar el relleno específico de la columna.

​
Contenido

Los bloques de contenido representan el núcleo de su mensaje: imágenes, texto, botones y más. Arrastre un bloque de contenido a una columna de fila y se ajustará al ancho. Cada bloque tiene su propia configuración como relleno, tamaño de fuente y alineación.

Seleccionar los bloques de Contenido de arrastrar y soltar para diseñar su correo electrónico

​
Fuentes personalizadas

Si requiere una fuente que no se encuentra en la Configuración, puede agregar fuentes personalizadas usando el bloque HTML. Por ejemplo: 
<!-- Pegue esto en un bloque HTML en la parte superior de su correo electrónico -->
<style type="text/css">
  /* Declarar Bebas Neue (solo se carga en clientes que admiten fuentes web) */
  @font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9Wlhzg.ttf') format('truetype');
  }
</style>

<h1 style="font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
           font-size:36px; line-height:1.2; margin:0; text-transform:uppercase;">
  ¡Bienvenido!
</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;">
  Gracias por suscribirse.
</p>
Cómo usar en el editor de Arrastrar y Soltar:
  1. Agregue un bloque HTML en la parte superior de su correo electrónico y pegue el fragmento.
  2. Si desea más títulos con Bebas Neue, puede:
    • Usar bloques HTML adicionales y copiar el mismo estilo h1, o
    • Usar un bloque de Texto y establecer su CSS en línea en font-family:'Bebas Neue', Arial, Helvetica, sans-serif;.
Muchos clientes de correo electrónico (por ejemplo, Gmail, Outlook para Windows) no cargan fuentes web. Automáticamente recurrirán a Arial/Helvetica de la pila anterior.Para “forzar” una fuente específica, considere usar imágenes con la fuente deseada en su lugar y agregue la imagen al correo electrónico. Esto permite más control en algunos casos.

​
Imágenes y video

Las imágenes cargadas son accesibles en todo su equipo. Cambie y aplique efectos a las imágenes como recorte, filtrado y más directamente en el editor. Se pueden usar URLs a imágenes y videos. Asegúrese de que estén disponibles a través de la URL proporcionada.

​
Enlaces

El seguimiento de enlaces está habilitado de forma predeterminada. El seguimiento de múltiples enlaces está disponible. Consulte Enlaces y Deep Linking para más detalles.

​
Enlaces de cancelación de suscripción

Todos los correos electrónicos de marketing deben contener un enlace de cancelación de suscripción. Sin un enlace de cancelación de suscripción, sus correos electrónicos tendrán una mayor probabilidad de ser marcados como spam. Consulte Enlaces de cancelación de suscripción para más detalles. OneSignal proporciona un enlace de cancelación de suscripción predeterminado que, cuando se usa, cancelará la suscripción de la Suscripción de correo electrónico del usuario. También puede incluir su propia URL de cancelación de suscripción personalizada si lo desea. Solo asegúrese de administrar correctamente la Suscripción de correo electrónico (detalles en Crear una página de cancelación de suscripción personalizada). Agregue el [unsubscribe_url] predeterminado de OneSignal en sus correos electrónicos mediante:
  • Bloque HTML: <a href="[unsubscribe_url]">Cancelar suscripción</a>
  • Seleccione su texto y use la opción Special links en el editor o establezca [unsubscribe_url] en el campo URL

Agregar el enlace de cancelación de suscripción a su correo electrónico

​
Bloques HTML

Agregue HTML personalizado con Bloques HTML. JavaScript no es compatible. Se recomienda CSS en línea. Algunos clientes de correo electrónico eliminan atributos de clase o ID.
Los bloques HTML personalizados son el mejor lugar para agregar estilos avanzados como reemplazos de modo oscuro. Consulte Mejores prácticas de estilo de modo oscuro para orientación.
<div style="background: red;">¡Esto ahora tiene estilo personalizado!</div>

​
Personalización

Use plantillas liquid para personalizar mensajes. Ejemplo: {{ first_name | default: "there" }}

La imagen muestra el uso de sustitución de etiquetas

Más detalles:

​
Emojis

Los emojis pueden renderizarse de manera diferente en diferentes plataformas de correo electrónico.

La imagen muestra cómo se renderizan los emojis en diferentes clientes de correo electrónico

​
Guardar su trabajo

Puede guardar su diseño de correo electrónico como una plantilla para uso futuro.

La imagen muestra cómo guardar como plantilla

​
Preguntas frecuentes

​
¿Cómo tengo en cuenta el modo oscuro?

La mayoría de los correos electrónicos se mostrarán correctamente en modos oscuro y claro, ¡pero recomendamos probar! Para orientación adicional, consulte Mejores prácticas de estilo de modo oscuro.

​
¿Cómo agrego un enlace de cancelación de suscripción personalizado?

Consulte Crear una página de cancelación de suscripción personalizada para detalles.

​
Artículos relacionados