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.

Ciao, hai una domanda su questa lezione?

Iscriviti al sito o effettua il login


  1. Jean baptiste
    Jean baptiste dice:

    Gentile Staff Webipedia
    lavorando con WP ed Elementor, come posso far apparire una slide generata con Slide Revolution 6 su una pagina del mio sito che ha come tema Bulk Blog?
    Non usando AVADA, dal minuto 9.06 purtroppo non posso seguire le procedure indicate nel vostro tutorial. Vi chiedo quindi gentilmente quale sia la procedura alternativa.

    Grazie per la vostra preziosa attenzione.

    Rispondi
    • Jean baptiste
      Jean baptiste dice:

      Gentile Staff,
      credo di aver trovato la soluzione: ed è qui, indicata nella risposta di Gianluca, datata 27/5/2017, che si trova scorrendo questo stesso blog verso il basso. Ovvero, come lui scrive “ti basta inserire lo shortcode che trovi in basso nella tab Impostazioni Slider. Lo puoi aggiungere in qualsiasi punto del tema, sia nell’editor di testo che nei moduli del builder visivo”.
      Problema risolto :-)

    • Lorenzo
      Lorenzo dice:

      Ciao Marcello,
      hai selezionato l’immagine di background?
      Se una funzione richiede una determinato oggetto, come in questo caso l’immagine, è giusto che non sia disponibile fino a che non hai dato al sistema tale oggetto.

      Buona giornata

  2. elmax22
    elmax22 dice:

    Scusate, mi potete spiegare meglio il discorso fatto da Massimiliano Mottura?
    Blog come home page credo che significhi una home page che recupera tutti gli articoli del blog e che quindi è una pagina dinamica.
    Quando lui però dice pagina normale come la vostra con dentro gli articoli non riesco a capire molto la differenza perché se ad esempio un articolo viene scritto oggi immagino che comunque venga inserito nella pagina…
    Non mi è molto chiara questa differenza, chiedo cortesi lumi..
    Grazie

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Massimo
      come vedi dalla risposta che ho dato a Massimiliano non esiste una regola migliore di un’altra, dipende dal tipo di sito che stai realizzando.

      La questione che pone è se usare la pagina di recupero di articoli come home page oppure se inserirla nel menu come una qualsiasi altra pagina.

      Se il tuo progetto è un semplice blog, allora è plausibile usare la pagina di recupero degli articoli direttamente come home page, perché non ci saranno molti altri contenuti da visionare se non una pagina “chi siamo” e una per i contatti.

      Ma se il tuo è un sito più ampio e quella del blog è solo una delle sezioni, allora la cosa migliore da fare è creare una home page dedicata al progetto e al limite inserire in una sezione della stessa il recupero di alcuni articoli.

      Spero che ora ti sia più chiaro il concetto,
      Buona giornata

  3. massimiliano mottura
    massimiliano mottura dice:

    ok perfetto
    ma e meglio lasciare il Blog come home page ? ( piu’ indicizzato da google ?)
    oppure come voi in webipedia creare una pagina normale ( con dentro anche gli articoli )
    grazie

    Rispondi
    • Gianluca
      Gianluca dice:

      Non c’è una risposta giusta per questa domanda.
      In realtà è una scelta solo tua.

      Ci sono blog che partono con la lista degli articoli, altri che aggiungono uno slider in cima e magari qualche sezione prima degli articoli, altri che creano una home separata e una pagina dedicata al blog.

      Dipende dal tipo di sito che stai realizzando.

      Per l’indicizzazione non ti preoccupare, quello che conta per Google sono i contenuti dei tuoi articoli (e tutte le altre accortezze che analizziamo nel corso SEO), non la struttura delle tue pagine.

      Buona giornata

  4. massimiliano mottura
    massimiliano mottura dice:

    Ciao

    ho bisogno di sapere se potro’ mettere la slider show nella pagina home del tema etra . nel senso prima che inizi il blog ?
    al momento nel CATEGORY BUILDER dove si decide il layont del sito ( blog ) non mi fa nemmeno caricare dalla libreria ..
    sicuramente non saro’ capace

    E allora volevo mettere REVOLUTION SLIDER ma non in una pagina normale .. ma prima del blog in testa alla pagina
    e possibile questo e come ?
    ho anche appena comprato il corso su divi … ma di questo non trovo traccia

    grazie :)

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Massimiliano,
      Revolution Slider lo puoi utilizzare su qualunque tema.

      Per farlo ti basta inserire lo shortcode che trovi in basso nella tab Impostazioni Slider.

      Lo puoi aggiungere in qualsiasi punto del tema, sia nell’editor di testo che nei moduli del builder visivo.

      Tieni conto che però, ogni tema è diverso dall’altro. In Divi ad esempio, se vuoi inserire lo slider fullscreen che stia sopra a tutto il resto, devi inserire
      prima una Sezione a Larghezza Intera.

      Al suo interno inserisci il modulo Codice a Larghezza intera e, nel contenuto, incolla semplicemente lo shortcode.

      Buona giornata

  5. Luigi
    Luigi dice:

    Salve
    Quando premo sul pulsante foto di copertina per inserire una immagine non appare il pulsante per insrire l’immagine recuperandola da media, soluzione?
    Grazie
    Luigi

    Rispondi
    • Gianluca
      Gianluca dice:

      Ciao Luigi, mi sembra strano che non appaia il pulsante.

      Per inserire le immagini puoi farlo da due posti:
      O nelle impostazioni generali delle slide come spiegato al minuto 1:30 oppure all’interno delle singole slide come mostrato al minuto 10:00.

      Se non riesci a risolvere manda pure al supporto via mail la schermata di quello che vedi, così cerchiamo di capire dov’è il problema.

      Buona giornata

Non vuoi fare da solo?

Non vuoi fare da solo?

Per realizzare il tuo progetto o per risolvere qualsiasi problematica, rivolgiti al nostro Team di professionisti.

oppure chiamaci allo 02.9843140

You have Successfully Subscribed!

Pin It on Pinterest