Hoje vamos ver como criar e editar uma newsletter completa, com exemplos de códigos HTML e suas funcionalidades.
O que vamos ver neste post?
Você irá aprender alguns aspectos básicos em HTML e terá instruções para criar uma newsletter usando o editor da Mailrelay.
Como criar uma tabela
Esta tabela será usada para centralizar o conteúdo da mensagem, com estas configurações:
- Largura de 100% .
- Uma linha
- Uma coluna
- Sem bordas
Esta configuração ficaria mais ou menos como a da imagem.
Como criar uma tabela interior
Em seguida, vamos criar uma tabela interior, que irá dentro da outra. Isto será feito em dois passos:
- Novamente é uma tabela de uma coluna
- E uma linha, porém existem duas diferenças
- A largura é de 65%
- Alinhamento centralizado
No exemplo, talvez a largura não foi a melhor, e talvez 75% ou 85% ficaria melhor visualmente.
É uma questão de testar até ver o que fica melhor para você.
Agora, sem sair desta tela, vamos clicar na aba Avançado.
Aqui vamos modificar a caixa Estilos:
- max-width: 500px;
- Isto estabelece uma largura máxima, de forma que embora o cliente de email disponha de mais largura, a newsletter não irá ultrapassar esta largura .
- padding: 5px;
- Com o padding o que fazemos é deixar um espaço entre a borda da tabela e o interior, de forma que se a tabela se ajustar a borda do dispositivo, fique um pouco de espaço em branco.
Ficaria mais ou menos assim:
Adicionando imagem na newsletter
E o próximo passo será adicionar uma imagem, este passo é simples, mas também é importante configurar a largura:
- Largura: 100%
- Altura: vazio
É importante deixar o campo altura vazio, pois dessa forma o sistema irá ajustar as proporsões da imagem sem problemas, ajustando a largura com a largura disponível.
Adicionar um botão na newsletter
No próximo passo, vamos adicionar um botão para uma chamada à ação.
É muito fácil, basta selecionar o texto e clicar no botão de link.
Em seguida, selecionar a aba Avançado e em Estilo:
- background-color:#18adb3;
- Isto irá definir a cor de fundo do botão
- border:2px solid #18adb3;
- Aqui indicamos a largura e a cor da borda
- color:white;
- A cor do texto
- display:block; margin:0 auto;
- Dois valores para que o botão seja centralizado na página
- padding:5px;
- Uma margem entre a borda e o texto
- width:50%;
- Largura do botão, para que não ocupe toda a largura do template.
- text-decoration: none;
- Para tirar o sublinhado do link
Com estes valores você poderá criar um botão visualmente atraente.
Adicionar uma tabela com mais colunas
Se você desejar por exemplo adicionar uma tabela com mais colunas, você poderá fazê-lo desta forma:
Definindo uma largura de 100% e 5 colunas.
Aqui o recomendável será, que se você adicionar imagens, configurar uma largura de 100%, como vimos antes ao ver como configurar as imagens.
Por último.
Link de cancelamento
Ao criar uma newsletter, é fundamental incluir um link de cancelamento, para que os usuários que desejarem fazê-lo possam solicitar remoção da sua base de dados de forma fácil e automática.
Para fazer isto, você só deve criar um link com estes valores:
- Protocolo : outro
- URL: [unsubscribe_url_click]
E a partir disso, a Mailrelay irá enviar um link de cancelamento para cada assinante.
Como ficará o template de newsletter?
Se você seguir as instruções deste tutorial corretamente, você deverá ter uma newsletter muito parecida com esta:
Para uma newsletter simples, já é suficiente, você não acha?
E se a newsletter for visualizada em um dispositivo móvel?
Seria exibida desta forma:
Como explicado antes, talvez uma largura superior a 65% seria mais recomendável, pois neste caso pode ficar muito estreita.
Mas em geral, foi adaptada corretamente.
Porque esta newsletter é eficaz?
Porque incluye todo lo bter:ásico que queremos en una n
Porque inclui todos os aspectos básicos relevantes em uma newsletter:
- Cabeçalho com uma imagem para mostrar a marca
- O texto imprescindível
- Um botão e chamada à ação para que o assinante tome a ação desejada
- Mais imagens caso sejam necessárias
- Alguns links e chamadas à ação secundárias
- Link de cancelamento
Usualmente, é recomendável criar uma newsletter o mais simples possível, pois o objetivo da campanha é que o usuário realize alguma ação, por isso quanto menos a o design distrair, melhor será.
Na grande maioria dos casos, o objetivo da campanha será convencer o usuário a clicar no link para acessar seu site ou blog.
Não é necessário nem recomendável sobrecarregar o design da newsletter.
Não se complique!
Espero que este tutorial para editar uma newsletter seja útil.
