Para configurar um ícone, insira um elemento de ícone em sua página e depois acesse o ícone de engrenagem do elemento para disponibilizar as possibilidades de configuração que veremos nesse tutorial.
Em caso de dúvidas sobre como adicionar ícones em suas páginas, acesse nosso tutorial sobre como funcionam as configurações gerais de elementos no link abaixo:
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.
· Ícone
Esse é o local onde poderá selecionar qual ícone ou ícones deseja adicionar a sua página. Para isso, clique na imagem à frente do texto ‘ícone’ para ter acesso à biblioteca de ícones do RockFunnels.
A biblioteca irá exibir centenas de ícones, dos mais variados temas. No topo da biblioteca existe um campo de busca, onde você pode buscar por palavras-chave para encontrar ícones que façam sentido com sua mensagem. Para adicionar o ícone desejado, clique sobre o ícone e ele será adicionado a página.
Configurar ação
Nas configurações de ação você pode configurar qual ação deseja que o ícone tenha, conforme abaixo:
1. Nenhuma ação > O ícone não terá nenhuma ação.
2. Abrir link externo > Nessa opção poderá configurar uma URL externa para que quando o ícone seja clicado o usuário seja direcionado para essa URL.
3. Rolar Página > Esse recurso pode ser utilizado em ícones com a ação de rolar a página (âncora), selecionando na ação do ícone o container/seção pela ID que configurou, para que ao clicar no ícone, 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 ícone.
Posição
Nas configurações de posição é possível configurar a posição (esquerda, centro, direita), tamanho, margem (topo) e espaçamento interno (topo, baixo, esquerda, direita), 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 | Opacidade
É possível configurar as cores dos ícones utilizando a paleta de cores ou inserindo o código HEX da cor desejada. Para apagar uma cor, clique no ícone de lixeira.
Para configurar a opacidade insira um valor manualmente na caixa representada pelo número ou ajuste a barra conforme desejado.
Dependendo do ícone escolhido será possível configurar as cores de cada parte de forma independente (contornos e preenchimentos) por meio dos campos “path” no menu lateral esquerdo.
Avançado
· Alt Seo
O atributo Alt é utilizado em códigos HTML, responsáveis pela criação de páginas web, com o objetivo de atribuir um texto alternativo a imagem, se, por algum motivo, ela não for carregada ou caso o site esteja sendo visto por um screen reader (leitor de tela, muito utilizado para acessibilidade a deficientes visuais).
· 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.
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
· Pixel do Facebook / Google
Nas configurações avançadas é possível configurar suas conversões do Pixel do Facebook em cliques na imagem. 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
