Editor Drag and Drop - Parte 3: Usar bloques de contenido (texto y enlaces, imágenes, botones, etc.)

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:

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:

  • Estilos (párrafo, títulos, enlace, botón)
  • Fuente
  • Tamaño
  • Color de texto
  • Formato de texto (negrita, cursiva, subrayado, tachado, superíndice y 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 de Drag and Drop para evitar que el formato oculto estropee el contenido. Le recomendamos duplicar o guardar su bloque de contenido para reutilizarlo en el editor Drag and Drop. 
Colores Añadir una personalización Insertar enlaces
DDE_colors_EN.png

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.

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. 

DEE_text-block_EN-US.gif

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. 

DDE_borders_EN-US.gif

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.

💡 Información relevante
Las imágenes compatibles con su editor son .png, .jpeg, .jpg, y .gif con un tamaño máximo de 5 MB.

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

Arrastrar y soltar A través de la biblioteca de contenidos Desde una URL
Agregue fácilmente imágenes al diseño de su email arrastrándolas y soltándolas directamente desde su sistema en el bloque de contenido de Imagen. Sus imágenes se agregarán automáticamente al diseño de su email y se guardarán en su biblioteca de contenido.

dde_drag-drop-image_EN-US.gif

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.

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

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.

mceclip1.png

También puede:

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.

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ñadir enlace o presione ⌘ 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: 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.

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

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. 

logo_EN-US.png

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.

social-content-block_EN-US.png

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.

divider-block_EN-US.png

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

❗️ Importante
La funcionalidad de bloqueo de productos solo está disponible si está utilizando nuestros plugins Shopify, Shopware 5, Shopware 6, o PrestaShop [1.7 onwards]. Para obtener más información, consulte nuestro artículo dedicado sobre cómo Insertar un bloque de producto en el editor Drag and Drop.

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.

spacer-block-example_EN-US.gif

Vídeo 

Use nuestro bloque de contenido de video 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 ¿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:

Información de la empresa

Esta línea se compone del nombre de su empresa y la información de contacto.

Iconos de redes sociales
Puede agregar enlaces a sus redes sociales en el pie de página de su campaña. Para más información, consulte el apartado sobre el bloque de contenidos Redes sociales .
Ver en el enlace del navegador
Esto también se conoce como Enlace espejo. Este es un enlace en el que los destinatarios pueden hacer clic si tienen problemas para ver su email en su cliente de email y desean verlo en la versión del navegador. La mayoría de las plantillas de email no necesitan esta opción si son responsivas, pero siempre puede agregarla si es necesario. Para obtener más información, consulta nuestro artículo dedicado Insertar un enlace Ver en el navegador (espejo) en sus campañas.
Este email se envió a

Esta línea permite a sus destinatarios saber que eran los receptores de este email. También explica por qué recibieron este email.

Enlace de cancelación

Este enlace es obligatorio, ya que permite a sus destinatarios darse de baja de la newsletter de conformidad con el RGPD. Para obtener más información, consulte nuestro artículo dedicado Insertar un enlace de cancelación de suscripción en sus campañas.

Logotipo de Brevo

Esto aparecerá en el pie de página de sus emails de forma predeterminada.

  • Si tiene un plan gratuito, el logotipo siempre se mostrará en el pie de página.
  • Si tiene un plan de pago, puede eliminar el logotipo manualmente de todas las plantillas: seleccione el logotipo y haga clic en el icono de la papelera. Puede crear plantillas sin el logotipo y reutilizarlas para evitar tener que quitar el logotipo a mano cada vez. 
    DDE_delete-logo-new_EN-US.gif

⏩ ¿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: 6 de 83