Primi passi con Divi

Il tema wordpress by Elegant Themes

In questo articolo impareremo come muovere i primi passi con Divi e il suo visual builder.
Innanzitutto è opportuno partire dall’inizio. Come sapete, WordPress è uno dei più famosi CRM per la costruzione di siti web, soprattutto blog e siti personali; anche il sito che stai vedendo in questo momento è realizzato con WordPress ed il tema Divi,

L’editor standard di WordPress è molto basico e può risultare poco personalizzabile con un risultato finale a volte deludente.

Il mio consiglio è di fare un piccolo investimento iniziale e acquistare il tema Divi. Oltre che a offrire un buon numero di layout diversi da anche la possibilità di sfruttare il suo visual builder, molto più intuitivo e personalizzabile.

Mi piace! ma come si ottiene?

 

La procedura per acquistare e installare Divi è molto semplice, ti basta andare sul sito ufficiale di Elegant Themes, creare un proprio account e cliccare sul pulsante “PRICING” in alto a destra. Dopo di che ci sarà la possibilità di scegliere se fare un abbonamento annuale al costo di 89 dollari oppure comprarlo per sempre a 249 dollari.

Se vuoi provarlo va benissimo il piano annuale, altrimenti il mio consiglio è quello di acquistarlo per sempre visto che, a differenza della maggior parte dei concorrenti, Divi può essere riutilizzato infinite volte per infiniti siti diversi. Insomma, una volta acquistato sarà tuo per sempre e potrai riutilizzarlo ogni volta che  vorrai.
Una volta acquistato partirà il download di Divi, sarà un file compresso di circa 50mb. A questo punto andiamo sul sito in cui vogliamo implementare Divi, facciamo il login a WordPress, andiamo su “Aspetto” dalla barra laterale, poi clicchiamo su “Temi” e infine su Aggiungi nuovo in alto a destra.

A questo punto avremo davanti una schermata con tanti temi differenti, che però a noi non interessano visto che possediamo già il tema , dobbiamo solo installarlo. Quindi, sempre in alto a destra troveremo il pulsante “Carica tema”.

Dopo averlo cliccato si aprirà una tendina che ci darà la possibilità di trascinare un file o di sceglierlo dal nostro PC; prendiamo la nostra cartella compressa contenente il tema Divi e trasciniamola nella tendina aperta. A questo punto WordPress farà il resto.

Ricordati che è necessario possedere un dominio,un server e uno spazio web per installare wordpress.  Altrimenti l’acquisto di Divi sarà inutile perchè non potrai usarlo.

Come iniziare ad usare Divi

 

Giunti a questo punto della guida “Primi passi con Divi”, una volta installato il tema, sulla barra laterale in basso apparirà la voce “Divi”. Cliccandola abbiamo la possibilità di settare tutti i parametri che ci interessano sul tema. Possiamo caricare un logo, scegliere i colori del nostro tema, cambiare le impostazioni del menù e molto altro. Mi fermo qui perchè è tutto abbastanza intuitivo e per spiegare ogni singola voce non basterebbe un articolo intero.

come-usare-impostazioni-generali-divi-img

L’unico consiglio che ti do per muovere i primi passi con Divi è quello di andare su “Costruttore”, “Avanzate” e assicurarti di avere tutte le voci attive tranne “Stili Output In Linea” (non perchè è sbagliato tenerlo attivo ma a noi non interessa per il momento). Facendo questo avremmo la possibilità di visualizzare il back end a blocchi di Divi che è sempre molto utile. Più avanti vedremo il perchè.

Costruire la prima pagina

 

Settati i parametri iniziamo a costruire la prima pagina.
Andiamo quindi su “Pagine” e clicchiamo su “Aggiungi pagina”. Si aprirà la schermata classica di WordPress con un bottone viola che ci chiede se vogliamo usare il Builder Divi. Cliccandolo come prima cosa ci apparirà una schermata con tre opzioni:

BUILD FROM SCRATCH

 

Ci permette di costruire una pagina partendo da un “foglio” vuoto.

screenshot-icona-build-from-scratch-img
screenshot-scegli-layout-img

SCEGLI LAYOUT

 

Possiamo scegliere di iniziare a costruire la pagina partendo da un layout tra quelli disponibili con Divi. Per poter usare un layout, Divi ci chiederà di autenticarci inserendo la nostra APIkey.

screenshot-scegli-layout-img

CLONA PAGINA ESISTENTE

 

In questo caso partiremo da una pagina fatta in precedenza che potremmo modificare a nostro piacimento. In questo caso non la useremo essendo la nostra prima pagina del sito.

screenshot-clona-pagina-esistente-img

Costruire da una pagina vuota

 

Cliccando su “BUILD FROM SCRATCH” verremo reindirizzati nel back end di Divi e avremmo davanti l’editor a blocchi. La prima cosa che si nota sono i diversi colori che servono per differenziare più velocemente sezioni, righe e blocchi.
Partiamo dalla sezione che è il contenitore più esterno che abbiamo. In Divi ci sono tre diverse tipologie di sezioni:

