Slider Revolution: la guida definitiva

Slider Revolution è letteralmente uno dei plugin di WordPress più popolari oggi. Con oltre 400mila vendite e una valutazione media di 4,75 il plugin ha dimostrato la sua efficacia e grandezza.

Revolution Slider: cosa rende il plugin così eccezionale

Slider Revolution è stato sviluppato da Themepunch. Questo plugin è un builder per la creazione di contenuti ricchi e dinamici per le pagine web. L'enfasi è sulla "dinamica", in quanto consente di creare diapositive elettrizzanti aggiungendo movimento alle pagine.

Il plugin viene fornito con un builder facile da usare e tonnellate di opzioni. Pacchetti di impostazioni ben elaborati consentono all'utente di regolare ogni singolo dettaglio dello slider e di lavorare con tipi di contenuto assolutamente diversi. Gli slider possono essere creati per post separati, per le pagine intere e le loro piccole parti. Per essere più precisi con il plugin puoi creare:

• cursori e caroselli di immagini
• cursori dei post in primo piano
• feed dei social media
• gallerie multimediali
• blocchi di eroi e prime pagine

Motivi per cui dovresti usare Slider Revolution con il tuo sito web

Non puoi sbagliare con Slider Revolution. Un plug-in completo con strumenti intuitivi è una soluzione perfetta per creare bellissimi slider, ed ecco i motivi.

Plugin in bundle

Oggi quasi tutti i temi WordPress sono dotati di un plug-in Slider Revolution. Di solito, il pacchetto del tema include la versione gratuita del plugin. Il plug-in in bundle è limitato a funzionalità di base, ma è comunque molto conveniente ottenere il tema insieme allo slider builder.

Tuttavia, se desideri accedere a molte delle funzionalità del plug-in, hai la possibilità di acquistare il plug-in indipendente. La licenza normale ti costerà $ 29 e puoi ottenerla nel mercato Codecanyon.

Per la licenza estesa, dovrai pagare circa $ 150 e ottenere un anno di supporto tecnico solo per 9 $.

Sì, il plug-in può costarti dei soldi, ma puoi comunque creare fantastici slider anche con la normale licenza del plug-in.

Modelli

Il fantastico plug-in non solo ti impressionerà con gli strumenti e le funzionalità, ma ha anche una raccolta di layout predefiniti di bell'aspetto. Una meravigliosa raccolta di modelli predefiniti e la libreria di oggetti multimediali gratuiti che puoi utilizzare sulla tua diapositiva semplificheranno e velocizzeranno la creazione della diapositiva. Puoi selezionare il modello per qualsiasi tuo progetto e invece di creare uno slider da zero puoi risparmiare tempo e andare avanti con il layout pre-costruito.

Importa semplicemente il modello che hai scelto e inizia subito a creare.

Oltre a questo, avrai accesso alla grande libreria gratuita di diversi oggetti come icone dei caratteri, immagini di sfondo, oggetti PNG trasparenti, SVG e altri. Puoi usarli e inserirli facilmente nelle tue diapositive.

Editor visivo

Slider Revolution viene fornito con un fantastico editor WYSIWYG che rende molto semplice creare e modificare modelli di slider. Molti proprietari di siti Web trovano difficile scrivere codici complessi o assumere un team separato per tale attività. Grazie all'editor di scorrimento puoi risparmiare tempo e goderti la funzione di trascinamento della selezione per creare diapositive eccezionali.

Il plug-in slider ti consente di essere più creativo con gli slider che crei e di presentarli facilmente sul tuo sito web. Avrai tantissime opzioni personalizzate come la creazione di una posizione del cursore personalizzata, la scelta del ritardo del cursore, l'aggiunta di transizioni, l'aggiunta di livelli multimediali e così via. questo può essere fatto in pochissimo tempo utilizzando l'elenco a discesa. Inoltre, il plug-in ha molte funzionalità di navigazione che ti consentono di modificare lo stile di navigazione e aggiungere frecce, punti elenco, schede e miniature.

Prestazioni ad alta velocità

Slider Revolution è ben codificato per caricare velocemente. Tutti gli aspetti dei dispositivi di scorrimento sono ottimizzati e utilizza opzioni di debug avanzate per risolvere eventuali problemi, carica automaticamente i file principali e si adatta alle funzionalità utilizzate. Utilizza anche il caricamento lento intelligente ed è ottimizzato per il SEO.

Layout reattivi

Uno dei maggiori problemi che incontrano molti sviluppatori web è che gli slider mancano di reattività. Di conseguenza, questi cursori non funzionano bene su piccoli dispositivi o non vengono visualizzati affatto. La reattività è una componente essenziale dell'esperienza dell'utente. Con l'enorme quantità di traffico proveniente dai cellulari, sarà un peccato che i tuoi slider non funzionino bene su altri dispositivi.

Slider Revolution non è solo un semplice slider. Il plug-in è pronto per essere reattivo, quindi qualunque diapositiva crei, puoi essere sicuro che saranno ottimizzate per qualsiasi dispositivo su cui verranno utilizzate.

Slider Revolution si è assicurata di impostare i punti di interruzione reattivi per ogni dispositivo di scorrimento, rendendo qualsiasi design fantastico su dispositivi diversi e schermi di piccole dimensioni. Qualunque opzione tu scelga, a scorrimento singolo, a carosello o standard, puoi essere certo che sia perfetta su qualsiasi dispositivo.

Opzioni di personalizzazione

Un altro vantaggio del plug-in Slider Revolution sono le sue diverse opzioni di personalizzazione. Puoi impostare i ritardi delle diapositive, scegliere frecce di navigazione, sfondi parallasse, aggiungere livelli multimediali, inserire pulsanti, impostare caratteri personalizzati, aggiungere margini e molti altri.

Il plug-in Slider Revolution ti consente di personalizzare qualsiasi cosa. Per risparmiare tempo, puoi salvare i predefiniti per usarli in seguito nelle transizioni delle diapositive, negli stili dei caratteri e nelle animazioni dei livelli.

Componenti aggiuntivi di Slider Revolution

Vuoi rendere i tuoi cursori più complessi e diversificati con effetti di transizione, animazioni?

Sei bravo ad andare! Slider supporta diversi tipi di contenuto, come post di blog e post attuali, ti consente di utilizzare feed da piattaforme social come Twitter, Facebook, Vimeo, YouTube e Instagram. Puoi aggiungere link, video, immagini e testo in pochissimo tempo. Con l'aiuto della funzione Variazioni, puoi creare una diapositiva ricca di funzionalità e ricca di informazioni che i visitatori possono utilizzare.

Sicurezza

La sicurezza è uno degli aspetti più significativi quando si parla di siti web. Potresti sentire che la vulnerabilità della guerra è stata influenzata da Slider Revolution alcuni anni fa. Da quel momento Themepunch ha aumentato la protezione del software e ora utilizza un'organizzazione di terze parti per controllare regolarmente i problemi del plug-in. Quindi puoi essere sicuro che il plugin è altamente sicuro.

Supporto tecnico

Il plug-in viene fornito con la documentazione dettagliata e la grande sezione delle domande frequenti con le domande più frequenti sul plug-in. Ecco perché è molto facile iniziare con la rivoluzione del cursore anche se non hai esperienza di lavoro con esso. La disponibilità dei tutorial dettagliati semplifica la creazione della diapositiva per il sito Web per tutti.

Fonti di contenuto

Plugin gestisce con successo la creazione di slider per varie fonti di contenuto. Che si tratti di un prodotto WooCommerce o di un post comune, Slider Revolution ha gli strumenti.

Le potenti funzionalità rendono questo plugin una scelta numero 1 per tutti. Il suo principale vantaggio è che presenta la categoria di una soluzione all-in-one. Non hai bisogno di plug-in extra, tutto è all'interno del plug-in.

Dobbiamo anche ricordare che è conveniente. La licenza regolare ti costerà $ 26. Considerando il numero di funzionalità che ottieni per il prezzo, Slider Revolution è il plug-in di scorrimento più conveniente del settore.

In questa guida definitiva, tratteremo tutto, dall'installazione del plugin all'aggiunta di una nuova diapositiva e al suo posizionamento sul sito web.

Installazione del plugin e configurazione primaria

Molti degli sviluppatori di temi includono Slider Revolution nel pacchetto dei temi.

Se hai acquistato uno dei temi WordPress premium da StylemixThemes non è necessario installare il plug-in manualmente. Slider Revolution verrà installato automaticamente con l'importazione della demo.

Se il pacchetto del tema che stai utilizzando non include il plug-in, devi scaricarlo e installarlo manualmente. Per ottenere una copia di Slider Revolution segui questo link .

Dovrai acquistare il plugin. Accedi al tuo account Envato ed effettua l'acquisto. Dopodiché scarica il file: seleziona l'opzione di download per "Solo file WordPress installabile".

Ora devi aggiungere un nuovo plugin al tuo sito. Vai alla tua dashboard — Plugin > Aggiungi nuovo . Al termine dell'installazione, attiva il plugin.

Congratulazioni, sei pronto e puoi iniziare a creare il tuo primo slider!

Come aggiornare Slider Revolution

Themepunch rilascia aggiornamenti regolari del plug-in slider. Per aggiornarlo, apri Slider Revolution dalla dashboard e segui la scheda Aggiornamenti. In questa pagina puoi trovare una piccola sezione dal titolo “Aggiornamenti Plugin”. Qui viene specificato quale versione del plugin è attualmente installata sul tuo sito web e una versione disponibile per l'aggiornamento.

Inoltre, puoi utilizzare il modo standard e andare su Dashboard> Aggiornamenti e installare la nuova versione del plug-in da lì.

Slider Revolution: per iniziare

Se stai utilizzando il dispositivo di scorrimento per la prima volta, potrebbe non essere abbastanza chiaro con tutta la terminologia utilizzata. Ci sono tre elementi principali con cui puoi essere confuso. Sono moduli, diapositive e livelli. Ognuno di loro può far parte di un altro così come lavorare individualmente.

Ad esempio, puoi creare un modulo progettato per fungere da dispositivo di scorrimento e conterrà diapositive. Oltre a questo, puoi creare moduli come menu di navigazione o intestazioni, che non sono affatto slider, ma conterranno comunque diapositive. Il motivo è che Slider Revolution è stato inizialmente creato come costruttore di slider, tuttavia ora viene utilizzato anche come editor di siti Web completo. Quindi, con l'aiuto di esso, puoi creare molto di più che semplici diapositive.

Relazione tra moduli, diapositive e livelli

I moduli sono contenitori per diapositive che sono contenitori per livelli.

I moduli esistono per contenere le diapositive. Ogni modulo deve avere almeno una diapositiva. Quando crei un modulo vuoto, viene aggiunta automaticamente una diapositiva vuota. Puoi creare diapositive aggiuntive o aggiungere tutto a una singola diapositiva. Dipende completamente dal tipo di contenuto che stai creando.

La diapositiva è un contenitore per livelli. Ogni diapositiva deve avere almeno un livello. Quando viene creata una nuova diapositiva, viene aggiunto automaticamente un livello di sfondo. Questo livello è sempre lì, può essere rinominato e reso invisibile, ma non può essere rimosso. Questa area di sfondo può essere riempita con livelli.

I livelli contengono elementi visivi, audio o di layout e vengono aggiunti alle diapositive. Testo, pulsante, immagine, audio, video, gruppo e riga sono tutti i tipi di livelli. Ogni livello rappresenta un singolo elemento multimediale. I livelli possono essere animati in modo da realizzare al meglio la tua idea.

Come usare Slider Revolution: Impostazioni globali

Come abbiamo già detto, Slider Revolution ha tantissime opzioni e questa non è un'esagerazione. Ecco perché, prima di iniziare a costruire lo slider, ti consigliamo di guardare prima le impostazioni globali e di imparare i principi fondamentali per lavorare con il plugin.

Se fai clic su Slider Revolution dalla tua dashboard, sarai in grado di aprire la schermata di configurazione del plug-in.

Schermata di configurazione

Nella parte superiore dello schermo puoi trovare la scheda con le seguenti opzioni:

Moduli, aggiornamenti, attivazione, notizie, globali, domande frequenti, supporto.

In questa fase, lavoreremo solo con loro due: Moduli - per crearne uno nuovo e Globali - per esaminare le impostazioni globali del plug-in.

Impostazioni globali

Inizieremo con i Globals . Le impostazioni globali sono principalmente suddivise in diverse sezioni di:

• Generale
• Punti di interruzione della griglia di layout predefiniti
• Caratteri
• Varie

Queste impostazioni sono responsabili delle opzioni di griglia reattive predefinite che si applicano durante la creazione di un nuovo dispositivo di scorrimento, il caricamento di caratteri personalizzati, la creazione di database e altro ancora.

Ci sono solo diverse opzioni su cui dovrai concentrarti. Innanzitutto, è la reattività, per assicurarti che i tuoi dispositivi di scorrimento futuri abbiano un bell'aspetto su qualsiasi dispositivo. Ecco una guida rapida sui dispositivi e le loro dimensioni.

Nella sezione Punto di interruzione della griglia di layout predefinito , puoi impostare la larghezza in pixel per diversi tipi di dispositivi: desktop, notebook, tablet e dispositivi mobili.

Finché ogni dispositivo ha le sue dimensioni, inserisci la larghezza esatta per ogni tipo per garantire la corretta visualizzazione di uno slider.

• I monitor desktop standard hanno una larghezza di 1920px.
• I dispositivi notebook, che includono tutti i laptop, MacBook e tablet con orientamento orizzontale, hanno una larghezza di circa 1600 pixel.
• I tablet orientati verticalmente hanno una larghezza non superiore a 778px (basata sull'iPad).
• E dispositivi mobili. Questa è una parte importante, poiché al giorno d'oggi più della metà di tutto il traffico Internet viene generato tramite dispositivi mobili e non sarà soddisfacente se gli utenti non riescono a vedere correttamente gli slider sul tuo sito web. Tuttavia, questo può creare confusione e il motivo è che gli smartphone moderni hanno dimensioni assolutamente diverse. Ti consigliamo di utilizzare il numero, non superiore a 500px.

La seconda cosa che potresti voler controllare è l'accesso al dispositivo di scorrimento. L' opzione Autorizzazione consente di negare l'accesso al plug-in ad altri utenti ad eccezione di amministratori ed editori.

Ora puoi iniziare a costruire i tuoi slider! Ci sono tre opzioni che puoi usare. Puoi iniziare da zero e creare un nuovo slider, puoi esportare un file dai modelli di Slider Revolution o importare cursori di esempio inclusi con il tuo tema.

Nel nostro articolo esamineremo la prima opzione e costruiremo un nuovo dispositivo di scorrimento da zero. Questo ci permetterà di esplorare più possibilità del plugin.

Creazione di un nuovo cursore

Ora, quando abbiamo finito con alcune impostazioni primarie, possiamo procedere alla creazione di una nuova diapositiva. Apri le impostazioni di Slider Revolution e fai clic sul Nuovo modulo vuoto.

Ti verrà offerto di seguire la guida rapida. Fai clic su Guida introduttiva se desideri seguire una breve lezione. Oppure esci dalla guida per saltare questo passaggio.

Lo schermo sarà diviso in diverse aree: da sinistra c'è un riquadro in cui viene visualizzato tutto il contenuto, da destra è uno spazio di lavoro con sezioni e impostazioni.

Opzioni generali

Iniziamo con le Opzioni generali . Fare clic sull'icona a forma di ingranaggio per aprire le impostazioni. Prima di tutto, dobbiamo nominare il nostro modulo. Nella sezione Titolo inserisci il nome e duplicalo per l'Alias ​​in minuscolo e con trattini tra le parole anziché spazi.

L'alias è necessario per aggiungere il dispositivo di scorrimento a una pagina. Puoi anche utilizzare lo shortcode fornito copiandolo e posizionandolo sulla pagina o sul post in cui desideri visualizzare il dispositivo di scorrimento.

Successivamente, possiamo personalizzare il tipo e l'altezza e la larghezza dell'area del livello del desktop. Queste impostazioni si trovano nella scheda Layout.

Per il tipo hai tre opzioni tra cui scegliere:

• Dispositivo di scorrimento: diverse diapositive animate che ruotano per essere visualizzate una per una.
• Scena: una singola diapositiva che può essere utilizzata come modulo di contenuto.
• Carosello: molte diapositive con più diapositive visibili contemporaneamente.

L'impostazione successiva che dobbiamo specificare è il dimensionamento. Sono inoltre disponibili tre opzioni:

Auto : questo è il parametro predefinito che estende il tuo dispositivo di scorrimento alla larghezza del contenitore principale come definito dal tuo tema WordPress.

Larghezza intera: un'opzione di scorrimento a larghezza intera si estende da sinistra a destra (devi comunque definire l'altezza)

Schermo intero: per cursori di grandi dimensioni che riempiono l'intero schermo, indipendentemente dalle dimensioni del browser o del dispositivo.

Con il plug-in Slider Revolution, puoi animare ogni parte della pagina del sito web. Ti preghiamo di considerare che, così facendo, il peso della tua pagina aumenterà e quindi ci vorrà più tempo per caricare la tua pagina. Di conseguenza, potrebbe influire negativamente sul posizionamento SEO.

Ridimensiona le impostazioni

Il ridimensionamento classico o lineare assicura che il tuo dispositivo di scorrimento si comprima di conseguenza dopo aver configurato le impostazioni delle dimensioni dello schermo principale (ad esempio, un dispositivo di scorrimento da 1000x400px verrà compresso in un dispositivo di scorrimento da 500x200px con i caratteri, le immagini e altri elementi del dispositivo di scorrimento).

L' ereditarietà intelligente consente la creazione automatizzata delle dimensioni dei dispositivi in ​​base alle impostazioni del desktop scelte, con l'opzione di regolazione.

La configurazione personalizzata o manuale ti consente di impostare le dimensioni del dispositivo di scorrimento utilizzando pixel esatti, con la possibilità di impostare le dimensioni del dispositivo di scorrimento su diverse larghezze dello schermo: desktop, laptop, tablet e telefono.

Reattività delle diapositive

Andare avanti. Non abbiamo ancora finito con la reattività. C'è una dimensione dell'area del livello in cui è possibile specificare la larghezza del browser.

Di solito, le opzioni sono impostate per impostazione predefinita su Dimensioni automatiche e vengono specificati solo i parametri del desktop. Puoi fare lo stesso per altre opzioni attivandole.

Inoltre, se accendi il dispositivo specifico, la tua area di lavoro (contenitore di vetrini) verrà adattata ai parametri del dispositivo selezionato, il che significa che puoi controllare la visualizzazione del cursore per il dispositivo in calcestruzzo.

Per ogni dispositivo, verranno specificate le dimensioni della griglia dalle impostazioni globali. La griglia è l'area in cui si trovano i livelli di scorrimento. Non ci sono numeri precisi che dovresti inserire. Scoprirai cosa funziona meglio per te dopo aver provato ad esplorare diverse opzioni.  

Questo era solo l'inizio, alcune opzioni generali che faciliteranno il tuo ulteriore lavoro con il dispositivo di scorrimento. E una volta che hai finito con questa parte puoi passare al passaggio successivo.

Uno sguardo più da vicino alle opzioni

Oltre alle opzioni Generali, ci sono altre tre schede con cui interagirai molto. Vogliamo guidarti attraverso le impostazioni principali con cui opererai. Fondamentalmente, la creazione delle diapositive considera diversi componenti coinvolti nel processo. Si tratta di opzioni generali, impostazioni di navigazione, opzioni diapositiva e livelli.

Non stavamo scherzando quando dicevamo che Slider Revolution ha tantissime opzioni. Ci sono troppi elementi da coprire, descriviamoli un po' tutti per poi passare in rassegna in maniera più dettagliata i più importanti.

1. Opzioni generali

Abbiamo già toccato alcuni elementi delle Opzioni generali come Titolo e Layout. Tuttavia, oltre a questi, ci sono altre cose che devi regolare.

Tutto sommato, le opzioni Generali consentono di impostare quanto segue:

Titolo — per fornire il nome del dispositivo di scorrimento.
Layout : seleziona il tipo di dispositivo di scorrimento (cursore, scena o sequenza) e le dimensioni (automatico, larghezza intera o schermo intero). Questo aiuta a modificare le larghezze e le altezze per l'area del livello, la posizione del modulo, un colore di sfondo o un'immagine predefiniti e altro ancora.
Contenuto : identifica il modo in cui aggiungere il contenuto al dispositivo di scorrimento. Puoi scegliere tra 9 fonti di contenuto.

• Predefinito: qui suggeriamo di concentrarci su un parametro importante: la durata della diapositiva (quanto durerà ciascuna diapositiva).
• Generale: questa sezione include le impostazioni della presentazione per la rotazione automatica, l'arresto al passaggio del mouse, il ciclo di diapositive e la selezione di una prima diapositiva designata. Anche qui puoi nascondere o disabilitare il tuo dispositivo di scorrimento su dispositivi mobili o con larghezze di pixel specificate.
• Su scorrimento: consente agli utenti di selezionare effetti di scorrimento come parallasse, profondità 3D, sequenza temporale, dissolvenza, sfocatura, scala di grigi e altro. Tutti gli effetti sono disponibili con impostazioni personalizzabili.
• Spinner — o preloader, e il plug-in ha 15 opzioni di spinner tra cui scegliere.
• Le opzioni avanzate ti consentono di abilitare il caricamento lento, selezionare un'immagine di fallback o semplificare il tuo dispositivo di scorrimento sui vecchi browser.
• CSS/jQuery: qui puoi aggiungere il tuo codice personalizzato agli slider. Si noti che questo è meglio per essere utilizzato da professionisti o utenti che hanno familiarità con il concetto di programmazione e codifica.
• Come modale: questa particolare opzione è necessaria nel caso in cui desideri creare un dispositivo di scorrimento che appaia come un popup o una lightbox e ti fornisce le opzioni per la posizione del dispositivo di scorrimento, il colore della copertina e lo shortcode da utilizzare quando si inserisce il dispositivo di scorrimento modale nelle pagine.
• Skin: skin presenta il preset che puoi creare e assegnare ai livelli di testo (specifica il colore dell'evidenziazione, dell'intestazione, del testo del contenuto).

Componenti aggiuntivi: qui troverai i componenti aggiuntivi (nota: i componenti aggiuntivi sono disponibili solo se hai acquistato la tua licenza slider).

2. Opzioni di navigazione

Se hai intenzione di includere più di una diapositiva, le opzioni di navigazione ti aiuteranno ad aggiungere strumenti di navigazione al dispositivo di scorrimento come punti elenco, frecce e pulsanti.

Tutte le opzioni includono impostazioni facili da personalizzare per posizione/allineamento, dimensionamento, visibilità e stili/preimpostazioni globali.

Gli elementi di navigazione includono:

• Avanzamento: barra di avanzamento o cerchio che visualizza l'avanzamento della diapositiva corrente.
• Frecce: consentono ai visitatori di fare clic sulle diapositive facilmente.
• Punti elenco: 14 stili di punti di navigazione da aggiungere alla diapositiva.
• Schede: molto utili per i dispositivi di scorrimento dei contenuti in cui è necessaria la navigazione delle schede.
• Pollici: è necessario per visualizzare un'immagine in miniatura come opzione di navigazione. Sono disponibili 5 opzioni.
• Dimensione precedente: specifica la dimensione dell'immagine di anteprima.
• Tocco: include opzioni per lo scorrimento dei blocchi, la velocità e la direzione.
• Tastiera: è possibile abilitare la navigazione tramite tastiera (consigliata per l'accessibilità).
• Mouse: abilita il controllo del mouse come una funzione di sequenza o scorrimento inverso.
• Editor di navigazione: questa sezione consente di personalizzare frecce, elenchi puntati, schede o pollici con il proprio codice personalizzato.

3. Opzioni diapositiva

La parte successiva delle impostazioni è relativa alle opzioni della diapositiva.

• Sfondo: scegli lo sfondo per la diapositiva. Scegli tra trasparente, colorato (puoi aggiungere una sfumatura), immagine, immagine esterna o un video (YouTube, Video o HTML5).
• Miniatura: definisce la miniatura visibile dall'amministratore e la miniatura utilizzata per la navigazione.
• Animazione: scegli l'animazione di transizione per le tue diapositive.
• Filtri: 22 filtri diversi da aggiungere alle diapositive.
• Avanzamento: consente di personalizzare la lunghezza, la pausa e la visibilità della diapositiva su una diapositiva.
• Regole di pubblicazione: controlla se la tua diapositiva è pubblicata o meno.
• Tag e link: aiuta ad aggiungere classi personalizzate, ID e dati HTML per la tua diapositiva, oltre a un link.
• Parametri: aggiungi fino a 10 parametri personalizzati da utilizzare nelle diapositive e nella navigazione.
• Livelli loop: gestisci le impostazioni del loop se il tuo dispositivo di scorrimento ha solo una diapositiva.
• Su scorrimento: personalizza la parallasse e gli effetti di scorrimento per diapositiva.

Aggiunta di nuove diapositive

Dopo aver finito di impostare il dispositivo di scorrimento e regolare tutte le opzioni, è il momento di aggiungere una nuova diapositiva al progetto. Puoi vedere la cornice, che mostra il contenuto della diapositiva quando la aggiungi. Ora è trasparente. È possibile modificare l'opzione di sfondo e aggiungere un'immagine o impostare il colore.

Puoi caricare un'immagine dal tuo computer o utilizzare una fonte esterna (aggiungendo un collegamento). Inoltre, puoi impostare il colore come sfondo anziché come immagine. Può essere fatto abbastanza facilmente.

Basta selezionare l'opzione Colorato dal menu a discesa Tipo nel pannello Sorgente, quindi fare clic sul pulsante Colore BG per scegliere il colore. Se vuoi usare il video, aggiungi semplicemente la sorgente.

Aggiunta di un nuovo livello alla diapositiva

Nella parte superiore dello schermo, troverai l' opzione +Aggiungi livello . Usalo per aggiungere un nuovo livello alla diapositiva. Ci sono 8 diverse opzioni.

Le opzioni più apprezzate, invece, sono immagini e testi con il supporto dei pulsanti se è necessario aggiungere alcuni strumenti di navigazione allo slider.

Opzioni di livello: come usare

La flessibilità di Slider Revolution si basa sulla disponibilità di più opzioni e sulla possibilità di impostare ogni dettaglio separatamente, nonché di regolare l'intero progetto di slider. I livelli non fanno eccezione. Ogni volta che aggiungi un nuovo livello alla diapositiva, puoi controllarne ogni opzione. Nell'esempio dell'aggiunta di una nuova immagine alla diapositiva, esamineremo tutti i parametri che le opzioni di livello consentono di modificare.

Quando vuoi aggiungere un livello immagine alla tua diapositiva, fai semplicemente clic su Immagine nel menu a discesa Aggiungi livello . Quindi carica l'immagine desiderata.

Accanto alla cornice, troverai varie Opzioni di livello (Contenuto, Stile, Dimensioni e Pos, ecc.).

Il contenuto del livello mostra alcune informazioni di base sul livello. È possibile impostare il caricamento lento e modificarne il tipo di origine.

Usando le opzioni di stile del livello sarai in grado di aggiungere uno sfondo colorato.

L'opzione successiva è la spaziatura . La spaziatura ci aiuta a spostare il livello dall'alto verso il basso, da sinistra a destra, dal basso verso l'alto e da sinistra a destra. Sono contrassegnati dalla lettera 'M'.

Pos e Dimensioni. Imposta l'allineamento, nonché la posizione e le dimensioni del livello dell'immagine. Sia l'allineamento verticale che quello orizzontale possono essere modificati facilmente, basta fare clic su una delle icone di allineamento.

Successivamente, puoi impostare la posizione con Offset verticale dalle opzioni Posizione allineata. Gioca con i parametri X e Y per spostare il tuo livello sulla diapositiva.

Opzioni avanzate del livello

Le opzioni di stile avanzato ti consentono di ruotare un livello orizzontalmente, verticalmente e centralmente e di aggiungere ombre ai livelli.

Opzioni di animazione del livello

L'animazione è l'opzione principale nella rivoluzione degli slider. L'idea principale del plugin è quella di aggiungere al tuo sito elementi animati invece di elementi visivi statici e standard.

Le opzioni di animazione aggiungono movimento alle diapositive, usando questa azione puoi animare le diapositive e impostare le animazioni di visualizzazione e uscita.

Ci sono due righe per le opzioni di visualizzazione e uscita: IN e OUT.

Ogni riga è dotata di un menu a tendina con diversi tipi di animazioni. Per impostazione predefinita, l'opzione di dissolvenza in entrata è impostata per tutti i livelli. Prova alcune animazioni per vedere come appare sulla tua diapositiva e scegli quella migliore.

La sezione seguente viene utilizzata per la durata dell'animazione, l'allentamento dell'animazione e per la definizione dell'inizio dell'animazione . La Durata definisce quanto tempo ci vuole per il completamento dell'animazione, l'opzione Inizio definisce la durata del tempo dopo il quale l'animazione inizierà una volta caricata la diapositiva. L'andamento definisce la velocità di avanzamento dell'animazione.

Cronologia dell'animazione

Se hai più livelli aggiunti alla diapositiva, probabilmente non vuoi che appaiano tutti contemporaneamente. La sequenza temporale dell'animazione di Slider Revolution può aiutarti a gestire questo problema. Si trova proprio sotto il nostro telaio di lavoro.

L'inizio del frame predefinito per ogni livello è impostato su 0 millisecondi, il che significa che i livelli appariranno sullo schermo dopo 0 millisecondi dal caricamento. La durata che appare è solitamente impostata su 3 secondi, il che significa che un livello diventa completamente visibile in 3 secondi. Per modificare le opzioni, scegli il livello e modificalo specificando un valore diverso.  

Assicurati di impostare valori diversi per livelli diversi, in modo che appaiano non contemporaneamente e appaiano disordinati.

Ora, diamo un'occhiata più da vicino alle opzioni di Timeline

1.Vista elenco

Queste icone possono essere utilizzate per nascondere o mostrare i livelli e nascondere o mostrare le righe in base all'allineamento verticale. Solo l'amministratore del sito Web ha accesso a queste opzioni.

2. Durata della sequenza temporale
La durata totale della linea temporale è definita in Opzioni generali del modulo > Default. Inoltre, può essere impostato individualmente in Opzioni diapositiva > Avanzamento.

Trascinando il blocco nella Timeline a sinistra ea destra puoi facilmente regolare la lunghezza della diapositiva. Un'altra opzione che puoi fare è fare clic sull'icona dell'orologio e modificarla in percentuale.

3. Anteprima della sequenza temporale

Per visualizzare l' anteprima della sequenza temporale, è necessario fare clic sull'icona Riproduci o semplicemente trascinare il blocco inattivo.

4. Rinomina livelli

Per rinominare il livello, fai doppio clic sul testo del livello nella linea temporale e rinominalo. Inoltre, puoi modificare il titolo del livello in alto al centro dell'Editor.

5. Indice z dei livelli / Ordine di impilamento

Per impostare lo z-index/l'ordine di impilamento devi solo trascinare i livelli nella timeline.

6. Animazioni

Per ogni livello, c'è un'animazione in entrata e in uscita e animazioni Keyframe aggiuntive. Tutte le animazioni sono presentate nella timeline.

Trascina un blocco di animazione per regolare il punto iniziale dell'animazione nella timeline. E modifica la durata dell'animazione trascinando il punto finale del blocco

Opzioni del ciclo di livello

La scheda Ciclo ti consente di creare animazioni in loop. Puoi scegliere un tipo di animazione, definire la velocità e l'andamento del loop e impostare un'ora di inizio e di fine per il loop.

Ci sono 8 tipi tra cui puoi scegliere: Personalizzato, Loop del pendolo, Loop degli effetti, Onda, Wiggles, Rotazione, Scorrimento e passaggio del mouse e Impulso. Ogni animazione in loop ha il proprio set di opzioni.

Il pendolo fa oscillare il tuo strato da un lato all'altro. Tra le opzioni che puoi impostare c'è il grado di fine e di inizio — identifica i gradi tra i quali avverrà l'animazione e il punto di origine X e Y — questo parametro determina il punto dell'asse da cui ruoterà il livello, puoi specificarlo in percentuali.

Effect Loops ti consente di scegliere tra diverse opzioni: Scala di grigi, Blink, Flattern e Lithing. Tutti gli effetti hanno un aspetto diverso, quindi ti consigliamo di guardare ogni opzione per scegliere quella più adatta a te.

L' animazione Wave fa ruotare il tuo livello in un movimento simile all'onda. Ruota attorno ad un asse esterno al livello. È possibile impostare un punto di rotazione X e Y per determinare la posizione dell'asse attorno al quale ruoterà il livello, un angolo iniziale per identificare la posizione iniziale dell'animazione e un raggio per l'orbita della rotazione.

Il ciclo Wiggle farà oscillare il tuo livello da un lato all'altro, dall'alto verso il basso, da sinistra a destra e viceversa. Usa il menu a discesa per scegliere l'opzione che ti piace.

Il ciclo di rotazione fa ruotare il tuo livello attorno al punto dell'asse impostato. Il livello ruoterà e formerà un cerchio completo se scegli il primo elemento dal menu a discesa Rotazione: l'elemento Ruota.

Per spostare il livello da sinistra a destra, da destra a sinistra, dall'alto verso il basso, in diagonale, puoi utilizzare l'animazione Diapositiva e passaggio del mouse. È possibile impostare una posizione iniziale e finale per l'animazione.

L' animazione Pulse fa in modo che il tuo livello ingrandisca e rimpicciolisce continuamente. Specificare l'inizio dello zoom e la fine dello zoom. I valori predefiniti qui sono 1 sia per l'inizio che per la fine. Ciò significa che il livello rimarrà al 100% delle sue dimensioni. In altre parole, non si animerà. Se inserisci 0,5 per Zoom Start, il tuo livello inizierà al 50% delle sue dimensioni e ingrandirà fino al 100% delle sue dimensioni, quindi tornerà al 50%, ecc.

Opzioni al passaggio del livello

Gli effetti al passaggio del mouse sono i capisaldi di una buona UX. Gli effetti al passaggio del mouse di solito indicano che l'azione è richiesta o eseguita, soprattutto perché questo metodo viene utilizzato attivamente con i cursori. Con Slider Revolution, puoi modificare livelli, testi e immagini al passaggio del mouse.

Aggiunta di effetti al passaggio del mouse in Slider Revolution

Innanzitutto, devi attivare il passaggio del mouse sul livello. Seleziona il livello a cui desideri aggiungere l'effetto e fai clic su Passa con il mouse in Opzioni livello. Fare clic su Abilitato per attivarlo.

Nella parte inferiore troverai tutte le opzioni necessarie per impostare il comportamento del livello al passaggio del mouse. Se lasci tutto così com'è, il livello non mostrerà alcuna modifica.

Impostazioni al passaggio del mouse

La prima cosa che puoi impostare qui è il cursore. Nel menu a tendina, puoi trovare diverse opzioni per il Cursore. Auto e Default svolgono le stesse funzioni e non rifletteranno alcuna differenza. Il mirino e il puntatore definiscono la forma del cursore del mouse sullo schermo.

Ci sono ancora più stili di cursore qui. Alcuni di essi sono piuttosto insoliti, tuttavia, la maggior parte indica l'azione che il livello ha quando viene attivato. Ad esempio, se stai collegando il livello al Centro assistenza, puoi scegliere il cursore Guida.

L'evento puntatore per impostazione predefinita è impostato su Auto. L'opzione Nessuno viene utilizzata quando non sono presenti contenuti collegati. Questa sezione ti consente di scegliere l'aspetto del cursore al passaggio del mouse sul livello, abilitare l'animazione e configurarlo.

Animazione al passaggio del mouse

Successivamente, c'è un'animazione al passaggio del mouse che puoi impostare in base alle tue preferenze. Ci sono diverse cose di cui dovresti essere a conoscenza. Innanzitutto, non ha un bell'aspetto quando il livello cambia al passaggio del mouse e la transizione avviene in un momento. Sempre meglio quando la transizione avviene con il ritardo. . Per impostazione predefinita, il ritardo è impostato su 300 ms, lascialo così se ti va o cambia il valore.

Inoltre, puoi impostare l'andamento della transizione. Hai diverse opzioni tra cui scegliere.

Filtro

Al tuo livello, puoi aggiungere Filtro. In altre parole, puoi offuscare la lira fino a un certo punto. L'opzione è espressa in pixel. Più alto è il valore, più "spessa" sarà la sfocatura.

Stile

C'è anche una parte Stile in cui puoi impostare il colore di sfondo e regolare il bordo, ovvero cambiarne il colore e selezionare lo stile del bordo.

Su Opzioni livello di scorrimento

Le opzioni di scorrimento consentono alla diapositiva di spostarsi durante lo scorrimento del mouse. There are three options – Parallax , Timeline Scroll Based , and Filter Effect Scroll Based .

Layer Action Options

Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose the type of action that you would like to occur . There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.

After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.

Layer Visibility Options

If you want your layer to be visible on all devices , then make sure the switches shown in the image below are all turned ON under the Visibility section . The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones.

If you don't want your slider to be shown on some devices, simply turn off this option.

Text layer

After we review most of the options that we need for the layer setup, let's move to the other type of layer and try to add some text to our slide.

There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.

Let's just point out some primary options you need to set for the text layer. They are the following:

• In the Content section, we add our text, and aligned it.
• In Style changed the font and its size, weight, line-height
• Customized the Size & Pos to change the location of the layer within the slider
• In Animation, we add some effects and speed for our text.

When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.

Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.

Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.

Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.

If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.

For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.

You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.

Come creare un effetto di parallasse con la rivoluzione dello slider

La parallasse è uno degli effetti più popolari che rende il sito web più impressionante e dinamico. Probabilmente hai visto molti siti Web e temi integrati con quel particolare effetto. E ora mostreremo come crearne uno da solo usando il plug-in Slider Revolution.

Cos'è la parallasse?

L'effetto di parallasse può essere definito come un effetto in cui gli elementi sullo sfondo e gli elementi in primo piano si muovono a velocità diverse e creano l'illusione della profondità. Di solito, gli elementi dello sfondo si muovono più lentamente

Esistono diversi modi per ottenere questo effetto sul tuo sito web. Fortunatamente per noi, Slider Revolution ha tutte le funzionalità per aiutarti a ottenere l'effetto di parallasse.

Creazione di parallasse in Slider Revolution

Per prima cosa attiva il parallasse . Vai a Opzioni generali del modulo > Su scorrimento > Funzionalità basate su scorrimento > Parallasse e imposta l'interruttore Parallasse abilitato su On .

Ci sono molti vari valori di profondità offerti dal plugin. Scegli quello che fa per te. Puoi anche inserire i tuoi valori.

Aggiunta di parallasse alle immagini di sfondo

Per aggiungere l'effetto di parallasse all'immagine di sfondo, vai su Opzioni diapositiva > Su scorrimento > Impostazioni parallasse e 3D e scegli la profondità preferita dal menu a discesa.

Ci sono regole rigide quando si seleziona la profondità. È meglio se provi valori diversi e vedi quale funziona meglio con il tuo dispositivo di scorrimento. Diverse profondità influiscono direttamente e creano effetti diversi. Ecco perché ti consigliamo di provarli per vedere il risultato.

Aggiunta di parallasse ai livelli

In Slider Revolution, l'effetto di parallasse può essere aggiunto non solo alle immagini di sfondo ma anche ai singoli livelli. La cosa fantastica di questo effetto è che dà agli utenti un'illusione se controllano le parti del dispositivo di scorrimento sulla pagina semplicemente spostando il mouse. Questo sembra davvero bello sul sito Web e per di più, è molto facile da configurare.

Seleziona il tuo livello, vai su Opzioni livello > Su scorrimento > scheda Parallasse e 3D e scegli il livello di profondità desiderato.

Di conseguenza, otterrai il livello con parallasse che si attiva sul movimento del mouse.

Che si tratti di un'immagine di sfondo o di un singolo livello, aggiungere l'effetto di parallasse Slider Revolution è estremamente semplice. Anche se non tutti gli slider necessitano di parallasse. Usalo principalmente per cursori semplici, poiché quelli dinamici con molte animazioni probabilmente andranno meglio senza questo effetto.

Aggiunta di un livello pulsante

Con Slider Revolution, puoi creare e progettare il pulsante da aggiungere al tuo slider per la navigazione. Per fare ciò, per prima cosa, dobbiamo aggiungere un livello di pulsanti al riquadro di lavoro del dispositivo di scorrimento.

Quando aggiungi il pulsante apparirà nel modulo di testo, devi solo personalizzarlo. Sul lato destro dello schermo, puoi trovare molte opzioni per i pulsanti predefiniti. Puoi selezionarne uno per il tuo pulsante.

Inoltre, puoi scegliere qualcosa di originale in quanto ci sono variazioni di pulsanti di riproduzione, interruttori e altri. Inoltre, è possibile aggiungere un effetto ombra e rendere il pulsante più interessante.

Una volta scelto lo stile, puoi modificare le impostazioni avanzate e personalizzarne l'aspetto. Tutte le impostazioni sono disponibili nella scheda Opzioni livello.

Puoi cambiare l'aspetto iniziale del pulsante, cambiare il testo, cambiarne la visualizzazione al passaggio del mouse e impostare le animazioni.

Come rendere lo slider reattivo

All'inizio, abbiamo già impostato alcuni parametri per rendere le nostre diapositive reattive. Questo non è abbastanza. Per questo, devi anche assicurarti che ogni livello in ciascuna delle tue diapositive si adatti perfettamente a tutti i dispositivi e le dimensioni dello schermo.

Quindi, una volta aggiunte tutte le diapositive e i livelli al dispositivo di scorrimento, è il momento di metterli a punto per tutti gli altri dispositivi disponibili.

Quando modifichi le diapositive nella cornice di lavoro, le configuri principalmente per avere un bell'aspetto sui dispositivi desktop. Quando sei certo che tutto sia perfetto sul desktop, puoi iniziare a giocare con i layout per altri dispositivi.

Ora puoi scegliere il dispositivo che desideri emulare dal menu a discesa. Accendi il dispositivo su cui desideri controllare la visualizzazione dello slider. I dispositivi disponibili sono: Desktop, Notebook, Tablet, Mobile.

Puoi modificare tutto per ogni singolo dispositivo. Ad esempio, per i livelli di testo puoi impostare diverse dimensioni del carattere, altezza della linea, spessore del carattere e colore, tutto a seconda del dispositivo su cui è visualizzato il dispositivo di scorrimento. Per il livello dell'immagine, per modificarne le dimensioni, è necessario aggiungere una larghezza diversa e l'altezza dell'immagine verrà regolata automaticamente in base alla larghezza.

Presta attenzione ai bordi della griglia blu. Questi definiscono i bordi del dispositivo con cui stai attualmente lavorando. Quindi, se uno dei tuoi livelli si estende al di fuori dei bordi, assicurati di modificare le impostazioni per quei livelli.

Infine, salva il tuo dispositivo di scorrimento e controlla come appare dal vivo.

Aggiunta del dispositivo di scorrimento alla pagina

Hai fatto un buon lavoro e ora è il momento di vedere come appare il tuo dispositivo di scorrimento sulla pagina. Per farlo, usa lo shortcode Slider Revolution che hai creato in precedenza. Questo shortcode può essere trovato nella scheda Titolo della sezione Opzioni generali.

O se apri Slider Revolution dalla tua dashboard. Trova il modulo corrente e seleziona l'opzione Incorpora.

Nella finestra pop-up seleziona l'opzione Per le pagine e i post e copia lo shortcode.

Lo shortcode dovrebbe assomigliare a [rev_slider alias=”title”][/rev_slider] con il “title” basato sull'alias che hai dato allo slider.

Visualizzazione dello slider con Elementor

Usare il metodo shortcode per visualizzare lo slider sulla pagina è abbastanza semplice. Tuttavia, c'è un modo che potrebbe essere ancora più semplice. Tutti gli slider che crei con il plug-in Slider Revolution possono essere inseriti nella pagina utilizzando il widget Elementor. Seleziona la pagina su cui desideri visualizzare il dispositivo di scorrimento e aprila tramite l'editor di Elementor. Quindi trascina e rilascia semplicemente l'elemento sul telaio di lavoro. Nel pannello dei widget, cerca il widget Slider Revolution 6 e aggiungilo alla pagina. Quando trascini il widget dovrai scegliere il dispositivo di scorrimento che desideri utilizzare.

Usa questo modo come alternativa allo shortcode, poiché alcuni proprietari di siti Web trovano più facile lavorare con i widget di page builder.

Come esportare i cursori

Per esportare lo slider, vai su Slider Revolution facendo clic sulla scheda pertinente dal menu della dashboard. Tutti gli slider che hai importato o creato verranno visualizzati lì.

Passa il mouse sulla miniatura del modulo che desideri esportare. Fare clic sulla piccola freccia nell'angolo in basso a destra. Tra tutte le opzioni visualizzate, seleziona Esporta e fai clic su di essa.

Verrà visualizzata la finestra di dialogo di conferma che ti avviserà che l'esportazione potrebbe richiedere del tempo. Fai clic su "Sì, Esporta Slider" e il download inizierà. Al termine del download, avrai un file .ZIP del tuo slider.

Concludere

Quasi tutti i temi sviluppati da StylemixThemes includono il plug-in Slider Revolution nel pacchetto. Adoriamo questo potente software che ci dà la possibilità di rendere i siti Web più accattivanti, attraenti e interattivi.

Speriamo che la nostra guida abbia aiutato a capire meglio il processo di creazione dello slider con questo fantastico plugin. Se stai cercando maggiori informazioni, segui la pagina principale di Slider Revolution.