Il post slider di Divi

In questo tutorial andiamo a vedere come personalizzare il post slider di Divi e lo trasformeremo esattamente come vedete nell'immagine. Questo tutorial prende spunto dal tutorial apparso sul blog ufficiale di Elegant Themes e che puoi consultare qui.

Unisciti alla Community

Ricevi gli aggiornamenti sulle risorse per Divi, WordPress, temi child, layout corsi online e tutto quello che ti può servire per potenziare la tua comunicazione nel web. Unisciti ora alla community!

Creare un post slider personalizzato con Divi

Ciao a tutti amici di imparaqui.it, sono Raffaele e in questo tutorial, vediamo insieme come creare un post slider personalizzato con Divi. Questo è lo slider tradizionale che troviamo in Divi:
e questo sarà il nostro slider personalizzato che andremo a creare:
Per prima cosa, per la realizzazione dello slider personalizzato, abbiamo bisogno di 3 immagini 800px per 600px, che utilizzeremo come immagine in evidenza nei post che andranno a comporre lo slider. Se vuoi trovare delle immagini di alta qualità e libere da copyright ti consigliamo di dare un'occhiata al nostro articolo 5 siti per scaricare immagini gratis e libere da copyright per uso professionale. Una volta create le immagini, andiamo a creare 3 articoli.

Creare i 3 articoli da visualizzare nello slider dei post

1) Dalla barra di amministrazione di WordPress, clicca su “Nuovo” e subito sotto “Articolo” per creare un nuovo articolo.

2) Inserisci il titolo del tuo nuovo articolo, inserisci il testo dell'articolo nel campo di testo (se vuoi puoi anche attivare il Builder Divi), e inserisci un riassunto nel campo “Riassunto” come vedi nell'immagine qui sotto.
3) Ricordati di attivare la voce “Utilizza riassunti quando definiti” dalle impostazioni generali di Divi, per far si che i riassunti siano visibili nello slider post.
Attiva riassunti quando definiti screenshot tema Divi imparaqui.it tutorial Divi italiano
4) Adesso, andiamo a inserire l'immagine in evidenza per l'articolo (Grandezza immagine 800px per 600px), per il tuo articolo come per gli altri articoli puoi selezionare anche categoria di appartenenza e tag. Ricordati che senza l'immagine in evidenza lo slider post non verrà visualizzato correttamente.
Inserire un'immagine in evidenza negli articoli di WordPress tema Divi
A questo punto, abbiamo terminato di creare il nostro post, che possiamo pubblicare. Per creare gli altri 2 articoli da inserire nello slider post, ripeti i passaggi che abbiamo già effettuato precedentemente dal punto 1 al punto 4.

Come creare lo slider post personalizzato con Divi

Per creare lo slider post personalizzato, utilizzerò una pagina già pronta che vado a caricare dalla libreria di Divi.

Slider post tema Divi caricare layout predefinito Elegant Themes
Una volta caricata la pagina, pubblico la pagina e successivamente apro il Builder visivo di Divi. Per creare lo slider post personalizzato, elimina il primo modulo di testo, e  sostituiscilo con un modulo “Slider post”.
Slider post tema Divi caricare layout predefinito Elegant Themes
Apri le impostazioni del modulo slider post e andiamo a modificare alcuni parametri:
Personalizzare il modulo post slider tema Divi
Sotto la voce “Contenuti“, seleziona il numero di articoli da visualizzare (nel nostro caso 3), puoi inserire anche le categorie dell'articolo nel caso le avessi impostate. Alla voce “Elementi“, disabilita la voce “Mostra meta data nel post“.
Personalizzare gli elementi del modulo post slider tema Divi
Adesso passiamo al “Design” e andiamo a modificare il colore della navigazione dello slider post:
Slider Post Divi impostazioni design
per le frecce di navigazione inserisci il colore bianco: #ffffff
per la navigazione a punti inserisci il colore nero: #000000 Sempre alla voce “Design” andiamo a modificare la grandezza del titolo del post e alla voce “Header testo” alla voce “Header dimensione del font” inserisci 25px Passiamo adesso a dare uno stile al bottone dello slider, e alla voce “Pulsante” “Utilizzare gli stili personalizzati per il pulsante” impostiamo l'etichetta sul “SI” Andiamo a inserire i seguenti parametri:

  • Pulsante dimensione del testo 13px
  • Pulsante colore del testo nero: #000000
  • Pulsante larghezza del bordo 1px
  • Pulsante border radius 0px

