Saltar al contenido principal

Editor Drag & Drop. Tercera parte: cómo usar los bloques de contenido (Texto & Enlaces, Imagen, Botón, etc.)

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:

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: 

  • Estilo (párrafos, encabezados, enlaces y botones)
  • Fuente
  • Tamaño
  • Color del texto
  • Formato del texto (negrita, cursiva, subrayado, tachado, sobrescrito, subíndice)

DEE_formatting-toolbar-text_EN-US.gif

❗️ Importante
Cuando pegue contenido de otra campaña o editor, su formato, tablas e imágenes no se reflejarán en el editor Drag & Drop para evitar que el contenido se dañe por el formato oculto. Le recomendamos que duplique o guarde su bloque de contenido para reutilizarlo en el editor Drag & Drop editor. 
Colores Personalización Enlaces
DDE_colors_EN.png

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.

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. 

DEE_text-block_EN-US.gif

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.

DDE_borders_EN-US.gif

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

Desde la biblioteca de contenidos Desde una URL
  1. Seleccione el bloque de la imagen y haga clic en Reemplazar en los ajustes de la imagen para que se abra la biblioteca de contenidos.
  2. Localice la imagen que quiera insertar, ya sea de Mis archivos o de Imágenes de archivo.
    • Mis archivos: se trata de las imágenes de su propiedad que haya cargado. Haga clic en Cargar para cargar una o varias imágenes de su sistema. 
    • Imágenes de archivo: estas imágenes son de Pexels y su uso es gratuito.
  3. Seleccione la imagen y haga clic en Insertar en la barra superior.
    Su imagen se insertará en el bloque de 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.

2022-02-11_16-24-57__1_.gif

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.

mceclip1.png

También puede:

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.

Redirigir a una página Redirigir a un archivo

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

  1. Seleccione la imagen y haga clic en icon-add-link.png Añada el enlace o pulse ⌘ o CTRL + K.
    image-add-link.png
  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.

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 icon-add-link.png 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.
      mceclip1.png

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. 

logo-block_EN-US.jpg

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.

💡 Información relevante
Si ya ha añadido enlaces a las redes sociales en la biblioteca de marca, los enlaces se rellenarán automáticamente en los campos de configuración de los iconos. Para obtener más información, consulte nuestro artículo dedicado Diseñar automáticamente sus e-mails con sus recursos de marca usando la Biblioteca de marca.
  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.

divider-block_EN-US.png

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:

Información sobre la empresa

Esta línea está compuesta por el nombre de su empresa y la información de contacto. 

Iconos de las redes sociales
Puede añadir enlaces a sus redes sociales en el pie de página de su campaña. 
Para más información, consulte la sección sobre el bloque de contenido de Redes sociales.
Enlace para abrir en el navegador
También se conoce como «Mirror Link». Se trata de un enlace en el que los destinatarios pueden hacer clic si tienen algún problema para ver su e-mail en su proveedor de e-mail y les gustaría verlo en el navegador. La mayoría de las plantillas de e-mail no necesitan esta opción si son responsivas, pero puede añadirlo si quiere. Para obtener más información, consulte nuestro artículo Inserte un enlace Ver en navegador (de espejo) en las campañas.
Información sobre el destinatario del e-mail

Esta línea permite a los destinatarios saber que este e-mail iba dirigido a ellos. También explica por qué han recibido este e-mail. 

Enlace de cancelación de suscripción

Este enlace es obligatorio, ya que permite a los destinatarios cancelar la suscripción a su newsletter en cumplimiento del RGPD. Para obtener más información, consulte nuestro artículo Insertar un enlace de cancelación de suscripción en sus campañas.

Logo de Brevo

Aparecerá por defecto en el pie de página de sus e-mails.

  • Si tiene un plan gratuito, el logotipo aparecerá siempre en el pie de página.
  • Si tienes un plan pago, puedes eliminar el logo a mano de todas las plantillas: selecciona el logo y haz clic en el ícono de la papelera. Para evitar tener que quitar el logo a mano cada vez, puedes crear plantillas sin el logo y reutilizarlas.
    DDE_delete-logo-new_EN-US.gif

Producto

❗️ Importante
La función de Bloque de productos está disponible únicamente si está usando nuestros plugins de Shopify, PrestaShop [1.7 en adelante], Shopware 5 o Shopware 6. Si quiere más información puede consultar nuestro artículo detallado sobre cómo Insertar un bloque de producto en el editor Drag & Drop.

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.

DDE_spacer_EN-US.gif

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:

DDE_insert-video-block_EN-US.gif

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

⏩ ¿Qué es lo siguiente?

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

💬 ¿Fue útil este artículo?

Usuarios a los que les pareció útil: 1 de 17