Hero-banner

📍 Te vinden in de app: Beheerpaneel → Inhoud → Pagina-editor (/admin/page-editor) — voeg een blok toe en kies Hero-banner.

De grote blikvanger bovenaan een pagina: een grote foto (of korte video) met je hoofdtitel erop, en maximaal twee knoppen. De meeste stallen zetten één Hero-banner als eerste blok op de homepagina.

Zo ziet dit blok eruit op de website van een stal (voorbeeldinhoud):

De Pagina-editor toont elk blok van een pagina — je kunt ze herschikken, dupliceren, bekijken, bewerken of verwijderen. Het voorbeeld hieronder toont de Hero-banner bovenaan de homepagina in de mobiele app:

Als je de Hero-banner openklapt, zie je de inhoud en de lay-outinstellingen:

Inhoud

• Titel: De grote hoofdtitel.
• Ondertitel: Een korte zin onder de titel.

Layoutstijl

Kies eerst de look — de andere instellingen veranderen mee, zodat je alleen ziet wat bij die lay-out iets doet.

• Afbeelding met tekst erover: Eén foto over de volle breedte, met je tekst erop.
• Afbeelding & tekst naast elkaar: Foto op de ene helft, tekst op de andere.
• Volledige breedte met tekstkaart: Een brede foto met de tekst in een aparte kaart die erboven zweeft.
• Cinematisch (volledig beeld, tekst onderaan): Een dramatische foto over het hele scherm, met de tekst laag in beeld.
• Parallax (scrolldiepte-effect): De foto beweegt trager dan de pagina als bezoekers scrollen, wat diepte geeft.
• Diavoorstelling (overvloeiende foto's, langzaam inzoomen): Tot drie foto's die langzaam inzoomen en in elkaar overvloeien.
• Mozaïek (fotocollage + groot lettertype): Tot drie foto's als collage naast grote tekst.
• Etalage (gradiëntachtergrond, zwevende afbeelding): Een gekleurde achtergrond met één foto die naast de tekst zweeft, plus een klein label boven de titel.
• Diagonaal menu (schuine afbeeldingspanelen die uitklappen tot navigatie): Een rij schuine fotopanelen die elk naar een andere pagina linken. Zie Diagonaal menu hieronder.

Instellingen voor elke foto-lay-out

• Hoogte sectie: Klein, Middel, Groot of Volledig scherm.
• Tekstuitlijning: Links, Midden of Rechts.
• Tekstkleur: Wit, Hoofdkleur, Accentkleur of Donker. Kies wat goed leesbaar blijft op je foto.
• Achtergrondafbeelding: Upload de hoofdfoto. Gebruik een liggende foto van minstens 1920 pixels breed; foto's kleiner dan 1141 × 720 pixels worden geweigerd omdat ze wazig zouden worden.
• Beelduitsnede: Bovenkant, Gecentreerd of Onderkant — welk deel van de foto in beeld blijft als die wordt bijgesneden. Kies Bovenkant als het hoofd van een paard wordt afgesneden.
• Fotobewerking: Geen (originele kleur), Merk-duotoon (de foto krijgt de kleuren van je thema) of Zwart-wit.
• Call-to-action-knop tonen, Tekst call-to-action, Link call-to-action: De hoofdknop, bijvoorbeeld "Bekijk onze paarden" naar /horses.
• Tweede knop tonen, Tekst tweede knop, Link tweede knop: Een optionele tweede, rustigere knop.

Instellingen die alleen bij sommige lay-outs verschijnen

• Tweede afbeelding (optioneel) / Derde afbeelding (optioneel) — Diavoorstelling en Mozaïek: de extra foto's.
• Achtergrondvideo — Afbeelding met tekst erover en Cinematisch, alleen PRO: Een korte clip die achter je tekst speelt in plaats van de foto. Zie Achtergrondvideo hieronder.
• Langzame zoom op de foto — Afbeelding met tekst erover, Volledige breedte met tekstkaart en Cinematisch: De foto zoomt heel langzaam in.
• Merkgloed & korrel-overlay — Afbeelding met tekst erover, Cinematisch en Parallax: Een zachte gloed in je themakleur en een fijne filmkorrel over de foto.
• Achtergrondafbeelding verdonkeren en Donkerte achtergrond (0–100) — Afbeelding met tekst erover (beide) en Cinematisch (alleen aan/uit): Maakt de foto donkerder zodat witte tekst leesbaar blijft. Hoe hoger het getal, hoe donkerder.
• Positie kaart en Doorzichtigheid kaart (0–100) — Afbeelding met tekst erover en Volledige breedte met tekstkaart: Waar de tekstkaart staat (Links, Midden, Rechts) en hoe doorzichtig ze is.
• Positie afbeelding — Afbeelding & tekst naast elkaar en Etalage: Of de foto Links of Rechts staat.
• Badge-tekst (boven titel) — Etalage: Een kort label boven de titel, zoals "Nieuw dit seizoen".
• Achtergrondkleur — Mozaïek: De kleur achter de collage.

Achtergrondvideo

PRO-functie

Voor het uploaden van een video heb je de functie Achtergrondvideo in de hero en een PRO-abonnement nodig. Zonder die twee verschijnt het veld niet in de editor, en wordt een eerder toegevoegde video niet op je website getoond — bezoekers zien dan de achtergrondafbeelding.

Bij de lay-outs Afbeelding met tekst erover en Cinematisch kun je de foto vervangen door een korte bewegende clip, bijvoorbeeld paarden in de wei of een rit in de piste.

1. Open de Hero-banner en kies een van die twee lay-outs.
2. Klik onder Achtergrondvideo op Video uploaden en kies een clip van je telefoon of computer.
   • Bestandstypes: MP4, MOV of WebM.
   • Maximale lengte: 10 seconden.
   • Maximale grootte: 100 MB.
3. Wacht zolang de knop Video wordt gecomprimeerd… toont. Dat kan tot een minuut duren. We maken automatisch een scherpe versie voor computers en een lichtere voor telefoons, zodat de video voor elke bezoeker snel laadt. Het geluid wordt verwijderd.
4. Sla de pagina op.

Zo speelt de video op je website:

• Hij speelt zonder geluid en in een lus.
• Hij speelt alleen zolang de banner in beeld is, zodat de rest van de pagina niet trager wordt.
• Bezoekers die op hun toestel minder beweging of databesparing hebben ingesteld, krijgen de video niet — zij zien je achtergrondafbeelding.

Klik op Video verwijderen om de video weg te halen. Hij wordt meteen gewist.

Je kunt maximaal 20 video's per dag uploaden. Bereik je die limiet, probeer het dan de volgende dag opnieuw.

Stel altijd een achtergrondafbeelding in

Upload ook een Achtergrondafbeelding, zelfs als je een video gebruikt. Die is zichtbaar zolang de video laadt en is het enige wat bezoekers met minder beweging of databesparing zien. Ze helpt ook om je pagina goed in zoekmachines te laten verschijnen.

Diagonaal menu

De lay-out Diagonaal menu gebruikt geen achtergrondfoto. In plaats daarvan maak je een lijst Secties, en elke sectie wordt een schuin fotopaneel dat breder wordt als een bezoeker erop wijst en naar een andere pagina leidt. Klik op Sectie toevoegen en vul in:

• Label: De naam van het paneel, die ook de linktekst is. Verplicht.
• Afbeelding: De foto van het paneel.
• Gekoppelde pagina: De pagina die opent als op het paneel wordt geklikt. Verplicht — een paneel zonder pagina is niet klikbaar.
• Tekstkleur: Wit, Hoofdkleur, Accentkleur of Donker.

De enige andere instellingen bij deze lay-out zijn Hoogte sectie en Tussenruimte secties (de ruimte tussen de panelen).

tip

• Houd de titel kort — vijf à zes woorden leest het best op een telefoon.
• Zet je Transparante header aan in de pagina-instellingen, dan schuift de Hero-banner omhoog achter je menu voor een schermvullende look.