Parte 1 – Cosa preparare prima di costruire un sito con Divi 5

Argomento: Divi

Cosa preparare prima di costruire un sito con Divi 5

Hai presente quando apri Divi, sei pronto a costruire il sito… ma non hai preparato nulla e perciò ti accorgi che ti mancano i testi, le immagini, il logo, i colori e pure l’idea di quali pagine servano?

Succede più spesso di quanto sembri.

Non è un dramma. Non significa che non sei capace. Significa solo che stai provando a fare due lavori insieme: progettare il sito e imparare lo strumento.

Quando queste due cose si accavallano, anche il builder più comodo diventa un labirinto pieno di pulsanti colorati. Bello, eh. Ma sempre un labirinto.

In questa guida pratica costruiremo da zero un sito completo con WordPress e Divi 5. Il progetto sarà il sito di uno spazio di lavoro condiviso: quindi niente esempio astratto buttato lì, ma una struttura realistica, con pagine, testi, immagini, menu, template e pubblicazione finale.

In questa prima parte prepariamo il terreno. Prima di aprire l’editor, vediamo cosa ti serve avere pronto, come lavorano insieme WordPress e Divi, come installarli e dove mettere le mani senza perderti nel pannello.

In questa serie vedremo, tra le altre cose:

  • Parte 1 — Cosa preparare prima di costruire un sito con Divi 5 (sei qui)
  • Parte 2 — L'interfaccia di Divi 5 in pratica
  • Parte 5 — Costruire la pagina principale da zero
  • Parte 10 — Lavorare con Flexbox in Divi 5
  • Parte 16 — Revisione finale e messa online

Aggiungerò i link quando le varie parti saranno pubblicate. Qui trovi solo alcune tappe principali, giusto per orientarti.

Niente modelli importati. Nessun layout già pronto da ritoccare al volo.

Il design lo costruirai tu, pezzo dopo pezzo. Così alla fine non saprai solo “cliccare dentro Divi”, ma capirai come si mette insieme un progetto reale dall’inizio alla fine.

Se hai dubbi su come impostare il tuo progetto o vuoi un parere prima di partire, scrivimi e ne parliamo.

Pronti? Iniziamo da qui.

Prima di aprire l'editor

Un sito non parte davvero quando clicchi su “Modifica con Divi”. Parte prima: quando decidi quali pagine servono, quali testi userai, che immagini ti mancano, quali colori guideranno il progetto e quale obiettivo deve raggiungere il sito.

Se apri il builder senza queste cose, rischi di fermarti ogni tre minuti: “Che titolo metto?”, “Che immagine uso?”, “Questa sezione a cosa serve?”, “Dove mando l’utente dopo il pulsante?”.

È lì che il lavoro si impantana.

In questa parte facciamo ordine su quattro blocchi:

  • come lavorano insieme WordPress e Divi;
  • cosa raccogliere prima di costruire;
  • quali controlli tecnici fare prima di iniziare;
  • come installare WordPress e Divi, se parti proprio da zero.

Se hai già WordPress e Divi installati e sai muoverti nel pannello, puoi andare direttamente alla checklist di preparazione. Se invece stai iniziando adesso, segui tutto con calma: ti eviti parecchi giri a vuoto.

Come funzionano WordPress e Divi insieme

Partiamo da una cosa semplice: WordPress è la base del sito. Gestisce pagine, articoli, immagini, utenti, impostazioni e contenuti. È il motore che tiene in piedi tutto.

Divi, invece, ti aiuta a costruire l’aspetto del sito. Ti permette di disegnare pagine, sezioni, colonne, pulsanti, intestazioni e piè di pagina senza scrivere codice ogni volta.

Per capirla meglio: WordPress tiene in ordine la casa, Divi ti aiuta ad arredarla.

Cosa ti serve prima di iniziare

Prima di installare WordPress e mettere mano a Divi, hai bisogno di una base tecnica funzionante. Senza di essa, non puoi fare nulla.

