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, le mostraremos cómo utilizar los bloques de secciones y contenido para empezar a diseñar su email.

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

• Primera parte: descripción general del editor
• Segunda parte: diferencias entre bloques de estilo y de contenido -> SE ENCUENTRA AQUÍ
• Tercera parte: cómo usar los bloques de contenido
• Cuarta parte: cómo configurar el estilo de los emails
• Quinta parte: guardar los bloques para volver a usarlos en los emails
• Sexta parte: cómo editar los emails para que se muestren correctamente en móviles
• Séptima parte: restaurar, previsualizar, probar y guardar el diseño del email

¿Qué es una sección?

Un bloque de Estilo es una estructura que tiene una o más columnas en las que es posible añadir bloques.

En el ejemplo que mostramos a continuación, la sección (en verde) contiene 2 bloques de contenido (en rosa) en 2 columnas diferentes: 2 imágenes y 2 bloques de texto.

En el editor de email, hay dos tipos de secciones:

• Custom sections (Secciones personalizadas)
  Las secciones personalizadas son las secciones que crea usted mismo arrastrando y soltando bloques de contenido. 
• Pre-designed sections (Secciones prediseñadas)
  Las secciones prediseñadas son diseños pregenerados de diferentes bloques de contenido y le permiten crear fácilmente diseños de email sin necesidad de conocimientos de diseño. 

Siempre tiene la posibilidad de añadir, eliminar o cambiar el tamaño de las columnas haciendo clic en el bloque de Estilo y utilizando los controles deslizantes y los botones +/-:

Configuración de sección

Puede cambiar el nombre de su sección haciendo clic en el icono del bolígrafo junto al título.

Seleccione una sección para que aparezcan los siguientes ajustes en el panel de navegación izquierdo: 

Fondo Ajustes del bloque Espaciado

Con esta configuración, puede establecer el color de fondo y usar Apply background on full width (Aplicar fondo en el ancho completo). También puede hacer clic en Add a background image (Añadir una imagen de fondo) para mostrar la biblioteca de contenido y usar sus archivos o imágenes de archivo como fondo. Si desea utilizar una imagen directamente de Internet, pegue el enlace a esta imagen en el campo Insert image from URL (Insertar imagen desde URL).

El ajuste Vertical alignment (Alineación vertical) permite cambiar la posición de los contenidos dentro del bloque: arriba, en medio o abajo.

El ajuste Spacing (Espaciado) permite añadir:

• Space between columns (Espacio entre columnas) en la sección seleccionada utilizando las flechas arriba y abajo o introduciendo el espaciado que desee.
• 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 modificar.
• Margin (Margen), que es el espacio entre el borde y el siguiente elemento de su diseño. Está alrededor de los lados superior e inferior del contenido y el tamaño de cada lado se puede cambiar.

Active el botón Padding (Relleno) o Margin (Margen) 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.

Acciones de sección

Puede mover una sección verticalmente: coloque el cursor sobre la sección y manténgala presionada mientras la mueve a la ubicación deseada. La línea azul le mostrará a dónde se moverá el bloque.

Cuando se selecciona un bloque, aparecen varias acciones disponibles en la esquina inferior izquierda del mismo:

1. Move (Mover)
   Arrastre y suelte la sección en el diseño del email.
2. Move up (Mover hacia arriba) y Move down (Mover hacia abajo)
   Mueva su sección hacia arriba o hacia abajo en su email. 
3. Duplicate (Duplicar) (⌘ o Ctrl + D) 
   Una vez que haya seleccionado todos los ajustes para su bloque, puede duplicarlo. Esto le ahorrará tiempo a la hora de diseñar su email.
4. Save (Guardar)
   Guarde una sección para reutilizarla en otro email. Sus bloques aparecerán en la pestaña My Content (Mi contenido) del panel izquierdo. Para más información, consulte nuestro artículo dedicado Guardar contenido para usarlo en otros emails.
5. Delete (Eliminar) (⌫ + ↵)
   Puede eliminar un bloque de Estilo usando esta opción.
6. Visibilidad del contenido (Mostrar u ocultar)
   Oculte o muestre una sección añadiendo condiciones o en función del dispositivo de su destinatario. Para obtener más información, consulte nuestros artículos dedicados Mostrar u ocultar contenido en función de los atributos de contacto y Mostrar u ocultar contenido en función del tipo de dispositivo. 
7. Repeatable content (Contenido repetible)
   Puede repetir secciones en sus emails de recibos o carritos abandonados. Para obtener más información, consulte nuestro artículo dedicado Repita una serie de contenido en sus emails.

¿Qué es un bloque de contenido?

Los bloques de contenido son diferentes tipos de contenido que puede añadir a sus emails. Puede arrastrar los bloques de contenido dentro de las secciones.

Los bloques de contenido disponibles son: 

Título	Texto	Imagen	Vídeo
Botón	Logotipo	Redes sociales	HTML
Divisor	Producto	Navegación	Espaciador

Cada bloque de contenido tiene sus propios ajustes que pueden personalizarse en función de las necesidades, al hacerlo, se eliminará la configuración predeterminada de la plantilla. Puede mover bloques de contenido de la misma manera que secciones y también puede ocultar o mostrar, duplicar, guardar y eliminar bloques de contenido. Para obtener más información, consulte nuestro artículo dedicado Cómo usar bloques de contenido.

Estas acciones adicionales (enlace, vista previa, reemplazar imagen, etc.) cambiarán en función del tipo de bloque que esté editando. En el ejemplo que aparece a continuación se muestran las acciones para los bloques de imágenes (en rosa) y para los bloques de texto (en verde):

Bloque de contenido de imagen
Bloque de contenido de texto

⏩ ¿Qué es lo siguiente?

• Tercera parte: cómo usar los bloques de contenido
• Cuarta parte: cómo configurar el estilo de los emails
• Quinta parte: guardar los bloques para volver a usarlos en los emails
• Sexta parte: cómo editar los emails para que se muestren correctamente en móviles
• Séptima parte: Cómo previsualizar y enviar emails de prueba

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

Si necesitas ayuda con un proyecto usando Brevo, podemos ponerte en contacto con un socio certificado de Brevo.