Vai al contenuto principale

Slider Revolution: configurazione di uno slider su WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Dall'inizio di questa serie di tutorial dedicati al plugin WordPress  Slider Rivoluzione, abbiamo imparato a scarica e installa il plugin. abbiamo poi scoperto la sua interfaccia e le sue diverse funzionalità. Ora, andiamo avanti mostrandoti le configurazioni di a "Slider".

Se sei un principiante e stai cercando risorse per iniziare; troverai qui tutto ciò di cui hai bisogno per iniziare. E se scopri la creazione di blog leggi Come creare un blog WordPress Facilmente: Guida e Tuto

Detto questo, scopriamo cos'è uno slider.

Cos'è in pratica uno slider?

Un dispositivo di scorrimento è un componente HTML. Sì, lo so, dillo, non avanza molto. Quindi un dispositivo di scorrimento è una funzione che consente di visualizzare informazioni varie in modo lasco (o meno). Queste informazioni sono raggruppate per " scorrere ", Che è un'entità di uno" slider "e che può essere costituito da immagini, testo video, link, ecc.Slider revolution critica il tema premium wordpress smarty elearning

Il " cursore "Pertanto contiene" diapositive (Almeno 1) e queste diapositive contengono elementi multimediali (immagini, video, musica, testo) che possono essere animati o interattivi (reagire alle azioni dell'utente).

osservazione : Puoi tradurre " cursori In " diapositive interattive e dinamiche '.

Slider Revolution ci consente di farlo e inizieremo senza ulteriori ritardi.

Se non hai ancora creato un sito web e stai cercando un tema WordPress che integri nativamente questo potente plugin WordPress, questo elenco di temi WordPress premium sarà perfetto.

Creazione di uno slider: prime configurazioni

Per iniziare, devi fare clic sul menu " Slider Rivoluzione Sulla tua dashboard di WordPress.

Wordpress cursore rivoluzione

Ora fai clic sull'elemento nuovo slider E arriverai all'interfaccia di configurazione del dispositivo di scorrimento.

new-scorrimento-cursore-rivoluzione dimostrativi

L'interfaccia di configurazione dello slider può intimidire, ma se fai un passo indietro capirai meglio la sua funzionalità. Potresti notare che questa interfaccia è composta da due sezioni. La prima a sinistra è composta da 5 aree diverse e la seconda a destra da 6 piccole aree. Proprio sopra hai la barra degli strumenti, che ti consente:

  • Torna all'elenco dei cursori « Tutti Sliders »
  • Accedi alle impostazioni del dispositivo di scorrimento (questa è la finestra in cui ti trovi)
  • L'interfaccia di modifica delle diapositive
  • Un pulsante di backup
  • Un pulsante per la modifica delle diapositive
  • Un pulsante di anteprima del dispositivo di scorrimento
  • Un pulsante di rimozione del cursore
  • Un pulsante per tornare (bis) Per l'elenco dei cursori

barra degli strumenti-rivoluzione-cursore

Passo ora a spiegare ogni sezione nella colonna di sinistra.

Questo plugin per WordPress manipola molte immagini, il che potrebbe rallentare il caricamento del tuo sito web. Scoprire Perché è necessario iniziare a ottimizzare il tuo blog WordPress per immagini

la sezione "Fonte di contenuto"

contenuto source rivoluzione-cursore

Questa sezione consente di configurare l'origine dello slider. Qui infatti puoi decidere di creare:

  • Un dispositivo di scorrimento classico, in cui dovrai configurare tu stesso tutte le animazioni
  • Un cursore di articoli, in cui il tuo spazio di manovra è piuttosto limitato
  • Un dispositivo di scorrimento di articoli specifici che puoi scegliere
  • Un dispositivo di scorrimento del feed di notizie di Flickr
  • Un cursore del feed Instagram
  • Un dispositivo di scorrimento sui prodotti WooCommerce
  • Un cursore sul feed Twitter
  • Un cursore sui post di Facebook
  • Un cursore su YouTube Pubblicazioni
  • E un cursore sulle pubblicazioni Vimeo

Va notato per inciso che: Slider Revolution è un potente plugin che consente di evidenziare i prodotti in un negozio online. Scopri il Temi 10 WordPress per creare un negozio online e mostrare i tuoi vestiti

Detto questo, ci accontenteremo di presentare come creare un dispositivo di scorrimento classico, perché è il più usato, il più difficile da padroneggiare e il più straordinario nei suoi effetti. Con la pratica, riuscirai a creare le tue configurazioni su altri dispositivi di scorrimento. In caso di problemi, non esitare a tornare e lasciare un commento qui. Quindi lascia l'opzione " Cursore predefinito "Active.

La sezione Titolo cursore e shortcode

Probabilmente l'hai indovinato. Questa sezione consente di definire il titolo dello slider e lo shortcode che lo accompagnerà (niente di troppo scientifico missilistico).

titolo e shortcode-du cursore

La sezione "Seleziona un tipo di dispositivo di scorrimento"

seleziona-un-tipo-di-cursore-cursore-rivoluzione

Questa sezione consente di definire la struttura di base dello slider. In effetti, hai a tua disposizione 3 opzioni tra cui scegliere che ti consentono:

  • Per la prima opzione, definire un dispositivo di scorrimento predefinito con larghezze adattate allo spazio disponibile e con elementi di base come i pulsanti di navigazione.
  • Per la seconda opzione, puoi decidere di applicare uno stile dinamico e interattivo, senza un pulsante di navigazione e molto più imponente dell'opzione precedente. Questa opzione è chiamata "scena dell'eroe" perché qui darai maggiore enfasi alle animazioni e all'interazione.
  • L'ultima opzione, offre uno stile molto più classico con uno scorrimento semplificato delle immagini da sinistra a destra in una varietà di animazioni.

osservazione : Ogni volta che scegli un'opzione, hai una sezione "Carica un preset da questo tipo di cursoreChe ti offre variazioni avanzate del tipo di cursore che hai scelto.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

cambiare-di-tipo-di-cursore

Non sarò in grado di spiegare tutte le variazioni, ma sarai in grado di trarre conclusioni dalle immagini disponibili. Ad esempio, per il tipo di dispositivo di scorrimento " Standard Hai come quarta variazione " Pollice in sé inferiore ", Che consente di creare un dispositivo di scorrimento con anteprime in basso e un'animazione a scorrimento automatico.

pollice-bottom auto-cursore-rivoluzione dimostrativi

La sezione "Layout diapositiva"

cursore layout-rivoluzione-cursore

Questa sezione consente di impostare un layout per il dispositivo di scorrimento. Quindi puoi andartene Revolution Slider »Scegli automaticamente le larghezze che verranno applicate al dispositivo di scorrimento, scegli di applicare l'intera larghezza al dispositivo di scorrimento o usa il dispositivo di scorrimento in modalità schermo intero.

A seconda dell'opzione scelta, il dispositivo di scorrimento sarà diverso su alcuni dispositivi. Di seguito è riportata una sezione di configurazione della griglia in base ai dispositivi (mobili, desktop, ecc.). Tieni presente che la configurazione della griglia ti consente di modificare i margini interni di ciascun dispositivo di scorrimento.

Leggi anche Suggerimenti 6 per ottimizzare il design mobile del tuo blog

Nella parte inferiore di questa sezione, è possibile scegliere di abilitare la visibilità di overflow, abilitare la conservazione dell'aspetto radio e impostare un'altezza minima.

La sezione "Personalizza, crea e implementa"

Questa sezione in realtà non ha un'opzione per il plugin. Ti offre alcuni collegamenti rapidi a sezioni importanti.

personalizzare-build-Implementare

Ora continueremo con la seconda colonna a destra.

La sezione Impostazioni generali

Questa sezione offre alcune impostazioni che verranno applicate allo slider. Ecco come puoi:

Nella scheda "Presentazione"

  • Disabilita il dispositivo di scorrimento al passaggio del mouse
  • Arresta il dispositivo di scorrimento dopo un determinato numero di pergamene
  • Mostra le diapositive in modo casuale
  • Ripeti la diapositiva
  • Disabilita o arresta il dispositivo di scorrimento su determinate dimensioni del dispositivo
  • L'ultima opzione "Attendi revapi.revstart ()", non ti sarà utile.

Nella scheda "Errori"

Puoi definire:

  • Il carattere selezionabile dei livelli
  • Definire l'identificatore del dispositivo di scorrimento (viene eseguito automaticamente)
  • La durata minima tra le diapositive
  • Il timeout prima dell'inizializzazione
  • La transizione tra le diapositive
  • La durata della transizione espressa in microsecondi
  • La dimensione dell'immagine
  • La posizione CSS dell'immagine di sfondo
  • Ripetendo l'immagine di sfondo, se questa immagine non è abbastanza grande
  • Attivazione dell'opzione " il video Muette Ciò consente di definire il tipo di animazione, le posizioni in una XY (sì, cosa impari quando devi disegnare funzioni matematiche) e altri elementi.

La scheda della barra di avanzamento

Tutte le opzioni in questa sezione riguardano la barra di avanzamento, che è possibile abilitare e personalizzare.

La scheda 1er scivolo

Questa sezione ti consente di attivare una prima diapositiva alternativa. Ciò consentirà il " cursore Per caricare un " scorrere Prima a tua scelta. Ricorda che " diapositive Sono elementi che possono essere identificati.

La sezione "Layout e grafica"

layout e audiovisive

La scheda "Aspetto"

Questa sezione consente di configurare l'aspetto del dispositivo di scorrimento. In particolare, puoi definire la visualizzazione di un'ombra sotto il cursore (molto utile se si sceglie il dispositivo di scorrimento predefinito, con un margine basso significativo).

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Puoi anche scegliere di visualizzare un overlayer coperto di punti trasparenti (questo renderà il tuo dispositivo di scorrimento molto originale, ma se vuoi visualizzare informazioni che dovranno essere lette a fondo, dovrai andare senza).

Quindi hai lo sfondo del cursore, il margine interno e l'immagine sullo sfondo (quello che devi sapere qui è che un'immagine di sfondo a questo livello verrà visualizzata su tutti i tuoi diapositive).

la scheda "Spinner"

Questa scheda consente di definire un'animazione durante il caricamento del dispositivo di scorrimento, niente di più.

la scheda "Mobile"

Questa scheda consente di gestire la visualizzazione del dispositivo di scorrimento sul dispositivo mobile. Devi sapere che il traffico mobile è importante e quindi non dovresti trascurarlo. Avrai la possibilità di nascondere il dispositivo di scorrimento se le dimensioni del cellulare (larghezza) sono inferiori a una cifra che hai determinato (in pixel).

la scheda "Posizione"

Ciò consente di determinare la posizione del dispositivo di scorrimento rispetto alla pagina. Tenderò a dire, in relazione alla posizione in cui si trova. Non è necessario modificare questa opzione, perché suppongo che tutti vogliamo che il cursore sia centrato.

Sezione "Navigazione"

Questa sezione ti permette di attivare i pulsanti di navigazione tra le diapositive sul tuo "slider". Hai 6 opzioni di navigazione:

  • frecce
  • pulci
  • schede
  • miniature
  • L'effetto del touchdown sui dispositivi mobili
  • E la navigazione con i tasti freccia

Ogni opzione, quando abilitata, ti permetterà di configurare la posizione degli elementi di navigazione o il loro principio di funzionamento (le impostazioni predefinite sono generalmente sufficienti).

configurazione-navigation-rivoluzione-cursore

Sezione "Impostazioni carosello"

parametro-du sezione carosello-rivoluzione-cursore

Questa sezione appare solo quando scegli il tipo " Carousel Slider », E ti permette di configurare le sue opzioni. Tu sarai in grado di:

  • Abilita scorrimento infinito
  • Definire uno spazio tra le diapositive, se non si desidera che le diapositive si tocchino
  • Imposta un bordo arrotondato in pixel
  • Imposta un margine superiore elevato (padding-top)
  • Imposta un margine superiore basso (padding-bottom)
  • Il numero di elementi visibili dalla "diapositiva"
  • « elemento strech", Consente di allungare l'elemento in modo che occupi l'intera larghezza del" cursore »

La sicurezza è un elemento importante per l'uptime del tuo sito web e una delle tecniche che ti proteggerà da attacchi o bug gravi è il backup regolare del tuo blog. Scopri il nostro Plugin di backup per blog 5 WordPress

Sezione "Parallasse e 3D"

Qui puoi attivare l'opzione " 3D Sul tuo dispositivo di scorrimento.

Sezione "Problema e gestione"

Questa sezione consente di gestire la compatibilità con i vecchi dispositivi. Puoi semplificare il dispositivo di scorrimento su " IOS4 e Internet Explorer 8 '.

Altrimenti, puoi scegliere di visualizzare un'immagine alternativa, quando il browser non supporta il dispositivo di scorrimento.

Sezione "Google Fonts"

Questa funzione ti consente di gestire i caratteri Google scaricati e applicarli al dispositivo di scorrimento.

Dopo aver definito i parametri del tuo slider. Tutto quello che devi fare è fare clic sul pulsante di registrazione.

salva-a-slider-slider-rivoluzione

 

Se il plug-in WordPress Slider Revolution non è il tuo preferito quando si tratta di creare slider sui siti Web WordPress, qui offriamo due alternative in grado di offrire funzionalità simili.

1. LayerSlider

LayerSlider è un plug-in di animazione multiuso di WordPress premium. Ti dà la possibilità di creare presentazioni e gallerie di immagini con effetti sorprendenti, pagine di destinazione e blocchi di pagine meravigliosamente animati o persino un sito web completo.Il plugin per wordpress di Layerslider crea uno slider 1

È una delle alternative in grado di competere a stretto contatto con Slider Revolution. Il suo editor visivo drag-and-drop rende molto intuitivo per tutti iniziare a usarlo. Non sono richieste competenze tecniche o di codifica. La sua selezione in continua crescita di modelli importabili è un punto di partenza ideale per nuovi progetti e copre tutti i casi d'uso comuni. Sono realizzati con cura e possono essere facilmente personalizzati per soddisfare tutte le esigenze.

Il supporto eccellente e gli aggiornamenti frequenti ti consentono di ottenere il massimo dal tuo acquisto.

Vai oltre con questo potente plugin per WordPress leggendo questo articolo Layer Slider: un plugin WordPress per creare un cursore

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Download | Demo | Web hosting

2. Slider WP1

WP1 Slider è un plugin WordPress versatile. È facile da usare e ha tutte le funzionalità utili di cui avrai bisogno per creare splendide presentazioni. La maggior parte dei plug-in di scorrimento sono troppo tecnici e richiedono molto tempo per configurarli, ma WP1 Slider è progettato per i non programmatori e offre opzioni incredibili.I plugin wp1 slide pro wordpress creano diapositive del sito web

Tra questi troverai: ilupport di effetti Kenburn, 6 diversi modelli di transizioni di scorrimento, ilupport di shortcode, un cinizio di diapositive con drag and drop, il cmolestie veloci e SEO eccellente, ilsupporto per la condivisione su diversi social network, iintegrazione di video YouTube e Vimeo, un layout elettronicopienamente reattivo, il supporto di WooCommerce e altri.

Download | Demo | Web hosting

Altre risorse consigliate

Ecco alcune risorse che consigliamo vivamente:

Conclusione

Ecco ! Questo è tutto per questa presentazione sulla configurazione del plugin WordPress Slider Revolution. Continueremo in un tutorial futuro, in cui discuteremo del design delle diapositive.

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 o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma, se hai commenti o suggerimenti in merito, sarà la benvenuta nella sezione commenti. Soprattutto condividi questo articolo sui tuoi diversi i social network.

Questo articolo contiene i commenti 29

  1. Ciao, ho creato 2 modelli diversi. Ora voglio passare dal mio attuale cursore in linea. Non posso davvero farlo. Qualcuno può dare il consiglio magico? Grazie in anticipo!

  2. Ho creato uno slider4 e ho posizionato 3 diaspositive in questo slider. Ma sulla mia homepage, la rivoluzione dello slider mostra solo una diapositiva e non mostra il resto. Visualizza solo la prima diapositiva. Quando ad esempio porto l'ultima diapositiva al primo posto, la rivoluzione del cursore mostra quest'ultima e lascia le altre

    1. Buonasera,

      Puoi condividere uno screenshot delle tue impostazioni? Oppure, esporta la diapositiva, quindi ripristina le impostazioni del cursore di rivoluzione.

  3. Buongiorno,

    Vorrei realizzare uno slider dinamico, avete dei file riguardanti la creazione di uno slider con gli effetti al passaggio del mouse.

    grazie

  4. Ciao, ho scaricato il template di uno slider, ho potuto modificare i testi e le immagini, sono comunque su slider revolution premium: possiamo vedere il testo "a Slider Revolution ..." + i link ai loro social network su la diapositiva pff. E non riesco a trovare o rimuovere questo testo. Grazie in anticipo

  5. ciao ho un problemino quando creo uno slider e voglio modificarlo su mobile i testi che ho già aggiunto allo slider non compaiono nello slider mobile perchè (in fase di modifica) ???

  6. Buongiorno,
    Ho un problema con Revolution Slider. Non riesco a trovare una soluzione in modo che le mie foto non vengano ritagliate verticalmente.
    Deve avere una casella di controllo?
    Grazie per il tuo ritorno
    Norbert

    1. Buongiorno,

      Prova a disabilitare tutti i plugin, e se il problema persiste a causa del tema, cambialo o contatta il venditore.

  7. Buongiorno,
    sulla rivoluzione del dispositivo di scorrimento Vorrei che la mia diapositiva iniziasse solo quando il mouse o lo scorrimento la attivano. È possibile?
    Quale parametro nel cursore si attiva?
    Grazie mille.

    possiamo fare entrambe le cose, cioè avviare uno slider con mouse / scroll e anche mettere un ritardo di inizializzazione che ho visto nei parametri generali in modo da affrontare tutti i casi possibili contemporaneamente ed essere sicuri il visitatore del sito vede questo cursore

    merci beaucoup

  8. Buongiorno,

    sulla rivoluzione del dispositivo di scorrimento Vorrei che la mia diapositiva iniziasse solo quando il mouse o lo scorrimento la attivano. È possibile?
    Quale parametro nel cursore si attiva?
    Grazie mille.

    Possiamo fare entrambe le cose, cioè avviare uno slider con mouse / scroll e anche mettere un ritardo di inizializzazione che ho visto nei parametri generali in modo da affrontare tutti i casi possibili contemporaneamente ed essere sicuri che il visitatore del sito vede questo cursore

  9. Ciao, buonasera, ho un dubbio.
    Ho diverse immagini nella rivoluzione Slider e voglio nasconderle nella versione mobile meno la prima. Ho visto che lo stesso plugin ha la capacità di nascondere le immagini che desideri in diversi dispositivi, ma il problema è che nasconde solo l'immagine perché continua a rilevare che ci sono più elementi perché la barra il tempo continua a caricarsi e lascia lo schermo vuoto quando il primo salta. Come posso nascondere davvero le immagini?

    grazie mille

    1. Buongiorno,

      Hai provato a contattare l'assistenza per il plug-in di rivoluzione Revolution? Troverai rapidamente una soluzione.

  10. Ciao, volevo chiederti come posizionare il cursore sotto la barra dei menu della barra di navigazione orizzontale come accade sul sito Apple.com dove si trova il menu sopra e appena sotto il cursore (il menu sembra essere trasparente
    grazie
    Andrea

  11. Buongiorno,

    Voglio creare uno slider che contenga 2 o 3 immagini su cui sono scritte le virgolette. Il mio problema è che quando scrivo la citazione è troppo lunga e sporge dalla foto, quindi non appare per intero. Eppure c'è spazio in tutta l'immagine. Come fare?

    È richiesto un titolo per ogni diapositiva. Per impostazione predefinita, metto "quote 1" e così via. Ma i titoli vengono visualizzati sulle diapositive ... Ad esempio, "Citazione 1" viene visualizzato in piccolo a destra sulla mia prima diapositiva. Come posso impedire la visualizzazione dei titoli?

    Grazie in anticipo per le tue risposte, aiuteresti gli studenti per un progetto tutorizzato!

    1. Buongiorno,

      Prova a ridurre la dimensione del carattere. Assicurati inoltre di aver abilitato l'opzione mobile per ogni testo.

  12. Buongiorno,

    Ho riscontrato un piccolo problema con questo cursore e nonostante molte ricerche non ho trovato la soluzione. Forse potresti salvarmi? 😉
    Ho configurato lo slider nella mia home page, è impeccabile è molto buono TRANNE che quando il mouse è posizionato su di esso, è impossibile scorrere. Devo mettere il mouse fuori dalla diapositiva per poter scorrere verso il basso (apparentemente funziona verso l'alto). Questo mi disturba un po 'perché temo che alcune persone non capiscano che per farlo devi rimuovere il mouse dalla diapositiva .. (www.sarah-scaniglia.com). Ho cercato in tutte le impostazioni ma non sono riuscito a trovarlo ... e non sono un esperto di web.

    Se trovi la soluzione, sei fantastico

    1. Buongiorno,

      hai provato questo?

      1. Disabilita altri plugin eccetto Revolution Slider e prova di nuovo.

      2. Attiva il tema WordPress predefinito, quindi prova

      Questo ti consentirà di sapere se il problema riguarda il tema o un conflitto con un altro plugin.

      Controlla anche di avere l'ultima versione del plugin.

  13. Buongiorno,

    Puoi spiegarmi come fare uno "Slider" con una sola diapositiva all'interno perché quando provo tutto scompare alla fine dell'animazione. Ho messo "nessuna trasmissione" in "animazione diapositiva" ma niente aiuta ...
    Merci par avance versare votre aiutante.

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
10 azioni
quota2
Tweet1
Enregistrer7