Generalmente il countdown di Divi si presenta così:

Divi traduce in Italiano semplicemente il testo al singolare, quindi al di fuori della parentesi, risultando abbastanza orribile.

Cambiare il testo con jQuery

Per poter cambiare il testo è necessario inserire un Script di jQuery attraverso il quale indicare il testo sostitutivo. Siccome Divi prevede due testi diversi per la versione Desktop e Mobile, è necessario cambiarlo in entrambi i casi.

Il seguente script va inserito in un modulo codice, al di sotto del modulo del countdown:


<script>
jQuery(function($){
setTimeout(function(){
// Get the timers
var timers = $('.et_pb_countdown_timer');
timers.each(function(){
var timer = $(this);
// Get the label objects
var days = timer.find('.days');
var hours = timer.find('.hours');
var mins = timer.find('.minutes');
var secs = timer.find('.seconds');
// Change labels on desktop
days.data('full', 'Giorni');
hours.data('full', 'Ore');
mins.data('full', 'Minuti');
secs.data('full', 'Secondi');
// Change labels on mobile
days.data('short', 'Giorni');
hours.data('short', 'Ore');
mins.data('short', 'Minuti');
secs.data('short', 'Secondi');
// Apply changes
window.et_countdown_timer_labels(timer);
});
}, 0);
});
</script>


Il risultato finale sarà questo:

Modificare spaziatura tra numeri e due punti:

Per modificare la spaziatura è necessario aggiungere una semplice riga di CSS, personalmente ho lasciato di Default la larghezza su Mobile e Tablet, modificando esclusivamente quella da Desktop:


/*Rimuovi spazio Desktop*/
@media screen and (min-width:981px){
.et_pb_countdown_timer .section.values {
width: 10%;
}
}


Eliminare lo 0 iniziale per numeri a due cifre:


/*Remove First Letter*/
.et_pb_countdown_timer .section.days p.value:first-letter {
font-size: 0px;
vertical-align: top
}


I due codici CSS vanno inseriti o nel CSS della pagina o in alternativa nel CSS delle opzioni Divi (qualora siano previsti più countdown all’interno del sito)

Dulcis in fundo

Se più comodi, grazie all’aggiornamento di Divi, trovate il CSS personalizzato all’interno del Divi Cloud, nella sezione Snippet di Codice, vi basterà importarlo come di consueto con Sezioni, Righe e Moduli.

Per quanto riguarda lo script, è stato salvato sul cloud come Modulo, sempre all’interno della categoria Snippet di Codice