De Event Progress Countdown laat zien hoe dichtbij een evenement is met een balk die zich vult naarmate de datum nadert, in plaats van alleen op de cijfers te vertrouwen. Hij is gemaakt voor webinars, lanceringen en live sessies, en bevat een registratieknop en een link om aan de agenda toe te voegen. Er zijn twee versies met identieke instellingen — kies de vorm die past bij de plek waar je hem wilt.
De twee versies
- Event Progress Countdown — één gecentreerde kolom: tekst bovenaan, dan de balk en de timer, dan de knoppen. Goed als paneel in een pagina, of als overname van het volledige scherm.
- Event Progress Countdown (Side-by-Side) — twee kolommen: tekst en knoppen aan de ene kant, timer en balk aan de andere. Goed voor brede herosecties.
Alles hieronder geldt voor beide, tenzij anders vermeld.
Het tijdstip van het evenement instellen
Het aftellen zelf stel je in bij de sectie Timer onder Countdown logic, precies zoals in de andere afteltemplates. Gebruik voor een echt evenement een vaste datum en tijd, zodat iedereen dezelfde deadline ziet. De voortgangsbalk leest datzelfde aftellen, dus je stelt de datum maar één keer in.
Hoe de voortgangsbalk weet waar hij begint
Een aftelklok heeft alleen een einddatum nodig, maar een balk heeft ook een begin nodig — anders valt niet te bepalen wat “halverwege” betekent. Daarvoor is Progress Window (days).
Die beantwoordt: hoe ver vooraf moet de balk beginnen te vullen? Met de standaardwaarde 14 staat de balk twee weken voor het evenement leeg, is hij een week ervoor half vol, en bereikt hij het einde precies als het evenement begint. Stem het af op hoe lang je campagne loopt — 30 voor een actie van een maand, 7 voor een laatste week.
Voordat de periode begint, staat de balk gewoon leeg; er gaat niets mis als je het evenement verder weg zet.
Vullen of leeglopen
Bar Direction bepaalt welke kant hij op beweegt. fill groeit richting het evenement en leest als “bijna zover”. drain loopt leeg naarmate de tijd opraakt en leest als “de tijd dringt”. Beide gebruiken hetzelfde aftellen; het gaat puur om welk verhaal je wilt vertellen.
Berichten die veranderen naarmate het evenement dichterbij komt
Dit is het onderdeel dat de balk de moeite waard maakt. Onder Progress Messages kun je tot vier stappen instellen, elk met een eigen tekst en balkkleur. Naarmate de tijd verstrijkt, wordt het bericht vervangen, zodat de bezoeker altijd het meest urgente bericht ziet dat van toepassing is:
- Stap 1 — 336 uur (14 dagen) — “Zet het in je agenda”
- Stap 2 — 168 uur (7 dagen) — “Nog één week”
- Stap 3 — 24 uur — “Laatste kans om je te registreren”
- Stap 4 — 1 uur — “Begint zo”
Elke stap is een aantal uur voor het evenement. De stap met het kleinste getal waaronder de resterende tijd is gezakt, wordt getoond, dus je kunt ze in willekeurige volgorde invullen. Elke stap bepaalt ook de balkkleur; daarom lopen de standaardwaarden van groen via blauw en amber naar koraal.
Er is altijd maar één bericht zichtbaar — anders dan bij een balk voor de winkelwagenwaarde, waar alle niveaus tegelijk worden getoond. Dat is bewust: de bezoeker kan niets doen om een aftelklok sneller te laten gaan, dus de waarde zit in het veranderende bericht, niet in het zien van de hele ladder.
Zet het geheel uit met Use Changing Messages als je liever een gewone balk hebt.
De balk tonen zonder de cijfers
Zet Show Numeric Timer op No en de aftelvakjes verdwijnen, zodat alleen de balk en het bericht overblijven. Het aftellen loopt op de achtergrond door en stuurt de balk nog steeds aan. Dit is een goede optie als een precieze telling per seconde te agressief aanvoelt voor de doelgroep.
De balk opmaken
- Bar Style — ronde of vierkante uiteinden, en een dunnere of dikkere balk.
- Bar Animation — stripes voor bewegende diagonale strepen, shimmer voor een lichtstreep die voorbijschiet, pulse voor een zacht oplichten, of geen.
- Bar Position (alleen de versie met één kolom) — boven de timer, onder de timer, boven de titel of onder de knoppen.
In de versie naast elkaar staat de balk altijd bij de timer in een eigen kolom, verticaal gecentreerd ten opzichte van de tekst, dus daar is geen instelling voor de positie.
Icoon, tekst en knoppen
- Event Icon — een agenda, videocamera, microfoon, ticket enzovoort, naast de tekst. Zet het uit als je dat liever hebt.
- Eyebrow, Title, Subtext — je koptekst, plus optionele korte regels boven en onder de timer.
- Hoofdknop — je link om te registreren of aan te melden, met een optioneel icoon erin.
- Tweede knop — ingericht als “Aan agenda toevoegen”. Laat die wijzen naar je Google Agenda-link, je Outlook-link of een
.ics-bestand. - Knop ‘No thanks’ — een optionele link om weg te klikken, op een eigen regel onder de twee knoppen.
Als het evenement begint
Stel in de sectie Timer het bericht in dat bij nul verschijnt. Met When Timer Ends op Yes vervangt het de hele inhoud, zodat de bezoeker één duidelijke regel ziet, zoals “Deze sessie is begonnen”. Zet het op No en alleen de timer wordt vervangen.
Uiterlijk
Preset (dark, light of brand), formaat, hoekradius, schaduw, een optionele achtergrondafbeelding met een donkere overlay, optionele decoratieve vormen en de knopanimatie werken precies zoals in de andere afteltemplates.
Sluiten, en een belangrijke opmerking over testen
De sectie Close regelt de X-knop en of die altijd of alleen bij hover verschijnt. Wegklikken zorgt er ook voor dat de actie een tijdje niet opnieuw verschijnt.
Lees dit voordat je test: zodra hij is weggeklikt, verschijnt hij ook voor jou niet meer, voor het aantal sessies dat op de actie is ingesteld. Dat kan er gemakkelijk uitzien alsof de template kapot is, terwijl hij precies werkt zoals ingesteld. Dus:
- Rond je tests en QA eerst af, en zet het verbergen daarna pas aan.
- Wil je hem opnieuw zien, wis dan cookies en sitegegevens voor je site, of gebruik een incognito- / privévenster.
- Het aantal sessies stel je in bij de actie onder Placement / Trigger, niet in de template.
Een opmerking over het voorbeeld in de editor
Het aftellen loopt niet in het editorpaneel, dus daar staat de balk op zijn beginpositie. De modus volledig scherm wordt in de editor ook als gewoon blok weergegeven, zodat die de werkbalk van de editor niet kan bedekken. Gebruik het live voorbeeld om beide goed te zien. Dit is zo bedoeld.
Technische opmerkingen
- De balk wordt aangestuurd door hetzelfde aftellen dat je in de sectie Timer instelt, dus tijdzones en de datumlogica worden voor je geregeld. Er is geen tweede datum om synchroon te houden.
- De balk wordt elke seconde samen met het aftellen bijgewerkt.
- Verberg je een eenheid door het label leeg te maken, dan werkt de balk nog steeds — hij leest de resterende tijd uit de eenheden die wel worden getoond.
- Wie het aftellen ziet, waar en hoe vaak, stel je in bij de actie, niet in de template.
Verder lezen
- Pop-uptemplates voor websites — alle 16 templates, en hoe je het juiste formaat kiest.