Come creare facilmente uno slider responsive in WordPress

Sei mai capitato su un sito web e sei rimasto colpito da una bellissima galleria scorrevole sulla homepage? È un ottimo modo per mettere in evidenza i tuoi migliori contenuti, ma farla apparire bene su ogni dispositivo può essere un vero grattacapo.

Sappiamo quanto sia frustrante quando uno slider appare perfetto sul tuo computer ma è goffo o rotto su uno smartphone. Una cattiva esperienza mobile può facilmente allontanare i visitatori.

Dopo aver testato decine di strumenti sui nostri siti, abbiamo trovato i modi più semplici per creare slider che funzionano perfettamente ovunque. Non hai bisogno di alcuna competenza di codifica per costruirne uno che catturerà l'attenzione dei tuoi visitatori.

In questo articolo, ti mostreremo alcuni metodi semplici per aggiungere uno slider responsive al tuo sito web WordPress.

Perché aggiungere uno slider responsive WordPress al tuo sito web?

Uno slider di contenuti o una slideshow è un ottimo modo per mettere in evidenza i tuoi prodotti WooCommerce più popolari, i ultimi video di YouTube, le recensioni dei clienti e altro ancora.

Alcuni slider sono in autoplay, quindi si spostano automaticamente tra le slide. Questo ti permette di visualizzare molte informazioni in uno spazio ridotto, lasciando ampio spazio per altri contenuti.

Ricorda solo che la chiave per un ottimo slider è l'utilizzo di immagini di alta qualità ma ben ottimizzate. Questo manterrà il tuo slider nitido senza rallentare il tuo sito web. 👍

Per questo motivo, molti siti web utilizzano slider nelle loro pagine più importanti, come una landing page, la home page o una pagina di vendita.

Anche se uno slider è impostato per l'avvio automatico, i visitatori possono solitamente spostarsi tra le diapositive manualmente utilizzando i pulsanti di navigazione. In questo modo, uno slider incoraggia i visitatori a interagire con il tuo sito, rendendolo più coinvolgente.

Puoi vedere nella GIF qui sotto quanto uno slider video possa rendere dinamica una pagina.

Detto questo, vediamo come puoi creare facilmente uno slider responsive in WordPress. Utilizza semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare.

Metodo 1. Crea uno slider responsive per WordPress utilizzando un plugin (veloce e facile)

Se desideri creare uno slider semplice che abbia un bell'aspetto su desktop e mobile, ti consigliamo di utilizzare il plugin Soliloquy.

Questo plugin per slider di WordPress ti consente di creare diapositive utilizzando immagini dalla tua libreria multimediale e può anche mostrare video ospitati su piattaforme di terze parti come YouTube.

Puoi anche aggiungere testo alternativo e didascalie a ciascuna diapositiva, il che è ottimo per creare contenuti ottimizzati per la SEO.

Innanzitutto, dovrai iscriverti per un account Soliloquy. Dopodiché, potrai installare e attivare il plugin Soliloquy sul tuo sito web. Per maggiori dettagli, segui la nostra guida su come installare un plugin di WordPress.

Dopo l'attivazione, vai su Soliloquy » Impostazioni nella dashboard di WordPress e inserisci la tua chiave di licenza.

La chiave può essere trovata accedendo al tuo account sul sito web di Soliloquy. Dopo aver inserito queste informazioni, fai clic sul pulsante ‘Verifica chiave’.

Fatto ciò, puoi aggiungere un nuovo slider al tuo sito web WordPress andando su Soliloquy » Aggiungi nuovo.

Puoi iniziare digitando un titolo. Questo è solo per tuo riferimento, quindi puoi usare qualsiasi cosa che ti aiuti a identificare lo slider nella tua dashboard di WordPress.

Successivamente, è ora di aggiungere immagini e video allo slider. Puoi trascinare e rilasciare i file sull'editor o fare clic su 'Seleziona file da altre origini'.

Se desideri utilizzare immagini, puoi aggiungere tali file nello stesso modo in cui aggiungi immagini nell'editor a blocchi di WordPress.

Se desideri includere video, ti consigliamo di caricarli su un sito di hosting video come YouTube o Vimeo. Caricare video direttamente sul tuo sito web non è una buona idea, poiché può rallentare il tuo sito e occupare molto spazio di archiviazione.

