Guida pratica all’utilizzo del tema WordPress DIVI

Introduzione

Sei alla ricerca di un tema WordPress che ti permetta di creare un semplicissimo sito web professionale senza dover imparare a programmare? Allora sei nel posto giusto! In questo articolo ti parlerò di Divi, un tema WordPress estremamente versatile e facile da usare. Scoprirai le sue caratteristiche principali e come sfruttarle al meglio per creare il sito web dei tuoi sogni. Non perdiamo altro tempo e iniziamo questa recensione e guida in italiano su Divi!

Cosa è Divi

Divi è più di un semplice tema WordPress, è una piattaforma di creazione di siti Web completamente nuova che sostituisce l’editor di post WordPress standard con un editor visivo di gran lunga superiore. Nella pratica, è sia un plugin che un tema: il plugin introduce le funzionalità di visual builder mentre il tema contiene tutto il pacchetto necessario per creare il sito web. Può essere apprezzato sia dai professionisti del design che dai neofiti, dandoti la possibilità di creare progetti spettacolari con sorprendente facilità ed efficienza.

Caratteristiche principali

Divi è un tema WordPress sviluppato da Elegant Themes, una delle aziende leader nel settore dei temi premium per WordPress. Una delle caratteristiche principali di Divi è la sua flessibilità. Questo tema ti permette di creare qualsiasi tipo di sito web, grazie alla sua interfaccia drag-and-drop (trascina e rilascia). Non hai bisogno di essere un esperto di programmazione, Divi ti guida passo dopo passo nella creazione del tuo sito web.

1. Facile da usare

Divi è stato progettato per essere estremamente intuitivo e facile da usare. La sua interfaccia drag-and-drop ti permette di creare pagine e layout in modo semplice e veloce. Se non hai mai utilizzato un tema WordPress prima d’ora, non preoccuparti! Divi ti offre una vasta gamma di modelli predefiniti che puoi utilizzare come punto di partenza per il tuo progetto. Inoltre, il tema viene costantemente aggiornato e migliorato, garantendo una piattaforma stabile e all’avanguardia.

2. Design personalizzabile

Un’altra caratteristica che rende Divi un tema WordPress così popolare è la sua possibilità di personalizzazione. Divi ti permette di modificare ogni aspetto del tuo sito web, dal layout al colore, dalle dimensioni dei caratteri alle animazioni. Non solo puoi scegliere tra una vasta gamma di modelli predefiniti, ma puoi anche creare il tuo design unico e personalizzato. Divi ti offre tutti gli strumenti necessari per creare un sito web che rispecchi al meglio la tua personalità o quella del tuo brand.

Nota bene: potrebbe capitarti di voler fare delle modifiche più complesse, in questo caso potresti aver bisogno di ricorrere all’uso di codice CSS o JavaScript. Per questoa ragioneho creato il blog Divi Design Studio e una sezione dedicata alla guide tecniche per il tema Divi.

3. Supporto e documentazione

Una delle cose migliori di Divi è il suo supporto e la sua documentazione. Elegant Themes offre un’eccellente assistenza tecnica e una vasta raccolta di guide e tutorial che ti aiuteranno a sfruttare al massimo tutte le funzionalità di Divi. Inoltre, ci sono anche numerosi gruppi e forum di discussione in cui puoi trovare risposte alle tue domande o condividere le tue esperienze con altri utenti Divi.


Cosa sono i Moduli Divi

Un modulo Divi è un elemento di contenuto rappresentato visivamente da un blocco. Possiamo trascinare e rilasciare quel blocco ovunque all’interno di sezioni, righe e colonne per costruire i nostri layout. Ogni modulo ha impostazioni individuali che possono essere regolate con regolazioni visive come selezioni di colore, controlli di scorrimento o interruttori. Possono essere ulteriormente personalizzati con CSS.

