A volte, per avere maggiore chiarezza, può essere utile aggiungere elementi che facilitino la lettura degli articoli agli utenti dei nostri siti sul CMS Joomla!. A questo proposito, vi mostriamo oggi una guida al plugin Tabs, che permette di inserire dei pratici blocchi a schede dove scrivere alcune didascalie.
Innanzitutto, seguiamo sempre lo stesso percorso Estensioni -> Installa e scriviamo Tabs nel campo di ricerca. Il primo risultato sarà quello mostrato nell’immagine in basso.
Scarichiamolo ed installiamolo in versione Free per poi andare nell’editor e vederlo finalmente disponibile.
Facendo clic su Tabs (sottolineato in rosso), verremo reindirizzati su un’altra pagina dove potremo iniziare ad inserire le schede.
Inseriamo adesso il nome della tab e, successivamente l’alias e la classe CSS che può essere un colore o una classe bootstrap (tipo “info”) che assegnerà un colore associato al codice.
Accanto a questi campi c’è un altro menu per decidere il layout dei vari tab.
Si può decidere il colore dei tab inattivi, se mettere o meno un bordo, se aggiungere anche un riempimento col colore scelto e, infine, l’allineamento del contenuto dei tab.
Inseriamo quindi tutte le tab necessarie, magari associandole a colori diversi.
È possibile lavorare sulle caratteristiche delle tab anche lavorando sul codice direttamente dall’editor.
In questo modo, basterà inserire il codice {tab} seguito dai campi che vediamo nella prima riga, dove sono indicati:
– tab title
– alias
– class (dove indichiamo il colore. Aggiungiamo anche “solid” in caso volessimo che tutta la linguetta sia piena di colore. Aggiungiamo anche “color_content” se vogliamo che il blocco sia tutto del colore selezionato)
Solo nella prima riga, andrà indicata la presenza di:
– outline_handles, ovvero l’eventuale sfondo grigio delle schede inattive
– outline_content, ovvero l’eventuale bordo del blocco di contenuto
Una volta inseriti tutte le caratteristiche e tutti i testi delle tabs, inserire il campo di chiusura {/tabs}.
Nell’immagine in basso è possibile vedere un semplice esempio del risultato.
Gli utilizzi di questo plugin sono molteplici, è possibile ad esempio inserire anche delle sottoschede dentro una tab facendo clic sull’icona apposita o lavorando sempre sul codice, l’importante è ricordare sempre di chiudere il campo con {/tabs}.
