Supporto volontario e collaborativo per Joomla!® in italiano

Creare una Intropage per Joomla 2.5

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 

Ogni tanto capita di voler visualizzare, al posto del template predefinito del sito, una pagina introduttiva (Intropage) contenente ad esempio un'immagine cliccando sulla quale si accede al sito vero e proprio.

In questo articolo ad esempio viene proposta una soluzione che prevede l'utilizzo di un file index.html, posizionato nella directory principale del sito, in cui verrà inserita un'immagine con un link al file index.php di Joomla.

La soluzione che propongo in questo articolo prevede invece l'utilizzo di un secondo template vuoto e un articolo di Joomla contenente l'immagine da visualizzare nella Intropage.

Quello che ci occorre per creare una Intropage è:

  1. l'immagine da visualizzare nella Intropage
  2. un templete vuoto scaricabile da questo link
  3. un editor di testo con il quale modificheremo alcuni file del template vuoto (consiglio notepad++)

Ho testato il procedimento con Joomla 2.5 ma non vuol dire che non funzioni con le versioni precedenti e successive di Joomla.

Perchè un template vuoto?

In realtà potremmo usare il template predefinito del sito facendone una copia e modificandolo successivamente, ma questa soluzione prevede un grado di esperienza molto più elevato e preferisco fare le cose in modo più semplice.

Adesso procediamo come segue:

1) creiamo un nuovo articolo dal titolo "Intropagecontent" assegnandolo alla categoria "non categorizzato" o altra categoria appositamente creata.

2) nell'articolo inseriamo l'immagine da visualizzare nella Intropage. Sull'immagine creiamo un link alla voce di menu Home del sito. L'editor JCE aiuta molto visto che visualizza tutte le voci di menu del sito. In ogni caso il collegamento dovrebbe essere così formato:

index.php?option=com_content&view=featured&Itemid=101

dove l'Itemid 101 è il valore dell'id della voce di menu Home. Quando create il link sull'immagine fate copia e incolla del testo sopra riportato incollandolo nella casella URL e modificate solo il valore dell'ItemId con quello della vostra voce di menu Home.

 

Intropage link su immagine

 

Per vedere l'id della voce di menu Home andate in Gestione Menu e visualizzate il menu che contiene la voce Home (in genere il Menu principale).

 

Intropage id voce menu

 

3) da Gestione Menu creiamo un nuovo menu dal Titolo "IntropageMenu" e Tipo menu Intropage

 

Intropage nuovo menu

 

e subito dopo una nuova voce di menu chiamata "GoIntropage" di tipo Singolo articolo collegata all'articolo IntropageContent precedentemente creato.

 

Intropage nuova voce menu

 

4) nella voce di menu "GoIntropage" modifichiamo le Opzioni Articolo per disattivare la visualizzazione del titolo dell'articolo, della data di creazione/modifica e delle icone di invio mail, stampa e di tutto quello che non va visualizzato. Nelle Opzioni visualizzazione pagina inseriamo il Titolo pagina Browser altrimenti verrà visualizzato il nome della voce di menu. Sempre nelle Opzioni visualizzazione pagina impostare a No l'opzione Mostra intestazione pagina.

 

5) installare il template "Blacktemplate"

 

6) Da Gestione template clicchiamo sul nome del template Blanktemplate e modifichiamo lo stile di questo template. Nella sezione Assegnazione menu spuntiamo la voce di menu GoIntropage del menu IntropageMenu.

 

7) nel file /templates/blanktemplate/css/template.css (il foglio di stile del Blanktemplate) modifichiamo la seguente classe di stile:

.div-centrato{

position:absolute;

top:50%;

left:50%;

margin-top:-300px; <-- metà dell'altezza dell'immagine

margin-left:-400px; <-- metà della larghezza dell'immagine

width:800px; <-- larghezza immagine

height:600px; <-- altezza immagine

}

le dimensioni indicate nelle proprietà margin-top e margin-left devono essere pari rispettivamente alla metà dell'altezza e alla metà della larghezza dell'immagine scelta e inserita nell'articolo Intropagecontent.

Questa classe dei stile permette di centrare nella pagina l'immagine contenuta nell'articolo.

Sempre nel foglio di stile template.css modificando il codice del colore nella proprietà background-color del tag body si può cambiare il colore di sfondo della pagina nel browser.

body {

background-color: #FFFFFF; /* colore di sfondo della pagina */

color: #000000;

}

 

8) torniamo alla Gestione menu e nel menu IntropageMenu selezionare la voce di menu GoIntropage come Home (cliccare sulla casella a sinistra della voce di menu GoIntropage e poi cliccare sul pulsante Home in alto a destra)

Intropage voce menu home

 

A questo punto visualizzando l'url del sito nel browser invece di vedere il template prefefinito vedremo l'immagine che abbiamo scelto come intro page,

cliccando sull'immagine vedremo comparire il template predefinito.

 

Thats all falk!

 

Commenta questo articolo sul forum


Ultima versione di Joomla!®

downloadVer. 3.8.1 Stabile Italiana
Data di rilascio: 04 Ottobre 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: