Projetando usando conteúdo existente

Selecionar um conteúdo existente

A Adobe Campaign vem com um conjunto de conteúdos predefinidos para ajudá-lo a começar. Você pode usar um desses ou, se o conteúdo da mensagem que você precisa enviar estiver sendo preparado fora do Adobe Campaign, você pode importá-lo do seu computador ou de um URL.

Ao criar um email ou uma landing page, você pode optar por carregar um conteúdo existente de outra fonte.

OBSERVAÇÃO

As imagens abaixo mostram como carregar um conteúdo existente usando o Email Designer.

  1. Depois de criar o email ou a landing page, abra o conteúdo.

  2. Clique no ícone inicial para acessar o home page Email Designer.

  3. Selecione a origem do conteúdo que deseja carregar:

  4. Carregue o conteúdo. O conteúdo selecionado substitui o conteúdo atual.

    Depois de importado, o conteúdo pode ser editado e personalizado.

    OBSERVAÇÃO

    O Email Designer usa marcação específica. O conteúdo HTML padrão carregado na Campanha deve corresponder à marcação esperada para ser totalmente compatível e editável no Designer de email. Se não for correspondente, seu conteúdo será carregado no modo de compatibilidade. Para tornar o conteúdo existente compatível, consulte esta seção.

Tópicos relacionados:

Editar conteúdo existente com o Designer de email

Para aproveitar totalmente as possibilidades de edição do Email Designer, seu HTML carregado deve conter tags específicas que o tornem compatível com o editor WYSIWYG.

Se todo ou parte do HTML não tiver essa marcação, o conteúdo será carregado no modo de compatibilidade a1/>.

Para tornar um conteúdo externo existente totalmente editável no Designer de email, consulte a seção Criação de um email usando o conteúdo existente.

Importando um conteúdo de email existente

Importando conteúdo de um arquivo

No home page do Email Designer, clique no botão Upload para fazer upload de um arquivo do computador e, em seguida, confirme.

Não há restrições na estrutura do arquivo zip. No entanto, a referência a arquivos HTML deve ser relativa e respeitar a estrutura em árvore da pasta zip.

Os formatos a seguir são suportados para importação:

  • Um arquivo HTML com uma folha de estilos incorporada
  • Uma pasta .zip contendo o arquivo HTML, a folha de estilos (.CSS) e as imagens
OBSERVAÇÃO

Para conteúdo de email, recomendamos que você importe arquivos HTML únicos com uma folha de estilos incorporada.

Importar conteúdo de um URL

Antes de importar o conteúdo de um URL, certifique-se de seguir os requisitos abaixo:

  • O conteúdo precisa estar publicamente disponível por meio deste URL.

  • Por motivos de segurança, somente URLs que começam com https são permitidos.

  • Verifique se todos os recursos (imagens, CSS) estão definidos em links absolutos e em HTTPS. Caso contrário, após o envio do email, o mirror page seria exibido sem seus recursos. Este é um exemplo de uma definição de link absoluta:

    <a href="https://www.mywebsite.com/images/myimage.png">
    
OBSERVAÇÃO

O carregamento de conteúdo de um URL está disponível somente para o canal de email.

Para recuperar o conteúdo existente de um URL, siga as etapas abaixo:

  1. No home page do Email Designer, selecione o botão Import from URL.

  2. Defina o URL a partir do qual o conteúdo será recuperado.

  3. Clique em Confirm.

Descubra este recurso no vídeo.

Vídeos de procedimentos de Campaign Standard adicionais estão disponíveis aqui.

Recuperar conteúdo de um URL automaticamente no momento da preparação

A importação de conteúdo de um URL durante a preparação da mensagem permite que você recupere o conteúdo HTML mais recente sempre que o email for preparado. Dessa forma, o conteúdo de emails recorrentes é sempre atualizado no momento do envio. Esse recurso também permite que você crie uma mensagem programada em uma data específica, mesmo se o conteúdo ainda não estiver pronto.

Para recuperar o conteúdo no momento da preparação, siga as etapas abaixo:

  1. Selecione a opção Content imported during preparation.

  2. O conteúdo do URL é exibido no editor como somente leitura.

    CUIDADO

    Nesta etapa, a exibição HTML no editor de conteúdo não deve ser considerada. Será recuperado na fase de preparação.

  3. Para pré-visualização do conteúdo do URL que foi recuperado, abra a mensagem depois de criada e clique no botão Preview.

