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:
Vá até sua página e adicione um novo elemento.
Selecione 'Bullet Point' na lista de opções disponíveis no menu lateral esquerdo.
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:
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. Para mais detalhes, acesse nosso tutorial sobre CSS Classes.
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.
Precisa de Ajuda?
Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!