In questa lezione imparerai a creare un nuovo slider, attraverso delle aree di impostazioni specifiche.

Ti verrà mostrata passo passo la procedura per realizzare un semplice slider, e successivamente posizionarlo su una pagina.

Prima di tutto stabiliremo le dimensioni dello slider, e l'immagine di sfondo, realizzando quindi la prima slide.

Aggiungeremo una seconda immagine per creare la seconda slide, ed in questo modo avremo uno slider essenziale da poter visualizzare, che potremo testare inserendolo su una pagina del Tema Enfold, utilizzando l'apposito shortcode da Elementi Medi.

Hai una domanda su questa lezione?

Accedi al video corso


  1. Antonio
    Antonio dice:

    Ciao,
    il mio sito su mobile e’ veramente orrendo…
    non ho capito bene se devo creare una versione per smartphone e una per computer.
    grazie

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Antonio,
      In genere non occorre fare due versioni di slider, perché se impostato correttamente dovrebbe adattarsi in automatico ad ogni dispositivo.

      Se però hai uno slider molto “complesso”, potrebbe essere utile realizzare una versione semplificata dedicata agli utenti mobile.

      Un’altra soluzione è quella di nascondere del tutto lo slider (ad esempio per i cellulari) e sostituirlo con una semplice sezione con un’immagine di background.

      Buona giornata

  2. Andrea
    Andrea dice:

    come si inserisce il plugin “countdown timer ultimate” sopra lo slider in modo da averlo in trasparenza sulle immagini che scorrono?

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Andrea,
      Per inserire un elemento esterno ad uno slider devi utilizzare gli shortcode.

      Anche Countdown ultimate offre questa opzione, trovi lo shortcode sulla pagina del plugin.

      Per inserirlo ti basta aggiungere un livello di testo alla tua slide e incollare il codice.

      Se poi vuoi che scorrano delle immagini, devi posizionare il livello con il countdown in cima e alternare le immagini lungo la linea temporale.

      Buona giornata

  3. Pino
    Pino dice:

    Salve
    stamattina mi sono accorto che una slide aveva un comportamento strano,
    ovvero l’altezza dello sfondo era manchevole di 40px in altezza.

    Questo Slider è stato realizzato partendo dall’esempio “Enfold – most beautiful theme ever” e molti parametri sono stati lasciati inalterati.
    Un parametro che ha richiamato la mia attenzione è Layout (nella tab Slider Settings)
    Nel mio Slider è impostato:
    Full width
    Canvas width 1140
    Canvas heigth 380
    Max-width 100%
    Allows fullscreen mode: abilitato

    Quello che ho notato è che una immagine alta 380px viene visualizzata per 340px:
    mancano 20px in alto e 20px in basso.
    Perché succede questo?

    Inoltre è possibile all’interno di una slide posizionare le immagini o i testi in relazione ad un oggetto?
    Infatti ho due scritte che stanno a dx e sx di una immagine, ho osservato però che su alcuni monitor le scritte si sovrappongono all’immagine.
    Grazie
    Pino

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Pino
      Innanzitutto considera che gli slider sono elementi responsive, quindi la porzione di immagine che visualizzi deve adattarsi ad ogni misura del browser.

      Se imposti un’altezza fissa in Slider Settings > Layout, devi tenere in considerazione quella come altezza di base, ma l’immagine si adatterà in larghezza a seconda di quanto è grande la finestra (e a seconda di quanto è larga l’immagine di partenza).

      Quello che devi fare è inserire un’immagine con una proporzione più ampia rispetto a quella che imposti nelle dimensioni fisse (ad esempio 1600x600px), poi, quando la inserisci come sfondo, devi modificare il parametro Position in modo che abbia il “taglio migliore”.

      Nelle slide non si possono inserire dei layer che modificano la loro posizione in relazione ad altri layer, ma si possono utilizzare i valori in percentuale invece che quelli assoluti nella tab Styles del layer stesso.

      In questo modo ogni oggetto si dispone in relazione alla grandezza della finestra del browser.

      Buona giornata

  4. Pino
    Pino dice:

    Innanzi tutto complimenti per la chiarezza
    ho provato ad impostare “Show bar timer” ma non vedo nulla in alto a destra
    forse dipende dal fatto che nel vostro esempio l’immagine ha una cornice?
    ho impostato pure “Show slidebar timer” ma mi sembra troppo invasivo
    si può “togliere” il pallino?
    grazie

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Pino e grazie per i complimenti!

      Considera che sia il bar timer (che mostra una linea sulla parte superiore della slide che scorre da sinistra a destra) che il circle timer (che invece mostra un piccolo cerchietto nell’angolo in alto a destra) sono “poco visibili” perché sono bianchi e trasparenti, quindi se hai un fondo chiaro è probabile che non le veda.

      Prova ad utilizzare un fondo più scuro o un’immagine più contrastata e li dovresti vedere.

      Per controllare gli elementi di navigazione invece, devi intervenire sule opzioni sopra, che consentono di abilitare o disabilitare la navigazione a pallini, le frecce laterali o la navigazione con anteprime.

      Buona giornata

  5. elmax22
    elmax22 dice:

    Ciao ragazzi.
    Vorrei capire meglio, nella voce Yourlogo dello slider settings, la differenza tra “YourLogo” e “YourLogo link”.
    Inoltre per LayerSlider Wp o Revolution Slider: una volta acquistati, in quanti siti si possono usare? Possono essere utilizzati anche su siti che costruiamo per altre persone?
    Stessa cosa volevo chiedere anche per Divi: ok abbiamo diritto ad un numero illimitato di utilizzi, ma questo vale solo su siti nostri o possiamo comunque utilizzarlo se su siti costruiti per altri con domini a loro intestati?
    Grazie

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Max,
      con l’impostazione your logo inserisci un’immagine che vale per tutte le slide.

      Stabilisci quindi la posizione inserendo i valori in pixel nel campo sotto (partono dall’angolo in alto a sinistra).

      Con il link invece inserisci il collegamento ad una pagina del tuo sito, ti basta incollare la URL.

      Per i plugin premium su themeforest vale lo stesso discorso dei temi.

      Visto che ad ogni installazione dovrebbe essere associato un codice di attivazione (per poter ricevere gli aggiornamenti gratuiti futuri), dovresti comprare una licenza per ogni installazione.

      Leggi comunque la spiegazione della licenza regolare sulla pagina di themeforest.

      Per Divi invece non ci sono limiti, puoi utilizzarlo su tutti i siti che vuoi.

      Buona giornata

  6. francesco
    francesco dice:

    Ciao, non riesco a ridimensionare le immagini inserite in un nuovo layer dagli angoli come fate nel corso. L’immagine ha una selezione rossa che mi permette solo di spostarla e non di ridimensionarla. Grazie mille

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Francesco, mi sembra strano, che tipo di immagine stai inserendo? Sei sicuro che l’hai inserita in un layer e non come immagine di sfondo?

      Eventualmente mandami una schermata della tua pagina di backend dello slider alla mail di supporto, così gli diamo un’occhiata.

      Buona giornata

  7. MORENO FORZAN
    MORENO FORZAN dice:

    Salve, sto realizzando un sito con enfold e un mio amico che ha uno schermo a risoluzione maggiore del mio(1920×1200) mi dice che nel suo monitor la prima slide (che e’ un piccolo video che va in loop) e’ spostata a sinistra e non prende tutto lo schermo, io ho lavorato con la mia massima risoluzione 1366×768, da notare che le altre slide sono perfette e prendono lo schermo al 100%, nella sezione layout ho abilitato la funzione responsive e full-widht come nelle altre ma non riesco a capire come posso correggere questo problema.
    Grazie

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Moreno, prova a controllare queste impostazioni:

      Nel pannello Slider Settings imposta Full Width.

      Come dimensione Canvas metti un valore tipo 1400 e stabilisci l’altezza in base alle proporzioni della tua immagine.

      Se poi hai inserito lo sfondo valido per tutte le slider dalla tab Appearance prova a modificare il parametro background size (ci sono 4 versioni) e vedi se si risolve.

      Controlla anche che background position sia al 50%-50%.

      Se invece hai inserito lo sfondo direttamente nella slide, trovi le stesse impostazioni da provare nella tab Slides di fianco all’immagine (nel campo Size).

      Prova a lavorare su questi due pannelli, vedrai che troverai l’opzione che ti allarga lo sfondo senza lasciare spazi bianchi.

      Buona giornata

  8. Angelo Vergallo
    Angelo Vergallo dice:

    Ciao Gianluca Su DIVI non è preinstallato niente di simile? Non mi piace molto lo slider di default che ha.
    quale dei due plugin consigli come facilità d’uso?
    Grazie

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Angelo, in effetti lo slider di Divi è molto più semplice (ma anche più limitato).

      Questo perché, sia Layer Slider WP che Slider Revolution, sono plugin sviluppati “esternamente.”

      Ci sono dei temi come ad esempio Enfold, che li comprendono nel prezzo, ma solo perché gli sviluppatori di quel tema hanno preso accordi con gli sviluppatori dello slider.

      Detto questo, ti dico che non c’è molta differenza, hanno pannelli di controllo diversi, ma i risultati che puoi ottenere sono più o meno gli stessi.

      Ti consiglio di guardare le anteprime di ogni slider e di valutare gli effetti, le transizioni e tutte le possibilità che ti offrono.

      Poi, scegli in base a quelle che si avvicinano di più a quello che vuoi realizzare.

      Come spieghiamo nel corso infatti, l’aspetto positivo di questi plugin è che troverai già moltissime slider demo da usare come base per costruire la tua.

      Buona giornata

  9. alberto
    alberto dice:

    Buongiorno, sto realizzando un sito con il tema twenty eleven, e’ possibile su questo tema installare il plugin layer slider?

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Alberto, su quel tema non è possibile installare Layer Slider.
      Tra l’altro, il tema che stai usando è quello del 2011, davvero molto vecchio.
      Cerca almeno di aggiornarlo al Twenty Seventeen di quest’anno.

      Il mio consiglio, se vuoi utilizzare Layer Slider, è di acquistare un tema premium come Enfold, che lo ha già integrato.

      Vedrai che sarà un investimento che ti porterà molti altri benefici.

      Spero di esserti stato utile,
      Buona giornata

Pin It on Pinterest