Configuración del editor de correo electrónico de arrastrar y soltar de Stripo

Published: 22 de octubre de 2024 · Last updated: 21 de julio de 2026 · By Marcus Biel

En el lado derecho del editor de correo electrónico de Maildroppa encontrarás la Columna de configuración del correo electrónico, que ofrece herramientas para ayudarte a estructurar y personalizar el contenido y la apariencia de tu correo electrónico. Esta columna está dividida en dos pestañas: Contenido y Apariencia.

Pestaña Contenido

La pestaña Contenido es donde diseñas y organizas el contenido de tu correo electrónico. Contiene dos secciones principales: Estructuras y Bloques.

1. Estructuras

Las estructuras definen el diseño de tu correo electrónico al organizar el contenido en filas y columnas. Puedes elegir entre varios diseños prediseñados, como:

• Una columna
• Dos columnas
• Varias columnas

No estás limitado a estas opciones: puedes combinar varios bloques para crear cualquier diseño personalizado que quieras, con total flexibilidad para adaptarlo a tus necesidades de diseño.

• Arrastrar y soltar: simplemente arrastra una estructura desde esta sección y suéltala en el área de diseño del correo electrónico para empezar a añadir contenido.
• Personalización: una vez añadida una estructura, puedes rellenarla con distintos bloques de contenido, como imágenes, texto o botones.

2. Bloques

Los bloques son los elementos de contenido que colocas dentro de las estructuras para crear tu correo electrónico.

Los tipos de bloques disponibles son:

• Imagen: sube imágenes (PNG, JPG, GIF) y personaliza su apariencia.
• Texto: añade y da formato al texto para comunicar tu mensaje.
• Botón: añade botones en los que se puede hacer clic, con texto, enlaces y estilos personalizables.
• Espaciador: inserta un espacio en blanco para ajustar el diseño entre otros bloques.
• Vídeo: inserta contenido de vídeo de plataformas como YouTube, Vimeo y otras.
• HTML: añade código HTML y CSS personalizado para personalizar contenido avanzado del correo electrónico.

Cada bloque está diseñado para ser flexible y personalizable, lo que te permite crear un correo electrónico que refleje la imagen y el estilo de tu marca.

Explicación detallada de los bloques de contenido

Bloque de imagen

El bloque de imagen del editor de correo electrónico de arrastrar y soltar de Stripo te permite añadir y personalizar imágenes en tu campaña de correo electrónico.

Añadir un bloque de imagen

Puedes añadir un bloque de imagen a tu correo electrónico de dos formas:

Opción 1

Pasa el cursor sobre el área "Suelta el contenido aquí" de una estructura y haz clic en el icono de imagen. Esto convertirá inmediatamente la estructura seleccionada en un bloque de imagen.

Opción 2

Ve a la sección Bloques, dentro de la Pestaña Contenido. Arrastra el bloque de imagen hasta la estructura que quieras en el diseño de tu correo electrónico. Este método te proporciona un mayor control sobre el lugar exacto donde colocar la imagen.

Subir una imagen

Una vez añadido el bloque de imagen, tienes dos métodos para subir una imagen:

Arrastrar y soltar

Puedes arrastrar y soltar directamente un archivo de imagen (PNG, JPG, GIF) desde tu ordenador en el cuadro de carga que aparece dentro del bloque de imagen.

Subir desde el ordenador

También puedes hacer clic en el icono de nube del bloque de imagen para abrir el explorador de archivos y seleccionar una imagen de tu ordenador (de hasta 2 MB). Una vez seleccionada, la imagen aparecerá tanto en el bloque como en la pestaña de contenido de la derecha.

Cambiar la imagen

Para sustituir la imagen, utiliza la opción Cambiar imagen disponible en la pestaña de contenido. Haz clic en el icono circular Cambiar imagen, que te permitirá subir una imagen nueva o enlazar una imagen desde una URL externa.

Editar la imagen

Después de subir una imagen, es posible que quieras realizar más ediciones directamente en la plataforma. El Editor de imágenes integrado de Stripo te permite mejorar y ajustar tus imágenes sin salir del editor de correo electrónico.

Acceder al editor de imágenes

1. Una vez subida la imagen, haz clic en el botón Editar imagen. Esto abrirá la interfaz del Editor de imágenes.
2. El editor ofrece una amplia variedad de herramientas, que se muestran en la barra de menú superior.

