Onderdelen van een website: uitgewerkt voorbeeld
De onderdelen van een website uitgelegd aan de hand van een gelabeld We.Inc-ontwerp: kop en navigatie, hoofdbeeld, call-to-action, diensten, bewijs, over, contactformulier en footer, plus domein, titel en sitemap.
De meeste websites van kleine bedrijven bestaan van boven naar beneden uit dezelfde acht onderdelen: kop en navigatie, hoofdbeeld, call-to-action, diensten, bewijs, over, contact en footer. Daarnaast zijn er onderdelen die bezoekers niet zien, zoals het domein, de paginatitel en de sitemap. Hieronder zijn ze allemaal gelabeld in een voorbeeldontwerp dat met We.Inc is gemaakt.
Zichtbare onderdelen, van boven naar beneden
- Kop. De strook bovenaan met het logo of de bedrijfsnaam. Die staat op elke pagina, zodat bezoekers weten waar ze zijn.
- Navigatie (menu). Links naar de hoofdpagina’s of -onderdelen: Diensten, Over ons, Prijzen, Contact. Houd het bij vijf tot zeven items. Op telefoons klapt het menu dicht achter een knop.
- Hoofdbeeld (hero). Het eerste scherm: een kop die zegt wat je doet en voor wie, een korte ondersteunende zin en vaak een afbeelding. Bezoekers beslissen binnen enkele seconden of ze blijven. Bekijk voorbeelden van hero-onderdelen.
- Call-to-action (CTA). De belangrijkste knop, bijvoorbeeld "Plan een gesprek" of "Vraag een offerte aan". Zet die in het hoofdbeeld en herhaal hem onderaan.
- Diensten of functies. Je aanbod, met één kort blok per onderdeel en een zin over het resultaat voor de klant.
- Bewijs. Reviews, voorbeelden van werk, certificeringen of garanties. Gebruik alleen echte voorbeelden.
- Over. Wie er achter het bedrijf zit en waarom diegene te vertrouwen is. Bekijk hoe je een Over ons-pagina schrijft.
- Contact. Een formulier, telefoonnummer, e-mailadres en adres of werkgebied. Bekijk hoe je een contactformulier toevoegt.
- Footer. De strook onderaan: contactgegevens, extra links, privacybeleid en links naar sociale media.
Onderdelen die bezoekers niet zien
| Onderdeel | Wat het doet |
|---|---|
| Domein | Je adres, zoals jouwbedrijf.com |
| Hosting | De computers die de site aan bezoekers tonen |
| Paginatitel en beschrijving | Wat zichtbaar is in Google-resultaten en browsertabbladen |
| Sitemap | Een lijst van je pagina’s waarmee zoekmachines ze kunnen vinden |
| Favicon | Het kleine pictogram in het browsertabblad |
| Deelafbeelding | De afbeelding die verschijnt wanneer je link op sociale media wordt gedeeld |
Dezelfde onderdelen, verschillende paginalengtes
Een one-page-website zet al deze onderdelen onder elkaar op één scrollpagina; het menu springt naar elk onderdeel. Een website met meerdere pagina’s geeft Diensten, Over ons en Contact een eigen pagina, maar gebruikt op elke pagina dezelfde kop en footer. Een webapp voegt daar inloggen en opgeslagen gegevens aan toe.
Alle onderdelen toevoegen met We.Inc
Elk We.Inc-sjabloon bevat al een kop, navigatie, hoofdbeeld, CTA en footer. Gepubliceerde sites krijgen ook automatisch een titel, sitemap en deelafbeelding. Met het Free-abonnement kun je maximaal 3 sjabloonsites publiceren op een we.inc-adres, zonder AI-tegoed of eigen domein. Betaalde abonnementen vanaf $20/month voegen AI-bouwfuncties en een eigen domein toe. Bekijk de sjablonen.
Veelgestelde vragen
Wat zijn de belangrijkste onderdelen van een website?
Kop, navigatie, hoofdbeeld, call-to-action, diensten, bewijs, over, contact en footer, plus verborgen onderdelen zoals domein, hosting, paginatitels en sitemap.
Wat is het hero-onderdeel van een website?
Het eerste scherm dat bezoekers zien: een kop, korte ondersteunende tekst, vaak een afbeelding en de belangrijkste call-to-actionknop.
Wat hoort er in de footer van een website?
Contactgegevens, extra links zoals privacybeleid en voorwaarden, links naar sociale media en soms een herhaling van het korte menu.
Heeft een one-page-website dezelfde onderdelen?
Ja. Dezelfde onderdelen staan onder elkaar op één pagina. Het menu springt naar elk onderdeel in plaats van een nieuwe pagina te openen.
Gratis beginnen · Geen creditcard nodig
Product
- AI Website Builder: Describe a site in plain English; it's live in minutes
- White Label Platform: Your brand, your domain, your margin
- Enterprise: SSO, custom SLAs, and dedicated support
- Developer API: Embed site generation into your SaaS
Who It's For
- For Agencies: Resell under your brand
- For Freelancers: Your own branded builder
- For Hosting Providers: Add a builder to your stack
- For SaaS Platforms: Embed site creation via API
- For Startups
- For Financial Services
- For Healthcare
Features
- Drag & Drop Editor
- Built-in SEO Tools
- Custom Branding
- Client Dashboard
- Reseller Billing (Stripe Connect)
Resources
- Blog
- Help Center
- Free Business Tools
- Website Templates
- Glossary & Guides
- Integrations
- Developers
- Benchmark
- Windows App