Manual do Usuário: Bloco Avatar

Criado em 12 Fevereiro, 2025 • Guia do usuário • 37 visualizações • 4 minutos leu

Manual do Usuário: Bloco Avatar no Microweb.me

O bloco Avatar no Microweb.me permite adicionar uma imagem de perfil personalizada à sua Microweb. Ele é útil para exibir a identidade de uma marca, a foto de um profissional, o avatar de uma comunidade ou qualquer elemento gráfico representativo.

Neste manual, explicaremos cada opção disponível na configuração do bloco Avatar e como utilizá-lo corretamente.

📌 Para que serve o bloco Avatar?

O bloco Avatar foi projetado para exibir uma imagem representativa de uma pessoa, empresa ou comunidade em uma Microweb. Ele pode ser utilizado para:

• Personalizar uma Microweb com uma imagem de perfil.
• Adicionar um logotipo ou identidade visual.
• Criar um elemento visual atraente em uma página.
• Vincular uma imagem a uma URL externa.

🖼️ Tela Inicial do Bloco Avatar

Quando o usuário clica no botão Avatar, aparece uma tela com as seguintes opções:

• Imagem: Permite selecionar e fazer upload de uma imagem do dispositivo.
• Formatos Suportados: .jpg, .jpeg, .png, .svg, .gif, .webp.
• Tamanho Máximo: 5 MB.
• Tamanho: Permite escolher o tamanho do avatar (Exemplo: 75x75px).
• Raio da Borda: Define a forma do avatar. Pode ser reto, redondo ou arredondado. Veja recomendações ao final do artigo.
• Salvar: Botão para confirmar as alterações e aplicar a configuração.

Essa tela é o primeiro passo para configurar e personalizar a imagem do avatar na Microweb. Depois de adicionado o bloco, você poderá editar todas as configurações do botão e personalizá-lo ao máximo.

⚙️ Configuração do Bloco Avatar

A seguir, explicamos cada configuração disponível no bloco Avatar:

1. Imagem

• Permite fazer upload de uma imagem para usar como avatar.
• Formatos suportados: .jpg, .jpeg, .png, .svg, .gif, .webp.
• Tamanho máximo: 5 MB.

2. Excluir Arquivo

• Opção para remover a imagem atual e carregar uma nova.

3. Texto Alternativo (Alt Text)

• Texto que descreve a imagem para acessibilidade e SEO.
• Recomendado para melhorar a indexação nos mecanismos de busca e acessibilidade para pessoas com deficiência visual.

4. Tamanho

• Permite selecionar o tamanho da imagem em pixels.
• Opções padrão: 125x125px e outros tamanhos ajustáveis.

5. Ajuste

• Cobrir: A imagem é ajustada para preencher todo o espaço disponível.
• Conteúdo: A imagem é exibida no tamanho original dentro do contêiner.
• Preencher: A imagem se ajusta completamente ao contêiner, podendo distorcer-se.

6. URL de destino

• Permite adicionar um link à imagem.
• Quando um usuário clica no avatar, ele será redirecionado para a URL configurada.

7. Abrir em nova aba

• Se ativado, a URL de destino será aberta em uma nova aba do navegador.

8. Configuração de Borda

• Espessura da borda: Define a espessura da borda da imagem.
• Cor da borda: Permite selecionar a cor da borda. Ao clicar na cor da borda, a paleta de cores e transparência aparece. Você também pode usar o código HEX para escolher uma cor específica no manual da sua marca.
• Raio da borda:Reto: Mantém os cantos em ângulo reto.Arredondado: Transforma a imagem em um círculo ou com bordas curvas.Pontas arredondadas: Suaviza os cantos da imagem.
• Reto: Mantém os cantos em ângulo reto.
• Arredondado: Transforma a imagem em um círculo ou com bordas curvas.
• Pontas arredondadas: Suaviza os cantos da imagem.
• Estilo da borda:Sólida: Borda contínua e uniforme.Pontilhada: Linha pontilhada ao redor da imagem.Dupla: Linha dupla de borda.Externa / Interna: Define se a borda será aplicada dentro ou fora do contorno da imagem.
• Sólida: Borda contínua e uniforme.
• Pontilhada: Linha pontilhada ao redor da imagem.
• Dupla: Linha dupla de borda.
• Externa / Interna: Define se a borda será aplicada dentro ou fora do contorno da imagem.

9. Configuração de Sombra

• Deslocamento X/Y: Move a sombra horizontal ou verticalmente.
• Desfoque: Ajusta a intensidade do desfoque da sombra.
• Dispersão: Controla a propagação da sombra.
• Cor da sombra: Permite escolher a cor da sombra aplicada ao avatar. Ao clicar na cor da sombra, a paleta de cores e transparência aparece. Você também pode usar o código HEX para escolher uma cor específica no manual da sua marca.

10. Regras de Visualização

• Permite definir quem pode ver o avatar com base em:Data e Hora: Programar quando ele deve ser exibido.Localização: Filtrar por continente, país ou cidade.Dispositivos: Exibir apenas em desktop, tablet ou celular.Sistema Operacional: Filtrar por iOS, Android, Windows, etc.Navegador: Restringir a Chrome, Firefox, Safari, Edge, etc.Idioma do navegador: Exibir o avatar apenas para usuários com um idioma específico.
• Data e Hora: Programar quando ele deve ser exibido.
• Localização: Filtrar por continente, país ou cidade.
• Dispositivos: Exibir apenas em desktop, tablet ou celular.
• Sistema Operacional: Filtrar por iOS, Android, Windows, etc.
• Navegador: Restringir a Chrome, Firefox, Safari, Edge, etc.
• Idioma do navegador: Exibir o avatar apenas para usuários com um idioma específico.

✅ Conclusão

O bloco Avatar é uma excelente ferramenta para personalizar e aprimorar a identidade visual de uma Microweb. Com suas várias configurações, você pode adaptá-lo para diferentes necessidades e otimizar a experiência dos visitantes.

Se quiser aprender mais sobre personalização no Microweb.me, explore outros blocos e suas configurações avançadas. 🚀

🔹 Recomendações

• Use imagens com proporção de aspecto 1:1, como 500x500 pixels.
• Certifique-se de que as imagens não excedam 1 MB de tamanho para melhorar a velocidade de carregamento da Microweb.
• Utilize ferramentas como Canva ou Compressor.io para reduzir o tamanho dos arquivos sem perder qualidade.