Anatomia di un layout verticale (temi multi-purpose e monopagina)

Condividi se ti piace!

A corredo delle informazioni fornite nel manuale “WordPress – Guida Completa”, ho pensato di proporvi in un articolo l’analisi degli elementi che costituiscono un tema multi-purpose ma anche i temi monopagina (one page), e che possa aiutare a familiarizzare anche con i blocchi e gli strumenti generalmente presenti nei cosiddetti theme builder. E ora, scorrete oltre l’anteprima dell’immagine di esempio per continuare a leggere…

Cominceremo con la miniatura dell’immagine intera di uno di questi layout (potete cliccare su di essa per visualizzare il relativo ingrandimento), corrispondente al tema Nimmo su Themeforest, procedendo poi con le singole porzioni commentate in didascalia nel resto dell’articolo.

Come si può notare, la lunghezza dell’intero layout è davvero notevole, ma questa è una caratteristica dei temi multi-purpose e monopagina in quanto prevedono tutti gli elementi possibili che andranno poi eventualmente riorganizzati, disattivando quelli non necessari e personalizzando quelli che si intende lasciare visibili.

Del layout ovviamente fanno parte anche l’intestazione (header) e il piè di pagina (footer) con i relativi widget, ed entrambi questi elementi saranno ovviamente commentati nell’analisi ‘anatomica’ che segue.


Intestazione (header) e slider

L’intestazione contiene di solito il logo e la barra principale dei menu di navigazione del sito. In questo caso è presente anche un menu ‘sandwich’ come quello dei dispositivi mobili, e sotto la testata possiamo vedere uno slider con diversi elementi di navigazione fra le slide, e con due pulsanti sotto il titolo e il testo.

Contatori

In questo caso i contatori sono integrati in una sezione che raggruppa anche un’immagine e del testo, ma dovrebe essere facile individuare le tre diverse aree anche a occhio.

In evidenza (service/blurb)

Anche i quattro elementi ‘blurb’ in questo caso sono raggruppati in una sezione che contiene un altro elemento (il testo che li precede), unificata dallo stesso colore di fondo, ma i quattro elementi in evidenza si distinguono chiaramente per la loro struttura icona+titolo/testo+pulsante/link.

CTA (Call To Action)

Gli elementi ‘call to action’ (CTA) in questo caso sono due, collocati uno sotto l’altro, e corredati da una immagine laterale. Si distingue in ogni caso il pulsante di ‘chiamata all’azione’.

Services/blurbs (2)

Ancora un esempio, questa volta molto più tradizionale, di elementi in evidenza per i servizi, detti infatti ‘services’ (o ‘blurbs’), preceduto anche in questo caso da una sezione con titoli e testo di accompagnamento/introduzione.

Team

Gli elementi ‘team’ sono inconfondibili, dal momento che oltre alla foto, al nome e al ruolo di ogni soggetto, troviamo spesso i link ai suoi profili social. Anche in questo caso la sezione è stata fatta precedere da un testo introduttivo.

Portfolio

Anche se dall’immagine non si può notare, ogni elemento del portfolio, ovvero ogni immagine, al passaggio del puntatore del mouse cambia colore e visualizza del testo e un link di collegamento allo specifico contenuto.

Sezione ‘mista’

Questa sezione, dopo la prima parte di testo introduttivo, contiene tre colonne di cui la prima e la terza ospitano due ‘blurb’ ciascuna, senza link/pulsanti associati, mentre quella centrale ospita una semplice immagine. Nella parte bassa sono inseriti semplicemente due elementi ‘pulsante’. Il risultato, come si vede, è perfetto per il tipo di comunicazione desiderata.

Contatori (2)

Di nuovo contatori, questa volta associati a icone e in forma numerica, inclusi in una sezione che prevede anche il testo introdutivo e utilizza un’unica immagine di sfondo per l’intero gruppo.

Video

Fra gli elementi possono esserci anche i video, in questo caso con testo di accompagnamento e pulsante che provocherà la visualizzazione in sovrapposizine (pop-up) della finestra del video vero e proprio.

Listini

I listini/offerte sono sempre contraddistinti da colonne contenenti ognuna un titolo, un prezzo, un elenco di caratteristiche e un pulsante di acquisto. Così come, di solito, una delle offerte è in evidenza rispetto alle altre.

Blog/News

L’anteprima dei contenuti più recenti, in questo caso gli articoli del blog, comprende sempre l’immagine in evidenza, il titolo ed eventuale riassunto o testo iniziale, e a volte i meta-dati, naturalmente il tutto collegato a ogni singolo contenuto.

Testimonial

I testimonial in questo caso sono sotto forma di slider/carousel, quindi si alternano singolarmente scorrendo in orizzontale. Come sempre, la ‘recensione’ è accompagnata dal nome dell’autore, con eventuale foto e ‘qualifica’ o link al sito personale/aziendale.

Loghi di clienti/partner

I loghi dei clienti o dei partner servono per dare ‘lustro’ all’immagine aziendale/professionale, ovvero si utilizzano vari marchi (brand) per promuoverne uno. Di solito, come in questo caso, si tratta di immagini non invasive, anzi sfumate e monocromatiche, che possono anche essere in forma di ‘carousel’, ovvero scorrere in orizzontale.

Modulo (form) contatti

In una ‘one page’ che si rispetti non può mancare il modulo (form) dei contatti, spesso corredato (come in questo caso) dai recapiti e da un messaggio che incoraggia al contatto, appunto.

Mappa

La mappa, in genere ‘dinamica’, è quasi sempre in prossimità del modulo contatti, e contiene in genere un ‘segnaposto’ che evidenzia la posizione della sede.

Area widget piè di pagina

L’area widget che precede il piè di pagina in questo caso è a quattro colonne, e ospita diversi tipi di widget (testo, link/menu, galleria). Al di sotto è visibile il piè di pagina (footer) vero e proprio, dove olte al copyright sono presenti le icone con i link ai profili social.
Condividi se ti piace!

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.