Oggi con immenso piacere voglio annunciarti il rilascio del secondo template che ho realizzato per i lettori del mio blog. Risto Template un template per ristorante, monopagina, realizzato in html5 css3 e jQuery.
Qualche settimana fa ero su ThemeForest alla ricerca di ispirazione e ho notato un template per wordpress per un ristorante, mi è piaciuto un sacco, così ho deciso di crearne una mia versione html css per poi distribuirla gratuitamente.
Questo Template nasce da un mio desiderio di condividere con te un qualcosa di originale, bello e facile da personalizzare. Scopriamolo insieme
Il video di presentazione di Risto Template:
Alcuni Screenshots:
Pagina che mostra i piatti con menu sulla sinistra per lasciare parlare le immagini. Una galleria a tutto schermo con autoplay farà scorrere immagini ad alta risoluzione. Molto bello e di grande effetto!
Una galleria di immagini con effetto hover, ti permetterà di aggiungere una piccola descrizione ad ognuna di esse.
Mappa a tutto schermo di grande scena e impatto visivo. Utilizzando le API di Google Masps si è implementata una vista dall’alto con un inclinazione di 45° per rendere ancora più accattivante la visuale.
Possibilità di movimento in ogni direzione senza limiti e integrazione Street View! Ovviamente potrai personalizzare il tutto inserendo tue coordinate, livello di zoom, ecc.
I punti di forza:
- Tecnologie all’avanguardia: Parti di questo template sono realizzate con le tecnologie che diventeranno uno standard web nell’immediato futuro ovvero Html5 e Css3.
- Navigazione originale: Con le sezione dei menu a scomparsa potrai sfruttare e goderti al massimo le immagini di sfondo.
- Semplicità: Con la modifica di alcuni parametri potrai cambiare immediatamente i contenuti e personalizzarli secondo le tue necessità.
- Galleria: Realizzata interamente con Css3 senza ricorrere a Javascript.
- Modulo contatti: Facilmente personalizzabile secondo le tue necessità e con validazione dell’input utente.
- Google Maps: Con l’uso delle Api di Google Maps è stata introdotta una mappa a tutto schermo con un inclinazione di 45° dall’alto, completa possibilità di movimento e abilitazione Street View, originale e di grande effetto!
- E’ GRATIS!
Dove lo trovo?
Risto Template ha una sua pagina dedicata, ti invito a visitarla e visionare la demo completa per apprezzare al massimo le potenzialità di questo Template.
Nella speranza che tu possa trovarlo utile ti auguro una splendida giornata. Inoltre mi farebbe molto piacere un tuo parere su questo mio lavoro, puoi lasciarmi un commento qui sotto!
Non dimenticare di condividere l’articolo con i tuoi amici su Twitter, Facebook e Google+.
[adsense]
5 Luglio 2012 il 13:07
Ciao Daniele!
Grazie mille per questo splendido template, veramente ottimo!
Domanda, se per caso avessi davanti un host windows, come potrei fare per il form contatti?
La parte in php, sai se c’è qualcosa di similare per asp o altro?
Grazie mille!
Sabry 🙂
5 Luglio 2012 il 13:11
Ciao Sabry,
grazie a te! Guarda non è per niente un problema puoi benissimo ignorare il file submit.php e sostituirlo con un file asp che ti gestisce l’invio mail. Penso ce ne siano a bizzeffe già pronti.
A presto 🙂
5 Luglio 2012 il 14:47
Uhm, allora parto alla ricerca di quel che mi hai consigliato!
Grazie mille!!!
Gentilissimo!
Sabry 🙂
6 Luglio 2012 il 09:15
Molto bello. Grazie Daniele 😉
6 Luglio 2012 il 09:38
Grazie a te… Ciao 🙂
4 Settembre 2012 il 14:47
Ciao Daniele,
Complimenti per il sito, il blog e il template free! E’ da poco che mi sto avvicinando alla programmazione per il web e finalmente ho trovato un template
semplice da capire da cui trarre spunto per le mie prove.
Vorrei chiederti una cosa. Ho provato ad aprire la demo del template con IE 8 e ho notato, a differenza di Chrome, che vengono perse le impostazioni di layout
per esempio per la sezione Menus. Inoltre le altre voci di menu del template non aprono nessuna pagina. E’ un’anomalia del mio browser o un’incompatibilità del
template con IE 8?
Grazie per la risposta.
Pietro
4 Settembre 2012 il 14:52
Ciao Pietro, troppo gentile ti ringrazio. Sono contento che ti torni utile il mio template. Purtroppo non ho sottomano IE8 e non posso darti un feeback al volo… Ho appena testato con IE9 e sembrerebbe tutto in regola. ciao 🙂
16 Novembre 2012 il 13:50
Ciao Daniele,
Ti riscrivo dopo un po’ di tempo… Sto di nuovo facendo delle prove prendendo spunto dal tuo template e dato che nella programmazione web sono ancora poco ferrato mi chiedevo se era possibile scrivere una funzione che caricasse le immagini sia per quanto riguarda la Gallery
sia le immagini in background senza dover ripete il codice per ogni nuova immagine inserita.
Grazie per la risposta.
Pietro
16 Novembre 2012 il 15:30
Ciao Pietro, ovviamente essendo semplice html devi ripetere per forza di cose il codice, altrimenti potresti fare un ciclo in php che ti stampa l’html necessario tante volte quante sono le immagini che vuoi caricare. (ovviamente vien comodo numerare le immagini). Fai un for del tipo:
for ($i = 1; $i <= numeroImmagini; $i++) {
echo HTML necessario;
}
in ogni src dell'immagine ovviamente vai a stampare l'indice i del for.
Ciao
20 Novembre 2012 il 08:48
Ciao Daniele, grazie mille per la risposta. Ti chiedo un’altra cosa: qual è la parte di codice che gestisce l’apertura dei menu About, Menus, News…? Perchè ho inserito una nuova voce di menu ma non riesco a capire come viene gestito l’evento di apertura dei vari content. Grazie ancora e spero di non essere troppo pesante con le mie domande :).
Pietro
20 Novembre 2012 il 11:35
Ciao Pietro, nessun problema figurati. Nel template originale hai 5 elementi del menu, ognuno di essi ha un id (1,2,3,4,5) e tramite jquery vai ad associare l’evento click (in pratica vai a mostrare il content giusto e nascondere tutti gli altri: Quindi se vuoi aggiungere una nuova voce devi fare una cosa del genere.
Aggiungere una nuova voce con id 6 nel menu e poi con jquery una roba del genere:
$(“#6”).click(function () {
$(“#content6”).fadeToggle(“slow”, “linear”);
$(“#content1”).fadeOut(“slow”, “linear”);
$(“#content2”).fadeOut(“slow”, “linear”);
$(“#content3”).fadeOut(“slow”, “linear”);
$(“#content4”).fadeOut(“slow”, “linear”);
$(“#content5”).fadeOut(“slow”, “linear”);
$(“.container”).fadeIn(“slow”, “linear”);
});
ciao!
23 Novembre 2012 il 13:19
Ciao Daniele, grazie per la risposta, piano piano sto iniziando a capirci qualcosa! Un’altra cosa, sto cercando di ridurre le dimensioni delle immagini che scorrono in background, o meglio ho inserito un box in alto che ha come width:80% e height:100px e così mi compare appunto una striscia in alto, ma se volessi mettere le immagini al di sotto di questa striscia come dovrei fare? Ho provato a ridurre le dimensioni del bx-container che è quello in cui in teoria sono visualizzate le immagini ma niente… Grazie ancora
Pietro
15 Gennaio 2013 il 20:15
Ciao Daniele, scusa se ti disturbo ancora ma non riesco proprio a capire una cosa. Quando viene inviata la richiesta di informazioni tramite il form ho visto che viene usata una procedura php, ma al ritorno da questa come faccio a visualizzare all’utente con un messaggio o meglio ancora riaprendo il div dei contact in cui compare una scritta che il messaggio è stato inviato correttamente? Ti ringrazio per la risposta.
16 Gennaio 2013 il 04:21
Ciao Pietro, per farlo dovresti fare una richiesta utilizzando ajax e al success: utilizzare il metodo html() di jquery su un div che vuoi tu con il messaggio da mostrare. http://api.jquery.com/jQuery.ajax/ ciao
8 Marzo 2013 il 08:15
Ciao Daniele,
ottimo template. Come richiestoti anche per email sembra ci siano problemi di compatibilità con IE8. Sai per caso come poter porre rimedio?
Ciao e complimenti per i tuoi lavori.
28 Marzo 2013 il 11:05
semplicemente fantastico, quello che cercavo
Grazie Daniele
28 Marzo 2013 il 12:46
Ti ringrazio Enrico 🙂 ciao
13 Febbraio 2014 il 10:50
semplice e perfetto, proprio quello che cercavo
Grazie ++ Marina
13 Febbraio 2014 il 11:33
Ciao Marina, grazie per la visita 🙂