Slider WordPress: perché scegliere Revolution Slider [guida completa]

Come ti sarai reso conto di Slider WordPress ne esistono moltissimi sul web, così tanti da portare noi utilizzatori di un blog WordPress a impazzire alla ricerca del migliore.

Moltissimi template WordPress già includono uno slider, ma molto spesso si tratta di slider di bassa qualità, inseriti solo per riempire un template scarno o poco professionale.

Per questi motivi, capita spesso di dover cercare un buon slider per WordPress, in grado di portare miglioramenti al nostro progetto e di non aggiungere nuovi problemi.
Se sei all’inizio della tua ricerca e sei arrivato subito su questo articolo sei fortunato! ho già fatto questa ricerca per te e sono giunto a una conclusione che mi ha portato delle belle soddisfazioni.

In questo articolo troverai le seguenti informazioni:

• Quando è opportuno usare uno Slider WordPress e quando è meglio evitarlo
• Quali sono i migliori WordPress Slider presenti sul mercato
• I motivi per cui Revolution Slider può essere considerato il miglior plugin per creare slideshow
• La guida a Revolution Slider

Slider WordPress: sei sicuro che faccia al caso tuo?

Devi sapere che non sempre l’utilizzo di uno Slider porta dei vantaggi al tuo sito web. Anzi, utilizzandone uno senza motivo (solo perché “piace”) rischi solamente di rendere il tuo blog/sito meno usabile per i tuoi visitatori.

Rischi di spostare l’attenzione dai contenuti più importanti (che risulteranno meno visibili e nella parte inferiore dello schermo) e di diminuire la velocità del tuo sito.

Non devi pensare a uno Slider WordPress come a una semplice galleria di foto per avere delle immagini in evidenza, ma a un modo per presentare velocemente più informazioni attraendo l’attenzione del visitatore e stimolandolo a cliccare per arrivare al “succo”.

Solo un blog di fotografia può permettersi l’utilizzo di uno Slider come semplice galleria di immagini per mostrare le proprie creazioni. Tutte le tipologie di sito il cui business non è incentrato su foto e immagini devono avere nelle slide una chiara “call to action”, magari con un bel bottone in evidenza: “scopri di più”, “acquistalo subito”, “contattaci ora” ecc. per fare in modo che il visitatore ci clicchi e sia indirizzato sul contenuto importante.

Ovviamente per poter fare questo lo slider wordpress deve supportare l’inserimento di link diversi nelle varie slide.

I migliori Slider WordPress: non solo immagini

Devi sapere che esistono alcuni Slider WorPress gratuiti, ma che ovviamente non hanno le potenzialità per comparire in questa guida, che ha la presunzione di essere la guida alla scelta del miglior plugin per slider presente sul mercato (il migliore, non il più costoso) .

Per alcuni progetti uno slider può davvero far fare un salto di qualità al tuo sito, quindi nonostante la spesa sicuramente non ti pentirai della tua scelta (preciso che il prezzo medio è di 15 euro).

Eccoti gli Slider WordPress che sono stati più venduti tra i professionisti e hanno ottenuto una votazione più alta:

RoyalSlider: uno slider che si focalizza si prestazioni, velocità e stablità. Non ha molti effetti particolari, ma ne fa un vanto, in quanto ritiene che alcuni effetti siano troppo macchinosi e distraggano troppo il visitatore. Davvero un ottimo slider, ma secondo alcuni critici effettivamente dovrebbe potenziare l’impatto estetico (uno slider serve anche a questo)

LayerSlider: è il contrario di RoyalSlider. Ha una vastissima gamma di animazioni sia 2D che 3D, 13 modelli preimpostati e centinuaia di opzioni di personalizzazione.  È possibile aggiungere qualsiasi contenuto: immagini, testo, html, video YouTube, Vimeo  o HTML5.
E ‘anche SEO friendly, consentendo di costruire markup semantico con attributi personalizzati per facilitare l’indicizzazione dei motori di ricerca. Ovviamente prestazioni e stabilità ne risentono leggermente