Nel frattempo, piattaforme come YouTube sono ottimizzate per i video, quindi puoi mostrare video ad alta risoluzione nei tuoi slider senza influire negativamente sul tuo sito web.

Dopo aver scelto una piattaforma di hosting video, devi caricare tutti i video che desideri includere nello slider di WordPress. Se non sei sicuro su come caricare i video, ti consigliamo di leggere la documentazione ufficiale o il manuale utente della piattaforma video scelta.

Fatto ciò, fai semplicemente clic sul pulsante 'Seleziona file da altre origini' e quindi seleziona 'Inserisci diapositiva video'.

Ora puoi procedere e incollare l'URL del video nel campo 'URL video'.

Soliloquy mostra tutti i formati di link supportati sul lato destro, quindi assicurati che il tuo link utilizzi uno di questi formati.

Una volta fatto, puoi digitare un titolo nel campo 'Titolo'. Questo è solo per riferimento, quindi puoi usare quello che vuoi. Puoi anche aggiungere testo alternativo, che aiuterà i motori di ricerca a capire di cosa tratta questa diapositiva.

Dopo di che, puoi inserire una didascalia opzionale nel campo 'Didascalia'. Questa verrà mostrata in una barra grigia in fondo al video prima che il visitatore prema 'Play'.

Se non vuoi mostrare questa barra, lascia semplicemente vuoto il campo 'Didascalia'.

Quando sei soddisfatto delle informazioni inserite, puoi creare altre diapositive facendo clic su 'Aggiungi un'altra diapositiva video'.

Per configurare questa nuova diapositiva, segui semplicemente lo stesso processo descritto sopra.

Una volta create tutte le tue diapositive, procedi facendo clic su 'Inserisci nello slider'.

Ora vedrai tutte le tue diapositive nella sezione 'Attualmente nel tuo slider'.

Successivamente, puoi fare clic sulla scheda 'Configurazione' e utilizzare le impostazioni dello slider per personalizzarlo. Ad esempio, puoi scegliere un nuovo tema per lo slider, modificare le dimensioni dell'immagine e cambiare la posizione dello slider e delle didascalie.

Puoi anche personalizzare le frecce dello slider e il pulsante di pausa/riproduzione, regolare la velocità di transizione, cambiare il tempo di ritardo e altro ancora.

Successivamente, vorrai assicurarti che il tuo slider sia bello sui dispositivi mobili come lo è sui computer e laptop.

Detto questo, fai clic sulla scheda 'Mobile' e seleziona la casella accanto a 'Crea immagini slider per dispositivi mobili'.

Puoi quindi digitare le dimensioni che desideri utilizzare per le immagini e i video sui dispositivi mobili. Prendendo queste decisioni, potrebbe esserti d'aiuto visualizzare la versione mobile del tuo sito WordPress su un desktop.

Per impostazione predefinita, Soliloquy nasconderà le didascalie per gli utenti mobili. Spesso, questo aiuta le diapositive a adattarsi più comodamente agli schermi più piccoli tipicamente utilizzati da smartphone e tablet.

Per questo motivo, consigliamo di lasciare questa impostazione disabilitata, ma puoi selezionare la casella accanto a 'Mostra didascalie su mobile' se preferisci.

Fatto ciò, fai clic sulla scheda 'Varie'. Qui puoi aggiungere CSS personalizzato al tuo slider, modificare il titolo e lo slug dello slider ed esportare lo slider.

Quando sei soddisfatto della configurazione dello slider, fai clic sul pulsante 'Pubblica'.

Soliloquy creerà automaticamente uno shortcode che puoi aggiungere a qualsiasi pagina, post o area pronta per i widget.

Per maggiori informazioni su come posizionare lo shortcode, consulta la nostra guida su come aggiungere uno shortcode in WordPress.

Per gli utenti avanzati, Soliloquy fornisce anche snippet di codice che possono essere aggiunti direttamente ai file del tuo tema WordPress. Questo metodo offre un controllo più preciso ma è consigliato solo se ti senti a tuo agio nell'editare il codice. Per la maggior parte degli utenti, attenersi al blocco o allo shortcode è il modo più semplice e sicuro!

Per istruzioni dettagliate, consulta la nostra guida su come aggiungere facilmente codice personalizzato in WordPress.

