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:

• Primera parte: descripción general
• Segunda parte: diferencias entre los bloques de diseño y los de contenido
• Tercera parte: cómo usar los bloques de contenido -> SE ENCUENTRA AQUÍ
• Cuarta parte: configurar el estilo de sus e-mails
• Quinta parte: guardar los bloques para usarlos en otras campañas
• Sexta parte: editar los e-mails para la visualización en móviles
• Séptima parte: previsualizar los e-mails y enviar pruebas

Información relevante

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: 

Colores Eliminar formato Personalización Enlaces

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. 

Puede eliminar fácilmente el formato seleccionando el texto y haciendo clic en el icono de Eliminar formato:

Haga clic en 👤 para insertar un elemento de personalización en su texto, como el nombre de los destinatarios, por ejemplo.
Para más información, consulte cómo personalizar su texto con atributos de contacto.

Para insertar un enlace en su texto, seleccione el texto, haga clic en el icono Enlace y rellene los datos en la ventana Insertar/editar enlace. El título del enlace corresponde al texto que aparece cuando se pasa el ratón por encima del enlace. 

Puede seleccionar diferentes tipos de enlaces:

• Enlace absoluto (URL)
  Esta es la opción básica para los enlaces, elíjala para añadir una URL.
• Ver en el navegador
  El enlace de espejo puede añadirse al encabezado de sus campañas. Es un enlace en el que los destinatarios pueden hacer clic si tienen problemas para ver su e-mail en su bandeja de entrada y quieren abrirlo como una página web. No es obligatorio tener un enlace de espejo en las campañas.
  ➡️ Para más información, consulte nuestro artículo relacionado sobre los enlaces de espejo.
• Cancelar la suscripción
  El enlace de cancelación de la suscripción se añade automáticamente al pie de página de las campañas. Se trata de un enlace en el que los destinatarios pueden hacer clic para abrir la página de cancelación de suscripción de Sendinblue y dejar de recibir sus e-mails. Tener un enlace de cancelación de la suscripción en las campañas es obligatorio, ya que es esencial para sus contactos y para el buen funcionamiento de las campañas. 
  ➡️ Para más información, consulte nuestro artículo relacionado sobre los enlaces de cancelación de suscripción.
  
• Actualizar sus preferencias
  Sendinblue ofrece un formulario de actualización de perfil para ayudarle a recopilar información actualizada sobre sus suscriptores, como sus datos, preferencias e incluso a qué listas quieren estar suscritos. Le recomendamos que incluya un enlace a este formulario en el pie de página de todos sus e-mails para que los suscriptores puedan compartir sus preferencias con usted.
  ➡️ Para más información, consulte nuestro artículo relacionado sobre los enlaces de actualización de perfil.
  
  💡 Información relevante

  Esta opción se añadirá automáticamente cuando seleccione un formulario en Campaña > Configuración avanzada > Utilizar un formulario de perfil de actualización personalizado como se explica aquí.
  Si esta opción aparece atenuada, deberá activarla en Campañas > Configuración avanzada. Si está utilizando una plantilla, deberá añadir manualmente el enlace al formulario para Actualizar sus preferencias.
  
• Enlace de e-mail (mailto)
  Añada un enlace a una dirección de e-mail.
• Clic para llamar a un número de teléfono
  Añada un enlace a un número de teléfono.
• Anclaje para enlaces relativos
  Cree un anclaje en algún lugar de su campaña y luego utilice la opción de enlace relativo para añadir un enlace a ese anclaje. 
• Enlace relativo (para anclajes)
  Una vez que haya creado su anclaje en la campaña, utilice esta opción para vincular el anclaje.
  Por ejemplo, volver a una parte específica de la newsletter en la parte superior de la página.

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

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. 

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.

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.

Añadir una 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.

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.

También puede editar una imagen desde la Biblioteca de contenidos. Basta con que seleccione la imagen y haga clic en Editar.

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.

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.

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:

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?

• Cuarta parte: configurar el estilo de sus e-mails
• Quinta parte: guardar los bloques para usarlos en otras campañas
• Sexta parte: editar los e-mails para la visualización en móviles
• Séptima parte: previsualizar los e-mails y enviar pruebas

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