Beauty and Clean: un tema minimal per wordpress in regalo per te

Ormai è andata: Your Inspiration Web ha festeggiato due anni di vita e nessuno ci ha fatto gli auguri. Certo, la colpa è nostra, non abbiamo detto niente, quest’anno non abbiamo organizzato nessuna festicciola e così il nostro secondo anniversario è passato sotto banco.

In realtà nelle ultime settimane abbiamo lavorato dietro le quinte per rilasciarti una risorsa gratuita proprio in occasione di tale festosa ricorrenza ma purtroppo, per un motivo o per un altro, la data di rilascio è slittata e siamo riusciti a terminare tale progetto solo in questi giorni.

É stata dura, come si dice, ma ce l’abbiamo fatta: ti presentiamo Beauty & Clean, un tema gratuito di WordPress in stile minimal, elegante e completamente gestibile da pannello. Il nostro piccolo regalo per festeggiare insieme con te i nostri primi due anni di attività.

Beauty and Clean

Beauty è un tema pulito ed elegante che può essere utilizzato per il vostro sito aziendale: offre infatti la possibilità di visualizzare in Home una pagina introduttiva e le ultime news, caratteristica comune a molti siti corporate. Nonostante ciò è perfetto anche per un uso più tradizionale di WordPress, poiché anche nella versione blog il layout rimane essenziale e accattivante.

Caratteristiche tecniche generali

Il tema è fornito di un comodo pannello di amministrazione sviluppato per gestire la configurazione di ogni singola parte senza dover mettere le mani sul markup: così anche chi non ha nessuna familiarità con il codice sarà in grado di configurarne senza problemi ogni aspetto.

Logo e descrizione

Il logo e la descrizione possono essere creati in modo dinamico inserendo il testo (nome del sito e descrizione) direttamente dal pannello di amministrazione di WordPress come mostrato nella Figura 1

Figura 1 - Inserimento del nome e della descrizione del sito.

e automaticamente – subito dopo il salvataggio delle opzioni inserite – questi valori saranno riprodotti su ogni pagina del sito mediante l’uso del font Halo Handletter che è stato integrato nel tema con l’ausilio della tecnica del text replacement fornita dal Cufon (Figura 2).

Figura 2 - Logo e descrizione del sito rappresentati con Cufon.

Ovviamente nel caso in cui si disponga di un proprio logo, il Pannello di amministrazione del tema che abbiamo sviluppato (raggiungibile da Appearance –> Theme Options) permette di caricarlo in modo semplice ed intuitivo, con un semplice click del mouse (Figura 3).

Figura 3 - Caricare un logo dal Pannello di gestione del tema.

Menù Drag & Drop

Il tema è dotato di due menù compatibili con il nuovo sistema Drag & Drop introdotto dalla versione 3.0 di WordPress. Per realizzare il menù di navigazione principale ti basterà semplicemente trascinare le voci interessate (Figura 4) all’interno dell’area stabilita e in meno di un minuto avrai un accattivante sistema di navigazione multilivello (Figura 5).

Figura 4 - Menù di navigazione principale realizzato mediante Drag & Drop.

Figura 5 - Menù dropdown in azione.

Il menù è perfettamente funzionante anche a Javascript disabilitato, questo per renderlo completamente accessibile anche a chi naviga con dispositivi diversi da quelli tradizionali.

Home Page componibile

L’Home Page può essere configurata in diversi modi: l’immagine utilizzata nell’header può essere completamente gestita dal pannello di amministrazione dal menù Appearance –> Header

Figura 6 - Possibilità di cambiare l'immagine della testata con un semplice click del mouse.

È possibile scegliere tra un set di cinque immagini già predefinite oppure caricarne una propria (Figura 6). Una volta selezionata l’immagine desiderata, questa sarà mostrata in modo automatico sulla home page del sito (Figura 7).

Figura 7 - Testata del sito mostrata in Home Page.

Inserimento delle ultime news

Abbiamo sviluppato un widget , chiamato Last News e una sidebar (figura 8) appositamente per inserire le ultime news sulla sezione laterale della Home Page (Figura 9) mediante una semplice operazione di Drag & Drop (trascinamento) – generate tramite Custom Post Type (Figura 10).

Figura 8 - Sidebar e Widget personalizzati per gestire l'home page.

