Skip to content

Newsletter Template developed in MJML (HTML framework to email)

Notifications You must be signed in to change notification settings

Drlazinho/mjml-newsletter-filantropo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Newsletter para email HTML

Projeto desenvolvido usando MJML, um framework HTML para emails

Desenvolvimento de Email Marketing CSS e MJML (Framework HTML) para empresa NAKONTA.

Tutorial de como começar um projeto em MJML.

Detalhes do projeto

  • O Layout deve ter 600px de largura

  • Responsivo - A ferramenta MJML facilita o desenvolvimento da parte responsiva do projeto desktop/mobile

    • Neste projeto em especifico, foi necessário fazer alguns ajustes de alguns elementos para que ficasse responsivo dentro das normas de Design e de acordo com template desejado.
    <mj-style>
      @media(min-width: 480px) {
        .desktop {
           padding: 0 40px 0 0 !important;
        }
        ...
      }
    </mj-style>
  • CSS Inline

    • A maioria do código foi desenvolvido no arquinvo index.mjml com CSS Inline em grande parte.
    • Pode converter o código do projeto com CSS Interno para CSS Inline neste site. Também para testar
  • As referencias para imagens deve ser com links absolutos. Usar links relativos pode resultar em falhas.

  • Projeto finalizado com algumas alterações em no arquivo index.html

    • O MJML é como um bootstrap, as vezes é necessário fazer algumas alterações no arquivo index.html para que tenha um bom resultado, principalmente para o aplicativo Outlook do windows, que pode desconfigurar o template.

Os projetos html para email deve ser feito utilizando tabelas.

Testando

  • Copie todo o código do arquivo index.html
  • Registra o seu email nesse site.
  • No menu superior do site, selecione new test. Adicione o seu email que quer receber com qualquer título ou descrição
  • Cole o código html na área indicada e marque a caixinha para converter o código em CSS Inline.
    • Na primeira vez pode exigir a verificação do seu email, sendo necessário realizar novamente os passos de enviar o código html

Resultado

🤝 Colaboradores

Foto de Lázaro Pimentel no GitHub
Lázaro Pimentel

Licença

The MIT License (MIT)

Copyright ©️ 2022 - Lázaro Pimentel

About

Newsletter Template developed in MJML (HTML framework to email)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Languages