Il modo più semplice per aggiungere lo slider al tuo sito è utilizzare il blocco Soliloquy nell'editor di Gutenberg. Vai semplicemente alla pagina o al post in cui desideri mostrare lo slider e quindi fai clic sul pulsante '+'.

Nel popup che appare, digita 'Soliloquy'.

Quando appare il blocco corretto, fai clic per aggiungerlo al tuo blog o sito web WordPress.

Dopodiché, apri il blocco Soliloquy e seleziona lo slider che hai appena creato.

Ora puoi fare clic sul pulsante 'Aggiorna' o 'Pubblica' per rendere lo slider attivo.

Metodo 2. Crea uno slider responsive utilizzando un page builder (più personalizzabile)

Se desideri creare un semplice slider video o immagine, un plugin come Soliloquy è un'ottima scelta. Tuttavia, se desideri integrare perfettamente uno slider in un design di pagina completamente personalizzato, come una landing page o una homepage, ti consigliamo invece di utilizzare un plugin page builder.

SeedProd è il miglior costruttore di pagine WordPress drag-and-drop. Ti consente di progettare landing page personalizzate e persino di creare un tema WordPress personalizzato senza dover scrivere una singola riga di codice.

Ha anche un blocco Carosello Immagini che puoi utilizzare per creare slider straordinari.

Puoi semplicemente trascinare questo blocco pronto all'uso ovunque in una pagina e quindi personalizzarlo utilizzando il potente editor drag-and-drop.

Innanzitutto, devi installare e attivare il plugin SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo aver attivato il plugin, SeedProd ti chiederà la tua chiave di licenza.

Puoi trovare questa chiave di licenza nel tuo account sul sito web di SeedProd. Dopo aver inserito le informazioni, fai clic sul pulsante 'Verifica chiave'.

Fatto ciò, vai su SeedProd » Landing Pages nella tua bacheca di WordPress.

1. Scegli un modello di pagina

SeedProd offre oltre 180 modelli progettati professionalmente che sono raggruppati in categorie. In alto, vedrai categorie che ti consentono di creare bellissime pagine 'coming soon', attivare la modalità di manutenzione, creare una pagina di accesso personalizzata per WordPress e altro ancora.

Tutti i modelli di SeedProd sono facili da personalizzare, quindi puoi usare qualsiasi design desideri. Quando trovi un modello che ti piace, passa semplicemente il mouse sopra di esso e fai clic sull'icona del segno di spunta.

Ora puoi digitare un nome per la tua landing page nel campo 'Nome pagina'. SeedProd creerà automaticamente un 'URL pagina' utilizzando il nome della pagina.

È intelligente includere parole chiave pertinenti in questo URL ove possibile, poiché ciò aiuterà i motori di ricerca a capire di cosa tratta la pagina. Questo può spesso migliorare il tuo SEO di WordPress.

Per modificare l'URL generato automaticamente della pagina, digita semplicemente nel campo 'URL pagina'.

Quando sei soddisfatto delle informazioni inserite, fai clic su 'Salva e inizia a modificare la pagina'. Questo caricherà l'interfaccia del page builder di SeedProd.

2. Personalizza il layout della tua pagina

Il builder drag-and-drop di SeedProd mostra un'anteprima live del design della tua pagina sulla destra. Sulla sinistra c'è un menu con tutti i diversi blocchi e sezioni che puoi aggiungere alla pagina.

Quando trovi un blocco che vuoi aggiungere, semplicemente trascinalo e rilascialo sul tuo modello.

Per personalizzare un blocco, fai clic per selezionare quel blocco nell'editor di SeedProd. Il menu di sinistra si aggiornerà per mostrare tutte le impostazioni che puoi utilizzare per personalizzarlo.

Mentre costruisci la pagina, puoi spostare i blocchi nel tuo layout trascinandoli e rilasciandoli. Per istruzioni più dettagliate, consulta la nostra guida su come creare una landing page con WordPress.

3. Aggiungi e Progetta il Tuo Slider Responsive

Per creare uno slider responsive utilizzando SeedProd, semplicemente trova il blocco Carosello di immagini nel menu di sinistra e trascinalo sul tuo layout.

Successivamente, fai clic per selezionare il blocco Carosello di immagini nell'editor della pagina.