Senza moduli dovremmo gestire il codice stesso, incollandolo nella posizione in cui vogliamo che appaia e personalizzando ogni elemento all’interno del codice. Non solo questo sarebbe disordinato e confuso, avrebbe un’elevata curva di apprendimento e limiterebbe l’uso di Divi ai programmatori.

Lo scopo di Divi è portare questo alto livello di sviluppo alle masse in modo che chiunque possa creare un sito web. I moduli sono il risultato di questo obiettivo.

Ci sono 46 moduli Divi integrati in Divi Builder. 37 sono di larghezza regolare (che funzionano nelle sezioni Standard e Specialistiche) e 9 sono a larghezza intera (che sono versioni di moduli regolari e funzionano nelle sezioni a larghezza intera).

In questo articolo daremo uno sguardo a ogni modulo. Ho anche fornito collegamenti per vedere un tutorial dettagliato su ogni modulo dalla documentazione di Elegant Themes. Alcune delle versioni a larghezza intera non hanno tutorial, quindi le ho collegate alle versioni normali.

1. Accedi

Il modulo di accesso ti consente di visualizzare un modulo di accesso di WordPress con un titolo, un’area del contenuto, reindirizzamenti e uno stile di campo per creare un modulo di accesso che corrisponda allo stile del tuo sito Web, rendendolo un’ottima scelta per i siti Web di appartenenza.

2. Accordino

Le fisarmoniche sono un ottimo modo per mostrare molte informazioni in un piccolo spazio e sono spesso utilizzate per mostrare istruzioni, domande frequenti, elenchi, funzioni o qualsiasi informazione che può essere rivelata quando necessario.

3. Audio

accedi

Il modulo audio ti consente di incorporare un file audio completo di un lettore personalizzato che è ottimo per singole tracce di album, album completi (utilizza più moduli per più di una traccia), podcast o qualsiasi tipo di campione audio.

4. Barra Laterale

Il modulo Sidebar ti consente di scegliere qualsiasi area del widget da visualizzare all’interno del tuo contenuto e visualizzarlo con orientamento sinistro o destro e con o senza un separatore di bordo e personalizzarlo come qualsiasi modulo Divi con testo personalizzato, sfondi, bordi, animazioni e altro.

5. Barre-Contatori

I contatori di barre forniscono un modo interessante per visualizzare tutte le statistiche che desideri con un’animazione a caricamento lento per far risaltare quelle statistiche.

6. Blog

Il modulo blog mostra i post del tuo blog, tutti o per categoria, e con un formato a una o più colonne.

7. Blur

I Blur sono ottimi per mostrare piccole informazioni, come competenze, funzionalità o servizi, e possono includere icone o immagini e ha un’area di contenuto proprio come l’editor standard di WordPress.

8. Call-To-Action

Il modulo Call To Action combina un titolo, un corpo del testo e un pulsante ed è ottimo per attirare l’attenzione sulla tua offerta e invogliare i tuoi visitatori a fare clic per ottenere un preventivo, contattarti o acquistare i tuoi prodotti.

9. Cerchio-Contatore

Il contatore circolare mostra una singola statistica con un contatore animato che conta fino a un certo numero o percentuale mentre il visitatore scorre.

10. Codice

Utilizza il modulo Commenti per inserire una funzione di commento del blog ovunque sulla tua pagina, anziché appena sotto il post, e modellala in modo che corrisponda al design del tuo sito web.

11. Contatore Numerico

Il contatore del numero ti consente di visualizzare statistiche, come il numero di clienti che hai o il numero di progetti che hai completato, con titolo e stile di testo separati e un segno di percentuale opzionale.

12. Commenti

Utilizza il modulo Commenti per inserire una funzione di commento del blog ovunque sulla tua pagina, anziché appena sotto il post, e modellala in modo che corrisponda al design del tuo sito web.

13. E-mail Optin

Il modulo Email Optin supporta 20 provider ed è un ottimo modo per creare il tuo modulo di iscrizione alla newsletter.

