Creare un nuovo slider

In questa lezione imparerai a creare un nuovo slider, attraverso delle aree di impostazioni specifiche.

Come già anticipato ci sono due strade possibili per costruire uno slide, o selezioni uno tra quelli già importabili e procedi alle modifiche oppure si parte da zero con uno slider vuoto.

Scegliamo questa seconda opzione in modo da farti capire meglio il pannello di controllo e gestione di Layer Slider WP.

Clicchiamo quindi su Add New e la prima cosa che dobbiamo fare è dare un nome allo slide che stiamo creando, io inserisco Homepage.

Una volta premuto il tasto di conferma verrai subito rimandato alla sezione dei settings generali dello slide.

Come vedi è una nuova schermata dal titolo Editing slider che indica proprio che stiamo lavorando su quello appena creato.

A fianco c’è un tasto per tornare alla lista precedente.

Ogni slider è controllato con i settaggi generali che imposti su questa pagina e che valgono per tutte le slide che comporranno la tua presentazione.

Voglio ricordare infatti che uno slider non è nient’altro che la combinazione di diversi slide, ognuno indipendente tra loro, ma che fanno capo alle medesime impostazioni generali che stiamo per vedere.

Queste slide le controllerai singolarmente nella seconda voce del menu.

Il terzo tasto riguarda gli eventi callback per aggiungere delle azioni lato programmazione, ma si tratta di una funzionalità avanzata di cui difficilmente avrai bisogno.

Vediamo ora di analizzare le singole tab presenti nei settaggi generali.

Per ora facciamo una panoramica generale, poi ci torneremo per vederle all’opera quando avremo terminato lo slider che realizzeremo in questo corso.

La prima tab che si apre è quella inerente al layout dello slide, ma come puoi notare, è presente anche una tab precedente che si chiama publish.

Una volta che avrai creato la tua composizione infatti, potrai decidere di pubblicarla in una data prestabilita.

Questa funzione potrebbe essere utile nei casi in cui vuoi far visualizzare lo slider per eventi specifici come ad esempio per fare gli auguri di buone feste ai tuoi utenti o se hai schedulato il lancio di un nuovo prodotto che si deve accompagnare ad una nuova presentazione.

Torniamo nella tab del layout, hai 4 opzioni tra cui scegliere.

1. La prima è fixed size e serve se vuoi uno slide con immagini di larghezza uguale al layout del tuo sito
2. La seconda è quella selezionata di default perché la più comunemente utilizzata. È lo slide responsive che adatterà il contenuto alla dimensione dello schermo su cui viene visualizzato.
3. La terza opzione è Full width ossia a piena larghezza. Lo slide si disporrà occupando tutta la pagina ma con un’altezza predefinita.
4. L’ultima opzione è Full size che in pratica prende tutta la grandezza del monitor.

Più sotto stabilisci le dimensioni di larghezza e altezza dello slider e puoi anche inserire una valore in percentuale che avrà effetto sulla larghezza degli slider responsive.

In questa prima fase ti consiglio di lasciarle impostate come di default perché sono già ottimizzate per la maggior parte dei dispositivi.

Limitarti a scegliere il tipo di layout tra i 4 proposti cambiando eventualmente l’altezza generale.

La tab successiva è dedicata alla visualizzazione mobile.

Spesso infatti, le slide molto elaborate non rendono bene se viste ad esempio con gli smartphone in verticale.

Questa opzione ti consente di nascondere lo slider da dispositivi mobile.

La funzione hide under e hide over può essere utile se non vuoi nascondere il tuo slide da smartphone, ma vuoi tenere sotto controllo quando mostrarlo.

Potresti per esempio creare uno slide ottimizzato per mobile e uno per desktop, inserirli entrambi nella tua pagina, ma mostrarli a misure alternate.

Per esempio al primo slide, quello per desktop, inserisci Hide Under a 769 (px), che significa nascondimelo da 769 compreso in giù, mentre per lo slider mobile inserisci Hide Hover 768, che lo nasconde da 768 compreso in su.

Il risultato sarà che, da iPad verticale a misure più basse, sarà mostrato lo slide ottimizzato per dispositivi mobili, mentre con device di misure maggiori quello per desktop.

Nella tab slideshow controlli tutti i parametri dello slider nel caso fosse composto appunto da più slide.

