El editor Drag & Drop Editor simplifica el diseño de e-mails de aspecto profesional. Ofrece más opciones para personalizar e-mails y también garantiza que el e-mail se vea correctamente en cualquier dispositivo y cliente de e-mail.

En este artículo le explicaremos con más detalle cómo utilizar los bloques de contenido en sus e-mails y cómo modificar su configuración.

Hemos dividido los artículos sobre el editor Drag & Drop en las siguientes partes:

• Primera parte: descripción general
• Segunda parte: diferencias entre los bloques de diseño y los de contenido
• Tercera parte: cómo usar los bloques de contenido -> SE ENCUENTRA AQUÍ
• Cuarta parte: configurar el estilo de sus e-mails
• Quinta parte: guardar los bloques para usarlos en otras campañas
• Sexta parte: editar los e-mails para la visualización en móviles
• Séptima parte: previsualizar los e-mails y enviar pruebas

Antes de empezar

Configure su Biblioteca de marca, de este modo, todas las plantillas que seleccione heredarán las propiedades de su marca, como el logotipo, los colores, las fuentes y los enlaces de las redes sociales. Además de ahorrarle tiempo, la Biblioteca de marca permite tener una imagen de marca coherente. Para obtener más información, consulte nuestro artículo Diseñar automáticamente sus e-mails con sus recursos de marca usando la Biblioteca de marca.

Título y texto

Barra de herramientas de formato de texto

Seleccione el bloque de contenido Texto o Título en el editor para que aparezca la barra de herramientas de formato de texto en la parte superior del bloque con las siguientes opciones: 

Colores Personalización Enlaces

Ahora, los colores que use en su plantilla se guardarán en el selector de colores. También puede eliminar un color guardado seleccionando un texto con ese color, haciendo clic en el selector de color y, a continuación, en Eliminar color. Puede tardar unos minutos en desaparecer.

Haga clic en 👤 para insertar un elemento de personalización en su texto, como el nombre de los destinatarios, por ejemplo.
Para más información, consulte cómo personalizar su texto con atributos de contacto.

Para insertar un enlace en su texto, seleccione el texto, haga clic en el icono Enlace, o pulse ⌘ o Ctrl + K, y rellene los datos en la ventana Insertar/editar enlace. El título del enlace corresponde al texto que aparece cuando se pasa el ratón por encima del enlace. 

Puede seleccionar diferentes tipos de enlaces:

• Enlace absoluto (URL)
  Esta es la opción básica para los enlaces, elíjala para añadir una URL.
• Ver en el navegador
  El enlace de espejo puede añadirse al encabezado de sus campañas. Es un enlace en el que los destinatarios pueden hacer clic si tienen problemas para ver su e-mail en su bandeja de entrada y quieren abrirlo como una página web. No es obligatorio tener un enlace de espejo en las campañas.
  ➡️ Para más información, consulte nuestro artículo relacionado sobre los enlaces de espejo.
• Cancelar la suscripción
  El enlace de cancelación de la suscripción se añade automáticamente al pie de página de las campañas. Se trata de un enlace en el que los destinatarios pueden hacer clic para abrir la página de cancelación de suscripción de Brevo y dejar de recibir sus e-mails. Tener un enlace de cancelación de la suscripción en las campañas es obligatorio, ya que es esencial para sus contactos y para el buen funcionamiento de las campañas. 
  ➡️ Para más información, consulte nuestro artículo relacionado sobre los enlaces de cancelación de suscripción.
  
• Actualizar sus preferencias
  Brevo ofrece un formulario de actualización de perfil para ayudarle a recopilar información actualizada sobre sus suscriptores, como sus datos, preferencias e incluso a qué listas quieren estar suscritos. Le recomendamos que incluya un enlace a este formulario en el pie de página de todos sus e-mails para que los suscriptores puedan compartir sus preferencias con usted.
  ➡️ Para más información, consulte nuestro artículo relacionado sobre los enlaces de actualización de perfil.
  
  💡 Información relevante

  Esta opción se añadirá automáticamente cuando seleccione un formulario en Campaña > Configuración avanzada > Utilizar un formulario de perfil de actualización personalizado como se explica aquí.
  Si esta opción aparece atenuada, deberá activarla en Campañas > Configuración avanzada. Si está utilizando una plantilla, deberá añadir manualmente el enlace al formulario para Actualizar sus preferencias.
  
• Enlace de e-mail (mailto)
  Añada un enlace a una dirección de e-mail.
