El editor Drag and Drop facilita el diseño de emails con aspecto profesional. Ofrece más opciones para personalizar su email y también garantiza que visualicen perfectamente en cualquier cliente de email de email y dispositivo.

En este artículo, explicaremos con más detalle cómo usar bloques de contenido en sus emails y cómo modificar su configuración.

Hemos dividido los artículos sobre el editor Drag and Drop en varias partes:

• Primera parte: Descripción general del editor
• Segunda parte: Estilo versus bloques de contenido
• Tercera parte: XCómo usar los bloques de contenido - USTED ESTÁ AQUÍ
• Cuarta parte: Configurar el estilo de sus emails
• Quinta parte: Guardar los bloques para usarlos en otras campañas
• Sexta parte: Editar los emails para la visualización en móviles
• Séptima parte: restaurar, obtener una vista previa, probar y guardar el diseño de la campaña

Antes de empezar

Configure su biblioteca de marca de forma que todas las plantillas nuevas que seleccione tengan sus propiedades de marca, como el logo, los colores, las fuentes, y los enlaces a las redes sociales. Además de ahorrarle tiempo, crear su Biblioteca de marca ayuda a mantener la coherencia de marca en los email. Para obtener más información, consulte nuestro artículo dedicado Cómo diseñar automáticamente emails con los activos de la imagen de marca a través de la Biblioteca de marcas.

Título y texto

Barra de herramientas de formato de texto

Seleccione el bloque de contenido Texto o Título del diseñador para visualizar la barra de herramientas de formato de texto en la parte superior del bloque con las siguientes opciones:

Colores Añadir una personalización Insertar enlaces

Los colores que use en su plantilla ahora se guardarán en el selector de color. Siempre puede eliminar un color guardado seleccionando un texto con este color, haciendo clic en el selector de color y luego en Eliminar color. Es posible que tarde unos minutos en desaparecer.

Haga clic en 👤 para insertar una personalización en su texto, como, por ejemplo, el nombre de sus destinatarios.
Para obtener más información, consulte cómo personalizar su texto usando atributos de contacto.

Para insertar un enlace en su texto, seleccione el texto, haga clic en el icono de enlace o pulse ⌘ o Ctrl + K y cumplimente los detalles en la ventana Insertar/editar enlace . El título del enlace es la ventana emergente que aparece cuando pasa el cursor sobre el enlace.

Puede seleccionar diferentes tipos de enlaces:

Enlaces externos

• Enlace absoluto (URL)
  Esta es la opción básica para enlaces, elíjala para agregar una URL.
• Enlace a email (mailto)
  Agregue un enlace a una dirección de email.
• Clic para llamar a un número de teléfono
  Agregue un enlace a un número de teléfono.

Enlaces estándar

• Enlace para darse de baja (global)
  El enlace para darse de baja se agrega automáticamente en el pie de página de las campañas. Es 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 emails. Tener un enlace de cancelación de suscripción en las campañas es obligatorio, ya que es esencial para sus contactos y para el correcto funcionamiento de las campañas.
  ➡️ Para obtener más información, consulte el  artículo dedicado a los enlaces de cancelación de suscripción.
• Enlace de confirmación doble 
  Agregue un enlace de confirmación doble en la plantilla de email si desea que los destinatarios confirmen la suscripción a sus emails después de completar el formulario de suscripción. 
  ➡️ Para obtener más información, consulte el artículo sobre cómo crear una plantilla de confirmación doble.
• Ver en el navegador
  El enlace espejo se puede agregar en el encabezado de las campañas. Es un enlace en el que los destinatarios pueden hacer clic si tienen problemas para ver el email en la bandeja de entrada y desean abrirlo como una página web. No es obligatorio tener un enlace espejo en las campañas.
  ➡️ Para obtener más información, consulte el artículo dedicado a los enlaces espejo.
