In questa lezione, ti mostrerò qualche esempio di slide preconfezionato che ho scaricato gratuitamente acquistando il tema Be e qualcuno che puoi trovare gratuitamente sul sito di Revolution Slider.

A questo proposito faremo anche un test per farti vedere come è semplice importare le slide che vengono fornite.

Queste sono le demo che sono disponibili e questi sono i file relativi alle diverse demo.

Per il primo esempio vogliamo utilizzare di nuovo l’effetto parallasse, ma questa volta lo applicheremo allo sfondo per cui scelgo la demo sience.

Torno quindi sul pannello all slides, clicco su importa e scelgo uno dei file zip disponibili.

Dopo che il sistema avrà importato tutti i file mi troverò il nuovo slider nella lista generale.

Andando ad aggiornarlo sulla mia home page vedrò il nuovo slider posizionato.

Vediamo ora come è stato ottenuto l’effetto di parallasse sullo sfondo.

Nell’impostazione slide è stato ovviamente abilitata l’opzione parallasse e 3d mentre, nello slide editor non è stato impostato un background, in quanto quell’impostazione riguarda solo l’immagine di sfondo.

Per inserire lo sfondo animato è stata inserita l’immagine direttamente come se fosse un livello.

Puoi vedere infatti che l’image 2 è la prima della lista e disabilitando la visibilità è quella che contiene lo sfondo.

A questo punto andiamo a verificare che tipo di impostazioni hanno utilizzato e proviamo a cambiarla per vedere come cambia l’effetto.

Nel secondo esempio vediamo come inserire un video di sfondo e in questo caso vado a scegliere un template dal sito ufficiale.

Faccio la stessa procedura di importazione lo inserisco nella pagina e guardo come hanno impostato lo slider.

Come si può notare in questo caso è stato inserito uno sfondo scegliendo la modalità video YouTube.

Nel campo è stato inserito l’ID del video. Se volessimo cambiarlo possiamo selezionare il video che ci interessa e incorporare il codice.

Lo copiamo e lo incolliamo al posto di quello di default.

Poi possiamo modificare il titolo e modificare il testo del bottone.

A volte può succedere che, come in questo caso, venga presentato un messaggio di errore perché non è stata impostata un’immagine di sfondo che serve per visualizzare qualcosa mentre il plugin sta recuperando le informazioni del video.

Per ovviare al problema puoi inserire un’immagine statica da qui.

Inoltre, se fai fatica a riconoscere i vari elementi ricorda che ci sono sempre i livelli da selezionare.

Modifichiamo titolo e testo del bottone.

Aggiorniamo e vediamo il nostro slider personalizzato.

Nel terzo esempio vediamo come impostare un carosello con miniature.

Per prima cosa verifichiamo le impostazioni dello slider.

Visto che vogliamo inserire le anteprime come icona dobbiamo abilitare la navigazione con le thumbs.

Nella parte sottostante possiamo decidere come sempre ogni modifica all’aspetto grafico, quindi quanto spazio lasciare tra le thumbs, se fare il menu con le anteprime a tutta pagina, come visualizzare le miniature, che dimensioni devono avere, la posizione e così via.

In più vogliamo che lo sfondo sia uguale per tutte le pagine, quindi nella tab layout & visual scegliamo di visualizzare l’immagine di sfondo e la impostiamo.

Ora possiamo andare a vedere come impostare le slide interne.

Visto che anche questo era un esempio scaricabile dal sito ufficiale, ho utilizzato direttamente le loro immagini, inserendo la url delle foto già presenti, ma tieni conto che il procedimento per creare le singole slide è sempre lo stesso, inserisci un livello, selezioni la foto e salvi la slide.

In questo caso, ho inserito una serie di slide che contengono una singola immagine trasparente per ognuna.

A questo punto, posso impostare le miniature.

Se non le definisci verranno recuperate direttamente le immagini del carosello, altrimenti, se vuoi personalizzarle, puoi scegliere per ogni slide un’immagine unica.

In questo esempio inserisco delle icone numerate e come vedi il procedimento è semplicissimo:
scegli la slide corrispondente, carichi un’immagine e salvando il sistema la aggiungerà come miniatura del menu.

Aggiorniamo la pagina ed ecco il nostro slider in formato carosello.

Nell’ultimo esempio di questa video lezione andiamo ad inserire uno slider che prende le specifiche dai post del tuo sito.

Per far questo dobbiamo scegliere Post-Based Slider nel pannello Content Source.

A questo punto dobbiamo decidere che tipo di post inserire, quindi se appartenete solo a determinate categorie o tag, se deve recuperare i più recenti e così via.

Noi scegliamo quest’ultima opzione ma come sempre ti invito a provare tutte le possibilità che il plugin ti offre per trovare quella perfetta per i tuoi scopi.

Per ogni opzione che sceglierai avrai dei parametri diversi da impostare, ma come sempre per Revolution Slider, i valori che trovi di default sono generalmente studiati per garantire il massimo delle prestazioni.

Visto che si parla di post invece di abilitare la funzione thumbs come per le miniature del carosello, dobbiamo scegliere la navigazione con le tabs.

Anche in questo caso, abilitando la funzione potrai gestirne ogni aspetto grafico, dimensioni, posizione e così via.

A questo punto andiamo a vedere come sono impostate le singole slide.

