Hai un sito Web e vuoi che abbia un layout più moderno? Per rendere più efficace la presenza online bisogna aggiornare costantemente l'aspetto del proprio sito Web. Questo aiuta a coinvolgere gli utenti e a trasmettere istantaneamente il messaggio di un'attività o azienda. Uno strumento potente per migliorare l'aspetto di un sito, e rendere più accattivante la presentazione dei contenuti online, è l'inclusione di slider di immagini. Un elemento dinamico che consente di visualizzare foto a rotazione e in modalità interattiva.
Questa guida ti accompagnerà passo dopo passo nell'implementazione di questa funzionalità nel tuo sito WordPress. Non importa se sei un principiante o un utente più avanzato. Seguendo le istruzioni e utilizzando strumenti facilmente accessibili sarai in grado di arricchire il tuo sito con uno slider professionale e accattivante.
Creare uno slider di immagini in un sito WordPress con Elementor
Il risultato che otterremo alla fine della guida è il seguente:
Il plugin Elementor
Il sito che useremo per questa guida è sviluppato in WordPress. La piattaforma di gestione dei contenuti (CMS) più diffusa per la creazione e gestione di pagine Internet. Grazie al pannello di controllo intuitivo, e all'ampia gamma di temi e plugin che ci offre WordPress, è possibile sviluppare progetti moderni e professionali. Nel nostro caso vogliamo ottenere uno slider di immagini da inserire in una pagina. Quindi, procediamo con l'installazione del plugin che ci servirà: Elementor. Un site-builder con cui modificare le pagine del nostro sito in modo rapido e intuitivo. Dal pannello di controllo di WordPress clicchiamo sulla voce "Plugin" presente nella barra laterale di sinistra. Successivamente clicchiamo su "Aggiungi nuovo plugin".
Ora cerchiamo il plugin che vogliamo installare con l'apposito campo di ricerca e, una volta visualizzato il risultato, clicchiamo su "Installa ora". Dopo pochi secondi il plugin sarà installato e non ci resterà che attivarlo.
Inserimento dello slider
Una volta installato Elementor possiamo procedere con la creazione (o modifica) della pagina in cui vogliamo inserire lo slider. Clicchiamo quindi su "Pagine" nel menù laterale di sinistra e si aprirà l'elenco delle pagine presenti sul sito. Da qui possiamo scegliere se utilizzare una delle pagine già esistenti, e modificarla con l'aggiunta di uno slider, o se crearne una nuova da zero.
Nel primo caso dobbiamo scegliere la pagina da utilizzare e poi cliccare su "Modifica con Elementor", in modo da sfruttare il plugin appena installato come builder per la modifica. Nel secondo caso clicchiamo su "Aggiungi nuova pagina":
Questa è la schermata che ci troveremo di fronte dopo aver creato una nuova pagina. Da qui possiamo proseguire con la modifica e l'aggiunta dei vari blocchi tramite l'editor preinstallato fornito da WordPress. Sfortunatamente questo strumento ci mette a disposizione un numero limitato di funzionalità. Quindi, proseguiremo utilizzando Elementor. Clicchiamo su "Modifica con Elementor" in alto per essere reindirizzati alla pagina appena creata e pronta per la modifica con il site builder. È comunque importante specificare che la schermata che si aprirà può essere differente a seconda del tema e del template scelto.
Adesso procediamo con la creazione del contenitore dentro al quale posizionare il nostro slider. Clicchiamo sul simbolo "+" all'interno del box centrale e dal menù di sinistra selezioniamo la voce "Contenitore". Ecco che verrà inserito un contenitore vuoto, al suo interno posizioneremo lo slider di immagini.
Dal menù di sinistra cerchiamo l'elemento "Carosello di immagini" e trasciniamolo nel nostro box. Adesso non ci rimane altro che iniziare a modificare lo slider e personalizzarlo come vogliamo! Potremo notare che nel menù di sinistra sono presenti numerose funzionalità che ci permettono di dare forma, stile e aggiungere contenuto all'elemento appena inserito.
Inserimento delle immagini
Iniziamo con l'aggiunta delle immagini (solitamente delle foto) che vogliamo mostrare. È importante scegliere delle immagini di buona qualità e preferibilmente senza copyright (esistono diverse piattaforme che mettono a disposizione numerose foto). Clicchiamo sul simbolo "+" dal menù di sinistra, sotto la voce "Carosello di immagini", e scegliamo le immagini dalla galleria di WordPress. Una volta selezionate queste ultime clicchiamo su "Inserisci galleria".
Adesso procediamo con la modifica dei parametri per la visualizzazione dello slider. Dal menù "Carosello di immagini" è possibile modificarne la risoluzione (consigliabile fissarla su "pieno") e il numero di slide da visualizzare o da scorrere. Inoltre è possibile scegliere se visualizzare o nascondere i tasti di navigazione per lo scorrimento delle foto. Dal menù "Opzioni aggiuntive" possiamo poi modificare la funzionalità di auto-play e scorrimento delle immagini: durata, animazione al passaggio del mouse, velocità e direzione.
Il menù "Stile" e il menù "Avanzato" permette di lavorare sull'aspetto visivo slider, quindi sulla spaziatura tra le immagini, il bordo, i margini e l'allineamento. Possiamo personalizzare i campi come preferiamo e visualizzare l'anteprima del risultato durante le modifiche in modo da ottenere l'output desiderato.
Una volta concluse la personalizzazione possiamo finalizzare le modifiche effettuate cliccando su "Aggiorna" in basso a sinistra. Elementor procederà ad applicare gli aggiornamenti e a rendere pubblico l'inserimento dello slider di immagini all'interno della pagina appena creata. Possiamo riprendere le modifiche dello slider in qualsiasi momento tramite il menù "Pagine" di WordPress, in particolare basterà selezionare la voce "Modifica con Elementor" riferita alla pagina in cui è stato inserito il carosello di immagini.
Esistono diverse alternative con cui mostrare le immagini in uno slider, grazie alle funzionalità offerte dal plugin usato in questa guida possiamo scegliere quella più adatta al nostro sito e alle nostre esigenze. Possiamo inserire ad esempio i tasti di navigazione per lo scorrimento manuale delle immagini o posizionare le foto con un layout differente.
