Introduzione
Se sei atterrato/a su questo tutorial di imparaqui.it avrai notato che non è prevista la creazione di slider a grandezza intera con il tema Divi.
In questa guida dettagliata scopriamo insieme come ottenere questo risultato: uno slider full screen usando il modulo slider a larghezza piena di Divi!
Per ottenere il risultato desiderato ti facciamo vedere due procedure: nella prima procedura, la più semplice, seguiremo il procedimento ufficiale indicato dal blog di Elegant Themes, nella seconda procedura introdurremo una variante per chi desidera ottimizzare la distribuzione dei codici nel proprio sito e avere delle performance migliori.
Ricorda che se devi rinnovare la licenza di Divi o se vuoi effettuare l'upgrade alla licenza lifetime, puoi risparmiare usando gli sconti ufficiali di Elegant Themes offerti da imparaqui.it.
Creare uno slider a schermo intero con Divi
Segui i passaggi con attenzione e se hai bisogno scrivi nei commenti.
Per prima cosa andiamo a creare una nuova pagina e attiviamo il builder visivo presente su Divi. Fatto questo, aggiungiamo una sezione a larghezza piena, e inseriamo il modulo slider esattamente come mostrato qui sotto.
Andiamo su Avanzate > ID e Classi CSS e nella casella Categoria CSS inseriamo la seguente classe: et_fullscreen_slider
Fatto questo, ci spostiamo su “contenuti” e aggiungiamo una diapositiva.
Rechiamoci ora nelle impostazioni, nel menu Titolo e andiamo a compilare i vari campi che lo compongono.
Consigliamo di utilizzare immagini di alta qualità con una dimensione di 1920 pixel di larghezza per 1080 di altezza
Ricordati di comprimere le immagini che utilizzerai, e, se riesci, fai in modo che pesino meno di 200KB.
Qui sotto trovi delle ottime risorse per scaricare immagini gratis di alta qualità e per modificarle, ridimensionarle e alleggerirle con un editor gratuito.
La prima risorsa che ti regaliamo è il nostro post dove sveliamo i migliori siti dove scaricare immagini gratis.
La seconda risorsa è molto importante: si tratta di un editor online gratuito per modificare, ridimensionare e alleggerire tutte le immagini da caricare sul tuo sito, il nome di questa risorsa è BeFunky e la puoi trovare qui: https://www.befunky.com/it/.
Bene adesso andremo a inserire i codici css e javascript che ci permetterano, di ottenere il nostro slider a tutto schermo.
Possiamo utilizzare due procedure: la prima è più semplice ma se avete un grosso sito con molti contenuti e molti plugin potrebbe rallentare il caricamento delle pagine. La seconda procedura è meno immediata ma è consigliata se volete mantenere una velocità di caricamento maggiore su tutto il sito.
Aggiungere il codice CSS e Javascript in tutto il sito
Questa prima procedura consiste nell'inserire tutti i codici necessari direttamente nelle impostazioni generali nel pannello delle opzioni del nostro tema Divi.
Rechiamoci nella nostra bacheca di WordPress e clicchiamo sulla voce Divi > Opzioni tema > General.
Qui, nella casella CSS personalizzato, andremo a inserire il seguente codice css:
Salviamo, e così attiveremo il nostro slider full screen con Divi!
Ecco qui sotto due screenshot di come inserire i codici:
Aggiungere CSS e Javascript nelle singole pagine
Questa seconda procedura consiste nell'inserire il codice CSS e il javascript direttamente nella pagina in cui si desidera attivare lo slider a schermo pieno.
Per eseguire questo procedimento cosigliam l'utilizzo di un semplice plugin gratuito “Per Page Add To” (https://wordpress.org/plugins/per-page-add-to/) che aggiunge su tutte le pagine una tendina con la possibilità di inserire un codice personalizzato nell'head. In questa tendina aggiungiamo il codice javascript.
Andiamo poi a inserire il codice CSS direttamente dalle impostazioni generali della pagina, nella scheda avanzate alla voce Css personalizzato.
Con questo secondo metodo possiamo attivare lo slider in una sola pagina web senza appesantire tutte le altre inutilmente.
Ovviamente se vorrete applicare l'effetto anche ad altre pagine dovrete copiare nuovamente entrambi i codici!
Conclusione
In questo tutorial di imparaqui.it abbiamo visto come impostare uno slider a tutto schermo con il tema Divi di Elegant Themes.
Porta la creazione dei tuoi siti con Divi ad un livello professionale » scopri i nostri temi child e i corsi online dedicati a Divi nello store di imparaqui.it.
Se hai qualsiasi domanda non esitare a scrivere nei commenti e ricorda di iscriverti al gruppo Facebook Divi Italian Community per condividere la tua esperienza, richiedere consigli e conoscere altre persone che usano il tema Divi quotidianamente come te!
Ho provato più e più volte entrambi i metodi ma non riesco a farlo andare, da cosa potrebbe derivare il problema?
Ciao Matteo, hai provato a svuotare la cache del browser? Se lo hai già fatto prova a disattivare temporaneamente gli altri plugin e vedere se funziona 😉
Ho provato più e più volte il primo metodo, ma non sono mai riuscita ad ottenere un full screen slider…proveró anche con il plugin…
Buongiorno e complimenti per l’articolo.
Anche se scritto davvero bene e anche se ho seguito passo dopo passo le istruzioni, le immagini continuano ad essere strette come se non sentisse i comandi. Dove potrei aver sbagliato?
Ciao Adel, hai provato a ri-seguire i passaggi e a svuotare la cache? Facci sapere!