Saltar al contenido principal

Editor Drag & Drop. Cuarta parte: cómo configurar el estilo de sus emails

El editor Drag and Drop facilita el diseño de emails con un aspecto profesional. Ofrece más opciones para personalizar su email y también garantiza que se muestre a la perfección en cualquier cliente de email y dispositivo.

En este artículo, veremos cómo puede establecer los estilos para toda la plantilla desde la sección Design (Diseño). Por ejemplo, puede establecer el color y el estilo del enlace (negrita, cursiva) que se aplicará a todos los enlaces que añada a la plantilla. De esta manera, ahorrará tiempo, ya que no necesita definir los estilos por separado para cada enlace.

Hemos dividido los artículos relacionados con el editor Drag and Drop en varias partes, entre ellas:

Para empezar, eche un vistazo a nuestro vídeo detallado sobre el uso de la pestaña Design (Diseño) en el editor Drag and Drop 🚀.

¿Cuáles son las diferentes configuraciones de la pestaña Design (Diseño)?

La configuración se divide en cinco partes: Brand library (Biblioteca de marcas)Template (Plantilla), Text Appearance (Aspecto del texto), Buttons (Botones) y Spacing (Espaciado).

Brand library (Biblioteca de marcas)

brand-library_EN-US.png Configure la Biblioteca de marcas de forma que todas las plantillas nuevas que seleccione tengan sus propiedades de marcas, como el logotipo, los colores, las fuentes y los enlaces a las redes sociales. Además de ahorrarle tiempo, crear su Biblioteca de marcas 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 activos de la imagen de marca a través de la Biblioteca de marcas.

Template (Plantilla)

Desde aquí se puede configurar el fondo y el ancho de los bloques de contenido.

dde_template-settings_EN-US.png

Background color (Color de fondo)

Elija un color de fondo que se aplicará a todos los bloques de contenido de su campaña, en todo el ancho. Si solo desea que el cuerpo tenga un color de fondo, elija un color en la configuración Body color (Color del cuerpo) a continuación.

dde_background-color_EN-US.png

Background image (Imagen de fondo)

Puede añadir una imagen de sus archivos o las imágenes de archivo. Para ello, haga clic en Add background image (Añadir imagen de fondo), o añada la imagen directamente desde la opción Insert image from URL (Insertar imagen desde URL) pegando el enlace en la imagen en este campo. Puede ajustar la posición, la repetición y el tamaño de la imagen, según sea necesario.

dde_background-image_EN-US.png

Body color (Color del cuerpo)

Esta opción permite añadir un color de fondo solo al cuerpo, como en el ejemplo de abajo.

dde_body-color_En-US.png

Body Width (Ancho del cuerpo)

Establezca el ancho del bloque de contenido en píxeles. De manera predeterminada, el ancho se establece en 600 píxeles. Cuando cambie el ancho, el diseño y los bloques de contenido se redimensionarán de forma automática. El ancho del cuerpo está representado por la flecha amarilla en la siguiente imagen.

dde_body-width_EN-US.png

View in browser (Ver en el navegador)

Active esta opción para permitir que los destinatarios vean una versión en línea de su campaña de email. Esta funcionalidad es útil en el caso de que alguna vez tengan problemas para mostrarla en sus clientes de email. Se añadirá automáticamente un enlace View in browser (Ver en el navegador) en la parte superior de su email. Para obtener más información, consulte nuestro artículo dedicado Inserte un enlace Ver en el navegador (espejo) en sus campañas.

DEE_view-browser_EN-US.png

Text appearance (Apariencia del texto)

💡 Información relevante
Configure su Biblioteca de marcas para elegir las fuentes que se usarán de forma predeterminada en los encabezados y párrafos. Para obtener más información, consulte nuestro artículo dedicado Guarde los activos de su marca en la Biblioteca de marcas para crear diseños de email unificados.

Puede elegir el aspecto del texto de todos los estilos (párrafos, encabezados, etc.). Para cada estilo, establezca la familia de fuentes, el tamaño y el color de la fuente en las listas respectivas. Haga clic en uno de los nombres de fuente y en + Manage fonts (+ Administrar fuentes) si desea añadir fuentes de Google Fonts a sus listas, o bien elegir fuentes alternativas en el caso de que sus destinatarios no puedan ver la fuente que ha elegido primero. 

DDE_text-appearance-fonts_EN-US.gif

En Common settings (Configuración común), podrá elegir el alto de línea de las opciones predeterminadas o crear un alto personalizado. Además, podrá elegir la dirección de escritura (de izquierda a derecha o de derecha a izquierda).

Además, puede cambiar la fuente de una parte específica de su diseño. Para ello, debe seleccionar el texto y eligir la fuente en la barra de formato que aparece en la parte superior del bloque de texto.

❗️ Importante
Si ha cambiado la fuente de forma manual mediante la selección del texto y el uso de la barra de formato, la fuente no cambiará cuando elija una fuente de Design (Diseño) > Text Appearance (Aspecto del texto).

Buttons (Botones)

A partir de ahí, puede definir el estilo por defecto de todos los botones de su newsletter. Si quiere cambiar el aspecto de todos los botones rápidamente, ¡hágalo desde aquí!
Puede elegir el estilo y el tamaño de la fuente, el ancho, el radio, el color y el tamaño y el color del borde.  

mceclip0.png

Spacing (Espaciado)

El ajuste de Spacing (Espaciado) está disponible en la pestaña Design (Diseño), pero también al hacer clic en un bloque de Style (Estilo). Permite añadir Padding (Relleno) que es el espacio entre el elemento y el borde. Está alrededor de los cuatro lados del contenido y el tamaño de cada lado se puede cambiar.

Active el botón Padding (Relleno) para activarlos o desactivarlos con un solo clic. Elija qué tamaño de relleno o margen le gustaría añadir para cada lado del contenido usando los botones +/- o escribiendo el tamaño deseado en el campo de texto. 

DEE_padding_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: 4 de 25