Memento: un Template HTML FREE

Transcript

1 Memento: un Template HTML FREE Beautiful work, nice work, very very nice theme questi sono stati i primi commenti raccolti a caldo da Memento a pochi minuti dalla sua pubblicazione su Themforest. La bella notizia? È che oggi puoi scaricarlo gratuitamente e metterlo subito in funzione per i tuoi business o per i tuoi clienti. Live Preview» Si tratta di un template HTML multifunzionale. Se invece cerchi una versione WordPress dello stesso tema, allora fatti un giro su questa pagina. Il tema HTML Memento è un tema responsive, completamente personalizzabile, con un design fresco e potente, stile corporate, colore chiaro, gusto pulito :) A parte le battute, fai prima a dare un occhiata alla preview. Una cosa da dire subito è che con Memento, ma questo vale oramai per tutti i nostri template, puoi configurare e personalizzare ogni cosa in modo estremamente semplice. Puoi creare infinite soluzioni di layout, usare slider, menu avanzati, pagine portfolio, blog e molto altro ancora. Ma cerchiamo di capire meglio di cosa stiamo parlando. 9 Home page L importanza della home page per un sito è oramai lapalissiana. Con Memento ne abbiamo create nove. Non una, due o tre, ma nove. Sai che significa, soprattutto se sei un web designer che deve accontentare un certo numero di clienti? Home page versione 1 1 / 34

2 C è un nuovo tipo di mercato. I navigatori sono sempre più esigenti, ma anche più informati ed esperti. Basta un occhiata veloce per capire se vale la pena di fermarsi oppure no sul sito che hanno davanti. Questa è la logica di layout di Memento. Un solo scroll per una pagina che offre una visione d insieme con elementi sapientemente ordinati. In alto campeggia una top bar con gli ultimi tweet del nostro account a sinistra e un menu di supporto a destra. 2 / 34

3 Il menu principale è ben visibile immediatamente sotto, con le sue icone e un effetto hover che si attiva in modo piacevole al passaggio del mouse. Anche i sottomenu si aprono al semplice passaggio del mouse. Basta provare per credere. Lo slider della prima home page è quello con le thumbnail. A seguire, uno spazio a tre colonne in cui è possibile offrire informazioni di anteprima. Es. contatti, portfolio etc.. Poi, ancora, uno slider con le testimonianze di clienti o lettori. E infine il footer, o se vogliamo, un pre-footer in cui possono essere ospitati tre widget di contenuto, e un piè di pagina con i credit e un elenco dei vari canali social su cui è possibile trovarci. Home page versione 2 (stretched) 3 / 34

4 La logica strutturale rimane la stessa: piccolo scroll per una subitanea visione d insieme. Qui però notiamo alcune differenze. La prima è nello slider. Quello usato è l elastic slider (che è anche responsive). Poi seguono 4 focus con featured image per dare informazioni sui servizi offerti. Poi troviamo una sezione a tre colonne in cui mettere in risalto quelli che sono i punti di forza dell attività che si intende promuovere. Anche il footer cambia: scompare il pre-footer, ma non i credits e i social che vengono centrati rispetto al wrapper. Cambia anche il background, che è bianco assoluto. 4 / 34

5 Home page versione 3 (portfolio) Luce ai progetti. Questo il senso della terza versione di Memento. 5 / 34

6 Qui abbiamo usato il flash slider, seguito da un layout a 4 colonne in cui mostrare - con tanto di featured image - alcuni progetti o attività meritevoli di attenzione. Per il resto, come nella prima versione, c è lo slider dei feedback e il footer ampio con i 3 widget e il piè di pagina. Home page versione 4 6 / 34

7 Se dovessimo usare uno slogan per definire questa versione, potrebbe essere così: puntiamo tutto sull accoglienza. 7 / 34

8 L elegant slider è seguito da uno spazio appositamente costruito per il messaggio di benvenuto e dalle quattro colonne di evidenza di quelli che sono i punti di forza dell attività che si vogliono promuovere. Home page versione 5 8 / 34

