Revolution Slider tutorial italiano 2017

migliori temi wordpress 2017
I migliori temi wordpress del 2017
6 Agosto 2017
Siti web Milano
3 Luglio 2018



Revolution Slider tutorial in italiano

Revolution Slider tutorial in italiano, per imparare a padroneggiare questo stupendo Plugin per wordpress. Revolution slider vanta oltre 4 milioni di attivazione nel mondo, vuol dire che se c’è una slide, molto probabilmente il plugin usato sarà Revolution Slider.

Perché un tutorial in italiano? Semplice, perché le funzioni sono moltissime e ad ogni aggiornamento ne vengono aggiunte di nuove e si finisce per non sfruttare a pieno questo potente plugin, magari per pigrizia ci si limita alle solite funzioni base. Scopriremo però che le cose che si possono fare sono davvero tante, quindi vale la pena perderci un po di tempo e iniziare a capire come funziona Revolution Slider.

Se sei alle prime armi, ti consiglio di dare comunque un occhiata al sito ufficiale dove puoi trovare già un bel po di informazioni. Oppure a contattarci: Shadowplaystudio Siti Web Milano info@shadowplaystudio.it

Ma cominciamo dall’inizio.

CHE COS’E’ REVOLUTION SLIDER?

Revolution slider è senza ombra di dubbio il plugin più completo per realizzare le tue slide su wordpress. Sicuramente chi si occupa o si è occupato di grafica ed ha dimestichezza con programmi come Photoshop o Illustrator si sentirà un po “a casa” dato che molte funzioni ricordano i nostri amati programmi Adobe.

L’uso intuitivo e la libertà con la quale si possono modificare tutti gli elementi che compongono la tua slide, rendono davvero semplice e divertente realizzare una slide eccezionale anche per chi è alle prime armi.

E dopo questa introduzione passiamo alla pratica e iniziamo.

INSTALLAZIONE.

Revolution Slider è un plugin a pagamento. Molto probabilmente però se hai acquistato un tema premium su Themeforest avrai già compreso anche Revolution Slider, per cui una volta installato il tuo tema, vedrai già nella tua bacheca il suggerimento ad attivarlo. Attenzione però, perché per poter sfruttare a pieno tutte le funzionalità del plugin, ad esempio Add-ons, animazioni, slide già costruite, allora dovrai acquistare una licenza ed attivarla dal pannello plugin di wordpress.

Se invece nel tema comprato non è compreso, allora devi recarti sul sito ufficiale ed acquistarlo alla modica cifra di $ 25. Acquistando la licenza avrai accesso a tutte le funzionalità di cui abbiamo parlato. Io personalmente preferisco sempre avere la licenza, in modo da poter sfruttare al massimo le sue risorse, senza avere problemi e limitazioni.

L’installazione del plugin è semplicissima. Una volta scaricato il file Zip dal sito ufficiale, recati nella bacheca wordpress, clicchi su Plugin e aggiungi Plugin.
Cliccando in alto su Nuovo Plugin—>upload Plugin—>Browse ( cerca il file zip scaricato precedentemente )—>Installa adesso.

Una volta installato non ti resta che attivarlo.
Se hai acquistato la licenza inseriscila dove richiesto in modo da poter accedere a tutte le funzioni Extra utilissime, di cui parlavamo prima.

CREA LA TUA PRIMA SLIDE

Iniziamo vedendo come andare a creare velocemente la tua prima Slide, partendo da Zero.

  • Entra nella Bacheca di wordpress, scrolla in basso in basso sulla sinistra trovi il Plugin Revolution Slider. Cliccaci su.

     

 

  • Clicca silla Slide vuota con il segno + e successivamente su “Crea Slide“.

     

 

  • Dai un nome alla tua slide, crea un alias ( un nome corto che identifichi la tua slide, non usare caratteri speciali perché non vengono riconosciuti ), in automatico il plugin creerà un Shortcode, che potrai copiare e incollare in ogni parte del tuo sito.

 

  • Ora clicca in alto a destra sul tasto verde e “ salva“.

     

Ok, abbiamo capito come aggiungere il plugin e creare la nostra prima slide. E ora?

Ora andremo ad analizzare punto per punto, tutto il pannello strumenti che ti si aprirà una volta aperta la tua nuova slide.
Quindi, apri la slide appena creata e iniziamo.


Ok da sinistra in alto notiamo che abbiamo 3 tasche: All Sliders | Impostazioni Slider | Slider editor:

All Slider : cliccando qui, semplicemente torniamo alla schermata dove troviamo tutte le nostre slider , se non ne abbiamo create sarà vuota.

Impostazioni Slider : qui è dove andremo a settare tutte le impostazioni generali che avranno effetto sulla nostra slide e dove potrai, scegliere la tipologia di Slide, modificare il suo titolo e molte altre cose interessantissime che vedremo dopo.

Slider editor : questo è il cuore di tutto, è dove andremo a inserire i nostri contenuti veri e propri che poi vedremo animarsi nel nostro sito.

Proseguendo sulla destra possiamo notare 4 quadratini colorati, qui abbiamo:

