Criando Mensagens - Editor Drag and Drop

Transcrição

1 Criando Mensagens - Editor Drag and Drop AKNA TREINAMENTOS AKTR /17

2 Sumário Criando Mensagens Editor Drag and Drop O que é?... 3 Pra que serve?... 3 Criando a mensagem... 3 Componentes /17

3 O que é? O Drag & Drop é um editor para criação de mensagens para serem utilizas nas suas ações de marketing. Pra que serve? O objetivo do editor é que mesmo as pessoas que não tenham conhecimento em técnicas de designer e HTML consigam criar uma mensagem próxima de uma profissional apenas clicando e arrastando os componentes presentes no editor. Então vamos lá... Criando a mensagem 1. No menu lateral esquerdo clique no ícone, Conteúdo da Mensagem e selecione a opção Criar uma nova mensagem. 2. Clique em Selecione da opção Editor Drag & Drop. 3/17

4 3. São exibidos os templates para você escolher. Escolha o template mais parecido com a mensagem que deseja criar e clique sobre o mesmo. Você também tem a opção de escolher um template em branco (1) Escolhemos o template Bem vindo. Será carregada a tela de edição da mensagem. Ao lado esquerdo (1) encontram-se os componentes a serem inseridos opcionalmente na mensagem que está se formando ao lado direito (2) /17

5 Cada bloco do template escolhido possui as seguintes opções: Arraste o bloco para alterar a ordem do bloco. Edite o bloco para fazer a edição do bloco e assim alterar texto ou imagem. Duplique o bloco para inserir um bloco idêntico a um já existente. Exclua o bloco remove o bloco. Componentes Para inserir mais componentes ao template escolhido, clique e arraste-o até o template. Além dos componentes já existentes no modelo que escolhemos vamos inserir mais dois componentes: Botão e Redes Sociais. Inserindo o componente botão: Inserindo o componente Redes Sociais : 5/17

6 Depois que você inseriu em seu template todos os componentes desejados (em nosso exemplo temos logo, imagem, texto, botão e redes sociais) faça a edição deles para alterar as imagens e textos de acordo com as suas preferências. Vamos começar pelo componente logo. 5. Edite o componente logo e ao lado esquerdo você encontrará itens para formatação como: espaçamentos e cor de fundo (1), inclusão do logo (2), opcionalmente inclusão de um link (3) e definição de tamanho e alinhamento (4) Clique no botão Substituir e será aberto o Gerenciador de Arquivos. No Gerenciador de Arquivos você terá acesso as seguintes pastas: Arquivos compartilhados Subpastas e imagens compartilhadas pelos usuários de sua conta, ou seja, todos os usuários visualizam as imagens importadas para essa pasta ou as subpastas criadas. Imagens Subpastas e imagens hospedadas por você. Cada usuário visualiza as suas próprias imagens ou subpastas criadas. Templates Imagens oferecidas gratuitamente pela AKNA. Não sedo possível incluir outras imagens ou subpastas. 6/17

7 ATENÇÃO: É possível criar subpastas. Para isso clique na pasta Imagens ou Arquivos compartilhados e depois clique em. 7. Clique em Enviar Arquivo para localizar e enviar as imagens para hospedagem no servidor da AKNA. Na sequência, selecione a imagem e clique em Abrir. ATENÇÃO: O nome dos arquivos a serem importados não podem ter acentuação ou espaço caso seja composto de duas palavras. Hospedada a imagem, selecione-a e clique em: A. para utilizar a imagem. B. para redimensionar o tamanho do arquivo. C. para inserir mais imagens. D. para visualizar a imagem em tela cheia. E. para fazer download do arquivo. 7/17

8 F. para editar a imagem no que se refere ao seu tamanho, coloração, entre outros. G. para copiar a imagem à outra pasta ou subpasta. H. para mover a imagem à outra pasta ou subpasta. I. para renomear ou apagar o arquivo. A B C D E F G H I Veja a substituição do logo. 8. O mesmo procedimento você pode fazer para componente imagem. Veja abaixo: 8/17

