Divi di Elegant themes: Guida COMPLETA al tema WordPress numero 1

Divi di elegant themes è uno dei template per siti web e nello specifico dei temi WordPress più scelti e apprezzati sul mercato, grazie alle molte funzionalità presenti.

Finora lo hanno già scelto 701.600 persone nel mondo per realizzare i loro siti web, me inclusa. Tutto ciò che vedi all’interno di questo blog è stato creato partendo dall’hosting Siteground con il tema Divi, dalla formattazione del testo alle grafiche personalizzate, fino ai pulsanti di condivisione sociale.

In questo articolo Super esaustivo scoprirai che cos’è Divi, perché sceglierlo, tutte le potenzialità che ha da offrire per creare un sito web e portarlo al successo più una guida completa a come installare il tema WordPress divi, come settare le prime impostazioni e quali sono i moduli Divi che si utilizzano con più frequenza.

Poi, vedremo alcuni plugin offerti sempre da Elegant themes inclusi nel pacchetto Divi da integrare con il tuo sito, come Monarch e Bloom.

Divi che cos’è

Divi theme è il tema WordPress più performante per creare siti web e blog, scelto già da centinaia di migliaia di web designer e persone che si approcciano a WordPress, grazie alla sua semplicità di utilizzo e alla sua funzionalità più amata: il divi builder.

In realtà, Divi, nel tempo è diventato più di un semplice tema WordPress, ma un vero e proprio ecosistema e modalità di costruzione di siti web, supportato da una Community molto vasta e competente nonché da sviluppatori di tutto il mondo pronti a dare feedback sul programma.

Come la maggior parte dei colossi americani anche Divi è partito dal piccolo, il progetto nasce dall’idea di uno sviluppatore giovane e ambizioso, Nick Roach, che sogna di creare un tema semplice che tutte le persone possano usare senza avere particolari competenze e con i divi layout pronti all’uso – c’è sia la possibilità di partire da un layout da zero sia di basarti sulle pagine già impostate di un ricco database che mettono a disposizione dei clienti.

Elegant theme è l’azienda americana fondata da Nick Roach che ha sviluppato Divi ed Extra, due temi WordPress lanciati sul mercato ormai da più di dieci anni. Nel tempo Divi è stato un grandissimo successo tanto da diventare il tema professionale più utilizzato al mondo dai professionisti.

Ora vediamo perché sceglierlo e quindi quali sono le sue principali potenzialità.

Clicca qui per dare uno sguardo al sito di Divi

Divi perché sceglierlo

I motivi per cui scegliere questo tema, e in questo caso parlando di me i motivi per cui io ho scelto di utilizzare Divi per il mio blog e per la maggior parte dei miei progetti te li dico di seguito riassunti in alcuni punti:

• Web Design: da codice ma senza codice, questo che significa? Vuol dire che grazie alle opportunità grafiche messe a disposizione dagli sviluppatori di Divi puoi realizzare un sito che abbia le stesse identiche caratteristiche di un sito fatto da un programmatore completamente in codice html, css e javascript. Per esempio alcuni elementi che prima erano solo a disposizione di chi conosceva il codice oggi sono accessibili a tutti come la possibilità di inserire trasparenze, immagini di sfondo nelle proprie pagine, gradienti quindi tonalità e sfumature diverse. Di fatto, nel web design i due elementi che conquistano l’occhio sono: immagini e colori, con il template Divi questo mix può raggiungere livelli altissimi.

P.S.: più avanti ti elenco alcuni tra i siti web più belli al mondo realizzati con Divi

• Divi Builder visivo: cioè è quella possibilità di creazione delle pagine “dal vivo” cioè vedendo tu stesso il risultato di ciò che stai costruendo, per esempio cambiando i colori per vedere come funzionerebbero altre scelte o ancora scegliendo tra i +900  font per siti web a disposizione. Divi wp theme mette a disposizione una marea di moduli che puoi utilizzare per creare le tue pagine.

