ℹ️ 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.

Wilt u volledige controle over hoe uw Trust Badges eruit zien op uw storefront? 🎨

Terwijl het tabblad Ontwerp biedt uitgebreide aanpassingsopties, Aangepaste CSS geeft u de flexibiliteit om geavanceerde styling aanpassingen te maken die verder gaan dan de standaard instellingen.

Of u nu verfijnt, strenge merkrichtlijnen aanpast, aangepaste visuele effecten toevoegt of themaspecifieke stylingconflicten oplost, Custom CSS biedt volledige creatieve controle over uw Trust Badge-ontwerp.

⚠️ Voordat u begint

Voordat u Aangepaste CSS gebruikt:

• Zorg ervoor dat je al een Trust Badge hebt gemaakt.
• Heb een basiskennis van CSS of toegang tot een ontwikkelaar.
• Begrijp dat Custom CSS standaard Design-instellingen kan overschrijven.

💡 Als je nog geen Trust Badge hebt gemaakt, maak er dan een voordat je verder gaat met deze gids.

🛠️ Stap 1 Open het ontwerptabblad

Open de Hoppy Trust Badges app en navigeer naar de Trust Badge die u wilt aanpassen.

Dan:

➡️ Klik op de Ontwerp tab.

Scroll naar beneden totdat u de Aangepaste CSS Section.

Deze sectie bevat alle tools die nodig zijn om aangepaste styling toe te voegen en te beheren.

🎨 Stap 2 Open de aangepaste CSS sectie

Binnen de Aangepaste CSS sectie vindt u:

• Een CSS-editor
• A Beeldgids knop
• Een Toepassen knop
• Een starter CSS-sjabloon

De starter template bevat de beschikbare selecties die kunnen worden aangepast voor uw Trust Badge.

Dit maakt het gemakkelijker om te beginnen met styling zonder handmatig te inspecteren storefront elementen.

✍️ Stap 3 Toevoegen van uw aangepaste CSS

De editor bevat verschillende vooraf geconfigureerde selectoren die specifieke Trust Badge elementen richten.

Beschikbare selectoren

Container

Selectie

Omschrijving

.futureblink-trust-badge

Volledig vertrouwen badge container

Titel

Selectie

Omschrijving

.futureblink-trust-badge .fb-title

Hoofdtitel

.futureblink-trust-badge.mobile .fb-title

Mobiele titelstyling

💡 Voor drijvende badges gebruikt de titelkiezer .title in plaats van .fb-title.

Aanvullende

Selectie

Omschrijving

.futureblink-trust-badge .subheading

Omschrijving

.futureblink-trust-badge.mobile .subheading

Mobiele omschrijving styling

Pictogrammen

Selectie

Omschrijving

.futureblink-trust-badge .icon

Penseelpictogrammen

.futureblink-trust-badge.mobile .icon

Mobiele pictogramstyling

Oproepknop

Selectie

Omschrijving

.futureblink-trust-badge .cta-button

CTA-knop

.futureblink-trust-badge.mobile .cta-button

Mobiele CTA-knopstyling

Voorbeeld CSS

Om opvulling toe te voegen aan de badge container en de titel aan te passen:

.futureblink-trust-badge {
padding: 20px;
}

.futureblink-trust-badge .fb-title {
color: #2c3e50;
font-size: 18px;
}

💡 U kunt aanvullende CSS-selectoren, media-queries, animaties en stylingregels toevoegen indien nodig.

📱 Stap 4 toevoegen Mobile-Specific Styling

Om mobiele apparaten specifiek te richten, gebruik de .mobile variatie van de keuzemogelijkheden.

Voorbeeld:

.futureblink-trust-badge.mobile .fb-title {
font-size: 14px;
}

De app wraps automatisch .mobile selectoren in een mobiele mediaquery wanneer ze op uw storefront worden weergegeven.

Als u de voorkeur geeft aan het schrijven van uw eigen media-queries, worden ze precies zoals ingevoerd bewaard.

✅ Stap 5 Toepassen van uw CSS

Zodra uw CSS is toegevoegd:

➡️ Klik Toepassen.

De live preview updates automatisch, zodat u uw styling wijzigingen onmiddellijk te bekijken.

Als u uw aangepaste styling later wilt verwijderen:

➡️ Klik Reset.

Dit verwijdert uw Custom CSS en herstelt de standaard Design-instellingen.

👀 Stap 6 Bekijk het voorbeeld

Na het toepassen van uw CSS:

➡️ Bekijk het voorbeeld van het bureaublad.

➡️ Bekijk de Mobile preview.

Controleer of:

• Tekst verschijnt correct.
• Pictogrammen blijven goed op elkaar afgestemd.
• De ruimte lijkt consistent.
• Knoppen tonen zoals verwacht.

Indien aanpassingen nodig zijn:

➡️ Update de CSS.

➡️ Klik Toepassen Alweer.

Het voorbeeld wordt na elke wijziging automatisch vernieuwd.

💾 Stap 7: Opslaan en publiceren

Zodra je tevreden bent met het ontwerp:

➡️ Klik Opslaan.

➡️ Klik Publiceren.

⚠️ Alleen opslaan werkt de storefront niet bij.

De Trust Badge moet ook worden gepubliceerd voordat klanten de wijzigingen kunnen zien.

⚠️ Belangrijke opmerkingen

Aangepaste CSS overschrijft standaardinstellingen

Aangepaste CSS heeft voorrang op de meeste Design tab instellingen.

Als een kleur, afstand, of typografie instelling lijkt te worden genegeerd, zal het waarschijnlijk worden overschreven door uw CSS.

Automatische !belangrijke behandeling

De app voegt automatisch toe !important prioriteit aan CSS verklaringen bij het renderen van stijlen op de storefront.

U hoeft niet toe te voegen !important handmatig.

Scoped Styling

Aangepaste CSS wordt automatisch gecontroleerd op de specifieke Trust Badge die wordt bewerkt.

Dit voorkomt styling conflicten met:

• Andere vertrouwensbadges
• Themaelementen
• Andere componenten voor opslag

Lege selecties zijn toegestaan

U hoeft niet elke selector in het sjabloon te gebruiken.

Voeg alleen stijlen toe aan de elementen die u wilt aanpassen.

CSS-validatie

De editor valideert geen CSS syntax.

Als een stijl niet correct wordt toegepast:

➡️ Controleer de namen van de selectie.

➡️ Controleer beugels en puntkomma's.

➡️ Bekijk de CSS voor syntax fouten.

❓ Problemen oplossen

Als uw stijlen niet correct verschijnen:

➡️ Bevestig dat Toepassen is geklikt.

➡️ Controleer de vertrouwensbadge is Opgeslagen en Gepubliceerd.

➡️ Controleer of de namen exact overeenkomen met het opgegeven sjabloon.

➡️ Test in een Incognito of Privé browservenster.

➡️ Vernieuw de storefront om gecachede stijlen te wissen.

🎉 Eindresultaat

✅ Uw Trust Badge kan worden aangepast buiten de standaard Design instellingen.

✅ Branding, afstand, typografie en pictogramstyling kunnen nauwkeuriger worden geregeld.

✅ Desktop en mobiele lay-outs kunnen onafhankelijk worden gestyled.

✅ Aangepaste stijlen blijven geïsoleerd van de geselecteerde Trust Badge.

Custom CSS biedt een flexibele manier om een meer gepolijste en merkconsistente Trust Badge ervaring te creëren met behoud van de eenvoud van de ingebouwde ontwerptools van de app. ✨

Bijgewerkt op: 10/09/2026