• Clic para llamar a un número de teléfono
  Añada un enlace a un número de teléfono.
• Anclaje para enlaces relativos
  Cree un anclaje en algún lugar de su campaña y luego utilice la opción de enlace relativo para añadir un enlace a ese anclaje. 
• Enlace relativo (para anclajes)
  Una vez que haya creado su anclaje en la campaña, utilice esta opción para vincular el anclaje.
  Por ejemplo, volver a una parte específica de la newsletter en la parte superior de la página.

Para eliminar o actualizar un enlace, coloque el cursor sobre el enlace, haga clic en el icono de Enlace para que aparezcan los botones Eliminar y Actualizar.

Vea este vídeo para aprender a añadir un enlace, un color de fondo o una imagen y modificar los ajustes del bloque de texto: 

Ajustes del panel izquierdo

Mismo bloque, diferente formato

Haga clic en el bloque Texto para que aparezca el panel de la izquierda con ajustes adicionales similares a los disponibles en la pestaña Diseño. 
Para más información sobre cómo utilizar estos ajustes, consulte el artículo Establecer el estilo de diseño para todo el e-mail.

Con este editor puede elegir diferentes formatos dentro del mismo bloque de texto. Por ejemplo, puede poner un título seguido de un párrafo y viñetas. También puede tener diferentes colores dentro del mismo bloque. 

Bordes

También puede añadir bordes a su bloque de texto, así como a sus imágenes, utilizando el ajuste de Bordes del panel izquierdo. Puede establecer diferentes tamaños y colores para cada borde o activar el botón Aplicar en todas partes para aplicar un tamaño y color específicos para todos los bordes.

Imagen

Puede añadir una imagen desde la pestaña Contenido utilizando el bloque de Imagen. Podrá añadir la imagen que quiera haciendo en la biblioteca de marca, clic en Remplazar o pegando el enlace a su imagen en el campo Insertar imagen desde URL. Puede cambiar el tamaño o editar su imagen directamente desde el editor.

Para obtener más información, consulta nuestro artículo dedicado Use carpetas para organizar las imágenes de su Biblioteca de contenidos.

Añadir una imagen

Vea el vídeo para aprender a añadir varias imágenes al mismo tiempo y modificar los ajustes del bloque de imágenes.

Cambiar el tamaño de una imagen

Para cambiar el tamaño de una imagen haga clic en la imagen que quiera cambiar para seleccionarla y coloque el cursor en la esquina inferior derecha de la imagen. Una vez que aparezca la doble flecha, arrastre la esquina hasta encontrar el tamaño perfecto. El tamaño de la imagen se muestra en azul en la esquina inferior derecha de la misma y se actualiza automáticamente cuando cambia el tamaño de la imagen.
También puede utilizar el campo de Ancho del panel izquierdo para cambiar el tamaño de la imagen.

Editar una imagen

Nuestro editor de Drag and Drop incluye un editor de imágenes en el que puede recortar una imagen, añadir filtros, texto o diseño de texto. Para acceder al editor de imágenes, haga clic en su imagen y pulse el botón de Editar en Ajustes de la imagen.

También puede:

• Editar una imagen desde la Biblioteca de contenidos. 
• Diseñar su propia imagen y guardarla en la biblioteca de contenido gracias a la función Crear imagen. Para obtener más información, consulte nuestro artículo dedicado Diseñar un newsletter de calidad profesional con nuestra función Crear imagen.

Añadir un enlace a una imagen

Añadir un enlace a una imagen le permite redirigir a sus destinatarios. Puede redirigirlos a una página o a un archivo.

Botón

Añada botones para crear una llamada a la acción en sus e-mails:

1. Arrastre y suelte el bloque de Botón a su campaña.
2. Sustituya el texto de la llamada a la acción por un texto relacionado con el contenido al que quiera redirigir a sus destinatarios. 
   Puede personalizar el texto con atributos de contacto si quiere.
