Para configurar uma imagem 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 uma imagem 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 de uma imagem. Clicando no ícone que representa cada versão “Desktop | Tablet | Mobile” é possível ocultar ou mostrar o elemento de imagem em cada um desses dispositivos. Para voltar a mostrar a imagem que foi ocultada, basta clicar novamente no ícone do dispositivo desejado.
· Configurar ação
Nas configurações de ação você pode configurar qual ação deseja que a imagem 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 a imagem seja clicada o usuário seja direcionado para essa URL.
3. Rolar Página > Esse recurso pode ser utilizado em imagens com a ação de rolar a página (âncora), selecionando na ação da imagem 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 na imagem.
· Preenchimento do objeto
Para definir como deseja que a imagem seja preenchida, clique nos ícones que representam o tipo de preenchimento conforme desejado. Você pode selecionar opções para tentar preencher todo o espaço (se a dimensão da imagem permitir) ou ajustar da melhor maneira no espaço sem distorcer a imagem.
Posição
Nas configurações de posição é possível configurar a posição (esquerda, centro, direita) da imagem, tamanho (dimensões e tamanho) margem (topo e 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
· Imagem
Nas configurações de estilo é possível inserir a imagem no local onde adicionou o elemento de imagem. Para isso, basta clicar em “Alterar Imagem” para ter acesso à biblioteca de imagens do RockFunnels ou subir uma imagem do seu dispositivo.
· Borda | Radial | Opacidade
Nas configurações de estilo é possível configurar borda na imagem. Para isso basta ativar a respectiva chave que então será habilitada a possibilidade de inserir a cor da borda através da paleta de cores ou inserindo o código HEX da cor desejada.
Para ajustar o tamanho da borda, insira um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Para configurar o radial basta ativar a respectiva chave e configurar os valores de radial manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Para configurar opacidade, insira um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
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 nas imagens. 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 pela imagem.
Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.
Atraso: É possível configurar um atraso na imagem, ou seja, a imagem 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 a imagem. 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 e Google em cliques na imagem. Para mais detalhes sobre como fazer essa configuração, disponibilizamos tutoriais nos links abaixo:
Facebook > https://help.rockfunnels.com/pt-BR/articles/5743172-como-definir-conversoes-do-pixel-do-facebook-em-cliques-de-botao-no-rockfunnels
Google > https://help.rockfunnels.com/pt-BR/articles/6344804-como-definir-conversoes-de-cliques-de-botao-pelo-google-tag-manager-no-rockfunnels
