Supporto volontario e collaborativo per Joomla!® in italiano

Articoli della Community

Novità su Joomla, estensioni e tendenze del web

documentazione template Orionkit-One

Il calderone dei templates di joomla.it che tutti conosciamo (se qualcuno non lo conoscesse lo trovate qui) è un’ottima risorsa per scaricare templates gratuiti per il nostro CMS preferito. Ci possiamo trovare templates rigorosamente gratuiti divisi per le varie versioni di Joomla.
Il problema è che spesso questi templates sono forniti senza alcuna documentazione, oppure con informazioni brevi e scadenti che ne rendono difficile l’utilizzo. Molto spesso è presente solo il pacchetto del template, senza l’utilissimo pacchetto quickstart, che ci permette di ricreare il sito identico alla demo presente sul sito del produttore ed usarlo come esempio per vedere come è fatto.
Ho quindi deciso di scrivere la documentazione di un template presente nel calderone, provvedendo io stesso a fornire una documentazione di base per rendere la vita più facile a chi lo utilizzerà.

 Template Orionkit-one


Download link: http://orionkit.com/en/ok-one
(Scaricabile senza registrazione ma bisogna fornire un indirizzo mail.)

Demo link: http://demo-one.orionkit.com/

 Il file scaricato contiene il pacchetto del template e due estensioni: una slide ed un modulo video.

  •  orionkit_one-1.11.zip
  • mod_ok_slideshow.zip
  • mod_ok_background_video-1.0.0.zip

Darò per scontato che abbiate installato l’ultima versione di Joomla 3.

Procedete quindi ad installare sia il template che le estensioni nel solito modo: andate nel menu estensioni à gestione à installa file da pacchetto compresso. Completato questo passaggio, la prima cosa da fare per capirci qualcosa, è verificare il layout del template, ovvero quali  sono le posizioni modulo presenti e dove sono inserite nel layout. Andate quindi a vedere il layout dal link à anteprima presente nella pagina dei templates.

posizioni template


 

Questa qui sotto è la pagina che vedrete, con le relative posizioni modulo che vi faranno capire dove far apparire i vari moduli.



Questa però non è la tipologia di stile di pagina usata per l’home page, perché in home page non è presente la posizione dei contenuti, cioè il com_content classico dove solitamente vengono visualizzati gli articoli.

Quindi aprite il template, andate alla scheda layout e scegliete l’opzione no-content and sidebar dal campo page layout.

Salvate e chiudete.

Adesso la pagina delle posizioni modulo vi apparirà modificata come nell’immagine qui sotto:




Slideshow

Dalla pagina delle posizioni modulo possiamo vedere che la posizione in cui si trova la slide show si chiama appunto slide show.

Andate  quindi nella gestione moduli e create/aprite un modulo di tipo Ok Simple Slideshow.

 La configurazione è abbastanza semplice, si tratta di scegliere le immagini da far vedere nella slide, il titolo, la descrizione, il pulsante leggi tutto ed altre opzioni relative agli effetti da applicare alla stessa.

Questa qui sotto è la configurazione scelta da noi come esempio.

impostazioni slideshow

Naturalmente voi potete variare le impostazioni a vostro piacimento.

Nella sezione slide source potete scegliere le immagini da inserire nella slide. Cliccate sul pulsante “seleziona” e vi apparirà questa finestra da cui potete scegliere le immagini da far apparire nella slide.

slideshow

Posizioni modulo centrali

Adesso si tratta di creare alcuni moduli di esempio e inserirli nelle posizioni centrali del template, cioè sotto la slide. Le posizioni che ci interessano sono:

  • top-a
  • top-b
  • top-c
  • top-d

 Iniziamo con la posizione top-c dove inseriremo il modulo Video.

Modulo Video

 Il modulo video background è anch’esso fornito insieme al template e lo potete installare seguendo la solita procedura da “gestione estensioni”.

 Una volta installato, se lo aprite, vedrete questa serie di campi:



Dovrete inserire l’id del video, non tutto l’url. Per esempio, se questo è l’url completo del video:

 http://www.youtube.com/watch?v=sK2e42jzohk

 Voi dovrete inserire solo l’id, cioè questo:

 ID IS sK2e42jzohk

N.B.

Se posizionate il video nella posizione “slide show” invece che nella posizione top-c, il video assumerà tutta la larghezza della pagina facendo praticamente da sfondo. L’effetto è bello, al posto di una immagine statica nella slide si vede il video.

Posizione top-a

In questa posizione inseriremo un modulo di esempio di tipo html personalizzato. Create quindi un nuovo modulo di tipo html personalizzato ed inserite del testo fino a completare 4 o 5 righe. Assegnategli la posizione top-a in home page, salvate e chiudete.

 Il risultato sarà questo qui sotto.

video

