Come aggiungere lo slider del prodotto in WooCommerce utilizzando Elementor (7 layout)
Pubblicato: 2024-10-09Gli slider dei prodotti sono un modo eccellente per mostrare una varietà di prodotti in modo organizzato e visivamente accattivante, soprattutto quando si lavora con WooCommerce su WordPress.
Utilizzando Elementor, un popolare generatore di pagine, insieme al componente aggiuntivo Elemento, puoi aggiungere facilmente cursori di prodotto che migliorano l'esperienza di acquisto.
In questa guida esploreremo come aggiungere uno slider del prodotto con sette diverse opzioni di layout utilizzando il componente aggiuntivo Elementor.
Perché dovremmo aggiungere uno slider del prodotto in WooCommerce?
Sommario
Prima di procedere, prendiamoci un momento per comprendere i vantaggi dello slider del prodotto:
Gli slider migliorano l'attrattiva visiva e conferiscono al tuo negozio un aspetto professionale. I visitatori possono sfogliare rapidamente vari prodotti senza scorrere elenchi estesi. E metti in evidenza prodotti popolari, nuovi o scontati per aumentare le vendite.
Esplora diversi layout per i dispositivi di scorrimento dei prodotti
Elemento Addon offre sette layout versatili di slider prodotto per adattarsi all'estetica del design del tuo negozio. Ecco uno sguardo a ciascuno di essi:
1. Dispositivo di scorrimento avanzato
Il layout Advanced Slider è perfetto per mostrare immagini di prodotti di alta qualità con animazioni aggiunte. Puoi evidenziare i tuoi prodotti chiave con immagini accattivanti e sovrapposizioni di testo.
Caratteristiche :
- Offre transizioni fluide
- Testo personalizzabile e
- I pulsanti guideranno gli utenti direttamente alle pagine dei prodotti.
Utilizzo : ideale per prodotti in evidenza o nuove collezioni.
Demo dal vivo: esplora lo slider avanzato
2. Diapositiva avanzata del prodotto
La diapositiva avanzata dei prodotti è un layout semplice ed efficace che ti consente di mostrare i tuoi prodotti in uno slider a scorrimento orizzontale. Puoi aggiungere immagini di prodotti, titoli, prezzi e persino badge di vendita.
Caratteristiche
- Scorrimento orizzontale
- Velocità personalizzabile
- Visualizzazione dinamica delle informazioni sul prodotto.
Utilizzo :
- Perfetto per bestseller o offerte a tempo limitato.
Demo dal vivo: esplora la diapositiva avanzata del prodotto
3. Dispositivo di scorrimento della categoria prodotto
Il dispositivo di scorrimento delle categorie di prodotti ti consente di mettere in evidenza le categorie di prodotti anziché i singoli prodotti.
Questo layout funziona eccezionalmente bene per i negozi con diverse linee di prodotti, aiutando gli utenti a navigare tra le categorie senza sforzo.
Caratteristiche :
- Immagini di categoria,
- Titoli e supporto per la descrizione.
Utilizzo :
- Ottimo per negozi con più categorie di prodotti.
Demo dal vivo: esplora il dispositivo di scorrimento delle categorie di prodotti
4. Dispositivo di scorrimento del prodotto
Il classico dispositivo di scorrimento prodotti offre un modo semplice ma efficace per mostrare più prodotti in un formato di scorrimento orizzontale.
Questo layout è altamente personalizzabile e ti consente di modificare qualsiasi cosa, dal numero di prodotti visibili all'aspetto dello slider.
Caratteristiche :
- Visualizzazione di più prodotti
- Colonne personalizzabili
- Effetti di transizione.
Utilizzo :
- Adatto per promuovere collezioni e nuovi arrivi.
Demo dal vivo: esplora il dispositivo di scorrimento del prodotto
5. Elenco dispositivi di scorrimento prodotti
Il layout Elenco slider prodotti mostra i tuoi prodotti in un formato elenco all'interno di uno slider. Questa opzione è ottima per gli utenti che preferiscono visualizzare informazioni più dettagliate su ciascun prodotto pur mantenendo un'interfaccia scorrevole.
Caratteristiche :
- Visualizzazione elenco con i dettagli del prodotto
- Transizioni fluide del dispositivo di scorrimento.
Utilizzo :
- Ideale per negozi con descrizioni e specifiche dettagliate dei prodotti.
Demo dal vivo: esplora l'elenco dei dispositivi di scorrimento dei prodotti
6. Elenco prodotti verticale
L'elenco prodotti verticale aggiunge un tocco unico alla visualizzazione dei tuoi prodotti. Invece di un tradizionale cursore orizzontale, questo layout presenta i tuoi prodotti in un formato a scorrimento verticale, rendendolo perfetto per barre laterali o sezioni strette.
Caratteristiche :
- Scorrimento verticale
- Elementi dell'elenco personalizzabili.
Utilizzo :
- È più adatto per widget laterali o spazi ristretti sulla home page del tuo negozio.
Demo dal vivo: esplora l'elenco dei prodotti verticali
7. Dispositivo di scorrimento del prodotto della griglia
Il Grid Product Slider è perfetto per visualizzare i prodotti in un layout a griglia. Questo design offre una presentazione più strutturata e uniforme, consentendo di mostrare più prodotti contemporaneamente senza scorrere.
Caratteristiche :
- Disposizione a griglia con colonne regolabili
- navigazione facile
- Visualizzazione dinamica delle informazioni sul prodotto.
Utilizzo :
- Ottimo per negozi con molti prodotti che necessitano di essere esposti contemporaneamente.
Demo dal vivo: esplora lo slider del prodotto a griglia
Come aggiungere uno slider prodotto in WooCommerce utilizzando il componente aggiuntivo Elementor.
Per aggiungere uno slider prodotto utilizzando uno di questi layout, procedi nel seguente modo:
- Installa e attiva i plugin richiesti : assicurati di avere Elementor, WooCommerce e il componente aggiuntivo Elemento installati e attivati.
- Modifica pagina con Elementor : vai alla pagina in cui desideri aggiungere lo slider dei prodotti e fai clic su "Modifica con Elementor".
- Aggiungi widget dispositivo di scorrimento prodotto : nell'editor di Elementor, cerca il widget dispositivo di scorrimento dei prodotti dell'elemento aggiuntivo (ad esempio, dispositivo di scorrimento avanzato, dispositivo di scorrimento prodotto a griglia, ecc.) e trascinalo nella sezione desiderata nella pagina.
- Personalizza lo slider : scegli il tuo layout preferito, seleziona i prodotti o le categorie da visualizzare e regola le impostazioni come velocità di transizione, colonne della griglia ed elementi di design.
- Anteprima e pubblicazione : dopo aver personalizzato il dispositivo di scorrimento a tuo piacimento, visualizza l'anteprima delle modifiche per assicurarti che tutto sia perfetto, quindi pubblica la pagina.
Fare riferimento a questo video qui sotto per assistenza con l'attivazione del componente aggiuntivo Elemento.
Puoi trovare i componenti aggiuntivi pertinenti qui.
Domande frequenti
D: Posso personalizzare il design dello slider del prodotto?
Risposta: sì! Elementor consente un'ampia personalizzazione, inclusa la regolazione delle impostazioni di layout, tipografia, colori ed effetti al passaggio del mouse per adattarli al marchio del tuo sito web.
D: È possibile visualizzare categorie di prodotti specifiche nello slider?
Risposta: Sì, molti widget dello slider prodotto ti consentono di filtrare i prodotti per categorie, tag o attributi come parte delle impostazioni dello slider.
D: Posso aggiungere animazioni allo slider del prodotto?
Risposta: Sì, Elementor supporta varie opzioni di animazione che possono essere applicate ai dispositivi di scorrimento del prodotto per un'esperienza utente più coinvolgente.
Conclusione
Con il componente aggiuntivo Elemento per Elementor, crea facilmente straordinari slider di prodotti per il tuo negozio WooCommerce.
Scegli tra una varietà di dispositivi di scorrimento prodotto con diversi layout e opzioni di personalizzazione per abbinarli al tuo marchio.
Migliora l'esperienza di acquisto dei tuoi clienti con questi display accattivanti.
Se trovi utile questo articolo, condividilo con i tuoi amici. Se avete domande in merito, non esitate a commentare qui sotto. Ti aiuteremo a risolvere il tuo problema. Grazie per aver letto questo blog
Ci auguriamo che questo articolo ti aiuti a trovare il miglior dispositivo di scorrimento Prodotto per mostrare i tuoi prodotti.
Iscriviti al nostro canale YouTube , lì cariciamo anche ottimi contenuti e seguici anche su Facebook e Twitter
Scopri altri articoli:
- 6 migliori componenti aggiuntivi di Elementor per i siti Web WooCommerce
- Come creare pagine WooCommerce Pagina carrello, Pagina negozio, Pagina pagamento e Pagina Il mio account
- Componenti aggiuntivi di Elemento per Elementor per migliorare l'esperienza di progettazione del tuo sito web