9 Onore al bianco e agli spazi ordinati. In questa versione della home page predomina il concetto del rapporto tra forma e spazio. E non a caso, dopo lo slider (che è di tipo elegant) segue un layout 9 / 34

10 a 4 colonne pensato per mostrare una galleria fotografica. Cosa c è di più ordinato nello spazio di una raccolta delle migliori fotografie? Ma la vera novità di questa versione, almeno rispetto alle precedenti, è la possibilità di far vedere a fine pagina, con la semplicità tipica del copia e incolla (le porzioni di codice sono chiaramente commentate per rendere facile all utente lo spostamento di interi blocchi di layout), contenuti di tipo feed o ultimi articoli o parti di testo (es. filosofia aziendale) etc.. Il footer qui, come per la versione 2, raccoglie al centro sia i credits che le icone dei social. Home page versione 6 10 / 34

11 11 / 34

12 Credo che sia evidente, oramai, che non ci sono molti limiti alla possibilità di comporre la home page in base alle proprie esigenze e sempre in modo professionale. E questa versione lo dimostra. Lo slider con thumbnail mette in risalto diverse foto/progetti da mostrare sin da subito al lettore che arriva sul sito. Un piccolo movimento degli occhi verso il basso e l attenzione viene catturata dal welcome box a cui fa da supporto - sulla destra - una sezione dedicata ai feedback dei clienti. Seguono le 4 colonne per la presentazione dei servizi e il consueto grande footer che già abbiamo visto in altre versioni. Home page versione 7 Se ci è concesso un piccolo, piccolissimo, autovezzeggiamento, qui possiamo dire che siamo davvero di fronte a un ottima composizione estetica degli elementi. Poche cose, ma presentate con un fascinoso tocco di prelibatezza. Le confortanti tonalità del blu che dominano il background, unitamente alla tecnologia dello slider parallax, nonché alla scelta di mostrare solo 4 colonne con le categorie di prodotti/servizi di punta, 12 / 34

13 enfatizzano l impatto della pagina, ancorché basata sulla scelta di togliere e non di aggiungere contenuti. Home page versione 8 Quando si hanno molte cose da raccontare o contenuti da condividere in una sola pagina di presentazione, allora non si può fare a meno di usare la tecnica delle tabs. In questa versione della home di Memento basta passarci sopra con il mouse per vedere quello che succede. Home page versione 9 13 / 34

14 14 / 34

15 E per concludere con le home page di Memento, ecco una versione ancora più ricca di elementi. C è tutto quello che può servire: slider, welcome box, portfolio e grande footer. Ma abbiamo visto che non ci sono limiti alle soluzioni di layout. Il codice è commentato in ogni sua parte e permette di spostare, scomporre, aggiungere o eliminare ogni sezione con un semplice taglia o copia e incolla. Pagina FAQ 15 / 34

16 Memento permette di avere una pagina FAQ per offrire ai tuoi lettori una lista di domande con risposte che si aprono con effetto toggle. 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. Testimonials Ovviamente, i feedback e le testimonianze non potevano solo essere sparsi qua e là a sostegno di una promozione o di un offerta, ma andavano raccolti e mostrati in una pagina ad hoc. 16 / 34

17 Noi l abbiamo predisposta, ed è davvero molto gradevole, in linea con lo stile ordinato e pulito del tema. Pagina Gallery Non poteva mancare una pagina gallery. Ma Memento offre due soluzioni al riguardo: 1. una gallery responsive 2. una gallery filterable Gallery Responsive - Template HTML FREE 17 / 34

18 Qui l immagine selezionata viene posta in primo piano. Da notare lo slider sotto, che offre un anteprima sulla quantità e sul tipo di immagini in galleria, e i pulsanti next e previous direttamente collegati allo slider. Infatti, se provi a scorrere le immagini, quella che va in primo piano viene messa in evidenza anche nello slider con un hover sulla cornice. Gallery Filterable 18 / 34

19 Per chi è abituato a raccogliere le immagini in categorie, ecco la gallery filterable. 19 / 34

