Sei uno stylist, un decoratore, un fotoritoccatore o un altro professionista che ha bisogno di mostrare i risultati visivi del proprio lavoro? Uno slider prima e dopo in evidenza sul tuo sito web è facile da usare e comunica valore all’istante. Purtroppo per gli utenti di WordPress, la piattaforma non dispone di una funzione slider nativa.
Tuttavia, aggiungere uno slider a WordPress non è impossibile. Hai tre opzioni: usare un plugin di terze parti, usare un widget esterno leggero e gratuito oppure creare uno slider da zero scrivendo codice personalizzato.
Questo articolo descrive come aggiungere uno slider prima e dopo in WordPress utilizzando tutti e tre i metodi, così da capire qual è quello più adatto alle tue esigenze.
Opzione 1: installa un plugin slider per WordPress
Uno dei modi più comuni per aggiungere uno slider prima e dopo è usare un plugin per WordPress. Tuttavia, questo approccio presenta un paio di svantaggi.
Alcuni plugin aggiungono CSS e JavaScript extra a tutto il sito, aumentando i tempi di caricamento delle pagine. Inoltre, i page builder “pesanti”, come Elementor, ti obbligano a gestire lo slider tramite shortcode complessi (codici testuali specifici di WordPress), che possono diventare un vero incubo per gli utenti alle prime armi. Se per errore elimini una parte del codice, lo slider smette subito di funzionare. Inoltre, alcuni plugin adottano un modello di business freemium, che rende le funzionalità avanzate accessibili solo a pagamento.
I plugin non sono adatti a tutti, ma rappresentano una soluzione valida se hai buone competenze tecniche e ti trovi a tuo agio con WordPress. Segui queste istruzioni per installare un plugin prima e dopo per WordPress:
- Installa il plugin: vai nella dashboard di WordPress e clicca su Plugin. Inserisci “before-and-after slider” nella barra di ricerca e seleziona dai risultati il plugin che vuoi usare. (Ce ne sono decine. Dai un’occhiata a un elenco dei migliori plugin per WordPress per altri tipi di attività.)
Segui le indicazioni per installare il plugin. (Le istruzioni di installazione esatte dipendono dallo specifico plugin.)
Tieni presente che, mentre molti plugin sono gratuiti, altri hanno un costo una tantum. Nella maggior parte dei casi, puoi usarli solo con un piano WordPress a pagamento.
- Crea lo slider prima e dopo: apri il plugin dalla dashboard di WordPress. Seleziona l’opzione per creare un nuovo slider prima e dopo. Carica le tue immagini prima e dopo. Per seguire le best practice, usa immagini con la stessa inquadratura e le stesse dimensioni.
- Personalizza lo slider prima e dopo: la maggior parte dei plugin consente di regolare impostazioni come le etichette delle immagini, la posizione iniziale, l’aspetto del cursore e l’orientamento dello slider. Regola le impostazioni e salva.
- Aggiungi lo slider prima e dopo al tuo sito WordPress: apri la pagina di WordPress in cui vuoi che compaia lo slider. A seconda del plugin, puoi aggiungerlo creando un apposito blocco di WordPress oppure inserendo uno shortcode nella pagina.
Pro Tip
Hai bisogno di ulteriori indicazioni sull’uso dei plugin di WordPress? “Come usare WordPress” è un tutorial dettagliato che fornisce informazioni chiave sull’uso di plugin, moduli, temi e altro ancora in WordPress.
Opzione 2: usa un widget slider gratuito e senza codice (consigliato)
Se non vuoi avere a che fare con shortcode noiosi o plugin pesanti che rallentano il caricamento del tuo sito WordPress, l’opzione migliore è usare un widget slider senza codice. Widget Slider Prima e Dopo di Jotform è completamente gratuito e facile da usare. Poiché il widget è serverless, non influisce affatto sulla velocità del tuo sito. Inoltre funziona perfettamente sia su desktop sia su smartphone.
Il Widget Slider Prima e Dopo di Jotform offre un’interfaccia visuale che non richiede alcuna competenza di programmazione. Ti basta caricare due immagini nel widget builder, personalizzare i colori del cursore di trascinamento e impostare la posizione iniziale predefinita. Poi copia il codice e incollalo in WordPress.
Ecco i dettagli:
- Aggiungi le coppie di immagini: vai alla pagina del Widget Slider Prima e Dopo di Jotform e carica le tue immagini prima e dopo nella casella delle impostazioni del widget. Modifica il titolo del widget e specifica il tipo di interazione che vuoi offrire (trascinamento e clic oppure passaggio del mouse). Clicca o tocca Continua.
- Personalizza le impostazioni dello slider: puoi regolare impostazioni come il rapporto dell’immagine, il raggio degli angoli, lo spessore del divisore e i colori dello slider. Scorri verso il basso per selezionare tutte le tue preferenze.
- Ottieni il codice di incorporamento del widget slider: clicca o tocca Provalo gratis sul tuo sito web. Jotform fornirà un codice di incorporamento per il widget slider. Clicca o tocca Copia. Jotform ti chiederà di registrarti o di accedere per ottenere il codice.
- Incolla il codice di incorporamento dello slider in WordPress: vai sul tuo sito WordPress e aggiungi un blocco HTML personalizzato dall’inseritore di blocchi. Incolla il codice di incorporamento nel blocco HTML. Clicca o tocca Aggiorna. WordPress inserirà automaticamente il widget slider prima e dopo nel tuo sito WordPress.
Opzione 3: programma uno slider HTML/CSS personalizzato
Se sei un purista di WordPress e preferisci evitare plugin di terze parti o widget esterni, puoi creare uno slider da zero scrivendo codice puro.
Sebbene questo metodo sia tecnicamente gratuito e nativo di WordPress, non è semplice. Dovrai avere un’esperienza avanzata nella scrittura di codice, soprattutto se vuoi che i visitatori del sito possano usare lo slider anche da smartphone. Inoltre, un singolo errore nel codice può compromettere il funzionamento dello slider e la reattività su smartphone, tra le altre cose.
Ecco come aggiungere uno slider prima e dopo in WordPress con codice personalizzato:
- Carica le immagini prima e dopo: aggiungi entrambe le immagini alla Libreria media di WordPress.
- Crea il codice HTML/CSS personalizzato per lo slider: scrivi il codice HTML/CSS per strutturare e dare stile allo slider. Potrebbe servire anche JavaScript per aggiungere il trascinamento e lo scorrimento interattivi.
Puoi scrivere questo codice da solo, chiedere aiuto a un collega con esperienza di programmazione oppure usare uno strumento di IA per generarlo.
Copia il codice.
- Aggiungi il codice al tuo sito WordPress: nel tuo sito WordPress, aggiungi un blocco HTML personalizzato e incolla il codice al suo interno. Aggiungi CSS e JavaScript secondo necessità tramite il tema di WordPress o la configurazione del sito.
Migliora il tuo sito WordPress con widget intelligenti e senza codice
Se vuoi dare priorità alla velocità e alla sicurezza del sito, contenere i costi ed evitare codice complesso, il Widget Slider Prima e Dopo di Jotform è un ottimo modo per aggiungere al tuo sito contenuti multimediali interattivi e di grande impatto. È completamente gratuito, ideale per principianti e professionisti, e non richiede di scrivere alcun codice.
Ma non è tutto quello che Jotform ha da offrire!
Nella directory dei widget per siti web di Jotform trovi oltre 150 widget gratuiti per siti web che possono arricchire il tuo sito WordPress. Ad esempio, il Widget Contatore di Visite è un ottimo modo per mostrare quanto è popolare il tuo sito, mentre il Widget Conto alla Rovescia aiuta a creare un senso di urgenza intorno a eventi e campagne importanti.
Jotform offre inoltre migliaia di moduli per WordPress, come moduli di contatto, moduli per la generazione di lead e moduli d’ordine. Aggiungili al tuo sito per raccogliere informazioni importanti sui visitatori.
Jotform ha un piano gratuito. Provalo per iniziare a scoprire i widget e vedere quanto è semplice migliorare le funzionalità del tuo sito WordPress senza sacrificare le prestazioni e senza scrivere codice.
Questo articolo è pensato per blogger, titolari di portfolio e agenzie che usano WordPress e vogliono mostrare trasformazioni visive (come ritocchi fotografici, restyling di interfacce o ristrutturazioni) senza rallentare il sito con plugin pesanti e senza avere a che fare con shortcode complessi.
Invia un Commento: