Ora possiamo iniziare cose serie. La creazione di slider on Slider Revolution all'inizio può essere abbastanza noioso. Perderai il tuo orientamento, perché vorrai sapere dove si trova questo o quell'elemento.

Ti libererai di Slider Revolution esercitandoti con abitudine e anche leggendo questo tutorial.

Durante i nostri tutorial precedenti, abbiamo scoperto come:

E ora che abbiamo impostato il nostro dispositivo di scorrimento, creeremo il diapositive "Di" cursore '.

Come iniziare con l'editor "Presentazioni"

In linea di principio, dopo aver salvato le configurazioni di un dispositivo di scorrimento, si accede a una nuova interfaccia che ti introduce all'editor di " diapositive '.

redattore slide-rivoluzione-cursore

Noterai in alto la stessa barra degli strumenti che ti consente di tornare all'elenco di "cursori o diapositive", ai parametri del cursore e all'anteprima del cursore, tra gli altri.

Scopri anche il nostro Plugin 10 WordPress che ti consentono di valutare i tuoi post sul blog

Revolution-barra di scorrimento doutil-edizione-di-slide

In fondo, abbiamo una nuova sezione che ci permette di vedere, i livelli globali, le diverse "diapositive" e il pulsante per aggiungere una nuova " scorrere '.

creazione-di-slide-button-cursore-rivoluzione

Passando il mouse sopra il pulsante di una diapositiva, noterai che vengono visualizzate nuove opzioni. Queste opzioni sono abbastanza chiare e di facile comprensione (duplicato, aggiungi al modello per riutilizzarlo in un secondo momento ed eliminare la diapositiva).

cursore opzioni di creazione-slide-rivoluzione

Passando il mouse sul pulsante Aggiungi diapositiva, noterai altre opzioni che ti consentono di aggiungere una diapositiva vuota, aggiungere più diapositive, aggiungere una diapositiva da un modello (modello).

creazione-di-slide-opzione-rivoluzione-cursore

Attualmente, ci si trova nella diapositiva 1, motivo per cui è evidenziato nell'elenco delle diapositive. Se crei una nuova diapositiva, questa verrà evidenziata al posto della prima diapositiva.

secondo slide-creazione-dun-cursore-cursore-rivoluzione

Slider Revolution a questo livello è un vero cruscotto. Se ti spiego tutto, non capirai molto, quindi eviterò di parlare di funzionalità che possono essere confuse e non essenziali.

Leggi il nostro articolo su 6 Plugin di compressione delle immagini WordPress per il tuo blog

Dopo aver selezionato una diapositiva, è possibile iniziare la modifica nella sezione seguente. Questa sezione è composta da diverse schede (7) che ti danno accesso a varie funzionalità.

Come aggiungere un'immagine di sfondo a una scena

La prima cosa che vorrai fare prima è aggiungere uno sfondo alla nostra diapositiva. Qui puoi scegliere tra: un'immagine di sfondo (dalla tua libreria multimediale), un URL esterno che punta a un'immagine, uno sfondo trasparente che utilizzerà il colore proposto dal tema WordPress, un colore fisso, un video Youtube, Vimeo o HTML5. Sceglieremo uno sfondo " Immagine '.

BACKGROUND immagine-esempio

Puoi trovare molte immagini gratuite sul web. Fai una ricerca su Google. 

Immagine-back plan-rivoluzione-cursore

Quando aggiungi un'immagine, questo si applica immediatamente nell'anteprima della diapositiva e nella "scena".

Szene-rivoluzione-cursore

Come aggiungere un elemento in una scena

Ora che abbiamo una scena ben decorata, aggiungeremo un elemento. Ogni elemento che aggiungi a una scena è considerato un livello o un livello. Questa funzione di livello ti aiuterà a credermi.

Per aggiungere un elemento alla scena, passa con il mouse sopra Aggiungi livello '.

fly-add-layer-slider-rivoluzione

Noterai che puoi aggiungere diversi elementi diversi tra cui: testo / HTML, immagini, audio, video, un pulsante, una forma, un oggetto e importare un elemento.

Inizieremo aggiungendo un'immagine trasparente di Snoopy il cucciolo.

funny-Snoopy-png

Quindi aggiungi questa immagine nella scena e avrai qualcosa del genere:

esempio-cursore-cursore-rivoluzione

Noterai che nei quattro angoli dell'immagine sono presenti piccoli quadrati. Questi quadrati ci consentono di ridimensionare le immagini, poiché in questo caso Snoopy occupa molto spazio.

Il ridimensionamento viene eseguito da " trascinare ". Per ridimensionare mantenendo le proporzioni, tenere premuto il tasto " Maggio Dalla tastiera durante il ridimensionamento.

Vedi anche il nostro Plugin 10 WordPress che ti renderanno un Blogger migliore

nuova rappresentazione-snoopy-rivoluzione-cursore

Ora Snoopy sembra così, è più adatto. Puoi anche capovolgere un'immagine usando l'indicatore situato in alto a destra di ciascuna immagine in questo modo:

rotazione dimage-rivoluzione-cursore

Come posizionare gli elementi con la griglia di aiuto

La griglia di aiuto è un elemento prezioso che aiuta a posizionare meglio gli elementi. Puoi attivare la griglia di aiuto nella parte inferiore sinistra dello stage.

tostapane Daide-rivoluzione-cursore

Questa griglia ha tessere con dimensioni diverse, minore è la dimensione, più precisa sarà la posizione dell'elemento.

Investment-di-immagini

Come aggiungere l'animazione

Ci sono 3 tipi di animazioni su Slider Revolution: animazioni di ingresso, animazioni durante (l'esistenza dell'elemento nella scena) E animazioni finali.

Vedi anche il nostro 6 Plugin di compressione delle immagini WordPress per il tuo blog

Per aggiungere un'animazione a un elemento, devi prima selezionarlo facendo clic su di esso (quando un elemento è selezionato, viene incorniciato da una linea tratteggiata con angoli ridimensionabili).

Quindi fai clic su Snoopy, vai su nella pagina e fai clic sulla scheda « Animazione '.

animated-slider-rivoluzione

Nell'immagine precedente, ho le animazioni di input in blu e le animazioni di output in rosso.

Per modificare un'animazione, fai clic sull'elenco a discesa dopo l'icona dell'uomo che corre.

icona animato-cursore-rivoluzione

Hai quindi una vasta gamma di animazioni a tua disposizione. Lascio a te la scelta dell'animazione che vuoi definire per l'ingresso di un elemento. Da parte mia, ho scelto " easeOutElastic », Per ottenere questo risultato:

Animazione-antipasto-Snoopy

Ecco per te il nostro Plugin 4 WordPress per migliorare il footer del tuo blog

Più a sinistra, puoi determinare la durata dell'animazione e la modalità di animazione che devi lasciare su " No scissione Perché le altre opzioni si applicano solo al testo, non alle immagini.

configurazione-duna-animata-cursore-rivoluzione

Leggi anche Come nascondere i titoli degli articoli e delle pagine di WordPress

Ora, vorrei fare galleggiare Snoopy, per quello, andare su " Ciclo continuo E sull'opzione a discesa, seleziona " Wave ". Ora Snoopy galleggia:

snoppy-galleggiante

Come configurare la visibilità degli elementi

Il mio Snoopy galleggia, ma non voglio che sia visibile sul cellulare. Quindi fai clic su " visibilità »E sull'icona dello Smartphone, assicurati che sia disattivato:

visibilità-elementi-rivoluzione-cursore

Come regolare il comportamento degli elementi

Per ottimizzare il caricamento del dispositivo di scorrimento, è possibile ritardare il caricamento delle immagini. Questo viene fatto nella scheda " comportamento Con l'opzione " pigro Caricamento ". Puoi persino forzare la reattività degli elementi.

comportamento-elemento rivoluzione-cursore

Come creare trigger personalizzati su un elemento

Le azioni ti consentono di associare i trigger a azioni specifiche. Per aggiungere un trigger, fare clic sulla scheda Azioni »Quindi sul pulsante« + ».

add-a-pulsante di scatto

Esistono tipi di trigger 3:

  • Il click è l'atto di un clic del mouse
  • L'input del mouse sull'elemento
  • L'uscita del mouse sopra l'elemento

L'elenco delle azioni è piuttosto lungo. Ad esempio, puoi reindirizzare un utente che fa clic su Snoopy su un'altra pagina scegliendo l'azione " singolo link Che farà apparire nuove opzioni.

Scopri anche il nostro 10 premium WordPress plugin da prenotazione e prenotazione

Gestione-di-trigger-rivoluzione-cursore

