O editor de conteúdo web permite projetar, de forma responsiva e muito visual, os conteúdos personalizados que serão exibidos aos seus contatos a partir da sua conta, através de workflows criados para esse fim, sem necessidade de programação adicional no seu site.
No Connectif existem 5 tipos de conteúdos web: popup, full screen, slide in, floating bar e inline. Se quiser conhecer as particularidades de cada um deles, clique em seus nomes para acessar os artigos que detalham cada um deles.
Como acessar?
Você pode acessar o editor de conteúdo web de duas maneiras:
1. A partir de “Conteúdo > Conteúdo Web”. Clique em Criar novo conteúdo web para gerar um novo conteúdo, ou clique em Mais e selecione Editar para modificar um conteúdo web existente.
Ao criar um novo conteúdo web, selecione o tipo e atribua um nome para identificá-lo.
2. A partir do nó "Enviar conteúdo web" de um workflow, clicando em (Editar configuração do nó). Clique em Criar novo conteúdo ou em Editar para modificar um conteúdo web existente.
Interface
O editor de conteúdo web é composto por três blocos:
1. Pré-visualização e salvamento: para salvar ou descartar as alterações realizadas. Você também pode visualizar o resultado final do conteúdo que será inserido no seu eCommerce ou consultar sua versão em HTML.
2. Painel de design: para construir visualmente o conteúdo web utilizando as estruturas e componentes do painel 3 (ferramentas).
3. Ferramentas: para configurar todas as propriedades do conteúdo e utilizar os componentes de layout. Este painel pode ser recolhido ou expandido clicando em (Abrir ferramentas) ou (Fechar ferramentas).
Funcionamento
O editor de conteúdo web utiliza o método de design ‘drag and drop’ (arrastar e soltar), permitindo criar conteúdos de maneira rápida, simples e muito visual.
1. Editar estilo geral
No painel de Ferramentas (3), clique na aba Geral para editar os parâmetros do estilo geral do conteúdo. Você também pode acessar clicando em Propriedades gerais no painel de design (2).
Embora existam vários parâmetros comuns, a configuração das propriedades gerais pode apresentar atributos personalizáveis dependendo do tipo de conteúdo web que você está criando.
Lembre-se de que acima você encontra os links para a documentação de cada tipo.
Os parâmetros comuns a serem definidos são:
-
Nome: nome que você deseja dar ao conteúdo para identificá-lo na sua conta do Connectif.
- Tags: categorize seu conteúdo web e localize-o rapidamente clicando em Adicionar tags e inserindo palavras-chave que o ajudem a identificar.
As tags são muito úteis tanto para encontrar seus workflows rapidamente quanto para agrupá-los de acordo com suas características e finalidade. Recomendamos adicionar tags com:
— Nome da campanha.
— Data de lançamento.
— Público-alvo.
— Objetivo da campanha (venda, fidelização, captação…).
Por exemplo, utilizando as tags "Promoção Primavera", "Clientes recorrentes" e "Captação".
- Bordas: cor, espessura e estilo da borda do seu conteúdo.
- Fundo do conteúdo: cor e efeitos de imagem para a camada de fundo do seu conteúdo.
- Sombra: cor e efeitos de sombreamento da estrutura que exibirá seu conteúdo.
- Z Index: valor numérico que indica a ordem de sobreposição das camadas.
- Responsivo: limite do design responsivo (até qual largura de tela será considerado um dispositivo móvel).
2. Construir um conteúdo web por blocos
No painel de Ferramentas (3), clique na aba Componentes para montar sua composição arrastando e soltando estruturas ou elementos no painel de design (2).
Estrutura
Distribuição que um bloco de elementos adotará dentro do conjunto do design do conteúdo web. Pode ser apresentada em uma ou várias colunas, com proporções iguais ou diferentes.
A estrutura deve ser definida inicialmente. Caso não a inclua, por padrão será utilizada a estrutura de uma coluna.
Após criar um bloco de elementos, posicione o mouse sobre o mesmo e clique em (Editar bloco) para modificá-lo, (Duplicar bloco) para criar outro idêntico ou (Excluir bloco) para removê-lo.
Elementos
Diferentemente das propriedades gerais, os elementos são comuns e podem ser utilizados para projetar todos os tipos de conteúdo web.
Os elementos são as menores partes funcionais de conteúdo para construir o design do seu conteúdo web, arrastando-os para os blocos criados no painel de design (2). Assim como na estrutura, você pode editá-los posicionando o mouse sobre um elemento e clicando no botão (Editar elemento) ou diretamente no conteúdo. Também é possível duplicá-los clicando em (Duplicar elemento), ou excluí-los clicando em (Excluir elemento).
Os elementos disponíveis são:
-
"Texto"
Redija seu conteúdo aplicando formatação rica (negrito, itálico, links...), inserindo variáveis dinâmicas ou ajustando sua disposição no bloco inserido.
As variáveis dinâmicas permitem personalizar o texto com base nos dados coletados no perfil de cada contato. Para saber mais sobre variáveis e melhorar os resultados do seu conteúdo web, recomendamos ler o artigo O que são variáveis e como utilizá-las.
O botão (Converter para HTML) neste e em outros elementos converte o elemento de texto para o formato HTML de maneira irreversível. Para usar esta função, é necessário ter conhecimentos básicos de HTML & CSS. Caso não possua um especialista na equipe, recomendamos não realizar a conversão.
-
"Imagem"
Se a sua imagem já está publicada na Internet, cole a URL da imagem para incluí-la no conteúdo web. Se preferir enviar a partir do seu dispositivo, clique em Enviar imagem ou em ( ), e selecione o arquivo no explorador da janela pop-up. Ao ser carregada, a URL da imagem será preenchida automaticamente.
Como configurações adicionais, é possível atribuir um link à imagem, ajustar seu posicionamento em relação ao bloco que a contém ou alterar a cor do fundo. Opcionalmente, você pode definir o Texto alternativo (que aparecerá caso a imagem não seja carregada) e o Atributo ‘title’ da imagem (o texto exibido ao passar o mouse sobre a imagem, também conhecido como atributo alt).
-
"Botão de link"
Defina o texto que aparecerá no botão, o atributo ‘title’ e o link (pode ser um link específico ou pré-definido para executar uma ação concreta). Para configurar o visual, escolha as cores do texto e do fundo, personalize as bordas e os cantos e ajuste seu posicionamento dentro do bloco.
-
"Divisor"
Configure tanto a cor quanto o posicionamento da linha vertical para separar conteúdos visualmente.
-
"Espaço"
Defina a distância de espaço que deseja inserir entre dois blocos. Por padrão, este bloco é transparente, mas você pode definir uma cor se necessário para o seu design.
-
"Produtos"
Insira um carrossel de produtos que será preenchido com os itens de interesse do contato. Você pode escolher um dos três modelos padrão (Produto básico, Produto com marca ou Produto com preço) ou personalizar o layout no editor de texto. Também é possível definir a estrutura de linhas e colunas de acordo com o dispositivo.
Para que o carrossel de produtos exiba os itens de interesse do contato, é imprescindível o uso de um nó “Obter produtos” antes do nó “Enviar Conteúdo web”. Saiba mais nos artigos Mostrar produtos personalizados em um conteúdo e Nó “Obter produtos”.
-
"HTML"
Incorpore um código HTML personalizado e ajuste sua disposição.
Para inserir este elemento, será necessário contar com um especialista em design CSS e HTML para garantir a correta visualização do conteúdo.
-
"WhatsApp"
Adicione um botão para que os usuários entrem em contato com você ou compartilhem a página que estão visitando via WhatsApp. Defina o texto que aparecerá no botão, o atributo ‘title’, o tipo de ação e a mensagem padrão que será enviada. Para configurar o visual, escolha as cores do texto e do fundo, personalize as bordas e os cantos e ajuste seu posicionamento dentro do bloco.
-
"Vídeo"
Cole a URL do vídeo do YouTube ou Vimeo que deseja exibir no seu conteúdo e configure as opções de reprodução. Se a URL for válida, a miniatura do vídeo será exibida no painel de design (2).
Como configuração visual, você pode ajustar o posicionamento do vídeo ou mudar a cor do fundo.
-
"Contagem regressiva"
Configure o contador regressivo definindo uma data de término e seu formato. Personalize a fonte, o tamanho e a cor dos dígitos e das etiquetas, cujo texto pode ser modificado. Escolha uma cor de fundo e ajuste o posicionamento do contador.
Elementos de formulário
Os elementos de formulário coletam informações do contato a partir do seu conteúdo web, permitindo capturar leads, questionários, pesquisas, etc.
Se você for criar um formulário no seu conteúdo web, recomendamos a leitura do artigo Formulários em conteúdos web.
Os elementos de formulário disponíveis, de acordo com o tipo de dados que coletam, são:
- "Texto": para uma ou mais palavras, todos os caracteres são válidos.
- "Número": para qualquer valor numérico com ou sem decimais.
- "Data": para uma data no formato dia, mês e ano, compatível com o padrão ISO 8601.
- "Email": para um endereço de e-mail válido.
- "Multilinha": para várias linhas de texto.
- "Radio": para exibir uma lista com uma série de opções em que apenas uma pode ser selecionada.
- "Seleção": para exibir um menu suspenso com várias opções onde apenas uma pode ser escolhida.
- "Checkbox": para exibir uma lista com várias opções onde uma ou mais podem ser selecionadas.
- "Botão Enviar": Permite que o contato envie o formulário e registre os dados inseridos no Connectif.
Quando o contato clica neste botão, é gerado um evento "Formulário enviado" que pode ser processado em um workflow através do nó "Ao enviar formulário".
Se você quiser saber mais sobre os tipos de dados que podem ser coletados dos contatos, clique aqui.
3. Criar e utilizar componentes personalizados existentes
Em Componentes personalizados do bloco de ferramentas (3), clique em Criar novo para salvar o design que você criou como um modelo. Selecione o bloco ou os blocos que farão parte do modelo e, na barra de visualização e salvamento (1), clique em Criar novo.
Na janela pop-up, atribua um nome e as tags ao componente personalizado e clique em Salvar.
Os componentes personalizados podem ser utilizados em qualquer tipo de conteúdo web como modelo, independentemente do conteúdo original a partir do qual foram criados.
Também é possível criar rapidamente seus conteúdos web a partir do painel de Ferramentas (3), arrastando para a área de design (2) os componentes personalizados criados por você que se encontram na seção Componentes personalizados da aba Componentes.
4. Revisar as variáveis
Se você não utilizou variáveis no seu conteúdo web, pode ignorar esta seção.
As variáveis são elementos que permitem personalizar seus conteúdos. Verifique as variáveis criadas e quantas vezes elas se repetem nos elementos de texto no painel de Ferramentas (3), na aba Variáveis. Para editar seu formato, clique em .
Saiba mais sobre o formato das variáveis clicando aqui.
5. Pré-visualizar resultado final e salvar
No painel de pré-visualização e salvamento (1), você pode visualizar o resultado final do seu conteúdo web.
Todos os conteúdos criados são responsivos, por isso você pode clicar em Pré-visualizar para revisar o resultado final. Clique em (Visualizar em desktop) para ver o resultado na versão desktop, ou clique em (Visualizar em dispositivo móvel) para ver o resultado em dispositivos móveis.
Uma vez que o resultado do design esteja adequado, clique em Salvar para salvar as alterações do conteúdo web.
Lembre-se de que os estilos aplicados no seu eCommerce podem afetar a visualização do conteúdo web. Verifique a configuração herdada das regras CSS globais se o comportamento visual dos elementos do Connectif na sua web diferir do que é mostrado no Editor de conteúdo.
Parabéns!
Você chegou ao final da lição.
Ficou com dúvidas?
Lembre-se de que você tem à disposição nossos especialistas no Connectif. Para entrar em contato, basta abrir um ticket de Suporte clicando no botão azul de “Ajuda” no seu painel.
Continue aprendendo!
Para aproveitar todo o potencial da sua conta no Connectif, recomendamos continuar com os seguintes artigos:
-
Criar bloco de produtos personalizados em um conteúdo web, para exibir aos seus clientes produtos de interesse.
- Mostrar produtos personalizados em um conteúdo, para exibir produtos personalizados para cada contato por meio de um conteúdo dinâmico e um workflow.
- Mostrar porcentagem de desconto apenas quando houver desconto em um conteúdo web, para destacar os preços promocionais e seu percentual de desconto em um conteúdo.
-
Recomendador na home, para exibir na página inicial os produtos visitados pelos seus contatos.