O elemento FAQ, iniciais da expressão em inglês “Frequently Asked Questions”, que pode ser traduzido para o português como “Perguntas Frequentes” é um elemento interessante de ser adicionado as suas páginas pois possibilita esclarecer as principais dúvidas dos seus clientes (quebrar objeções) em um modelo de autoatendimento.
Em caso de dúvidas sobre como adicionar o FAQ em suas páginas, acesse nosso tutorial sobre como funcionam as configurações gerais de elementos no link abaixo:
As configurações do FAQ são divididas entre a linha vermelha e a verde.
Primeiro vamos ver as configurações da linha vermelha, que representa individualmente cada uma das perguntas que, por padrão, são representadas pelo texto “FAQ” e respostas que são representadas pelo texto “Resposta”. Para edita-los clique nos textos e edite conforme desejado.
Cada linha vermelha do texto disponibiliza um ícone de lixeira para excluir a respectiva linha, um ícone com o símbolo + para adicionar uma nova linha para pergunta e outra para resposta e uma engrenagem para acessar as configurações que veremos após a imagem abaixo:
Ajustes
· Configurar ação
Nas configurações de ação você pode configurar qual ação deseja que o elemento tenha, conforme abaixo:
1. Nenhuma ação > A imagem não terá nenhuma ação.
2. Abrir link externo > Nessa opção poderá configurar uma URL externa para que quando o elemento seja clicado o usuário seja direcionado para essa URL.
3. Rolar Página > Esse recurso pode ser utilizado no elemento com a ação de rolar a página (âncora), selecionando na ação do elemento, o container/seção pela ID que configurou, para que ao clicar na imagem, role até esse container.
4. Ir para página do funil > Nessa opção poderá escolher uma página do funil para qual deseja direcionar o usuário ao clicar no elemento.
Posição
Nas configurações de posição é possível configurar a posição (esquerda, centro, justificado, direita) do elemento, largura, margem (topo) e espaçamento interno (topo, baixo, direita, esquerda) inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.
Estilo
· Cor do texto > É possível configurar a cor da fonte utilizando a paleta de cores ou inserindo o código HEX da cor desejada. Para apagar uma cor, clique no ícone de lixeira dentro do campo ‘cor do texto’.
· Fontes > Disponibilizamos centenas de tipos de fontes para você ter mais liberdade na criação do elemento.
· Estilo > Em estilo é possível estilizar a fonte de acordo com o objetivo que deseja destacar no texto. As opções de estilo disponíveis são: Light, Regular, Medium, Bold e Black.
· Tamanho da fonte | Altura da Linha| Opacidade > É possível ajustar inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Avançado
· Efeitos de movimento – Animação
Nas configurações avançadas é possível configurar efeitos de movimento/animação no elemento. Basta selecionar um dos efeitos da lista, conforme desejado. Para excluir uma animação clique no ícone em formato de lixeira a frente do nome da animação.
Quando uma animação é selecionada será disponibilizado a possiblidade de configurar algumas ações relacionado ao comportamento da animação, conforme abaixo:
Comportamento:
- Uma vez > o efeito de animação será apresentado apenas uma vez.
- Infinito > o efeito de animação irá ser apresentado enquanto o usuário estiver na página (loop).
Ativação:
- Animação de entrada > ao acessar a página, o elemento começará a ter o efeito de animação selecionado.
- Ao passar o mouse > A animação só acontecerá quando o cursor do mouse passar pelo elemento.
Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.
Atraso: É possível configurar um atraso no elemento, ou seja, o elemento irá aparecer na tela após o tempo de atraso configurado. Valores até 1000 segundos podem ser inseridos na caixa representada pelo número ou através das setas < >.
· CSS Classes
Nas configurações avançadas é possível configurar CSS para o elemento. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.
É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.
· Pixel do Facebook / Google
Nas configurações avançadas é possível configurar suas conversões do Pixel do Facebook em cliques no elemento. Para mais detalhes sobre como fazer essa configuração, disponibilizamos um tutorial no link abaixo:
https://help.rockfunnels.com/pt-BR/articles/5743172-como-definir-conversoes-do-pixel-do-facebook-em-cliques-de-botao-no-rockfunnels
Atenção: Os elementos de texto (Pergunta e Resposta) devem ser alterados ou excluídos de forma individual, ou seja, cada linha de texto tem seu ícone de engrenagem e lixeira de forma individual na linha vermelha.
Agora veremos as configurações da engrenagem da linha verde que representa as configurações gerais do elemento FAQ (que contém todas as linhas de perguntas e respostas):
Ajustes
· Visibilidade
Nas configurações de ajustes é possível configurar a visibilidade do elemento. Clicando no ícone que representa cada versão “Desktop | Tablet | Mobile” é possível ocultar ou mostrar o elemento em cada um desses dispositivos. Para voltar a mostrar o elemento que foi ocultado, basta clicar novamente no ícone do dispositivo desejado.
· Posição
Nas configurações de posição é possível configurar a posição (esquerda, centro, justificado, direita) do elemento.
· Inverter
Ao acionar a chave, a seta > que torna visível a resposta para as perguntas do elemento FAQ, mudará da direita para a esquerda na página. A ação é visível apenas na página publicada. Para desfazer ação, desative a chave.
· Esconder separador
Ao acionar a chave, as linhas destacadas que separam cada elemento do FAQ irão ficar ocultas. Para desfazer ação, desative a chave.
· Ícone | Largura | Margem | Espaçamento Interno
Para alterar os valores do tamanho dos ícones do elemento, largura, margem (topo), espaçamento interno (topo, baixo, esquerda, direita) insira um valor manualmente na caixa representada pelo número ou ajuste a barra conforme desejado.
Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.
Estilo
· Separador | Ícone
É possível configurar a cor do separador e dos ícones do elemento FAQ utilizando a paleta de cores ou inserindo o código HEX da cor desejada. Para apagar uma cor, clique no ícone de lixeira dentro do campo ‘cor do texto’. Para apagar a cor, clique no ícone de lixeira.
Avançado
· Efeitos de movimento – Animação
Nas configurações avançadas é possível configurar efeitos de movimento/animação no elemento. Basta selecionar um dos efeitos da lista, conforme desejado. Para excluir uma animação clique no ícone em formato de lixeira a frente do nome da animação.
Quando uma animação é selecionada será disponibilizado a possiblidade de configurar algumas ações relacionado ao comportamento da animação, conforme abaixo:
Comportamento:
- Uma vez > o efeito de animação será apresentado apenas uma vez.
- Infinito > o efeito de animação irá ser apresentado enquanto o usuário estiver na página.
Ativação:
- Animação de entrada > ao acessar a página o elemento começará a ter o efeito de animação selecionado.
- Ao passar o mouse > A animação só acontecerá quando o cursor do mouse passar pelo elemento.
Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.
Atraso: É possível configurar um atraso no elemento, ou seja, o elemento irá aparecer na tela após o tempo de atraso configurado. Valores até 1000 segundos podem ser inseridos na caixa representada pelo número ou através das setas < >.
· CSS Classes
Nas configurações avançadas é possível configurar CSS para o elemento. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.
É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.
Para mais detalhes sobre o CSS Classes, acesse nosso tutorial dedicado a esse recurso no link a seguir:
https://help.rockfunnels.com/pt-BR/articles/6891608-como-funciona-a-configuracao-css-classes-no-rockfunnels
