Impara come usare una funzionalità di Divi estremamente utile: i Progetti

I Progetti sono un tipo di post (nel linguaggio di WordPress, un “custom post type”) che ti permette di presentare i tuoi prodotti (o i tuoi lavori) in maniera davvero accattivante.
Con questo articolo, imparerai a creare un Progetto, che potrà essere la base di partenza per un vero e proprio catalogo, o portfolio, che visualizzerai in maniera dinamica e accattivante, sempre grazie ai moduli messi a disposizione da Divi.

Non andrai, invece, a lavorare sulle impostazioni di Design avanzate dei vari moduli di Divi, per non mettere troppa carne al fuoco e allontanarti  dal fine di questo tutorial.

Crea il tuo primo Progetto

Per prima cosa, posizionati sulla voce di Menù “Progetti” e seleziona “Aggiungi nuovo”.

extra divi creare progetti

crea un nuovo progetto divi

Ti troverai, dopo pochi istanti, nella schermata dell’Editor del tuo primo Progetto: per sfruttare tutte le possibilità di Divi, clicca sul pulsante viola “Usa il Builder Divi”.

A questo punto, la finestra dell’Editor cambierà, e apparirà l’interfaccia del Divi Builder vuota, pronta per essere personalizzata!

Inserire i moduli

Stai partendo da zero, quindi non spaventarti… segui la procedura e vedrai che sarà molto più semplice di quel che pensi!

Adesso, inizierai a strutturare la pagina: in questo esempio inserirai un’intestazione con uno sfondo, poi il contenuto vero e proprio, con un’immagine che presenti il progetto, un testo descrittivo e una photo gallery.

creare progetto in divi 1

Per prima cosa, clicca su “Inserisci modulo”; scegli “Titolo del Post” dall’elenco che apparirà nel popup. Visualizzerai immediatamente le principali opzioni di personalizzazione.

Personalizzare l’intestazione

modulo titolo post divi builderCome prima cosa, restiamo nella scheda dei Contenuti e settiamo le seguenti impostazioni:

  • Mostra Titolo: sì – controlla se mostrare o no il titolo del Progetto (in questo caso, “Il mio Progetto di test”)
  • Mostra Metadata: no – controlla se mostrare o meno i metadata del post (data di pubblicazione, autore, categorie del Progetto ecc.)
  • Mostra immagine in evidenza: no – controlla se mostrare un’immagine in evidenza.

Queste impostazioni sono dei suggerimenti e servono a farti capire come funziona il builder e cosa può fare. Ovviamente puoi impostarle diversamente, se preferisci.

divi modificare sezioneClicca su “Salva ed esci” per salvare le impostazioni e tornare alla schermata principale del builder. Salva la bozza (ricordati di farlo, ogni tanto!).

Adesso aggiungiamo uno sfondo all’intestazione: apri la schermata di modifica della sezione, tramite un clic sul controllo evidenziato nell’immagine qui a fianco.
Si aprirà il popup delle Opzioni: la prima sarà proprio quella che ti permette di impostare uno sfondo.

Per inserire un’immagine, clicca sulla terza Tab da sinistra e poi sul rettangolo vuoto sottostante: potrai sceglierla tra le immagini presenti nella Libreria Media di WordPress o caricarne una al momento (verrà comunque salvata nella Libreria assieme alle altre).
Le altre Tab servono, rispettivamente, a impostare per lo sfondo un colore piatto, un gradiente (cioè una sfumatura), un video.

impostare sfondo sezione divi

Appena fatto, Salva ed esci.

A questo punto, ecco come appare l’header del Progetto su Extradivi.it (se hai impostato altri font e colori principali sul tuo sito, oltre all’immagine saranno diversi anche questi). Ancora non c’è alcun contenuto nella pagina, quindi visualizzerai, ora, solo l’intestazione che hai appena creato e, sotto di essa, la barra inferiore di Divi.

anteprima progetto diviÈ per questo che il resto della schermata è vuoto e la barra in fondo è appiccicata all’header, ma niente paura… Rimedierai subito!

Facciamo spazio al contenuto!

Torna nell’Editor: aggiungi una Sezione standard e imposta due colonne di larghezza uguale al suo interno.
In quella a sinistra inserisci un modulo Testo, in quella a destra un modulo Accordion.
Come si fa? Esattamente come hai fatto all’inizio per inserire il modulo del titolo, tutto qui!

(Ah, chi ha tradotto l’interfaccia di Divi ha fatto un errore di battitura e, nell’elenco dei moduli, ha scritto “Accordino” 🙂 invece che Accordion, ma quello è).

Ecco l’Editor con i nuovi elementi:

nuovi elementi di contenuto divi

Apri il modulo di testo per inserire del contenuto:

inserimento testo modulo divi