Herramientas de edición de imágenes disponibles

• Filtros Aplica varios filtros con un solo clic, como:

  • Escala de grises
  • Blanco y negro
  • Enfocar
  • Invertir
  • Sepia
  • Brillo
  • Color

• Cambiar tamaño Ajusta las dimensiones de la imagen. Puedes:

  • Definir un ancho y una altura específicos.
  • Mantener la proporción.

• Recortar Selecciona la parte de la imagen que quieres conservar y elimina las partes no deseadas.

• Transformar Gira o voltea la imagen:

  • Horizontalmente
  • Verticalmente

• Dibujar Utiliza la herramienta de dibujo para añadir elementos a mano alzada, como líneas o formas personalizadas, sobre la imagen.

• Texto Añade texto directamente a la imagen. Personaliza:

  • Fuente
  • Tamaño
  • Color
  • Alineación

• Formas y stickers Mejora la imagen superponiendo:

  • Formas prediseñadas
  • Stickers divertidos

• Marcos Elige entre una selección de marcos para dar a tu imagen un borde elegante.

• Esquinas Ajusta el estilo de las esquinas para lograr un acabado cuidado.

• Fondo Elimina o sustituye el fondo de una imagen para obtener una apariencia más limpia.

Guardar los cambios

Cuando hayas realizado los cambios que quieras, haz clic en el botón Guardar, situado en la parte superior izquierda del editor. La imagen editada sustituirá automáticamente a la original en el diseño de tu correo electrónico.

Configuración de la imagen

Después de subir la imagen, puedes personalizarla mediante las opciones de configuración de imagen disponibles en la pestaña Contenido, en el lado derecho.

Enlace

Añade un enlace a la imagen. Puedes elegir entre varios tipos de enlaces, como:

• Sitio web (HTTP, HTTPS)
• Correo (mailto:)
• Archivo (ftp)
• Compartir en redes sociales (Facebook, X (antes Twitter), LinkedIn, Pinterest)

Puedes encontrar estas opciones en el menú desplegable de configuración del enlace.

Texto alternativo

Añade un texto alternativo que se mostrará si la imagen no se carga. Este texto también es útil para la accesibilidad, ya que permite a los lectores de pantalla describir la imagen a los destinatarios con discapacidad visual.

Alineación

Elige cómo debe alinearse la imagen dentro de su contenedor. Puedes alinearla a la Izquierda, al Centro o a la Derecha.

Tamaño

Ajusta manualmente el ancho y la altura de la imagen mediante los botones más/menos o escribiendo las dimensiones que quieras.

También puedes activar la opción "Ajustar al ancho" para que la imagen se adapte automáticamente a todo el ancho del contenedor.

Imagen adaptable

Activa la opción "Imagen adaptable" para garantizar que la imagen se adapte a distintos tamaños de pantalla, especialmente en dispositivos móviles.

Relleno

Personaliza el relleno alrededor de la imagen para controlar cuánto espacio aparece entre la imagen y el contenido circundante. Puedes aplicar el mismo relleno en todos los lados o personalizarlo para cada lado (Superior, Inferior, Izquierdo, Derecho).

Enlaces de anclaje

Puedes asignar un enlace de anclaje a la imagen, lo que permitirá a los destinatarios saltar a una sección específica del mismo correo electrónico al hacer clic en ella. Sin embargo, ten en cuenta que los enlaces de anclaje pueden no funcionar en ciertos clientes de correo, como Gmail y Apple Mail.

Bloque de texto

Mejora tus bloques de texto personalizando su apariencia y funcionalidad mediante las siguientes opciones. Cada opción te permite ajustar con precisión la forma en que se muestra el texto, para que se adapte perfectamente a tus preferencias de diseño.

Barra de herramientas de texto

Cuando haces clic dentro de un bloque de texto, la Barra de herramientas de texto aparece sobre el área de contenido y proporciona acceso rápido a muchas opciones habituales de formato de texto. Estas son las funciones disponibles en la barra de herramientas:

1. Formato de párrafo

Define el estilo del párrafo eligiendo opciones como Normal para el texto habitual o distintos niveles de encabezado (Encabezado 1 a Encabezado 6) para crear una jerarquía estructurada en tu correo electrónico. Esto ayuda a que el contenido sea más legible y esté mejor organizado.

