Trasformare il modulo Shop di Divi in schede di scorrimento dei prodotti dinamici su dispositivi mobili
Pubblicato: 2020-04-29Quando crei una pagina di destinazione per prodotti specifici, che si tratti di un nuovo lancio o di una vendita per cui ti stai preparando, è molto probabile che prima o poi utilizzerai il modulo Negozio. Il modulo Shop di Divi ti consente di estrarre dinamicamente i prodotti dal plug-in WooCommerce e modellare i prodotti utilizzando le opzioni integrate di Divi. Ora, per impostazione predefinita, il modulo negozio viene fornito con alcune strutture di colonne che si traducono tutte in due colonne su schermi di dimensioni più piccole. Ciò significa che più prodotti scegli di mostrare, più scorrimento verticale è necessario per arrivare alla parte successiva della tua pagina di destinazione.
Nel web design moderno, una tecnica spesso utilizzata per limitare lo scorrimento verticale e mostrare gli elementi in base alle preferenze dei visitatori è l'utilizzo di schede magnetiche. In questo tutorial, ti mostreremo come trasformare il modulo Divi Shop in schede magnetiche di prodotto dinamiche su schermi di dimensioni più piccole senza utilizzare un plug-in. Inizieremo preparando i diversi elementi nella nostra sezione del prodotto e utilizzeremo una piccola quantità di codice CSS per abilitare l'effetto di scorrimento. Questo è un ottimo modo per mostrare una vasta gamma di prodotti all'interno della tua pagina di destinazione senza travolgere i tuoi visitatori. Potrai anche scaricare gratuitamente il file JSON!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato. Stiamo abilitando le schede magnetiche del prodotto solo su tablet e dispositivi mobili. Sul desktop, manteniamo la struttura delle colonne che determiniamo all'interno del modulo Negozio.
Mobile
Desktop
Scarica GRATUITAMENTE il layout delle schede a scorrimento del prodotto
Per mettere le mani sul layout delle schede a scorrimento del prodotto gratuito, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
1. Configura WooCommerce e pagine prodotto
Prima di entrare nella parte Divi di questo tutorial, è importante che il plugin WooCommerce sia installato e attivato sul tuo sito web. Se non l'hai già fatto, aggiungi più prodotti, a seconda di quanti prodotti vuoi visualizzare nel tuo Modulo Negozio.
2. Crea una nuova pagina e carica il layout della pagina di destinazione della cancelleria
Crea nuova pagina
Una volta installati i prodotti, aggiungi una nuova pagina nel backend di WordPress. Dai un titolo alla tua pagina, pubblicala e abilita il Visual Builder di Divi.
Carica il layout della pagina di destinazione della cancelleria
Una volta all'interno della tua nuova pagina, vai ai layout predefiniti e carica il layout della pagina di destinazione del negozio di cancelleria. Sebbene stiamo utilizzando questo layout specifico, sei libero di utilizzare qualsiasi altro layout di tua scelta, purché tu aggiunga o individui un modulo negozio all'interno di quel layout.
3. Modifica sezione negozio
Trova la sezione con il modulo Negozio
Se scorriamo verso il basso la nostra nuova pagina che abbiamo creato utilizzando il layout della pagina di destinazione del negozio di cancelleria, troveremo una sezione con un modulo negozio. Utilizzeremo questa sezione durante i passaggi successivi di questo tutorial.
Impostazioni riga
Dimensionamento reattivo
Inizia aprendo le impostazioni di riga della riga che contiene il modulo Negozio. Come accennato in precedenza, manteniamo lo stesso design sul desktop, abiliteremo le schede di scorrimento del prodotto solo su schermi di dimensioni più piccole. Per creare un'esperienza senza sforzo, consentiremo alla riga di toccare il lato sinistro e destro dello schermo modificando la larghezza nelle impostazioni di dimensionamento.
- Usa larghezza grondaia personalizzata: 1
- Larghezza: 80% (desktop), 100% (tablet e telefono)
Visibilità
Ci assicureremo anche che nulla superi il contenitore di righe impostando le impostazioni di visibilità su nascosto.
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Impostazioni modulo negozio
Scegli il numero di prodotti e la struttura delle colonne del desktop di scelta
Quindi, apriremo le impostazioni del modulo Negozio. Le modifiche che apportiamo al nostro codice CSS (che aggiungeremo in seguito) dipendono dal numero di prodotti che mostriamo. Inizieremo mostrandoti come trasformare un modulo negozio con 8 prodotti in schede a scorrimento dei prodotti. Puoi scegliere qualsiasi layout di colonna a tua scelta per il desktop.
- Conteggio prodotti: 8
- Layout delle colonne: 4 colonne
Dimensionamento reattivo
Per aumentare le dimensioni del nostro modulo negozio, modificheremo le impostazioni di dimensionamento nella scheda design. Nota come lo stiamo facendo solo per tablet e telefono.
- Larghezza: 100% (desktop), 250% (tablet e telefono)
- Larghezza massima: 100% (desktop), 250% (tablet e telefono)
Classe CSS
Aggiungeremo anche una classe CSS al nostro modulo negozio. In seguito, quando aggiungeremo il codice CSS, saremo in grado di trasformare il modulo Shop che contiene solo questa classe CSS. In altre parole, se vuoi che un altro modulo Shop venga visualizzato in uno stato normale, l'esclusione di questa classe CSS ti consentirà di farlo.
- Classe CSS: schede-swipe-prodotto
Overflow reattivi
Completeremo le impostazioni della riga modificando le impostazioni di visibilità su schermi di diverse dimensioni. Come puoi notare nelle impostazioni, vogliamo che l'effetto di scorrimento si verifichi solo su schermi di dimensioni più piccole.
- Overflow orizzontale: nascosto (desktop), scorrimento (tablet e telefono)
- Overflow verticale: nascosto
Aggiungi modulo codice sotto il modulo negozio
Dopo aver modificato il Modulo Negozio, puoi aggiungere un Modulo Codice proprio sotto di esso.
Aggiungi codice CSS al modulo
Il seguente codice CSS trasformerà automaticamente il nostro modulo negozio di 8 prodotti in schede magnetiche di prodotto reattive:
<style>
@media all and (max-width: 980px) {
.product-swipe-cards ul.products {
display: grid !important;
grid-template-columns: repeat(8, 8.8%) !important;
grid-column-gap: 0.7%;
}
.product-swipe-cards .woocommerce ul.products::before {
content: none;
display: block;
}
.product-swipe-cards.et_pb_shop ul.products li.product {
width: 100% !important;
}
.product-swipe-cards .woocommerce {
width: 255% !important;
margin-left: 5%;
}
.product-swipe-cards::-webkit-scrollbar {
display: none;
}
.product-swipe-cards {
-ms-overflow-style: none;
}
}
</style>
Abbinare diversi conteggi di prodotti
Ora, se stai cercando di aggiungere meno (o più) prodotti nel modulo del tuo negozio, il codice cambia leggermente in due punti. Questi due posti devono essere modificati manualmente per abbinare il risultato desiderato. Ad esempio, cambiamo il conteggio dei prodotti nel nostro modulo Negozio in "4".
- Conteggio prodotti: 4
Quando torniamo al nostro codice, ci sono due modifiche che dovremo fare. Per prima cosa, dovremo cambiare le colonne del modello di griglia. Invece di 8, stiamo usando 4 (stesso numero del conteggio dei nostri prodotti). Stiamo anche aumentando le dimensioni in percentuale che questi prodotti occupano nelle nostre schede a scorrimento dei prodotti (più prodotti, meno spazio).
grid-template-columns: repeat(4, 14%) !important;
Quindi, modificheremo anche la larghezza del contenitore in cui vengono inseriti i prodotti. Per 4 prodotti, questo equivale al 150%. Questi valori non sono scolpiti nella pietra, sono ottenuti giocando e trovando un'armonia tra le colonne del modello di griglia e la larghezza del contenitore. Per trovare il giusto equilibrio, passa alla visualizzazione mobile all'interno di Visual Builder e modifica attentamente i valori mentre visualizzi il risultato di queste modifiche.
width: 150% !important;
Aggiungi scorrimento scorrimento
Se vuoi portare l'esperienza dell'utente un ulteriore passo avanti nel design della scheda magnetica del tuo prodotto, puoi aggiungere anche lo scorrimento dello scorrimento. Lo scroll snap aiuta i tuoi visitatori a scorrere agganciandosi all'inizio di un nuovo prodotto. Ciò significa che il loro scorrimento non deve essere esatto, lo scorrimento dello scorrimento a un certo punto prenderà il sopravvento e mostrerà la regolazione della loro posizione all'interno del meccanismo di scorrimento orizzontale. Per abilitare lo scorrimento dello scorrimento sulle schede di scorrimento del prodotto, aggiungi una riga di codice CSS a ciascun prodotto singolarmente nel codice CSS (vedi la schermata di stampa di seguito).
scroll-snap-align: start
Abiliteremo anche lo scorrimento dello scorrimento sul nostro modulo negozio aggiungendo la seguente riga di codice CSS:
scroll-snap-type: x mandatory
Riutilizza il modulo Negozio per visualizzare altre categorie
Clona intera riga una volta
Una volta completato il primo set di schede a scorrimento del prodotto, puoi clonare l'intera riga una volta.
Elimina modulo codice nella riga duplicata
Finché il tuo modulo negozio contiene la stessa classe CSS del precedente, un modulo codice lo farà. Vai avanti ed elimina il modulo codice nella riga duplicata.
Clona Duplica riga quanto desiderato
E clona la riga duplicata ora tutte le volte necessarie, a seconda di quanti set di schede di scorrimento del prodotto desideri visualizzare sulla tua pagina di destinazione!
4. Salva le modifiche alla pagina e visualizza il risultato sul dispositivo mobile
Assicurati che una volta completata l'aggiunta delle schede di scorrimento del prodotto, salvi la pagina prima di uscire da Visual Builder e il gioco è fatto!
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Mobile
Desktop
Pensieri finali
In questo post, ti abbiamo mostrato come trasformare il modulo Divi Shop integrato in schede di scorrimento del prodotto su schermi di dimensioni più piccole. Sul desktop, abbiamo mantenuto la struttura a colonne originale assegnata al Modulo Negozio. L'utilizzo delle schede di scorrimento dei prodotti ti consente di aggiungere infiniti prodotti a un meccanismo di scorrimento orizzontale senza sovraccaricare i tuoi visitatori con lo scorrimento verticale.
È una tendenza spesso utilizzata nel web design moderno perché si concentra sul comportamento degli utenti e semplifica l'accesso a una vasta gamma di elementi su schermi di dimensioni più piccole. Puoi utilizzare queste schede di scorrimento del prodotto su qualsiasi pagina desideri, ma è particolarmente conveniente per le pagine di destinazione dei prodotti che crei. Sei stato anche in grado di scaricare gratuitamente il file JSON del layout! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.