Je openingstijden vermelden op je website is essentieel. Maar een simpele tekst? Dat kan mooier. Met deze custom openingstijden widget geef je je bezoekers direct duidelijk wanneer je open bent – en de huidige dag springt er automatisch uit. Geen handmatig bijwerken, gewoon werken.
Deze heb ik onlangs voor een klant gebouwd:
Simpel maar effectief.
Hier is hoe je in 5 minuten een professionele openingstijden widget toevoegt aan je OnePage site, compleet met automatische dagmarkering.
Waarom deze widget?
De meeste websites hebben openingstijden ergens verstopt in kleine tekst. Deze widget doet het anders:
- Duidelijk overzicht – Grid layout met dagen en tijden naast elkaar
- Automatische dagmarkering – De huidige dag krijgt een opvallende witte achtergrond
- Responsive design – Werkt perfect op desktop én mobiel
- Makkelijk aan te passen – Verander tijden, kleuren en styling naar je eigen smaak
- Nul onderhoud – De dagmarkering werkt altijd automatisch
Perfect voor restaurants, salons, winkels, praktijken – elk bedrijf met vaste openingstijden.
Stap 1: Kies een sectie of gebied
Open je OnePage editor en navigeer naar de pagina waar je de openingstijden wilt plaatsen. Dit kan zijn:
- Je homepage (vaak onderaan bij contactgegevens)
- Een aparte “Contact” pagina
- In je footer
- Bij je vestigingsgegevens
Klik op het + icoon om een nieuw element toe te voegen.
Stap 2: Voeg een Custom Code blok toe
In het element menu zoek je naar “Custom Code” of “Add Custom Code”. Dit vind je meestal bij de geavanceerde opties of onder de categorie “Code”.
Klik erop om het blok toe te voegen aan je pagina.
Stap 3: Voeg de code toe onder HTML
Open het Custom Code element. Je ziet verschillende tabbladen of vakken. Zoek het vak met het label HTML of Code.
Plak de volgende code in het HTML-veld:
<!-- Openingstijden widget -->
<div id="openingstijden-widget"></div>
<style>
.openingstijden-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 20px;
max-width: 380px;
background: #000;
padding: 24px;
border-radius: 16px;
font-family: var(--font-kit-family, "Open Sans", sans-serif);
color: #fff;
line-height: 1.6;
}
.openingstijden-dag,
.openingstijden-tijd {
padding: 6px 10px;
border-radius: 8px;
transition: all 0.2s ease;
}
.vandaag {
background: #fff;
color: #000;
font-weight: 700;
}
</style>
<script>
(function() {
const data = [
{ d: "Maandag", t: "09.00 – 18.00" },
{ d: "Dinsdag", t: "09.00 – 18.00" },
{ d: "Woensdag", t: "09.00 – 18.00" },
{ d: "Donderdag", t: "09.00 – 18.00" },
{ d: "Vrijdag", t: "09.00 – 18.00" },
{ d: "Zaterdag", t: "09.00 – 18.00" },
{ d: "Zondag", t: "Gesloten" }
];
const nl = ["Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag"];
const vandaag = nl[new Date().getDay()].toLowerCase();
const container = document.getElementById("openingstijden-widget");
if (!container) return;
const html = `
<div class="openingstijden-grid">
${data.map(row => {
const isToday = row.d.toLowerCase() === vandaag;
const cls = isToday ? "vandaag" : "";
return `
<div class="openingstijden-dag ${cls}">${row.d}</div>
<div class="openingstijden-tijd ${cls}">${row.t}</div>
`;
}).join("")}
</div>
`;
container.innerHTML = html;
})();
</script>Stap 4: Pas de openingstijden aan
In de code zie je dit gedeelte:
const data = [
{ d: "Maandag", t: "09.00 – 18.00" },
{ d: "Dinsdag", t: "09.00 – 18.00" },
{ d: "Woensdag", t: "09.00 – 18.00" },
{ d: "Donderdag", t: "09.00 – 18.00" },
{ d: "Vrijdag", t: "09.00 – 18.00" },
{ d: "Zaterdag", t: "09.00 – 18.00" },
{ d: "Zondag", t: "Gesloten" }
];Hier pas je de tijden aan naar jouw eigen openingstijden. Bijvoorbeeld:
const data = [
{ d: "Maandag", t: "Gesloten" },
{ d: "Dinsdag", t: "10.00 – 17.00" },
{ d: "Woensdag", t: "10.00 – 17.00" },
{ d: "Donderdag", t: "10.00 – 21.00" },
{ d: "Vrijdag", t: "10.00 – 17.00" },
{ d: "Zaterdag", t: "09.00 – 15.00" },
{ d: "Zondag", t: "Gesloten" }
];Tip: Gebruik het lange streepje (–) in plaats van een gewoon minteken (-) voor een professionelere uitstraling.
Stap 5: Sla op en bekijk het resultaat
Klik op Save of Opslaan en bekijk je pagina. Je ziet nu een strak zwart blok met je openingstijden, waarbij de huidige dag automatisch wit gemarkeerd is.
Kleuren en styling aanpassen
Wil je de widget aanpassen aan je huisstijl? Hier zijn de belangrijkste aanpassingen:
Achtergrondkleur veranderen
Zoek deze regel in de CSS:
background: #000;Verander #000 (zwart) naar je eigen kleur. Bijvoorbeeld:
#1a1a1a– Donkergrijs#2c3e50– Blauwgrijs#8b4513– Bruin
Tekstkleur veranderen
Zoek:
color: #fff;Verander #fff (wit) naar een andere kleur.
Markeerkleur huidige dag
Zoek deze sectie:
.vandaag {
background: #fff;
color: #000;
font-weight: 700;
}Hier kun je de achtergrondkleur (background) en tekstkleur (color) van de gemarkeerde dag aanpassen.
Border radius (hoeken)
Wil je scherpere of rondere hoeken?
border-radius: 16px;Lagere waarde = scherpere hoeken. Hogere waarde = rondere hoeken. 0px = vierkant.
Waarom de dagmarkering zo handig is
Het verschil tussen een statische lijst en deze widget? Gebruikerservaring.
Iemand opent je website op woensdagavond. Met een gewone lijst moet ze scannen welke dag het is en dan de juiste regel vinden. Met deze widget? Woensdag springt eruit. Direct duidelijk.
Geen techniek, geen updaten, gewoon automatisch. De widget checkt elke dag welke dag het is en markeert deze wit. Zondag? Zondag is wit. Dinsdag? Dinsdag is wit.
Simpel, maar effectief.
Veelgemaakte fouten
De widget verschijnt niet
- Check of je de code in het HTML-veld hebt geplakt (niet CSS of JavaScript apart)
- Controleer of het Custom Code element zichtbaar is (niet per ongeluk verborgen)
Verkeerde dag gemarkeerd
- De code gebruikt de systeemtijd van de bezoeker. Als iemand in een andere tijdzone zit, kan de dag afwijken. Voor Nederlandse bezoekers werkt het altijd correct.
Styling werkt niet
- Zorg dat de CSS binnen de
<style>tags blijft - Check of je geen andere CSS hebt die de widget overschrijft
Klaar!
In minder dan 5 minuten heb je een professionele openingstijden widget op je OnePage site, compleet met automatische dagmarkering. Geen plugins, geen gedoe, gewoon copy-paste en klaar.
Wil je meer custom elementen toevoegen aan je OnePage site? Check onze andere tutorials over custom code in OnePage.