Come creare uno slider di immagini reattivo in WordPress

Pubblicato: 2019-12-19

Stai cercando una linea guida completa sulla creazione di uno slider di immagini reattivo in WordPress? Se stai cercando così, dirò che sei nel posto giusto ora. Perché ho preparato questo articolo contenente le linee guida passo passo sulla creazione di uno slider di immagini reattivo completo in WordPress.

Ho fatto del mio meglio per condividere il modo più semplice, in modo che tu possa facilmente creare il tuo dispositivo di scorrimento dell'immagine previsto. Pertanto, non è necessario cercare un'altra fonte. Ecco la soluzione passo passo completa per la creazione di un dispositivo di scorrimento dell'immagine.

Quindi, segui le mie istruzioni una per una e vai alla fine di questo articolo per avere un'idea completa della creazione di uno slider di immagini reattivo. Iniziamo subito.

L'articolo delinea in breve

L'intero articolo è suddiviso in una serie di sezioni, in modo che tu possa avere una panoramica degli argomenti che imparerai in questo articolo. Quindi, fai una panoramica dal seguente elenco-

  • Scegliere il miglior plugin
  • Installazione e attivazione del plug-in Carousel di WordPress
  • Interfaccia delle impostazioni del plug-in WP Carousel
  • Crea il tuo primo dispositivo di scorrimento per immagini
  • Personalizzazione del dispositivo di scorrimento dell'immagine
  • Pubblicazione del dispositivo di scorrimento immagine
  • Estendi le opzioni di personalizzazione

Scegliere il miglior plugin

Come ti ho già detto che condividerò il modo migliore e più semplice per creare uno slider di immagini reattivo, quindi, dobbiamo scoprire un plug-in WordPress correlato che ci aiuterà a creare lo slider di immagini previsto.

Ci sono diversi plugin disponibili nel mondo di Internet. Ma non tutti sono aggiornati e ottimizzati con le ultime tecnologie web. Di conseguenza, potresti non ottenere il risultato ottimale e la migliore esperienza. Quindi, devi trovare il miglior plugin che sia aggiornato e soddisfi le tue esigenze.

Non essere arrabbiato per il miglior plugin. Perché ho già cercato sul web e ho trovato quello migliore per te. Quindi, dai un'occhiata al miglior plugin per Image Slider e questo è WordPress Carousel - Responsive Image Slider per WordPress.

Scarica ora

Installazione e attivazione del plug-in Carousel di WordPress

L'installazione e l'attivazione di un plugin sono le stesse per ogni plugin di WordPress. Questi sono il modo più semplice e spero che tu ne sia ben noto. Tuttavia, se non sai come farlo, puoi seguire le linee guida per l'installazione e l'attivazione per ottenere il processo di installazione e attivazione passo dopo passo in dettaglio. Quindi, spero che tu possa finire questo passaggio da solo.

Interfaccia delle impostazioni del plug-in WP Carousel

Una volta terminata l'installazione e l'attivazione del plugin WordPress Carousel, vedrai un nuovo menu di amministrazione chiamato WP Carousel . Sotto questo menu troverai diverse opzioni. La prima volta, l'intera interfaccia appare come la seguente schermata.

Ora, fai semplicemente clic sul pulsante Aggiungi nuovo per creare il primo Slider. Quando fai clic sul pulsante Aggiungi nuovo , ti reindirizzerà a una nuova interfaccia con diverse impostazioni di un singolo dispositivo di scorrimento. Fondamentalmente, ci sono tre sezioni in ogni singola interfaccia di scorrimento.

Tipi di carosello

La prima è l'area superiore contenente il tipo Carousel e alcune impostazioni essenziali. Questa sezione è simile alla schermata seguente.

Questa sezione in alto aiuta a selezionare un tipo di carosello previsto. Sono disponibili un totale di cinque tipi di carosello come Immagine, Post, Prodotto Woo, Contenuto e Video. Puoi selezionare qualsiasi tipo di carosello secondo le tue esigenze. Ma i tipi di carosello di contenuti e video sono disponibili solo per la versione premium di questo plug-in.