Puoi decidere quale sarà lo slide che deve partire per primo, puoi impostare la funzione di autoplay e cosa deve succedere quando l’utente passa col mouse sopra l’animazione.

Di default verrà messo in pausa nell’esatto momento in cui si compie l’azione ma puoi anche impedire che il video si stoppi o lasciare che lo slide termini le sue transizioni fermandosi appena dopo.

Più sotto scegli se abilitare o meno la navigazione con tastiera (utilizzando quindi le frecce avanti e indietro) o la navigazione con controlli touch come da mobile.

Se registri il plugin con il suo codice di attivazione noterai che verranno abilitate anche delle funzioni aggiuntive che sono identificate con la stellina.

In questo caso abbiamo la possibilità di far partire lo slide dopo che l’utente avvia lo scroll del monitor

Se vuoi che il tuo slider non vada avanti a girare all’infinito ma si fermi dopo un determinato numero di cicli, inserisci il numero di loop che deve eseguire.

Infine, se hai una serie di slide che non seguono un filo logico prestabilito puoi anche dare un po più di dinamismo allo slider abilitando lo shuffle mode che in pratica mostrerà le singole slide in sequenza casuale.

La tab appearance ti permette ti stabilire l’aspetto di base che dovranno avere le slide.

La skin puoi lasciarla full width come di default, con la seconda opzione verrano nascosti i tasti di navigazione.

Da cui puoi aggiungere un css personalizzato come in questo caso che vediamo è stato impostato con il margine sotto uguale a 0 pixel.

Se le tue slide devono avere le stesse caratteristiche, come ad esempio un colore di sfondo sempre uguale o un’immagine di background fissa non serve inserirli ogni volta in ogni slide, ma ti sarà comodo stabilire queste impostazioni da questo pannello.

Tutte le slide che creerai manterranno queste impostazioni di base.

Nella navigation area determini le opzioni di navigazione.

Puoi mostrare o nascondere i bottoni avanti e indietro dello slide sia allo stato normale che al passaggio del mouse.

Volendo puoi anche mostrare il timer delle singole slide.

Puoi scegliere tra il bar timer che mostra una piccola riga orizzontale nella parte superiore, il circle timer che mostra un piccolo cerchietto nell’angolo in alto a destra e lo slidebar che aggiunge il controllo nella parte bassa.

La thumbnail navigation è sempre un’opzione di navigazione, è quella che mostra una piccola anteprima della slide successiva.

Dal seguente pannello decidi se abilitare o disabilitare la funzione all’hover del mouse o se lasciarla sempre visibile.

Sotto stabilisci la grandezza delle miniature e la loro opacità.

La tab dedicata ai video ha poche opzioni da scegliere. La prima permette di far partire i video in automatico, le altre riguardo la possibilità di mettere in pausa il filmato e la qualità del filmato caricato da youtube.

Nella tab Yourlogo puoi aggiungere il tuo logo in una posizione fissa all’interno di ogni slide.

Clicca sul tasto e selezionalo dal pannello media, poi più in basso determini la posizione esatta di dove deve apparire nello slider e se deve essere linkato a una pagina particolare.

La tab dedicata alle opzioni controlla il background generale dello slide e gli effetti di parallasse.

Normalmente lascio tutto come impostato, ma tu puoi tranquillamente fare i tuoi esperimenti appena avrai completato il tuo slider animato.

Nell’ultima tab troviamo delle opzioni miste.

Use relative url ti servirà abilitarla se stai utilizzando il plugin su un sito di test e se in futuro dovrai trasferire WordPress su un altro dominio.

La seconda opzione lasciala attiva perché esegue un controllo sui display retina e regola il ridimensionamento delle immagini a seconda del device.

Infine puoi aggiungere un’immagine di preview del tuo slider che ti aiuterà a distinguerlo se ne realizzerai più di uno e la ritroverai nel pannello All slider.

Prima di terminare questa lezione faccio presente che c’è anche un tastino per mostrare le opzioni avanzate.

Abilitandole appariranno, solo nelle tab in cui c’è la possibilità altre opzioni identificate con una piccola bandierina.

Prova a fare un check sulle impostazioni che vengono aggiunte nelle varie tab.

Una volta che avrai scelto le opzioni base, premi su save changes e le impostazioni verranno salvate.

Noi ci vediamo nella prossima lezione dove inseriremo i primi elementi nella slide.