Creare una slide con Revolution Slider

In questa lezione passeremo alla fase operativa e imposteremo uno slider partendo da zero.

Clicchiamo quindi sul menu slide editor e, come vedi, si apre il pannello per la creazione delle singole slide.

Il primo riquadro in azzurro permette di inserire degli elementi che rimarranno sempre presenti in tutte le slide che realizzerai.

Se ad esempio decidi di posizionare sempre il tuo logo in alto a destra puoi aggiungerlo qui e verrà riproposto in tutte le slide successive.

Stesso discorso vale, se, ad esempio, vuoi utilizzare una sola immagine di sfondo.

Nel nostro caso, vogliamo fare delle slide tutte diverse e quindi procediamo cliccando sulla prima a fianco, come vedi il pannello non cambia.

Per prima cosa possiamo nominare la prima slide per poterla riconoscere quando magari ne avremo fatte diverse, poi come vedi una volta che l’avremo realizzata potremo duplicarla, salvarla come template o eliminarla.

In più, con i tasti che appaiono all’interno del riquadro possiamo decidere se renderla visibile o meno.

Questo può tornare molto utile in caso abbiamo un’attività che propone periodicamente un’offerta o ad esempio, potresti creare una slide per gli auguri natalizi che abiliti solo durante il periodo delle festività.

Passiamo ora al menu sottostante.

Nella prima tab gestiamo lo sfondo della slide.

Di default è selezionato lo sfondo trasparente, ma come vedi, puoi scegliere di:

• Utilizzare un’immagine
• Usare un’immagine presa da una url esterna al tuo sito.
• Inserire un colore a tinta unita.
• Usare un video.

Nel nostro caso vogliamo inserire una bella immagine quindi selezioniamo Main Background image e ne carichiamo una.

Fai bene attenzione alla dimensione dell’immagine che carichi, sopratutto in caso di slider a piena pagina o a massima larghezza.

Generalmente ti consiglio di scegliere immagini larghe minimo 1200 pixel per un massimo di 2000.

Come altezza valuta tu a seconda della proporzione visiva che vuoi dare all’immagine.

Un’altra raccomandazione che ti faccio è di ottimizzarle per il web in modo da ridurne il peso senza perdere la qualità.

Sul nostro blog potrai trovare un articolo che parla proprio di questo argomento, leggilo con attenzione perché il peso delle immagini è uno dei parametri che analizza Google per premiare o meno una pagina web e, come visto nella lezione precedente sarà un parametro che influenzerà le performance di tutto lo slider.

Come vedi la nostra immagine si è inserita e il plugin ti fornisce subito un’anteprima visiva dell’area di lavoro.

Fatto questo lascia pure le impostazioni che vedi in source settings e decidi se abilitare o meno gli effetti di parallasse e di ken burns che in pratica crea un leggero effetto di ingrandimento dell’immagine, ma questi due parametri li vedremo successivamente in un esempio pratico.

Nelle impostazioni generali puoi scegliere se dare alla slide dei parametri diversi da quelli che abbiamo impostato nella precedente lezione e che riguardano tutte le slide che creerai in questo slider come:

• Il tempo di durata,
• Lo stato di plubblicazione,
• Se deve essere visibile in uno specifico lasso di tempo e così via.

La miniatura serve, in caso decici di utilizzare la navigazione con le thumb, da qui potrai caricare un’immagine che fungerà da anteprima.

Nella sezione slide animation potrai sbizzarrirti a scegliere il tipo di transizione che vuoi dare alla slide.

Ci sono decine di possibilità tra cui scegliere, puoi anche selezionarne più di una e decidere l’ordine o la scelta casuale tra quelle selezionate.

In questo esempio scegliamo il classico fade ma ti invito davvero a divertirti con tutte le possibilità che il plugin ti mette a disposizione.

Le altre tab servono a inserire un link generale all’intera slide o per modificare le impostazioni inserite nello slider generale che riguardano le impostazioni grafiche, ma in linea generale non ti serviranno mai.

A questo punto possiamo lavorare sugli elementi che comporranno la nostra slide.

Per aggiungere un elemento, dovrai cliccare sul tasto Add Layer, ossia aggiungi un livello.

Apparirà un menu dal quale potrai selezionare il tipo di elemento da inserire, un testo, un’immagine, un video, un bottone, un elemento grafico.

Noi vogliamo inserire un bel titolo che attiri l’attenzione, e faremo un esempio in caso volessimo promuovere i nostri video corsi, quindi scegliamo l’elemento testo.

A questo punto, il testo si posizionerà all’interno della slide e possiamo modificarlo.

Nella parte superiore del menu possiamo gestire le impostazioni del livello, modificandolo, ingrandendolo eliminandolo, duplicandolo, rendendolo o meno visibile e bloccandolo in caso ci serva lavorare nelle sue vicinanze.

Ancora sopra possiamo gestire lo stile e le azioni che fanno parte del tipo di elemento che stiamo modificando.

Nel nostro caso, essendo un testo, abbiamo alcune impostazioni predefinite tra cui scegliere che ti invito a provare, oppure puoi lavorare personalizzando a piacimento il contenuto scegliendo il tipo di font, le dimensioni e la spaziatura, l’allineamento, e la posizione all’interno della griglia.

Anche io questo caso puoi lavorare manualmente, semplicemente trascinando l’elemento oppure utilizzando i valori numerici, che ti assicureranno maggiore precisione.

In caso ci fossero testi troppo lunghi, dovrai utilizzare il tag break per andare a capo, perché il campo è gestibile solo con l’html.

Procedendo con il menu possiamo definire il tipo di animazione che il nostro testo deve avere.

Il primo rigo identifica l’animazione in entrata, il secondo l’animazione in uscita.

Come puoi vedere, le possibilità di scelta sono infinite e puoi sicuramente trovare quella che stai cercando.

Una volta che hai deciso il tipo di animazione, puoi scegliere il modo in cui l’animazione deve iniziare, io di solito ne scelgo una che renda le transizioni morbide, ma anche per questo aspetto hai a disposizione davvero moltissime scelte.

Sotto definisci il tempo di durata della transizione, gli altri parametri puoi anche lasciarli intatti, ma in caso scegli qualche animazione particolare che ad esempio lavora con le singole lettere, puoi fare qualche tentativo di modifica per valutare il risultato finale.

Nella tab del loop puoi gestire gli elementi che vuoi che compiano un azione in modo ripetitivo, come ad esempio una palla che rimbalza ininterrottamente all’interno della slide.

Nella successiva gestisci la visibilità dell’elemento nei vari device.

A questo proposito ti consiglio di controllare sempre come appare una slide anche dal punto di vista mobile, sopratutto in caso ci siano parecchi elementi inseriti al suo interno.

Con questa funzione potrai correggere ogni visuale inserire ad esempio degli elementi visibili sono in specifiche condizioni.

La tab behaviour controlla l’aspetto responsive, e ti consiglio di lasciare le impostazioni di base.

Con le azioni invece puoi stabilire cosa deve succedere quando si interagisce con l’elemento che stai modificando, quindi, che cosa deve succedere al click o quando si passa sopra col mouse.

Si possono fare eseguire diverse azioni, come inserire un link, cambiare slide, stopparla o farla partire e così via.

Gli attributi servono per associare ID o classi specifiche all’elemento ma direi che possiamo comodamente sorvolare la questione, mentre è arrivato il momento di provare gli effetti di parallasse faranno animare l’oggetto a seconda del movimento del mouse.

Per fare una prova impostiamo un valore e andiamo a vedere l’anteprima della slide.

Come vedi in alto a destra appare sempre il menu per salvare, gestire i css, tornare alle impostazioni generali o visualizzare un’anteprima.

Dal pannello anteprima puoi anche controllare come appare da mobile, ma il mio consiglio è quello di inserire comunque la slide in una pagina del tuo sito e di vederla direttamente all’opera nella sua destinazione finale.

Quello che dobbiamo fare quindi è andare ad inserire la slide appena creata nella nostra pagina.

Io in questo caso sto utilizzando il tema Avada, ma se hai avuto modo di seguire il nostro corso sui temi avanzati avrai capito che tutti i temi premium presentano bene o male le stesse caratteristiche di configurazione.

Con Avada inserisco il blocco relativo a Revolution Slider, scelgo quella che abbiamo appena creato, salvo e vado a controllare se il mio slider si è posizionato correttamente.

Come vedi abbiamo la nostra prima slide visibile a tutta larghezza come avevamo impostato.

Se volessimo ad esempio vedere come si visualizza con le dimensioni automatiche basterà tornare al pannello di impostazione slide e scegliere quella relativa, aggiornando la pagina vedrai subito il risultato.

Anche in questa visuale, puoi controllare come si vedono gli elementi sui vari device rimpicciolendo la finestra del browser.

Torniamo alle impostazioni a piena grandezza e proseguiamo con l’inserimento di qualche elemento.

Possiamo ad esempio inserire un’icona per ogni video corso che presentiamo quindi clicchiamo di nuovo su add layer e scegliamo la nostra immagine.

Io per comodità ho già importato tutte quelle che mi interessa utilizzare e quindi sono già presenti nella libreria media.

La posiziono e ci aggiungo un titolo.

A questo punto scelgo il tipo di transizione, supponiamo che voglio farla entrare da sinistra, scelgo il livello di easing, (per fare una animazione armonica ti consiglio di sceglierne solo due o tre tipi che ripeti per tutti gli elementi) e la applico uguale, sia al titolo che all’icona.

Faccio la stessa cosa per gli altri pacchetti promozionali, duplicando i primi elementi.

Ora, voglio aggiungere una call to action, ossia un tasto che inviti a visitare la pagina dei video corsi.

Torno su add layer, scelgo un bottone e lo personalizzo come desidero.

Si aprirà un pannello con diversi elementi da modificare, il colore di base, ad esempio giallo e il suo livello di opacità: 1 sarà completamente opaco mentre, avvicinandosi allo zero sarà sempre più trasparente.

Scelgo il colore che assumerà il tasto al passaggio del mouse, inserisco il mio testo e scelgo il tipo di tasto, ad esempio quello con l’icona che appare.

Ora il mio bottone è stato aggiunto all’area di lavoro.

Se volessi modificarlo nuovamente puoi cliccare sulla freccia delle impostazioni avanzate.

In questo modo riuscirai a correggere i tuoi elementi fino al minimo dettaglio, io mi sono accorto che non mi piacciono i bordi tondi e quindi vado a smussare per esempio gli angoli del bottone.

Bene, sono soddisfatto del risultato e posso salvare il mio slider.

Ora voglio dare enfasi al messaggio con un’immagine che attiri l’attenzione.

Inserisco una immagine png trasparente che mi sono preparato e scelgo nuovamente il tipo di transizione.

Visto che si troverà dalla parte opposta rispetto al testo, questa volta scelgo di farla entrare da destra.

Ora posso sbizzarrirmi inserendo altri elementi comunicativi come un cubo che cade dall’alto, e un richiamo all’offerta promozionale.

Per quest’ultima posso provare l’effetto loop in modo che il mio testo continui a muoversi attirando l’attenzione sullo sconto.

Terminate le operazioni salvo di nuovo.

Come vedi aggiornando il nostro slider possiamo apprezzare che ha già un’aspetto migliore.