Evidenziazione del plug-in Divi: modulo Carousel del prodotto Divi

Divi Product Carousel Module è un plug-in di terze parti per Divi che visualizza i prodotti WooCommerce all'interno di un dispositivo di scorrimento del carosello. Costruisci un carosello di prodotti e posizionalo all'interno di qualsiasi layout Divi. Puoi modellarli e scegliere più opzioni di layout e visualizzazione. In questo articolo, esamineremo Divi Product Carousel Module, ne vedremo le caratteristiche e vedremo quanto è facile da usare.

Il modulo Divi Product Carousel è disponibile dal sito Web dello sviluppatore e nei marketplace Divi.

Modulo Carousel del prodotto Divi

Una volta caricato e attivato il plug-in, vai su DiviGear nel menu della dashboard e attiva la tua licenza. Se disponi di più plug-in di questo sviluppatore, dovrai selezionare la scheda del plug-in.

Un nuovo modulo viene aggiunto al Divi Builder chiamato Product Carousel. Include un'icona viola in modo che si distingua dalla massa.

Le impostazioni includono le schede Contenuto, Progettazione e Avanzate. La scheda Contenuto ha le impostazioni per il contenuto di WooCommerce. Scegli il tipo di prodotto tra recente, in primo piano, vendita, più venduto, più votato o categoria di prodotto dalla casella a discesa. Inserisci un numero per il conteggio dei prodotti che desideri visualizzare. Scegli l'ordinamento tra popolarità, valutazione, data o prezzo. Puoi anche abilitare il pulsante Aggiungi al carrello e la descrizione. Mostra la descrizione completa o un estratto.

Le Impostazioni Carousel consentono di scegliere il numero di colonne in base al dispositivo utilizzato. Include anche multislide (abilita lo scorrimento in base al numero di diapositive sullo schermo o disabilitalo per far scorrere una diapositiva alla volta), spaziatura degli elementi, durata della transizione, centro, loop, riproduzione automatica, navigazione con punti e frecce, allineamento e effetto diapositiva. Altre impostazioni includono il collegamento e lo sfondo. È interessante che tu possa usare i punti e le frecce insieme. Puoi posizionare i punti a destra, al centro o a sinistra nella parte inferiore della diapositiva.

La scheda Design include le impostazioni per la sovrapposizione, il titolo, il prezzo, la descrizione, il badge di vendita, il pulsante Aggiungi al carrello, la revisione, la freccia, i punti, l'immagine, il passaggio del mouse, la spaziatura, il bordo e l'ombra del riquadro. Altre impostazioni vengono aggiunte in base alle selezioni scelte. Ognuna di queste impostazioni è ampia.

La scheda Avanzate include le funzionalità CSS, visibilità e transizioni previste. Il CSS personalizzato include i campi per il prodotto, l'immagine, il titolo, il prezzo, la freccia del badge di vendita precedente, la freccia successiva e i punti. Questo ti dà molto controllo con i CSS.

Impostazioni del modulo Carousel del prodotto Divi

Puoi spostare i titoli e i prezzi in alto o in basso. In questo esempio, ho spostato entrambi in alto e ho cambiato dimensione e colore. Ho modellato il badge di vendita cambiando il colore di sfondo e la dimensione del carattere. Ho anche disegnato i punti inattivi e attivi.

Ecco come appare sul front-end. Ho anche aggiunto un overlay e il pulsante Aggiungi al carrello appare al passaggio del mouse. Puoi applicare uno stile a questo pulsante sia per l'overlay che per il pulsante.

In questo, ho selezionato 6 colonne, spostato tutto il testo in basso, regolato i colori del testo e aggiunto un po' di opacità al pulsante Aggiungi al carrello. Ho lasciato l'opacità al passaggio del mouse di default, quindi il pulsante è solido se passi con il mouse sopra il pulsante stesso.

Per questo, ho impostato il layout su 4 colonne. Ho aggiunto frecce e cambiato i colori delle frecce e dei punti. Ho anche aggiunto uno sfondo al titolo, al prezzo e alla descrizione e ho cambiato tutto il testo in bianco. Per allineare bene il testo all'interno della casella, ho aggiunto un po' di riempimento del contenuto. Include anche l'imbottitura del contenuto per la parte superiore (nel caso in cui metti il ​​titolo o il prezzo sopra l'immagine).

Ecco come appare sul front-end. La freccia a destra è più chiara per indicare che si trova alla fine dei prodotti che può visualizzare. Se lo impostassi in loop sarebbe il colore normale.

Ecco come appare con Overflow selezionato. Fornisce un piacevole effetto carta 3D. È possibile regolare la quantità di rotazione e abilitare l'ombra della diapositiva.

In questo esempio, ho dato alle carte un'ombra di scatola e ho regolato la sfocatura. Ho anche cambiato le frecce in un cerchio e regolato i colori.

Ecco come appare sul front-end con Center Slide abilitato. Questo è il layout a 4 colonne. Viene visualizzato in modo diverso quando si seleziona Centra diapositiva.

Questo è il layout a 5 colonne che utilizza le stesse impostazioni dell'esempio sopra.

Il carosello del prodotto si adatta bene ai layout Divi. In questo esempio, ho sostituito il modulo Divi shop con il modulo Divi Product Carousel e l'ho disegnato in modo che corrisponda al layout.

In questo, ho spostato il titolo in alto, aggiunto un po' di riempimento in alto e in basso e ho reso i titoli semi-grassetto. Ho anche cambiato il colore del pulsante Aggiungi al carrello in modo che corrisponda al layout.

