Nei capitoli precedenti abbiamo fatto una cosa che, mentre la fai, sembra quasi un modo molto elaborato per rimandare il lavoro vero: abbiamo preparato le variabili di design e poi costruito i preset in Divi 5.
Colori, font, spaziature, bordi, pulsanti. Tutto ordinato, nominato e pronto per essere riutilizzato.
Bello.
Ma prima o poi la pagina bisogna pur costruirla.
In questa quinta parte passiamo quindi dal sistema ai pezzi veri e vediamo come creare una homepage con Divi 5 da zero. Il progetto di esempio è la home di uno spazio di coworking, ma il punto non è copiare testi, prezzi o colori: è capire come trasformare una struttura in sezioni, righe, colonne, gruppi e moduli senza tornare a spargere impostazioni locali ovunque.
Perché è proprio qui che scopri se il lavoro preparatorio è servito davvero.
Prima la struttura, poi lo stile
Ogni sezione della homepage segue lo stesso flusso. Non è una regola imposta da Divi, ma un modo semplice per evitare di progettare e decorare contemporaneamente, cosa che di solito finisce con venti minuti passati a scegliere un bordo mentre non hai ancora deciso quante colonne ti servono.
Il flusso è questo:
- aggiungi la sezione e definisci la struttura di righe e colonne;
- inserisci i moduli nel posto giusto, senza preoccuparti ancora dei dettagli;
- applica variabili e preset preparati nei capitoli precedenti;
- completa i contenuti locali, come testi, immagini, video, icone, date e domande delle FAQ;
- controlla tablet e smartphone prima di considerare conclusa la sezione.
Prima la struttura.
Poi il resto.
Divi 5 permette di combinare Flexbox e CSS Grid nella stessa pagina. Flexbox funziona bene quando gli elementi devono seguire soprattutto una direzione; Grid è più comodo quando bisogna governare righe e colonne insieme. Se questa distinzione è ancora un po' fumosa, trovi un approfondimento su quando usare Grid o Flexbox in Divi 5.
Una volta piazzati i moduli, lo stile diventa molto più veloce: un preset per il titolo richiama font, dimensione, interlinea e colore; quello del pulsante porta con sé sfondo, testo, bordo e padding. Restano da impostare soltanto i contenuti che sono davvero unici.
E lì è giusto lavorare modulo per modulo.
Preparare la pagina Home in WordPress
Dal pannello di WordPress crea una nuova pagina e chiamala Home. Non serve inventare subito un titolo creativo: questo nome ti aiuta a riconoscerla nelle impostazioni e nel Theme Builder.
Aprila con il Visual Builder. Se sulla pagina compaiono già header e footer costruiti nel Theme Builder e in questa fase ti distraggono, puoi nasconderli temporaneamente per concentrarti sul corpo.
Temporaneamente, però.
Non cancellare i template globali e non disattivarli a caso su tutto il sito. L'obiettivo è soltanto avere un'area di lavoro più pulita; header e footer torneranno quando affronteremo i template globali.
Costruire la homepage con Divi 5
La home dell'esempio è composta da sette sezioni con funzioni diverse:
- Hero;
- griglia dei servizi o vantaggi;
- sezione divisa con immagine e contenuti;
- testimonianze;
- prezzi;
- conto alla rovescia;
- domande frequenti.
Non è l'unica struttura possibile e non è una formula magica. È però abbastanza completa da farci usare sia Flexbox sia Grid, diversi tipi di preset e qualche componente annidato.
Iniziamo dall'alto.
1. Hero: dire subito dove siamo
La Hero occupa il primo spazio visibile della pagina. Qui il visitatore deve capire rapidamente cosa offre il sito, per chi e quale azione può compiere. Nell'esempio usiamo tre righe:
- titolo principale e due pulsanti;
- immagine a tutta larghezza;
- tre brevi promesse o vantaggi.
Aggiungi una sezione e scegli una struttura Flex Equal Columns a una colonna. Dentro la colonna inserisci un modulo Titolo e un modulo Gruppo. Nel Gruppo metti due Pulsanti.
Apri quindi Design > Layout del Gruppo, imposta la direzione Flex su riga e aggiungi un gap orizzontale di 10 pixel. I pulsanti si dispongono così uno accanto all'altro senza margini aggiunti a occhio sul singolo modulo.
Aggiungi poi una seconda riga Flex a una colonna e inserisci un modulo Immagine. Questa sarà la parte visuale principale della Hero.
La terza riga usa invece tre colonne uguali. Dentro ogni colonna metti un Titolo e un Testo: una coppia per ciascun vantaggio che vuoi comunicare.
Adesso puoi applicare i preset:
- al titolo principale, il preset del tuo H1 grande;
- al primo pulsante, la variante piena con colore principale;
- al secondo, la variante piena scura;
- all'immagine, il preset arrotondato;
- alle tre colonne finali, il preset del bordo superiore;
- ai titoli dei vantaggi, il preset H4;
- ai testi, la variante scura del corpo.
I nomi dei preset possono essere diversi dai miei. Conta il ruolo, non la targhetta.
Alle tre colonne aggiungi anche 30 pixel di padding superiore, così il testo non si appiccica al bordo. Se quel valore ricorre nel progetto, richiamalo da una variabile invece di scriverlo tre volte.
A questo punto inserisci i contenuti: titolo, testi dei pulsanti, immagine e tre vantaggi. Nell'esempio del coworking sono spazi flessibili, servizi inclusi e comunità; sul tuo sito dovranno diventare le tre ragioni che aiutano davvero il visitatore a orientarsi.
Non tre frasi generiche perché erano rimaste tre colonne.
2. Griglia di servizi: ripetere senza disallineare
La seconda sezione mostra sei caratteristiche in una griglia regolare. È un caso ideale per CSS Grid: gli elementi hanno la stessa struttura e devono restare coerenti passando da desktop a tablet e smartphone.
Crea una nuova sezione Flex a una colonna e applica alla sezione il colore di sfondo chiaro salvato nelle variabili. Nella prima riga inserisci un modulo Video.
Aggiungi una seconda riga. Nella prima colonna inserisci, in ordine:
- un modulo Icona;
- un Titolo;
- un Testo.
Ora apri Contenuto > Elementi > Apply Structure Template. Imposta la riga come griglia a tre colonne su desktop, due su tablet e una su smartphone.
Sembra un dettaglio.
È la differenza tra progettare il comportamento responsive e sperare che si sistemi da solo.
Torna su desktop e duplica la prima colonna altre cinque volte, in modo da ottenere sei elementi con la stessa struttura.
Applica il preset arrotondato al video, quello contenuto scuro e piccolo alle icone, H5 ai titoli e Testo scuro alle descrizioni.
Dentro ogni colonna imposta un gap verticale di 12 pixel. Icona, titolo e descrizione resteranno vicini abbastanza da essere percepiti come un gruppo, ma non così vicini da sembrare un unico grumo di testo.
Completa infine video, immagine di copertina, icone e descrizioni. Nell'esempio trovi Wi-Fi, accesso continuo, sale riunioni, cabine telefoniche, caffè e indirizzo postale. Sul tuo progetto usa servizi reali e assegna a ogni elemento un'icona distinguibile e un testo breve.
Se per spiegare un vantaggio servono dodici righe, forse non è più una griglia di vantaggi.
3. Sezione divisa: immagine da una parte, contenuto dall'altra
La terza sezione mette una grande immagine a sinistra e tre blocchi di contenuto a destra. Il primo introduce il tema; gli altri due lo rendono concreto con caratteristiche specifiche e un collegamento finale.
Aggiungi una sezione Flex con due colonne. In quella di sinistra inserisci un'Immagine; in quella di destra un Gruppo con Titolo e Testo.
Duplica il Gruppo, aggiungi un Pulsante e duplicalo di nuovo. Alla fine avrai un'introduzione e due approfondimenti.
Per ciascun Gruppo imposta la direzione Flex su colonna e un gap verticale di 10 pixel. Non ripetere l'operazione tre volte: sistema il primo blocco e usa Extend Attributes per estendere le stesse proprietà agli altri Gruppi compatibili.
Adesso sì che duplicare serve a qualcosa.
Applica il preset arrotondato all'immagine. Nel primo blocco usa H2 e Testo scuro; negli altri due H5, Testo scuro e una variante testuale del pulsante, in modo che il collegamento finale non pesi quanto la CTA principale della Hero.
Inserisci poi immagine e contenuti. Qui la gerarchia deve rimanere evidente: una promessa principale, due elementi che la rendono concreta. Se i tre blocchi gridano allo stesso volume, la gerarchia è saltata.
4. Testimonianze: tre schede, una sola struttura
La sezione Testimonianze usa un titolo e tre schede costruite sulla stessa struttura. Ogni scheda contiene un'icona, il testo della testimonianza e un modulo Sommario con foto, nome e ruolo.
Crea una sezione Flex a una colonna e aggiungi un Titolo nella prima riga. Inserisci poi una seconda riga Grid Multi-Column con tre colonne uguali. In ogni colonna aggiungi Icona, Testo e Sommario.
Applica H2 al titolo della sezione e un gap orizzontale di 30 pixel alla griglia. Alle colonne assegna il preset del contorno scuro; alle icone la variante scura e piccola; ai testi il preset Testo scuro.
Il Sommario può combinare due preset impilati, per esempio Testo scuro e Denso. Alla foto assegna un raggio di 8 pixel oppure il preset immagine coerente con il sistema.
Fermiamoci un secondo.
Non occorre stilizzare tutte e tre le schede a mano. Completa la prima e usa Extend Attributes per trasferire lo stile agli elementi corrispondenti dentro la riga principale.
Solo dopo inserisci contenuti, foto e nomi reali. Una testimonianza inventata riempie benissimo una scheda, ma svuota molto meglio la fiducia. Se stai preparando un prototipo, segnala chiaramente che i testi sono dimostrativi e sostituiscili prima della pubblicazione.
5. Prezzi: costruire una scheda complessa una volta sola
La sezione Prezzi è il passaggio più articolato. Ogni scheda usa Gruppi annidati, un Elenco icone e un Gruppo finale. La buona notizia è che possiamo costruire una scheda completa e poi duplicarla.
Una basta.
Aggiungi una sezione Flex a una colonna e inserisci un Titolo nella prima riga. Crea poi una seconda riga Grid a tre colonne.
Per ora lavora soltanto nella prima colonna. Inserisci un Gruppo esterno e, al suo interno, un secondo Gruppo con Titolo e Testo. Questo blocco superiore conterrà nome e descrizione del piano.
Come elemento fratello del Gruppo interno aggiungi un modulo Elenco icone. Poi inserisci un altro Gruppo con un Titolo per il prezzo e un Pulsante.
A questo punto elimina le due colonne vuote. Sì, le avevamo appena create. Ma così puoi concentrarti sulla struttura complessa senza rischiare di modificare la colonna sbagliata.
Alla colonna rimasta applica il preset del bordo scuro. Su tablet imposta la riga a una colonna, quindi torna alla vista desktop.
Per non perderti nei Gruppi, rinominali nel pannello Livelli. Una convenzione semplice può essere:
- Gruppo testata per nome e descrizione;
- Gruppo interno per il contenitore centrale;
- Gruppo finale per prezzo e pulsante.
Non è burocrazia da builder. Dare nomi chiari riduce gli errori, soprattutto quando dentro una scheda ci sono contenitori con contenitori dentro altri contenitori. Il Gruppo, altrimenti, diventa presto il cugino digitale delle scatole del trasloco con scritto “varie”.
Alle schede esterne applicheremo un preset contenuto chiaro; a quella centrale, che deve emergere, una variante scura.
Nel Gruppo interno imposta un gap verticale di 10 pixel, richiamandolo dalla scala di spaziatura se lo hai salvato come variabile.
Al Gruppo finale applica il preset Padding medio. Per titolo del piano, descrizione, prezzo e pulsante usa i preset già predisposti. Nelle schede chiare il testo resta scuro; in quella centrale passa alle varianti chiare. Il pulsante centrale può essere nero o comunque abbastanza contrastato rispetto allo sfondo.
Fai la stessa cosa con l'Elenco icone. Quando la prima scheda è completa, duplica la colonna due volte e modifica soltanto ciò che deve cambiare: colori della variante centrale, nome, prezzo, caratteristiche e pulsante.
Su tablet e smartphone imposta la griglia a una colonna e mantieni 30 pixel fra le schede. Tre piani compressi in larghezza non diventano più facili da confrontare: diventano soltanto tre piccoli rebus.
Inserisci infine prezzi e caratteristiche reali. Se il prezzo parte da una cifra, dichiaralo. Se cambia in base al progetto, non fingere che sia un listino fisso soltanto perché la scheda viene più ordinata.
6. Conto alla rovescia: solo se la scadenza esiste
La sesta sezione interrompe visivamente la pagina con un fondo acceso, un titolo, un timer e un pulsante. Tecnicamente è semplice. Eticamente anche: il conto alla rovescia ha senso soltanto se la scadenza è vera.
Crea una sezione Flex a una colonna e applica alla riga il preset contenuto scuro. Inserisci un Titolo, un modulo Conto alla rovescia e un Pulsante.
Al titolo applica H2, allineamento centrale e testo chiaro. Rimuovi l'eventuale titolo interno del timer, così non compete con il messaggio principale. Al conto alla rovescia assegna il preset Testo chiaro e al pulsante una variante piena bianca.
Imposta una data reale: fine di una tariffa iniziale, apertura delle iscrizioni, evento o termine di una disponibilità concreta. Se non c'è una scadenza, cambia componente. Puoi usare la stessa sezione per una CTA normale, senza costruire un piccolo teatro dell'urgenza.
Non succede niente di male.
7. FAQ: lasciare spazio alle risposte
L'ultima sezione usa due colonne sfalsate con funzioni differenti. A sinistra troviamo titolo e introduzione; a destra un modulo Fisarmonica con le domande frequenti.
Aggiungi una sezione e scegli una struttura Flex Offset Columns a due colonne. Una proporzione 2/5 e 3/5 funziona bene perché lascia al blocco introduttivo uno spazio più raccolto e offre alle risposte la larghezza maggiore.
Nella colonna sinistra inserisci Titolo e Testo. Nella destra aggiungi il modulo Fisarmonica.
Applica H2 al titolo, Testo scuro al paragrafo e la stessa variante scura alla Fisarmonica.
Inserisci infine domande che le persone pongono davvero. Per un coworking possono riguardare orari, ospiti, parcheggio, indirizzo aziendale e prenotazione delle sale. Per un professionista saranno altre.
La regola non cambia: le FAQ devono togliere un dubbio, non ospitare cinque parole chiave travestite da domanda.
Controllare la homepage completa
Le sette sezioni ora ci sono. Prima di premere Pubblica e dichiarare vittoria, rivedi la pagina intera e controlla:
- se la Hero spiega subito il punto;
- se titoli e pulsanti seguono una gerarchia chiara;
- se Grid e Flexbox cambiano struttura correttamente ai breakpoint;
- se i contenuti duplicati sono stati sostituiti;
- se contrasto, testi alternativi e dimensioni interattive sono accessibili;
- se timer, prezzi e testimonianze corrispondono a informazioni vere;
- se nessun valore importante è rimasto locale senza motivo.
Quest'ultimo controllo è quello che ci interessa di più. La pagina non è ordinata perché abbiamo avuto una giornata particolarmente ispirata con padding e colori. È ordinata perché moduli e contenitori richiamano un sistema: variabili per i valori, preset per le combinazioni ricorrenti, struttura responsive decisa prima.
La differenza si vedrà tra qualche mese.
Quando cambierà un colore, quando dovrai rivedere le distanze, quando aggiungerai una nuova pagina o quando un altro professionista metterà mano al progetto, le decisioni non saranno intrappolate dentro decine di moduli.
Ed è questo il punto.
Costruire più velocemente è utile. Costruire qualcosa che puoi ancora capire, modificare e mantenere nel tempo lo è molto di più.
Se stai lavorando su una homepage già piena di impostazioni locali e non sai da dove partire per rimetterla in ordine, puoi raccontarmi com'è costruito il progetto. Vediamo insieme se conviene sistemare il sistema esistente o ripartire da una base più pulita.
Questo articolo è stato scritto sulla base di questo articolo su Elegant Themes. Anche gli screenshot e i video dimostrativi presenti nel tutorial provengono dalla stessa fonte.
0 Commenti