Recibe actualizaciones
por Messenger
7 min.

Nos gustan mucho los email coloreados. Un estilo que nos encanta (y lo vemos mucho) son los bloques de colores: la mitad del e-mail tiene un fondo de color intenso, y la otra mitad es blanca. Es una técnica muy sencilla con un largo recorrido en el correo electrónico. En este tutorial, te mostraremos cómo construir un e-mail en bloques de color fácilmente y en pocos pasos. También exploraremos cómo:

  • Añadir varios colores HTML de fondo en un e-mail
  • Establecer varias columnas
  • Formatear el texto (color, tamaño, altura de la línea, enlaces, etc.)
  • Adecentar un e-mail con espaciados y rellenos de precisión

Inspiración: Offscreen Dispatch

Offscreen es una revista impresa y un boletín semanal “con un punto de vista sobre la tecnología y la web reflexivo y centrado en el ser humano”. Admiramos desde siempre el estilo simple y característico de su boletín, Offscreen Dispatch. Offscreen usa en cada e-mail la misma técnica de bloques de color, con un efecto muy lindo: hace que el e-mail parezca la página de una revista. La parte superior, donde el diseñador web Kai Brach escribe una nota a los suscriptores, es siempre rosa. El resto del e-mail es siempre blanco. Así:

El email de Offscreen Dispatch

No tiene particularmente llamativo, ni arte ni fotografía, pero el dinamismo del esquema, el texto bien formateado y el diseño en bloques de color dan personalidad al e-mail.

Es un diseño fácil de crear, y en el editor BEE no requiere escribir código. ¡Veámoslo en detalle! Abre el editor BEE y sigue los pasos.

Paso 1: Construye la estructura

Abre el editor BEE y empieza con una plantilla básica de una columna sin nada más.

Antes de empezar a arrastrar elementos a la estructura, tomemos un minuto para examinar el e-mail de Offscreen Dispatch e identificar los componentes del diseño. En esta versión podemos ver el formato:

Construir la estructura del email

El e-mail alterna estructuras de una columna y dos columnas, que son fáciles de montar en BEE.

Arrastra las conformaciones de fila correspondientes desde el menú Estructuras a la derecha. Para este e-mail necesitaremos las dos opciones de arriba:

Las estructuras en BEE

Veamos qué aspecto tiene nuestro e-mail con las estructuras de filas en su sitio:

Las estructuras de filas

Paso 2: Dispón bloques de contenido con texto/imágenes

Ahora que tenemos montado el esqueleto base de nuestro e-mail, arrastra los bloques de contenido que se correspondan con el tipo de contenido (texto y/o imagen) que quieres en cada sección. Hecho esto, pega el texto y arrastra hasta allí las imágenes.

Veamos cómo situar el contenido en tres pasos. Empezamos con la primera línea, el encabezado:

(1) Arrastra una estructura de dos columnas:

Arrastrar una estructura de dos columnas

(2) Añade bloques de texto a la izquierda y un bloque de contenido de imagen a la derecha:

Añadir bloques de texto

(3) Suelta el texto y la imagen:

Soltar el texto y la imagen

Repasemos cada fila para organizar el contenido. Aquí está nuestro e-mail con los restantes bloques de contenido en su sitio:

El e-mail con los restantes bloques

Por último, añadiremos texto:

El e-mail con los textos

¡Ya está! A continuación, formateamos.

Paso 3: Formatea los colores de fondo

Ahora viene la parte divertida. Observa qué fácil es crear el efecto de bloques de color.

Primero, para obtener el tono exacto de rosa pálido del e-mail de Offscreen Dispatch’s, usamos HTML-Color-Codes.info para identificar el color de la imagen del encabezado.

Como formatear los colores de fondo

HTML Color Codes identifica el color con el código hexadecimal #F5BBA2. Para dar el color exacto a la primera fila:

  1. Seleccionamos la fila
  2. En el menú de la derecha vamos a Color de fondo de la fila
  3. Pegamos el código del color (o lo seleccionamos manualmente)

¡Ya tenemos el color liso de lado a lado! Completamos ahora el bloque de color rosa. Simplemente seleccionamos la siguiente fila y volvemos a hacer lo mismo.

Completar el bloque de color rosa

Ya tenemos un e-mail de bloques de color. Sí: es así de fácil.

Paso 4: Formatea el texto

Finalicemos este diseño de e-mail con algunos toques de formato. Empezaremos con el texto.

Elige una fuente predefinida para el e-mail

