Gli slider di contenuto sono comuni in WordPress al giorno d'oggi, ma di solito vengono utilizzati solo in una gamma molto limitata di circostanze: tipicamente, si trovano nelle home page, per mostrare post recenti o gallerie di immagini. Si sta sviluppando una nuova tendenza, in cui i siti web WordPress utilizzano il potenziale e la flessibilità degli slider di contenuto per raccontare storie avvincenti che motivano i visitatori ad agire, ovvero sotto forma di tour del prodotto.
L'utilizzo di uno slider di contenuto per il tour del prodotto WordPress può aiutarti a vendere meglio i prodotti guidando gli utenti attraverso i punti chiave al proprio ritmo: questo è meglio che usare semplicemente un video, perché possono saltare avanti/indietro a punti specifici e definiti, invece di dover indovinare un timecode. Inoltre, l'utilizzo di uno slider di contenuto in questo modo sfrutta tutti i tipi di media web, il che significa che puoi includere contenuti interattivi nelle slide, invece di costringere l'utente a guardare passivamente un video.
Fino a poco tempo fa, era necessario conoscere il codice per creare qualsiasi cosa tranne i tour del prodotto con slider di contenuto più semplici, ma abbiamo utilizzato un fantastico plugin per slider chiamato SlideDeck 2 che cambia tutto questo.
Questo potente plugin rende super-semplice creare fantastici slider in pochi minuti, senza bisogno di scrivere una sola riga di codice. Abbiamo trattato un'altra delle robuste funzionalità di SlideDeck 2 in un post precedente, ma il loro ultimo aggiornamento ti consente di creare slider di contenuti personalizzati e di adattare il contenuto di ogni slide per creare presentazioni accattivanti che motivano i tuoi visitatori ad agire. Abbiamo preparato questa rapida guida per mostrarti come creare un fantastico tour di prodotti per il tuo sito WordPress utilizzando SlideDeck 2.
Acquisto e installazione del plugin
Prima di tutto: le slide di contenuti personalizzati sono una funzionalità premium in SlideDeck 2, quindi dovrai acquistarlo per usarlo sul tuo sito. Ti consigliamo di visitare il sito web di SlideDeck e acquistare il plugin – per la potenza che contiene, è piuttosto economico e puoi facilmente effettuare l'aggiornamento per ottenere funzionalità migliori e usarlo su più siti.
Per sbloccare la funzionalità Contenuti personalizzati, dovrai acquistare il pacchetto Professional o Developer, quindi installare il plugin più un 'Addon' che sblocca le funzionalità aggiuntive.
Per installare il plugin, puoi seguire la nostra pratica Guida passo passo all'installazione di un plugin WordPress.
Terminologia
Prima di iniziare, ci sono alcuni termini che dovremmo spiegare:
- Tipo di Diapositiva – Ci sono 4 diversi tipi di diapositive, ognuno progettato per ospitare un particolare tipo di contenuto: immagine, video, testo e HTML.
- Lente – Le Lenti sono come temi per il tuo slider di contenuti. Controllano l'aspetto e il comportamento del tuo slider, così come il modo in cui il contenuto viene presentato sulla pagina. Proprio come con i temi di WordPress, applicare una Lente diversa al tuo contenuto richiede solo pochi secondi e può produrre un aspetto e una sensazione significativamente diversi per il tuo slider.
Ok, ora che il gergo è stato chiarito, procedi ad attivare SlideDeck 2 e iniziamo!
Creazione di uno SlideDeck di Contenuti Personalizzati
Ti mostreremo come creare uno slider di contenuti per un tour del prodotto che mescola quattro diversi tipi di contenuto, utilizzando la funzionalità Contenuti Personalizzati di SlideDeck. Inizia facendo clic su "Gestisci" per accedere alla dashboard principale. Questa schermata ti consente di creare nuovi SlideDecks e ordinare i tuoi SlideDecks esistenti.
Nella sezione Contenuti personalizzati, fai clic sul pulsante blu “Crea SlideDeck”. Verrai portato alla schermata Editor contenuti personalizzati per creare la tua prima diapositiva. Una volta arrivato all'Editor contenuti personalizzati, inizia dando un nome al tuo SlideDeck. Noterai che la tua prima diapositiva è stata creata e hai una scelta tra tre o quattro diversi tipi di diapositiva, a seconda del pacchetto di SlideDeck 2 che stai utilizzando: gli utenti del pacchetto Professional avranno accesso ai tipi di diapositiva Immagine, Video e Testo; gli utenti del pacchetto Developer potranno scegliere il tipo di diapositiva HTML oltre a questi tre.
Sotto questo menu a comparsa si trova una delle caratteristiche più uniche di SlideDeck 2: la finestra di anteprima live (è uno dei motivi per cui SlideDeck 2 è un plugin WordPress consigliato nel Blueprint di WPBeginner). Qui, vedrai il tuo slider aggiornarsi in tempo reale mentre lo modifichi.
Iniziare con una diapositiva immagine
Iniziamo con una diapositiva immagine, qualcosa che dia ai nostri visitatori una panoramica rapida e visivamente accattivante del tour che stanno per intraprendere. Fai clic sul tipo di diapositiva “Diapositiva immagine”. Il menu a comparsa si aggiornerà per mostrarti tutte le opzioni pertinenti alla creazione di una diapositiva immagine:
Carica un'immagine | Specifica un URL – Scegli se vuoi caricare la tua immagine nella Libreria multimediale di WordPress o semplicemente incollare un URL, se è ospitata altrove.
Didascalia | Testo del corpo | Nessuno – Indica a SlideDeck se desideri una didascalia testuale sovrapposta all'immagine o un breve testo di accompagnamento. In alternativa, puoi semplicemente mostrare l'intera immagine, senza testo associato.
Link diapositiva – Specifica un URL da visitare, se l'utente fa clic in qualsiasi punto della diapositiva.
Titolo – Assegna un titolo alla diapositiva da mostrare nelle aree didascalia o testo del corpo.
Descrizione – Inserisci il testo della descrizione per la diapositiva. Puoi inserire testo formattato qui!
Posizione didascalia – Determina la posizione del testo sovrapposto sulla diapositiva. Le didascalie possono essere in alto/in basso e il testo del corpo può essere a sinistra/a destra.
Una volta impostata la diapositiva come desideri, premi semplicemente il pulsante "Applica" e l'area di anteprima live si aggiornerà per mostrarti la tua prima diapositiva. Nel nostro esempio, abbiamo creato la nostra diapositiva specificando un URL, con una didascalia in basso e nessun link alla diapositiva.
Quindi, questa è la nostra prima diapositiva di Contenuto personalizzato creata – facile, vero? Ora, ne aggiungeremo una seconda per inserire un video che mostri la demo del nostro prodotto.
Creazione della diapositiva video
SlideDeck 2 supporta contenuti video da tre fonti – YouTube, Vimeo e Dailymotion – il che significa che tutto ciò che dobbiamo fare è caricare il video demo del nostro prodotto su uno di questi servizi e poi incollare l'URL della pagina del video e premere "Aggiorna".
Come con il tipo di diapositiva Immagine, puoi scegliere di aggiungere un titolo e una breve didascalia o paragrafo di testo per dare ai tuoi visitatori un'idea di ciò che vedranno nel video. Per impostazione predefinita, SlideDeck 2 utilizzerà il contenuto della didascalia presente sulla tua pagina YouTube/Vimeo/Dailymotion, ma puoi modificarlo per adattarlo alle tue esigenze per il tour del prodotto.
Come prima, fai clic su Applica e scorri rapidamente il cursore: ora potrai andare avanti e indietro tra le diapositive di immagini e video.
Creazione di una diapositiva di testo
A volte, hai solo bisogno di spazio per del testo, ad esempio per mostrare un elenco di funzionalità o per condividere una citazione di una recensione entusiasta del prodotto. In casi come questo, possiamo utilizzare il tipo di diapositiva Testo.
Questo è un tipo di diapositiva molto semplice, con solo alcune opzioni da considerare:
Layout – Il layout di base posiziona semplicemente il titolo in cima alla diapositiva, con il testo che scorre sotto. Multi-colonna offre più un formato simile a un giornale, impaginando automaticamente il testo in due colonne. Citazione in blocco ti consente di evidenziare un breve frammento di testo con una tipografia grande e in grassetto. Come prima, fai clic su Applica per aggiungere la diapositiva al tuo SlideDeck.
Riorganizzazione delle diapositive
A questo punto, potresti pensare di voler iniziare con la tua diapositiva video invece che con l'immagine, in modo da coinvolgere subito gli utenti nel tour. SlideDeck ti consente di farlo istantaneamente: nell'area dell'intestazione della diapositiva, fai clic e trascina la diapositiva video e rilasciala nello spazio luminoso a sinistra della diapositiva immagine. Super semplice!
Andare oltre: utilizzo del tipo di diapositiva HTML
Il tipo di diapositiva HTML è una potente aggiunta al pacchetto Developer di SlideDeck 2, che ti consente di inserire il tuo codice HTML in una diapositiva. È perfetto per layout più complessi del tuo contenuto o per aggiungere interazioni più potenti al tuo slider di contenuto. Ad esempio, puoi incorporare un modulo di iscrizione, in modo che i clienti possano scegliere di ricevere una newsletter via email alla fine del tour del prodotto, una potente call-to-action, se mai ce ne fosse una!
Seleziona il tipo di diapositiva HTML per rivelare l'editor HTML nel menu a comparsa.
Nel campo Inserisci HTML, puoi incollare il tuo codice personalizzato. Noterai che colora automaticamente i diversi tag per aiutarti a verificare che sia strutturato correttamente. Alcuni punti importanti da notare:
- Puoi includere regole di stile CSS per il contenuto della diapositiva tra i tag <style></style>, e si applicheranno a tutte le diapositive nel SlideDeck
- Poiché l'anteprima live di SlideDeck non è in grado di prevedere come gli stili del tuo tema potrebbero interagire con il tuo slider di contenuti, per uno styling complesso otterrai un'anteprima più accurata se la visualizzi nella pagina in cui intendi pubblicare il tuo SlideDeck.
Con il codice inserito, premi Applica e la diapositiva verrà aggiunta alla rotazione.
Configurazione della lente
Hai ora creato il tuo primo SlideDeck di contenuti personalizzati! Vai avanti e prenditi qualche minuto per scorrere le diapositive nell'anteprima live e goditi la soddisfazione di un lavoro ben fatto.
Ora è il momento di renderlo perfettamente integrato con il tuo sito configurando la tua lente. SlideDeck contiene un'enorme quantità di opzioni per controllare l'aspetto del tuo nuovo tour del prodotto personalizzando la lente.
Salvataggio e pubblicazione del tuo SlideDeck
Contenuti fantastici? Fatto. Tema accattivante scelto e personalizzato? Fatto. Sembra che tu sia pronto per pubblicare il tuo nuovo tour del prodotto e convertire i tuoi visitatori in clienti!
SlideDeck offre tre modi per incorporare i tuoi slider nel tuo sito WordPress: inserendoli nel contenuto di una pagina o di un post esistente, creando una nuova pagina o post con lo slider incorporato e, infine, inserendoli nel modello della tua pagina, che è molto probabilmente la tua migliore opzione se vuoi aggiungere il tour del prodotto alla tua homepage.
Conclusione
Sebbene gli slider di contenuto siano solitamente utilizzati solo per gallerie di immagini o post in evidenza, SlideDeck 2 ti offre un'enorme flessibilità per esplorare il potenziale degli slider di contenuto per creare esperienze coinvolgenti che mantengano i tuoi visitatori interessati e li facciano tornare. Noi di WPBeginner ti raccomandiamo vivamente di provarlo! Un esempio live di come stiamo utilizzando uno SlideDeck personalizzato può essere visto nella nostra pagina Configurazione Gratuita Blog WordPress.
Hai un esempio di SlideDeck che vuoi condividere? Faccelo sapere nei commenti! Inoltre, dai un'occhiata alla prima parte di questa serie, dove ti mostriamo come creare SlideDeck con Sorgenti Dinamiche.
Gli slider con interfaccia touch sono il futuro del web design. Ottieni SlideDeck Ora. Usa il codice coupon: WPB-SD2 per ottenere uno sconto del 20%.
Hai una domanda o un suggerimento? Lascia un commento per iniziare la discussione.