Custom HTML en CSS toevoegen aan Sitebuilder
Custom HTML en CSS toevoegen aan Sitebuilder
Sitebuilder biedt uitgebreide aanpassingsmogelijkheden, maar soms wil je meer. Met custom HTML en CSS kun je unieke functionaliteit toevoegen en je design tot in detail perfectioneren. Deze handleiding laat zien hoe je veilig en effectief eigen code toevoegt.
Wanneer custom code gebruiken
Custom code is handig voor diverse situaties:
- Unieke visuele effecten en animaties
- Externe widgets en tools integreren
- Specifieke styling aanpassingen maken
- Tracking pixels toevoegen voor marketing
- Geavanceerde animaties implementeren
- Features die Sitebuilder standaard niet biedt
- Chat widgets van derden integreren
- Aangepaste lettertypen gebruiken
HTML blok toevoegen
HTML element plaatsen
Het toevoegen van een HTML blok is eenvoudig:
- Open de pagina in de editor
- Klik op het plus-icoon om een element toe te voegen
- Zoek naar HTML of Code in de elementenbibliotheek
- Sleep het HTML blok naar de gewenste positie op je pagina
Code invoeren
Na het plaatsen van het blok:
- Klik op het HTML blok om het te selecteren
- Klik op Code bewerken om de editor te openen
- Plak of typ je HTML code in het tekstveld
- Klik op Opslaan om de wijzigingen toe te passen
- Je ziet direct het resultaat in de preview
Voorbeelden van HTML gebruik
Je kunt HTML gebruiken voor verschillende doeleinden. Denk aan het embedden van externe widgets, het maken van aangepaste structuren met divs en classes, of het toevoegen van interactieve elementen die Sitebuilder standaard niet biedt.
CSS toevoegen
Methode 1: Site-brede CSS
Voeg CSS toe die op alle paginas werkt:
- Ga naar Instellingen in het dashboard
- Klik op Custom Code of Geavanceerd
- Vind de sectie Custom CSS
- Voeg je CSS code toe
- Klik op Opslaan om te bevestigen
Deze CSS wordt op elke pagina van je website geladen.
Methode 2: Pagina-specifieke CSS
CSS die alleen op een specifieke pagina werkt:
- Open de pagina die je wilt aanpassen
- Ga naar Pagina-instellingen
- Vind Custom CSS of Head code sectie
- Voeg je CSS toe met style tags
- Sla de pagina op
Methode 3: Inline styling
Direct op een element in HTML:
- Voeg een HTML blok toe
- Gebruik inline styles in je HTML elementen
- Dit is handig voor eenmalige aanpassingen
CSS basis uitgelegd
Selectoren begrijpen
CSS selectoren bepalen welke elementen je stijlt:
Element selecteren: Style alle elementen van een type, zoals alle h2 koppen of alle paragrafen.
Class selecteren: Style elementen met een specifieke class naam. Classes beginnen met een punt en kun je hergebruiken.
ID selecteren: Style een specifiek element met een unieke ID. IDs beginnen met een hekje en zijn uniek per pagina.
Veelgebruikte CSS eigenschappen
Kleuren en achtergronden: Pas tekstkleuren, achtergrondkleuren en randkleuren aan om je ontwerp te personaliseren.
Spacing en margins: Bepaal de ruimte binnen elementen (padding) en buiten elementen (margin) voor een goede layout.
Typografie: Pas lettergrootte, gewicht, regelhoogte en uitlijning aan voor leesbare tekst.
Layout eigenschappen: Gebruik display, flexbox en grid voor complexe layouts en positionering.
Geavanceerde CSS technieken
Hover effecten maken
Hover effecten maken je website interactief. Wanneer bezoekers met hun muis over een element bewegen, kan de styling veranderen. Denk aan kleurveranderingen, schaduweffecten of subtiele bewegingen.
Transities toevoegen
Transities maken hover effecten vloeiend. In plaats van abrupte veranderingen krijg je soepele animaties. Stel de duur en het type animatie in voor een professioneel resultaat.
Animaties implementeren
Met keyframe animaties kun je complexere bewegingen maken. Elementen kunnen in beeld faden, schuiven of draaien. Begin eenvoudig en bouw langzaam op.
Responsive styling
Pas je styling aan per schermformaat met media queries. Definieer breekpunten voor mobiel, tablet en desktop. Zorg dat je aangepaste styling er op alle apparaten goed uitziet.
JavaScript toevoegen
Head scripts plaatsen
Voor scripts die vroeg moeten laden:
- Ga naar Instellingen en selecteer Custom Code
- Vind de Head sectie
- Voeg je script toe
- Let op: dit kan laadtijd beinvloeden
Body scripts plaatsen
Voor scripts die later kunnen laden:
- Ga naar Custom Code
- Vind de Body of footer sectie
- Voeg je script toe
- Dit is vaak beter voor prestaties
Veelvoorkomende scripts
Veel gebruikte scripts die je kunt toevoegen zijn Google Tag Manager voor analytics en marketing, Facebook Pixel voor advertentie tracking, en chat widgets van providers als Zendesk of Intercom.
Best practices volgen
Organisatie van code
Houd je code georganiseerd:
- Gebruik duidelijke comments om secties te markeren
- Groepeer gerelateerde CSS bij elkaar
- Gebruik beschrijvende class namen die de functie uitleggen
- Maak backups van je custom code
Performance overwegingen
Houd je website snel:
- Minimaliseer de hoeveelheid custom code
- Laad scripts asynchroon waar mogelijk
- Test de impact op laadtijd na wijzigingen
- Verwijder ongebruikte code
Onderhoud plannen
Plan voor de toekomst:
- Documenteer wat je code doet
- Test na Sitebuilder updates of alles nog werkt
- Maak backups van je custom code
- Houd een changelog bij van wijzigingen
Veelgebruikte use cases
Custom fonts integreren
Gebruik Google Fonts of andere webfonts door de font import toe te voegen aan je CSS en vervolgens het font toe te passen op je tekstelementen.
Scroll animaties maken
Laat elementen animeren wanneer ze in beeld scrollen. Combineer CSS animaties met JavaScript scroll detectie voor moderne effecten.
Custom buttons stylen
Maak opvallende buttons met gradients, schaduwen en hover effecten. Pas kleuren aan op je huisstijl voor een consistent ontwerp.
Tooltips toevoegen
Voeg informatieve tooltips toe die verschijnen bij hover. Handig voor extra uitleg bij complexe onderwerpen of producten.
Troubleshooting tips
CSS werkt niet
Als je CSS niet werkt, controleer dan:
- Zijn de selectoren correct gespeld?
- Is er conflicterende CSS van het thema?
- Probeer de !important declaratie als laatste redmiddel
- Check of de CSS daadwerkelijk geladen wordt
JavaScript errors oplossen
Bij JavaScript problemen:
- Check de browser console met F12
- Controleer of vereiste libraries geladen zijn
- Test in incognito modus zonder extensies
- Controleer de volgorde van script loading
Layout problemen debuggen
Bij layout issues:
- Inspecteer met browser DevTools
- Check box-sizing instellingen
- Controleer parent element eigenschappen
- Zoek naar conflicterende margins
Gerelateerde artikelen
Hulp nodig?
We staan voor je klaar! Loop je ergens tegenaan of heb je vragen? Ons supportteam helpt je graag persoonlijk verder. Stuur ons een berichtje via het ticketsysteem - we reageren meestal binnen een paar uur en denken graag met je mee.
0 van 0 vonden dit nuttig
