> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Confiar em Distintivos e Ícones — Desenho e Estilhaço > ℹ️ **Note:** Este artigo foi traduzido automaticamente utilizando IA e pode conter imprecisões. Se algo parecer errado, entre em contato com nossa equipe de suporte. A **Confiar nos & Ícones** seção ajuda os comerciantes visualmente melhorar sua credibilidade loja usando indicadores de confiança personalizáveis como ícones de pagamento seguro, emblemas de garantia, destaques de entrega, e muito mais. Esta seção permite o controle total sobre: * Aspecto do distintivo * Comportamento da disposição * Tipografia * Animações * Estilo de fundo * Responsividade móvel * Personalização CSS avançada --- # **🎨 Modelo** ## **O que ele faz** Muda o tema visual geral e a paleta de cores dos seus crachás. ## **Como utilizar** Clique na lista para escolher entre predefinições como: * **Black Friday** * **Mínimo** * **Menta** * **Crepúsculo** Estes modelos ajudam instantaneamente a combinar com sua marca de loja e estilo visual. --- # **👀 Visibilidade** ## **O que ele faz** Controla quais dispositivos podem ver seus crachás de confiança. ## **Opções Disponíveis** * **Desktop e Mobile** → Mostra crachás em todos os lugares * **Apenas área de trabalho** → Escondido em dispositivos móveis * **Apenas Móvel** → Escondido em dispositivos de desktop Isso ajuda os comerciantes a criar experiências específicas para dispositivos. --- # **Orientação do layout (Desktop & Mobile)** ## **O que ele faz** Determina como os crachás individuais são organizados. ## **Opções Disponíveis** ### **Horizontal** Distintivos aparecem lado a lado em uma única linha. ### **Vertical** Distintivos empilham um abaixo do outro em um layout de coluna. Controles separados podem estar disponíveis para layouts de desktop e Mobile. --- # **📱 Comportamento de Apresentação de Distintivos (Somente Móveis)** ## **O que ele faz** Controla como os crachás se comportam em telas móveis menores quando o espaço fica limitado. ## **Opções Disponíveis** ### **Deslocável** Os clientes podem deslizar horizontalmente para ver todos os crachás em uma linha. ### **Quebrar** Distintivos se movem automaticamente para a próxima linha para que todos sejam visíveis juntos. --- # **✨ Animação** ## **O que ele faz** Adiciona animações de entrada quando os crachás carregam na página. ## **Como utilizar** Selecione um estilo de animação na lista. As opções de animação incluem: * Entrar * Pop * Desvanecer * E mais Animações ajudam a atrair a atenção do cliente sem exigir trabalho de design adicional. --- # **🖼️ Estilo de Fundo** ## **O que ele faz** Controla a aparência de fundo por trás da seção de crachá. ## **Opções Disponíveis** * Cor Única * Gradiente * Gradiente Tricolor * Padrões ## **Personalização Adicional** Os comerciantes também podem personalizar: * Grau de ângulo de gradiente * Cores individuais * Códigos de cores Hex * Aparência padrão Isso ajuda os crachás a se misturar visualmente com o design da loja. --- # **📐 Contornos e Cantos** ## **Raio de Canto (px)** Controla como os cantos exteriores arredondados aparecem. * Valores mais elevados → cantos mais arredondados * `0` → Cantos quadrados afiados ## **Tamanho do Contorno (px)** Ajusta a espessura da borda externa. ## **Cor do Contorno** Muda a cor da linha de borda. ## **Estilo da Borda** Os estilos disponíveis podem incluir: * Sólido * Dotado * Dashed * Nenhum --- # **📏 Espaço (Desktop vs Mobile)** Espaçamento pode ser personalizado separadamente para desktop e dispositivos móveis. Isso garante que seu layout de crachá permaneça equilibrado e responsivo em todos os tamanhos de tela. ## **Espaço interior (Padificação)** Controla o espaçamento dentro do recipiente do distintivo. Instruções disponíveis: * Topo * Fundo * Esquerda * Direita Isso cria espaço para respirar entre o conteúdo e as fronteiras. ## **Espaço exterior (Margem)** Adiciona espaçamento fora do bloco de crachás. Controlos disponíveis: * Margem Superior * Margem inferior Útil para separar crachás das seções da loja circundante. ## **Espaço de Ícones** Controla a distância entre crachás/ícones individuais. --- # **🔷 Styling de Ícones** ## **Distintivo/Forma de Ícone** ### **O que ele faz** Adiciona fundos decorativos atrás de ícones individuais. ### **Opções Disponíveis** * Nenhum * Escudo * Emblema * Círculo * Quadrado --- # **📏 Tamanho e personalização** ## **Ecrã / Tamanho Móvel (px)** Controla o tamanho do ícone de forma independente para: * Área de trabalho * Telemóvel ## **Cor de Fundo** Muda a cor de fundo por trás da forma do ícone. ## **Raio de Canto** Ajusta o quão arredondado o fundo do ícone se torna. --- # **🚀 Pro Styling (Avançado)** ## **Animação de Ícones** Adiciona efeitos de movimento contínuo aos ícones. Os exemplos podem incluir: * Agitar * Pulso * Salto ## **Animação em Hover de Ícones** Ativa animações quando os clientes pairam sobre ícones. Os exemplos podem incluir: * Flutuante * Wobble * Holográfico ## **Sombra de Ícone** Adiciona efeitos de profundidade e camadas usando sombras. Os exemplos podem incluir: * Brilho suave * Sombra Subtil --- # **➖ Separador de Ícones** ## **O que ele faz** Adiciona linhas divisórias entre ícones individuais de crachás. ## **Como utilizar** Activar a **Adicionar separador de ícones** caixa de verificação. Isso ajuda a criar espaçamento e separação visual mais limpos. --- # **✍️ Tipografia (Texto & Fontes)** ## **Selecção da Fonte** ### **O que ele faz** Controla o estilo de tipografia usado para títulos de crachás e subposições. ### **Opções Disponíveis** * Use o seu Shopify fonte do tema * Escolha fontes personalizadas * Suporte ao Google Fonts Usar o tipo de letra do tema ajuda a manter a consistência storefront. --- # **📝 Título & Subtítulo Styling** ## **Tamanho (px)** Controla o tamanho do texto. ## **Cor** Muda a cor do texto usando: * Selector de cores * Código Hex --- # **📐 Espaçamento de Texto** ## **O que ele faz** Controla o espaçamento entre linhas de texto para uma melhor legibilidade. Aumentar o espaçamento pode fazer o conteúdo se sentir mais limpo e mais premium. --- # **💻 CSS personalizado (para desenvolvedores)** ## **Funcionalidade Avançada** Se as configurações incorporadas não forem suficientes, os comerciantes podem adicionar um estilo CSS totalmente personalizado. ## **Classes-alvo disponíveis** ### **Container de Distintivos Inteiros** .futureblink-trust-badge ### **Texto do Título** .fb-title ### **Texto de Subtítulo** .subposições ### **Botão CTA** .cta-botão --- # **⚡ Aplicando CSS Personalizado** ## **Como utilizar** 1. Colar o seu CSS personalizado no editor 2. Clique **Aplicar** 3. Antevisão muda instantaneamente --- # **❗ Substituição Shopify Estilos de Tema** Às vezes Shopify temas podem substituir o seu estilo personalizado. Se suas alterações de CSS não aparecerem corretamente, use: \- É importante. Isso força seu estilo a ter prioridade sobre estilos de tema. Exemplo: .fb-title { cor: vermelho!importante; } --- # **✅ Resultado Final** Uma vez configurado com sucesso, o Trust Badges & Icons ajuda a criar uma experiência mais profissional, confiável e focada na conversão. Com estilo adequado no lugar: * ✅ A credibilidade da loja melhora * ✅ Garantias importantes tornam-se mais visíveis * ✅ Aumenta a confiança do cliente * ✅ Marca de loja se sente mais polido * ✅ A resposta móvel melhora * ✅ Os layouts do distintivo se tornam mais limpos e organizados * ✅ A consistência visual na frente da loja se torna mais forte Emblemas de confiança bem desenhados podem ser significativos!