O elemento Bullet Point é uma opção interessante se deseja chamar atenção para pontos importantes e organizar informações nas suas páginas.
Ele se diferencia de um texto comum, pois por padrão possui uma imagem ao lado do texto (ambos editáveis) e isso ajuda a chamar ainda mais atenção para ele.
Para editar o texto do Bullet Point, selecione o texto e edite conforme desejado.
Quando um texto é destacado no construtor do RockFunnels será apresentada uma caixa de edição de texto onde poderá definir o estilo do texto (Negrito, Itálico, Sublinhado ou Riscado), alterar a cor do texto ou do fundo do texto utilizando as cores disponíveis ou inserindo o código HEX da cor desejada.
A Caixa de Edição de Texto é um recurso interessante quando você quiser configurar mais de uma cor ou estilo dentro do mesmo texto. Isso porque se o texto for configurado pelo menu lateral esquerdo, tal configuração será aplicada a todo o texto. Ou seja, caso queira alterar ou destacar apenas uma ou outra palavra dentro do texto, a Caixa de Edição de Texto será o recurso ideal para deixar seu texto ainda mais atrativo e destacado.
Também é possível inserir uma URL para que o usuário seja direcionado ao clicar no texto. Para essa configuração clique no ícone #. Uma janela irá abrir para inserir a URL desejada.
Para edição da imagem, estilização do texto e configurações gerais do Bullet Point 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 o Bullet Point em suas páginas, acesse nosso tutorial sobre como funcionam as configurações gerais de elementos no link abaixo:
Posição
Nas configurações de posição é possível configurar a posição (esquerda, centro, direita) do elemento ao clicar nos ícones que representam as posições, inverter a posição da imagem (esquerda ou direita do texto) ao habilitar/desabilitar a chave ‘inverter’, margem (topo) e espaçamento interno (topo, baixo, direita 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 elemento. Para isso, basta clicar em “Alterar Imagem” para ter acesso à biblioteca de imagens do RockFunnels ou subir uma imagem do seu dispositivo.
· Tamanho | Posição
Nas configurações de estilo é possível configurar tamanho (dimensões e tamanho) e posição da imagem 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.
Tipografia
· 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.
· 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’.
· Tamanho da fonte | Altura da linha > É 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, 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 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
