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:

• Enlace absoluto (URL)
  Esta es la opción básica para enlaces, elíjala para agregar una URL.
• Ver en el navegador
  El enlace espejo se puede agregar al encabezado de sus campañas. Es un enlace en el que los destinatarios pueden hacer clic si tienen problemas para ver su email en su bandeja de entrada y desean abrir su email como una página web. Tener un enlace espejo en las campañas no es obligatorio.
  ➡️ Para obtener más información, consulte nuestro artículo dedicado a enlaces espejo.
• Cancelar suscripción
  El enlace para cancelar la suscripción se agrega automáticamente al pie de página de sus campañas. Es un enlace en el que los destinatarios pueden hacer clic para abrir su página de cancelación de suscripción de Brevo y dejar de recibir los emails. Tener un enlace de cancelación de suscripción en sus 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 nuestro artículo dedicado a los enlaces para cancelar 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 detalles, preferencias e incluso a qué listas desean suscribirse. Recomendamos incluir un enlace a este formulario en el pie de página de todos sus emails para que los suscriptores puedan compartir sus preferencias con usted. 
  ➡️ Para obtener más información, consulte nuestro artículo dedicado a Actualizar enlaces de perfil.
  
  💡 Información relevante

  Esta opción se agregará automáticamente cuando seleccione un formulario en Campaña > Configuración avanzada > Usar un formulario de actualización del perfil personalizado como se explica aquí.
  Si esta opción está atenuada, debe activarla en Campañas > Configuración avanzada. Si está utilizando una plantilla, debe agregar manualmente el enlace al formulario Actualizar sus preferencias.
• 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.
• 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 (para anclas)
  Una vez que haya creado un ancla en su campaña, use esta opción para vincular al ancla.
  Por ejemplo, volver a una parte específica del newsletter 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 azul en la esquina inferior derecha de ésta y se actualiza automáticamente mientras cambia el tamaño.
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.

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.

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

Visualice el vídeo para obtener más información sobre cómo modificar la configuración del bloque de redes social.

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.

Estilo 

Los bloques de contenido de estilo vienen predefinidos y los puede cumplimentar con otros bloques de contenido. Puede elegir entre tres bloques de contenido de diferentes estilos. Estos bloques se explican detalladamente en la Diferencias entre los bloques de diseño y los de contenido.

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.

Encabezado y pie de página

Utilice el bloque Encabezado para agregar el logotipo de su empresa.

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:

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?.

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