14. Galleria

Il modulo Galleria mostra una raccolta di immagini con impaginazione in un layout a griglia o come dispositivo di scorrimento.

15. Immagine

Il modulo Immagine mostra un’immagine con caricamento lento, un lightbox, filtri, animazioni, una sovrapposizione con icone e altro ancora.

16. Video Slider

Una slider video è un ottimo modo per organizzare raccolte di video da qualsiasi fonte con frecce, tracce di miniature o controlli di navigazione a punti, sovrapposizione personalizzata, colore di controllo del cursore personalizzato, colore dell’icona, colore della sovrapposizione di miniature e un’immagine e frecce personalizzate per ciascuna video.

17. Mappa

Il modulo Mappa ti consente di incorporare una mappa Google personalizzata che può essere ingrandita utilizzando la rotellina del mouse o trascinabile (per dispositivi mobili) e ha una posizione di partenza personalizzata, segnaposto illimitati, un filtro in scala di grigi e uno stile mappa personalizzato.

18. Menu

Il modulo menu semplifica il posizionamento di un menu di navigazione in qualsiasi punto della pagina, ad esempio sotto l’area principale o sotto l’immagine della pagina iniziale.

19. Modulo di Contatto

Il modulo di contatto semplifica la creazione di moduli con più campi che vengono visualizzati in base alla logica determinata dall’utente.

20. Modulo Separatore

Usa il separatore per creare una linea orizzontale, uno spazio verticale o entrambi contemporaneamente per aggiungere struttura e elementi visivi alle tue pagine.

21. Navigazione Post

Il modulo Navigazione Post aggiunge i link – precedente e successivo – completamente personalizzabili ai tuoi post nella stessa categoria o in qualsiasi categoria e come testo o pulsanti.

22. Negozio

Il modulo Negozio ti consente di aggiungere prodotti WooCommerce a qualsiasi pagina o post e include il tipo di contenuto, il conteggio dei prodotti, un layout di 1-6 colonne, con opzioni di ordinamento, impaginazione, sovrapposizioni di prodotti personalizzati e un badge di vendita personalizzato.

23. Persona

Il modulo Persona combina testo, un’immagine e collegamenti ai social media per creare un profilo personale o una biografia individuale per le pagine Chi sono e Membri del team.

24. Portfolio

Il modulo Portfolio semplifica la visualizzazione di un numero qualsiasi di progetti in un layout a larghezza intera oa griglia e consente di visualizzare qualsiasi categoria con titolo, categoria e testo di impaginazione.

25. Portfolio Filtrabile

Il modulo Portafoglio filtrabile semplifica la visualizzazione del tuo progetto recente in un layout standard o all’interno di una griglia e utilizza il caricamento AJAX quando i progetti vengono filtrati per categoria per visualizzare senza problemi qualsiasi categoria che i tuoi visitatori desiderano vedere.

26. Pulsante

I pulsanti includono testo, collegamenti, icone, sfondi, ecc. E funzionano perfettamente come moduli autonomi o come pulsanti complementari a un altro modulo per creare inviti all’azione.

27. Ricerca

Il modulo di ricerca aggiunge un modulo personalizzabile con segnaposto e sfondi al tuo sito web che consente ai visitatori di cercare i tuoi contenuti dandoti la possibilità di escludere pagine, post e categorie specifici.

28. Scheda

Le schede ti consentono di creare contenuto utilizzando un normale editor di WordPress e visualizzare tale contenuto sulla propria scheda con testo e sfondo personalizzati che vengono visualizzati orizzontalmente in righe larghe e impilati verticalmente in ¼ righe, con ogni scheda con testo, sfondi e contenuti personalizzati .

29. Segui Social Media

Segui Social Media ti consente di creare collegamenti ai tuoi profili social per un massimo di 14 reti con le loro icone social, con o senza un pulsante Segui e con tutte le personalizzazioni che ti aspetteresti da un modulo Divi.