• Assistenza costante in live chat: ebbene sì, per rispondere alle domande degli utenti e aiutarli nella costruzione, Divi mette a disposizione sia un blog super esaustivo con Guide scritte e video dopo puoi guardare tutti i passaggi per costruire i vari elementi delle tue pagine, sia una live chat dove puoi chattare con un assistente e chiedergli ciò di cui hai bisogno. Le live chat sono una benedizione, non puoi capire quanto io le utilizzi! Tra l’altro se non hai dimestichezza con l’inglese puoi usare sempre Google traduttore.
• Layout pronti all’uso: quando l’ho scoperto non ci potevo credere, cioè oltre a tutte le funzionalità presenti è presente una libreria di layout da poter scegliere per i propri progetti, ce ne sono veramente di ogni tipo e per tutte le professioni, quindi puoi scegliere di partire da zero come faccio io oppure se devi acquisire dimestichezza partire anche da layout già pronti solo da modificare.
• Interazioni social e optin: con l’acquisto del pacchetto Divi mette a disposizione anche diversi plugin, quelli più rilevanti sono Monarch e Bloom, il primo ti permette di inserire i pulsanti social per invitare le persone a condividere i tuoi contenuti, mentre il secondo ti permette di creare dei popup da collegare al tuo autorisponditore per fare email marketing. Non è fantastico?

Clicca QUI per guardare il sito di Divi

Divi vs Elementor

Fino a qualche tempo fa il tema WordPress Divi ed il tema Elementor avevano parecchie caratteristiche comuni e quindi rappresentavano entrambi un’ottima scelta (e lo sono ancora), ma a mio avviso quello che davvero ha reso Divi unico nell’ultimo anno dandogli il podio è l’inserimento del generatore di tema una funzione che ti permette di modificare davvero QUALSIASI cosa tu voglia modificare nel tuo sito web.

Per farti capire che cosa intendo, prima se io avessi voluto inserire un pulsante all’interno del mio menù in alto a destra avrei dovuto compiere tutta una serie di passaggi inserendo dei codici con html e css, stessa cosa per quanto riguarda il footer (la parte bassa del sito dove trovi tutte le varie info sulle pagine più importanti e i contatti).

Da quando Divi ha introdotto questa novità ha reso la vita più semplice a tutti i web designer come me che realizzano diversi siti e amano la flessibilità.

Questo metodo ti permette anche di creare menù diversi per le varie aree del sito, quindi io potrei creare un menù per le pagine dei servizi e un menù diverso con le categorie nella mia sezione blog.

Questa cosa è pazzescamente rivoluzionaria e utile!

P.S.: in questo modo puoi creare, moduli optin e contatti pulsanti dove vuoi, personalizzazioni grafiche pazzesche del tipo fare menù colorati, con gradienti o addirittura con sfondi.

Esempi siti creati con Divi

Dai un’occhiata e torna a leggere la Guida:

Divi website 1: Kissmetrics

Sito Kissmetrics

Divi website 2: Adam Leap Wines

Sito Adam Leap Wines

Divi website 3: 100 Exhibit

Sito 100 Exhibit

Divi website 4: Mary and the dot

Sito di Mary and the dot

Un sito che mi piace moltissimo, essenzialmente parliamo di una web designer che promuove i suoi servizi in un modo davvero originale. I pro sono sicuramente i colori utilizzati, le immagini e l’utilizzo sapiente delle animazioni che interagiscono con le azioni dell’utente. Mi piace molto e si adatta bene al contesto, ovvio che per un blog potrebbe diventare alla vista “pesante” tutto quel colore, ma per promuovere un servizio in modo originale e colpire lo spettatore ha assolutamente senso.

Divi website 5: Nikki Hill Apothecary

Sito di Nikki Hill Apothecary

È un sito diverso dagli altri mostrati finora, più minimalista e semplice, tutto è leggero e coerente, dai colori tenui come l’arancione chiaro, il verde sfumato e il rosa, fino alle immagini naturali utilizzando l’effetto parallasse.

Divi come funziona

Divi è composto da due pacchetti, uno a cadenza annuale di 89$ e un altro da 249$ con gli aggiornamenti illimitati e disponibili per tutta la vita, significa poter creare siti web in modo illimitato accedendo per sempre ai servizi che l’azienda offre.

All’interno di entrambe le soluzioni sono incluse:

• l’installazione di Divi su siti web illimitati (ovviamente per il primo pacchetto paghi sempre la quota annuale);
• l’accesso ai plugin della suite come Monarch e Bloom;
• l’assistenza in live chat;
• l’accesso alla newsletter con news su layout nuovi creati dai web designer che vanno ad ampliare il database già ricchissimo e alcuni importanti consigli su come fare personalizzazioni ai propri siti web.

