Voorbeelden hero-onderdelen voor kleine bedrijven (met uitleg)
Zes voorbeelden van eerste schermen met uitleg: klantdoel, ontwerpkeuze en beperking, plus vergelijkingstabel en kopieerbare briefing. Alle voorbeelden zijn We.Inc-sjabloonontwerpen.
Een hero-onderdeel is het eerste scherm van een pagina. Voor een klein bedrijf moet dit drie dingen duidelijk maken voordat iemand scrollt: wat je doet, waar (of voor wie) en wat de volgende stap is. De zes voorbeelden hieronder zijn We.Inc-sjabloonontwerpen, geen klantwebsites. Bij elk voorbeeld bespreken we het klantdoel, wat het ontwerp doet en wat je moet aanpassen voordat je het gebruikt.
Selectiemethode en doelgroep
We kozen eerste schermen uit de We.Inc-showcase met verschillende aanpakken: kopgericht, beeldgericht, videogebaseerd en portfolio-gericht. Elk voorbeeld beoordelen we aan de hand van de drie vragen hierboven. De screenshots tonen het eerste desktopscherm; op een telefoon wordt hetzelfde hero-onderdeel gestapeld. Controleer je ontwerp dus ook op een echte telefoon (bekijk mobile-first webdesign).
Voorbeelden met uitleg
1. Voordeelkop met twee knoppen (loodgieter)
Doel: snel hulp krijgen. Ontwerp: een korte kop met een voordeel, een zin over de dienst, een duidelijke knop "Nu boeken" en een minder opvallende knop "Bekijk wat we doen". Aanpassen vóór gebruik: de meter toont "Snelle reactie" met een gemiddelde reactietijd. Dat is een tijdelijke claim; vervang die door iets dat klopt (een vergunningsnummer, werkgebied) of verwijder hem. Voeg een telefoonnummer toe voor spoedoproepen.
2. Specifieke belofte, lokaal bewijs en foto (accountants)
Doel: bepalen of het de moeite waard is contact op te nemen. Ontwerp: concrete kop, stadsnaam in de kleine koptekst en zin, foto van de lokale skyline, knop "Vandaag aan de slag" en link "Neem contact op". Aanpassen vóór gebruik: de badge op de foto bevat sjabloontekst; laat alleen een cijfer staan dat je kunt onderbouwen.
3. Foto met rij cijfers (gazononderhoud)
Doel: een offerte voor terugkerend gazononderhoud aanvragen. Ontwerp: eenvoudige kop, stadsnaam in de zin, knoppen "Vraag je offerte aan" en "Bekijk recent werk" en een rij cijfers. Aanpassen vóór gebruik: de cijfers (jaren, projecten, beoordeling) zijn tijdelijke sjabloongegevens. Vervang die door echte, controleerbare cijfers of verwijder ze; verzonnen cijfers schaden vertrouwen en kunnen in strijd zijn met reclameregels.
4. Video op volledig scherm met sfeerkop (restaurant)
Doel: sfeer overbrengen en daarna een reservering laten maken. Ontwerp: de restaurantnaam staat over een keukenvideo; locatie en openingstijden staan onderaan. Aanpassen vóór gebruik: er is geen zichtbare knop; "Reserveren" is een kleine link in de hoek. Voeg een duidelijke knop "Reserveer een tafel" toe en zorg dat de video snel genoeg laadt op telefoons.
5. Close-up van een product met korte tekst (juwelier)
Doel: de kwaliteit van de sieraden laten zien. Ontwerp: de close-upfoto doet het verkoopwerk, met een kop van twee woorden en de knop "Bekijk collectie". Aanpassen vóór gebruik: de kop zegt niet wat het bedrijf aanbiedt of waar het zit. Voeg een regel toe zoals "Handgemaakte ringen en reparaties in [plaats]" en gebruik foto’s van je eigen sieraden.
6. Portfolio-gericht eerste scherm (architecten)
Doel: de kwaliteit van eerder werk beoordelen. Ontwerp: een krachtige kop over een tekening, een kolom met diensten en een projectkaart met "Bekijk project". Aanpassen vóór gebruik: de kop wordt in dit ontwerp halverwege de zin afgebroken ("Gebouwen die // modern hier..."); herschrijf hem zodat de hele zin op elke breedte zichtbaar is. Voeg een manier toe om een aanvraag te doen.
Vergelijking
| Voorbeeld | Zegt wat | Zegt waar | Duidelijke volgende stap | Belangrijkste aanpassing |
|---|---|---|---|---|
| Loodgieter | Ja | Alleen in logo | Ja | Tijdelijke claim, geen telefoonnummer |
| Accountants | Ja | Ja | Ja | Sjabloonbadge |
| Gazononderhoud | Ja | Ja | Ja | Tijdelijke cijfers |
| Restaurant | Deels | Ja (adres) | Nee | Boekingsknop toevoegen |
| Juwelier | Nee | Alleen in logo | Ja | Zeg wat en waar |
| Architecten | Deels | In de zin | Zwak | Afgebroken kop, geen aanvraag |
Voorbeeld en kopieerbare hero-briefing
Ingevuld voor het fictieve bedrijf "Green Row Landscaping" (een demonstratie met labels; geen resultaten geclaimd), gevolgd door een leeg voorbeeld om te kopiëren:
Kop (wat je doet, voor wie): Tuinontwerp en -aanleg voor kleine tuinen
Subregel (waar + hoe): In [plaats]. We sturen een schriftelijke offerte en doen het werk zelf.
Hoofdknop: Plan een tuinbezoek
Tweede link: Bekijk recente tuinen
Bewijsregel (alleen echt): Verzekerd - link naar Google-reviews
Afbeelding: eigen foto van aangelegde tuin, gecomprimeerd
Telefoon (tikken om te bellen): zichtbaar in kop
Kop:
Subregel:
Hoofdknop:
Tweede link:
Bewijsregel (alleen echt):
Afbeelding:
Telefoon:Test kopvarianten met de koppenanalyse.
Wat je wel en niet overneemt
- Neem de structuur over (kop, subregel, knop, bewijs), niet de bewoordingen.
- Laat nooit cijfers, beoordelingen of badges uit een sjabloon staan die je niet kunt onderbouwen.
- Controleer tekst over foto’s of video met de contrastchecker.
- Comprimeer hero-afbeeldingen met de afbeeldingscompressor; dit zijn vaak de langzaamste elementen op de pagina.
Begin met een geschikt sjabloon
Kies een hero-stijl die bij je bedrijf past uit de bedrijfssjablonen en bewerk die met de We.Inc-websitebouwer. Met Free krijg je maximaal 3 sjabloonsites op een we.inc-adres (geen AI-tegoed, geen eigen domein); Starter voor $20/month voegt AI-bouwfuncties en eigen domeinen toe (prijzen). Controleer het resultaat met de websitebeoordeling en bereken de kosten met de websitekostenberekenaar.
Begin met het bouwen van je bedrijfswebsite
Veelgestelde vragen
Wat hoort er in een hero-onderdeel van een website?
Wat je doet, waar of voor wie, één hoofdknop en eventueel een echte bewijsregel en een foto van je eigen werk.
Moet een hero-onderdeel video gebruiken?
Alleen als video iets toevoegt wat een foto niet kan, snel laadt op telefoons en tekst en knop leesbaar blijven. Voeg altijd een duidelijke knop toe.
Gaan deze voorbeelden over echte bedrijfswebsites?
Nee. Het zijn We.Inc-sjabloonontwerpen die voorbeelden van hero-indelingen laten zien en wat je moet aanpassen voordat je publiceert.
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