20 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 contatti 20 / 34

21 Molto spesso, questo tipo di pagina viene sviluppato velocemente, senza pensare all importanza che può avere nel quadro complessivo di una strategia di conversioni. Noi l abbiamo costruita mettendoci nei panni del cliente, cercando cioè di predisporre intorno a 21 / 34

22 lui un ambiente rassicurante, con tutte le informazioni di cui ha bisogno rispetto all azienda che sta per contattare. In alto abbiamo inserito un pannello in javascript in cui puoi inserire una mappa interattiva di Google Maps o, se preferisci, l immagine di una mappa statica. Sotto trovi il form di contatto e una sidebar sulla sinistra con le informazioni del sito, numeri telefonici di supporto etc. Pagina 404 Un tocco di simpatia per la 404 di Memento. Ovviamente, va ricordato che ogni porzione di codice è debitamente commentata. Quindi, anche qui, puoi rintracciarla facilmente e scriverci quello che vuoi. Pagina Archivio 22 / 34

23 Se hai delle news, degli articoli o dei contenuti da mostrare con un certo ordine, ecco la pagina archivio. C è anche la sidebar per info di supporto, anteprima su lanci o promozioni e altro. Pagina Blog Memento offre due tipi di pagine blog: 23 / 34

24 1. Big Thumbnails 2. Small Thumbnails 24 / 34

25 25 / 34

26 Nella Big Thumbnails puoi fare leva sulla bellezza delle immagini, mostrandole a 500px. 26 / 34

27 Qui invece puoi sfruttare gli spazi per dare priorità ad altre informazioni, ma anche per mostrare i contenuti in modo diverso. L ordine degli elementi e la libertà di composizione rimane una costante dei nostri temi. Valuta e tue esigenze e scegli il layout a te più congeniale. Pagina Portfolio Quando si lavora e c è bisogno di mostrare i risultati ottenuti, non c è niente di meglio che poter scegliere tra uno o più layout di portfolio. Memento ne contiene cinque: colonne Big Image Filterable Full Description Con Slider 3 colonne 27 / 34

28 Ordinato e pulito. Puoi decidere quanti progetti mostrare in una schermata, usando la paginazione per tutti gli altri. Big image 28 / 34

29 29 / 34

30

31 A volte, il vecchio metodo di mostrare gli oggetti uno sotto l altro è la migliore soluzione per dare enfasi alle cose. Questo layout è per gli amanti del dettaglio. L immagine grande può essere ulteriormente ingrandita grazie al lightbox che si apre se ci clicchi sopra. Filterable Ci sono progetti che non si vogliono mostrare o che non si vogliono mostrare su una determinata pagina. Ce ne sono altri invece che tutti dovrebbere conoscere. 31 / 34

32 A questo serve un portfolio filterable. Grazie a dei filtri in JS puoi decidere di far vedere i tuoi progetti raccolti per categoria. Full Description E se invece decidessi di mostrare un progetto per volta? Con Memento puoi farlo tranquillamente, senza perdere traccia del portfolio. Infatti, sulla destra c è uno slider featured project che mette in evidenza tutti gli altri progetti del sito. With Slider 32 / 34

33 Un modo diverso di tenere tutti i progetti in una pagina grazie allo slider delle immagini. Conclusioni Abbiamo descritto più o meno tutte le caratteristiche di Memento. Certo, una cosa è leggere, un altra cosa è navigarlo. Le parole possono essere abilmente scelte per dare la migliore immagine di un prodotto. Ma alla fine sono solo la fotografia del recensore. Noi crediamo che Memento possa stimolare sensazioni che vanno al di là di una soggettiva rappresentazione. Layout, colori, slider etc. sono come una combinazione micidiale di creatività. 33 / 34

34 Perché non ti fai un giro sulla nostra preview per capire meglio? Licenza per il Template HTML FREE Diverso: Template HTML FREE by is licensed under a Creative Commons Attribuzione Condividi allo stesso modo 3.0 Unported License. 34 / 34 Powered by TCPDF (