Per questo, ho regolato i bordi delle diapositive e delle immagini per creare angoli arrotondati. Sono andato avanti e ho trasformato le immagini in cerchi. Ho anche aggiunto un'ombra di scatola.

Sembra eccellente all'interno del layout. Tuttavia, nasconde la maggior parte del badge di vendita. Probabilmente c'è un modo per aggirare questo problema con i CSS.

Questo usa Overflow con il layout a 3 colonne.

Per questo, ho rimosso il bordo dell'immagine ma ho mantenuto il bordo per le diapositive. Ho aggiunto un'ombra a scatola e ne ho regolato la forza e la posizione.

Mostra anche la valutazione in stelle delle recensioni al passaggio del mouse. Posiziona la valutazione accanto al pulsante Aggiungi al carrello. Li riunisce con una bella animazione. Queste sono le impostazioni predefinite. Puoi modellare i colori dello sfondo e delle stelle.

In questo, ho modellato le valutazioni in modo che corrispondano agli elementi del layout.

Per questo, ho spostato il prezzo in alto e il titolo in basso. Ho aggiunto una descrizione e un overlay. Ho spostato il punto di navigazione a destra. Ho dovuto aggiungere un po' di imbottitura per far vedere l'ombra della scatola ai lati. Senza imbottitura, posiziona il prodotto al limite dello spazio del modulo.

Demo del modulo Carousel del prodotto Divi

Ci sono attualmente 13 demo scaricabili sul sito web dello sviluppatore. Questi sono layout che puoi caricare nella libreria Divi e utilizzare con qualsiasi layout Divi. Tutti includono lo stile per il modulo Divi Product Carousel e alcuni includono altri moduli e sfondi con stili. Questi sono utili per ottenere un punto di partenza con i progetti del carosello del prodotto e per mostrare alcune delle cose che possono essere fatte con il modulo. Diamo un'occhiata ad alcuni di loro.

Questo posiziona i titoli in alto, gli stili in alto e in basso in modo che corrispondano, aggiunge frecce cerchiate all'esterno delle immagini e include punti. Ha anche un bordo inferiore per far risaltare le diapositive. Mi piacciono i colori audaci. La parte superiore e inferiore hanno un po' di trasparenza in modo che i motivi dello sfondo siano visibili. Questo layout include un modulo di testo con stile per il titolo.

Molti dei layout includono altri moduli con stili. Questo utilizza un layout a due colonne per aggiungere un invito all'azione utilizzando moduli di testo e pulsanti.

Ecco come appare dal front-end. Include un bordo, titoli nella parte superiore e due colori per il pulsante Aggiungi al carrello. Le frecce sono mostrate all'interno delle immagini del modulo.

Questo include uno sfondo verde e diapositive in stile da abbinare. Il pulsante Aggiungi al carrello è verde chiaro quando passi con il mouse sopra il prodotto e poi verde scuro quando passi con il mouse sopra il pulsante. Include un modulo di testo con stile per il titolo.

Questo include lo stile blu per i badge di vendita, le frecce rotonde al di fuori delle immagini e il pulsante Aggiungi al carrello. Aggiunge un piccolo bordo alle diapositive. Visualizza le diapositive con l'effetto Overflow.

Questo mostra anche i prodotti con l'effetto Overflow. Utilizza anche il blu per le frecce e il pulsante Aggiungi al carrello. Il titolo viene spostato in alto. L'overlay è bianco con un'elevata opacità e il badge di vendita è rosso.

Questo include uno sfondo con stile e aggiunge un bordo, un pulsante Aggiungi al carrello con uno stile, un badge di vendita e frecce cerchiate. La sovrapposizione è bianca. Posiziona il prezzo in alto e tutti gli altri dati in basso.

Prezzo e documentazione del modulo Carousel del prodotto Divi

Ci sono due opzioni di acquisto per Divi Product Carousel Module:

• Sito singolo – $ 19
• Siti illimitati – $ 39

È disponibile dal sito Web dello sviluppatore e nei marketplace.

La documentazione è fornita da un video di YouTube che ti guida attraverso le funzionalità. Troverai un collegamento ad esso nel menu DiviGear nella dashboard. Se hai più di un prodotto DiviGear, seleziona la scheda del prodotto e quindi seleziona Documentazione.

Pensieri finali

Divi Product Carousel è facile da usare ed è ottimo per far risaltare i tuoi prodotti. Anche se non vuoi visualizzarli come slider, ha molte opzioni di stile e presentazione del prodotto per cui vale la pena considerare. Non ho lavorato molto bene con Extra. Mi piacerebbe vedere Extra supportato poiché ha già molte funzionalità di WooCommerce ed è un'ottima piattaforma per la creazione di negozi WooCommerce.

Mi piace che abbia demo scaricabili. Includono gli sfondi e lo stile per il modulo. Questi sono ottimi per darti un punto di partenza o per stimolare la tua immaginazione per presentare i tuoi prodotti WooCommerce all'interno dei tuoi layout Divi.

Se sei interessato a presentare i tuoi prodotti WooCommerce in un carosello, o semplicemente ad avere qualche altra opzione di design, vale la pena dare un'occhiata al modulo Carousel di prodotti Divi. È disponibile dal sito Web dello sviluppatore e nei marketplace Divi.

Vogliamo sentire da voi. Hai provato Divi Product Carousel Module? Fateci sapere cosa ne pensate nei commenti.

Immagine in evidenza Letters-Shmetters / shutterstock.com