Lavorare con le singole slide

Nella lezione precedente abbiamo determinato le impostazioni base del nostro slider.

Ora dobbiamo costruire le singole slide animate che lo comporranno.

Andiamo quindi sul pannello slides.

Come vedi si parte subito con una slide vuota e senza contenuti.

Nella parte superiore di questa pagina troviamo le impostazioni di base della singola slide, poi troviamo l’area di lavoro nella quale visualizzeremo tutti gli elementi e, più in basso, troviamo il pannello per inserire i vari livelli che comporranno la slide e le impostazioni di che daremo a ognuno.

Ma andiamo con ordine e procediamo con la prima sezione.

La prima cosa che possiamo fare è inserire la classica immagine di sfondo per la prima slide.

Se utilizzi lo slide a piena larghezza tieni presente che dovrai inserire delle immagini abbastanza grandi.

Il mio consiglio è di stare al di sopra di 1400 pixel di larghezza e di regolare l’altezza a seconda di come intendi dimensionare lo slide.

Cerca però di non esagerare, sopratutto per non gravare sul peso dell’immagine e limitati a larghezze inferiore a 2000 px. Lo standard mondiale attuale è di 1600.

Clicco su click to set e scelgo un’immagine che avevo precedentemente caricato nel pannello media.

Una volta impostata apparirà subito come background.

Ti faccio anche notare un’altra cosa: l’area di lavoro mostra la visualizzazione in tempo reale delle proporzioni del tuo slider.

Nel nostro esempio non abbiamo volutamente toccato nessuna impostazione, ma possiamo notare che l’area di lavoro è troppo alta rispetto alla larghezza, e io le voglio proporzionare meglio.

È una buona occasione per vedere come lavora il pannello dello slider settings.

Torno quindi nella tab precedente e come prima cosa scelgo uno slider a piena larghezza e poi abbasso il valore dell’altezza a 500 per farla più schiacciata.

Se torno sul pannello della slide si può vedere come l’area di lavoro si è riproporzionata in tempo reale.

Per aggiungere una seconda slide e creare effettivamente il primo slider clicca sul tasto + in alto.

Ora che si è creata una nuova slide posso inserire un’immagine di sfondo anche qui.

Chiaramente per il momento è uno slider banalissimo, composto solo da due immagini che scorrono, ma possiamo andare subito ad inserirlo in una pagina di prova per vedere l’effetto che fa.

In questo esempio sto usando il tema Enfold, ma sappi che il procedimento è lo stesso per tutti i temi avanzati.

In alcuni casi troverai già presente il modulo integrato di Layer Slider WP che ti consente di scegliere quale animazione mostrare.

In altri casi, se quindi non avessi un tema premium con questa possibilità ti basterà incollare lo shortcorde dello slider sulle pagine dove vuoi che appaia.

Lo puoi trovare sempre anche vicino al tasto di salvataggio in fondo alla pagina.

Con Enfold, come detto abbiamo il modulo già pronto, mi basterà aggiungerlo sopra a tutto il resto, selezionare lo slider homepage che ho appena creato e salvare la pagina.

Andiamo a vederne l’anteprima.

Come vedi, sono già impostate delle transizioni di default, ma vedremo subito come andare a modificarle.

Torniamo quindi nel nostro pannello delle singole slide e analizziamo tutte le opzioni che abbiamo a disposizione.

La prima l’abbiamo già vista, puoi impostare un’immagine di sfondo, determinare dimensioni e posizionamenti o aggiungere un semplice colore di sfondo.

La thumbnail serve se hai impostato la navigazione con le miniature, che abbiamo visto nelle tab delle slider settings.

Se non inserisci nulla il sistema prenderà come riferimento l’immagine di sfondo, ma puoi decidere di personalizzarla.

Con lo slide timing imposti la durata della slide in millisecondi, quindi se inserisci ogni secondo vale 1000, per ora lo possiamo lasciare su automatico.

Con transition determini il tipo di transizione che deve fare la slide mentre passa alla successiva.

Cliccandoci sopra si apre una finestra con moltissime transizione tra cui scegliere.

Sono suddivise con effetti 2d, 3d, effetti personalizzati che puoi creare in un secondo momento e a seconda dei tuoi gusti o effetti speciali che sono abilitati solo con l’attivazione del plugin mediante codice.

Il mio parere è che quelle di base sono più che sufficienti.

Gli effetti base 2d e 3d sono davvero tantissimi.

Andando su ognuno di essi si aprirà una piccola anteprima che ti da l’idea di come si comporteranno le slide.

Volendo puoi anche scegliere diversi effetti. Selezionane più di uno e seconda del numero che inserisci, layer slider Wp sceglierà casualmente quale mostrare.

Per il nostro esempio scegliamo qualcosa di semplice come il crossfading ma tu prenditi tutto il tempo necessario e valuta le transizioni che ti piacciono di più.

Una volta deciso puoi anche scegliere quanto deve durare la transizione, sempre in millisecondi.

Esistono anche delle opzioni aggiuntive che sono visualizzabili premendo il tasto apposito.

Permettono di lavorare in maniera molto più specifica sulla singola slide.

Nel caso ad esempio vuoi abilitare un link che vale per tutto lo slider ti basterà inserire la tua url.

Il ken burn è un effetto che in pratica crea un’animazione zoom sull’immagine di sfondo.

Puoi decidere di quanto si deve scalare l’immagine e se fare lo zoom verso l’esterno o verso l’interno.

Layer slider wp consente anche di creare slide che recuperano i contenuti direttamente dai tuoi post e questa opzione può essere molto valida se ad esempio hai un sito di notizie e vuoi enfatizzare le ultime notizie o alcune categorie di articoli pre determinate.

Premendo il tasto si apre un pannello in cui si filtrano i vari tipi di contenuto.

Puoi decidere di inserire Articoli, pagine, file media e altri tipi di contenuto che chiaramente possono variare a seconda del tema che usi e a seconda di come hai strutturato tag, categorie ecc.

Nella prima colonna quindi scegli il tipo di contenuto, nella seconda filtri una o più categorie e nella terza scegli i tag.

Sotto puoi vedere in tempo reale il tipo di ricerca che ne deriva e stabilisci come recuperarli, se in ordine di pubblicazione, di autore, numero di commenti e così via.

Gli effetti di parallasse permettono di animare gli elementi a seconda del movimento del mouse o dello scroll sulla pagina.

Vediamo un esempio di come funziona con un slide presa da quelle gratuite sul template store.

Tutte le regolazioni sugli effetti di parallasse di ogni livello li controlli da questo pannello.

Per capire bene come funziona ti consiglio di scaricare una di queste versioni demo e analizzare come sono stati impostati i parametri.

Passiamo ora all’area di lavoro e iniziamo ad inserire i nostri layer.

Questa è la parte più creativa di Layer Slider Wp, grazie alla quale, come già detto, inserendo diversi livelli con differenti elementi all’interno, potrai farli interagire fra loro e creare animazioni anche molto complesse.

I livelli vengono disposti in questa colonna uno sotto l’altro.

Il layer che sta sopra a tutti gli altri sarà quello in primo piano, i layer sottostanti verranno coperti da quelli che li precedono.

Nel caso tu avessi moltissimi livelli ti consiglio di rinominarli uno ad uno per non sprecare tempo a cercarli durante le lavorazioni future.

I livelli possono essere aggiunti semplicemente cliccando su Add New, possono essere trascinati per essere disposti in gerarchie differenti, possono essere resi invisibili nel caso ti dessero fastidio durante le lavorazioni e possono essere bloccati per proteggerli da eventuali errori involontari.

Ogni livello ha moltissime opzioni da configurare.

Innanzitutto puoi anche realizzare dei layer che saranno visibili sono in determinate circostanze.

Come già detto è importante curare anche gli aspetti mobile dello slider.

In altro nella tab content troverai l’icona che permette di abilitare o disabilitare la visualizzazione di questo particolare livello a seconda che ci si trovi su desktop tablet o mobile.

Poi determini il tipo di contenuto del livello.

Può essere un’immagine, un testo, un codice html un video o audio o, come visto prima il contenuto dinamico recuperato dai post.

Ovviamente ognuno di essi ha differenti impostazioni.

Nel caso dell’immagine dovrai solo sceglierla dal pannello media o caricarne una nuova.

Facciamo una prova inserendo un’immagine a lato della nostra slide.

Una volta inserita la puoi posizionare dove preferisci, dando o delle impostazioni fisse in pixel o, per slide responsive, meglio se definite in percentuale.

I testi li aggiungi semplicemente scrivendoli nel box e poi puoi decidere se deve essere un paragrafo normale o se deve essere un titolo.

Dei video ci occuperemo in una lezione successiva, poi abbiamo i contenuti html e quelli dinamici.

Per il nostro esempio partiamo con qualcosa di semplice come un titolo introduttivo, inserisco un titolo fittizio in H1.

Appena inserito apparirà nell’area di lavoro e posso spostarlo nella posizione che preferisco.

Chiaramente posso anche andare a intervenire sull’aspetto di questo titolo.

In questo momento layer slider ha fatto riferimento alle impostazioni di base del tema per determinare dimensioni, colore carattere ecc, ma dalla tab Styles posso intervenire con impostazioni più adatte per uno slider animato.

Clicco quindi su styles e posso vedere come sia possibile determinare la posizione del layer in modo preciso.

Quando ti sposti manualmente infatti non puoi avere il pieno controllo della posizione, sopratutto se vuoi lavorare con diverse slide che devono essere omogenee tra loro.

Anche in questo caso si può scegliere sia di inserire una misura in percentuale che in pixel.

Ora che ho messo il 20%, significa che questo titolo si troverà spostato dal margine sinistro del 20% rispetto alla larghezza totale della slide.

Torna utile se hai scelto uno slider responsive, in quanto, a prescindere dalla larghezza del monitor, la posizione del titolo manterrà sempre la sua proporzione.

Quello che ci interessa maggiormente per il nostro esempio è di scegliere un carattere differente e cambiare colore e dimensioni.

Per il carattere clicco sulla prima tab e mi si aprono già delle opzioni tra cui scegliere, in una lezione successiva vedremo anche come importare tutti i google font che sono disponibili in rete.

In più trovi tutte le classiche opzioni di un testo come interlinea, spessore del carattere, stile, decorazione e così via.

Imposto le altre caratteristiche il colore e come vedi puoi anche scegliere quali sono le dimensioni minime che deve avere il font sia da desktop che da mobile.

Nelle other settings puoi anche inserire uno sfondo, che magari può essere utile per farlo risaltare maggiormente.

Facciamo subito una prova e vediamo l’effetto che otteniamo.

Con i parametri determino la sua opacità, se deve avere gli angoli arrotondati e posso anche aggiungere altri effetti visivi (ma sempre per la versione convalidata del plugin).

Se lo sfondo inserito risulta troppo attaccato al testo, posso intervenire sul padding mettendo lo stesso valore per ogni lato.

Poi, ad esempio, posso inserire un bordo aggiungendo un codice come quello suggerito.

Per il nostro esempio lasciamo il testo bianco semplice, quindi vado a eliminare tutte le impostazioni.

Una volta completate le operazioni ricordati sempre di salvare.

Se hai individuato uno stile che vuoi riportare in futuro anche su altre slide puoi anche copiare le impostazioni che hai appena assegnato e incollarle su un altro contenuto testuale.

Ora che abbiamo inserito il titolo possiamo lavorare sulle transizioni che deve eseguire.

La tab transition è quella dedicata alle animazioni che deve rispettare questo livello.

Prima infatti abbiamo visto le transizioni dell’intera slide verso la successiva, ma le transizioni possono essere attribuite anche a tutti i layer presenti.

A seconda del tipo di oggetto cambieranno anche le transizioni a disposizione, ogni tipo di contenuto ha le proprie opzioni.

Quelle di base sono la transazione in apertura e quella di chiusura.

In questo esempio vedi che sono abilitate solo queste due ma ne puoi aggiungere anche altre.

Ora stiamo lavorando sulla transizione iniziale, per ogni layer puoi definire la posizione che avrà al primo stadio dell’animazione definita dai valori di Offset.

OffsetX che indica i movimenti orizzontali, Offset Y controlla quelli in verticale.