In concreto ti servono tre cose: un dominio (l'indirizzo del tuo sito, come tuonome.it), un piano di hosting per WordPress dove ospitare i file del sito, e le credenziali di accesso per gestire tutto dal pannello di controllo.

Solo quando queste tre cose sono al loro posto puoi procedere con l'installazione di WordPress e, subito dopo, con l'attivazione di Divi. Se parti da zero e non hai ancora scelto un provider, è il momento giusto per farlo: la scelta dell'hosting influenza la velocità del sito, la stabilità e la facilità di gestione nel tempo.

Cos'è un tema WordPress

WordPress ha sempre bisogno di un tema attivo. Il tema è il pacchetto che definisce la struttura visiva di base del sito: caratteri, colori, intestazione, piè di pagina, impaginazione generale.

Con un tema tradizionale puoi modificare alcune impostazioni, ma spesso resti dentro una struttura già decisa da chi ha creato quel tema. I temi più recenti basati su blocchi sono più flessibili, certo, ma anche lì parti comunque da una base definita.

Quindi il tema risponde a una domanda molto pratica: “Com’è fatto il sito, di base?”

Cos'è un costruttore di pagine

Un costruttore di pagine, o page builder, ti permette di costruire visualmente le pagine. Invece di scrivere CSS, cioè il codice che controlla colori, spaziature e stile, puoi lavorare con sezioni, righe, colonne e moduli.

Vuoi aggiungere un testo? Inserisci un modulo di testo. Vuoi un pulsante? Inserisci un modulo pulsante. Vuoi due colonne affiancate? Le crei, le sistemi a schermo e vedi subito il risultato. Vale la pena pensare fin da subito a come si comporteranno quelle colonne su mobile: gestire le colonne responsive in Divi 5 è più semplice di quanto sembri, ma richiede qualche accorgimento già in fase di strutturazione.

Questo non significa che il codice sparisca. Semplicemente, Divi lo genera per te mentre lavori in modo visuale.

Dove entra Divi

Divi è entrambe le cose: è un tema WordPress ed è anche un costruttore visuale di pagine.

Quando installi Divi, ottieni:

  • un tema che gestisce la struttura generale del sito;
  • un builder visuale per costruire le singole pagine;
  • un Costruttore di template, cioè una sezione dove puoi creare modelli globali per intestazione, piè di pagina, articoli, archivi, pagina 404 e altre parti del sito.

Un template, detto semplice, è un modello riutilizzabile. Per esempio: invece di creare ogni volta da zero il layout di un articolo del blog, prepari un modello e Divi lo applica automaticamente agli articoli.

Il punto comodo è questo: con Divi puoi controllare pagine, stile, modelli globali e la resa su ogni dispositivo dentro un unico sistema. L'editor responsive di Divi 5, in particolare, ti permette di vedere e modificare in tempo reale come appare il sito su desktop, tablet e mobile, senza dover uscire dall'editor.

E se vuoi aggiungere codice personalizzato, puoi farlo. Divi non ti chiude in gabbia, e questa è una buona notizia.

Prima di iniziare a costruire le singole pagine, vale la pena fermarsi un momento sulla struttura dei layout. Quando lavori con Divi, ti troverai spesso a scegliere come organizzare colonne, sezioni e griglie. Capire in anticipo se usare grid o flexbox per certe aree del sito ti evita di tornare indietro a correggere scelte improvvisate, specialmente quando il progetto cresce e i template si moltiplicano.

Cosa raccogliere prima di iniziare a costruire

Prima di costruire, conviene avere una direzione chiara. Non serve avere tutto perfetto, lucidato e benedetto dagli dei del design. Serve avere abbastanza materiale per non bloccarti ogni volta che devi prendere una decisione.

Prova a guardarla così: imparare Divi richiede già attenzione. Se mentre lo impari devi anche inventare testi, cercare immagini, scegliere colori e capire che pagine ti servono, stai caricando troppe cose nello stesso momento.

Quindi separiamo i lavori.

Prima decidi cosa vuoi costruire. Poi impari come costruirlo.

Direzione del brand

Non ti serve un manuale di brand da 40 pagine. Ti serve una piccola bussola per non scegliere colori e font a caso mentre sei dentro l'editor.

Come minimo, prepara questi elementi:

Colori: scegli un colore principale, un colore secondario o di accento e una piccola palette neutra. Per esempio: un nero morbido per i testi, un bianco caldo per gli sfondi, uno o due grigi per bordi e testi secondari.

Se hai già i codici HEX, cioè i codici colore usati sul web, tienili pronti. Sono quelli tipo #1F2937. Se parti da zero, strumenti come Coolors o Adobe Color ti aiutano a creare una palette senza impazzire.

Font: scegli un carattere per i titoli e uno per i testi lunghi. Due font bastano quasi sempre. Google Fonts è comodo perché Divi lo integra già.

Una combinazione semplice: un font senza grazie per i titoli e un font molto leggibile per il testo. Qui non dobbiamo vincere un premio di tipografia: dobbiamo far leggere bene le persone.

Queste scelte verranno poi inserite nelle variabili globali di design nella Parte 3. Si tratta di valori salvati una volta e riutilizzati in più punti del sito: colori, font, misure.

Se cambi il valore centrale, puoi aggiornare il sito in modo più ordinato.

Il logo

Il logo può comparire nell’intestazione del sito, nel piè di pagina, nella favicon e in altri punti. La favicon è la piccola icona che vedi nella scheda del browser.

Se hai già un logo, controlla tre cose:

  • si legge bene su sfondo chiaro;
  • si legge bene su sfondo scuro;
  • hai un formato adatto al web.

I formati migliori sono SVG oppure PNG ad alta risoluzione con sfondo trasparente. SVG è un formato vettoriale: resta nitido anche se lo ingrandisci. PNG va benissimo quando ti serve un’immagine con trasparenza.

Se non hai ancora un logo, non bloccarti qui. Crea un segnaposto semplice: il nome del sito scritto con il font scelto per i titoli può bastare. Puoi farlo con Canva, Photoshop, GIMP o anche con uno strumento molto semplice.

L’importante è sapere che prima del lancio andrà sostituito o rifinito.

Immagini e contenuti multimediali

Per iniziare, le foto di repertorio vanno benissimo. Non sono la scelta definitiva per ogni progetto, ma per costruire una bozza funzionano. Siti come Unsplash e Pexels offrono immagini gratuite e di buona qualità.

Per il sito dello spazio di lavoro condiviso che costruiremo in questa guida, cerca immagini di:

  • aree di lavoro e scrivanie condivise;
  • persone che collaborano o lavorano in autonomia;
  • sale riunioni e uffici privati;
  • esterni dell’edificio o reception;
  • servizi comuni, come angolo caffè, lounge o spazi per eventi.

Raccogli più immagini di quante pensi ti serviranno. È molto meglio avere alternative già pronte che fermarsi a metà sezione perché “manca proprio quella foto lì”.

Classico.

Prima di caricarle su WordPress, ottimizzale. Ottimizzare significa ridurre il peso del file senza rovinare visibilmente la qualità. Strumenti come TinyPNG, Squoosh o Smush sono più che sufficienti quasi sempre.

Le immagini troppo pesanti sono una delle cause più comuni dei siti lenti. Sistemarle prima ti fa risparmiare tempo dopo.

La mappa del sito

La mappa del sito è l'elenco delle pagine che devi creare e di come si collegano tra loro. Può essere un documento, uno schema, una lista su carta. Non serve complicarla.

Per il sito dello spazio di lavoro condiviso, useremo questa struttura:

  • Pagina principale: panoramica dello spazio, vantaggi principali e azioni importanti per chi visita il sito.
  • Chi siamo: storia, persone, motivo per cui lo spazio esiste e cosa lo rende diverso.
  • Spazi o Piani di abbonamento: postazioni flessibili, postazioni dedicate, uffici privati e sale riunioni, con prezzi e caratteristiche.
  • Blog: una pagina archivio dinamica che raccoglie gli articoli. "Dinamica" significa che si aggiorna automaticamente quando pubblichi nuovi articoli.
  • Contatti: indirizzo, orari, modulo di contatto e mappa incorporata.

Più avanti potresti aggiungere Eventi, FAQ, Lavora con noi o Termini e condizioni. Ma all'inizio conviene stare sull'essenziale.

Una struttura semplice ti aiuta a capire quali contenuti servono davvero e quali sono solo "magari un giorno".

Contenuti scritti

Prima di costruire la pagina principale, prepara almeno una bozza dei testi. Non devono essere definitivi, ma devono esistere in una forma usabile.

Ti servono:

  • Titolo e sottotitolo della pagina principale: una frase che dica cosa offre lo spazio e una frase che spieghi perché dovrebbe interessare.
  • Punti forti: tre o quattro frasi brevi che spiegano perché scegliere quello spazio.
  • Sezione Chi siamo: due o tre paragrafi su storia, persone e motivo per cui lo spazio esiste.
  • Descrizioni di servizi o piani: per ogni piano, prepara nome, breve descrizione e prezzo, anche approssimativo.
  • Azioni principali: per esempio “Prenota una visita”, “Vedi i piani”, “Contattaci”. Scegli formule coerenti tra loro.
  • Informazioni di contatto: indirizzo, telefono, email e orari.

Scrivere mentre costruisci rallenta tutto. Non perché sia vietato, ma perché ogni sezione diventa una micro-riunione con te stesso.

E di solito quelle riunioni non finiscono mai.

Fonti di ispirazione

Guarda cinque o dieci siti del tuo settore o di settori vicini. Salva esempi di pagine, sezioni, menu o soluzioni visive che funzionano.

Fai attenzione a:

  • struttura della pagina principale;
  • organizzazione del menu;
  • spaziature e uso del bianco;
  • scelte tipografiche;
  • uso del colore;
  • tipo di immagini usate.

Non si tratta di copiare. Si tratta di creare riferimenti.

Copiare significa prendere una soluzione e rifarla uguale. Usare riferimenti significa capire cosa ti convince e tradurlo nel tuo progetto.

Questo è molto utile anche se lavori con un cliente: invece di parlare di “stile moderno ma caldo, pulito ma non freddo” — cioè il festival dell’ambiguità — puoi mostrare esempi concreti.

Organizza i tuoi materiali di preparazione

Tieni tutto in un unico posto. Sembra banale, ma quando inizi a costruire fa una differenza enorme.

Una struttura semplice può essere questa:

  • /brand: loghi, colori, font;
  • /immagini: foto e contenuti multimediali;
  • /contenuti: testi delle pagine;
  • /riferimenti: ispirazioni, screenshot, esempi.

Così, quando ti serve il logo, non devi cercarlo tra download, desktop, chat WhatsApp e cartelle chiamate “nuovo nuovo definitivo”.

Che poi definitivo non è mai.

Esempio di struttura delle cartelle per preparare i materiali del sito

Checklist di preparazione

Prima di aprire WordPress e iniziare a costruire, fermati cinque minuti.

Non per complicarti la vita, ma per evitare di perdere ore dopo.

Ecco cosa dovresti avere pronto:

  • Identità visiva — Logo in PNG o SVG, palette colori con codici HEX, font scelti. Se non li hai ancora, meglio definirli adesso.
  • Contenuti e testi — Bozze delle pagine principali: Home, Chi siamo, Servizi o Spazi, Contatti.
  • Immagini e contenuti multimediali — Foto ottimizzate per il web e rinominate in modo comprensibile. Niente IMG_20240301_final_v2.jpg, per favore. Ci vogliamo bene.
  • Mappa del sito — L'elenco delle pagine da creare, anche solo su un foglio.
  • Riferimenti visivi — Siti, schermate o sezioni che ti aiutano a definire la direzione.
  • Accessi e credenziali — WordPress installato, accesso al pannello di hosting, eventuale accesso FTP e email collegata al dominio.
  • Plugin essenziali individuati — SEO, modulo di contatto, sicurezza, cache. Meglio decidere prima cosa serve davvero.
  • Obiettivo del sito — Cosa deve fare? Generare contatti, vendere, informare, ricevere prenotazioni? Senza questa risposta rischi di costruire un sito bello ma poco utile.

Non serve che tutto sia perfetto.

Serve che sia abbastanza pronto da non bloccarti ogni tre sezioni.

Se vuoi un confronto su cosa preparare prima di avviare la progettazione del tuo sito web, scrivimi. Vediamo insieme cosa ti serve davvero e cosa invece puoi lasciare per dopo.

La mia base di pre-costruzione: staging, backup, essenziali

Prima di toccare un singolo modulo Divi, ci sono alcune cose che controllo sempre. Non perché sia un maniaco del controllo, anche se a tratti il sospetto viene.

Ma perché ho imparato che saltare questi passaggi costa tempo, nervi e a volte anche qualche figuraccia.

Questa è la mia base prima di iniziare qualsiasi progetto reale.

Staging, non in produzione

Regola semplice: non si costruisce mai direttamente sul sito online.

Lo staging è una copia di lavoro del sito, separata da quella visibile al pubblico. Ti permette di provare, sbagliare, rompere cose e sistemarle senza che clienti o utenti vedano nulla.

Quando tutto funziona, porti le modifiche in produzione. “Produzione” significa il sito vero, quello pubblicato e visibile online.

Molti hosting ormai offrono lo staging con un clic. Se il tuo lo permette, usalo.

Se non lo permette, valuta almeno una soluzione alternativa prima di mettere mano a un sito già attivo.

Backup prima di tutto

Se lavori su un sito già esistente, il backup è il primo gesto da fare.

Backup significa copia di sicurezza. Deve includere sia i file del sito sia il database, cioè la parte dove WordPress salva contenuti, impostazioni, utenti e molte configurazioni.

Non affidarti solo al backup automatico dell’hosting. Fanne uno manuale e scaricalo anche in locale, cioè sul tuo computer o in uno spazio sicuro.

Costa pochi minuti e ti salva da situazioni che davvero non hai voglia di vivere.

SSL attivo e funzionante

Il certificato SSL deve essere attivo prima di costruire. È quello che permette al sito di usare HTTPS, cioè la connessione sicura che vedi nel browser.

Meglio sistemarlo subito, non dopo.

Aggiungerlo a un sito già costruito può creare contenuti misti, reindirizzamenti da correggere e impostazioni da rivedere.

Partire puliti è più semplice che ripulire dopo.

Plugin essenziali, niente collezioni inutili

Installo subito solo i plugin che servono davvero. Il resto si valuta quando c'è una necessità concreta.

La mia lista minima di solito include:

  • SEO — Rank Math o Yoast, per gestire titoli, descrizioni, sitemap e impostazioni base per i motori di ricerca.
  • Cache e prestazioni — WP Rocket o LiteSpeed Cache, in base all'hosting. La cache salva versioni alleggerite delle pagine per farle caricare più velocemente.
  • Backup automatico — UpdraftPlus o uno strumento equivalente, configurato fin da subito.

Se il progetto è un e-commerce, la preparazione si estende anche a WooCommerce e alla pianificazione del carrello e checkout di WooCommerce: pagine di acquisto, flusso di pagamento, conferme d'ordine. Sono elementi strutturali del sito, non dettagli da affrontare a fine lavori.

Un sito con trenta plugin installati "perché magari servono" non è un sito preparato.

È un cantiere con troppe chiavi inglesi in giro.

Convenzioni per le immagini

Prima di caricare file nella libreria media, stabilisco alcune regole.

Per esempio:

  • larghezza massima per le immagini grandi di apertura;
  • dimensioni indicative per card e miniature;
  • nomi di file chiari e leggibili;
  • ottimizzazione prima del caricamento.

Hero, card e miniature sono solo nomi pratici: la hero è la sezione grande iniziale di una pagina, le card sono blocchi visivi ripetuti, le miniature sono immagini piccole di anteprima.

Strumenti come Squoosh o TinyPNG bastano quasi sempre. Una libreria media ordinata rende più veloce il sito e anche il tuo lavoro.

Non è una lista complicata.

Però è la differenza tra una costruzione che parte dritta e una che parte già con il freno a mano tirato. Se vuoi confrontarti su come organizzare la tua preparazione prima di costruire, scrivimi.

Installare WordPress e Divi

Se parti da zero, prima di costruire ti servono due cose:

  • WordPress installato su un hosting;
  • Divi installato e attivato dentro WordPress.

Vediamo i passaggi senza farla più complicata del necessario.

Hosting web e WordPress

WordPress ha bisogno di un hosting, cioè uno spazio su un server dove vengono salvati i file e il database del sito.

Prima di scegliere un hosting, controlla che abbia almeno:

  • PHP aggiornato, cioè il linguaggio su cui gira WordPress;
  • memoria PHP adeguata, meglio almeno 256 MB;
  • certificato SSL per usare HTTPS;
  • backup automatici;
  • ambiente di staging;
  • supporto decente, perché quando serve serve davvero.

Molti provider permettono di installare WordPress con pochi clic. In quel caso l’hosting crea automaticamente database, file e configurazione iniziale.

Se invece vuoi installarlo manualmente, puoi seguire la documentazione ufficiale di WordPress.

Ma se questo è il tuo primo sito, l’installazione guidata dell’hosting va benissimo.

Installare e attivare Divi

Quando WordPress è attivo, puoi installare Divi come faresti con qualsiasi altro tema.

  1. Accedi all’area riservata di Elegant Themes e scarica il file compresso di Divi.
  2. Nel pannello di controllo di WordPress, vai su Aspetto > Temi > Aggiungi nuovo > Carica tema.
  3. Carica il file, clicca su Installa ora e poi su Attiva.
  4. Segui la procedura guidata iniziale per completare la configurazione.
Aggiunta del tema Divi 5 a WordPress

Dopo l’attivazione, nella barra laterale di WordPress comparirà una nuova voce: Divi. È il punto da cui gestisci le impostazioni principali del tema e alcune funzioni globali.

Per una procedura completa con schermate, puoi seguire la guida dedicata all’installazione del tema Divi.

Orientarsi in WordPress con Divi

Una volta installato Divi, il pannello di WordPress avrà qualche voce in più. Non devi impararle tutte subito.

Anzi: provare a configurare tutto prima di sapere cosa serve è uno dei modi migliori per confondersi.

Qui facciamo solo una mappa veloce. Così sai dove si trova cosa, senza entrare ancora in ogni dettaglio.

Opzioni del menu di amministrazione del tema Divi

Il menu di Divi

Cliccando su Divi nella barra laterale di WordPress, trovi diverse sezioni.

Bacheca di Divi è il punto centrale. Da qui puoi creare nuove pagine, gestire template o generare un sito con Divi Quick Sites.

In questa serie costruiremo tutto da zero, quindi non useremo i Quick Sites. Sono strumenti utili quando vuoi partire velocemente da una struttura generata, ma qui l’obiettivo è capire come si costruisce il sito pezzo per pezzo.

Opzioni del tema è il pannello dove gestisci impostazioni generali: logo, profili social, prestazioni, integrazioni e alcune opzioni SEO di base.

All’inizio le schede più utili sono queste:

  • Generale: carichi il logo e inserisci gli URL dei profili social. Questi dati possono comparire in intestazione e piè di pagina.
  • Generale > Prestazioni: attivi opzioni che aiutano il sito a caricarsi meglio. Per esempio CSS dinamico, framework modulare dinamico e CSS critico. Detto semplice: Divi cerca di caricare solo ciò che serve davvero alla pagina, invece di appesantire tutto.
  • Integrazione: inserisci script di tracciamento, come Google Analytics o Meta Pixel. Uno script è un pezzetto di codice che aggiunge una funzione, per esempio misurare le visite o collegare strumenti esterni.
  • Aggiornamenti: inserisci username e chiave API del tuo account Elegant Themes. La chiave API è una credenziale tecnica che permette a WordPress di scaricare gli aggiornamenti di Divi.

Le altre schede — Navigazione, Costruttore, Layout, Annunci e SEO — non richiedono interventi immediati.

Per esempio, la SEO è meglio gestirla con un plugin dedicato come Yoast o Rank Math. Le altre impostazioni le toccheremo quando serviranno.

Non devi configurare tutto adesso solo perché esiste un pannello. Brutta tentazione, lo so.

Pagina delle opzioni del tema Divi

Il Costruttore di template

Il Costruttore di template è la sezione in cui crei e assegni modelli globali del sito.

Da qui puoi controllare:

  • intestazione;
  • piè di pagina;
  • layout degli articoli;
  • pagina 404;
  • pagine di archivio;
  • altri modelli riutilizzabili.

Non costruiremo questi elementi subito. Li affronteremo nelle Parti 6, 7 e 8.

Per ora ti basta sapere che questa è la zona in cui Divi controlla le parti ricorrenti del sito.

All'inizio useremo i modelli predefiniti di Divi. Poi li sostituiremo con versioni personalizzate, quando avremo già una struttura più chiara. In quella fase, per gestire i layout degli articoli e le pagine di archivio più complessi, entrerà in gioco anche il loop builder Divi 5, uno strumento pensato appositamente per creare feed e contenuti dinamici su misura.

Costruttore del tema Divi per template globali

Se stai costruendo un e-commerce, tieni presente che il Costruttore di template diventa ancora più importante: oltre ai modelli generali, dovrai prevedere anche layout specifici per le pagine di prodotto WooCommerce. Ogni pagina di prodotto può essere personalizzata con moduli dedicati, controllo del layout e sezioni visive coerenti con il resto del sito. È un lavoro che affronteremo in una fase successiva, ma vale la pena sapere fin da ora che il Costruttore di template è lo strumento giusto anche per quella parte del sito.

Modificare le pagine con Divi

Per creare una pagina, vai su Pagine > Aggiungi nuova nel pannello di WordPress.

Dai un titolo alla pagina, salvala e poi clicca su Modifica con Divi. A quel punto si apre il Costruttore visivo, cioè l’interfaccia dove costruisci la pagina vedendo il risultato direttamente sullo schermo.

Puoi aprire il Costruttore visivo anche dal lato pubblico del sito. Devi solo essere loggato, visitare la pagina e cliccare Modifica con Divi nella barra di amministrazione in alto.

Questo sarà lo spazio in cui passerai più tempo: aggiungerai sezioni, testi, immagini, pulsanti, colonne e stili. Nella Parte 2 vedremo bene pannelli, barre degli strumenti e la logica dell’interfaccia.

Per ora tieni a mente una cosa: il Costruttore visivo lavora sulla pagina reale.

Quello che modifichi lì è ciò che poi l’utente vedrà, una volta pubblicato.

Modifica di una pagina con Divi dall’elenco delle pagine

Cosa trovi nella prossima parte

A questo punto dovresti avere una base chiara: WordPress installato, Divi attivo, materiali principali raccolti e una prima idea di dove si trovano le impostazioni più importanti.

Nella seconda parte entreremo dentro il Costruttore visivo di Divi. Vedremo pannelli, barre degli strumenti, modalità di modifica e logica dell’interfaccia.

Così, quando inizieremo a progettare, non dovrai andare a caccia dei comandi.

Il percorso completo ricostruisce un sito reale per uno spazio di lavoro condiviso partendo da zero: niente layout importati, niente scorciatoie travestite da metodo, niente “clicca qui e magia”.

Costruiamo una cosa alla volta, capendo cosa stiamo facendo.

Se nel frattempo hai dubbi o vuoi confrontarti su un progetto specifico, puoi scrivermi direttamente. Vediamo insieme cosa funziona meglio per te e da dove conviene partire.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes come base.

Scarica DIVI

Se ancora non utilizzi DIVI e vuoi usarlo per lavorare sul tuo sito web in autonomia, puoi scoprire di più su questo tema e acquistarlo dal pulsante qui sotto!

Nota: se acquisterai Divi da qui guadagnerò una commissione, ma mi sembra un buon modo per ripagare una piccola parte del lavoro senza chiederti un centesimo.

Chi scrive

Damiano Ruggieri

Heilà! Sono Damiano. Da 10 anni sviluppo siti web personalizzati con Divi e mi occupo di SEO, e nel tempo libero mi perdo a fare robe complicate con n8n, comporre musica e lavorare a progetti teatrali. Mi piacciono le idee insolite, i progetti complessi, le persone brillanti, e mi piace fare tante cose, ma farle bene.

0 Commenti

Invia Un Commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *