Creare uno Slider con Revolution Slider

Home  /  Web Design  /  Creare uno Slider con Revolution Slider

Oggi ti spiegherò come creare uno Slider di immagini con il plugin Revolution Slider.

Ti svelo che Revolution Slider è un plugin per WordPress a pagamento, ma ti aggiungo anche che vale la pena acquistarlo (ti rimane per sempre ma non sempre sarà necessario utilizzarlo in tutti i siti web che andrai a progettare e capiremo tra poco perchè!) e che è possibile trovarlo già incluso in moltissimi dei temi realizzati per WordPress che trovate in vendita online!

Perchè acquistare proprio Revolution Slider?

Perchè ti permette di creare degli Slider contenenti immagini o video in modo preciso e totalmente personalizzabile, senza avere bisogno di nessuna conoscenza in termini di programmazione. I vostri Slider saranno automaticamente “responsive”, quindi in grado di adattarsi al dispositivo utilizzato, che è cosa ormai gradita dall’utente, ed i testi al suo interno ottimizzati SEO per i motori di ricerca.

Prima ti dicevo che non è sempre utile e necessario che ogni sito web progettato contenga al suo interno, nella Homepage solitamente, uno Slider, ma che è comunque fondamentale, soprattutto per chi vuole realizzare siti web di mestiere, avere nel proprio archivio questo Plugin.
Questo per due motivi principali:

  1. Il plugin offre tantissimi effetti di transizione e innumerevoli personalizzazioni, quindi in termini di Css e codice di progettazione è certamente pesante ed influsisce sulla velocità di caricamento finale del vostro sito web. Se siete dei fotografi o videomaker è chiaro che uno Slider nella vostra Homepage è sicuramente indicato e risulta accattivante per mostrare i vostri lavori che a quel punto dovranno ricorrere ad un intervento di ottimizzazione e alleggerimento delle immagini per far si che vengano caricate più velocemnente. Se siete, però, un’azienda che vende macchine o un ristorante è possibile inserire all’interno una chiara “call to action” (invito a compiere un’azione specifica, come lasciare la propria email per un’iscrizione ad una newsletter o per scaricare una risorsa gratuita)dando maggiore spazio al testo.
  2. Se siamo dei grafici, web designer o un’agenzia pubblicitaria è facile che per questioni di creatività ed originalità si possa optare per la scelta meno scontata, cioè quella di NON utilizzare nella propria Homepage uno Slider, bensì un’immagine statica ed evitare in quel determinato contesto il Plugin. Questo sito web ha scelto di non utilizzare Revolution Slider per una scelta creativa ed al contempo di usabilità del sito web, ma trovo fondamentale spiegarvi come poterlo utilizzare per i vostri clienti o per voi stessi.

Iniziamo a visionare una demo ed acquistare il Plugin:

Plugin

Se avete già sui vostri computer o temi WordPress il plugin potete iniziare da qui!

Come installare il Plugin

      1. Entrate nel vostro pannello di controllo di WordPress, cliccate sulla sinistra la voce di menù Plugin ed in alto comparirà Aggiungi Nuovo -> Carica Plugin. Quando avrete cliccato vi comparirà infine questa schermata dove sarà possibile sfogliare ed inserire direttamente dal vostro computer la cartella .zip del Plugin.
      2. revolution slider

 

      1. Una volta caricato cliccate su Attiva Plugin e lo troverete tra i vostri “Plugin Installati” e come voce di menù a destra -> “Revolution Slider”.

Creare il primo Slider di Immagini

Dalla voce di Menù Revolution Slider vedremo che apparirà la voce “Create New Slider” o “Import Slider”. Importare una Slider significa che disponete già di uno Slider formato .zip pronto all’uso da caricare dentro Revolution Slider ed usare, perchè lo avete acquistato a parte o perchè volete importare quello già usato su un altro sito web cambiando solo testi ed immagini, ma mantendo transizioni ed effetti.

Quando, invece, clicchiamo su Create New Slider la schermata che ci apparirà sarà questa:

revolution slider

Vediamo insieme cosa andare a personalizzare e quali impostazioni lasciare di default. Iniziamo da quelle di sinistra:

  1. Slider Title: Diamo un nome al nostro Slider e ricopiamolo uguale su Slider Alias.
  2. Vediamo che la voce Slider Shortcode si è automaticamente compilata con il nome dato al nostro Slider e possiamo copiarla ed incollarla su un blocknotes, perchè ci servirà alla fine per dire alla nostra Pagina o Articolo WordPress che lì dentro deve apparire uno Slider.
  3. Source Type: Lasciate di defalut Gallery
  4. Slider Layout: Puoi sceglierlo fisso oppure “custom” per personalizzare le impostazioni in “pixel” oppure se sei inesperto ti consiglio di scegliere “autoresponsive” e andare sul sicuro! Tutte le tue immagini si adatteranno ad ogni dispositivo automaticamente.
  5. Unlimited Height, Force Full Width ed Min. Height: lascia impostato OFF e 0 .
  6. Layers Grid Size: Ti serve per personalizzare le dimensioni in larghezza ed altezza del tuo slider, ma per adesso o all’inizio puoi lasciare 960 x 350 o al max puoi usare 1170 x 600 se lo desideri appena più grande.

Passiamo alle impostazioni principali di destra:

    1. Su General Settings troviamo la voce Delay: puoi impostare la durata di ogni diapositiva (in millisecondi). Ti consiglio un 9000 o 6000.
    2. Sulla Sezione Loop and Progress c’è lo Stop slider: ti permette di decidere se impostato in ON di stoppare uno Slider dopo un tot di cicli o dopo tot slides. Preferisco lasciarlo sempre OFF e consentire lo scorrimento automatico delle immagini.
    3. Sezione Appereance: serve per modificare l’estetica generale del tuo Slider.revolution sliderCon Shadow type puoi decidere se impostare o meno un’ombra sotto lo slider o se utilizzare un Background color per impostare un colore a tua scelta per lo sfondo o Dotted overlay size per scegliere se usare una texture a puntini anzichè un’immagine. Prova a smanettare un pò con queste impostazioni e vedrai che dopo avere creato la 1° Slide tornerai qui per cambiarle più volte fin quando non otterrai il risultato a te gradito!
    4. Su Navigation puoi impostare i cursori per passare da una slide all’altra o optare con  la voce “None” per non far vedere le tipiche frecce ad ogni cambio di slider.
    5. Il Mobil Touch è interessantissimo per stabilire con quanta velocità o sensibilità di tocco il tuo utente da mobile può cambiare una slide. Puoi lasciare su Swipe Treshhold un 0.7 di default e su Swipe Min Finger un 1 di default.
    6. Lascia le rimanenti impostazioni e voci di destra invariate.

Ricorda infine di Salvare tutto su SAVE SETTINGS!

Creare la tua prima Slide. Una volta creato il tuo slider dovrai aggiungere le singole slide e puoi quindi cliccare direttamente su EDIT SLIDES. Puoi scegliere tra “new slide” o “new transparent slide”. Nel primo caso lo sfondo sarà del colore scelto nelle impostazioni precedenti, nel secondo caso lo sfondo sarà trasparente. Ti consiglio di crearla come transparent slide e di non impostare colori in precedenza, anche perchè ora vedrai che preferirai impostare un’immagine di sfondo anzichè un colore!

Una volta creata la tua prima Slide ti troverai esattamente al suo interno!

Facciamo una pausa! E’ fondamentale soffermarsi due minuti in questo preciso punto, per chiarire che per realizzare uno Slider di immagini serve sapere come va usata l’immagine che scegliamo di inserire.

Quali si prestano meglio come sfondi, quali come immagini in primo piano e come utilizzare i colori per evitare di appesantire la propria Homepage con uno Slider poco efficace ed accativante? Fondamentale, inoltre, sapere quanto TESTO utilizzare su una slider.

Uno slider può avere una sua immagine di sfondo, un pattern, un motivo grafico o un paesaggio che vi ispira, purchè sia gradevole e corretta la sua risoluzione e che le immagini che poi scegliete di mettere un primo piano o il testo sopra non siano in contrasto e non si perdano tra mille colori! Come evitare tutto questo? Basta utilizzare toni sobri e cercare su google tra le free images o se avete a disposizione un abbonamento a Fotolia o similare delle immagini che rispecchiano chiaramente la vostra attività o servizio di formato JPG se sono sfondi con una dimensione in pixel di almeno 1000px di larghezza o di formato PNG se sono immagini da utilizzare in primo piano (quindi sopra lo sfondo, perchè supportano la trasparenza e risaltano!) con una dimensione in pixel solitamente tra i 500 e 600px di larghezza. Vi faccio un esempio:

revolution slider

Come potete notare l’immagine postata rappresenta un’ipotetico slider composto da un’immagine del ristorante di sfondo in formato Jpg dai colori tenui e con un effetto sfocato che permette l’inserimento gradevole di un’immagine in primo piano a sinistra, il sushi, in formato Png per eliminare il suo sfondo ed integrarsi perfettamente con il resto e sulla destra del Testo di colore bianco per risaltare sullo sfondo ed un bottone che rappresenta la “call to action” per scoprire di più sul ristorante e rimandare al click ad una pagina interna al sito.