En lugar de pasar por cada uno de los bloques de contenido para elegir la fuente para el e-mail, ve al menú de Ajustes a la derecha y selecciona la fuente a utilizar en todo el mensaje.

Elegir una fuente predefinida

Después podrás cambiar la fuente del encabezado o de las secciones que selecciones.

Ajusta los tamaños de la fuente

Toca cualquier bloque de texto y usa el menú desplegable para ajustar el tamaño de fuente.

Ajustar los tamaños de la fuente

Personaliza los colores del texto

Usa ese mismo menú para elegir los colores que prefieras. Y, de nuevo, usa el mismo código de color para obtener el tono que coincida exactamente.

Personalizar los colores del texto

Formatea el estilo del enlace

¡No olvides los enlaces! En el mismo menú Ajustes en que elegiste la fuente predefinida para el cuerpo de texto, puedes elegir el estilo para el enlace. En este caso, elegiremos el negro.

Formatear el estilo del enlace

Altura de la línea

Asegúrate de que tu cuerpo de texto tiene espacio para respirar. En cualquier bloque de texto que edites, ajusta la altura de línea del texto.

Seleccionar la altura de la línea

Sugerencia: duplica la fila

Si la formatación del texto de una fila en particular te ha llevado mucho tiempo, cuando pases a otra fila puedes simplemente duplicarla en lugar de hacer de nuevo todos los ajustes manualmente.

Toca la fila que quieres copiar. Haz entonces clic en la imagen de doble recuadro en el extremo derecho.

Duplicar la fila

De ese modo copiarás tu fila Hecho esto, simplemente arrástrala tomando el icono direccional a la izquierda, para colocar la nueva fila en el e-mail.

Paso 5: Adjusta los rellenos

¡Último paso! Es un paso importante. Antes de terminar el e–mail, fíjate en los espacios entre tus bloques de contenido. Si todavía hay demasiados huecos —o si hay zonas donde no queda espacio para respirar—es muy fácil de ajustar.

Por ejemplo, hay un hueco entre “Offscreen” y “Dispatch” en el encabezado del borrador de tu e-mail. Para ajustarlo, toca en cualquiera de los bloques de contenido, desciende hasta Propiedades de columna en el menú de la derecha y asegúrate de que en Relleno esté activado Más opciones. Ahí podrás disminuir (o aumentar) el relleno en cualquier lado de cualquier contenido.

Adjustar los rellenos

Paso 6: Controla la vista previa del e-mail de bloques de color terminado

Ya está—solo un último paso (esta vez de verdad es el último) . Cuando diseñes un e-mail, controla la vista previa a medida que lo vas haciendo, para asegurarte del aspecto que cobra, tanto en PC como en móvil. Aquí podemos ver la forma que está tomando el nuestro:

Controlar la vista previa del e-mail

Simple, rápido, con un gran impacto visual. Háznos saber en los comentarios si has probado esta técnica y qué resultados has obtenido.

¿Te gustó este artículo? Tenemos muchos otros para ti.

Te mantendremos actualizado sobre las citas de marketing digital.

Lee también

La diferencia entre un e-mail bueno y uno impresionante: 7 factores

Asunto, enfoque, seguimiento y mucho más. Aquí hay 7 tácticas operativas para crear email brillantes, efectivos y centrados en el cliente. Cada vez que aparece algo ...

Sigue leyendo

Tres tácticas de Email Marketing para fomentar la compra por impulso

El email marketing es uno de los mejores canales para traer tráfico a su sitio web. No solo puede usarlo para compartir noticias sobre su ...

Sigue leyendo

Tutorial: Cómo crear un e-mail con galería en cuadrícula para PC y móvil

¿Quieres diseñar un e-mail simple, hermoso, adaptable al móvil con un montón de fotos? Aquí encontrarás cómo. La entrada de hoy es una guía paso ...

Sigue leyendo

¿Cuánto valen tus campañas? Todo sobre el ROI del Email Marketing

Qué es, cómo calcularlo y con qué acciones optimizar la métrica del canal e-mail que responde a la más urgente de las preguntas: "¿qué rendimiento ...

Sigue leyendo

¿Cómo se crea una mailing list?

Descubramos en 5 pasos cómo crear una lista de contactos y además mejorarla y expandirla gracias a una estrategia de creación de bases de datos.   Al ...

Sigue leyendo

11 cosas que no sabías que puedes hacer con MailUp

Hemos identificado 11 joyas funcionales ocultas en la plataforma: tan pequeñas como decisivas para llevar tus actividades de Marketing por e-mail a un nivel avanzado. Creación, ...

Sigue leyendo