Tasto verde : Salva presentazione. Dopo ogni modifica bisogna ricordarsi sempre di cliccarlo, altrimenti tutte le operazioni fatte non avranno effetto.

Tasto viola : CSS/JAVA. Dove puoi personalizzare “a mano” lo stile della tua slide, ma questo è possibile solo se sai dove mettere le mani, quindi ora ti consiglio di non guardarlo nemmeno.

Tasto Blu : Impostazioni slider : ti rimanda alla sezione impostazioni già vista su.

Tasto Grigio : Anteprima. Questo è molto utile per due motivi. Primo perché ti permette senza salvare in modo distruttivo, di vedere l’anteprima delle modifiche effettuate. Secondo, ti permettere di avere un anticipo di come verrà visualizzata la slide in un ottica responsive, quindi su smartphone, Tablet, Desktop e portatile. Bello no?

Ok, scendiamo ancora e  troviamo 3 simpatici rettangoli molto importanti, e sono: STATICI/LIVELLI GLOBALI | LA NOSTRA SLIDE |  AGGIUNGI SLIDE + ma ci soffermeremo solo sul primo, perché degli altri abbiamo già parlato.

Statici/livelli Globali.

Voglio spendere due parole su questa sezione, perché spesso viene quasi completamente ignorata da tutti, e invece conoscerla, ci può facilitare il lavoro in caso di particolari richieste dei nostri clienti. A cosa serve? Presto detto, in definitiva cliccandoci sopra, andremo a inserire tutti quei contenuti che all’interno della nostra Slide dovranno rimanere invariati.

Per esempio: supponiamo che la nostra slide principale sia composta da 3 immagini che cambiano, ma la scritta e i testi rimangano sempre gli stessi. Per evitare di rompersi la testa cercando di rieccitare i testi in ogni slide e avere un effetto di “riaffioro” bruttissimo. Grazie a questa sezione possiamo inserire qui i nostri testi “fissi”, salvare e tornare alla nostra slide.

Avremo cosi ottenuto una slide con testi fissi e immagini che cambiano, proprio come volevamo. Su questo argomento ci ritorneremo con un mini tutorial.

Continuando a scendere troviamo 7 belle tasche che sono:

Sfondo principale

Qui è dove andremo a settare il nostro sfondo partendo dalla fonte, solitamente la nostra libreria immagini di WordPress. Al naturale si presenta con uno sfondo trasparente ma cliccando su principale/immagine di  sfondo avremo la possibilità di inserire come sfondo una immagine a nostra scelta.

In alternativa se vogliamo settore un colore di sfondo e non un immagine, dobbiamo cliccare su Colored—>color, e si aprirà un Editor dove sarà possibile settore il nostro colore (come su Photoshop per intenderci). Non solo colori piatti, ma anche sfumature, con la possibilità di salvare le nostre tinte preferite per poterle riutilizzare più avanti  o in un altro progetto.

Sulle altre opzioni non ci soffermiamo perché sono davvero intuitive.

E’ importante caricare immagini di qualità che però non rallentino il sito web per via del loro peso. Lo sapevi che le immagini prima di essere caricate su Revolution Slider vanno compresse?

Leggi il nostro articolo su come comprimere le immagini per un sito web.

 

Impostazioni Generali

Qui, il mio consiglio al momento è di “non toccare niente” perché normalmente funziona bene così com’è, quindi…

Miniatura

Una sorta di anteprima, di cui però diciamo la verità, non ci interessa granché, quindi passiamo.

Far scorrere animazione

Questo invece ci interessa molto, perché qui possiamo decidere che tipo di animazioni di base avranno le nostre slide, quando cambieranno una con l’altra sulla nostra pagina web. Di default è impostata su “fade”, ma possiamo cambiarla con l’effetto che ci piace. Basta cliccare sul nome effetto per avere già un anteprima di come si visualizzerà. Quindi qui il mio consiglio è di giocarci un po e di trovare l’effetto che ci soddisfa, con il consiglio di non “esagerare”, perchè le slide alla lunga possono stancare se troppo animate.

A destra trovate “animazione durata”, dove potete impostare la velocità di transizione.

Link & Seo

Qui possiamo per esempio far si che cliccando sulla slide ci si colleghi ad un link. Per settarlo è semplice, abilità “attiva link” imposta se aprirlo in un altra finestra o la stesse e immetti il link con https://etc.

Nav overwrite

Qui possiamo fare una cosa un po superflua, ma se siete amanti della perfezione allora vi sbizzarrirete. Potrete modificare lo stile per esempio delle frecce, quindi colore, dimensione. E dello sfondo.

Ok per oggi abbiamo finito. Continueremo da dove abbiamo lasciato nei prossimi giorni 🙂 A presto.

Per qualsiasi cosa noi siamo qui!

Realizzare una Slide fatta bene richiede tempo, ma quanto tempo ci vuole per realizzare un sito web dall’inizio alla fine?

Leggi il nostro articolo su quanto tempo ci vuole per realizzare un sito web e scopri tutti i passaggi per una perfetta pianificazione del lavoro..





 


 

 

 