Impostazioni del generatore di codici brevi

La sezione centrale di questo plugin contiene le opzioni di impostazione della personalizzazione. Il plug-in Carousel di WordPress è altamente personalizzabile con diverse opzioni di personalizzazione. Esistono quattro tipi di aree di personalizzazione e sono Impostazioni generali, Impostazioni carosello, Impostazioni stile e Impostazioni tipografia. Tuttavia, l'area di personalizzazione è simile alla seguente schermata:

Shortcode e funzione PHP

L'area shortcode genera uno shortcode per ogni singolo slider e l'area template mostra i codici per visualizzare il singolo slider in ogni template. Tuttavia, questa sezione è simile al seguente screenshot-

Crea il tuo primo dispositivo di scorrimento per immagini

Spero che tu abbia una panoramica dell'interfaccia del nostro plugin WordPress Carousel selezionato. Quindi, è giunto il momento di creare il tuo primo dispositivo di scorrimento dell'immagine. Ora, dai il titolo del tuo primo slider e segui le seguenti istruzioni passo dopo passo.

Passaggio 1: tipo di carosello

Dall'area in alto, seleziona il tipo di carosello secondo le tue necessità e completa le impostazioni essenziali. Supponiamo di aver selezionato Tipo di carosello di immagini , quindi aggiungi le immagini secondo le tue necessità.

Passaggio 2: personalizzazione di Image Slider

Nell'area di personalizzazione , personalizza le impostazioni secondo le tue esigenze. Puoi personalizzare il tuo dispositivo di scorrimento navigando tra le diverse schede di personalizzazione. Ci sono molte opzioni per la personalizzazione flessibile per creare un fantastico dispositivo di scorrimento per il tuo sito web.

Istruzioni video

Puoi saltare la lettura dell'intero articolo e ottenere istruzioni brevi e rapide guardando il seguente video-

Passaggio 3: pubblicazione del dispositivo di scorrimento dell'immagine

Ora, il tuo primo dispositivo di scorrimento dell'immagine è completamente pronto per la visualizzazione nella posizione prevista. Quindi, copia lo shortcode generato automaticamente dall'area Shortcode e Template e incollalo dove vuoi per visualizzare il tuo slider.

Ho seguito questo articolo e ho creato il seguente dispositivo di scorrimento dell'immagine con il plug-in Carousel di WordPress .


Hai bisogno di più caratteristiche e funzionalità? Estendi le opzioni di personalizzazione

Spero che tu abbia notato che il plug-in Carousel di WordPress ha molte limitazioni come il contenuto e i tipi di carosello video non sono disponibili. Inoltre, in questa versione non sono disponibili diverse opzioni di personalizzazione. È dovuto all'utilizzo di una versione Premium di questo plugin. Di conseguenza, stai affrontando una serie di limitazioni.

Penso che non ti piacciano queste limitazioni e che tutte le funzionalità siano necessarie. Se la pensi così, c'è un'opportunità per te di abbattere queste limitazioni. La versione premium di questo plugin include molte fantastiche funzionalità. Tuttavia, fai una panoramica di alcune caratteristiche strabilianti-

Supporta qualsiasi tipo di contenuto: puoi far scorrere tutto ciò che desideri come immagine, post, prodotto, contenuto, video, testo, HTML, codici brevi, ecc.

Guarda una demo del carosello di contenuti disponibile solo nella versione premium. Dimostrazione dal vivo

Messaggi di tassonomia diversa: puoi facilmente visualizzare da più categorie, tag, formati o tipi.

Caroselli illimitati: aggiungi caroselli illimitati e visualizzali ovunque ti serva.

Lightbox per immagini: la funzionalità lightbox è disponibile per ogni immagine del dispositivo di scorrimento. Di conseguenza, gli utenti possono facilmente navigare tra le immagini una per una.

