Tutorial: Cómo crear un correo electrónico con bloqueo de color

Nos gusta mucho todo lo relacionado con el color en el correo electrónico . Un estilo que amamos totalmente (y vemos mucho) es el bloqueo de color, donde aproximadamente la mitad de un correo electrónico tiene un color de fondo en negrita y la otra mitad es blanco. Esta es una técnica simple que recorre un largo camino en las bandejas de entrada. En este tutorial, le mostraremos cómo crear su propio correo electrónico de bloqueo de color en unos sencillos pasos. También exploraremos cómo:

• Agregue varios colores de fondo HTML dentro de un correo electrónico
• Establecer múltiples columnas
• Dar formato al texto (color, tamaño, altura de línea, enlaces, etc.)
• Pulir un correo electrónico ajustando el espaciado y el relleno

Inspiración: envío fuera de la pantalla

Offscreen es una revista impresa y un boletín semanal "con una visión reflexiva y centrada en el ser humano de la tecnología y la web". Su boletín se llama Offscreen Dispatch, y durante mucho tiempo hemos admirado su diseño simple y distintivo. Fuera de la pantalla utiliza la misma técnica de bloqueo de color en cada correo electrónico, y el efecto realmente bonito hace que el correo electrónico parezca una página de una revista. La parte superior, donde el diseñador web Kai Brach escribe una nota para los suscriptores, siempre es rosa. El resto del correo electrónico siempre es blanco. Echale un vistazo:

No hay nada particularmente elegante aquí, ni arte ni fotografía, pero el diseño dinámico, el texto bien formateado y el diseño de bloques de color reúnen este correo electrónico.

Paso 1: construye la estructura

Abra el editor BEE en MailUp y comience con una plantilla básica de una columna en blanco.

Antes de comenzar a arrastrar los elementos de la estructura, tomemos un minuto para examinar el correo electrónico de Despacho fuera de pantalla e identificar los componentes del diseño. Aquí hay una versión marcada:

El correo electrónico alterna entre estructuras de una columna y dos columnas, lo que es fácil de ensamblar en BEE.

Arrastre sobre las formaciones de fila correspondientes del menú Fila a la derecha. Necesitaremos las dos opciones principales para este correo electrónico:

Así es como se ve nuestro correo electrónico con las estructuras de filas en su lugar:

Paso 2: organizar bloques de contenido con texto / imágenes

Ahora que tenemos los huesos de nuestro correo electrónico ensamblados, arrastre los bloques de contenido que se correspondan con el tipo de contenido (texto y / o imagen) que queremos en cada sección. Luego, pega el texto y arrastra las imágenes.

Aquí hay un 1-2-3 sobre cómo ubicar su contenido. Comenzando con la primera fila, el encabezado, así es como se hace:

(1) Introduzca una estructura de dos columnas:

(2) Agregue bloques de texto a la izquierda; un bloque de contenido de imagen a la derecha:

(3) Introduzca su texto e imagen:

Repasemos cada fila para organizar el contenido.

Aquí está nuestro correo electrónico con los bloques de contenido restantes en su lugar:

Ahora, terminaremos de agregar texto:

¡Voila! A continuación, formateemos.

Paso 3: formatea los colores de fondo

Ahora viene la parte divertida. Observe lo fácil que es crear el efecto de bloqueo de color.

Primero, para que coincida con el tono exacto de rosa pálido del correo electrónico de Offscreen Dispatch, usamos HTML-Color-Codes.info para identificar el color de la imagen en el encabezado.

Los códigos de color HTML identifican el código hexadecimal como # F5BBA2. Para que la primera fila tenga el color correcto, haremos lo siguiente:

1. Seleccione la fila
2. Navegue hasta Color de fondo de fila en el menú de la derecha
3. Pegue el código de color (o seleccione manualmente)

¡Color impecable de borde a borde! Ahora completemos el bloque de color rosa. Simplemente seleccionaremos la siguiente fila y haremos lo mismo nuevamente.

Ahora, nuestro correo electrónico tiene color bloqueado. Sí, es así de fácil.

Paso 4: formatea el texto

Finalicemos este diseño de correo electrónico con algunos toques de formato. Comenzaremos con el texto.

Elija una fuente predeterminada para el correo electrónico

En lugar de pasar por cada bloque de contenido individual para elegir la fuente de su correo electrónico , navegue hasta el menú Configuración a la derecha y seleccione la fuente que le gustaría usar para todo el correo electrónico.

Después de eso, puede cambiar la fuente del encabezado o seleccionar las secciones que desee.

Ajustar tamaños de fuente

Toque cualquier bloque de texto y use el menú desplegable para ajustar el tamaño de la fuente.

Personaliza los colores del texto

Utilice ese mismo menú para elegir los colores que prefiera. Nuevamente, use el mismo código de color combinado para obtener el tono preciso que necesita.

Dar formato al estilo del enlace

¡No olvides los enlaces! En el mismo menú de Configuración donde eligió la fuente de cuerpo predeterminada, también puede formatear el estilo del enlace. En este caso, elegiremos el negro.

A medida que agrega enlaces a su correo electrónico, asegúrese de que la casilla "Subrayar enlace" esté marcada. (¡Incluso es una de las mejores prácticas de accesibilidad al correo electrónico !)

Altura de la línea

Asegúrese de que el texto de su cuerpo tenga espacio para respirar. Para cualquier bloque de contenido que edite, ajuste la altura de la línea del texto.

Consejo: fila duplicada

Si pasó mucho tiempo formateando texto en una fila en particular, puede simplemente duplicarlo, en lugar de realizar manualmente los mismos ajustes en otra fila.

Toque la fila que desea copiar. Luego, haga clic en la imagen del cuadro doble completamente a la derecha.

¡Se copiará su fila! Luego, simplemente arrástrelo y tome el ícono direccional a la izquierda, para colocar la nueva fila en el correo electrónico.

Paso 5: ajusta el acolchado

¡Último paso! Y es importante. Antes de terminar el correo electrónico, observe de cerca el espacio entre sus bloques de contenido. Si todavía hay demasiados huecos, o no hay suficiente espacio para respirar en ningún otro lugar, es muy fácil hacer ajustes.

Por ejemplo, todavía hay una brecha entre "Fuera de pantalla" y "Envío" en el encabezado de nuestro borrador de correo electrónico. Para ajustarlo, toque cualquiera de los bloques de contenido, desplácese hacia abajo hasta Opciones de bloque en el menú de la derecha y asegúrese de que "Más opciones" esté activado en Relleno. Luego, puede disminuir (o aumentar) el relleno en cualquier lado en cualquier parte del contenido.

Paso 6: ¡Obtenga una vista previa del correo electrónico de bloqueo de color terminado!

Ok, un último, último paso. A medida que diseñe cualquier correo electrónico, obtenga una vista previa para asegurarse de que le guste cómo aparece tanto en el escritorio como en el dispositivo móvil. Aquí hay un vistazo a cómo se está desarrollando el nuestro:

Envolver

Crear un correo electrónico con bloques de color es más sencillo de lo que piensa y agrega mucho valor visual a su mensaje. Si realmente desea dominar los trucos de diseño de correo electrónico más avanzados, asegúrese de descargar nuestra Guía de diseño de correo electrónico gratuita de inmediato.