3. Opcional: use la barra de formato de texto y los ajustes del botón que hay en el panel izquierdo para personalizar el botón. 
4. Añada un enlace para redirigir a sus destinatarios.
   Redirigir a una página Redirigir a un archivo

   Para redirigir a sus destinatarios a la página de su elección:

   1. Seleccione el botón y haga clic Añada el enlace.
   2. Seleccione el Tipo de enlace que desea insertar e introduzca su URL en el campo Enlace objetivo.
   3. Opcional: añada un Título de enlace que aparecerá como una ayuda visual al pasar el ratón por encima.
   4. Haga clic en Insertar.
      

   Para redirigir a sus destinatarios a un archivo que desee que descarguen:

   1. Cargue su archivo en un proveedor externo como WeTransfer o Dropbox y asegúrese de que sea accesible públicamente.
   2. Seleccione la imagen y haga clic en  Añada el enlace.
   3. En el campo Tipo de enlace, seleccione Enlace absoluto (URL).
   4. Introduzca la URL de su archivo en el campo Enlace objetivo.
   5. Opcional: añada un Título de enlace que aparecerá como una ayuda visual al pasar el ratón por encima.
   6. Haga clic en Insertar.
      
      

Vea el vídeo para obtener más información sobre la modificación de ajustes como el ancho, el radio del borde, el tamaño de la línea y el color de fondo del bloque de botones.

Logotipo

Este bloque de contenido le permite insertar el logotipo de su marca en cualquier lugar del diseño de su email. Añada su logotipo a su biblioteca de marca para evitar tener que volver a subirlo cada vez. 

Redes sociales

El bloque de Redes sociales permite redirigir a los destinatarios a sus páginas de redes sociales cuando hagan clic en los iconos.

1. Desde la pestaña Contenido, arrastre y suelte el bloque de Redes sociales a su campaña.
2. Deje los ajustes de diseño de los iconos predeterminados o elija el tamaño, el estilo, el tema y el espaciado que desee dar a sus iconos de las redes sociales.
3. Pegue el enlace a sus páginas de las redes sociales en el campo de configuración de los iconos correspondientes. 
   Puede hacer clic en Añadir más para añadir iconos y enlaces de redes sociales si es necesario o hacer clic en el icono de la papelera para eliminar un icono y un enlace de redes sociales del bloque. 

Vea el vídeo para obtener más información sobre la modificación de los ajustes del bloque de redes sociales.

HTML

El bloque HTML permite añadir su propio código. Puede teclear o copiar y pegar su código. Para ver la vista previa del código, basta con que salga del bloque HTML.

Algunos clientes de e-mail no admiten todo el contenido HTLM, ya que el HTML del e-mail no está tan desarrollado como el HTML web. Para obtener más información sobre cómo evitar problemas con el código HTML en el editor de HTML y bloque de HTML, consulte nuestro artículo Usar HTML en las campañas de e-mail.

Estilo 

Los bloques de contenido de estilo son bloques de contenido predefinidos que puede rellenar con otros bloques de contenido. Puede elegir entre tres bloques de contenido de estilos diferentes. Para obtener más información, consulte nuestro artículo dedicado Diferencias entre los bloques de Estilo y los de contenido.

Divisor

El bloque divisor añade una línea horizontal para separar los bloques.

Vea el video para aprender a modificar ajustes como el grosor, el color, la forma, el ancho o el color de fondo del bloque divisor:

Encabezado y pie de página

Use el bloque de encabezado para añadir el logotipo de su empresa.

El bloque de pie de página es esencial porque ofrece a sus destinatarios más información sobre su empresa y les permite cancelar la suscripción o editar sus preferencias. Puede estar compuesto por:

Producto

Arrastre y suelte el bloque de contenido de Productos a su newsletter. Verá la imagen, el título, la descripción y el precio del producto. La dirección URL del producto se vinculará automáticamente a la imagen y al botón del producto siempre que su tienda esté publicada.

Espaciador 

El bloque de contenido espaciador le permite añadir un bloque de espacio dentro del diseño de su email. Puede editar la anchura o la altura del bloque de contenido espaciador para crear un espacio más o menos grande. La anchura máxima es del 100 % y la altura mínima de 30 px. También puede cambiar el color del bloque espaciador para crear un bloque de color.

Vídeo

Use nuestro bloque de contenido de vídeo para insertar fácilmente un enlace de vídeo en sus campañas de email:

Para obtener más información, consulte nuestro artículo dedicado Insertar vídeos en mi campaña de email.

⏩ ¿Qué es lo siguiente?

• Cuarta parte: configurar el estilo de sus e-mails
• Quinta parte: guardar los bloques para usarlos en otras campañas
• Sexta parte: editar los e-mails para la visualización en móviles
• Séptima parte: previsualizar los e-mails y enviar pruebas

🤔 ¿Tiene alguna duda?

Si tiene alguna pregunta, no dude en ponerse en contacto con nuestro equipo de asistencia mediante la creación de un ticket desde su cuenta. Si todavía no tiene una cuenta, puede ponerse en contacto con nosotros aquí.