Editor Drag & Drop (Clásico). Cuarta parte: elementos de diseño (títulos, textos, imágenes, botones y espacios)

Los elementos de diseño son elementos individuales que puede añadir a su newsletter. Si quiere, también puede utilizar los elementos más complejos que hemos creado y que reúnen imágenes, título, texto y botones en Elementos de contenido. En este artículo le enseñaremos a añadir elementos de diseño (títulos, textos, imágenes, botones y espacios) a su newsletter y a modificar su configuración. 

En este artículo, veremos los siguientes elementos:

Título y texto

Con los elementos de Título y Texto, puede añadir fácilmente información a sus campañas de e-mail y, a continuación, aplicar diferentes estilos y ajustes.

Title_and_Text.gif

Dar formato a sus títulos y textos con la barra de herramientas

Puede modificar el formato del texto (negrita, cursiva, subrayado, tachado, etc.) haciendo clic en el texto y usando la barra de herramientas de formato:

Toolbox2.png

El vídeo está en inglés, pero puede activar los subtítulos automáticos en español.

Cómo modificar los ajustes de los elementos

Los ajustes de los elementos varían en función de cada uno de ellos. Puede acceder a estos haciendo clic en el elemento (Título o Texto en este caso). En la parte derecha, aparecerán los ajustes de los elementos y podrá modificar las siguientes opciones:

Element_settings.png
  1. Familia de fuentes
  2. Alinear título (la alineación del Texto puede cambiarse desde la barra de herramientas de formato)
  3. Color de los enlaces
  4. Si los enlaces aparecerán subrayados o no

💡 Información relevante
Si quiere añadir su propia fuente, consulte nuestro artículo Importar fuentes tipográficas al Editor de newsletters responsivas.

Cómo añadir un enlace a su texto

Añadir enlaces a su texto no puede ser más fácil. Use la barra de herramientas de cada elemento de texto para convertir cualquier parte del texto de su campaña por e-mail en un enlace.

  1. Añada el elemento de Texto o el Título a su diseño.
  2. Sustituya el texto Lorem ipsum por el suyo propio.
  3. Seleccione el texto al que quiera añadir el enlace.
  4. Haga clic en el icono del Enlace en la barra de herramientas de formato.
  5. Deje Tipo de enlace como URL e introduzca la URL en el campo correspondiente.
  6. Haga clic en OK.

add_a_link_EN.png

En la pestaña de Destino, puede elegir el destino de su enlace (abrir una nueva ventana, en la misma ventana, etc.).

Para eliminar el enlace, seleccione el texto y haga clic en el icono de Eliminar el enlace que hay a la derecha del icono del enlace.

Añadir un enlace de contacto

Al igual que puede añadir un enlace, también puede añadir un e-mail de contacto en sus mensajes para recibir respuestas de los suscriptores cuando hagan clic en el enlace.

  1. Añada el elemento de texto o título a su diseño.
  2. Sustituya el Lorem Ipsum por su propio texto.
  3. Seleccione la dirección de e-mail a la que quiera añadir el enlace.
  4. Seleccione e-mail como Tipo de enlace.
  5. Introduzca la dirección de e-mail (obligatoria) y el asunto/cuerpo del mensaje (opcional).
    Rellene los campos de Asunto del mensaje y Cuerpo del mensaje si quiere que el asunto y el cuerpo del e-mail aparezcan completados automáticamente cuando alguien haga clic en el enlace para enviar un e-mail.
  6. Haga clic en OK.

add_mailto_EN.png

 

Información relevante
Para añadir un botón con un e-mail de contacto, introduzca mailto:contacto@miempresa.com en el campo de Enlace en las opciones del botón.

Añadir un color o una imagen de fondo

Si desea añadir un color o imagen de fondo a los elementos de título/texto, debe ir a las opciones del bloque haciendo clic en el icono del lápiz. Consulte todo el proceso en la sección de Color o imagen de fondo del artículo Editor and Drop Editor: opciones de los bloques y de los elementos.

Imagen

Con Sendinblue puede subir, añadir y editar imágenes rápidamente en su campaña de e-mail. Es una manera perfecta de personalizar el diseño de sus e-mails y que resulten más atractivos.

Tiene dos maneras diferentes de añadir imágenes a sus e-mails:

Describiremos estos dos métodos en las siguientes secciones. El vídeo está en inglés, pero puede activar los subtítulos automáticos en español.

Añadir una imagen desde la Galería de imágenes

  1. Arrastre y suelte el elemento de imagen en su e-mail.
  2. Haga clic en la imagen.
    La Galería de imágenes aparecerá en el menú izquierdo.
  3. Para añadir una imagen a la Galería de imágenes:
    • Haga clic en + Añadir una imagen en la parte superior derecha.
    • O arrastre y suelte una imagen en el menú.
  4. Cuando haya terminado de cargarse, arrastre y suelte su imagen en el elemento de imagen.