Ci tengo a precisarti una cosa: entrambi sono davvero ottimi prodotti, non voglio di certo screditarli. Io però ne ho scelto un terzo, per i motivi che ora ti andrò a descrivere.

Revolution Slider, lo slider WordPress con qualcosa in più

Prima di tutto dai un’occhiata allo slider. Come noterai ha numerose opzioni) fatti un giretto nella demo cliccando su “live preview”):

Eccoti le caratteristiche che rendono questo slider la scelta migliore:

1) Layout Responsive: cosa significa responsive? Significa “in grado di adattarsi al dispositivo utilizzato”. Significa OBBLIGO! Le persone visualizzano blog e siti web sempre più spesso tramite dispositivi mobili.

Il tuo template WordPress deve essere in grado di adattarsi a questi dispositivi e, ovviamente, anche il tuo slider, o sarebbe un bel casino! Slider a tutto schermo con sito che si adatta al cellulare… mi viene il mal di testa solo a pensarci! Il layout responsive di questo WordPress slider risolve questo problema.

Con Revolution Slider potrai scegliere tu i pixel esatti su cui far variare la visualizzazione. Se non sei esperto e non hai voglia di fare calcoli potrai anche scegliere l’opzione “auto-responsive” e lo slider farà tutto da solo. Avrai anche la possibilità di usarlo a schermo intero.

2) Semplicità: Il lavoro fatto dagli sviluppatori sull’usabilità del plugin è encomiabile, l’usabilità è fantastica. In pochi minuti (anche grazie alla prossima sezione del mio articolo) sarai in grado di padroneggiare lo slider WordPress anche se non hai alcuna esperienza.

3) Ottimizzazione per i motori di ricerca: lo slider ti darà la possibilità di inserire vero testo e veri link in sezioni e bottoni. Ipoteticamente con lo slider puoi creare un’intera pagina leggibile da Google (al contrario di quelli con sole immagini). Inoltre potrai impostare per ogni slide gli attributi “alt”(testo alternativo per ogni singola immagine presente in ogni singola slide)  e quelli dei link.

4) Grafica: Effetti che pagano l’occhio e possibilità di massima personalizzazione

Nella prossima sezione ti spiegherò come installare e settare questi slider, ma prima se pensi che questo articolo possa essere utile anche a qualcun altro cosa ne dici di condividerlo?

Revolution Slider: guida all’installazione e alla configurazione

Prima di tutto recati sul sito dello slider WordPress, acquistalo e scaricalo (eccoti il link: Revolution Slider)

Ora vai sul tuo sito WordPress come amministratore e nella colonna di sinistra clicca alla voce plugin–>aggiungi nuovo–>carica plugin e scegli il file che hai appena scaricato.

Installa e attiva il plugin. Sei pronto a creare uno slider WordPress fantastico? Iniziamo!

1) Creare il primo slider WordPress

Clicca nel menu di sinistra alla voce “revolution slider” e successivamente su “crea un nuovo slider”

[divider style=”9″]

2) Impostare Revolution Slider

In questa sezione sono presenti le impostazioni generali di revolution slider.

Dovrai dare un nome allo slider appena creato. Oltre al nome è necessario un alias che verrà utilizzato per creare lo shortcode per utilizzare lo slider. Questo shortcode non è nient’altro che il codice da copiare negli articoli o nei widget dove vorrai mostrare lo slider.
Potrai infatti creare infiniti slider e ognuno di essi avrà un proprio shortcode. Nell’immagine che segue ho scelto “home” come nome e alias, in quanto utilizzerò lo slider in una homepage.

Layout:
Iniziamo dal layout. Puoi sceglierlo fisso (impostando a piacimento i pixel) oppure personalizzare le impostazioni in “custom”. Se sei inesperto ti consiglio semplicemente di scegliere “autoresponsive”: lo slider si adatterà automaticamente ai dispositivi mobili (ricordi? è uno dei punti di forza del plugin)

Impostazioni generali (general settings):

