Esempi pratici di Revolution Slider

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.