Come modificare il punto di interruzione della colonna mobile del modulo Divi Shop
Pubblicato: 2020-01-24Per impostazione predefinita, non appena passi a un dispositivo mobile, il modulo negozio si trasforma in un layout a una colonna. Ora, se stai cercando di evidenziare ogni prodotto individualmente, è fantastico, ma con le dimensioni dello schermo dello smartphone più grandi al giorno d'oggi, potresti voler consentire a due prodotti di apparire uno accanto all'altro quando usi il modulo Negozio. Nel tutorial Divi di oggi, ti mostreremo come modificare il punto di interruzione mobile del modulo negozio utilizzando CSS, consentendo a due prodotti di apparire uno accanto all'altro sulla maggior parte degli smartphone moderni. Questo è un ottimo tutorial da avere a portata di mano se stai creando un negozio online in futuro! Potrai anche scaricare gratuitamente il file JSON del design!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Mobile
Desktop
Scarica il modello di pagina del negozio GRATUITAMENTE
Per mettere le mani sul modello di pagina del negozio 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. Vai a Divi Theme Builder e aggiungi un nuovo modello
Vai a Divi Theme Builder e aggiungi un nuovo modello
Inizia andando su DIvi's Theme Builder e aggiungi un nuovo modello.
Usa il modello nella pagina del negozio
Usa questo nuovo modello nella pagina del negozio del tuo sito web.
- Utilizzare su: Negozio
Inizia a costruire il corpo del modello
E inizia a costruire il corpo del modello del negozio.
2. Inizia a costruire il corpo del modello
Impostazioni della sezione
Sfondo sfumato
Una volta all'interno dell'editor dei modelli, noterai una sezione. Apri quella sezione e usa il seguente sfondo sfumato per essa:
- Colore 1: #32ff3d
- Colore 2: #29c4a9
- Tipo di gradiente: lineare
- Direzione gradiente: 109 gradi
Immagine di sfondo
Carica anche un'immagine di sfondo. Puoi trovare l'immagine di sfondo che stiamo utilizzando in questo tutorial nella cartella di download che hai potuto scaricare all'inizio di questo post.
- Dimensione immagine di sfondo: adatta
Spaziatura
Passa alla scheda Progettazione della sezione e modifica i valori di spaziatura di conseguenza:
- Margine superiore: 50 px
- Margine sinistro: 50 px
- Margine destro: 50 px
- Imbottitura inferiore: 150 px
Frontiera
Completa le impostazioni della sezione aggiungendo un raggio di bordo.
- Tutti gli angoli: 20px
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Aggiungi modulo di testo alla colonna
Aggiungi contenuto H1
Aggiungi un modulo di testo alla colonna della riga con un contenuto H1 a tua scelta.
Impostazioni testo H1
Modificare di conseguenza le impostazioni del testo H1 del modulo:
- Carattere intestazione: Prata
- Allineamento del testo dell'intestazione: al centro
- Colore del testo dell'intestazione: #ffffff
- Dimensione del testo dell'intestazione: 80 px (desktop), 60 px (tablet), 40 px (telefono)
Aggiungi sezione #2
Indice Z
Aggiungi un'altra sezione proprio sotto la precedente. Apri le impostazioni della sezione e aumenta l'indice z.
- Indice Z: 2
Aggiungi nuova riga
Struttura della colonna
Quindi, aggiungi una nuova riga utilizzando la seguente struttura di colonne:
Colore di sfondo
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi un colore di sfondo.
- Colore di sfondo: #ffffff
Dimensionamento
Passa alla scheda di progettazione del modulo e modifica le impostazioni di dimensionamento come segue:
- Larghezza: 100%
- Larghezza massima: 1380 px
Spaziatura
Quindi, aggiungi alcuni valori di spaziatura personalizzati su diverse dimensioni dello schermo.
- Margine superiore: 200 px
- Imbottitura superiore: 50 px (desktop), 20 px (tablet e telefono)
- Imbottitura inferiore: 50 pixel (desktop), 20 pixel (tablet e telefono)
- Imbottitura sinistra: 100 pixel (desktop), 20 pixel (tablet e telefono)
- Imbottitura destra: 100 px (desktop), 20 px (tablet e telefono)
Frontiera
Stiamo anche aggiungendo un raggio di bordo all'intera riga.
- Tutti gli angoli: 25px
Scatola ombra
Completa le impostazioni della riga aggiungendo un'ombra sottile.
- Forza sfocatura ombra scatola: 50 px
- Colore ombra: rgba(0,0,0,0.1)
Aggiungi il modulo del negozio alla colonna
Contenuto
Ora è il momento di inserire il nostro Modulo Shop. Stiamo usando un layout a 4 colonne.
- Layout delle colonne: 4 colonne
Sovrapposizione
Passa alla scheda di progettazione del modulo e modifica i colori di sovrapposizione.
- Colore icona sovrapposizione: #29c6a6
- Colore di sfondo della sovrapposizione: rgba (255,255,255,0.75)
Immagine
Modifica anche le impostazioni dell'immagine.
- Tutti gli angoli: 10px
- Forza sfocatura ombra scatola: 50 px
- Colore ombra: rgba(0,0,0,0.11)
Impostazioni del testo del titolo
Continua modificando di conseguenza le impostazioni del testo del titolo:
- Carattere del titolo: Prata
- Dimensione del testo del titolo: 30 px (desktop), 25 px (tablet), 20 px (telefono)
Impostazioni testo prezzo
Successivamente, apporta alcune modifiche alle impostazioni del testo del prezzo.
- Carattere prezzo: Montserrat
- Prezzo Carattere Peso: Medio
- Dimensioni testo prezzo: 18 px (desktop), 16 px (tablet), 14 px (telefono)
Spaziatura
Completa le impostazioni del modulo aggiungendo un po' di imbottitura superiore.
- Imbottitura superiore: 50px
Aggiungi modulo codice alla colonna
Una volta completata la progettazione complessiva del modulo negozio, è il momento di modificare il punto di interruzione della colonna mobile del modulo negozio utilizzando i CSS. Aggiungeremo il codice CSS a un modulo di codice all'interno del nostro design. Vai avanti e aggiungi un nuovo modulo codice proprio sotto il modulo negozio.
Inserisci codice CSS
Stiamo riducendo il punto di interruzione mobile a una colonna a una larghezza di 300 pixel. Ciò significa che la maggior parte degli smartphone moderni visualizzerà due prodotti uno accanto all'altro anziché uno. Per fare in modo che ciò accada, aggiungeremo le seguenti righe di codice CSS al Modulo codice:
<style>
@media (max-width: 479px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 49% !important;
}
}
@media (max-width: 300px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 100% !important;
}
}
</style>
3. Salva tutte le modifiche del generatore di temi e visualizza l'anteprima dei risultati
Dopo aver completato il design della pagina del negozio e aggiunto il codice CSS per modificare il punto di interruzione mobile, puoi salvare tutte le modifiche del Theme Builder e visualizzare il risultato sulla pagina del tuo negozio!
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 modificare il punto di interruzione della colonna mobile del modulo negozio, che ti consente di mostrare due prodotti uno accanto all'altro sulla maggior parte degli smartphone moderni al giorno d'oggi. Questo è un modo eccellente per ridurre lo scorrimento mobile richiesto e mostrare ai tuoi visitatori più prodotti contemporaneamente. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande, 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.