Costruzione di una pagina con Divi

In questa lezione diventeremo finalmente operativi e modificheremo il layout che abbiamo importato personalizzandolo in una pagina di prova.

La prima cosa che voglio fare è modificare lo slider, cambiando testo, sfondo ed eliminando la navigazione a pallini.

Apro quindi il pannello relativo e inizio modificando il testo del messaggio e quello del bottone, aggiungendo anche la url a cui deve puntare.

Poi vado ad inserire nello sfondo un’immagine che avevo precedentemente caricato.

Visto che la nuova grafica ha una tonalità chiara, posso anche decidere di cambiare il colore del testo.

Come visto prima, potrei anche decidere di modificare ogni impostazione inerente al carattere grazie alle opzioni di design avanzato.

In questo caso voglio cambiare il colore delle frecce di navigazione.

A questo punto salvo l’elemento e torno alla schermata precedente.

Se ad esempio volessi aggiungere una slide, partendo dalla base che abbiamo appena modificato, ricorda che potrai farlo duplicando il primo elemento.

Infine elimino da qui la navigazione a pallini, ora posso salvare, aggiornare la pagina e valutare il risultato.

Bene, sono soddisfatto del risultato, posso passare quindi alla personalizzazione dei blocchi sotto.

Per il nostro sito, ipotizziamo che non ci servano 6 blocchi, ma solo 4 quindi vogliamo cambiare l’impostazione e disporli su una riga sola.

Quello che devo fare è cliccare sulla riga che mi interessa, scegliere l’impaginazione a 4 colonne e spostare uno dei miei blocchi sulla riga precedente.

Poi elimino quella in eccesso e torno a controllare come appare la pagina.

Perfetto, ora però posso anche scegliere di personalizzare i miei blocchi singolarmente.

Apro quindi il pannello e inizio a modificare alcuni dettagli come il testo e l’icona, che, potrai scegliere tra le tante già preimpostate.

Poi, posso definirne il colore e se, ad esempio, vogliamo che sia iscritta in un cerchio.

Posso cambiare la disposizione dell’incona e associare anche un’animazione.

Ne scelgo una tra quelle proposte, e posso immediatamente valutare il risultato grazie all’utilissima funzione di anteprima.

Ovviamente gli altri blocchi dovranno essere sistemati secondo la nuova grafica, quindi procedo cambiandoli tutti

Procediamo così, ad analizzare la pagina per fare ulteriori modifiche.

Ad esempio ci sono due sezioni non mi interessano, quindi le andremo ad eliminare, però vogliamo mantenere quella con i numeri animati, cambiandole però il colore di sfondo per farlo apparire meglio con il nostro layout.

Torniamo quindi lato backend, elminiamo le sezioni superflue, e procediamo con la modifica del colore di sfondo della sezione con i contatori numerici.

Ora posso anche andare ad intervenire sul modulo singolo dei numeri cambiandone il colore e aggiungendo ad esempio il simbolo percentuale.

Fatto questo, supponiamo che vogliamo replicare il lavoro già svolto per il primo possiamo semplicemente cancellare i moduli rimanenti e duplicare il primo per poi andare a personalizzare gli altri più velocemente.

Un’altra cosa che possiamo fare con l’importatore è combinare diversi layout.

Per farti capire come funziona, semplicfichiamo la pagina, andando ad eliminare le sezioni sottostanti che non ci interessa utilizzare, tanto il principio di modifica dei layout preimpostati, dovrebbe esserti abbastanza chiaro.

Nel caso volessimo inserire un modulo per contatti con tanto di mappa in fondo alla nostra home page possiamo aggiungerlo con il procedimento visto nella lezione precedente.

Come vedi cliccando su carica dalla libreria, c’è una casella che di default è spuntata.

se la lasci attiva, il layout che caricherai sostituirà completamente quello su cui stavi lavorando, ma noi non vogliamo perdere le nostre impostazioni, ma semplicemente integrarle con altro.

Quindi tolgo la spunta alla casella e seleziono, nel nostro caso il layout contattaci che, come vedi, viene inserito in cima a tutto il resto.

Noi però vogliamo che i contatti stiano in fondo, quindi non faccio altro che prendere le due sezioni e trascinarle sotto.

Bene, è arrivato il momento di controllare la nostra pagina, quindi salviamo e vediamo come si presenta.

Ottimo, ora possiamo procedere a modificare la mappa.