Figura 9 - Le ultime 3 news pubblicate sul sito sono mostrate in home page tramite il widget Last News che abbiamo trascinato.

Figura 10 - Custom Post Type per l'inserimento delle News

E per completare il lavoro non ci resta che configurare il footer del nostro tema (Figura 11).

Figura 11 - Configurazione del Footer da applicare al tema.

Dal pannello di amministrazione è possibile scegliere tra due tipologie di footer sempre in perfetto stile minimal: il primo a unica colonna con allineamento del testo centrato e il secondo a due colonne con il testo da inserire (sempre da pannello) suddiviso tra le due colonne, una posta a destra e l’altra a sinistra.

Abbiamo realizzato una home in minimal (Figura 12), accattivante e dinamica senza aver sfiorato minimamente una sola riga di codice.

Figura 12 - Home Page Beauty & Clean Free.

Pagina About

Abbiamo realizzato un template per la pagina About in grado di ospitare – oltre al classico testo descrittivo della pagina – i membri del team gestiti sempre con l’utilizzo di Custom Post Type (Figura 13).

Figura 13 - Gestione del Team mediante Custom Post Type.

Inoltre abbiamo predisposto la pagina di una sidebar che può ospitare altri widget creati ad hoc per il tema: ad esempio nella nostra live preview abbiamo inserito il widget Testimonial (Figura 14) che mostra uno slider con le ultime testimonianze inserite sul sito.

Figura 14 - Widget Testimonial.

Dal widget è possibile configurare il numero di testimonianze da mostrare, l’effetto da assegnare allo slider, la velocità di scorrimento e molto altro ancora (Figura 14).

Anche le ultime testimonianze sono gestite tramite Custom Post Type (Figura 15) in modo da semplificarne ulteriormente la gestione.

Figura 15 - Gestione delle testimonianze tramite Custom Post Type.

Tre layout da applicare a qualsiasi pagina

Per qualsiasi pagina abbiamo previsto la possibilità di applicare un layout a schermo intero o con sidebar e inoltre scegliere se mostrare quest’ultima a sinistra o a destra della pagina (Figura 16).

Figura 16 - Personalizzazioni durante la creazione delle pagine.

Inoltre per tutte le pagine è possibile aggiungere uno slogan e scegliere se visualizzare o meno il titolo (Figura 16).

Pagina Blog

Su un tema per WordPress non poteva di certo mancare il template dedicato al blog. Per chi volesse utilizzare il tema in modo più tradizionale anche la pagina blog ha uno stile semplice ed elegante.

Il template degli articoli supporta i commenti annidati e ha una sidebar pronta a ospitare widget sul lato destro.

Template per la pagina contatti

Abbiamo previsto anche un template per una pagina Contatti in cui inserire le proprie informazioni di contatto. La pagina Contatti è stata dotata di una propria sidebar e di alcuni widget per l’inserimento dei propri contatti, come numeri di telefono e indirizzo (Figura 17).

Figura 17 - I due widget che permettono l'inserimento dei propri contatti sulla sidebar.

Che dire? Abbiamo configurato in meno di dieci minuti un intero sito – che sarà possibile gestire in modo dinamico – con un ottimo risultato estetico e cosa ancora più importante senza aver scritto una sola riga di codice.

Un template professionale che può essere utilizzato dunque sia dagli esperti ma anche da chi non ha nessuna dimestichezza con html e altri codici di programmazione.

Ti piace?

Te lo regaliamo, è tuo!

Localizzazione

Il tema è localizzato in lingua inglese e quasi del tutto in lingua italiana (80% circa). Tramite il file di traduzione che abbiamo rilasciato sempre all’interno del tema è possibile localizzarlo in qualsiasi altra lingua.

File di supporto

Insieme al tema abbiamo rilasciato un file di supporto (support.pdf) che ti aiuterà nell’intero processo di configurazione del tema. Per ovvi motivi di tempo non possiamo offrire supporto personalizzato, sarebbe per noi impossibile stare dietro a tutte le richieste senza intaccare il nostro orario di lavoro quotidiano considerando che voi ormai siete tantissimi e che il tema lo stiamo rilasciando per il download anche sul sito ufficiale di WordPress.

Per la segnalazione di eventuali bug riscontrati potete utilizzare il nostro forum e segnalarlo – nel caso in cui non fosse ancora stato fatto – aprendo un nuovo topic.

