O objetivo da SharpSpring é criar modelos de e-mail reutilizáveis com blocos de layout intercambiáveis e independentes que possam ser reorganizados - e até mesmo usados em diferentes e-mails. Ao criar, importar ou modificar modelos de e-mail, você também tem a opção de modificar diretamente o código do e-mail. O editor de e-mail da SharpSpring permite uma ótima personalização, no entanto, pode haver momentos em que você deseja usar HTML e outros códigos para personalizar uma comunicação específica. Este artigo fornece uma visão geral de como o HTML deve ser usado ao editar o código de e-mail.

Estrutura de E-mail

Os e-mails da SharpSpring contêm uma única seção que contém layouts como “filhos” diretos - isso é representado pela tag <div sh-section=”Body”>. Os layouts contêm o HTML para localizar contêineres e esses contêineres contêm blocos de conteúdo como filhos diretos. Ao modificar o HTML de um e-mail, todo o estilo deve estar contido no layout ou abaixo. Você pode organizar o conteúdo dentro de um layout, localizando os contêineres.

Na interface do editor de e-mail, um e-mail é composto por layouts adicionados e exibidos sequencialmente. Os layouts podem ser reordenados, adicionados e removidos do e-mail. Eles representam o maior elemento que um usuário pode manipular e têm algumas propriedades que o usuário pode alterar por meio da interface, como a cor de fundo e a imagem de plano de fundo. Um layout é, fundamentalmente, um arranjo físico de contêineres. Contêineres não podem ser manipulados pelo usuário. O posicionamento e a largura dos contêineres são uma característica inerente ao layout em que aparecem. Dentro do layout, codifique seu HTML para estruturar os contêineres conforme desejado.

Dentro de cada layout, o usuário pode manipular os blocos de conteúdo. Blocos de conteúdo contêm conteúdo como texto, imagens e botões que podem ser editados. Blocos de conteúdo são colocados em um contêiner, podendo ser reordenados em um contêiner e adicionados e removidos dos contêineres. Apenas o conteúdo dentro de um bloco de conteúdo é editável pelo usuário.

Ao modificar o código HTML de e-mail, considere o seguinte:

  • O uniqueID deve ser exclusivo e não deve ser usado por nenhuma outra empresa. Cada empresa deve ter um uniqueID. A SharpSpring, por exemplo, usa shsp para seu uniqueID.
  • Cada nome de modelo deve ser exclusivo para uma empresa e deve começar com o uniqueID: shsp-booklaunch
  • Os nomes de layout também devem ser exclusivos e também começam com o nome do modelos: shsp-booklaunch-socialfooter

Exemplo de código de e-mail

Um exemplo de e-mail visto como código HTML é o seguinte:

<html>
    <head>
         <meta sh-template-name="uniqueid-templatename">
    </head>
  <body>
    <div sh-section="Body">
      <div sh-layout="Products" class=”uniqueid-templatename-layout-products”>
        <style>
          @media only screen and (max-width:479px) {
          .luniqueid-templatename-layout-products td {
          width: 100%!important;
          display: block;
          }
        }
        </style>
        <table sh-layout-editable width="800" border="0" align="center">
          <tbody>
            <tr>
              <td>
                  <table>
                  <tbody>
                         <tr>
            <td style="width:50%">
              <div sh-container="1">
                <div sh-content-block="Product">
                  <h3 style="color: #050">
                    Apple Pie
                  </h3>
                  <p>Apple pies are awesome</p>
                  <a href="apple-pies">Buy</a>
                </div>
              </div>
            </td>
            <td style="width:50%">
              <div sh-container="2">
                <div sh-content-block="Product">
                  <h3 style="color: #500">
                    Cherry Pie
                  </h3>
                  <p>Cherry pies are awesome</p>
                  <a href="cherry-pies">Buy</a>
                </div>
             </div>
          </td>
       </tr>
     </tbody>
   </table>
</td>
</tr>
</tbody>
</table>
          </div>
       </div>
     </body>
   </html>

HTML

Para modelos e e-mails recém-importados, o elemento <html> deve ter o atributo sh-mode=section-layout. Esse atributo é obrigatório e será removido automaticamente quando o modelo ou o e-mail forem salvos pela primeira vez.

Quando o modelo é carregado pela primeira vez, você deve salvar e recarregar a página para ativar o novo editor.