Adesso scendiamo alla voce “Spaziatura” e inseriamo gli spazi in px:

  • “Padding a piacere” – in cima 50px e in fondo 40 px
  • “Margine a piacere” – in cima 0px e in fondo 0px

andiamo a salvare tutte le modifiche e passiamo alla sezione Avanzate del modulo del post slider. Nella sezione “Avanzate”, del modulo post slider di Divi andiamo nel tab “ID & Classi CSS” e inseriamo il seguente id: dm-slider

Slider Post Divi impostazioni avanzate
Passiamo al tab “CSS personalizzato” scendiamo a “Elemento principale” e inseriamo il seguente codice CSS:
Scorriamo ancora fino a “Titolo diapositiva” e inseriamo il seguente codice CSS:
Adesso salva tutto e andiamo a inserire il codice CSS che darà lo stile al modulo post slider. Puoi inserire il codice sia dalle impostazioni della pagina, al tab “Avanzate” e poi “CSS personalizzato”
Impostazioni CSS elemento principale tema Divi
in questo caso, le modifiche avranno effetto solo sulla pagina dove verrà inserito il codice e si trova il modulo slider post. Altrimenti, puoi inserire il codice CSS nelle impostazioni di Divi alla voce “Generali” e poi a fine pagina nel tab “CSS personalizzato” in questo caso le modifiche CSS, avranno effetto su tutte le pagine del sito che contengono uno slider post.
Impostazioni box CSS personalizzato opzioni tema Divi
Quindi copia e incolla il codice CSS che trovi qui sotto e andiamo a vedere il risultato finale.
Ecco qui il nostro slider personalizzato creato con Divi, se hai eseguito anche tu tutti i passaggi correttamente il tuo slider sarà come quello che vedi nel Video tutorial e nell'immagine qui sotto.
Impostazioni CSS elemento principale tema Divi

Conclusioni

In questo tutorial abbiamo realizzato uno slider post personalizzato con Divi. Da Raffaele per imparaqui.it è tutto, ci vediamo per il prossimo video tutorial. Se hai domande puoi farle tranquillamente nei commenti qui sotto 😉 A presto! Clicca qui per vedere il tutorial nella sua versione originale sul sito di Elegant Themes

Raffaele Mele

Padre affettuoso di una numerosa e allegra famiglia, esperto WordPress e creatore del sito Servizi-Wp, un grande teacher di cui andiamo orgogliosi a imparaqui.it, seguite i suoi tutorial e sarete sempre soddisfatti!

Passa alla licenza lifetime di Divi!

Non pensare più al rinnovo annuale della tua licenza di Divi, passa alla licenza lifetime sfruttando lo sconto del 20% che ti mettiamo a disposizione!
logo-imparaqui

Unisciti alla Community!

Ricevi le risorse su Divi, Bloom, Monarch, e i tutorial e i lanci per i corsi online riservati alla community di imparaqui.it - incluso accesso al gruppo Facebook!

Risorse speciali

Consenso trattamento dati

Quali argomenti ti interessano?

Benvenuto/a nella community!

Unisciti alla community

Accedi alla più grande community italiana dedicata a chi usa il tema WordPress Divi di Elegant Themes!

Risorse speciali

Usi il tema WordPress Divi?

Consenso trattamento dati

Quali argomenti ti interessano?

Perfetto, controlla la tua casella di posta!