Collegamento di immagini: le immagini del dispositivo di scorrimento possono essere collegate. È possibile il collegamento interno ed esterno . Quindi, puoi reindirizzare il tuo visitatore a una posizione target.

Posizione del contenuto: sono disponibili diverse posizioni del contenuto dell'immagine come In basso, a destra e Sovrapponi .

Effetto per le immagini: puoi applicare diversi effetti alle immagini come l' effetto Scala di grigi, Zoom avanti o indietro, Dissolvenza, ecc.

Panoramica di WordPress Carousel Pro

Tipografia avanzata: sono disponibili opzioni di tipografia avanzate. Inoltre, ti offre la completa flessibilità per personalizzare la tipografia secondo le tue esigenze.

Carosello di immagini: puoi creare un carosello di immagini con contenuto e descrizione. Sono disponibili anche diverse posizioni del contenuto come In basso, a destra e Sovrapposizione.

Inoltre, sono incluse le opzioni per mostrare o nascondere la didascalia e la descrizione dell'immagine, la funzionalità lightbox per le immagini, il caricamento lento intelligente, l'effetto Scala di grigi, il ritaglio e altre opzioni.

Carosello dei prodotti: è il modo più semplice per visualizzare i prodotti WooCommerce come un carosello. Inoltre, puoi filtrare i prodotti in base a diverse opzioni e visualizzare il carosello ovunque ti serva.

Carosello di contenuti: mostra qualsiasi tipo di contenuto in un carosello basato sul tuo sito web.

Carosello video: puoi facilmente visualizzare un carosello video con icona, didascalia e descrizione del video, miniatura personalizzata e molte altre funzionalità. Inoltre, sono disponibili diverse opzioni di personalizzazione come modalità carosello, riproduzione automatica, impaginazione, stop al passaggio del mouse, loop infinito, ecc. per creare un fantastico video carosello.

Colori e stili illimitati: puoi personalizzare i colori e gli stili del tuo carosello per renderlo più professionale e accattivante. Sono disponibili oltre 100 opzioni di stile avanzate tra cui oltre 8 diverse posizioni di navigazione.

Controlli del carosello: sono supportati diversi controlli del cursore come l'attivazione o disattivazione della riproduzione automatica, l'impaginazione, l'arresto al passaggio del mouse, il ciclo infinito, la modalità del carosello, ecc. Sono inclusi circa 15+ controlli del carosello.

Carosello duplicato: puoi facilmente duplicare o clonare un carosello. Di conseguenza, ridurrà il tuo tempo e le tue energie.

Larghezza variabile: ora puoi impostare la larghezza variabile per i caroselli. È super facile.

Dimensione immagine personalizzata: puoi impostare una dimensione immagine personalizzata per le immagini del dispositivo di scorrimento. Non devi fare altro. Usa semplicemente l'opzione di dimensione dell'immagine personalizzata.

Opzioni avanzate del plug-in: Opzioni di accodamento o rimozione dalla coda degli script per evitare conflitti. Inoltre, campo CSS personalizzato per sovrascrivere gli stili.

Multilingual Ready: Multilingual Ready con WPML, Polylang, qTranslate-x, GTranslate, Google LT, WPLobus, ecc.

Page Builder pronti: pronti con Gutenberg, WPBakery, Elementor, BeaverBuilder, SiteOrgin, Divi builder, LayersWP, MotoPress, CornerStone, Themify Builder e altro ancora.

Multisito supportato: supporta la rete multisito.

Compatibilità e SEO friendly: questo plugin compatibile con qualsiasi tema e i caroselli sono SEO friendly.

Supporto veloce e amichevole: il sistema di supporto è super veloce. Inoltre, sono disponibili ampi documenti online ed esercitazioni video.

Allora, cosa ci stai pensando in questo momento? Spero che tu sia interessato a dare un'occhiata alla versione premium di questo plugin. Quindi, dai un'occhiata a WordPress Carousel Pro per ottenere fantastiche funzionalità estese.

Ottieni subito la demo dal vivo di Pro