Tutorial: como criar um e-mail de bloqueio de cores

Gostamos muito de todas as coisas relacionadas a cores no e-mail . Um estilo que adoramos (e vemos muito) é o bloqueio de cores, em que cerca de metade de um e-mail tem uma cor de fundo em negrito e a outra metade é branco. Esta é uma técnica simples que percorre um longo caminho nas caixas de entrada. Neste tutorial, mostraremos como criar seu próprio e-mail com bloqueio de cores em algumas etapas fáceis. Também exploraremos como:

• Adicionar várias cores de fundo HTML em um e-mail
• Estabeleça várias colunas
• Formatar o texto (cor, tamanho, altura da linha, links etc.)
• Refine um e-mail ajustando o espaçamento e preenchimento

Inspiração: despacho fora da tela

Offscreen é uma revista impressa e um boletim informativo semanal “com uma abordagem cuidadosa e centrada no ser humano sobre a tecnologia e a web”. Seu boletim informativo é chamado Offscreen Dispatch, e há muito admiramos seu design simples e distinto. Fora da tela usa a mesma técnica de bloqueio de cores em todos os e-mails, e o efeito realmente bonito faz com que o e-mail pareça uma página de revista. A parte superior - onde o web designer Kai Brach escreve uma nota para os assinantes - é sempre rosa. O resto do e-mail é sempre branco. Confira:

Não há nada particularmente sofisticado aqui - nenhuma arte ou fotografia - mas o layout dinâmico, o texto bem formatado e o design com cores bloqueadas unem este e-mail.

Etapa 1: construir a estrutura

Abra o editor BEE no MailUp e comece com um modelo básico de uma coluna em branco.

Antes de começarmos a arrastar os elementos da estrutura, vamos examinar o e-mail de envio fora da tela e identificar os componentes do layout. Esta é uma versão marcada:

O e-mail alterna entre estruturas de uma e duas colunas, o que é fácil de montar no BEE.

Arraste sobre as formações de linha correspondentes no menu Linha à direita. Precisaremos das duas opções principais para este e-mail:

Veja como nosso e-mail se parece com as estruturas de linha no lugar:

Etapa 2: Organize os blocos de conteúdo com texto / imagens

Agora que reunimos os ossos do nosso e-mail, arraste os blocos de conteúdo que correspondem ao tipo de conteúdo - texto e / ou imagem - que queremos em cada seção. Em seguida, cole o texto e arraste nas imagens.

Aqui está um 1-2-3 sobre como localizar seu conteúdo. Começando com a primeira linha - o cabeçalho - veja como:

(1) Puxe uma estrutura de duas colunas:

(2) Adicionar blocos de texto à esquerda; um bloco de conteúdo de imagem à direita:

(3) Coloque seu texto e imagem:

Vamos examinar cada linha para organizar o conteúdo.

Aqui está nosso e-mail com os blocos de conteúdo restantes no lugar:

Agora, vamos terminar de adicionar o texto:

Voila! A seguir, vamos formatar.

Etapa 3: formate as cores de fundo

Agora a parte divertida. Observe como é fácil criar o efeito de bloqueio de cores.

Primeiro, para corresponder ao tom exato de rosa claro do e-mail do Offscreen Dispatch, usamos HTML-Color-Codes.info para identificar a cor da imagem no cabeçalho.

Os códigos de cores HTML identificam o código hexadecimal como # F5BBA2. Para fazer com que a primeira linha tenha a cor certa, nós iremos:

1. Selecione a linha
2. Navegue até a cor de fundo da linha no menu à direita
3. Cole o código de cores (ou selecione manualmente)

Cor perfeita de ponta a ponta! Agora vamos completar o bloco de cor rosa. Simplesmente selecionaremos a linha a seguir e faremos a mesma coisa novamente.

Agora, nosso e-mail está com cores bloqueadas. Sim, é tão fácil.

Etapa 4: formate o texto

Vamos finalizar este design de e-mail com alguns toques de formatação. Começaremos com o texto.

Escolha uma fonte padrão para o e-mail

Em vez de passar por cada bloco de conteúdo individual para escolher a fonte do seu e-mail , navegue até o menu Configurações à direita e selecione a fonte que deseja usar para todo o e-mail.

Depois disso, você pode alterar a fonte do cabeçalho ou selecionar as seções que deseja.

Ajustar o tamanho da fonte

Toque em qualquer bloco de texto e use o menu suspenso para ajustar o tamanho da fonte.

Personalize as cores do texto

Use o mesmo menu para escolher as cores de sua preferência. Novamente, use o mesmo código de cor correspondente para obter a tonalidade precisa que é necessária.

Formate o estilo do link

Não se esqueça dos links! No mesmo menu Configurações em que escolheu a fonte do corpo padrão, você também pode formatar o estilo do link. Neste caso, escolheremos preto.

Ao adicionar links ao seu e-mail, certifique-se de que a caixa “Sublinhar link” esteja marcada. (É até uma prática recomendada de acessibilidade de e - mail !)

Altura da linha

Certifique-se de que o texto do seu corpo tenha espaço para respirar. Para qualquer bloco de conteúdo que você editar, ajuste a altura da linha do texto.

Dica: linha duplicada

Se você gastou muito tempo formatando texto em uma linha específica, pode simplesmente duplicá-lo, em vez de fazer manualmente os mesmos ajustes em outra linha.

Toque na linha que deseja copiar. Em seguida, clique na imagem da caixa dupla totalmente à direita.

Sua linha será copiada! Em seguida, basta arrastá-lo e agarrar o ícone direcional à esquerda, para colocar a nova linha no e-mail.

Etapa 5: ajuste o preenchimento

Último passo! E é importante. Antes de terminar o e-mail, observe atentamente o espaçamento entre os blocos de conteúdo. Se ainda houver muitas lacunas - ou espaço para respirar em nenhum outro lugar - é muito fácil fazer ajustes.

Por exemplo, ainda há uma lacuna entre “Fora da tela” e “Despacho” no cabeçalho de nosso rascunho de e-mail. Para restringir, toque em qualquer bloco de conteúdo, role para baixo até Opções de bloco no menu à direita e certifique-se de que “Mais opções” esteja ativado em Preenchimento. Em seguida, você pode diminuir (ou aumentar) o preenchimento em qualquer lado de qualquer parte do conteúdo.

Etapa 6: Visualize o e-mail de bloqueio de cores concluído!

Ok - uma última, última etapa. Ao criar qualquer e-mail, visualize-o ao longo do caminho para ter certeza de que gosta de como ele aparece no desktop e no celular. Aqui está uma olhada em como o nosso está se moldando:

Embrulhar

Criar um e-mail com cores bloqueadas é mais simples do que você pensa e adiciona muito valor visual à sua mensagem. Se você deseja realmente dominar os truques de design de email mais avançados, certifique-se de baixar nosso Guia de design de email grátis imediatamente!