9 1 Se desejar também é possível inserir um link, como fizemos com o logo(1). 9. No exemplo abaixo alterarmos a largura para 450 pixels (a altura se ajusta proporcionalmente) e centralizamos a imagem. ATENÇÃO: Perceba que todos os componentes que for utilizar em sua mensagem possuem configurações para o espaçamento lateral, acima e abaixo. Nos componentes de imagem além desses espaçamentos poderá definir também largura e altura. Para inserir imagens com 600 pixels de largura o valor do espaçamento lateral deve estar zero. Exemplo: Ao inserir um novo componente de imagem se o espaçamento lateral ficar setado com 20 pixels a imagem ficará com 560 pixels de largura sendo necessário alterar o espaçamento lateral para zero antes de ajustar a largura da imagem para 600 pixels. 9/17

10 Veja como ficou: Agora vamos editar o bloco texto do nosso template, clicando no botão editar. 10. Nesse caso apague o texto modelo e digite o texto desejado. 10/17

11 Você pode ganhar tempo ao não digitar e, sim, colar um texto de algum outro programa como, por exemplo, do Word usando o botão colar do word. Será exibida a janela abaixo para preenchimento do campo em destaque com o conteúdo desejado. Clique no botão OK para concluir. ATENÇÃO: Algumas formatações do Word podem desconfigurar a mensagem por esse motivo deve-se usar essa opção. Veja como ficou: Para fazer alguma mudança na formação do texto utilize os botões da tela de edição do texto. ATENÇÃO: Parando o mouse sobre um determinado botão a ferramenta informa a funcionalidade do mesmo. 11. Dentre algumas outras formatações possíveis temos o botão Inserir/Editar hiperlink. Com essa função você poderá inserir um link em uma palavra ou frase do texto. Para isso selecione o texto e clique no ícone: 11/17

12 12. Na tela que será exibida informe o endereço do link e clique em OK. 13. Vamos editar o componente botão clicando no ícone:. 12/17

13 14. Efetuamos alterações como espaçamento do bloco para que o botão fique mais próximo do componente texto, alteramos o texto do botão, inserimos um link para endereço de e -mail e centralizamos. Veja as configurações efetuadas: Ainda temos outras alterações possíveis como cor do fundo, tamanho da fonte, cor e estilo da borda e espaçamento do texto. 15. Agora vamos trabalhar com o componente Redes sociais. Edite o componente usando o ícone:. 13/17

14 1. Editando o componente é possível alterar o título (1) e as configurações dele como, por exemplo, cor (2), tamanho (3), fonte (4) e alinhamento (5) Selecione as redes sociais desejadas (1) e defina o tamanho dos ícones (2) Veja abaixo a inserção da rede social facebook: Você pode escolher o tamanho do ícone (1), informar o endereço da sua rede social (2) e o tipo da imagem (3). Para inserir mais de um ícone basta ir escolhendo as redes sociais no campo Selecione uma rede social (com mostrado no item 19). 14/17

15 Em nosso exemplo inserimos três redes sociais: facebook, youtube e linkedin Veja como ficou o componente: Agora verifique a imagem pronta: 18. Sempre que precisar sair do modo edição e voltar a visualizar os componentes, clique em Conteúdo. 19. Você pode ir visualizar como está ficando a sua mensagem clicando no botão visualizar. 15/17

16 A visualização será tanto para uma tela de desktop quanto para um dispositivo mobile. Para fechar a visualização e retornar ao editor clique no botão fechar. O editor também tem uma ferramenta de verificação anti-spam veja as características spam da sua mensagem, as quais podem reduzir a taxa de entrega do . A barra em destaque é preenchida de acordo com as descrições das características spam. No caso na mensagem que criamos o anti-spam aponta para a expressão Todos os direitos reservados. 16/17

17 Caso esse texto seja excluído temos um novo resultado para a classificação anti-spam: ATENÇÃO: A verificação anti-spam é apenas um recurso com as regras mais conhecidas com relação aos principais sistemas anti-spam a ausência dessas características na mensagem não garante a entrega na caixa de entrada do contato. Outros fatores estão envolvidos nessa entrega alem de uma mensagem sem características de spam. 20. Feito todos os ajustes na sua mensagem atribua um nome e clique no botão Salvar. A mensagem é criada e você será direcionado a tela de mensagens cadastradas: Pronto! Agora que você já sabe como criar as suas mensagens mãos a obra e bons negócios! 17/17