Come usare Slider Revolution TimeLine

Slider Revolution offre un'interfaccia di gestione del tempo nella parte inferiore. Questa interfaccia ti permette di vedere dove inizia l'animazione di un elemento e dove finisce.

inizio-e-end-duna-film-on-slider-rivoluzione

Nell'immagine precedente, noterai due frecce blu. Il primo a sinistra indica l'inizio dell'animazione di input di un elemento e il secondo indica la fine dell'animazione di input. Il colore rosso scuro indica la vita dell'oggetto nella scena.

Leggi anche Come aggiungere un conto alla rovescia sul tuo blog WordPress

Troverai una fine anche simile all'altra estremità di una durata (animazione di input, durata della vita e animazione di fine).

Con il " time line Sarai in grado di controllare quale elemento viene visualizzato prima e quale elemento scompare per primo. È uno strumento molto pratico che devi padroneggiare per creare una buona animazione.

La sequenza temporale ha anche un giocatore che puoi attivare per visualizzare l'anteprima della diapositiva.

Animazione-temporale-rivoluzione-cursore

Fino ad allora, ti ho dato le basi per creare una diapositiva. Ora salva il cursore e avvia l'anteprima.

Backup-and-previsulisation

Questo è tutto per questo tutorial, in un prossimo, parleremo della visualizzazione di un cursore su un articolo e di alcune operazioni avanzate.

Scopri anche alcuni temi e plugin premium per WordPress  

Puoi usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione del tuo blog o sito web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. Disco audio

Disk Audio è un altro WordPress Plugin che ti aiuterà a visualizzare un lettore audio direttamente sul tuo sito Web con la semplice pressione di un pulsante. Il layout del lettore audio è completamente reattivo, quindi gli utenti mobili potranno godere delle sue funzionalità senza problemi.

I plugin wordpress premium del lettore audio del disco aggiungono il lettore audio

Inoltre, offre molte opzioni di personalizzazione tra cui combinazioni di colori, aspetti, immagini di sfondo e opacità. Ha diverse opzioni per controllarlo tramite tastiera e consente inoltre di visualizzare la playlist con una barra di scorrimento regolabile.

Leggi anche: plugin WordPress 10 per migliorare la ricerca sul tuo blog

Sarai anche in grado di incorporare collegamenti di download nel lettore musicale per mostrare agli utenti dove possono andare per acquistare il brano riprodotto sul tuo sito web. 

Download | Demo | Web hosting

2. Evento Booking Pro

Questo è un altro WordPress Plugin 100% responsive, facile da personalizzare e dedicato alla gestione delle prenotazioni su qualsiasi sito che offra i suoi servizi nel campo degli eventi.

Prenotazione eventi pro

Le sue caratteristiche principali includono: personalizzazione di testo, colore, bordi e altri, supporto per PayPal, gestione di codici promozionali e coupon, supporto per Google Maps, il supporto della gestione delle e-mail,  il supporto dei codici brevi, pannello di controllo intuitivo, facile creazione di eventi, controllo totale sull'aspetto, ecc.

Download | Demo | Web hosting 

3. Social Share & Locker Pro

Il plugin Social Share & Locker Pro è stato progettato per aiutare il tuo sito web ad essere più visibile sui social media. Con pochi clic, puoi impostare la posizione delle tue icone social o bloccare i tuoi contenuti richiedendo la condivisione su uno dei social network da te offerti.

Plugin di social share locker pro wordpress

Hai temi predefiniti 10 e questo dovrebbe coprire i desideri più comuni. Tutti i suoi temi sono Retina e fanno miracoli. 

cose da fare in 30 tuo blog dopo la loro pubblicazione Scoprili consultando questo articolo.

Inoltre, con Social Share & Locker Pro, sarai in grado di visualizzare il nome completo dei social network o solo l'icona. Dipenderà dal tuo design, dallo spazio disponibile o dai tuoi desideri.

Download | Demo | Web hosting

Risorse raccomandate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

Conclusione

Ecco ! Questo è tutto per questa guida. Speriamo che questo tutorial ti abbia fornito le basi per creare una presentazione con Slider Revolution su un blog o un sito Web WordPress. Se hai domande, suggerimenti o commenti, lasciali nella nostra sezione commentaires.

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Non esitare a condividi con i tuoi amici sui tuoi social network preferiti

...