Supporto volontario e collaborativo per Joomla!® in italiano

JM Counter, il contatore dinamico per il tuo sito web!

In un universo di siti dinamici all’interno dei quali la grafica e la vivacità sono diventati elementi indispensabili per proporre una presenza in rete fresca e al passo coi tempi, non può mancare nel proprio sito web un contatore dinamico: si tratta di un contatore che, all’apertura della pagina web nel quale si trova, parte da una cifra iniziale fino ad arrivare ad una cifra finale. Può essere utilizzato per diversi scopi e ambiti: evidenziare il numero di clienti, di lavori completati, di download e chi più ne ha più ne metta. Può essere molto utile per evidenziare alcune cifre in maniera immediata.


Il componente in questione si chiama JM Counter, sviluppato da Joomla-Monster.

Per prima cosa bisognerà installare il modulo nel proprio sito Joomla. Potrà essere scaricato da qui (previa registrazione gratuita). Una volta eseguito il download, il modulo andrà installato andando su estensioni -> gestione -> installa e caricando il file compresso in precedenza scaricato.

A questo punto si dovrà attivare il modulo e scegliere dove lo si vorrà visualizzare (lo si trova in estensioni -> moduli, il suo nome di default è “JM Counter”), se in una posizione specifica del template oppure all’interno di un articolo, utilizzando un loadposition.

Cliccando sul nome del modulo potremo configurarlo a nostro piacimento.

Prima di inserire i vari elementi che verranno visualizzati dal modulo dovremo scegliere:

Items in row: quanti elementi mostrare per ogni riga. Supponendo di avere 12 elementi da visualizzare e scegliendo 4 elementi per riga, avremo 3 righe composte da 4 elementi ciascuna.

Module theme: scegliere se si vuole utilizzare il tema di default o un override dal template.


A questo punto si potranno aggiungere i diversi elementi che verranno visualizzati dal contatore. Basterà aggiungerli uno alla volta, cliccando su “add new”.
Verrà aperta la seguente finestra.
Ogni campo ha un preciso significato:

Title: titolo visualizzato sotto ogni elemento.

Icon (image): l’utente può scegliere se inserire o no un’immagine al di sopra di ogni elemento visualizzato. In questo campo va inserito il percorso dell’immagine.

Image ALT: tag alt per l’immagine inserita (descrizione utile per il SEO del vostro sito web).

Icon (span with class): da utilizzare solo se l’immagine non è inserita, utile per richiamare classi speciali.

Icon color: colore dell’icona caricata con “Icon (span with class)”.

From: numero di partenza del contatore.

To: numero finale del contatore.

Unit: la metrica del contatore (%, €, K, ecc.).

Speed: tempo necessario al contatore per arrivare dalla prima all’ultima unità (in millisecondi). Se lasciato vuoto, il valore di default sarà di 1000 millisecondi (ovvero 1 secondo). Più è alto questo valore più tempo impiegherà il contatore per arrivare alla fine.

Interval: tempo di avanzamento di ogni intervallo. Se lasciato vuoto, il valore di default sarà di 100 millisecondi. Più è basso maggiore sarà la risoluzione del contatore.


Una volta settati gli elementi del contatore si potrà invertire la loro posizione tramite un semplice meccanismo di drag and drop tra gli stessi.
Il modulo potrà essere personalizzato ulteriormente tramite un custom.css (che andrà inserito in /templates/nome template in uso/css). Per qualunque personalizzazione basterà andare su /modules/mod_jm_counter/assets (tramite FTP) e guardare il codice css del modulo. Alcuni esempi:


Cambiare le dimensioni del font del contatore

.jmm-counter.default .jm-count {

font-size: 64px;

}

Cambiare la distanza tra contatore di un elemento e titolo

.jmm-counter.default .jmm-subtitle {

margin-top: 10px;

}

Cambiare allineamento di ogni elemento

.jmm-counter.default .jmm-item {

text-align: center

}


È possibile visualizzare una demo del componente qui.