Seção

Uma seção é definida por um elemento <div> com o atributo sh-section: <div sh-section=”Body”></div>

Ao criar ou modificar a seção, tenha em mente o seguinte:

  • Não aplique estilos ao elemento de seção.
  • A seção deve ser o filho imediato do elemento HTML <body>.
  • Todos os filhos da seção devem ser layouts.

Exemplo de código de seção

O HTML em uma seção deve ser formatado da seguinte maneira:

<html>
 <head></head>
   <body>
     <div sh-section="Body"><!-- Layouts go here --></div>
   </body>
 </html>

Layouts e Estilos

Os layouts são definidos por um elemento <div> com o atributo sh-layout. Layouts são os blocos que podem ser arrastados do painel esquerdo no editor de e-mail e reordenados em e-mails. Estes são os maiores blocos editáveis.

Os layouts contêm todo o HTML e estilos personalizados para esse nível e abaixo, necessário para o e-mail. Os layouts pertencem a tudo, exceto ao componente HTML, e são móveis, editáveis e deletáveis. Ao criar ou modificar layouts, tenha em mente o seguinte:

  • Não aplique estilos ao layout externo <div>.
  • Os layouts devem ser filhos imediatos de seções.
  • Os layouts incluem um ou mais elementos de contêiner.
  • Os layouts são modulares e são completamente independentes. Todo o HTML e CSS para o layout está contido no layout.
  • Layouts devem ser nomeados. O nome deve ser exclusivo para o modelo. Repetir o mesmo layout mais de uma vez é permitido, se forem duplicatas exatas (incluindo o nome).
  • O valor do atributo sh-layout é o nome do layout e não é visível para os clientes.
  • Os layouts podem ter uma classe usada para escopo de estilos incluídos.
  • O layout deve incluir uma classe com um nome exclusivo. Para garantir um nome exclusivo, a classe deve ser o nome do modelo seguido pelo nome do layout, associado a um hífen: my-great-template-my-great-heading-layout

Os layouts devem incluir uma tabela com o atributo sh-layout-editable que representa o corpo do layout. A tabela sh-layout-editable deve conter um único tr e td. Essa é a tabela na qual as propriedades do layout - exibidas no painel Editor de Layout do editor de e-mail - serão aplicadas. Essa tabela geralmente será a de segundo nível no layout, com a de nível superior representando a largura total do e-mail, incluindo as margens.

O editor de e-mail também permite que os estilos de tema sejam definidos para um e-mail, que permite que o estilo de fundo de cabeçalho, conteúdo ou rodapé seja definido para todos os layouts no e-mail de uma vez. Essa funcionalidade usa o cabeçalho, o conteúdo ou a classe de rodapé para identificar os elementos nos quais aplicar as cores. Assim, o cabeçalho, o conteúdo ou a classe de rodapé devem ser incluídos no mesmo elemento <table> que o atributo sh-layout-editable.

A tabela com o atributo sh-layout-editable deve estar de acordo com o seguinte:

  • A tabela deve ter uma largura definida de 800 px.
  • Inclua duas classes para o layout. Para cabeçalhos, conteúdo ou rodapés, inclua uma das classes de header, content ou footer no mesmo elemento <table> que possui o atributo sh-layout-editable.
  • A tabela com sh-layout-editable deve ter apenas uma linha filho com apenas uma célula filho.
  • Os estilos devem ser aplicados aos elementos diretamente por meio do atributo style ou em uma tag de estilo dentro do bloco de layout. O CSS deve ter o escopo definido para o bloco de layout. Use o nome de classe exclusivo do layout para definir qualquer CSS específico para esse layout.

Exemplo de Layout e Código de Estilo

O HTML em um layout deve ser formatado da seguinte maneira:

<html>
 <head>
   <meta sh-template-name="uniqueid-templatename">
 </head>
 <body>
   <div sh-section="Body">
     <div sh-layout="Two Column" class="uniqueid-templatename
   uniqueid-templatename-two-column">
       <style>
         @media only screen and (max-width:479px){
           .uniqueid-templatename-two-column td {width: 100%!important}
       }
       </style>
       <table sh-layout-editable width="8--" align="center">
         <tbody>
           <tr>
             <td style="width:50%"> <!-- container1 --></td>
           </tr>
         </tbody>
       </table>
     </div>
   </div>
 </body>