Immediatamente sotto la slide potete vedere il modulo appena creato. Naturalmente potete aggiungere immagini ed altro, oppure scegliere un’altra tipologia di modulo.

Posizione top-b

Nella posizione top-b inseriremo invece 3 moduli contenenti un’immagine, sempre di tipo html personalizzato, che si disporranno automaticamente uno di fianco all’altro.

Create quindi un modulo html personalizzato ed inserite nell’editor solo un’immagine. Assegnategli la posizione top-b, salvate e chiudete. Dopodiché duplicate il modulo per due volte assegna dogli sempre la stessa posizione top-b. Alla fine della procedura dovrete avere tre moduli uguali tutti pubblicati in posizione top-b .

Il risultato è quello che potete vedere nell’immagine qui sotto, con i tre moduli ben visibili.

moduli

Posizione top-d

Nella posizione top-d inseriremo  4 moduli contenenti sia testo che immagini, sempre di tipo html personalizzato, che si disporranno automaticamente uno di fianco all’altro.

Create quindi un modulo html personalizzato ed inserite nell’editor del testo ed un’immagine. Assegnategli la posizione top-d, salvate e chiudete. Dopodiché duplicate il modulo per tre volte assegna dogli sempre la stessa posizione top-d. Alla fine della procedura dovrete avere quattro  moduli uguali tutti pubblicati in posizione top-d .

Il risultato è quello che potete vedere nell’immagine qui sotto, con i quattro moduli ben visibili.

moduli

 

Posizioni modulo footer

L’area centrale è stata completata, vediamo ora l’area rtelativa al piè di pagina, il cosiddetto footer.

Anche in questo caso è possibile pubblicare più moduli che si posizioneranno in maniera automatica uno di fianco all’altro.

Create quindi un modulo menu assegna doli un menù esistente o creandolo per l’occasione ed assegnategli la posizione footer e la visibilità su tutte le pagine. Adesso duplicatelo per altre tre volte sempre nella stessa posizione. Il risultato sarà quello di avere 4 moduli menù uguali posizionati uno di fianco all’altro nel footer, come nell’immagine qui sotto.

footer

Opzioni template

A questo punto la struttura generale del template è completa, ma ci sono ancora alcune cose da fare per renderlo più bello ed accattivante, agendo sulle opzioni del template che vedremo in questo paragrafo. Andate quindi nella gestione del template da estensioni à template ed aprite il nostro template Orionkit_one. Una volta aperto, potrete vedere che il template presenta un menu orizzontale con una serie di opzioni ben visibili nella figura sottostante.

opzioni

Vediamole una per una.

Layout

layout

 

Queste opzioni agiscono sull’intero layout del template, permettendo di scegliere opzioni come il colore di sfondo, il tipo di layout boxed oppure fluido, la visibilità del componente com_content che visualizza i contenuti e le sidecar, la larghezza delle sidecar ed altre cose che potete vedere nell’immagine qui sopra.

Header, logo menu

logo

 

Questa sezione controlla alcune impostazioni dell’header, del logo e del menu principale. Vi permette di cambiare il colore di sfondo dell’header oppure di inserire un’immagine di sfondo, di scegliere se il logo dovrà essere un testo oppure un’immagine, di posizionare il menu pricipale in modalità “sticky” oppure normale a scorrimento con tutta la pagina.

Header modules

 In questa sezione potete controllare alcune opzioni che riguardano i moduli nell’header nelle 3 posizioni presenti: header-left, header-center, header-right. Innanzitutto è possibile nascondere i mobili sui dispositivi mobili, decidere lo stile del font e l’allineamento dei contenuti. Poi sono presenti alcune opzioni di animazione per ogni posizione modulo che se impostate faranno sì che i moduli appaiano con l’animazione che avrete scelto.

Panels

panels

 

I panels riguardano le 4 posizioni modulo centrali:

  • top-a
  • top-b
  • top-c
  • top-d

Per ognuna di esse è possibile impostare il colore di sfondo, alcune animazioni ed altre opzioni che potete vedere nell’immagine.

 Footer e copyright

footer


 

Stesse opzioni con qualche minima differenza sono presenti per la sezione footer e copyright: visibilità su mobile, colore di sfondo, colore contrasto, testo del copyright etc.

 

Contacts e social media

 Infine, come ultimo menu abbiamo quello che imposta le opzioni per i contatti e per i social e che possono comparire sia nell’header che nel footer a seconda delle scelte.

Si può far apparire le info di contatto (telefono e url) e le icone di alcuni tra i social più importanti, decidendo se farle comparire nell’headewr, nel footer oppure in entrambe le sezioni.

 Ecco come si mostra il template di test che abbiamo utilizzato dopo aver configurato tutte le sezioni con le opzioni sinora descritte.

Bene!

A questo punto non ci rimane che augurarvi buon lavoro.



commentaCommenta questo articolo sul forum