come-usare-sezione-stamdard-divi-img

Standard

Come si può intuire dal nome è una normale sezione senza nulla di speciale ma è quella più utilizzata.

come-usare-sezione-specialità-divi-img

Specialità

(le traduzioni in italiano a volte lasciano un po’ a desiderare…)
Queste speciali hanno diverse possibilità riguardo la disposizione delle righe al suo interno. Utili per fare un layout più elaborato.

come-usare-sezione-larghezza-piena-divi-img

Larghezza Piena

Le sezioni a larghezza piena servono apponto per creare un layout a tutto schermo. Anche queste sezioni non sono molto usate ma sono utili ad esempio per aggiungere una mappa a schermo intero a fondo pagina oppure una CTA.

Dentro la sezione troviamo le righe che si trovano nel mezzo tra sezione e contenuto. Quando andiamo ad inserirne una, possiamo scegliere il suo layout che, come si vede dall’immagine sotto, può essere singolo, doppio, 30%-70% e così via.

come-usare-riga-divi-img

All’interno abbiamo il modulo. In parole povere sono i diversi tipi di contenuto che possiamo inserire e in questo Divi è uno dei più completi. Possiamo inserire un semplice testo, un’immagine, un modulo di contatto, un cerchio contatore, uno spider, un’accordino. Insomma abbiamo tante possibilità diverse per arricchire il nostro layout.

Come usare Divi: Front-end

 

Subito sopra al nostro editor a blocchi abbiamo due pulsanti, uno ci fa tornare all’editor standard, l’altro ci fa costruire sul front end con Divi. Cliccando il pulsante azzurro ci si aprirà la nostra pagina (ovviamente vuota).

costruisci-sul-front-end-img

Da qui possiamo iniziare a costruire aggiungendo righe e sezioni con l’icona +, quella blu è per le sezioni, quella verde è per la riga e quella grigia è per il modulo.
Per settare le impostazioni di ogni singolo blocco andiamo sulla rotellina del blocco che ci interessa e navighiamo tra le vare opzioni.

Esempio:

Proviamo ora a creare una riga che contiene due sezioni all’interno, clicchiamo sull’icona grigia col simbolo + e scegliamo un modulo testo a sinistra e un modulo immagine a destra.

sezione-testo-e-immagine-img

Questo è quello che ci appare. Per ora è molto basico e standard ma vediamo subito come personalizzarlo:
Cliccando sulla rotellina del modulo testo si aprono le ipostazioni (il design delle impostazioni dei blocchi Divi è sempre diviso in contenuti, design e avanzate).

Nella parte dei contenuti possiamo modificare il testo, possiamo inserire un collegamento alla sezione e possiamo cambiare lo sfondo.
Spostandoci su design possiamo modificare tantissimi parametri come il font, la grandezza del testo e del titolo.

Ecco, qui c’è da fare una precisazione, sempre per il motivo delle traduzioni italiane non sempre perfette per modificare il titolo bisogna andare sulla voce “testo del sottotitolo”. Possiamo poi modificare le spaziature, il bordo e molto altro semplicemente facendo scendere la tendina che ci interessa.
La terza voce in alto per adesso ci interessa poco a meno che non hai già delle buone basi riguardanti HTML e CSS. Una cosa che però può tornarci utile è la parte “visibilita” in cui possiamo decidere se nascondere un contenuto in un specifico dispositivo.

La stessa cosa vale per il modulo immagine, il principio è lo stesso, l’unica cosa che cambia è che non abbiamo più la possibilità di modificare o inserire un testo ma possiamo selezionare un’immagine con la rotellina all’interno del riquadro grigio.

screenshot-impostazioni-immagine-divi-img

 

Modificando pochi parametri tra i tanti messi a disposizione, sia per quanto riguarda i moduli che le sezioni, è possibile tirare fuori dei lavori carini in pochissimo tempo e senza troppo sforzo con un po’ di esperienza e pratica.

Ecco come sono diventati i nostri due moduli con qualche modifica fatta in poco più di un minuto:

esempio-sezione-img

Conclusioni

 

Siamo giunti al termine di questa guida per muovere i primi passi con Divi. L’argomento ovviamente non si può esaurire con un solo articolo, pertanto ci saranno altre pubblicazioni.

Il nostro blog è stato creato e pensato per coloro che non hanno molta esperienza nel web marketing e vogliono iniziare a mettere le mani in pasta in queso meraviglioso mondo. Ricordatevi sempre però che non sempre le cose sono facili come possono sembrare, pertanto è sempre bene rivolgersi ad un professionista.

Sfruttando un builder più completo ed evoluto di quello classico abbiamo la possibilità di creare pagine molto più complesse e, con molta probabilità, anche in meno tempo.
Ovviamente questa è una guida per i principianti ed è molto base. Se ti interessa avere qualche nozione in più non perderti la seconda parte più avanzata dell’articolo “Primi passi con Divi, il tema WordPress by Elegant Themes”. Se ti interessano altri argomenti del Web marketing ti consiglio di dare un’occhiata anche al nostro blog.