Zijn de designinstellingen niet genoeg, dan kun je je eigen CSS en HTML aan je website toevoegen. Afhankelijk van wat de code moet doen, zijn er vier plekken voor. Ze zijn allemaal beschikbaar in elk pakket.
Waar je code terechtkomt
- Eigen stylesheet voor de hele website: Instellingen → Headergebied, onderdeel Eigen, extra CSS-stylesheet. Je CSS-regels gelden voor elke pagina en ook voor de mobiele lay-out.
- Code in het head-gedeelte: Instellingen → Headergebied, onderdeel Eigen, extra HTML-code (tussen <head> en </head>). Dit is de plek voor
<style>- en<link>-tags, extra metatags of webfonts. - HTML aan het begin of einde van elke pagina: Instellingen → Algemeen, onderdeel Hele site, velden Begin van elke pagina en Einde van elke pagina. Geschikt voor tellercodes en vergelijkbare fragmenten die op elke pagina moeten staan.
- Code binnen één pagina: in de inhoudseditor via Blok toevoegen → Speciaal → Ingesloten HTML, bijvoorbeeld voor een kaart, een widget of de insluitcode van een video. Met de HTML-editor in de werkbalk kun je bovendien de HTML van de pagina-inhoud rechtstreeks bewerken.
Je eigen stylesheet toevoegen
- Schrijf je CSS-regels in een teksteditor en sla het bestand op met de extensie
.css. - Upload het bestand onder Bestanden → Bestanden uploaden (zie Bestanden uploaden). CSS-bestanden horen in de map voor codebestanden; Automatische mapselectie zet ze daar.
- Open Instellingen → Headergebied en kies het bestand onder Eigen, extra CSS-stylesheet in het veld URL (naar het CSS-bestand):.
- Klik op Opslaan en laad je website opnieuw.
Heb je maar een paar regels nodig, dan kun je ze ook in het veld HTML-code onder Eigen, extra HTML-code (tussen <head> en </head>) zetten, binnen een <style>...</style>-tag.
Code op een pagina insluiten
- Open de pagina via Pagina's → Pagina's beheren → Pagina-inhoud bewerken.
- Klik op Blok toevoegen (of bij een bestaand element op Element erna toevoegen), open het tabblad Speciaal en kies Ingesloten HTML.
- Plak de code en sla de pagina op.
Goed om te weten
- Je wijzigingen zijn meteen live; er is geen aparte testversie van je website.
- Eigen CSS geldt ook voor de mobiele lay-out. Vermijd vaste breedtes en gebruik
max-width: 100%, zodat je elementen op kleine schermen passen (zie Mobielvriendelijke websites). - Volledige HTML-bestanden (
.htm,.html) kun je alleen met het Premium-pakket uploaden. De basis van HTML vind je in Wat is HTML?.