Il vostro compito per creare la 1° Slide è cercare un’immagine sfondo che sia un pattern o una vera e propria fotografia che permetta facilmente l’inserimento in primo piano di un’altra immagine del vostro prodotto e due brevi righe di testo che lo rappresentino. Fatto? Andiamo allora adesso a impostare la vostra 1° Slide. Ci eravamo fermati ad Edit Slides:

revolution slider

Potresti tranquillamente lasciare tutte le impostazioni di default che vedi in questa immagine, sapendo però che la funzione “State” ti permette di decidere quando rende pubblica o meno la tua slide e che puoi smanettare liberamente con “Transitions” per vedere tutte le transizioni che prevede Revolution Slider.

Vediamo, invece, come inserire la nostra immagine di sfondo e tutto il resto:

revoltuionslider9

Con la funziona IMAGE BG possiamo caricare un’immagine dal nostro computer (proprio quella che avete scaricato da internet!) e posizionarla come sfondo della slide.

Una volta inserito lo sfondo scendendo un pò più giù troverete i LAYER. Non vi preoccupate! Può sembrare difficile ma è molto intuitivo. Basterà cliccare su Add New Layer generico per inserire del Testo o Add layer Image per le immagini ed ogni volta che volete cancellarne uno ci dovete cliccare sopra e selezionare Delete.

Andremo a cliccare Add New Layer Image per inserire l’immagine che sarà quella in primo piano (esempio: il sushi) in formato png, vedrete che immediatamente vi si apre la pop up per caricare la vostra foto (miraccomando alle misure!). Con il mouse provate a muovere la vostra immagine, evitando di posizionarlo troppo vicino ai margini dello slider contenitore, finchè non vi piace. Con Add Layer generico inserite il testo scrivendo al posto di quello fittizio che vi genera il Plugin le vostre parole. Da Style vi potrete sbizzarire con gli innumerevoli stili grafici di testo che vi propone Revolution Slider, provate a selezionarne uno e cliccare poi EDIT STYLE per modificare il font, la dimensione, il colore o il colore di sfondo della scritta e cliccate poi Save.

Add layer video serve per inserire i video dentro lo slider, ma magari questa funziona la spieghiamo più avanti!

Una volta smanettato con le varie funzioni, cliccato preview per visionare l’anteprima della nostra slide e salvato, potete con Create New Slide crearne una nuova seguendo lo stesso procedimento. Ricordate solo che quando avete finito con le impostazioni di cliccare su State -> Published per rendere operativa una Slide!

Ma come comunico al mio sito web dove far apparire il mio Slider?

Andate a prendere quello Shortcode che vi avevo fatto copiare qualche rigo fa! Ricordate? Poi andate sulla pagina web dove avete deciso di far visualizzare il vostro 1° Slider (solitamente la Home) e semplicemente copiate ed incollate il vs shortcode all’inizio della pagina (da Editor Testo dove solitamente scrivete!) o nel punto in cui volete che appaia ed il gioco è fatto!

