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.
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!