Práticas recomendadas e dicas do editor para o Content Builder

Vídeos de tutorial

Consulte Vídeos de tutorial do Email Studio e do Content Builder

Fundamentos do editor

Nota Não inclua informações pessoalmente identificáveis, como o endereço de email, nos links de email.

• Uma visualização persistente e ativa no lado direito da página é atualizada à medida que as alterações são feitas, na exibição Layout ou Código.
• Recursos fáceis de usar, como preenchimento automático de HTML, correspondência de marcas, codificação de cores, números de linha e formatação automática, ajudam a editar a origem de HTML.
• Na exibição Layout, arraste o conteúdo, os blocos de conteúdo ou os layouts de conteúdo para a tela de visualização desejada. Quando os blocos estiverem na página, você poderá arrastá-los para outro local no email ou no modelo.
• Você pode usar a Visualização de árvore para duplicar, editar ou excluir blocos.
• Arraste vários blocos para qualquer área de conteúdo, a menos que ela seja restrita. Não há mais um relacionamento de um para um entre as áreas e os blocos de conteúdo.
• Arraste as imagens diretamente do seu computador para um email ou modelo. A imagem é carregada automaticamente no Content Builder.
• Um bloco ou layout de conteúdo criado durante a edição de um email ou modelo pode ser salvo no Content Builder para reutilização.
• O HTML produzido pelo editor é de alta qualidade. Por exemplo, o editor clássico às vezes quebrava as imagens com marcas <p>, causando problemas de formatação. O editor do Content Builder não adiciona marcas <p>.
• Se você pretende usar a opção Ajustar para caber nas imagens do email, redimensione a imagem para a largura e a altura máximas desejadas. O uso de uma largura e altura maiores evita a distorção da imagem ao exibir emails no Outlook.
  

  Nota A opção Ajustar para caber não está disponível no Outlook.
• Os botões da barra de ferramentas Colar como texto simples e Colar do Word não têm suporte em todos os navegadores. Para colar com formatação, use Cmd+V no Mac ou Ctrl+V no Windows.

  

• Os blocos de conteúdo HTML podem adicionar wrappers de código extras à sua mensagem. Para preservar seu código, use snippets de código.

Modelos

• Criando um modelo colando HTML ou começando com um modelo existente, a experiência de edição é a mesma. Você pode iniciar um modelo colando HTML e, em seguida, alterar para o modo Layout para arrastar e soltar na edição.
• Áreas e blocos de conteúdo não possuem um relacionamento de um para um. Por padrão, você pode adicionar quantos blocos quiser a uma área de conteúdo. Em resultado disso, você pode reduzir o número de áreas de conteúdo em seus modelos.
• As áreas de conteúdo podem ter restrições. Você pode limitar o número e o tipo de blocos que podem ser soltos em uma área de conteúdo. Por exemplo, você pode limitar uma área de conteúdo do tipo banner a apenas um bloco e limitá-la apenas a blocos de imagem.
• Após o conteúdo tiver sido colocado em uma área de conteúdo, você poderá bloquear essa área para que ela não pode possa ser alterada nos emails criados usando esse modelo.
• Para permitir que o criador do modelo inclua instruções em cada área de conteúdo, altere a mensagem padrão "soltar blocos ou conteúdo aqui" em cada área de conteúdo. Altere o padrão no HTML ou por meio da interface do usuário na guia Propriedades da área de conteúdo.
• Nos modelos para colar HTML, adicione o cabeçalho, o rodapé e as marcas de rastreamento de abertura se desejar que sejam adicionados aos emails.
• As áreas de conteúdo são identificadas com a sintaxe <div data-type="slot" data-key="(unique key)">. O editor ainda reconhece a sintaxe @@contentarea e <custom> do editor clássico. A definição div permite o número máximo de blocos, os blocos permitidos e a mensagem de texto exibida no conteúdo vazio a ser definida no HTML. Definir propriedades diretamente no HTML é útil ao criar modelos de colar HTML.

  Exemplo:

  <div data-type="slot" data-key="Hero1" data-max-blocks="1" data-allowed-blocks="imageblock; textblock; freeformblock; abtestblock; dynamicblock" data-label="Place Hero Image Here"></div>

  Nesse exemplo, a área de conteúdo permite no máximo um bloco. O bloco deve ser uma imagem principal, um texto, uma forma livre, um teste a/b ou um bloco de conteúdo dinâmico. A mensagem mostrada dentro da área de conteúdo vazia é "Colocar imagem principal aqui".

• Algumas palavras-chave reservadas não podem ser usadas como o valor da chave de dados em uma área de conteúdo. Usá-las pode tornar o modelo inutilizável depois de salvo.
  • Conteúdo
  • Subcontent
  • Supercontent
  • Design
  • Marcas
  • Filename
  • Createdbyname
  • Modifiedbyname
  • Ownername
  • Nome
  • legacyID
  • legacycategoryID
  • Legacytype
  • enterpriseID
• Para aproveitar todos os recursos do editor, use a biblioteca de modelos para criar um email ou como ponto de partida para um modelo. Os Layouts existentes são conhecidos simplesmente como modelos "Vazios". Esses modelos estão em conformidade com as práticas recomendadas para a capacidade de resposta móvel.
• O componente Estilos globais permite que você altere estilos facilmente em um local e coloque esses estilos em cascata por todo o modelo ou email. Os estilos globais estão presentes apenas em emails e modelos com base em um dos modelos fornecidos.
• Para fazer as colunas em Layouts de conteúdo empilharem quando visualizadas em celulares, adicione o seguinte CSS à consulta de mídia móvel em seu modelo:

  body .responsive-td {width:100% !important; float:left !important; padding:0 !important; }

Emails

Os assistentes orientam você na alteração do modelo que o email usa ou na atualização do modelo atual.

O código no editor de Visualização de código de um email do Content Builder baseado em email é bloqueado e você não pode copiá-lo. Para copiar o código, selecione-o, clique com o botão direito do mouse e selecione Criar snippet de código. Você também pode selecionar Salvar como modelo no menu do botão Salvar que permite copiar ou editar o código diretamente no editor de visualização de código.

Funções do script AMP e outros scripts

• As seguintes funções do script AMP fazem referência a blocos de conteúdo e imagens no Content Builder:
  • ContentBlockbyID, ContentBlockbyKey
  • ContentImagebyID, ContentImagebyKey
  As funções de script AMP do Content Builder também funcionam com snippets de código.
• Quando o script AMP é usado para extrair blocos de conteúdo, a tabela que o editor adiciona para quebrar os blocos também é inserida. Se não quiser essa tabela de quebra, use os snippets de código.
• Ao adicionar funções do script AMP no Content Builder, procure e selecione imagens e blocos para fazer referência sem sair do editor. Ative a pesquisa no editor clicando em Procurar... quando digitar a função.
• Consulte o Guia de sintaxe do Script AMP para obter mais informações.