</html>

Contêineres

Os contêineres são definidos por um elemento com o atributo sh-container. Os contêineres são onde um usuário pode descartar e reordenar blocos de conteúdo. Esses blocos de conteúdo contêm conteúdo que um usuário pode editar, incluindo textos, imagens e botões. A organização dos contêineres em um layout é definida pelo editor de templates e não pode ser manipulada pelo usuário no aplicativo.

Ao criar ou modificar contêineres, siga o seguinte:

  • Os contêineres não precisam ser um filho direto dos layouts.
  • Os elementos de contêiner contêm apenas blocos de conteúdo como filhos.

Exemplo de código de contêiner

O HTML em um contêiner deve ser formatado da seguinte maneira:

<div sh-layout="Products">
 <div sh-container><!-- content blocks --></div>
</div>

Blocos de conteúdo

Blocos de conteúdo são definidos por um elemento com o atributo sh-content-block. Ao criar ou modificar blocos de conteúdo, siga o seguinte:

  • Blocos de conteúdo devem ser um filho direto de um contêiner.
  • Os blocos de conteúdo devem ter um único elemento filho, que geralmente é um elemento <table>.
  • Blocos de conteúdo podem ser editados pelo usuário no editor de e-mail.
  • Os blocos de conteúdo devem ter um nome visível para os clientes.
  • O valor do atributo sh-content-block define o nome.
  • O nome Button está reservado para blocos de conteúdo de botão. Todos os blocos de botões devem usar o nome Button.
  • Estilos dentro de um bloco de conteúdo devem ser aplicados diretamente aos elementos.
  • Blocos de conteúdo não devem ter largura fixa.
  • Células que são usadas como espaçadores dentro de blocos de conteúdo devem ter a classe não editável para impedir que o usuário selecione a célula.

Exemplo de código de bloco de conteúdo

O HTML em um bloco de conteúdo deve ser formatado da seguinte maneira:

<div sh-container="1">
 <div sh-content-block="Product">
   <div>
     <h3 style=”color: #050”>Apple Pie</h3>
     <p>Apple pies are awesome</p>
     <a href="apple-pies">Buy this pie!</a>
   </div>
   </div>
   <div sh-content-block="Image">
     <a href="cherry-pies"><img src=”/some.jpg” /></a>
   </div>
</div>

Botões

Os botões são blocos de conteúdo especiais e são definidos pelo atributo sh-content-block=”Button”. A tabela a seguir lista as propriedades que o usuário terá acesso para editar e como codificá-las em seu modelo:

Exemplo de código Botão

O HTML em um botão deve ser formatado da seguinte maneira:

<div sh-content-block="Button" sh-version="3">
 <div style="height:{topSpacing}px; line-height:{topSpacing}px; clear:both;">&nbsp;</div>
 <table
   width="100%"
   border="0"
   cellspacing="0"
   cellpadding="0"
   style="
     padding-left: {horizontalSpacing}px;
     padding-right: {horizontalSpacing}px;
     mso-padding-left-alt: {horizontalSpacing}px;
     mso-padding-right-alt: {horizontalSpacing}px;
   "
 >
  <tr>
     <td>
      <table border="0" cellspacing="0" cellpadding="0" align="{alignment}">
         <tr>
           <td style="
             border-radius: {borderRadius}px;
             background-color: {backgroundColor}
             "
           >
             <a
               href="{link}"
               target="_blank"
               style="
                 font-family: {fontFamily};
                 font-size: {fontSize}px;
                 color: {fontColor};
                 text-transform: {textTransform};
                 font-weight: {fontWeight};
                 -moz-border-radius: {borderRadius}px;
                 -webkit-border-radius: {borderRadius}px;
                 border-radius: {borderRadius}px;
                 padding: {verticalPadding}px {horizontalPadding}px;
                 border: {borderWidth}px solid {borderColor};
                 display: inline-block;
                 text-decoration: none;
               "
             >
               <!--[if mso]> <![endif]-->{label}<!--[if mso]> <![endif]-->
             </a>
           </td>
         </tr>
       </table>
     </td>
   </tr>
 </table>
 <div style="height:{bottomSpacing}px; line-height:{bottomSpacing}%>px; clear:both;">&nbsp;</div>
 </div>

