De afteltimer of wel countdown timer is het systeem om een moment in de toekomst aan te kondigen. Denk bijvoorbeeld aan het aftellen tot het moment dat jouw nieuwe site live gaat, of voor het moment dat jou eerste soundtrack uitkomt. Je zou dit systeem ook kunnen gebruiken voor het aankondigen van een sale in jouw Woocommerce Webshop. Ik gebruik dit systeem nauwelijks maar ik kan me wel voorstellen dat voor sommige webdesigners dit een leuke toevoeging is aan de modules van Divi. Ik leg he uit hoe je het in een paar stappen in jouw Divi site zet.
Stap 1: Open de visuele builder
Stap 2: Voeg een sectie in en daarna een Rij en kies een kolomindeling van bijvoorbeeld 1/1.
Stap 3: Nu opent zicht het overzicht van de Divi modules
Stap 4: Klik op de button afteltimer
Stap 6: Automatisch plaatst Divi een ingevulde afteltimer in de 1/1 rij van jouw pagina, bericht of project.
Stap 7: Vul een tekst in in de titel. Wanneer je dit leeg laat (dus de voor ingevulde titeltekst verwijderd), haalt Divi de titel weg en verwijderd het blokje (de DIV) waar dit element in staat. Hierdoor wordt het aftelelement minder hoog. Je kunt nu zelf een tekst blok boven de aftel timer zetten via de tekst module.
Stap 7 vul een datum en tijd in die moet worden weergegeven. Door de balk naar links of rechts te trekken stel je de tijd goed in. Let op het zijn twee balken, eentje voor het uur en eentje voor de minuten.
Stap 8: Nu kan je in de tweede tab de stijl en effecten van de afteltimer instellen.
Let op: Je kunt niet direct in het zwarte voorbeeldblok gaan typen. Dat werkt niet bij deze module op die manier.
Let op: Wanneer de datum en tijd notatie in het engels is, dan staan jouw WordPress taal nog op engels, dat kan je zelf instellen op Nederlands: Ga naar Dashboard / instellingen (settings) en zet kies de juiste taal:
Voor gevorderden: Wil je de dag verwijderen omdat deze 0 is, dus iets die dag plaats vind, dan kan je onderstaande CSS gebruiken:
.days.section.values {
display: none;
}
.sep.section {
display: none;
}
Ik heb dit getest met Divi Versie: 4.27.4