Beauty & Clean, la versione premium

Per quanti avessero esigenze più avanzate abbiamo pensato ad una versione Premium del nostro tema che offre ulteriori caratteristiche e possibilità di personalizzazioni avanzate, come per esempio la possibilità di aggiungere e gestire sempre da pannello uno slider sulla Home Page o la possibilità di cambiare colore al tema semplicemente selezionandolo con un comodo color picker. Ma andiamo a vedere nel dettaglio quelle che sono le caratteristiche della versione Premium.

Diamo un pizzico di brio alla Home: 2 Slider disponibili

Per quanti volessero dare un po’ di movimento all’Home Page nella versione Premium di Beauty abbiamo previsto l’utilizzo di due diversi slider: uno per mostrare una semplice sequenza di immagini (Figura 18) e l’altro per presentare oltre a delle immagini anche del contenuto testuale (Figura 19).

Figura 18 - Slider immagini.

Figura 19 - Slider di immagini e contenuto.

Scegliere e configurare lo slider

Entrambi gli slider si configurano dal Pannello di amministrazione del tema da dove è possibile selezionare: il tipo di slider, le immagini da caricare, eventuale link da assegnare allo slider e altro ancora (Figura 20). È possibile inoltre ordinare i vari elementi dello slider con un semplice click e trascinamento del mouse.

Figura 20 - Configurazione slider.

Abbiamo previsto anche la possibilità di modificare tutte le proprietà dello slider (effetti, velocità, ecc) direttamente dal pannello di amministrazione (Figura 21) in modo che tu non debba assolutamente preoccuparti di mettere mani al codice.

Figura 21 - Configurazione delle proprietà dello slider.

Mettiamo in evidenza i nostri servizi sulla Home

Per la versione Premium abbiamo realizzato un’altra sidebar e un nuovo widget (Text with image) che permettono di inserire sulla Home tre box con tanto di titolo, immagine e testo descrittivo (Figura 22). Tutto questo in modo da dare ulteriore risalto ad alcune attività direttamente sulla pagina principale del sito (Figura 23) e sempre senza mettere mani al codice.

Figura 22 - Widget che permette di aggiungere i tre servizi in evidenza sulla Home Page del sito.

Figura 23 - I tre box in evidenza sulla Home Page.

Illimitati colori per la versione Premium

Se il colore rosso che abbiamo utilizzato per il tema non si addice alla tua attività o non corrisponde ai colori utilizzati nel tuo brand, niente paura: dal pannello di amministrazione è possibile assegnare qualsiasi colore desiderato ai vari elementi che compongono il tema tramite un comodissimo color picker (Figura 24). Ti basterà semplicemente selezionare il colore desiderato con un semplice click del mouse.

Figura 24 - Selezione del colore mediante color picker.

Tipografia: 20 font aggiuntivi e la possibilità di gestire tutte le dimensioni direttamente da pannello

Con un semplice click del mouse nella versione premium è possibile scegliere uno tra i 20 font non tradizionali che abbiamo deciso di mettere a disposizione (Figura 25) e che sul tema è utilizzato per mostrare gli slogan e alcuni titoli. Inoltre è possibile integrare altri font a proprio piacimento in modo abbastanza semplice ed intuitivo.

Figura 25 - Scelta del font da utilizzare per lo slogan e alcuni titoli usati nel tema.

Sempre per quanto riguarda la tipografia, dal pannello di amministrazione è possibile scegliere anche le dimensioni del testo che ogni singolo elemento del tema dovrà avere (Figura 26).

Figura 26 - Configurazione della dimensione del testo dei vari elementi del tema.

Illimitate sidebar

Per non farti mancare nulla abbiamo deciso di offrirti anche la possibilità di creare e gestire illimitate sidebar (Figura 27) da utilizzare su qualsiasi pagina del tema, il tutto sempre con un solo e semplice click del mouse.

Figura 27 - Creazione di illimitate sidebar.

Configurazione e gestione di illimitati moduli di contatto

Nella versione Premium abbiamo fornito la possibilità di aggiungere e configurare direttamente da Pannello di amministrazione illimitati moduli di contatto (Figura 28) da utilizzare su qualsiasi pagina del sito, nella nostra live-preview trovi il modulo in funzione sulla pagina contatti.

Il modulo è fornito anche di un proprio sistema di validazione errori, il tutto sempre comodamente configurabile da Pannello da dove è possibile anche configurare tutte le altre variabili che puoi vedere nello screenshot mostrato nella Figura 28.

Figura 28 - Configurazione e gestione dei moduli di contatto.

Portfolio

Per la gioia di tutti I freelancer e di tutte le agenzie che desiderano mostrare I loro progetti in modo semplice ed efficace, abbiamo integrato la possibilità di creare una pagina portfolio scegliendo tra due diversi layout: il primo suddiviso in colonne, che consente di mostrare una miniatura del progetto – che è possibile aprire in dettaglio con un effetto light box – e del testo descrittivo, il secondo che permette la creazione di diversi slider (uno per ogni categoria di progetto) contenenti le thumbnail dei lavori, sempre visualizzabili con il lightbox.

Figura 29- Portfolio a tre colonne con immagine e descrizione del progetto

Figura 30 - Portfolio a sliders con miniature dei progetti inseriti

In entrambi i tipi di portfolio è possibile integrare anche dei video, che verranno visualizzati nella finestra lightbox.

Figura 31 – Dettaglio dell’apertura di un video tramite un effetto lightbox

Cosi come molte altre sezioni del tema, anche il portfolio è completamente gestibile tramite Custom Post Type:  inserire i vostri progetti non potrebbe essere più semplice di cosi.

Gallery

Se invece hai l’esigenza di creare una gallery fotografica in cui inserire in modo semplice e veloce le tue foto, puoi fare affidamento su un’altra pagina creata appositamente per la versione premium del tema. Attraverso un altro Custom post Type potrai infatti caricare le tue immagini e creare una pagina gallery estremamente accattivante e versatile.

Come nel caso del portfolio, anche nella gallery verranno visualizzate delle thumbnails delle tue foto, che si apriranno con un elegante effetto light box al click del mouse.

Figura 32 – Layout della pagina gallery

Shortcodes e custom widget

Per facilitarti l’inserimento di determinati elementi quali sliders, pulsanti, widgets, tabelle  e non solo, abbiamo integrato nel tema più di 70 shortcodes consultabili nell’ omonima pagina presente nella live preview. In questo modo anche senza conoscere il codice potrai aggiungere ulteriori dettagli alle tue pagine, rendendole più particolari.

Figura 34 – Dettaglio dello shortcode che permette di creare con poche righe di codice un nivo slider da inserire dove vuoi

Inoltre nella versione premium di Beauty sono disponibili ulteriori custom widgets, come uno slider per mostrare gli ultimi progetti nella sidebar, un box per integrare in modo semplice e carino una Google Map e cosi via.

Supporto, Video tutorial & Import theme setting

Il tema, per come è  strutturato, è decisamente semplice da settare e da personalizzare; in ogni caso, per chi avesse qualche dubbio o riscontrasse qualche difficoltà nella configurazione della versione premium di Beauty & Clean abbiamo predisposto un forum in cui provvederemo a gestire le varie richieste di supporto.

Sempre su questo forum sono disponibili una serie di video screencast che ti guideranno passo dopo passo nella personalizzazione del tema, dalle impostazioni di base (come inserire il proprio logo, creare una nuova pagina, ecc) a quelle avanzate (come creare un modulo contatti personalizzato, come gestire le sidebar e molto altro ancora).

Per chi invece volesse ri-creare sul proprio sito tutte le impostazioni presenti nella nostra demo per poi personalizzare le pagine in modo più semplice e senza dover partire da zero, nel forum sono disponibili i dati della nostra live preview, importabili tramite un semplice click dal vostro pannello di amministrazione.

E ancora..

Ci sarebbe ancora molto da dire, ma abbiamo superato le 2500 parole (Urca!) perciò ci fermiamo qui. Per ulteriori informazioni, per scaricare la versione free del tema o per acquistare la versione premium ti rimandiamo al sito che abbiamo dedicato al nostro Beauty & Clean.

Conclusioni

Ci auguriamo che questo tema sia di tuo gradimento (aspettiamo il tuo feedback, facci sapere cosa ne pensi!) e ti invitiamo, nel caso trovassi qualche bug, ad aprire un nuovo ticket nel forum, cosi da darci la possibilità di correggerlo.