Saltar al contenido principal

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

El nuevo editor Drag & Drop Editor [Nuevo diseño] 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 nuevo editor Drag & Drop [Nuevo diseño] en las siguientes partes:

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

Colores Eliminar formato 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.

💡 Información relevante
¡Hemos añadido sus Colores de marca a sus plantillas!
Utilizamos la API de Brand Fetch para obtener toda la información disponible sobre su marca y rellenar automáticamente el logotipo, los colores y las redes sociales si están disponibles para personalizar las 4 plantillas de diseño base. 

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

Hay ajustes adicionales en el panel izquierdo que son 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.

También puede añadir bordes a sus bloques de Imagen utilizando el ajuste de Bordes en el 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.

DEE_image-settings_EN-US.gif

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. También puedes crear carpetas para organizar tus imágenes y encontrarlas rápidamente. 
    • Imágenes de archivo: estas imágenes son de Unsplash 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 editar una imagen desde la Biblioteca de contenidos. Basta con que seleccione la imagen y haga clic en Editar.

mceclip2.png

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. Haga clic en el icono de Enlace para añadir un enlace a su botón y redirigir a los destinatarios a la página que quiera.

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.

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. 

Si ya ha añadido enlaces a las redes sociales en Campañas > Ajustes > Google Analytics y redes sociales, los enlaces se rellenarán automáticamente en los campos de configuración de los iconos.

💡 Información relevante
Es probable que hayamos añadido los enlaces de las redes sociales de su marca a sus plantillas.
Utilizamos la API de Brand Fetch para obtener toda la información disponible sobre su marca y rellenar automáticamente el logotipo, los colores y las redes sociales si están disponibles para personalizar las 4 plantillas de diseño base.

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 Limitaciones al usar HTML en las campañas de e-mail.

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:

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 Sendinblue

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

Si está utilizando los plugins de Shopify o Shopware con nuestro nuevo editor de Drag & Drop, verá el bloque de contenido de Productos.

  1. Arrastre y suelte el bloque de contenido de Productos a su newsletter.
  2. Seleccione un producto usando la barra de búsqueda.
  3. Haga clic en Insertar.

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.

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 (Nuevo).

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