É possível personalizar o URL remoto do qual o conteúdo será recuperado. Para fazer isso, siga as etapas abaixo:

  1. Clique no rótulo de email na parte superior da tela para acessar a guia Email Designer Properties.

  2. Localize o campo Remote URL.

  3. Insira o campo de personalização, o bloco de conteúdo ou o texto dinâmico desejados.

    O bloco de conteúdo Current date - YYYYMMDD, por exemplo, permite inserir a data do dia.

    OBSERVAÇÃO

    Os campos de personalização disponíveis estão vinculados somente aos atributos Delivery (data de criação do email, status, etiqueta de campanha…).

Modo de compatibilidade

Quando você carrega um conteúdo, ele deve conter uma marcação específica para ser totalmente compatível e editável com o editor WYSIWYG do Designer de e-mail.

Se todo ou parte do HTML carregado não for compatível com a marcação esperada, o conteúdo será carregado em "modo de compatibilidade", o que limita as possibilidades de edição por meio da interface do usuário.

Quando um conteúdo é carregado no modo de compatibilidade, você ainda pode executar as seguintes modificações por meio da interface (as ações não disponíveis estão ocultas):

  • Alteração do texto ou alteração de uma imagem
  • Inserir links e campos de personalização
  • Editar algumas opções de estilização no bloco HTML selecionado
  • Definição de conteúdo condicional

Outras modificações, como adicionar novas seções ao seu email ou estilo avançado, devem ser feitas diretamente no código-fonte do email por meio do modo HTML.

Para obter mais informações sobre como converter um email existente em um email compatível com o Designer de email, consulte esta seção.

Tópicos relacionados:

Conversão de conteúdo HTML

Se quiser criar uma estrutura de modelos modulares e fragmentos que podem ser combinados para reutilização em vários emails, considere converter seu HTML de email em um modelo do Designer de email.

Esse caso de uso oferta uma maneira rápida de converter emails HTML em componentes do Email Designer.

CUIDADO

Esta seção destina-se a usuários avançados familiarizados com o código HTML.

OBSERVAÇÃO

Como o modo de compatibilidade, um componente HTML é editável com opções limitadas: você só pode executar edição no local.

Fora do Designer de email, verifique se o HTML original está dividido em seções reutilizáveis.

Se esse não for o caso, recorte os diferentes blocos do seu HTML. Por exemplo:

<!-- 3 COLUMN w/CTA (SCALED) -->
<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" style="max-width:680px;">
<tbody>
<tr>
<td class="padh10" align="center" valign="top" style="padding:0 5px 20px 5px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
...
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- //3 COLUMN w/CTA (SCALED) -->

Depois de identificar todos os blocos, no Designer de email, repita o seguinte procedimento para cada seção do email existente:

  1. Abra o Designer de email para criar um conteúdo de email vazio.

  2. Defina os atributos de nível de corpo: cores de fundo, largura, etc. Para obter mais informações, consulte Edição de estilos de email.

  3. Adicione um componente de estrutura. Para obter mais informações, consulte Edição da estrutura do email.

  4. Adicione um componente HTML. Para obter mais informações, consulte Inclusão de fragmentos e componentes.

  5. Copie e cole seu HTML nesse componente.

  6. Mude para visualização móvel. Para obter mais informações, consulte esta seção.

    A visualização responsiva está quebrada, pois seu CSS está ausente.

  7. Para corrigir isso, alterne para o modo de código fonte e copie e cole sua seção de estilo em uma nova seção de estilo. Por exemplo:

    <style type="text/css">
    a {text-decoration:none;}
    body {min-width:100% !important; margin:0 auto !important; padding:0 !important;}
    img {line-height:100%; text-decoration:none; -ms-interpolation-mode:bicubic;}
    ...
    </style>
    
    OBSERVAÇÃO

    Depois disso, adicione seu estilo em outra tag de estilo personalizada.

    Não modifique o CSS gerado pelo Designer de email:

    • <style data-name="default" type="text/css">(##)</style>
    • <style data-name="supportIOS10" type="text/css">(##)</style>
    • <style data-name="mediaIOS8" type="text/css">(##)</style>
    • <style data-name="media-default-max-width-500px" type="text/css">(##)</style>
    • <style data-name="media-default--webkit-min-device-pixel-ratio-0" type="text/css">(##)</style>
  8. Volte para a visualização móvel para verificar se o conteúdo é exibido corretamente e salvar as alterações.

Nesta página