Demo Templates

Qui metterò le demo dei templates della versione 3 di joomla!

Di default Joomla! 3.x si apre con questo template. Esso è di tipo cosidetto responsive, capace cioè dio adattarsi alle diversisime dimensioni dei monitor utilizzati per navigare in internet.

Ho scritto questo articolo per joomla.it dove cerco di spiegare i numerosi pregi di questo bel template.

In questa area potete vedere diverse caratteristiche di questo template in accoppiata con joomla3.5: immagini e gallerie immagini responsive, una bella tipografia con la quale inserire velocemente leggerissimi ed efficaci strumenti grafici, per rendere il sito più gradevole e meglio navigabile.

 

Come possiamo realizzare nel nostro sito web una slideshow carina, che si adatti a ogni dimensione e che funzioni con ogni browser?

Beh, la risposta è semplice. Ti basterà copiare il codice che troverai sotto la slideshow, incollarlo in un tuo articolo e cambiare i percorsi, i titoli e le descrizioni delle immagini.

Dovrai però usare il template di default Protostar, o altro che utilizzi lo stesso framework, il bootstrap, che è integrato in Joomla 3.

Io trovo davvero interessanti queste caratteristiche perchè ci permettono di realizzare un bel sito web senza bisogno di installare altre estesnioni, il che vuol dire maggior velocità e. soprattutto, maggior sicurezza.

Gustiamoci adesso queste belle immagini. Volutamente hanno altezza diversa perchè volevo testare il comportamento della slideshow. Esame passato, direi!

Ecco qui il codice utilizzato per questa slideshow:


<div id="mySlide" class="carousel slide">
<div class="carousel-inner">
<div class="item active"><img src="/joomla35/images/slide/01.jpg" />
<div class="carousel-caption">
<h4>Fagiano</h4>
<p>Descrizione prima immagine....</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/02.jpg" />
<div class="carousel-caption">
<h4>Farfalla</h4>
<p>Descrizione seconda immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/03.jpg" />
<div class="carousel-caption">
<h4>Cigni</h4>
<p>Descrizione terza immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/04.jpg" />
<div class="carousel-caption">
<h4>Ancora farfalle</h4>
<p>Descrizione quarta immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/05.jpg" />
<div class="carousel-caption">
<h4>Pesce</h4>
<p>Descrizione quinta immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/06.jpg" />
<div class="carousel-caption">
<h4>Farfalla e scorpione</h4>
<p>Descrizione sesta immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/07.jpg" />
<div class="carousel-caption">
<h4>Pappagallo</h4>
<p>Descrizione settima immagine...</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#mySlide" data-slide="prev">‹</a> <a class="right carousel-control" href="#mySlide" data-slide="next">›</a></div>

Qui potete vedere le posizioni modulo del template di default di Joomla! 3:  il Protostar.
Sono un articolo ed occupo il 50% dello spazio disponibile. Ma se mancassero moduli nella colonna di destra o di sinistra andrei ad occupare anche quello spazio arrivando al 75%.
Mentre se mancassero moduli in entrambe le colonne occuperei tutto lo spazio disponibile arrivando al 100%.

span6

 +span3 se NO moduli a sinistra+ span3 se NO moduli a destra

 

Test Floating

Test floating

Su questo sito usiamo i cookies, anche di terze parti. Navigandolo accetti.