> ## 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). # 🎨 Badges en pictogrammen vertrouwen > ℹ️ **Note:** Dit artikel is automatisch vertaald met behulp van AI en kan onjuistheden bevatten. Als er iets mis is, neem dan contact op met ons ondersteuningsteam. De **Badges & pictogrammen vertrouwen** sectie helpt handelaren visueel hun winkel geloofwaardigheid te verbeteren met behulp van aanpasbare vertrouwensindicatoren zoals veilige betaling pictogrammen, garantie badges, levering hoogtepunten, en meer. Deze sectie maakt volledige controle mogelijk over: * Uiterlijk badge * Opmaakgedrag * Typografie * Animaties * Achtergrondstijl * Mobiele respons * Geavanceerde CSS aanpassing --- # **🎨 Sjabloon** ## **Wat het doet** Verandert het algemene visuele thema en kleurenpalet van uw badges. ## **Hoe gebruikt u dit middel?** Klik op de dropdown om te kiezen uit presets zoals: * **Zwarte vrijdag** * **Minimaal** * **Munt** * **Dusk** Deze sjablonen direct helpen overeenkomen met uw winkel branding en visuele stijl. --- # **👀 Zichtbaarheid** ## **Wat het doet** Bepaalt welke apparaten uw vertrouwensbadges kunnen zien. ## **Beschikbare opties** * **Bureaublad en mobiel** → Toont overal badges * **Alleen bureaublad** → Verborgen op mobiele apparaten * **Alleen mobiel** → Verborgen op desktop apparaten Dit helpt handelaren om apparaatspecifieke ervaringen te creëren. --- # **Layout Oriëntatie (Desktop & Mobile)** ## **Wat het doet** Bepaalt hoe individuele badges worden gerangschikt. ## **Beschikbare opties** ### **Horizontaal** Badges verschijnen naast elkaar in één rij. ### **Verticaal** Badges stapelen de ene onder de andere in een kolomindeling. Voor Desktop en Mobiele lay-outs kunnen afzonderlijke controles beschikbaar zijn. --- # **📱 Gedrag van badgeweergave (alleen mobiel)** ## **Wat het doet** Bepaalt hoe badges zich gedragen op kleinere mobiele schermen wanneer de ruimte beperkt wordt. ## **Beschikbare opties** ### **Schuifbaar** Klanten kunnen horizontaal alle badges in één rij bekijken. ### **Omloop** Badges gaan automatisch naar de volgende regel zodat ze allemaal samen zichtbaar zijn. --- # **✨ Animatie** ## **Wat het doet** Voegt invoer animaties toe wanneer badges op de pagina geladen worden. ## **Hoe gebruikt u dit middel?** Selecteer een animatiestijl uit de dropdown. Animatieopties omvatten: * Schuif in * Pop * Vervagen * En meer Animaties helpen de aandacht van de klant te trekken zonder extra ontwerpwerk nodig te hebben. --- # **🖼️ Achtergrondstijl** ## **Wat het doet** Controleert de achtergrond verschijning achter de badge sectie. ## **Beschikbare opties** * Enkele kleur * Kleurverloop * Driekleurverloop * Patronen ## **Aanvullende aanpassing** Handelaars kunnen ook aanpassen: * Verloophoekgraad * Individuele kleuren * Hex-kleurcodes * Uiterlijk patroon Dit helpt badges visueel te mengen in de storefront ontwerp. --- # **📐 Randen en hoeken** ## **Hoekstraal (px)** Bepaalt hoe afgerond de buitenste hoeken verschijnen. * Hogere waarden → Meer afgeronde hoeken * `0` → Scherpe vierkante hoeken ## **Randgrootte (px)** Past de dikte van de buitenrand aan. ## **Randkleur** Verandert de kleur van de grenslijn. ## **Randstijl** Beschikbare stijlen kunnen omvatten: * Vast * Gepunt * Dashed * Geen --- # **📏 Spatiëring (Desktop vs Mobile)** Ruimte kan apart worden aangepast voor Desktop en mobiele apparaten. Dit zorgt ervoor dat uw badge lay-out blijft evenwichtig en responsief over alle schermgroottes. ## **Binnenruimte (opvulling)** Controleert de afstand in de badge container. Beschikbare aanwijzingen: * Boven * Onder * Links * Rechts Dit creëert ademruimte tussen inhoud en grenzen. ## **Buitenruimte (Margin)** Voegt ruimte toe buiten het badgeblok. Beschikbare controles: * Bovenmarge * Ondermarge Handig voor het scheiden van badges van de omliggende storefront secties. ## **Pictogramruimte** Bedient de afstand tussen individuele badges/iconen. --- # **🔷 Pictogramstijl** ## **Badge/pictogramvorm** ### **Wat het doet** Voegt decoratieve achtergronden achter individuele pictogrammen. ### **Beschikbare opties** * Geen * Schild * Embleem * Cirkel * Vierkant --- # **📏 Grootte & Aanpassen** ## **Bureaublad / mobiele grootte (px)** Controleert pictogramgrootte onafhankelijk voor: * Bureaublad * Mobiel ## **Achtergrondkleur** Verandert de achtergrondkleur achter het pictogram. ## **Hoekstraal** Past aan hoe afgerond de pictogramachtergrond wordt. --- # **🚀 Pro Styling (Geavanceerd)** ## **Pictogramanimatie** Voegt continue bewegingseffecten toe aan pictogrammen. Bijvoorbeeld: * Schudden * Pols * Bounce ## **Pictogram Hover Animatie** Triggert animaties wanneer klanten zweven over pictogrammen. Bijvoorbeeld: * Zwevend * Wobble * Holografisch ## **Pictogramschaduw** Voegt diepte- en gelaagde effecten toe met schaduwen. Bijvoorbeeld: * Zachte gloed * Subtiele slagschaduw --- # **➖ Pictogramscheiding** ## **Wat het doet** Voegt scheidingslijnen toe tussen individuele badgepictogrammen. ## **Hoe gebruikt u dit middel?** Schakel het **Pictogramscheiding toevoegen** Checkbox. Dit zorgt voor een schonere afstand en visuele scheiding. --- # **✍️ Typografie (tekst & lettertypen)** ## **Lettertypeselectie** ### **Wat het doet** Controleert de typografie stijl gebruikt voor badge titels en onderverdelingen. ### **Beschikbare opties** * Gebruik uw Shopify themalettertype * Aangepaste lettertypen kiezen * Ondersteuning voor Google Fonts Met behulp van het thema lettertype helpt handhaven storefront consistentie. --- # **📝 Titel- & onderverdelingsstijl** ## **Grootte (px)** Controleert de tekstgrootte. ## **Kleur** Verandert de tekstkleur met: * Kleurkiezer * Hex-code --- # **📐 Tekstruimte** ## **Wat het doet** Regelt de afstand tussen tekstlijnen voor betere leesbaarheid. Een grotere afstand kan inhoud schoner en meer premium maken. --- # **💻 Aangepaste CSS (voor ontwikkelaars)** ## **Geavanceerde functie** Als ingebouwde instellingen zijn niet genoeg, handelaren kunnen toevoegen volledig aangepaste CSS-styling. ## **Beschikbare doelklassen** ### **Volledige badge container** .futureblink-trust-badge ### **Titeltekst** .fb-titel ### **Aanvullende tekst** . onderverdeling ### **CTA-knop** .cta-knop --- # **⚡ Aangepaste CSS toepassen** ## **Hoe gebruikt u dit middel?** 1. Plak uw aangepaste CSS in de editor 2. Klik **Toepassen** 3. Wijzigingen direct bekijken --- # **❗ Overschrijding Shopify Themastijlen** Soms Shopify Thema's kunnen uw aangepaste styling overschrijven. Als uw CSS wijzigingen niet correct verschijnen, gebruik dan: !belangrijk Dit dwingt je styling om prioriteit te nemen boven themastijlen. Voorbeeld: .fb-titel { kleur: rood !belangrijk; } --- # **✅ Eindresultaat** Eenmaal met succes geconfigureerd, helpen Trust Badges & Icons een professionelere, betrouwbaarder en conversiegerichte storefront ervaring te creëren. Met de juiste styling op zijn plaats: * ✅ Geloofwaardigheid verbeteren * ✅ Belangrijke garanties worden zichtbaarder * ✅ Het vertrouwen van de klant neemt toe * ✅ Store branding voelt meer gepolijst * ✅ Mobiele respons verbetert * ✅ Badge lay-outs worden schoner en meer georganiseerd * ✅ Visuele consistentie over de storefront wordt sterker Goed ontworpen vertrouwensbadges kunnen significant zijn