Edição de texto sem formatação, HTML e formatos de email para dispositivos móveis plain-text-and-html-modes

O Designer de email permite editar várias renderizações de seus emails. Você pode gerar uma versão em texto do email, editar a fonte de HTML de um email e criar emails para exibição em dispositivos móveis.

Gerar uma versão de texto do email generating-a-text-version-of-the-email

Por padrão, a versão Plain text do seu email é gerada e sincronizada automaticamente com a versão Edit.

Campos de personalização e blocos de conteúdo adicionados à versão do HTML também são sincronizados com a versão de texto simples.

NOTE
Para usar blocos de conteúdo na versão de texto sem formatação, verifique se eles não contêm o código HTML.

Para ter uma versão de texto sem formatação diferente da versão do HTML, você pode desabilitar essa sincronização clicando na opção Sync with HTML na exibição Plain text do seu email.

Em seguida, é possível editar a versão de texto sem formatação conforme desejado.

NOTE
Se você editar a versão Plain text enquanto a sincronização estiver desabilitada, na próxima vez que habilitar a opção Sync with HTML, todas as alterações feitas na versão de texto sem formatação serão substituídas pela versão do HTML. As alterações feitas na exibição Plain text não podem ser refletidas na exibição HTML.

Edição de uma fonte de conteúdo de email no HTML editing-an-email-content-source-in-html

Para os usuários e a depuração mais avançados, é possível visualizar e editar o conteúdo do email diretamente no HTML.

Há duas maneiras de editar a versão HTML do email:

  • Selecione Edit > HTML para abrir a versão do HTML do email inteiro.

  • Na interface WYSIWYG, selecione um elemento e clique no ícone Source code.

    Somente a origem do elemento selecionado é exibida. Você poderá editar o código-fonte se o elemento selecionado for um componente de conteúdo HTML. Outros componentes estão no modo somente leitura, mas ainda podem ser editados na versão HTML completa do email.

Se você modificar o HTML do código, a capacidade de resposta do email poderá ser interrompida. Certifique-se de testá-la usando o botão Preview. Consulte Pré-visualização de mensagens.

Criação de emails para renderização móvel switching-to-mobile-view

É possível ajustar o design responsivo de um email editando separadamente todas as opções de estilo para exibição em dispositivos móveis. Por exemplo, você pode adaptar margens e preenchimento, usar tamanhos de fonte menores ou maiores, alterar botões ou aplicar cores de fundo diferentes que serão específicas à versão móvel do email.

Todas as opções de estilo estão disponíveis na exibição móvel. As configurações de estilo do Designer de email são apresentadas anteriormente nesta página.

  1. Crie um email e comece a editar o conteúdo. Para obter mais informações, consulte Criar um conteúdo de email do zero.

  2. Para acessar a exibição móvel dedicada, selecione o botão Switch to mobile view.

    A versão móvel do email é exibida. Ele contém todos os componentes e estilos que foram definidos na exibição da área de trabalho.

  3. Edite independentemente todas as configurações de estilo, como cor de fundo, alinhamento, preenchimento, margem, família de fontes, cor do texto e assim por diante.

  4. Ao editar qualquer configuração de estilo na exibição móvel, as modificações são aplicadas somente à exibição móvel.

    Por exemplo, reduza o tamanho de uma imagem, adicione um plano de fundo verde e altere o preenchimento na exibição móvel.

  5. Você pode ocultar um componente quando exibido em um dispositivo móvel. Para fazer isso, selecione Show only on desktop devices em Display options.

    Você também pode optar por ocultar esse componente em dispositivos desktop, o que significa que ele será exibido apenas em dispositivos móveis. Para fazer isso, selecione Show only on mobile devices.

    Por exemplo, essa opção permite exibir uma imagem específica em dispositivos móveis e outra imagem em dispositivos desktop.

    Você pode definir essa opção na exibição para dispositivos móveis ou desktop.

  6. Clique novamente no botão Switch to mobile view para voltar para o modo de exibição de área de trabalho padrão. As alterações de estilo que você acabou de fazer não são refletidas.

    note note
    NOTE
    A única exceção são as configurações Style inline. Qualquer alteração de configuração inline de estilo também é aplicada à exibição padrão da área de trabalho.
  7. Qualquer outra alteração na estrutura ou no conteúdo do email, como edições de texto, upload de uma nova imagem, adição de um novo componente etc. também é aplicado à exibição padrão.

    Por exemplo, volte para a exibição móvel, edite algum texto e substitua uma imagem.

  8. Clique novamente no botão Switch to mobile view para voltar para o modo de exibição de área de trabalho padrão. As alterações são refletidas.

  9. A remoção de um estilo na exibição móvel leva você de volta ao estilo que foi aplicado no modo de desktop.

    Por exemplo, na exibição móvel, aplique uma cor de fundo verde a um botão.

  10. Alternar para o modo de exibição de desktop e aplicar um plano de fundo cinza ao mesmo botão.

  11. Alterne novamente para o modo de exibição móvel e desabilite a configuração Background color.

    A cor do plano de fundo definida na visualização da área de trabalho agora é aplicada: ele fica cinza (não está em branco).

    A única exceção é a configuração Border color. Quando desativado na exibição móvel, nenhuma borda é aplicada mais, mesmo se uma cor de borda for definida na exibição da área de trabalho.

NOTE
A exibição móvel não está disponível em fragmentos.
recommendation-more-help
3ef63344-7f3d-48f9-85ed-02bf569c4fff