Video Youtube – Risolvere il problema dei bordini bianchi.

Vi sarà capitato di volere usare un video direttamente in Revolution Slider. Come già saprete, il modo migliore per fare ciò è fare uno stream direttamente da Youtube, in modo da non sovraccaricare il nostro Data Base e rendere il caricamento dei video in Revolution slider più veloce e visibile su qualsiasi dispositivo.

Vi sarete accorti che quando andate a visualizzarlo all’interno del vostro sito, appaiono due bordini bianchi di pochi millimetri ai lati dello schermo! Una cosa fastidiosissima! Non preoccupatevi però, c’è una soluzione semplicissima per sistemare questo problemuccio.

Basterà copiare queste poche righe di codice direttamente nel CSS/personalizzato che Revolution Slider ci mette a disposizione.

1. Cliccate su IMPOSTAZIONI SLIDER.

2. ORA SCORRETE FINO IN FONDO ALLA PAGINA FINO A CSS/PERSONALIZZATO E INCOLLATE QUESTE RIGHE:

.rev_slider embed, .rev_slider iframe, .rev_slider object, .rev_slider video {
border: none !important;
}

3. ORA  SALVATE.

risolvere problema bordi bianchi video you tube revolution slider

FATTO! RIAVVIATE IL SITO E VEDRETE CHE ORA SARA’ TUTTO APPOSTO!

A PRESTO!

Siti web Milano | Realizzazione siti web Milano | Siti Internet Milano | Grafica Milano | Studio Grafico Milano |

16 Comments

  1. ivano ha detto:

    ciao vorrei chiederti una cosa poichè mi sembri molto competente su questo plugin. In pratica ho un sito di prova su cui sto cercando di cpaire come funziona questo plugin. In particolare sto tentando di avere un effetto di scrolling non tra una diapositiva e la seguente o precedente bensì con un’altra pagina. Tieni presente che sto progettando un sito onepage basato esclusivamente su rev slider quindi tutto diapositive. Sulla home ho dunque uno slider in cui ci sono varie slide che si susseguono, però come prevedevo si carica moolto lentamente con tempi biblici perchè ovviamente ci sono molte immagini, quindi ho pensato di fare uno slider per la home con una sola slide in modo che carichi velocemente e un menu sul frontend che mi colleghi alle altre pagine. Però (e qui viene la mia necessità) vorrei che ci fosse un effetto tipo smooth scroll insomma qualcosa di fluido (tipo http://steveroach.life ) in maniera tale che passando dalla home alle altre pagine non ci sia il solito caricamento brusco, ma come se fosse un’unico ambiente (spero di aver reso l’idea). così ho trovato questa documentazione https://www.themepunch.com/faq/smooth-scroll-to-other-page-content-5-0/ e ho seguito la procedura, però non ottengo il risultato in quanto la pagina di destinazione che adotterò, non riesco a farla comparire con lo slug (es. miosito.it/#pagina) perchè wp mi corregge automaticamente lo slug o il permalink dal beckend quando aggiorno riportandola a miosito.it/pagina, dove sbaglio secondo te? ti ringrazio

  2. Paolo Felici ha detto:

    Ho rivolto alcune domande alla redazione per un problema che ho riscontrato lavorando con slider revolution.
    Ebbene sono stato aiutato e ho risolto il problema in pochi minuti.
    Veramente efficiente. Ringrazio tutta la redazione.

    Buon lavoro

    Paolo

  3. Marco ha detto:

    Non vorrei approfittare della disponibilità, ma ho un problema che mi affligge. Su una slide a schermo pieno raffigurante una veduta aerea, vorrei posizionare degli hotspot pulsanti generati in html+css.
    Purtroppo non riesco assolutamente a posizionarli sul posto desiderato. Una volta salvato la resa “online” raffigura l’hotspot in una diversa posizione
    Grazie per l’eventuale aiuto

  4. Eliana ha detto:

    Salve,
    non ricordo come inserire una slide nuova nello slider revolution. L’ho creata ma non la visualizzo nella HP. Qualcuno può aiutarmi?
    Grazie,
    Eliana

  5. Fabio ha detto:

    Scusate ma, molto banalmente, io sto cercando di aggiungere una nuova slide ma l’immagine, sia in anteprima sia pubblicando, non si vede ma è tutta grigia come se non fosse stata caricata.
    Forse sto saltando qualche passaggio?

    Grazie mille.

  6. maurizio ha detto:

    Ciao vorrei sapere se è possibile esportare un animazione creata con revolution slider su file video (mov o altro) o su altro file gestibile per i social. Grazie

  7. Valentina ha detto:

    Buongiorno, vorrei sapere come aggiungere le slides nella homepage. Mi spiego meglio, io creo le slides, ma poi non so come inserirle da questo plugin nella pagina che mi interessa.
    Grazie mille.

  8. marco ha detto:

    Ciao e grazie!
    ho questo problema, ho creato la slide ed è funzionante in modo corretto su tutti i dispositivi tranne che per il tablet (in orizzontale) come devo modificare le dimensioni?