Add_image_from_gallery.gif

💡 Información relevante
Para obtener la URL de su imagen, vaya a la Galería de imágenes del menú izquierdo, haga clic con el botón derecho en la imagen y copie la dirección/URL de la imagen.

Añadir una imagen desde una URL

  1. Arrastre y suelte el elemento de imagen a su e-mail.
  2. Haga clic en la imagen.
    Los ajustes de la imagen aparecerán a la derecha.
  3. En la parte inferior, en Fuente de la imagen, marque Desde URL.
  4. Copie la URL de su imagen en el campo correspondiente.

La imagen no aparecerá en el editor pero podrá acceder a la vista previa cuando envíe un e-mail de prueba.

Add_image_from_URL.gif

Editar los ajustes de la imagen

Desde el menú de la izquierda, podrá acceder a diferentes ajustes de su imagen. Haga clic en la imagen para acceder a este panel:

param_image_FR.png
  1. Enlace de la imagen: si quiere que se pueda hacer clic en la imagen, puede añadir un enlace en este campo.
  2. Texto alternativo: se trata del texto que aparecerá en lugar de la imagen cuando el usuario o la interfaz del proveedor de e-mails no permitan que se muestren.
  3. Borde: añada un borde a la imagen y elija el color y el grosor.
  4. Redondear el borde de la imagen: puede hacer que cualquier elemento tenga las «esquinas redondeadas» gracias a este ajuste.
  5. Alineación de la imagen: puede alinear la imagen a la derecha, al centro o a la izquierda.
  6. Fuente de la imagen
    • De la galería: elija su imagen en la galería de la izquierda.
    • Desde URL: inserte la URL de la imagen.

Image_element_settings.gif

Editor de fotos

Nuestro editor Drag & Drop cuenta con un editor de fotos con el que podrá recortar su imagen, añadir filtros, texto o diseños de texto. Para acceder al editor de fotos, haga clic en la imagen y luego en el botón de Modificar en la esquina superior izquierda de la imagen.

photo_editor.png

¿Cómo cambiar el tamaño de una imagen?

  1. Haga clic en Modificar en la esquina superior izquierda de la imagen.
  2. Vaya a Transformar, en la esquina superior izquierda del editor fotográfico.
  3. Seleccione Personalizar.
  4. Marque la casilla que hay junto a Bloquear la resolución.
  5. Cambie el ancho o el alto de la imagen, el resto de ajustes se adaptarán automáticamente para mantener la misma proporción.
  6. Haga clic en Guardar.
  7. La imagen con el nuevo tamaño se añadirá a la galería y podrá arrastrarla y soltarla en el elemento de imagen que quiera.

how_to_resize_an_image_gif_2.gif

Botón

Puede usar nuestro elemento de Botón para enlazar a un sitio web o archivo de descarga. Añadir botones a sus campañas de e-mail es una manera genial de destacar los enlaces específicos en los que quiere que la gente haga clic. 

Button_settings.png
  1. Enlace: inserte su URL aquí. Para añadir una dirección de e-mail de contacto, escriba mailto:contacto@miempresa.com
  2. Familia de fuentes: fuente del texto del botón.
  3. Color del botón: seleccione el color del botón.
  4. Color del texto del botón: seleccione el color del texto de su botón.
  5. Altura del botón: cambie la altura del botón.
  6. Tamaño de la fuente del botón: cambie el tamaño del texto del botón.
  7. Redondeado del botón: añada esquinas redondeadas a los botones.
  8. Alinear botón: seleccione la alineación del botón (izquierda, centro, derecha).
  9. Borde: añada un borde a la imagen y seleccione el color y el grosor.

Button.gif

El vídeo está en inglés, pero puede activar los subtítulos automáticos en español.

Espacios

Si añade espacios al diseño la campaña será más agradable de leer. El elemento de Espaciado adoptará automáticamente el mismo color que el fondo de la página, únicamente puede cambiar la altura del elemento. 

También puede gestionar todos los espacios directamente dentro de los elementos (texto, botón, imagen, etc.) en las opciones del bloque haciendo clic en el icono del lápiz en la esquina superior derecha del elemento. Para obtener más información sobre los espacios, consulta nuestro artículo Editor Drag & Drop  (Clásico): opciones de los bloques y los elementos.

⏭️ ¿Qué es lo siguiente?

🤔 ¿Tiene alguna duda?

Si tiene alguna pregunta, no dude en crear un ticket desde su cuenta para ponerse en contacto con nuestro equipo de asistencia. Si todavía no tiene una cuenta, puede contactar con nosotros aquí.