Fontes do Google

As fontes do Google podem ser aplicadas ao conteúdo de e-mail por meio do painel Estilos de temas no aplicativo. Você pode incluir quantas fontes de tema forem necessárias para o seu modelo. Para que as suas fontes funcionem corretamente em todos os clientes que as suportam (como os aplicativos do iPhone e do Gmail) e para ter um uso contínuo em clientes que não oferecem suporte a elas (como Gmail e Outlook), adote o seguinte:

  • Disponibilize o Google Fonts nos selecionadores de estilos Estilos, declarando-os em tags <meta>.
  • Inclua um elemento <meta> para cada fonte.
  • Coloque o nome da fonte do Google no atributo sh-font.
  • Coloque as fontes de fallback no atributo sh-fallback.
  • Inclua o atributo sh-google-font sem valor para que o editor de e-mail possa identificar as tags  <meta> e importar as Fontes Google.
  • Nomeie as fontes do tema sequencialmente. A abordagem mais direta para a nomeação seqüencial é Font1, Font2, Font3 e assim por diante.
  • Para aplicar a fonte a um elemento em seu modelo, atribua a classe apropriada ao elemento.
  • Coloque um nome de classe para usar no corpo do HTML no sh-font-selector.
  • Coloque o nome da fonte do tema em sh-name e nomeie essas fontes sequencialmente.
  • Defina a fonte padrão para a fonte do tema em sh-default. Se você definir a fonte padrão como uma fonte do Google, o valor padrão sh-default deverá corresponder ao valor sh-font de uma declaração de fonte.
  • Os pesos das fontes suportadas são representados por sh-weights.
  • Aplique uma fonte de tema ao conteúdo do e-mail, aplicando a classe correspondente a essa fonte, conforme definido no atributo sh-font-selector.

Inclua fontes de fallback no estilo font-family no mesmo elemento que possui a classe font.

Exemplos de código de fonte do Google

Um exemplo de código de fonte com uma tag <meta>, o atributo sh-font, o atributo sh-fallback e o atributo sh-google-font é o seguinte:

<meta sh-font="Montserrat" sh-fallback="Arial, sans-serif" sh-google-font>

Um exemplo de código de fonte com uma tag <meta>, o atributo sh-font-selector, o atributo sh-name, o atributo sh-default e o atributo sh-weights é o seguinte:

<meta sh-font-selector=".font1" sh-name="Font 1" sh-default="Montserrat" sh-weights="400,700">

Um exemplo de código de fonte com o atributo font-family, o atributo font-size e o atributo weight-weight é o seguinte:

<td class="font1" style="font-family: Helvetica, Arial, sans-serif, Montserrat; font-size: 11px; font-weight: 400;">

Estilos de Tema

O editor de e-mail inclui os estilos de tema que se aplicam a todo o e-mail. O editor de e-mail aplicará os estilos diretamente a todos os elementos correspondentes. Para garantir que os Estilos de Tema sejam aplicados ao conteúdo de seu modelo, marque o conteúdo com o elemento ou nome de classe aplicável. A tabela a seguir lista as configurações de cores disponíveis no editor de e-mail, bem como os elementos ou classes aos quais esses estilos aplicarão a cor:

Ao usar estilos de tema, siga o seguinte:

  • Definir cores de fundo e texto padrão para os Estilos de Tema, incluindo CSS para os estilos no <head> do HTML ao importar um novo modelo.
  • Inclua CSS para os estilos no primeiro elemento <style> no <head> do HTML.
  • O editor de e-mail, após ler e atualizar os estilos aplicáveis, removerá o CSS da <head> do HTML sempre que for atualizado.
  • Se o usuário colar o estilo no modo View Code e depois olhar View Code novamente mais tarde, os estilos desaparecerão.
  • Estilos de tema que não estão definidos para uma cor aparecerão como transparentes no aplicativo. Apenas esses estilos de texto e plano de fundo serão atualizados por meio de HTML.

O editor de estilo de e-mail exibirá somente configurações que tenham elementos correspondentes no template. Use esses estilos para garantir que os estilos globais desejados sejam trazidos pelo editor de e-mail. Se você criar um modelo fora do aplicativo SharpSpring e importá-lo, será necessário colocar estilos no início do código.

Encontrou sua resposta?