• Delay: in questa sezione puoi impostare la durata di ogni diapositiva (in millisecondi)
• Shuffle mode: selezionalo per mostrare le slide random
• Lazy Load: velocizza il caricamento della pagina
• Stop slider: puoi decidere in che momento bloccare lo slider WordPress, dopo un tot di cicli (stop after loops) o arrivato ad una certa slide (stop at slide)

Google Font:

In questa sezione puoi aggiungere facilmente tutti i font pubblici di Google al tuo slider WordPress, non ti resta che inserire il link al contenuto su Google Fonts

Posizione nella pagina (position):

Puoi impostare l’allineamento (destra,sinistra, centro) e i margini dello slider

Aspetto (appearance): 

Qui puoi modificare l’estetica dello slider, inteso come “contenitore”

• Shadow type: la tipolgia di ombra sotto lo slider (puoi scegliere anche di non usare l’ombra)
• Show timer line: scegli se mostrare o meno la barra di caricamento delle slide
• Padding boarder: definisci i pixel del bordo
• Background color: il colore dello sfondo
• Dotted overlay size: puoi scegliere se usare una texture a puntini (ce ne sono più tipi)
• Show background image: puoi impostare un immagine come sfondo alla slide

Spinner:

Puoi scegliere l’immagine da mostrare durante il caricamento dello slider

Navigazione (Navigation):

Qui puoi scegliere i cursori per passare da una slide all’altra (fai qualche esperimento per decidere l’effetto che preferisci)

 Miniature (Thumbnails): 

Tra le opzioni di selezione delle slide c’è la possibilità di impostare delle miniature; qui puoi definirne il numero e le dimensioni

Input da mobile (Mobil Touch): 

Puoi attivare e gestire la sensibilità al tocco su dispositivi mobile (le impostazioni di default vanno bene)

Visibilità su mobile (Mobile Visibility):

Puoi decidere di rendere invisibile lo slide sui dispositivi mobile o se nascondere le frecce di navigazione o i thumbnails

Single Slide:

Hai la possibilità di impostare un ciclo infinito se hai deciso di usare uno slider con un unica slide

Alternativa alla prima slide (Alternative First Slide):

Hai la possibilità di mostrare una slide alternativa come prima slide senza modificare l’ordine delle slide nel pannello che vedremo più avanti in questa guida; quindi diciamo che questa opzione è per rendere più comoda questa operazione

Risoluzione problemi dello slider WordPress (Troubleshooting):

Qui puoi risolvere alcuni problemi di incompatibilità (opzione che serve solo agli esperti)

3) Aggiungere slide al tuo slider WordPress

Creare e gestire le slide

Una volta creato il tuo slider dovrai aggiungere le singole slide.
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. Per modificare il colore di sfondo (o qualsiasi altra opzione immessa al momento della creazione dello slider) puoi cliccare su “slider settings” e fare le dovute modifiche.

Una volta create le slide potrai sempre cliccare sul bottone verde “edit slide” per modificarle (vedi immagine qui sotto).

Impostazioni della singola slide

Anche se puoi passare direttamente alla prossima sezione lasciando le impostazioni di default, ma devi sapere che Revolution Slider è ricco di opzioni. Vediamole:

• Slide title: il titolo della singola slide (è diverso dal titolo dello slider di cui parlavamo prima, uno slider può ovviamente avere più slide; qui decidi il nome della slide che stai creando)
• State: è lo stato della slide (pubblicata o non pubblicata); anche se creata puoi decidere di settare la slide come non pubblicata per certi peridi per poi pubblicarla nuovamente
• Visible from/visible until: è un opzione per pianificare la pubblicazione, si può decidere un range di date in cui la slide verrà pubblicata
• Transitions: qui ci sono gli effetti di transizione tra una slide e l’altra; scegli i tuoi preferiti
• Slot amount/rotation/transition duration/delay: sono tutto opzioni della transizione

Impostate queste prime opzioni puoi procedere alla vera e propria creazione della slide per il tuo slider WordPress.

Nonostante le impostazioni generali, qui puoi modificare alcune impostazioni della singola slide, come la scelta di un colore di sfondo (o di un immagine) o dello sfondo trasparente.

