I cursori di contenuto sono ormai una consuetudine in WordPress, ma di solito vengono utilizzati solo in un numero molto limitato di circostanze: di solito si trovano sulle homepage, per mostrare gli articoli recenti o le gallerie di immagini. Si sta sviluppando una nuova tendenza: i siti web WordPress sfruttano il potenziale e la flessibilità dei cursori di contenuto per raccontare storie avvincenti che motivano i visitatori a compiere un’azione, ad esempio sotto forma di tour dei prodotti.
L’utilizzo di un cursore di contenuti per il vostro tour dei prodotti su WordPress può aiutarvi a vendere meglio i prodotti, guidando gli utenti attraverso i punti chiave al loro ritmo – questo è meglio del semplice utilizzo di un video, perché possono saltare indietro/avanti a punti specifici e definiti, invece di dover indovinare il timecode. Inoltre, l’utilizzo di un content slider in questo modo sfrutta tutti i tipi di media web, consentendo di 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 più semplici tour dei prodotti con slider di contenuti, ma da qualche tempo utilizziamo un fantastico plugin per slider chiamato SlideDeck 2 che cambia tutto questo.
Questo potente plugin rende super-semplice la creazione di fantastici slider in pochi minuti, senza che sia necessaria una sola riga di codice. In un articolo precedente abbiamo copreso una delle caratteristiche di SlideDeck 2, ma il suo ultimo aggiornamento vi abilita a costruire slide personalizzate e a personalizzare il contenuto di ogni slide per creare presentazioni avvincenti che motivino i vostri visitatori ad agire. Abbiamo messo insieme questa guida rapida per mostrarvi come creare un tour di prodotti per il vostro sito WordPress utilizzando SlideDeck 2.
Acquisto e installazione del plugin
Prima di tutto: Le slide personalizzate sono una caratteristica premium di SlideDeck 2, quindi dovrete acquistarla per poterla utilizzare sul vostro sito. Vi consigliamo di andare sul sito web di SlideDeck e acquistare il plugin: per la potenza che contiene, è piuttosto economico e potete facilmente aggiornarlo per ottenere caratteristiche migliori e utilizzarlo su più siti.
Per sbloccare la caratteristica dei contenuti personalizzati, è necessario acquistare il pacchetto Professional o Developer, quindi installare il plugin e un ‘Add-on’ che sblocca le caratteristiche aggiuntive.
Per installare il plugin, potete seguire la nostra pratica Guida passo-passo all’installazione di un plugin per WordPress.
Terminologia
Prima di iniziare, è necessario spiegare alcuni termini:
- Tipo di slide – Esistono 4 tipi diversi di slide, ciascuno progettato per ospitare un particolare tipo di contenuto: immagini, video, testo e HTML.
- Lenti – Le lenti sono come temi per il vostro cursore di contenuti. Controllano l’aspetto e il comportamento del cursore e il modo in cui il contenuto viene presentato sulla pagina. Come per i temi di WordPress, l’applicazione di una lente diversa ai contenuti richiede solo pochi secondi e può dare un aspetto e una sensazione significativamente diversi al vostro cursore.
Ok, ora che il gergo è stato eliminato, attivate SlideDeck 2 e iniziamo!
Creare uno SlideDeck di contenuto personalizzato
Vi mostreremo come creare uno slider che mescola quattro diversi tipi di contenuto, utilizzando la caratteristica Contenuto personalizzato di SlideDeck. Iniziate facendo clic su “Gestisci” per accedere alla Bacheca principale. Questo schermo permette di creare nuovi SlideDeck e di ordinare quelli esistenti.
Nella sezione Contenuto personalizzato, fate clic sul pulsante blu “Crea SlideDeck”. Verrà visualizzato lo schermo dell’Editore di contenuti personalizzati per creare la prima slide. Una volta arrivati all’editore di contenuti personalizzati, iniziate a dare un nome al vostro SlideDeck. Noterete che la vostra prima slide è stata creata e che avete la possibilità di scegliere tra tre o quattro diversi tipi di slide, a seconda del pacchetto di SlideDeck 2 che state utilizzando: gli utenti del pacchetto Professional avranno accesso ai tipi di slide Immagine, Video e Testo; gli utenti del pacchetto Developer potranno scegliere il tipo di slide HTML in aggiunta a questi tre.
Sotto questo menu a comparsa si trova una delle caratteristiche più uniche di SlideDeck 2: la finestra di anteprima dal vivo (è uno dei motivi per cui SlideDeck 2 è un plugin WordPress raccomandato nel Blueprint di WPBeginner). Qui si vede l’aggiornamento del cursore in tempo reale mentre lo si modifica.
Iniziare con una slide di immagini
Cominciamo con una slide di immagini, che dia ai visitatori una panoramica rapida e visivamente accattivante del tour che chi siamo sta per fare. Fate clic sul tipo di slide “Image Slide”. Il menu a comparsa si ricarica per mostrare tutte le opzioni pertinenti alla creazione di una slide immagine:
Carica un’immagine | Specifica un URL – Scegliete se volete caricare l’immagine nella Galleria media di WordPress o se volete semplicemente incollare un URL, se è ospitata altrove.
Didascalia | Testo corpo | Nessuno – Indicate a SlideDeck se volete una didascalia di testo in overlay sull’immagine o un breve testo contenuto che la accompagni. In alternativa, è possibile mostrare semplicemente l’intera immagine, senza testo associato.
Collegamenti alla slide – Specificare un URL da visitare se l’utente fa clic su un punto qualsiasi della slide.
Titolo – Assegnare alla slide un titolo da visualizzare nell’area di didascalia o in quella di testo.
Descrizione – Inserire la descrizione della slide. È possibile inserire qui un rich text!
Posizione didascalia – Determina la posizione dell’overlay di testo sulla slide. Le didascalie possono andare in alto/basso, mentre il testo contenuto può andare a sinistra/destra.
Una volta impostata la diapositiva nel modo desiderato, è sufficiente premere il pulsante “Applica” e l’area dell’Anteprima dal vivo si ricarica per mostrare la prima diapositiva. Nel nostro esempio, abbiamo costruito la nostra slide specificando un URL, con una didascalia in basso e nessun collega alla slide.
Ecco creata la nostra prima slide sui contenuti personalizzati: facile, no? Ora ne aggiungeremo una seconda per aggiungere un video che mostri la demo del nostro prodotto.
Creazione della slide video
SlideDeck 2 supporta contenuti video provenienti da tre fonti: YouTube, Vimeo e Dailymotion. Ciò significa che tutto ciò che dobbiamo fare è uploadare il video dimostrativo del nostro prodotto su uno di questi servizi, quindi incollare l’URL della pagina del video e premere “Aggiorna”.
Come per il tipo di slide Immagine, potete scegliere di aggiungere un titolo e una breve didascalia o un paragrafo di testo per dare ai visitatori un’idea di ciò che vedranno nel video. Di default, SlideDeck 2 inserisce il contenuto della didascalia presente sulla vostra pagina YouTube/Vimeo/Dailymotion, ma potete adattarlo alle vostre esigenze per il tour del prodotto.
Come in precedenza, fate clic su Applica e fate un rapido clic sulla slide: ora sarete in grado di andare avanti e indietro tra le immagini e i video.
Creazione di una slide di testo
A volte è necessario uno spazio per il testo, ad esempio per mostrare un elenco di caratteristiche o per condividere una citazione da una recensione entusiasta del prodotto. In questi casi, si può usare il tipo di slide Testo.
Si tratta di un tipo di slide molto semplice, con poche opzioni da considerare:
Layout – Il layout di base colloca semplicemente il titolo in alto nella slide, mentre il testo scorre sotto. Multi-colonna offre un formato più simile a quello di un giornale, wrapando automaticamente il testo in due colonne. La citazione a blocchi consente di evidenziare un breve frammento di testo con caratteri grandi e grassetti. Come prima, hit Applica per aggiungere la slide allo SlideDeck.
Riorganizzazione delle slide
A questo punto, potreste pensare di iniziare con la slide video invece che con l’immagine, in modo da far interagire e coinvolgere subito gli utenti con il tour. SlideDeck vi permette di farlo immediatamente: nell’area dell’header delle diapositive, fate clic e trascinate la diapositiva video e rilasciatela nello spazio luminoso a sinistra della slide immagine. Semplicissimo!
Per andare oltre: usare il tipo di slide HTML
Il tipo di diapositiva HTML è una potente aggiunta al pacchetto Developer di SlideDeck 2, che consente di inserire il proprio codice HTML in una slide. È perfetto per layout più complessi dei vostri contenuti o per aggiungere interazioni più potenti al vostro slider di contenuti. Ad esempio, è possibile incorporare un modulo di iscrizione, in modo che i clienti possano scegliere di ricevere una newsletter via email alla fine del tour del prodotto: un potente invito all’azione, se mai ce ne fosse uno!
Selezionate il tipo di slide HTML per visualizzare l’editore HTML nel menu a comparsa.
Nel campo Inserisci HTML è possibile incollare il codice personalizzato. Si noterà che i diversi tagga vengono codificati automaticamente con un colore, per assicurarsi che sia strutturato correttamente. Si notino un paio di punti importanti:
- È possibile includere le regole di stile CSS per il contenuto della slide tra i tag <style></style>, che verranno applicate a tutte le slide dello SlideDeck.
- Poiché l’Anteprima dal vivo di SlideDeck non è in grado di prevedere come gli stili del tema potrebbero interagire con il cursore del contenuto, per uno stile complesso si ottiene un’anteprima più accurata se la si visualizza nella pagina su cui si intende pubblicare lo SlideDeck.
Una volta inserito il codice, hit Applica e la slide verrà aggiunta alla rotazione.
Configurazione della lente
Ora avete creato il vostro primo SlideDeck di contenuto personalizzato! Prendetevi qualche minuto per fare clic sulle slide nell’Anteprima dal vivo e crogiolatevi nello splendore di un lavoro ben fatto.
Ora è il momento di rendere il tutto perfettamente compatibile con il vostro sito, configurando le vostre Lens. SlideDeck contiene un’enorme quantità di opzioni per controllare l’aspetto del vostro nuovo tour di prodotti personalizzando la lente.
Salvare e pubblicare lo SlideDeck
Contenuto fantastico? Selezionato. Tema scelto e personalizzato? Selezionato. Sembra che siate pronti a pubblicare il vostro nuovo tour di prodotti e a convertire i visitatori in clienti!
SlideDeck offre tre modi per incorporare i cursori nel vostro sito WordPress: inserendoli nel contenuto di una pagina o di un articolo esistente, creando una nuova pagina o un nuovo articolo con il cursore incorporato e, infine, inserendoli nel template della vostra pagina, che è probabilmente la scelta migliore se volete aggiungere il tour dei prodotti alla vostra homepage.
Wrap
Sebbene i cursori di contenuto siano solitamente utilizzati solo per le gallerie di immagini o per gli articoli in evidenza, SlideDeck 2 offre una grande flessibilità per esplorare il potenziale dei cursori di contenuto e creare esperienze coinvolgenti che mantengono i visitatori impegnati e in grado di ritornare. Noi di WPBeginner vi consigliamo vivamente di dargli un’occhiata! Un esempio dal vivo di come stiamo utilizzando uno SlideDeck personalizzato può essere visto sulla nostra pagina Configurazione gratuita di un blog WordPress.
Avete un esempio di SlideDeck che volete condividere? Fatecelo sapere nei commenti! Inoltre, date un’occhiata alla prima parte di questa serie, in cui vi mostriamo come creare SlideDeck con fonti dinamiche.
Gli slider con interfaccia touch sono il futuro del web design. Acquistate subito SlideDeck. Utilizzate il codice coupon: WPB-SD2 per ottenere il 20% di sconto.
Avete una domanda o un suggerimento? Lasciate un commento per avviare la discussione.