Ora puoi procedere e aggiungere tutte le immagini che desideri mostrare nello slider. Per iniziare, fai clic sull'elemento 'Immagine 1' che SeedProd crea per impostazione predefinita.

Ora puoi utilizzare una foto dalla libreria integrata di SeedProd oppure fare clic su 'Usa la tua immagine' e scegliere un file dalla libreria multimediale di WordPress.

Dopo aver scelto un'immagine, puoi aggiungere una didascalia che apparirà sotto quell'immagine. SeedProd non visualizza le didascalie per impostazione predefinita, ma ti mostreremo come abilitarle più avanti in questo post.

Quando sei soddisfatto di come è configurata la diapositiva, fai clic sul pulsante 'Aggiungi immagini' per creare un'altra diapositiva.

Per aggiungere altre diapositive, segui semplicemente lo stesso processo descritto sopra.

Dopo aver aggiunto tutte le immagini al tuo slider, è ora di personalizzare l'aspetto e il comportamento dello slider.

Nel menu di sinistra, fai clic per espandere la sezione 'Impostazioni carosello'.

Per iniziare, puoi passare dalla modalità chiara a quella scura per i pulsanti di navigazione dello slider.

Per provare queste diverse modalità, fai clic sui pulsanti accanto a 'Modalità colore navigazione'. L'anteprima live si aggiornerà automaticamente in modo da poter vedere quale modalità preferisci.

Per impostazione predefinita, il carosello mostra una singola diapositiva e i visitatori dovranno utilizzare i controlli di navigazione per vedere altri contenuti.

Tuttavia, potresti voler mostrare più diapositive contemporaneamente aprendo il menu a discesa 'Diapositive da mostrare' e scegliendo un numero dall'elenco. Questo può essere utile se lo slider ha molti contenuti e temi che i visitatori potrebbero non fare clic su tutte le diapositive.

Per impostazione predefinita, i visitatori dovranno fare clic per vedere la diapositiva successiva. Tenendo conto di ciò, potresti voler abilitare la riproduzione automatica, poiché ciò aumenta spesso il numero di diapositive che un visitatore vede.

Per fare ciò, fai clic per abilitare l'interruttore 'Autoplay' e quindi specifica quanto tempo ogni diapositiva dovrebbe rimanere sullo schermo digitando un numero in 'Autoplay Speed'.

Se hai aggiunto didascalie alle tue immagini, assicurati di fare clic sul cursore 'Show Caption' per impostarlo da 'No' a 'Yes'.

Puoi anche cambiare l'allineamento della didascalia.

A seconda del colore di sfondo, potrebbe essere necessario cambiare il colore della didascalia prima che sia visibile ai visitatori.

Per fare ciò, fai clic sulla scheda 'Advanced' e quindi utilizza le impostazioni 'Caption Color'.

Puoi ulteriormente stilizzare il testo facendo clic sul pulsante 'Edit' accanto a 'Caption Typography'.

Questo aggiunge alcune impostazioni in cui puoi cambiare la dimensione del carattere, l'altezza della linea, lo spazio e altro ancora.

Quando sei soddisfatto dell'aspetto delle didascalie, puoi aggiungere diverse ombreggiature alle diapositive utilizzando il menu a discesa 'Slider Image Styles'.

Queste ombreggiature possono davvero far risaltare le diapositive, quindi vale la pena provare diverse ombreggiature per vedere se si adattano al design della tua pagina.

Nella scheda 'Advanced' troverai anche impostazioni che ti consentono di aggiungere un bordo, cambiare lo spazio e persino creare un'animazione di ingresso.

Sentiti libero di esplorare queste impostazioni avanzate per vedere tutti i diversi effetti che puoi creare. Ad esempio, puoi aggiungere un bordo per far risaltare il tuo slider o utilizzare animazioni per catturare l'attenzione del tuo visitatore! ✨

4. Pubblica la tua landing page

Quando sei soddisfatto di come appare lo slider, puoi continuare a lavorare sul resto della pagina. Trascina semplicemente i blocchi sul tuo design e poi personalizzali utilizzando le impostazioni nel menu a sinistra.

Se desideri eliminare un blocco, posiziona il cursore del mouse su di esso e fai clic sull'icona del cestino quando appare.

Quando richiesto, fai clic su ‘Sì, eliminalo.’

Quando sei soddisfatto dell'aspetto della pagina, fai clic sul pulsante ‘Salva’ per renderla attiva. Infine, seleziona ‘Pubblica’ per rendere attivo il tuo slider.

Metodo 3. Crea uno slider utilizzando Smash Balloon (ideale per post e recensioni social)

È più probabile che proviamo cose che vediamo altri acquistare, utilizzare o consigliare. Ecco perché è una buona idea mostrare la prova sociale sul tuo sito web, incluse recensioni dei clienti, testimonianze o anche commenti positivi sui social media.

Il modo più semplice per mostrare la prova sociale sul tuo sito è utilizzare Smash Balloon. Smash Balloon dispone di plugin che ti consentono di incorporare contenuti da Instagram, Facebook, Twitter e YouTube.

Dispone inoltre di un plugin per il feed delle recensioni che puoi utilizzare per visualizzare recensioni da Facebook, Tripadvisor, Yelp, Trustpilot, WordPress.org e Google.

Tuttavia, mostrare molti commenti e recensioni positive sul tuo negozio online o sito web può occupare molto spazio.

Ecco perché Smash Balloon è dotato di layout e modelli di carosello integrati che puoi utilizzare per creare slider responsive. Ciò ti consente di creare slideshow di social media e recensioni con pochi clic.

Ancora meglio, Smash Balloon recupererà automaticamente i nuovi contenuti in modo che lo slider mostri sempre gli ultimi post.

Un'altra opzione è mostrare i contenuti dai tuoi account di social media.

Se ai visitatori piace quello che vedono, potrebbero decidere di seguirti sui social media.

Per aiutarti a ottenere più follower, Smash Balloon è dotato di pulsanti di invito all'azione pronti all'uso che puoi aggiungere ai tuoi slider.

Per istruzioni dettagliate passo dopo passo, consulta le nostre guide su come aggiungere feed di social media a WordPress e come mostrare recensioni di Google, Facebook e Yelp in WordPress.

Domande frequenti sugli slider responsive

Il nostro team riceve molte domande sull'uso degli slider in WordPress. Di seguito sono riportate le risposte ad alcune delle più comuni che sentiamo dai nostri lettori.

Cos'è uno slider responsive per WordPress?

Uno slider responsive è un componente di slideshow che regola automaticamente le sue dimensioni e il layout per adattarsi a qualsiasi schermo. Ciò garantisce che abbia un bell'aspetto e sia facile da usare su desktop, tablet e smartphone.

Gli slider sono dannosi per la SEO?

Mentre gli slider codificati male possono rallentare il tuo sito e danneggiare la SEO, i plugin moderni sono costruiti tenendo conto delle prestazioni. Ad esempio, un plugin come Soliloquy utilizza il caricamento pigro e una struttura HTML corretta per essere SEO-friendly.

È anche importante aggiungere testo alternativo descrittivo alle immagini delle tue slide. Questo aiuta i motori di ricerca a comprendere i tuoi contenuti.

Gli slider rallentano il tuo sito web?

Gli slider possono influire sui tempi di caricamento della pagina se contengono file di immagini di grandi dimensioni e non ottimizzati. Tuttavia, i migliori plugin per slider di WordPress sono leggeri e ottimizzati per la velocità.

Per assicurarti che il tuo slider non rallenti il tuo sito, ti consigliamo di comprimere le tue immagini prima di caricarle su WordPress. Questo riduce le loro dimensioni del file senza sacrificare la qualità.

Qual è il miglior plugin per slider responsive per WordPress?

Il miglior plugin dipende dalle tue esigenze specifiche. Consigliamo Soliloquy come la migliore scelta complessiva per la sua facilità d'uso e le prestazioni veloci.

Se vuoi creare layout di pagina personalizzati, il blocco Carosello di immagini di SeedProd offre maggiore flessibilità di progettazione. Per visualizzare feed di social media o recensioni dei clienti in uno slider, Smash Balloon è lo strumento perfetto.

Risorse aggiuntive

Speriamo che questo articolo ti abbia aiutato a imparare come creare facilmente uno slider responsive in WordPress. Potresti anche voler consultare queste altre guide sul nostro sito:

• Come creare uno slider WordPress per video e immagini (il modo più semplice)
• I migliori plugin PDF per WordPress (visualizzatore, incorporamento e download)

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.