Como funciona o elemento Bullet Point na Rockty

Introdução

O elemento Bullet Point é ideal para destacar pontos importantes e organizar informações de forma visualmente atraente. Diferente de um texto comum, ele permite a adição de uma imagem ou ícone ao lado do texto, ambos totalmente editáveis. Isso proporciona uma maneira eficiente de apresentar listas, informações resumidas ou chamadas de atenção, facilitando a compreensão do conteúdo pelos usuários.

1. Como Adicionar um Bullet Point

​Adicione um Novo Elemento:

1. Vá até sua página e adicione um novo elemento.

2. Selecione 'Bullet Point' na lista de opções disponíveis no menu lateral esquerdo.

3. Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais.

Acessando as Configurações do Bullet Point:

1. Clique no ícone de engrenagem do Bullet Point ou clique com o botão direito do mouse sobre o elemento para abrir as opções de configuração que serão detalhadas a seguir.

2. Introdução ao Bullet Point

Por padrão, o Bullet Point inclui uma imagem e um texto ao lado, ambos editáveis. Para editar o texto, selecione-o e faça as alterações desejadas.
​
A Caixa de Edição de Texto permite ajustar estilos como Negrito, Itálico, Sublinhado e Riscado, além de alterar cores de texto e fundo utilizando a paleta de cores ou códigos HEX. Para adicionar uma URL ao texto, clique no ícone de link (#) e insira a URL desejada.

💡 Dica: A Caixa de Edição de Texto é útil para personalizar partes específicas do texto, enquanto o menu lateral esquerdo aplica configurações a todo o texto de uma vez.

3. Configurações do Bullet Point

Posição

• Configure a posição (esquerda, centro, direita) do elemento, a posição da imagem (esquerda ou direita do texto), margem (topo) e espaçamento interno (topo, baixo, direita, esquerda). Evite margens negativas para prevenir conflitos com outros elementos da página.
  ​

Estilo

• Imagem: Clique em “Alterar Imagem” para escolher uma nova imagem da biblioteca da Rockty ou fazer o upload de uma do seu dispositivo.

• Tamanho e Posição da Imagem: Ajuste o tamanho e a posição da imagem inserindo valores manualmente ou usando a barra de ajuste.
  ​

  ---

  

Tipografia

• Fontes: Escolha entre centenas de tipos de fontes.

• Estilo: Selecione o estilo da fonte, como Light, Regular, Medium, Bold ou Black.

• Cor do Texto: Defina a cor da fonte usando a paleta de cores ou códigos HEX. Para remover uma cor, clique no ícone de lixeira.

• Tamanho da Fonte e Altura da Linha: Ajuste o tamanho da fonte e a altura da linha inserindo valores manualmente ou ajustando a barra.
  ​
  ​

  

Avançado

• Efeitos de Movimento – Animação: Escolha e configure efeitos de animação. Defina o comportamento (Uma vez ou Infinito), ativação (Animação de entrada ou Ao passar o mouse), duração e atraso da animação.

• CSS Classes: Para aplicar estilos personalizados via CSS, insira um nome para a CSS no campo “Insira ou Selecione” e use o elemento de Script para aplicar o código CSS correspondente.
  ​

  

Conclusão

Os bullet points são uma ferramenta poderosa para organizar informações de forma clara e concisa. Eles ajudam a destacar pontos importantes e facilitam a leitura em páginas densas em conteúdo. Ao seguir as melhores práticas de design e otimização, você pode garantir que seus bullet points contribuam para uma experiência visualmente atraente e informativa, deixando sua página mais dinâmica e fácil de navegar.

Dicas Adicionais

• Utilize a Caixa de Edição de Texto para destacar partes específicas do texto.

• Verifique a compatibilidade da imagem com o design geral da sua página.

• Mantenha o texto conciso: Bullet points são melhores usados para apresentar informações breves e diretas. Evite longas descrições e foque em frases curtas e objetivas.

• Escolha ícones apropriados para os Bullet Points. Utilize ícones que se alinhem ao tema ou estilo visual da página. Ícones coerentes ajudam a reforçar a mensagem e tornam o design mais atrativo.

• Organize suas imagens em pastas para facilitar a gestão dos arquivos usando a Biblioteca de Imagens.

• Use imagens otimizadas para garantir melhor performance nas suas páginas. Recomendamos o formato WebP, que oferece uma boa relação entre qualidade e tamanho do arquivo.

• Para otimizar e converter suas imagens para WebP, você pode utilizar ferramentas como TinyPNG ou Squoosh, que são gratuitas e fáceis de usar.

Precisa de Ajuda?

Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!