P.S.: “magari per chi non è addetto ai lavori questi pacchetti possono apparire “cari”, ti posso assicurare che per la marea di funzionalità che questo tema mette a disposizione sono prezzi assolutamente convenienti. Nel prossimo capitolo ti faccio vedere uno ad uno ogni modulo al suo interno”.

Dai un’occhiata al sito di Divi

Installare Divi su WordPress è semplicissimo, una volta acquistato il pacchetto vai nella sezione Account – Download e troverai tutti i vari prodotti inclusi, in lato vedrai Divi, ti basta cliccare su Download per scaricalo.

Una volta fatto vai sulla Dashboard di WordPress – Aspetto – Tema – Aggiungi nuovo e carichi il file.

La procedura è automatica, in pratica si installa in autonomia e al completamente ti basta cliccare su Attiva, dopo pochi minuti Divi theme è installato sul tuo sito web.

Ora vediamo insieme le prime impostazioni e le funzionalità più importanti con una Guida Divi WordPress specifica sui singoli elementi.

Guida COMPLETA su Divi WordPress Theme

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.

• 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’effetto delle varie modifiche che apporti e di modificarle immediatamente.

Guarda la demo sul sito di Divi

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 effettuate 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.

Di seguito i moduli WordPress di Divi.

Divi: elenco dei moduli del divi builder

Sommario, clicca per andare all’elemento.

Accedi

Accordino

Audio

Barra laterale o sidebar

Barre contatori

Contatori di barre, contatore circolare, conto alla rovescia, contatore numerico

I contatori di Divi sono differenti in base alle tue esigenze, ci sono contatori di barre utilizzati soprattutto per evidenziare le proprie competenze, contatori circolari per inserire in modo originale le percentuali, contatori alla rovescia e contatori numerici utili per creare le tue landing page e pagine di vendita. Questi elementi sono molto utili soprattutto per chi si occupa di funnel marketing.

Blog

Se vuoi creare un blog oppure ne hai già uno questo è un elemento molto comune a tutti i temi WordPress, ti permette di inserire la lista dei tuoi post ovunque tu voglia all’interno delle tue pagine.

All’interno di questo modulo potrai scegliere:

• Il numero di post da far visualizzare, selezionare i post contenuti solo in una specifica categoria, in più categorie o in tutte
• Gli elementi da far visualizzare, il titolo, l’immagine, il pulsante leggi di più, i metadati cioè le informazioni relative a data, autore e categoria
• Il tipo di design, se farli apparire a larghezza interna a o griglia (l’elenco che utilizzo io)

Blur

Call to action

Codice

Commenti

Email optin

L’email optin di Divi è il modulo che ti consente di collegare il tuo autorisponditore di email marketing o della tua newsletter al tuo sito web. Per esempio io utilizzo Active Campaign e grazie ad una api key posso collegarlo a tutti i moduli optin del mio sito web.

Galleria

Immagine

Mappa

Se hai un’attività locale può esserti utile inserire una mappa all’interno delle tue pagine, sicuramente nella sezione contatti e potresti valutare anche nella homepage, inoltre se la tua strategia SEO è legata ad aree geografiche specifiche inserire una mappa è vantaggioso anche per i motori di ricerca in modo da fargli capire che la tua attività è posizionata proprio nel luogo in cui gli utenti cercano quel prodotto o servizio. Con questo modulo Divi ti consente di inserire una mappa, ma ci sono anche altre modalità ancora più semplici come andare su Google maps, inserire un indirizzo, cliccare su condividi e copiare il codice html all’interno della tua pagina impostando la grandezza che desideri.

Menù

Modulo di contatto

Questa è una funzionalità che hanno diversi temi WordPress, ma non proprio tutti, tanto che molti utenti poi installano altri plugin per creare moduli di contatto come Contact Form 7 (che è comunque valido). La mia riflessione è se hai la possibilità di avere un tema che ti permette di avere al suo interno già tutte le funzionalità a quel punto ti risparmi di dover installare troppi plugin WordPress e soprattutto eviti di occupare lo spazio al tuo web hosting WordPress.

Modulo separatore

Elementi a larghezza intera (sezione larghezza intera)