Visto che recupererà i post del tuo blog serve solo realizzarne una e stabilire dove posizionare i contenuti che vuoi che vengano recuperati.

Visto che si tratta di contenuti dinamici, ossia che cambiano valore a seconda del post che il sistema sta visualizzando, servirà inserire un codice che fondamentalmente si compone di 2 parentesi graffe che racchiudono l’elemento.

Nel nostro caso abbiamo la data, il titolo e un pulsante maggiori informazioni.

Visto che anche il link deve cambiare a seconda del post andremo ad inserire il medesimo codice anche nel pannello azioni.

Grazie alle due parentesi graffe, il tasto recupererà in automatico la url del post corrispondente.

Questo esempio vale anche per tutte le altre opportunità che ti mette a disposizione il plugin, quindi in caso tu voglia inserire dei post specifici o quelli relativi al tuo ecommerce.

Stesso discorso vale per tutti i social, dovrai registrare il tuo sito seguendo le istruzioni che trovi nella tab delle singole opzioni e personalizzare l’aspetto come abbiamo visto in questo esempio.

Con questo esempio abbiamo concluso la serie di video lezioni su Revolution Slider.

Ciao, hai una domanda su questa lezione?

Iscriviti al sito o effettua il login


    • Lorenzo
      Lorenzo dice:

      Ciaa Paola,
      per allineato a destra cosa intendi? Un testo lo puoi trascinare come qualsiasi altro elemento.
      Forse intendi a posizione fissa su un lato? A posizione percentuale?
      Hai provato, come ti mostriamo in questa lezione, a scaricare una slide che è come (o simile) a quello che vuoi ottenere, così da vederne le impostazioni?

      Buona giornata
      Lorenzo

    • Lorenzo
      Lorenzo dice:

      Ciao Giada,
      Divi ha il proprio Slider. Certo, è molto meno sofisticato rispetto a Revolution Slider o Layer Slider WP, ma comunque per soluzioni semplici va benissimo.

      Detto questo, puoi comunque installare i plugin dei rispettivi slider ed utilizzarli con Divi.
      Dovrai semplicemente incollare lo shortcode dello slider nel modulo “Codice a larghezza intera”.

      Buona giornata

  1. elmax22
    elmax22 dice:

    Fatta la mia costruttiva -spero che per tale sia stata presa- vorrei domandare una cosa: anche acquistando Be theme, revolution slider non prevede successivi aggiornamenti? Oppure il plugin è aggiornabile?

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Massimo,
      Quando acquisti BeTheme, hai diritto agli aggiornamenti gratuiti di entrambi gli slider.

      Trovi anche la spiegazione dettagliata nel file documentazion.zip che trovi quando scarichi il pacchetto completo del tema.

      È probabile che le cose non siano contemporanee, visto che gli sviluppatori sono diversi, ma appena i programmatori di Revolution Slider metteranno a disposizione la nuova versione, troverai anche lo slider aggiornato.

      Buona giornata

  2. elmax22
    elmax22 dice:

    Questa lezione è stata veramente dura…
    Permettetemi di fare una critica costruttiva: si vede la proprietà che Gianluca ha, ma proprio per questo è troppo rapido e non si ha modo di “registrare” tutti i passaggi che ha effettuato. Personalmente nell’ultima parte ho avuto l’impulso di mollare perché non riesco più a seguire tutti i passaggi… magari arriverei a capirli, ma avrei bisogno di più tempo e che alcuni passaggi non venissero dati per scontati.
    Mi dispiace ragazzi ma proprio perché finora il corso mi è piaciuto molto, lo dovevo dire….
    Buona serata

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Massimo,
      Intanto mi scuso per la velocità di esecuzione in alcuni punti.

      L’obiettivo di questa lezione però, non è quello di farti copiare tutti i passaggi.

      In questo video ho mostrato solo alcuni esempi pratici di slide alternativi che si possono fare, ma che usano tutte le impostazioni viste nelle lezioni precedenti.

      È chiaro che non ha senso inserire in uno slider sia l’effetto parallasse, che il video, che lo slider carosello, che quello con i post del blog.

      Vanno tutti considerati esempi singoli che possono essere utili da ispirazione per il tuo progetto.

      Ad ogni modo, se mi spieghi bene che tipo di slider intendi realizzare, ti posso dare un consiglio su che strumenti utilizzare.

      Buona giornata

  3. Vittorio
    Vittorio dice:

    Ciao ho dato una scorsa alle lezioni “Slider animati” e mi chedevo se LayerSlyder e Revolution Slider si possono integrare anche a Divi?
    Grazie

    Rispondi
    • Lorenzo
      Lorenzo dice:

      Ciao Vittorio,
      Divi permette l’utilizzo dei plugin.
      Infatti c’è un modulo dedicato per l’inserimento di shortcode come quelli degli slider.

      Aggiungi una Sezione a larghezza intera > Inserisci Modulo > Codice a Larghezza Intera e incolli lo shortcode dello slyder.

      Buona giornata

Non vuoi fare da solo?

Non vuoi fare da solo?

Per realizzare il tuo progetto o per risolvere qualsiasi problematica, rivolgiti al nostro Team di professionisti.

oppure chiamaci allo 02.9843140

You have Successfully Subscribed!

Pin It on Pinterest