Vado quindi ad aprire la tab relativa all’indirizzo, e ne metto uno fittizio.

Poi, se ad esempio hai un’azienda con più sedi, puoi semplicemente aggiungerne un altro puntatore duplicando il primo.

Nella schermata iniziale centriamo la mappa come vogliamo che appaia e salviamo.

Ora possiamo concentrarci sul modulo di contatto, il procedimento è sempre lo stesso.

Grazie all’interfaccia di Divi è semplicissimo capire cosa stiamo modificando e che tipo di opzioni abbiamo a disposizione.

Nel nostro caso vogliamo inserire un campo per l’indirizzo, quindi lo aggiungiamo, gli diamo un ID scelgiamo che tipo di campo deve essere, lo mettiamo facoltativo e salviamo.

Ora possiamo anche aggiungere un campo per la sicurezza e dobbiamo inserire l’indirizzo mail a cui devono arrivare i messaggi, e dobbiamo cambiare il testo del pulsante

Infine, possiamo impostare sia il messaggio di avvenuta compilazione, che l’eventuale redirect su una pagina di ringraziamento che costruiremo.

Fatto questo, salviamo ancora una volta e ammiriamo la nostra pagina completa.

Come detto Divi possiede un’enorme numero di moduli che potrai utilizzare, quindi ora, facciamo uno step successivo e aggiungiamo una sezione da zero scegliendo, per rendere ancora più completo l’esempio, una sezione speciale in cui vogliamo inserire una sidebar con un widget. e sul lato una foto di presentazione.

Prima di tutto andiamo a creare il nostro widget personalizzato.

Dalla solita sezione entriamo nell’area widget e creiamone uno nuovo dandogli un nome.

Il widget si visualizzerà aggiornando la pagina, eccolo qui.

Ora possiamo crearci la nostra sidebar personalizzata mettendo, per esempio il cerca, la lista degli ultimi articolo e i commenti.

Poi, torniamo sulla nostra home page, aggiorniamo di nuovo perchè recuperi il nuovo widget e lo andiamo ad inserire con i modulo Barra laterale.

Poi, dobbiamo sistemare il resto della sezione speciale, quindi iniziamo a dargli una struttura.

Abbiamo detto che vogliamo inserire una foto quindi secgliamo il modulo immagine, ma come vedi potremmo scegliere una galleria, uno slider video, un video singolo e molti altri elementi, carichiamo un’immagine inseriamo ad esempio un bordo e salviamo.

Poi possiamo mettere un piccolo testo introduttivo, e per farlo sceglierai il modulo che probabilmnente userai più spesso per la costruzione di pagine, ossia il testo.

Fatto questo possiamo integrarlo con un altro modulo, come le barre contatori, o con qualunque altro modulo che ti servirà per la costruzione della tua pagina.

Come vedi, andare a personalizzare la pagina per riuscire a ottenere il risultato che cerchi è un processo intuitivo che può essera anche divertente, quello che dovrai fare, per risparmiare tempo, è avere le idee chiare su cosa devi realizzare.

Il nostro consiglio, a questo punto è di progettare anche su carta il tuo sito, per capire cosa hai necessità di inserire e sopratutto come vuoi disporre i tuoi contenuti.

Poi valuta se utilizzare uno dei layout già disponibili per agevolarti il lavoro, o se partire da zero aggiungendo manualmente sezioni e moduli.

In entrambi i casi, hai potuto apprezzare come sia semplice modificare una pagina personalizzandola in ogni suo aspetto.

Un’altra caratteristiche di divi è la possibilità di annullare le operazioni come con il classico ctrl+z.

In alto infatti possiamo tornare indietro alla versione precedentemente salvata o scorrere tra tutti gli aggiornamenti che faremo nel corso del tempo.

Il sistema recupererà lo stato precedente della pagina indicando a che tipo di modifica corrisponde.

Per concludere la nostra panoramica sul builder vediamo come organizzare i vari blocchi per gestirli al meglio.

Gli sviluppatori di Divi hanno abilitato il tasto destro del mouse, cliccandolo su ogni elemento possiamo, per faciliare il lavoro, comprimerlo, dargli un nome, bloccarlo, impostarne la visibilità fare uno split test o salvarlo nella libreria, ma questi ultimi due aspetti, li vedremo successivamente.

Nella prossima lezione vedremo come gestire le opzioni del tema e il suo aspetto generale.