Codice, intestazione, immagine, mappa, menù, porfolio, slider, titolo, cursore

Negozio

Persona

Portfolio e portfolio filtrabile

Pulsante

Post navigation e post slider

Ricerca

Scheda

Segui social media

Slider post

Tabelle dei prezzi

Testimonial

Insieme ai moduli optin, ai contatori numerici e alla rovescia e alle tabelle dei prezzi, il box delle testimonianze va a chiudere questo gruppo di moduli dedicati alle attività di web marketing. Con le testimonianze potrai inserire il nome, la professione, la foto e il commento di una persona soddisfatta dei tuoi servizi/prodotti in modo da creare un maggiore coinvolgimento da parte di chi legge e convincerlo a compiere un’azione.

Un altro motivo per scegliere Divi.

Testo

Toggle

Gli accordini sono ideali per le F.A.Q. domande frequenti, mentre a mio parere questi per chi ha dubbi e domande su un determinato prodotto/servizio e vuole fare dei confronti.

Video e video slider

Titolo del post

Divi plugin: Monarch e Bloom

Giusto per non farsi mancare nulla gli sviluppatori di questo tema hanno realizzato anche dei plugin molto utili e che si integrano perfettamente con il tema. I due divi plugin sono Monarch e Bloom, entrambi plugin sociali che hanno l’obiettivo di creare interazione con gli utenti che visitano le pagine del tuo sito.

Monarch ti permette di aggiungere pulsanti social alle tue pagine e ai tuoi articoli (in base alle impostazioni che scegli) ed è molto comodo perché a differenza di altri plugin che troverai lo stile è personalizzato.

P.S.: in questo articolo a sinistra vedi i pulsanti

Bloom è un plugin per creare dei popup all’interno delle tue pagine invitando le persone a lasciare la propria email. Nelle impostazioni puoi collegare il tuo programma di email marketing, ce ne sono moltissimi, tra cui: Mailchimp, ActiveCampaign, GetResponse.

Divi new e il Generatore di Tema

Con l’aggiornamento a Divi new degli ultimi anni sono comparse delle funzionalità che hanno fatto una grande differenza per chi crea siti web in WordPress.

Il Divi Builder ha ampliato la sua capacità costruttiva e ora gli stili di un singolo elemento si possono estendere a quelli di tutta la pagina, questo fa risparmiare molto tempo nello sviluppo delle pagine.

Ma, l’aspetto più importante a mio avviso è relativo al Generatore di Temi, che in italiano è tradotto malissimo, in inglese è Divi theme builder. Sto parlando di una vera e propria sezione nelle impostazioni di Divi che ti permette di creare degli elementi da applicare ovunque tu voglia.

Esempio:

Mettiamo caso tu voglia creare un menù da applicare solo alle pagine e un altro da applicare solo negli articoli. Con questa funzionalità è possibile farlo.

Quindi, puoi creare sidebar personalizzate da far vedere solo in alcuni articoli, creare dei format solo per determinate categorie del tuo blog, sviluppare un footer solo per alcune pagine etc. In pratica le modifiche possibili non hanno più limite.

Ricapitolando i vantaggi del Tema WordPress Divi…

Se hai letto tutta la Guida e non conoscevi il mondo di Divi potresti avere un tantino di confusione, ma quando utilizzi questi strumenti ogni singolo giorno diventano veramente semplici, anche perché poi gli elementi che si utilizzano con frequenza sono 5 o 6 quindi tranquillo se la cosa ti sembra complessa.

Ricapitolando i vantaggi dell’avere il tema WordPress Divi direi che sostanzialmente possono essere riassunti così:

• Design professionale da urlo, divi builder per creare con velocità e sito responsive per tutti i dispositivi
• Enormi personalizzazioni e funzionalità di moduli e plugin associabili
• Aggiornamenti costanti del software e supporto a vita della Community

Ecco il link per accedere a Divi:

Guarda il tema WordPress numero 1 Divi

Direi che questi sono i punti fondamentali che mi hanno convinta a scegliere Divi theme come tema per il mio blog e per la maggior parte dei siti web che creo. Se hai domande sull’argomento o dubbi scrivimi pure nei commenti, mi fa piacere risponderti e sciogliere ogni quesito.

Nadia

Leggi anche le Guide per partire da zero:

• Registrazione domini
• Come comprare un dominio