Di’verso: un Template HTML Free, versatile e responsive
Come ti avevamo promesso nell’articolo di ieri, iniziamo questa nuova stagione con una splendida risorsa che abbiamo deciso di rilasciare in modo completamente gratuito. Potrai utilizzarla indifferentemente sia per scopi personali che commerciali.
La risorsa che abbiamo deciso di rilasciare – Di’verso – è un bellissimo Template HTML multifunzionale, puoi utilizzarlo per il tuo sito aziendale o per mostrare il tuo portfolio, oppure ancora per pubblicare news nel classico stile da blog.
Live Preview >
DownloadUna versione WordPress gratuita del tema? Nel caso fossi interessato la puoi trovare qui!
Il Template è molto semplice da configurare e personalizzare. E come puoi vedere già dalla Live Preview, non si tratta del solito Template HTML con struttura fissa e poco adattabile. Con Di’verso puoi creare tantissimi layout differenti in base alle tue esigenze.
All’interno del Template abbiamo integrato ben sei differenti slider:
- Elastic Responsive Slider (Home)
- Thumbnails Slider (Home versione 2)
- Elegant Slider (Home versione 3)
- Cycle Slider (Home versione 4)
- Flash Slider (Home versione 5)
- Nivo Slider (Home versione 6)
Inoltre devi sapere che il Template HTML che stiamo rilasciando è responsive: infatti si adatta perfettamente per una corretta visualizzazione anche sui dispositivi mobile… provare per credere!
Ma andiamo con ordine e proviamo a descrivere brevemente quelle che sono le caratteristiche principali di questo Template HTML.
Diverse versioni di Home Page
Come puoi notare dalla Live Preview, abbiamo preparato sei diverse versioni di Home Page, ma questo non significa che i layout possibili per la Home siano solo sei. Infatti basta spostare una qualsiasi sezione da un layout all’altro per creare illimitate tipologie di layout differenti.
Home Page versione 1
In questa versione di Home abbiamo utilizzato lo Slider Elastic (che è anche responsive).
Abbiamo poi creato tre diverse sezioni poste verticalmente una sotto l’altra per mostrare in modo un po’ diverso dal solito quelle che sono le caratteristiche dell’azienda/persona che si intende promuovere con il sito.
Nella prima sezione abbiamo inserito una breve descrizione dell’azienda, il classico “chi siamo”, nella seconda i servizi, utilizzando una comoda navigazione a schede e nella terza ed ultima sezione abbiamo previsto uno spazio dedicato alle testimonianze utilizzando uno slider che permette di scorrere in modo automatico le diverse testimonianze raccolte.
Infine nel footer del Template è stato previsto uno spazio dedicato alle ultime novità da segnalare, uno slider in cui mostrare gli ultimi lavori/progetti pubblicati, e un altro slider in cui visualizzare gli ultimi tweet provenienti dal nostro account. Per ultimo un elenco dei vari canali social su cui è possibile trovarci.
Home Page versione 2
In questa seconda versione di Home Page abbiamo previsto uno slider con thumbnail in modo da dare risalto a diverse foto/progetti da mostrare sin da subito al lettore che arriva sul sito. Subito dopo abbiamo dedicato un’area dove mostrare un breve titolo e slogan della pagina. Proseguendo troviamo una sezione con layout a tre colonne in cui mettere in risalto quelli che sono i punti di forza dell’attività che si intende promuovere.
Prima del footer abbiamo previsto uno slider che mostra gli ultimi tweet del tuo account Twitter in modo da tenere informati i lettori sulle tue interazioni attraverso il social network di micro-blogging. Per il footer in questa seconda versione di Home abbiamo preferito utilizzare un layout a quattro colonne in cui puoi proporre al lettore quello che ritieni più interessante.
Infine la solita sezione contenente il copyright/credits e l’elenco di tutti i canali social in cui è possibile trovare l’azienda che si sta promuovendo.
Home page versione 3
In questa versione di Home abbiamo previsto uno slider elegant, una sezione dedicata al titolo e slogan della pagina. Segue layout a quattro colonne in cui mostrare quelli che sono i punti di forza dell’attività che si intende promuovere. Il solito slider che mostra i nostri ultimi tweet, e infine per il footer riproponiamo nuovamente un layout a quattro colonne in cui proporre al lettore quello riteniamo più interessante.
Home Page versione 4
Nella quarta versione di home page abbiamo integrato uno slider cycle capace di adattare la propria altezza sulla base dei contenuti inseriti. Questo slider è estremamente versatile, in quanto permette di inserire una singola immagine, immagine con del contenuto testuale o un video.
Sotto lo slider abbiamo inserito uno slogan e del semplice contenuto testuale. Nella sidebar a destra abbiamo previsto tre piccole sezioni contenenti un’icona e del testo, per un risultato funzionale, semplice e di impatto allo stesso tempo.
Home Page versione 5
In questa home page usiamo un bellissimo slider in Flash (il Piecemaker) che dà alla pagina un aspetto più “creativo”. Nella sidebar di sinistra abbiamo inserito un piccolo slider verticale che mostra gli ultimi progetti del portfolio e sotto il classico contenuto testuale della pagina abbiamo aggiunto quattro colonne testuali accompagnate da un’icona e da un pulsante “read more”: queste sezioni possono essere molto utili per elencare i propri servizi e linkare a delle pagine di dettaglio.
Home Page versione 6
Nell’ultima variante di home (ma ricorda, mixando i vari elementi puoi creare infinite home page diverse tra loro!) trovi lo slider Nivo – semplice, ma sempre efficace. Sotto lo slider abbiamo inserito quattro colonne di testo accompagnate da un’icona e sotto ancora gli ultimi articoli del blog (o ultime novità) e uno slider che mostra gli ultimi progetti del portfolio.
Pagina FAQ
Nel tema abbiamo predisposto inoltre una pagina FAQ in cui potrai inserire, tramite un effetto toggle, una lista di FAQS. Nella configurazione del toggle è possibile scegliere se avere tutte le FAQ aperte o chiuse, o se mantenere aperta solo una domanda, come nella nostra demo.
Pagina Testimonials
Un’altra caratteristica che non può assolutamente mancare in un sito corporate o in un portfolio è una pagina che raccolga le testimonianze dei tuoi clienti: ecco perché nel tema abbiamo predisposto una pagina che mostra i testimonials, con un layout pulito ed esteticamente gradevole, in linea con lo stile del tema.
Nella sidebar di questa pagina abbiamo inserito un richiamo agli ultimi post pubblicati nel blog e uno slider che mostra i progetti del portfolio.
Pagina About
Se il tuo team è composto da più persone troverai senz’altro interessante la feature che abbiamo aggiunto nella pagina “about”. Si tratta di uno slider accordion dove poter mostrare in modo semplice ed incisivo una foto ed una piccola descrizione di ogni membro del team. Ovviamente puoi usare questo slider anche per mostrare immagini rappresentative dei servizi che offri, o le immagini dei prodotti…modificare i contenuti dello slider e utilizzarlo in altre pagine del tema è infatti estremamente semplice.
Pagina Gallery
Oltre ai vari portfolio (caratteristica che vedremo più avanti e che siamo certi ti interesserà particolarmente) nel tema è prevista una gallery filterable.
All’hover sulle thumbnails è possibile mostrare l’eventuale nome dell’immagine, un’icona che apre l’immagine a dimensione originale in una finestra lightbox e un’altra icona per aprire la pagina di dettaglio dell’immagine, nel caso volessi aggiungere una descrizione della stessa.
Pagina Blog
In Di’Verso troverai due differenti layout per la tua pagina blog: “big image” e “small image”.
In questo modo potrai scegliere il layout a te più congeniale, sulla base delle dimensioni che intendi utilizzare per l’immagine in evidenza del post. Entrambi i layout sono molto particolari e rendono il look del tema diverso (non a caso abbiamo chiamato il tema cosi!) dai classici blog.
Pagina Contatti
La pagina contatti del tema è semplice e funzionale: in alto abbiamo inserito un pannello in javascript in cui potrai inserire una mappa interattiva di Google Maps o, se preferisci, l’immagine di una mappa statica. La pagina contiene anche un modulo contatti funzionante con validazione degli errori in Javascript: facile da configurare (devi solo impostare il tuo indirizzo e-mail!) e con uno stile essenziale e pulito.
Pagina Portfolio
Anche per la pagina portfolio non ci siamo di certo risparmiati. Abbiamo previsto ben cinque modalità diverse per permetterti di mostrare gli ultimi progetti sulla base di quelle che sono le tue esigenze.
Portfolio a 3 colonne
Un layout a tre colonne, semplice e minimal, dove mostrare una piccola anteprima del progetto (che è possibile ingrandire con un semplice click), il titolo e una breve descrizione con pulsante che rimanda alla pagina di dettaglio del progetto.
Portfolio con slider
In questa seconda versione di portfolio invece di avere la classica paginazione per suddividere l’elenco dei progetti abbiamo utilizzato uno slider che è possibile navigare cliccando sulle due icone poste lateralmente.
Portfolio Big Image e Full Description
Due layout di portfolio pensati per chi volesse dare maggior risalto sin da subito alle foto dei progetti.
Portfolio Filterable
Abbiamo previsto anche un portfolio che utilizza lo stesso layout applicato per la pagina Gallery.
Conclusione
Come puoi vedere non si tratta del solito Template HTML free, che si limita a quattro/cinque paginette statiche. Quello che ti stiamo regalando oggi è qualcosa di molto più grande, versatile e funzionale.
Cosa vuoi di più? :)
Una versione WordPress gratuita del tema? Nel caso fossi interessato la puoi trovare qui! :)
Live Preview >
DownloadIl pacchetto .zip include:
- PSD del tema
- Documentazione
- Template HTML
- 50+ background per personalizzare il tema
Licenza per il Template HTML
Diverso: Template HTML FREE by Your Inspiration Web is licensed under a Creative Commons Attribuzione – Condividi allo stesso modo 3.0 Unported License.
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
65 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Ciao Nando 404 sul Download…
Fixed! :)
Ciao Daniele, grazie per la segnalazione, un apice di troppo nel nome del file dava qualche problema.
Fenomenali, come sempre. Ben tornati!!
Grazie faluna, ben ritrovata :)
Bello e funzionale :)
Grazie Eugenio :)
Wow, thank you so much!! stunning template
you’re welcome! :)
Ciao Nando, è da un po di tempo che ti seguo e trovo veramente interessante questo sito! Sarà un onore seguirti! ;-) Croce
Ciao Croce, benvenuto su YIW, è davvero un piacere averti tra noi! :)
Veramente eccezionale! Semplice, pulito e intuitivo! Complimenti
Grazie fokewulf!
Ragazzi!!! va bè che vi dovevate far perdonare per la lunga assenza (molto sentita) ma questo è un Regalone!!!! Grazie e ben tornati, mi mancavate, tutti!! Complimenti a Nando :-)
Grazie a te, Livia :)
Siamo tornati con ancora più voglia di fare di prima!
Wooow rientro in grande stile ;)
Grazie Giovanna, ben ritrovata! :)
Ma quanto mi siete mancati??
Un ritorno in mega style…siete troppo forti, i web designer italiani come me vi amano!
Auguri per la Bimba :-)
Grazie Gianfranco, è davvero un piacere per noi ricevere simili apprezzamenti :)
Come ha detto giustamente Giovanna, ‘Un rientro in grande stile’! ;) Un template pulito e super funzionale, sentivamo la vostra mancanza! ;)
Ciao Guido, anche noi sentivamo la vostra mancanza :)
E tenetevi pronti perchè sono in arrivo tante altre risorse gratuite e novità molto molto interessanti.
Molto Bello ! Complimenti.
Grazie Simone!
Applausi!!!
Grazie anche a te Andr3a!
Che bello questo tempale- Complimenti e grazie per la risora gratuita. Per poterla utilizzare come bisogna indicare la licenza nel footer ??? Inoltre potreste spiegare in breve come utilizzare le varie pagine del template che ai non esperti potrebbe risultare abbastanza complesso? Grazie, un saluto.
Ciao Fabio, non è necessario indicare la licenza nel footer, l’importante è mantenerla per qualsiasi uso se ne faccia come indicato in questa pagina :)
Riguardo la spiegazione su come utilizzare le varie pagine all’interno del pacchetto che hai scaricato trovi anche una cartella con la documentazione (in lingua inglese) :)
Nella prima homepage In IE9 il menù lo allinea in verticale e lo slide a fondo pagina non si vede correttamente come per i webkit. Avete una risoluzione al problema ? Grazie.
Ciao Fabio, io vedo il sito perfettamente sia su IE9 che IE8.
Forse intendevi IE7, dove noto entrambi i problemi che hai segnalato… ma se intendevi IE7 ti dico subito che abbiamo smesso di supportarlo da più di un anno.
veramente bello!!!! :)
Grazie Francesca! :)
una piccola cosa…nei ightbox non si vede il mi piace o condividi di fb. Twetter si!
Francesca, quello che hai segnalato dovrebbe essere un bug del plugin prettyPhoto che utilizziamo per mostrare le immagini in lightbox perchè quello è il css appunto del plugin.
ciao,
bellissimo
a me nella sezione ‘our clients say’
passando col mouse sulle foto, ci mette circa 8 sec. a cambiare il commento
uso safari come browser
Ciao Matteo,
grazie del feedback! :) Controlleremo
Nando, quindi riguardo alla licenza devo mettere in ogni pagina questo ??? http://creativecommons.org/choose/results-one?license_code=by-sa&jurisdiction=&version=3.0&lang=it
Grazie.
Inoltre ho provato ad iscrivermi al forum del tema di’verso html ma non mi fa accedere, non ho i permessi
Bel sito, ragazzi, e soprattutto bei templates,complimenti!
Grazie Pasquale! :)
Grazie mille “di’verso” dai soliti temi.
Ogni tanto bisogna provare a fare qualcosa di “di’verso” dal solito no? ;)
Grazie andrea! :)
Complimenti davvero per la realizzazione e grazie per averlo condiviso.
Vorrei permettermi di segnalare 2 cosine che non funzionano come dovrebbero:
* anch’io come Fabio ho il problema del menù che si vede in verticale con i.e. 9.
* nel Portfolio Slider, su smartphone, non si vede la foto ingrandita quando si clicca su una di quelle in pagina, o meglio è deformata in verticale.
Un saluto e grazie ancora. Portfolio sder
Grazie Davide,
controlleremo questi problemi al più presto.
Hello!
I love this theme.
However, I tried to enlarge the area for the posts, and broke the responsive feature. Can you please help me with the clean way to enlarge the main area of the theme without breaking the responsive feature?
I bet this is a css issue…
Thanks in advance for your help!
Hello,
this HTML template is carefully crafted using proportions to calculate the width of all elements.
Anyway, you could try and modify the css files to enlarge the #primary div and shrink the #sidebar div, if I get your question correctly.
Ciao, complimenti per il tema.
Vorrei chiederti perché non riesco ad installarlo, alla fine della procedura WP mi dice che non riesce a trovare il file index.php….. sicuramente sbaglio qualcosa, forse lo scompattamento del tema o proprio non riesco a capire cosa altro possa essere!
Grazie comunque per il tuo lavoro!
Ciao Davide, mi permetto di risponderti io, questo tema non è per wordpress, come dice il titolo è un template html. Esiste anche la versione per wp ma non è questa.
Ciao Davide,
come ha detto anche Fabio, questo è un template HTML e non può essere utilizzato come tema per WordPress.
Però è stato da poco lanciato un nuovo progetto Your Inspiration Themes in cui puoi trovare una versione free del tema di’verso per WordPress insieme ad altri temi interamente sviluppati da noi.
Saluti :)
Ciao Fabio, grazie!
A volte le informazioni più importanti si nascondono alla vista… ;)
Grazie della segnalazione, davvero un template meraviglioso. Unica cosa, non riesco a capire come far funzionare tweetable. Anche modificando username, scorrono sempre gli stessi tweet. Perdonate l’ignoranza, ma non riesco a capire da dove li prenda!!!
Ringrazio anticipatamente per l’aiuto.
Ciao mirko,
suppongo tu non abbia modificato il js.
Linea 36 http://api.twitter.com/1/statuses/user_timeline.json?screen_name=“;
Dopo screen_name dovresti mettere il tuo id
ariciao…mi correggo, a me funziona con https://api.twitter.com/1/statuses/user_timeline/USERNAME.json?
al posto di username metti il tuo id
Da ieri sto controllando questo splendido tema, che dire? Bellissimo, un lavoro molto accurato.
Oggi mi sto soffermando sulla pagina relativa al blog e mi chiedevo come si faccia a farla funzionare come un vero e proprio blog. Ho pensato “forse si carica su un portale gratuito tipo blogger e da li si inseriscono le news che vanno direttamente ad aggiornare le varie componenti della pagina”, ma in realtà mi sembra improbabile. Allora, come fare? Esiste qualche guida a riguardo per chiarirsi le idee ?
Ciao Laura,
innanzitutto grazie per aver risposto a mirko per la questione tweetable: è un piacere vedere i membri di una community si aiutano l’un l’altro :)
Per quanto riguarda la tua domanda, abbiamo rilasciato da poco una versione free del tema di’verso per WordPress che puoi trovare insieme ad altri temi nel nostro nuovo progetto Your Inspiration Themes.
Grazie Laura… Funziona!!!!! Ci stavo diventando scemo :)
Credo comunque che ci sia qualche spiegazione. In effetti dovrebbe funzionare anche come facevi tu..non capisco!
oh perfetto grazie giustino..quindi con la versione per wp funziona il blog? altrimenti con il template html è una procedura complicata vero?
Sì, è esatto Laura: il tema sfrutta il motore di WordPress per la parte blog.
Invece con il semplice template HTML si dovrebbe utilizzare un motore di blogging esterno a cui adattare il template o realizzarlo in proprio.
Perfetto, ancora grazie :-)
Siete i migliori!
Ciao Laura, grazie a te!
Ciao a tutti,
sono quello che ha segnalato un paio di problemini il 02/12/12. Volevo chiedervi SE è possibile eliminare in modo abbastanza rapido il fatto che il tema è “Responsive” … lo so, è un controsenso visto che di solito è un plus, però per il sito che sto realizzando io, sarebbe meglio che il sito si vedesse normalmente (quindi “in piccolo”) anche su smartphone.
E’ possibile? Cortesemente mi indichereste i file da modificare?
Grazie in anticipo per la cortese risposta.
Buona serata
Davide
Ciao Davide, scusa per il ritardo di questa risposta ma siamo rientrati a lavoro questa settimana dopo le vacanze natalizie.
un modo molto veloce per farlo dovrebbe essere quello di cancellare i file css che sono dedicati al responsive e cioè lessthen800.css, lessthen600.css e lessthen480.css.
Ciao a tutti, ho acquistato questo bellissimo template quando ancora non era Free ma solo ora lo stò utilizzando .
Volevo chiedervi come posso aumentare le foto con descrizioni dello slider accordion nella sezione about, ho provato ma
non mi funziona :( …????!
grazie in anticipo.
Ciao Diletta, registrati sul nostro forum di supporto e i nostri sviluppatori ti daranno tutte le indicazioni che ti servono, per attivare il tuo account sul forum segui il procedimento indicato in questo topic.
Ciao a tutti,
ho utilizzato questo tema (fantastico) per un lavoro che tra poco andrà online … appena è pronto vi segnalo il link :-)
Mi sono però resa conto che su IPAD, la pagina home versione 2 non si vede…
Mentre se guardo la demo del tema si…
ho fatto un test anche con le pagine direttamente scaricate da qui e proprio non si vede nulla… HELp..
Altra cosa è obbligatorio segnalare la licenza CC in tutte le pagine? o posso evitare?
grazie mille attendo vostre newssss :-)
michela mi puoi contattare a brx255@hotmail.it ??? ho lo stesso problema su ipad
Ciao,
nella versione responsive riesco a visualizzare la galleria fotografica home solamente nella versione 1. È normale che le altre versione non visualizzino le foto?
E anche la pagina del portfolio che filtra le foto la visualizzo sformata.
Grazie dell’aiuto