Puoi inserire a mano dei valori o puoi scegliere tra le opzioni pre-configurate che appaiono cliccando all’interno del box.

Nel nostro esempio scegliamo un movimento da sinistra verso destra, ma ti invito a provare anche le altre opzioni.

Con Scale puoi decidere se l’elemento si deve ingrandire: nel tooltip vediamo che 1 mantiene le dimensioni iniziali, 2, le raddoppia, 0.5 le dimezza.

Inserisci il valore che vuoi oppure lascia decidere a Layer Slider casualmente con random.

Per finire, se vuoi che abbia delle dimensioni fisse utilizza gli utili due campi.

Oltre a posizione e dimensione si può intervenire anche su rotazioni e inclinazioni e lo si fa dal pannello a fianco.

Anche in questo caso scegli in base a valori fissi o secondo i suggerimenti che ti da il plugin.

Infine, nel timing and transform imposti quando il livello deve apparire e quanto deve durare la transizione.

Devi inserire anche in questo caso valori in millisecondi, quindi se inserisci 1000 come valore iniziale, il livello apparirà dopo 1 secondo dall’inizio della slide.

Nel campo easing invece puoi decidere gli effetti di entrata e uscita dell’oggetto.

Non è semplice spiegare a parole le differenze tra le varie opzioni ma si parla proprio di dettagli.

Se clicchi sul link a fianco andrai su una pagina che le mostra tutte e che ti aiuterà a capire come si comporterà il livello a seconda di cose scegli.

Vediamo ora come controllare il nostro lavoro.

Per visualizzare come cambiano le diverse impostazioni che inserisci non serve andare sulla pagina online.

Nella parte superiore dell’area di lavoro puoi attivare la preview dell’intera slide o anche del singolo layer.

Le altre transizioni le regoli allo stesso modo.

Puoi inserire un’animazione che interviene a metà tra quella di entrata e quella in uscita, puoi stabilire un’animazione al passaggio del mouse, oppure puoi abilitare gli effetti di parallasse.

Nel caso dei testi puoi anche attivare una transizione per le singole lettere.

Andiamo in opening text transition e abilitiamo anche questa.

Selezioniamo una delle opzioni e osserviamone il risultato in preview.

Come vedi serve solamente fare qualche esperimento provando tutte le possibilità fino a trovare quella che ti piace maggiormente.

L’ultima tab che ti può interessare è quella che riguarda i link e gli attributi.

Ti basterà inserire la url della pagina di destinazione e questo livello diventerà un tasto linkabile.

Infine abbiamo il pop up editor, che semplicemente fa aprire una finestra di pop up con tutte le impostazioni che abbiamo appena visto.

Ti può essere utile se vuoi lavorare più comodamente con un pannello mobile.

Andiamo avanti con la costruzione dello slide, aggiungendo magari un testo sotto al titolo che abbiamo inserito.

Se voglio creare un pacchetto mi basta abilitare l’opzione word wrap e scegliere la dimensione del box che lo deve contenere.

Poi agisco sulle transizione e decido di farlo entrare 1 secondo dopo il titolo.

Per terminare la mia slide aggiungiamo un semplice bottone.

Per farlo hai due strade, o lo costruisci manualmente inserendo un semplice testo con un background, bordi ecc... oppure puoi anche utilizzare il contenuto html e aggiungere uno shorcode del tema.

Per comodità scegliamo la seconda opzione.

Aggiungo quindi un livello html e incollo uno shortcode che avevo creato con il layout builder di Enfold.

È chiaro che a seconda del tema che hai lo shortcode potrebbe essere diverso.

In questo caso nell’anteprima non verrà mostrato direttamente il tasto, ma resterà lo shortcode.

Quindi per avere una visualizzazione corretta dello slider salviamo tutto e andiamo a vederlo online.

Molto bene, direi che la nostra prima slide può ritenersi conclusa.

Chiaramente questo è solo un semplice esempio ma con layer slider WP hai capito come puoi inserire un numero illimitato di livelli e lavorare animandoli singolarmente.

Gli effetti che puoi realizzare sono davvero infiniti e il mio miglior consiglio resta sempre quello di sperimentare in prima persona.

Ci vediamo nella prossima lezione.