30. Slider Post

Il modulo Post Slider visualizza i post del blog in una o tutte le categorie con un ordine personalizzato, testo del pulsante per saperne di più, estratto o post completo, frecce e controlli personalizzati e come solo testo o con un’immagine in primo piano con overlay personalizzato.

31. Slider

Gli slider possono mostrare tutte le diapositive che desideri con frecce e controlli vari, immagini con sfondi parallasse, sfondi video, pulsanti e contenuto.

32. Tabella Prezzi

Le tabelle dei prezzi ti consentono di mostrare tutti i prezzi che desideri all’interno di schede che mostrano le caratteristiche del prodotto o del servizio con punti elenco personalizzati, elementi centrati o sfalsati, colori di sfondo personalizzati e un’ombra esterna.

33. Testimonial

Il modulo Testimonianza mostra il nome dell’autore, il titolo del lavoro, il nome dell’azienda, l’immagine, i collegamenti, l’icona del preventivo personalizzabile e la testimonianza utilizzando il normale editor di contenuti di WordPress per visualizzare citazioni di clienti, lettori, acquirenti e altro per le tue pagine di vendita e di iscrizione.

34. Testo

Il modulo Testo fornisce un editor di testo WordPress completo di personalizzazioni Divi per lo sfondo, il testo del corpo e dell’intestazione, il bordo, il dimensionamento, l’ombra della casella, i filtri e l’animazione.

35. Timer Conto alla rovescia

Il timer per il conto alla rovescia crea un timer che esegue il conto alla rovescia fino a una data specificata, creando un’ottima visuale per una pagina in arrivo in modalità di manutenzione, rilascio del prodotto o evento.

36. Titolo del Post

Il modulo Titolo del post mostra il titolo del post corrente e include l’opzione per mostrare l’immagine in primo piano sopra, sotto o dietro il titolo completa di meta e personalizzazioni del testo per creare alcuni interessanti design del blog.

37. Toggle

I toggle sono un ottimo modo per visualizzare molte informazioni in un piccolo spazio visualizzando il contenuto creato in un editor WordPress standard, scegliendo aperto o chiuso come stato normale, quindi personalizzando l’icona e alternando testo e sfondo.

38. Video

Il video ti consente di incorporare video da qualsiasi fonte, inclusi quelli caricati o un URL, e mostra l’immagine del video o ti consente di personalizzarlo con un’immagine come sovrapposizione e ti consente di personalizzare il colore dell’icona di riproduzione.

… di sicuro potrebbero uscirne altri…

Ora andiamo sul più tecnico!

Una volta installato il Divi theme nella parte inferiore del menù di WordPress ti comparirà una sezione dedicata al tema in cui potrai modificare le impostazioni, generare i tuoi elementi personalizzati, accedere alla libreria, importare ed esportare i modelli che crei e richiedere supporto permettendo ad un operatore di accedere al sito.

Direi che la parte più importante è la prima: Opzioni tema, in cui vai ad impostare le funzionalità del tema, la prima cosa che ti consiglio di fare è di andare nell’ultima Voce a destra Aggiornamenti e inserire subito il tuo nome utente e l’api key di Divi per accedere agli aggiornamenti e alla libreria di layout.

Ricorda di cliccare sempre sul tasto verde Salva i cambiamenti quando fai una modifica.

Per generare un’api key di Divi vai sul tuo Account Divi – Account Details – Api Key e clicca su Generate new Api Key, puoi inserire un’etichetta con il nome del sito per ricordarti a chi hai assegnato quella chiave.

Una volta fatto, ecco le impostazioni di Divi più comuni:

Generale: qui puoi inserire il tuo logo, impostare la barra laterale, abilitare Google font e impostare tutti i vari profili social incollando l’url delle tue pagine all’interno dei box social.

