Para desenvolvedores: modelos de e-mail – SharpSpring Brasil

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.

Usuários com acesso:

Administradores
Gerentes da Empresa
Gerentes de Marketing

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:

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%"> </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:

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;"> </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;
"
>
{label}
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="height:{bottomSpacing}px; line-height:{bottomSpacing}%>px; clear:both;"> </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:

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:

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

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.