L’interfaccia che trovi nella finestra è sempre quella ben familiare dell’Editor di WordPress: quindi puoi inserire il testo come fai di solito ogni volta che scrivi qualcosa sul sito.
Quando hai finito, Salva ed esci (salva anche la bozza, meglio una volta in più che una in meno!).

L’Accordion è un modulo che mostra inizialmente il titolo dei paragrafi; quando ci si clicca sopra, si apre una scheda con un effetto “a fisarmonica” che rivela il contenuto del paragrafo.

divi inserire accordionLo puoi usare per elencare alcune caratteristiche di punta del tuo Progetto, che i visitatori scopriranno cliccando sul titolo.
Per inserire i contenuti, come al solito, apri le Impostazioni del modulo.

  • Fai clic su Aggiungi Nuova Voce;
  • inserisci il titolo del primo paragrafo;
  • inserisci il contenuto;
  • salva e ripeti l’operazione per un altro paio di volte, così vedrai bene il funzionamento dell’Accordion.

 

Se vuoi, puoi cambiare i colori di sfondo dell’Accordion direttamente dalle Impostazioni principali; puoi anche impostare tonalità differenti per quando la sezione aperta e per quando è chiusa. Come puoi vedere nell’immagine, io l’ho fatto per mettere maggiormente in evidenza questi elementi e mostrare come vengono resi a schermo.

La pagina del Progetto inizia a prendere forma…

divi anteprima progetto

Ora che hai preso un po’ di dimestichezza con l’aggiunta di moduli, puoi capire come il Page Builder di Divi ti permetta anche di aggiustare il contenuto a seconda delle tue esigenze: se tu avessi, per esempio, il doppio del contenuto testuale, quale tipo di soluzione vorresti adottare per non avere una colonna lunga il doppio dell’altra? Vediamo un po’…

Variamo un poco il layout

Con Divi, provare un paio di alternative è una cosa che richiede davvero pochissimo tempo: inserisci un paio di moduli, vedi l’anteprima e via!

test layout 1

Aggiunta una nuova riga con 1 colonna e un modulo di testo

test layout 2

Aggiunto il nuovo testo di seguito al precedente e aggiunto un modulo Immagine sotto l’Accordion

Salva la bozza e visualizza l’anteprima.

Complimenti! Hai inserito diversi elementi per illustrare il tuo Progetto e la pagina potrebbe già essere completa così…
Ma noi non ci fermiamo, giusto? 😉

Mostrare più immagini con una Galleria

divi modulo galleriaA volte, è importante mostrare diverse immagini per illustrare un prodotto, un servizio o un lavoro: ti viene in aiuto il modulo “Galleria”, uno strumenti di Divi molto facile da utilizzare.
Come hai già fatto prima:

  • aggiungi una nuova riga a 1 colonna;
  • clicca su Inserisci modulo;
  • scegli “Galleria”.

A questo punto, si aprirà la finestra delle Opzioni , alla tab “Contenuti”.
Ora devi cliccare su “Carica galleria” e ti ritroverai nella Libreria Media: il modulo Galleria di Divi, infatti, di default utilizza la galleria di WordPress, mostrandola aggiungendo alcuni effetti che la rendono più accattivante.

Una volta nella Libreria Media, ti basta selezionare le immagini che vuoi inserire nel modulo e fai clic su “Aggiungi alla Galleria”.

Qualche personalizzazione da saper fare

Per impostazione predefinita, il modulo mostra il titolo per ogni immagine.
Se non ne scrivi uno nuovo, verrà mostrato come titolo quello inserito da WordPress in automatico (solitamente è il nome del file, senza però l’estensione). Se non inserisci la didascalia, non verrà mostrato nulla. Nell’immagine sottostante, ecco come appare la galleria lasciando le impostazioni predefinite (ho inserito un titolo e una didascalia di esempio alla quarta foto):

anteprima modulo galleria divi

impostazioni galleria diviSe preferisci non mostrare nè titolo né didascalia, devi agire sull’impostazione “Mostra Titolo e Descrizione” mostrata qui a fianco, disattivandola.

Lo stesso per la Paginazione; è la riga dei link che ti permettono di vedere le immagini precedenti e successive, rispetto a quelle che visualizzi in quel momento.
Quando avrai in Galleria più immagini di quelle che hai scelto di mostrare (tramite “Numero di Immagini), con questa opzione attiva, i link di paginazione appariranno.

Se vuoi modificare il colore dell’icona di zoom e/o l’icona stessa, devi spostarti sulla tab “Design”, poiché tutte le impostazioni che regolano la visualizzazione e l’aspetto grafico si trovano generalmente lì, e questo vale in genere per tutti i moduli Divi.

Non ci siamo soffermati su questi aspetti perché, come ti ho già detto all’inizio, lo scopo di questo tutorial era quello di renderti velocemente in grado di realizzare un Progetto: adesso che hai appreso come utilizzare i principali settaggi di diversi strumenti importanti, puoi sbizzarrirti nel modificare, togliere, aggiungere… In una parola, creare!