• Actualizar las preferencias
  Brevo ofrece un formulario de actualización del perfil para ayudarle a recopilar información actualizada sobre los suscriptores, como sus datos, preferencias e incluso a qué listas desean suscribirse. Le recomendamos que incluya un enlace a este formulario en el pie de página de todos los emails para ayudar a los suscriptores a compartir sus preferencias con usted. 
  ➡️ Para obtener más información, consulte nuestro artículo dedicado a la actualización de enlaces de perfil.
  
  💡 Información relevante

  El formulario de actualización del perfil se agregará automáticamente en la configuración adicional de la campaña de email, tal y como se explica aquí.
  Si está creando una plantilla de email, el enlace al formulario de actualización de preferencias debe agregarse manualmente.

Enlaces de Brevo

• Payments
  Seleccione uno de los enlaces de pago creados en Payments. 
  ➡️ Para obtener más información, consulte los artículos dedicados a Payments. 

Enlaces de anclaje

• Ancla para enlaces relativos
  Cree un ancla en algún lugar de su campaña y luego use la opción de enlace relativo para vincular a ese ancla. 
• Enlace relativo (de anclaje)
  Cuando haya creado un anclaje en su campaña, utilice esta opción para vincular un elemento a dicho anclaje.
  Por ejemplo, para volver a una parte específica del newsletter situada en la parte superior de la página.

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

Visualice el vídeo para aprender más acerca de agregar un enlace, color de fondo o imagen, y modificar configuración de bloque de texto:

Configuración del panel izquierdo

Mismo bloque, diferente formato

Haga clic en el bloque Texto para mostrar el panel izquierdo con configuraciones adicionales similares a las disponibles en la pestaña Diseño . 
Para obtener más información sobre cómo utilizar estas configuraciones, consulte Configurar el estilo de sus emails.

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

Bordes

También puede agregar bordes al bloque de texto , así como a sus imágenes, usando la configuración de Bordes del panel izquierdo. Puede establecer diferentes tamaños y colores para cada borde o activar el botón Aplicar en todos los laterales para aplicar un tamaño y color únicos en todos los bordes. 

Imagen

Puede agregar una imagen desde la pestaña Contenido usando el bloque Imagen. Podrá agregar la imagen de su elección arrastrando y soltando desde su sistema, su biblioteca de contenido 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.

Hay configuraciones adicionales en el panel izquierdo que son similares a las disponibles en la pestaña Diseño. 
Para obtener más información sobre cómo utilizar estas configuraciones, consulte Configurar el estilo de sus emails.

Añadir una imagen

Redimensionar una imagen

Para redimensionar una imagen, haga clic en la imagen cuyo tamaño desea cambiar para seleccionarla y coloque el cursor en la esquina inferior derecha de la imagen. Una vez que aparezca la doble flecha, tire de la esquina hasta lograr el tamaño perfecto. El tamaño de su imagen se muestra en la parte superior y se actualiza automáticamente mientras cambia el tamaño de la imagen.
También puede usar el campo Ancho del panel izquierdo para redimensionar la imagen.

Editar una imagen

Nuestro editor Drag & Drop incluye un editor de fotos donde puede recortar su imagen, agregar filtros, texto o diseño de texto. Para acceder al editor de fotos, haga clic en su imagen y en el botón Editar en Configuración de imagen.

También puede:

• Editar una foto de la biblioteca de contenido
• Diseñe su propia imagen y guárdela en la biblioteca de contenido gracias a la funcionalidad Crear imagen . Para obtener más información, consulte nuestro artículo dedicado Diseñar una newsletter de calidad profesional con nuestra funcionalidad Crear imagen.

Agregar un enlace a una imagen

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

Añadir un texto alternativo a las imágenes

Un texto alternativo es una breve descripción de la imagen que aparece si esta no se carga o si el destinatario utiliza un lector de pantalla. El texto alternativo aumenta la accesibilidad, mejora la experiencia del usuario y transmite el mensaje incluso si las imágenes están bloqueadas o no pueden mostrarse.

Para añadir un texto alternativo a sus imágenes:

1. Seleccione la imagen a la que desea agregar un texto alternativo. Se abre el panel izquierdo con la configuración del contenido. 
2. Busque el campo Texto Alt en la sección Image settings (Configuración de imagen).
3. Escriba una breve descripción de su imagen. Recomendamos escribir una descripción breve y precisa del contenido de la imagen, transmitiendo solo la información esencial. Evite escribir Imagen de y mantenga su descripción centrada en el propósito de la imagen. 
   

Botón

Agregue botones para crear una llamada a la acción en sus emails:

1. Arrastre y suelte el bloque de botones en su campaña.
2. Reemplace el texto de llamada a la acción con un texto que corresponda al contenido al que desea redirigir a sus destinatarios. 
   Puede personalizar el texto con atributos de contacto. 
3. Opcional: use la barra de herramientas de formato de texto y la configuración de botón del panel izquierdo para personalizar su botón. 
4. Agregue 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ñadir enlace.
   2. Seleccione el Tipo de enlace que desea insertar e introduzca su URL en el campo Enlace objetivo .
   3. Opcional: agregue un título de enlace que aparecerá como consejo sobre la herramienta cuando se coloque el cursor sobre él.
   4. Haga clic en Insertar.
      

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

   1. Cargue su archivo a un proveedor externo como por ejemplo WeTransfer o Dropbox y asegúrese de que su archivo tenga acceso público.
   2. Seleccione la imagen y haga clic  Añadir 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: agregue un título de enlace que aparecerá como consejo sobre la herramienta cuando se coloque el cursor sobre él.
   6. Haga clic en Insertar.
      

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

Logo

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

Redes sociales

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

Recomendamos configurar su Biblioteca de marcas para guardar permanentemente sus enlaces de redes sociales en los activos de su marca. Al arrastrar y soltar el bloque de contenido social en el diseño de su email, los enlaces se completarán automáticamente en los campos de configuración de iconos. 

Para aprender a utilizar el bloque de contenido social, consulte nuestro artículo dedicado Insertar enlaces e iconos de redes sociales en el diseño de emails.

HTML

El bloque HTML le permite agregar su propio código. Puede tanto escribir como copiar y pegar su código. Para ver la vista previa de su código simplemente salga del bloque HTML.

Algunos clientes de email no admiten todo el contenido HTML, ya que el HTML del email no está tan desarrollado como el de la web. Para evitar problemas con su código en el bloque y editor HTML, consulte nuestro artículo dedicado Uso de HTML en sus campañas de email.

Divisor

El bloque divisor agrega una línea horizontal para separar los bloques.

Visualice el video para obtener más información sobre cómo modificar configuraciones como el grosor, el color, la forma, el ancho y el color de fondo del bloque divisor.

Producto

Arrastre y suelte el bloque de contenido del Producto en su Newsletter. Verá la imagen, el título, la descripción y el precio. La URL del producto se vincula 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 agregar un bloque de espacio dentro del diseño de su email. Puede editar el ancho o alto del bloque de contenido espaciador para crear un espacio más o menos grande. El ancho máximo es 100 % y el alto mínimo es 30 px. También puedes cambiar el color del bloque espaciador para crear un bloque de color.

Vídeo 

Use nuestro bloque de contenido de video 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 ¿Puedo insertar videos en mi campaña de email?.

Secciones

Las secciones prediseñadas son diseños predefinidos de bloques de contenido que puede rellenar y personalizar según sea necesario. Puede utilizar secciones de texto e imágenes prediseñadas, pero también puede utilizar encabezados y pies de página prediseñados. 

Para obtener más información, consulte nuestro artículo dedicado Ahorrar tiempo diseñando emails con secciones prediseñadas.

Encabezado y pie de página

Utilice el bloque Header (Encabezado) para agregar el logotipo de su empresa o enlaces relevantes, como enlaces a su sitio web o redes sociales.

El bloque Pie de página es esencial porque brinda a sus destinatarios más información sobre la empresa y les permite cancelar la suscripción o editar sus preferencias. Puede componerse de:

⏩ ¿Qué es lo siguiente?

• Cuarta parte: Configurar el estilo de sus emails
• Quinta parte: Guardar los bloques para usarlos en otras campañas
• Sexta parte: Editar los emails para la visualización en móviles
• Séptima parte: Previsualizar y enviar emails de prueba

🤔 ¿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í.

Si necesitas ayuda con un proyecto usando Brevo, podemos ponerte en contacto con un socio certificado de Brevo.