In questa sezione puoi impostare anche l’utilizzo del Ken Burns slider (se non sai cos’è clicca su questo link).

Vediamo ora come aggiungere gli elementi allo slider WordPress.
Puoi aggiungere un blocco di testo (add layer), un immagine (add layer: image) o un video (add layer: video). Ora ti spigherò come gestirli uno ad uno:

1) Inserire testo allo slider WordPress: add layer

Clicca su add layer.

Quello che inserirai nella casella di testo comparirà anche nell’anteprima dello slider WordPress. Puoi scegliere stili differenti dal menu a tendina “style”.

Hai anche la possibilità di creare nuovi stili, non ti resta che cliccare su “edit style” e potrai personalizzare lo stile tramite la seguente interfaccia:

In “family” puoi inserire qualsiasi Google Font (ricorda che devi prima caricarlo nelle impostazioni generali dello slider WordPress). Inoltre puoi scegliere colori, dimensione ed effetto al passaggio del mouse (cliccando su “hover”).

Per salvare lo stile clicca su “save as” e dai un nuovo nome (tuttoattaccato!), successivamente potrai riselezionare lo stile creato ogni volta che vuoi dal menu a tendina (style).

Esistono anche dei bottoni (puoi ovviamente anche crearne uno dall’editor).
Proviamo a utilizzarne uno inserendo anche un link:

Ora passiamo invece alla sezione per impostare l’animazione:

Con “start animation” ed “end animation” decideremo l’effetto (visualizzabile in anteprima) rispettivamente dell’inizio dell’animazione (ossia la comparsa del blocco di testo/bottone) e quello della fine. Nella altre opzioni possiamo impostare la velocità dell’animazione (in millisecondi). Inoltre è possibile modificare il ritardo.

Lo split text è inveve un’opzione per far comparire le lettere (o le parole) una alla volta; è possibile deciderne la velocità.

Nella colonna a destra “layers timing and sorting” è possibile riordinare i vari blocchi della nostra slide (testi, bottoni, immagini ecc.) e decidere il momento di inizio e quello di fine (sempre in millisecondi). L’icona con l’occhio serve semplicemente per nascondere un blocco mentre stiamo elaborando la slide (serve per non fare confusione).

Per posizionare il testo basta cliccarci sopra e trascinarlo.

2) Inserire immagini nello slider WordPress: add layer image

Vediamo come si inserisce un’immagine nella slide. Clicca su “add layer: image” e seleziona un’immagine dalla tua libreria.

Successivamente puoi fare esattamente come per il testo, trascinando e decidendo le animazioni.

Noterai la casella “alt text”. Qui inserisci un testo alternativo per la tua immagine (molto utile per il posizionamento su Google).

3) Inserire video nello slider WordPress: add layer video

Clicca su “add layer: video”.
Potrai scegliere tra 3 opzioni:

1. Aggiungere un video da YouTube
2. Aggiungere un video da Vimeo
3. Aggiungere un video in HTML5

Per le prime due basta semplicemente incollare l’ID del video.
Per aggiungere un video in HTML5 devi invece compilare tutti i campi richiesti.

Quando finisci di impostare una slide ricorda di salvare il tuo lavoro e di aggiornarlo (taso verde “update slider”) ogni volta che finisci una modifica. Dopo averla salvata puoi iniziare a crearne una nuova, e così via!

Come utilizzare lo Revolution Slider sul tuo sito/blog

Come ti ho scritto in precedenza usare il tuo slider su WordPress è semplicissimo: un comodo pulsante nell’editor ti consentirà di inserire lo slider che preferisci ( ti ricordo che puoi creare più slider).

Altrimenti, se vuoi inserire il tuo WordPress slider in alcuni punti particolari del sio (ad esempio in un widget)  puoi trovare lo shortcode dal menu di sinistra di WordPress, semlicemente cliccando sulla scritta “revolution slider”(si aprirà la pagina con tutti gli slider creati e rispettivi shortcode).

Eccoti nuovamente il link al mio slider WordPress preferito, divertiti!