2. Familia tipográfica

La fuente predeterminada es Arial, pero puedes elegir entre varias fuentes, incluidas opciones habituales como Georgia, Helvetica y Courier New. También hay una función de búsqueda para encontrar rápidamente una fuente específica.

3. Tamaño de fuente

Ajusta el tamaño de fuente de 8 pt a 72 pt. El valor predeterminado es 14 pt, que funciona bien para la mayoría del texto del cuerpo de un correo electrónico. Utiliza el menú desplegable para establecer rápidamente el tamaño de fuente que quieras.

4. Estilo del texto

Da estilo al texto mediante las siguientes opciones:

• Negrita (B): enfatiza el texto haciéndolo negrita.
• Cursiva (I): pone el texto en cursiva para darle una apariencia más estilizada.
• Subrayado (U): subraya el texto, algo habitual en los hipervínculos.
• Tachado (S): traza una línea sobre el texto, útil para ediciones o contenido eliminado.

5. Estilo de texto avanzado (menú de tres puntos)

Al hacer clic en los tres puntos de la barra de herramientas se muestran opciones adicionales:

• Subíndice: coloca el texto por debajo de la línea base (útil para notas al pie o fórmulas químicas).
• Superíndice: coloca el texto por encima de la línea base (se usa habitualmente para exponentes o números ordinales).
• Eliminar formato: elimina cualquier formato aplicado y devuelve el texto a su estilo predeterminado.

6. Color del texto y del fondo

• Color del texto: haz clic en el botón Color del texto para elegir un color de una paleta o introducir un código hexadecimal y controlar con precisión el color del texto.
• Color de fondo: selecciona un color de fondo (resaltado) para el texto.

7. Alineación del texto

Alinea el texto dentro del bloque:

• Alinear a la izquierda: alinea el texto a la izquierda.
• Centrar: centra el texto.
• Alinear a la derecha: alinea el texto a la derecha.
• Justificar: distribuye el texto uniformemente por todo el ancho del bloque.

8. Listas

Crea listas ordenadas (numeradas) y desordenadas (con viñetas):

• Insertar/eliminar lista con viñetas: añade o elimina viñetas.
• Insertar/eliminar lista numerada: añade o elimina una lista numerada.

9. Ajuste de línea

Activa o desactiva el ajuste de línea dentro del bloque de texto. Cuando está activado, las líneas largas de texto pasan automáticamente a la siguiente línea.

10. Sangría

Ajusta la sangría del texto:
- **Aumentar sangría**: aleja el texto del margen, lo que resulta útil para subpuntos o citas.
- **Disminuir sangría**: reduce la sangría y acerca el texto al margen izquierdo.
![Sangría del texto](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. Insertar hipervínculo

Aprende a añadir, editar y gestionar hipervínculos en el contenido de tu correo electrónico.

Pasos para añadir o editar un enlace

a) Resaltar el texto

Selecciona el texto que quieres convertir en hipervínculo.

b) Hacer clic en el icono de enlace

En la Barra de herramientas de texto, haz clic en el Icono de enlace.

c) Editar el enlace en el panel de configuración

Aparecerá el Panel de configuración del lado derecho con opciones para el enlace:

• Campo de enlace: introduce la URL o selecciona una de las opciones predefinidas.
• Etiqueta: añade etiquetas para clasificar a los suscriptores o activar automatizaciones.

Corregir enlaces después del envío

No hay nada peor que enviar una campaña nueva a tus 2,365 suscriptores y descubrir que uno de los enlaces está roto por un simple error tipográfico. ¡Adiós a las ventas del Black Friday!

Por suerte, hemos hecho posible corregir enlaces rotos incluso después de que el correo electrónico ya se haya enviado a tus suscriptores.

a) Ver campaña

Busca la campaña enviada en la vista general, haz clic en los tres puntos y selecciona Ver campaña.

b) Modificar enlaces o etiquetas

Desplázate hasta la lista de enlaces de los detalles de la campaña para:

• Actualizar destinos de enlaces: corrige las URL incorrectas.
• Gestionar etiquetas: añade o elimina etiquetas para las automatizaciones.

Nota: asegúrate de que el Seguimiento de clics esté activado en la configuración de la campaña para utilizar la función de redireccionamiento de enlaces.

Personalizar la apariencia de los enlaces

En el Panel de configuración del lado derecho, puedes ajustar la apariencia del enlace:

• Color del enlace: selecciona un color o introduce un código hexadecimal.

• Subrayar enlaces: activa o desactiva los subrayados para obtener una apariencia más limpia.

12. Etiquetas de personalización

Utiliza las Etiquetas de personalización para añadir contenido dinámico, como el nombre del destinatario u otros campos personalizados.

• Accede al menú desplegable de Etiquetas de personalización de la barra de herramientas para seleccionar campos habituales como Nombre, Correo electrónico o País, o define campos personalizados para adaptar los correos a cada destinatario.

13. Emojis

Añade atractivo visual al texto incluyendo emojis.

• Haz clic en el Icono de emoji de la barra de herramientas para abrir una lista de emojis categorizada y navegar fácilmente por ella.
• Nota sobre compatibilidad: prueba los correos electrónicos en ciertos clientes, como Outlook, ya que es posible que algunos no muestren correctamente los emojis.

14. Tabla y caracteres especiales

Al final de la barra de herramientas, haz clic en los tres puntos para mostrar más opciones avanzadas.

Insertar una tabla

Crea y personaliza tablas para mejorar el diseño de tu correo electrónico.

• Define las filas, columnas, el espaciado de las celdas, el relleno y el tamaño del borde según sea necesario.

Insertar caracteres especiales

Mejora tu texto con símbolos, caracteres acentuados y otros caracteres no estándar.

• Accede a la opción Caracteres especiales para explorar una amplia variedad de caracteres.

Configuración adicional del bloque de texto (panel derecho)

El panel derecho ofrece un amplio control sobre la apariencia y la funcionalidad de tus bloques de texto. A continuación se muestran las opciones disponibles:

1. Color del texto

Define el color del texto mediante el selector de color o introduciendo un código hexadecimal.

2. Color de fondo

Establece un color de fondo personalizado para el bloque de texto. De forma predeterminada, el fondo es transparente.

3. Configuración específica de los enlaces

Cuando el bloque de texto contiene enlaces, aparecen opciones adicionales en la configuración:

• Color del enlace: ajusta el color de los enlaces mediante el selector de color o un código hexadecimal.

• Subrayar enlaces: activa o desactiva la opción de subrayado para los enlaces del bloque de texto.

• Edición de enlaces: Selecciona un enlace en el área de contenido para editar su URL en el panel de configuración. También puedes asignar o actualizar etiquetas para el enlace mediante el menú desplegable denominado "Etiquetas".

4. Alineación

Alinea el bloque de texto dentro de su contenedor: Izquierda, Centro o Derecha.

5. Altura fija

Establece una altura fija para el bloque de texto activando esta opción. También puedes controlar la alineación vertical del texto: Superior, Centrada o Inferior.

6. Interlineado

Controla el espacio entre las líneas de texto. Elige entre Estrecho, Normal o Amplio.

7. Relleno

Ajusta el espacio alrededor del bloque de texto. Aplica un relleno uniforme o personaliza cada lado: Superior, Inferior, Izquierdo y Derecho.

8. Enlaces de anclaje

Crea enlaces de anclaje para que los lectores puedan saltar a secciones específicas de tu correo electrónico. Ten en cuenta que algunos clientes de correo no admiten enlaces de anclaje.

Bloque de botón

El bloque de botón te permite añadir un botón en el que se puede hacer clic a tu correo electrónico, con opciones personalizables de funcionalidad y estilo.

Configuración del enlace

La opción Enlace determina la acción que se activa cuando un destinatario hace clic en el botón.

Tipos de enlaces disponibles

• Enlace normal a un sitio (HTTP o HTTPS): dirige al usuario a una página web.
• Enlace de correo: abre el cliente de correo electrónico del usuario para redactar un mensaje nuevo.
• Enlace a un archivo (FTP, FTPS): enlaza a un archivo en un servidor FTP.
• Skype: inicia una llamada o un chat de Skype.
• Teléfono (tel): inicia una llamada telefónica en dispositivos compatibles.
• SMS: abre la aplicación de mensajería con el número del destinatario rellenado.
• Viber: abre la aplicación Viber para enviar mensajes o realizar llamadas.
• Otro tipo de protocolo: especifica un protocolo personalizado que no aparezca en la lista anterior.

Opciones para compartir en redes sociales

También puedes configurar el botón para compartir contenido en redes sociales o por correo electrónico:

• Facebook
• X (antes Twitter)
• LinkedIn
• Pinterest
• Compartir por correo electrónico

Campo URL

Junto al tipo de enlace, el Campo URL (que normalmente comienza por https://) te permite introducir la dirección específica correspondiente al tipo de enlace.

Etiqueta del botón

Personaliza la etiqueta del botón para reflejar tu llamada a la acción. La etiqueta predeterminada es "Botón", pero puedes cambiarla por opciones como "Más información", "Suscríbete ahora" o "Comprar ahora".

Estilo del texto

La configuración de Estilo del texto te permite ajustar la apariencia del texto del botón.

Selección de fuente

Elige entre varias fuentes estándar, incluidas:

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Para las fuentes no estándar, hay opciones adicionales como:

• Arvo
• Lato
• Lora
• Merriweather
• Merriweather Sans
• Noticia Text
• Open Sans
• Playfair Display
• Roboto
• Source Sans Pro

En la parte superior de la lista de fuentes, un cuadro de búsqueda te ayuda a localizar rápidamente una fuente específica.

Tamaño y formato de fuente

• Tamaño de fuente: elige entre 8 y 72, según el protagonismo que quieras dar al texto del botón.
• Formato del texto: aplica el estilo Negrita o Cursiva mediante los iconos "B" o "I" para enfatizar el texto del botón.

Configuración del color

Personaliza la apariencia del botón ajustando su configuración de color.

1. Color del botón: Cambia el color de fondo del botón. El valor predeterminado es verde (#31cb4b). Utiliza el campo de código hexadecimal o el selector de color para elegir un color nuevo.

2. Color del texto: Define el color del texto del botón. El valor predeterminado es blanco (#ffffff). Elige un color que contraste bien con el fondo del botón para facilitar la lectura.

3. Color de fondo: Ajusta el fondo del contenedor del botón. De forma predeterminada, es transparente, pero puedes cambiarlo para que el botón destaque sobre el fondo del correo electrónico.

Radio del borde

Controla el redondeado de las esquinas del botón mediante la opción Radio del borde.

• Valor predeterminado: 30 (esquinas moderadamente redondeadas).
• Intervalo: de 0 (esquinas cuadradas) a 100 (botón con forma de píldora).

Nota: Para garantizar que las esquinas redondeadas se muestren correctamente en Microsoft Outlook, activa la opción "Compatibilidad con Outlook" en la pestaña Apariencia.

Alineación

Coloca el botón dentro de su área de contenido mediante la opción Alineación.

• Opciones: Izquierda, Centro, Derecha.
• Uso habitual: alineación centrada para destacar el botón, o alineación izquierda o derecha para mantener la coherencia del diseño.

Altura fija

Activa la opción Altura fija para mantener constantes las dimensiones del botón.

1. Valor predeterminado: desactivada.
2. Altura mínima: 44 píxeles.
3. Alineación vertical del contenido: cuando la altura fija está activada, alinea el contenido del botón en la parte Superior, Central o Inferior para colocarlo con precisión.

Botón con icono

La opción Botón con icono te permite incluir un icono junto al texto del botón, mejorando el atractivo visual y reforzando la llamada a la acción. Esta función está desactivada de forma predeterminada.

• Formatos compatibles: sube iconos en formato PNG, JPG o GIF, con un tamaño máximo de 2 MB.
• Posición del icono: elige mostrar el icono a la Izquierda o a la Derecha del texto del botón.

Nota: los iconos no se muestran en ciertas versiones de Microsoft Outlook para Windows, incluidas:

• Outlook 2002, 2007, 2010, 2013, 2016 y 2019. Esta limitación se debe a la forma en que estos clientes de correo procesan los correos electrónicos HTML. Tenlo en cuenta si una gran parte de tu audiencia utiliza estos clientes.

Configuración del borde

Personaliza los bordes del botón para añadir estilo y énfasis.

• Ancho del borde: establece el ancho de cada lado (izquierdo, derecho, superior e inferior) individualmente, hasta 40 píxeles.
• Estilo del borde: elige entre los estilos Continuo, Discontinuo o Punteado.
• Color del borde: utiliza el selector de color o introduce un código hexadecimal para que el color del borde coincida con tu marca o esquema de diseño.

Relleno interno

Ajusta el espacio dentro del botón, entre el contenido (texto e icono) y el borde del botón.

• Opciones de personalización: define los valores de relleno para los lados Izquierdo, Derecho, Superior e Inferior, hasta un máximo de 99 píxeles.
• Impacto: el relleno interno afecta al tamaño general del botón y a la posición del contenido dentro de él.

Relleno externo

Controla el espacio exterior del botón para ajustar su posición con respecto a otros elementos del diseño del correo electrónico.

• Opciones de personalización: establece los valores de relleno externo para los lados Izquierdo, Derecho, Superior e Inferior, hasta un máximo de 40 píxeles.
• Caso de uso: garantiza que el botón no aparezca demasiado cerca de otro contenido o de los bordes del correo electrónico.

Añadir enlace de anclaje

Utiliza enlaces de anclaje para dirigir a los lectores a secciones específicas del mismo correo electrónico y facilitar la navegación rápida en boletines más largos.

• Nombre del anclaje: define un destino dentro del correo electrónico y enlaza el botón a este anclaje. Al hacer clic, el correo se desplazará hasta la sección especificada, mejorando la navegación del usuario.

Importante: los enlaces de anclaje no son compatibles con ciertos clientes de correo, incluidos:

• Aplicación Gmail para iOS
• Apple Mail para iOS
• Aplicación Outlook para Android
• Aplicación Outlook para macOS
• Correos electrónicos AMP

Prueba tu correo electrónico a fondo para garantizar su funcionamiento en distintos clientes y determinar si esta función es adecuada para tu audiencia.

Bloque espaciador

El Bloque espaciador te permite añadir espacio ajustable dentro del contenido de tu correo electrónico y controlar su tamaño, alineación, apariencia y espaciado interno. A continuación encontrarás información sobre los dos tipos de espaciadores: Espaciador normal y Espaciador dinámico.

1. Espaciador normal

El Espaciador normal es un elemento de línea que separa visualmente las secciones de tu correo electrónico.

Configuración principal

1. Grosor y estilo de la línea Personaliza el grosor, el estilo y el color de la línea:

   • Grosor: ajústalo mediante los botones + y - (a partir de 1).
   • Estilo: elige entre continuo, discontinuo o punteado.
   • Color: establece un color personalizado mediante un código hexadecimal o el selector de color (predeterminado: #cccccc).

2. Ancho Define cuánto se extiende la línea del espaciador por el contenido. Ajusta el ancho en píxeles mediante los botones + y -.

3. Alineación Alinea la línea a la izquierda, al centro o a la derecha para adaptarla al diseño.

4. Relleno Controla el espaciado interno alrededor del espaciador:

   • Valor predeterminado: el relleno está establecido en 20 en todos los lados.
   • Utiliza el interruptor Más para especificar el relleno de cada lado:
     • Superior
     • Derecho
     • Inferior
     • Izquierdo

Caso de uso

El Espaciador normal es ideal para crear separaciones visuales limpias entre las secciones de tu correo electrónico y garantizar un diseño organizado y profesional.

2. Espaciador dinámico

El Espaciador dinámico es un bloque invisible de espacio vacío diseñado para crear espacio visual dentro del diseño de tu correo electrónico.

Características principales

1. Ajuste de altura Ajusta la altura directamente en el área de contenido o mediante el panel de control con los botones + y -. La altura determina cuánto espacio vertical se añade entre las secciones.

2. Color de fondo De forma predeterminada, el espaciador tiene un fondo transparente, pero puedes aplicar un color de fondo personalizado mediante un código hexadecimal o el selector de color. Esto permite que el espaciador funcione como un bloque visible si es necesario.

3. Comportamiento adaptable La opción Espaciador adaptable garantiza que el espaciador se adapte dinámicamente a distintos tamaños de pantalla para lograr un diseño óptimo en todos los dispositivos. Esta función está activada de forma predeterminada.

Diferencias principales entre los espaciadores normal y dinámico

• Espaciador dinámico: añade espacio vacío sin una línea visible.
• Espaciador normal: incluye opciones específicas de la línea, como:
  • Ancho de línea
  • Alineación
  • Estilos de línea
  • Relleno

El Espaciador dinámico no admite estas funciones y está diseñado exclusivamente para separar contenido sin elementos visuales.

3. Añadir enlace de anclaje

Se pueden aplicar enlaces de anclaje a ambos tipos de espaciador, lo que permite a los usuarios navegar directamente hasta la ubicación del espaciador desde otra parte del correo electrónico. Esto resulta especialmente útil para crear navegación dentro del correo en boletines más largos.

Nota: ciertos clientes de correo no admiten los enlaces de anclaje, entre ellos:

• Microsoft Outlook
• Gmail (en dispositivos móviles)

Bloque de vídeo

El Bloque de vídeo te permite insertar vídeos en tu correo electrónico y personalizar su apariencia y comportamiento. Admite enlaces de vídeo de plataformas como YouTube y Vimeo, lo que ofrece flexibilidad y control sobre la forma en que se presenta el vídeo.

1. Enlace al vídeo

Añade la URL del vídeo en el campo Enlace al vídeo. Las plataformas compatibles incluyen YouTube, Vimeo y otros servicios que permiten insertar contenido.

• Comportamiento automático: Cuando se añade una URL válida:

  • Se genera automáticamente una imagen de vista previa mediante la miniatura del vídeo de la plataforma.
  • El campo Texto alternativo se rellena automáticamente con el título o la descripción del vídeo (si están disponibles).

• Campos editables: Puedes editar o sustituir manualmente la imagen y el texto generados si es necesario.

2. Texto alternativo

El campo Texto alternativo garantiza la accesibilidad al mostrar una descripción del vídeo si no se carga.

• Se rellena automáticamente al añadir una URL de vídeo compatible.
• Se puede personalizar para adaptarlo a tus necesidades de contenido.

3. Miniatura personalizada

Sube una imagen personalizada para sustituir la vista previa de vídeo predeterminada.

• Cómo activarla: activa la opción Miniatura personalizada.
• Formatos compatibles: PNG, JPG o GIF.
• Cuándo utilizarla: sustituye la miniatura generada cuando no encaje con el diseño de tu correo electrónico.

4. Botón de reproducción

Personaliza el Botón de reproducción superpuesto en la miniatura del vídeo.

• Opciones disponibles:
  • Elige entre los estilos de botón de reproducción de YouTube, Vimeo u otros.
  • Selecciona “Ninguno” para ocultar completamente el botón de reproducción.

5. Tamaño

Ajusta las dimensiones del vídeo para adaptarlo al diseño de tu correo electrónico.

• Ancho y altura: utiliza los botones + y - o introduce los valores manualmente para controlar el tamaño.
• Diseño adaptable: asegúrate de que el vídeo se adapte correctamente a distintos dispositivos.

6. Ajustar al ancho

Activa el interruptor Ajustar al ancho para que el vídeo se adapte automáticamente al ancho de su contenedor. Esto garantiza que el vídeo mantenga un diseño adaptable en distintos dispositivos.

7. Imagen adaptable

El interruptor Imagen adaptable garantiza que la miniatura del vídeo se ajuste al ancho de la pantalla en dispositivos móviles.

• Nota: la adaptación depende de la compatibilidad del dispositivo y del cliente de correo.

8. Alineación

Utiliza la opción Alineación para controlar la posición horizontal del vídeo dentro del bloque:

• Izquierda: alinea el vídeo a la izquierda.
• Centro: centra el vídeo.
• Derecha: alinea el vídeo a la derecha.

9. Opciones específicas para móviles

Personaliza el comportamiento y la apariencia del vídeo en dispositivos móviles:

1. Ocultar elemento en móviles Oculta el bloque de vídeo en dispositivos móviles si es necesario.

   • Nota: esta función depende de la compatibilidad con las consultas de medios y puede no funcionar en todos los clientes de correo.

2. Relleno en móviles Ajusta el relleno alrededor del vídeo para las pantallas móviles.

   • Utiliza el interruptor Más para establecer valores de relleno individuales para:
     • Superior
     • Derecho
     • Inferior
     • Izquierdo

10. Incluir en AMPHTML o HTML

Elige si el bloque de vídeo aparece en versiones específicas del correo electrónico:

• AMPHTML y HTML
• Solo AMPHTML
• Solo HTML

Esta opción garantiza que el vídeo se incluya adecuadamente según la versión del correo electrónico que se entregue.

Bloque HTML

El Bloque HTML te permite insertar código HTML y CSS personalizado en tu correo electrónico, ofreciendo flexibilidad para personalizaciones avanzadas y manteniendo la compatibilidad con los clientes de correo. Tanto si añades un único elemento HTML como si diseñas un correo electrónico completo, este bloque es tu herramienta para crear diseños personalizados.

1. Interfaz del editor de código

Al seleccionar el Bloque HTML, aparece una ventana negra del editor de código en el panel de contenido. Este editor permite escribir, pegar o modificar código personalizado. El editor incluye dos secciones:

• Sección HTML: añade o edita la estructura HTML de tu correo electrónico.
• Sección CSS: abre un editor CSS independiente para aplicar estilos al contenido.

2. Ajuste del tamaño de fuente

Ajusta el tamaño de fuente del código en el editor para mejorar la legibilidad:

• Utiliza el botón A+ para aumentar el tamaño de fuente.
• Utiliza el botón A- para reducir el tamaño de fuente.

3. Ajuste del tamaño de la ventana del editor

Cambia el tamaño de la ventana del editor de código según tus preferencias de trabajo:

• Cómo ajustarlo:
  • Pasa el cursor sobre los tres puntos situados en la parte superior central de la ventana del editor.
  • Arrastra el control deslizante hacia arriba o hacia abajo para aumentar o reducir el tamaño del editor.

Esta función resulta especialmente útil para gestionar bloques de código más grandes o detallados.

4. Editor CSS

El Editor CSS te permite gestionar los estilos del contenido HTML y se puede abrir mediante un botón situado en la esquina superior derecha del editor de código.

Consideraciones importantes:

• Compatibilidad limitada: muchos clientes de correo no admiten funciones CSS avanzadas como Flexbox, Grid o consultas de medios.
• Usa lo básico: utiliza CSS en línea básico para lograr la máxima compatibilidad.
• Estilos preconfigurados: evita eliminar los estilos preconfigurados, ya que garantizan una representación correcta en los principales clientes de correo.

5. Compatibilidad con los clientes de correo

El HTML para correo electrónico requiere especial atención debido a los motores de renderizado obsoletos de muchos clientes de correo.

Directrices principales:

• Utiliza diseños basados en tablas en lugar de diseños basados en <div> para obtener una mayor compatibilidad.
• Evita funciones CSS avanzadas como animaciones, Flexbox o Grid.
• Es posible que las consultas de medios y algunas propiedades CSS menores se comporten de forma incoherente.
• Pruebas: prueba siempre los correos electrónicos en varios clientes (por ejemplo, Gmail, Outlook y Apple Mail) para garantizar una representación correcta.

6. Relleno

La opción Relleno ajusta el espacio alrededor del contenido HTML:

• Relleno predeterminado: establecido en 0 de forma predeterminada.
• Relleno personalizado: activa el interruptor Más para ajustar individualmente el relleno de:
  • Superior
  • Derecho
  • Inferior
  • Izquierdo

Esta función es ideal para alinear el contenido HTML dentro del diseño del correo electrónico.

7. Añadir enlace de anclaje

La función Añadir enlace de anclaje permite crear un enlace en el correo electrónico que dirija al bloque HTML.

Cómo utilizarla:

• Activa la opción e introduce un nombre de anclaje en el campo.

Limitaciones:

• Algunos clientes de correo no admiten los enlaces de anclaje, como:
  • Aplicación Gmail para iOS
  • Apple Mail para iOS
  • Aplicación Outlook (Android y macOS)
  • Correos electrónicos AMP

8. Escribir HTML personalizado

El Editor HTML está diseñado para escribir o pegar la estructura HTML personalizada de tu correo electrónico.

Prácticas recomendadas:

• Utiliza HTML sencillo y ampliamente compatible.
• Evita diseños complejos o elementos como <div>.
• Utiliza diseños basados en tablas para garantizar una mayor compatibilidad.

9. Consejos para lograr buenos resultados

1. Empieza poco a poco: utiliza el bloque HTML para secciones específicas si estás empezando a desarrollar correos electrónicos.
2. Valida el código: asegúrate de que tu HTML cumple los requisitos de los clientes de correo.
3. Prueba a fondo: utiliza herramientas para previsualizar y probar tu correo electrónico en varios clientes y dispositivos.