Navigazione: in navigazione vengono mostrati i contenuti accessibili, tendenzialmente le impostazioni standard vanno bene, se non dovessero essere selezionate attiva tutto nelle voci pagine e categorie, mentre lascia tutto spento in Impostazioni generali. Costruttore: in questa area tieni tutto attivo per permettere a Divi di attivare le funzionalità builder, cioè di costruzione in diretta.Disposizioni: qui puoi scegliere di far visualizzare o meno i commenti ad articoli e pagine, ti consiglio di lasciare i commenti attivi sui post mentre di toglierli sulle pagine. Annunci: sezione per attivare gli annunci inserendo gli url dei banner, personalmente io li inserisco a manualmente o utilizzando il generatore di tema, quindi non uso queste funzionalità.

SEO: io non utilizzo questa sezione perché ho già installato il plugin Yoast SEO, ma se per te è comoda puoi attivare le funzioni e utilizzarla al posto di questo plugin.Integrazione: qui puoi inserire i codici CSS per apportare delle modifiche particolari a degli elementi o ancora per far “comunicare” tool esterni al tuo sito web, come Google Analytics, Google Search Console, tool SEO come Semrush e Seozoom e tutti i programmi che ti permettono un’integrazione utili al tuo progetto online.

Divi Builder: builder visivo

Il divi builder è la modalità di costruzione che ha reso famosi i temi Divi ed Elementor, si tratta di una funzionalità che ti permette di creare la pagina dal vivo, cioè di vedere l’e!etto delle varie modifiche che apporti e di modificarle immediatamente.

Ci sono web designer che amano questa modalità di costruzione, come nel mio caso, e che ritengono abbia semplificato molto il lavoro, mentre ci sono web designer di vecchio stampo che preferiscono costruire le pagine nel backend. La scelta è soggettiva, io trovo sia molto comodo vedere subito le modifiche e!ettuate e il risultato finale e per chi si avvicina a WordPress e non è un esperto credo sia la soluzione ideale.

Per costruire la tua pagina con il builder Divi ti basta andare in Pagine – Nuova pagina e cliccare su Costruisci nel front end oppure se lo hai appena installato Attiva divi builder. Mentre se vuoi modificare una pagina esistente ti basta andare nella pagina del sito e cliccare nella barra in alto Attiva Builder Visivo.

Il builder visivo è costituito essenzialmente da tre parti:

Sezioni

quando ti si apre una nuova pagina il tema ti chiede da dove vuoi partire, se selezioni la prima opzione che ti permette di partire da zero ti compariranno vari pulsanti colorati. Il pulsante blu identifica le sezioni cioè le macro parti della pagina costituite da righe ed elementi, quindi il tutto va visto come una matriosca componibile. Le sezioni possono essere standard, appunto quelle blu, specialità composte da più parti e a larghezza intera ideali quando vuoi inserire un codice a larghezza interna tipo una mappa. È più facile di quel che sembra e prendendo confidenza con le varie funzionalità vedrai che poi sarà un gioco da ragazzi. Il tipo di sezione che si usa per la maggiore è quella stardard.

Righe

Una volta creata la sezione standard apparirà un pulsante con un + verde, colore che identifica la riga. Puoi creare diversi tipi di righe: riga singola, riga a due, riga a tre etc. e righe personalizzate utilizzando le sezioni specialità.

Moduli

Questi sono i reali componenti della tua pagina, tra gli elementi o box più utilizzati ci sono:

titolo, testo, immagine, galleria, video, pulsante, mappe, blur, barre contatori, modulo di contatto e modulo optin e testimonianza.

La parte centrale del tema WordPress Divi sono i moduli, cioè i reali componenti della pagina che contengono i contenuti, vediamo insieme in elenco tutti i moduli e quindi le funzionalità di Divi:

Contattaci ora!

Per ogni domanda, dubbio, informazione, compila la form