Quando arrivi alle pagine interne puoi avere due sensazioni. La prima: “Adesso devo rifare tutto”. La seconda: “Ormai il sistema lavora per me”. Se hai preparato variabili, preset, header, footer e template globali, dovrebbe succedere la seconda.

In questa parte costruiamo le pagine interne in Divi 5 usando come esempio una pagina Contatti e una pagina Eventi. Non sono due modelli obbligatori per qualsiasi sito: servono a capire come assemblare strutture diverse mantenendo lo stesso linguaggio visivo.

Se non hai ancora il tema, puoi acquistare Divi dalla sezione presente nella pagina. Se invece hai seguito le parti precedenti, apri il Page Manager o crea una nuova pagina e scegli “Costruisci da zero”.

Progettare la pagina Contatti prima dei moduli

La pagina Contatti deve aiutare una persona a capire come raggiungerti, non mostrare quanti moduli sai usare. Parti dalla struttura: titolo, area principale con form e informazioni di contatto, mappa quando serve, FAQ finali.

Nella prima sezione inserisci una riga singola per il titolo. Aggiungi poi una riga a due colonne con proporzione due terzi e un terzo. Nella colonna grande metti il modulo Contact Form; nella colonna piccola crea tre gruppi per telefono, email e indirizzo. Sotto aggiungi una riga a larghezza piena con la mappa.

In una seconda sezione inserisci titolo e modulo Accordion per le domande frequenti. Applica i preset già definiti e, se vuoi approfondire focus, campi e stili, consulta la guida ai preset dei form e alla modifica del focus in Divi 5.

La struttura, però, non basta.

Usa collegamenti reali per telefono ed email: tel: per il numero e mailto: per l’indirizzo. Se inserisci una mappa, verifica il punto esatto e valuta se serve davvero. Per un’attività completamente online può essere più utile spiegare modalità e tempi di risposta.

Nel form chiedi soltanto ciò che serve per iniziare la conversazione. Ogni campo aggiuntivo aumenta lo sforzo e introduce dati da gestire. Cura inoltre etichette, stati di focus, messaggi di errore e consenso privacy. Un form molto bello che non fa capire dove hai sbagliato non è un buon form.

Nelle FAQ rispondi ai dubbi che compaiono davvero prima del contatto: modalità di lavoro, requisiti, tempi indicativi e cosa preparare. Non trasformarle in una sezione commerciale mascherata. La pagina deve fare chiarezza e consentire una scelta.

Costruire una pagina Eventi riutilizzabile

Per la pagina Eventi crea una prima sezione dedicata all’evento in evidenza. Puoi usare un layout diviso fra immagine e contenuto, con data, titolo, descrizione breve e pulsante. Sotto prepara una lista degli eventi successivi con card coerenti.

Qui conviene distinguere struttura e dati. Se gli eventi cambiano spesso, non duplicare manualmente le card: valuta campi personalizzati e Loop Builder. Se invece il sito ospita due eventi l’anno, una struttura più semplice può essere sufficiente. Non serve costruire una centrale nucleare per accendere una lampadina.

Usa Flexbox per allineare data, contenuto e pulsante, e preset per mantenere coerenti tipografia e spaziature. Se vuoi approfondire l’organizzazione delle card, consulta la guida ai principi di Flexbox in Divi.

Qui entra in gioco il sistema.

Coerenza non significa che ogni pagina debba avere la stessa hero e tre blocchi identici. Significa che colori, tipografia, pulsanti, spaziature e componenti rispondono alle stesse regole. La pagina Contatti può essere più essenziale; quella Eventi può avere immagini e card più dinamiche.

Usa il Command Center, la duplicazione controllata e l’estensione degli attributi per velocizzare le operazioni ripetitive. I preset di Divi 5 devono assorbire le decisioni ricorrenti. Dopo ogni duplicazione, però, controlla contenuti, link e nomi amministrativi. Il copia-incolla è rapido anche nel propagare errori.

Verifica entrambe le pagine nei breakpoint attivi con l’Editor Responsive di Divi 5. Controlla ordine delle colonne, dimensioni dei campi, leggibilità della mappa e posizione delle CTA. Nella parte 10 ci fermeremo su Flexbox, così potrai gestire questi layout con molta più consapevolezza.

Questo articolo è una rielaborazione originale in italiano basata sull’articolo originale di Elegant Themes, a cui va il credito per il tutorial di partenza.