10 Commentifinora:

  1. Matteo ha detto:

    Ciao, una domanda sulla creazione dei video negli slider.
    Ma se il mio sito non è in WP, c’è la possibilità di creare un video e inserirlo nel codice?

    • Giada Giordano Giada Giordano ha detto:

      Ciao Matteo! Se il tuo sito web non è realizzato in WordPress è comunque possibile inserire un video all’interno del codice di programmazione con il quale è stato realizzato il sito stesso (es: Html – Php ..), incorporando l’iframe del video, che avrai caricato prima su Youtube o Vimeo, all’interno della sezione della pagina dove ti interessa che questo appaia. Il codice “iframe” lo puoi estrapolare direttamente da YouTube o Vimeo, dove parla di “codice da incorporare”, che è la maniera più semplice e più funzionale. Se hai altri dubbi non esitare a contattarci!

      • Filips ha detto:

        Ciao Giada! Avendo scelto RS per impostare una foto di sfondo con una scritta, mi trovo in difficoltà ad evitare che la scritta scompaia e che l’immagine si ricarichi.
        Come faccio a tenere foto e scritta fissa?

        Grazie!

        • Salve Filips, per evitare che la scritta scompaia e che l’immagine si ricarichi verso la slide successiva, dovresti come primo passaggio andare su “LAYER ANIMATION” della tua slide e posizionarti su “layers timing and sorting” dove è possibile riordinare i vari blocchi della tua slide (testi, bottoni, immagini) e decidere il momento di inizio e quello di fine (in millisecondi). Per ogni livello che crei devi aumentare i millisecondi per fare si che duri di più e non scompaia! Per quanto riguarda il fatto, invece, che l’immagine si ricarica quello dipende dalle IMPOSTAZIONI GENERALI di tutte le tue slides, per questo vai su GENERAL SETTINGS (impostazioni generali) e sulla destra c’è il pannello di controllo che ti permette in alto alla voce “Delay” di impostare la durata di ogni diapositiva (in millisecondi) e provi qui ad aumentarli. Infine puoi settare “ON” poco più giù alla voce “Navigazione (Navigation)” dove trovi scritto STOP ON HOVER, così che quando ci tieni il mouse sopra la slide si ferma e non ricarica! Fammi sapere!!

  2. Davide ha detto:

    Ciao, una domanda: come faccio a creare uno slider che tenga fissa la scritta in primo piano e che faccia passare le immagini una dopo l’altra sullo sfondo senza far sparire/riapparire la scritta (che come dicevo è sempre la stessa) ad ogni transizione? Ho già tolto le animazioni alle scritte ma sembra non essere sufficiente.
    Grazie in anticipo.

    • Salve Davide, non sei fin ora riuscito a tenere ferma la tua scritta in primo piano perchè Revolution Slider lavora su singola slide (fatta di immagini, testo, bottoni e/o video) che scorrono in un tot di millisecondi per poi passare alla successiva slide. Ciò significa che non esiste un modo per tenere ferma una scritta o un livello qualsiasi che viene caricato in una determinata slide dove è stata caricata anche un’immagine come “sfondo” e poi fare in modo che quando si passa alla successiva questa scritta fissa venga mantenuta ferma, perchè ogni slide ti chiede di creare sempre nuovi livelli! Puoi però ovviare in tre modi:
      1. Creare e caricare per ogni slide le tue immagini di sfondo contenenti già la scritta che deve rimanere fissa, così che ogni volta che ricarica vedrai la scritta sempre ferma, ma è chiaro che la scritta così non verrà indicizzata, perché fa parte dell’immagine stessa, ma dipende se ti interessa che lo sia!
      2. Creare il livello TESTO con la tua scritta che abbia la stessa animazione, stesso font, stesso colore e stessa transizione su ogni slide dove andrai a cambiare ogni volta l’immagine di sfondo, ma sapendo che ogni qual volta che ricarica una slide avrai un pò la sensazione che scompare e riappare! Magari per ovviare un pò questo effetto puoi su singola slide eliminare le transizioni e animazioni e su GENERAL SETTINGS (impostazioni generali dello slider) su Lazy Load provare a velocizzare il caricamento della pagina/slide
      3. Creare un’unica e sola slide dove le immagini che dovrebbero ruotare vengono caricate come singoli livelli immagine (devi quindi impostare manualmente la loro animazione, dimensione e posizionarle come credi sia meglio!) e il livello scritta lo crei solo una volta e così rimarrà fermo!

  3. amos ha detto:

    Ciao! Come faccio a fare in modo che quando un utente clicca una slide questa porti ad un articolo?
    Graziee

    • Salve AMOS, ti basterà quando sei dentro la tua Slide singola andare su IMAGE BG, quindi caricare un’immagine di sfondo a questa slide, e subito sotto (sempre nella stessa finestra dove leggi image BG trovi una voce chiamata “Enable Link” che ti permette di settare un link affinchè la tua immagine sia cliccabile verso url esterno. Fammi sapere se riesci!

  4. Giorgio Nuvoloni ha detto:

    Ciao,
    ho usato in più progetti Revolution Slider.
    Questa volta mi hanno chiesto di inserire un video. Tutto bene l’inserimento ma non riesco a fare in modo (se esiste) di non farlo ricaricare ogni volta che si torna in home page. addirittura il sito è per il 90% su pagina unica, appunto la home, con menu ad ancore e cliccando su una voce mi riparte il video.

    Qualche suggerimento?

    Grazie

    • Ciao Giorgio,
      innanzitutto bisognerebbe comprendere la versione che stai utilizzando.
      In generale dovresti selezionare lo slider che vuoi modificare.
      Una volta selezionato dovresti entrare nella sezione Loop e selezionare:
      Stop Slider: On
      Stop At Slide: 1
      Show Progressbar: Hide
      Loop Single Slide: Off

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *