Come impilare verticalmente le immagini della galleria Woo all'interno del modello di pagina del prodotto Divi
Pubblicato: 2020-07-01Per impostazione predefinita, non appena aggiungi le immagini della galleria ai tuoi prodotti WooCommerce, appariranno orizzontalmente sotto l'immagine in primo piano del tuo prodotto sul frontend del design della tua pagina prodotto. In alcuni progetti specifici, impilare verticalmente queste immagini della galleria woo potrebbe essere più conveniente, ad esempio nei progetti di pagine di prodotti a schermo intero. Se stai cercando un modo rapido per impilare verticalmente le immagini della galleria woo all'interno del modello di pagina del prodotto che crei con Divi's Theme Builder, adorerai questo tutorial. Ti mostreremo passo dopo passo come arrivarci. Accompagneremo questo approccio con un modello minimo di pagina del prodotto che potrai anche scaricare gratuitamente! Questo tutorial funziona al meglio sulle pagine dei prodotti che utilizzano immagini con un rapporto 1:1.
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica GRATUITAMENTE il modello di pagina del prodotto
Per mettere le mani sul modello di pagina 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!
Crea modello di pagina prodotto all'interno di Divi Theme Builder
Vai a Divi Theme Builder e aggiungi un nuovo modello
Inizia andando su Divi Theme Builder e fai clic su "Aggiungi nuovo modello".
Usa il modello su tutti i prodotti
Useremo questo modello su tutti i prodotti, ma sentiti libero di modificare le condizioni come preferisci.
Entra nell'editor dei modelli del corpo del modello
Una volta creato il modello, fai clic su "Aggiungi corpo personalizzato" e continua selezionando "Crea corpo personalizzato" per essere reindirizzato all'editor del modello.
Inizia a costruire il corpo del modello della pagina di categoria
Modifica sezione #1
Colore di sfondo
All'interno dell'editor del modello, noterai una sezione. Apri quella sezione e aggiungi un colore di sfondo bianco.
- Colore di sfondo: #ffffff
Spaziatura
Passa alla scheda Design e rimuovi tutte le imbottiture superiori e inferiori predefinite.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga, passa alla scheda Design e modifica le impostazioni di dimensionamento di conseguenza:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza: 95%
- Larghezza massima: 2560 px
- Allineamento righe: Centro
Spaziatura
Utilizzeremo un'imbottitura personalizzata superiore e inferiore anche su schermi di dimensioni più piccole.
- Imbottitura superiore: 100 px (solo tablet e telefono)
- Imbottitura inferiore: 100 px (solo tablet e telefono)
Elemento principale CSS
Per allineare il contenuto della colonna sul desktop, utilizzeremo due righe di codice CSS nell'elemento principale della riga. Ripristineremo la proprietà di visualizzazione su tablet e telefono.
Scrivania:
display: flex; align-items: center;
Tablet e telefono:
display: block;
Sfondo sfumato colonna 2
Una volta eseguite le impostazioni generali della riga, apri le impostazioni della seconda colonna e applica uno sfondo sfumato radiale.
- Colore 1: #f7f2ef
- Colore 2: RGB (255,255,255,0)
- Tipo di gradiente: radiale
- Direzione radiale: Centro
- Posizione di partenza: 20%
- Posizione finale: 20%
Spaziatura colonna 2
Passa alla scheda Design della colonna e modifica i valori di riempimento personalizzati su schermi di diverse dimensioni.
- Imbottitura superiore: 30% (desktop), 10% (tablet e telefono)
- Imbottitura fondo: 10%
- Imbottitura sinistra: 5%
- Imbottitura destra: 5%
Aggiungi modulo immagini Woo alla colonna 1
Contenuto dinamico
È ora di aggiungere moduli! Il primo modulo di cui abbiamo bisogno nella colonna 1 è un modulo Woo Images. Questo tutorial funziona meglio se utilizzi un'immagine in primo piano e le immagini della galleria con un rapporto 1:1. In questo modo, saremo in grado di trasformare le immagini in cerchi nei prossimi passaggi. Dopo aver aggiunto il modulo Woo Images, assicurati che il contenuto dinamico sia impostato su "Questo prodotto".
- Prodotto: questo prodotto
Aggiungi modulo codice alla colonna 1
Aggiungi codice CSS
Proprio sotto il modulo immagini Woo, aggiungeremo un modulo codice. Il codice CSS che inseriamo in questo modulo di codice ci aiuterà a impilare verticalmente le immagini della galleria woo sul lato sinistro della nostra colonna.
<style>
.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}
.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}
.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}
</style>
Aggiungi modulo titolo Woo alla colonna 2
Contenuto dinamico
Alla prossima colonna. Lì, il primo modulo di cui abbiamo bisogno è un modulo titolo Woo.
- Prodotto: questo prodotto
Impostazioni del testo del titolo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo dell'intestazione come segue:
- Carattere del titolo: PT Sans
- Peso del carattere del titolo: grassetto
- Colore del testo del titolo: #000000
- Dimensione del testo del titolo: 84 px (desktop), 60 px (tablet), 45 px (telefono)
Aggiungi il modulo di descrizione di Woo alla colonna 2
Contenuto dinamico
Al modulo successivo, che è un modulo di descrizione di Woo.
- Prodotto: questo prodotto
- Tipo di descrizione: breve descrizione
Impostazioni testo
Modifica le impostazioni del testo del modulo di conseguenza:
- Carattere del testo: Karla
- Dimensione del testo: 17 px (desktop e tablet), 15 px (telefono)
- Altezza riga di testo: 1,9 em
Spaziatura
Completa le impostazioni del modulo aggiungendo un margine superiore e inferiore.
- Margine superiore: 5%
- Margine inferiore: 5%
Aggiungi modulo prezzo Woo alla colonna 2
Contenuto dinamico
Aggiungi un modulo prezzo Woo proprio sotto il modulo descrizione Woo.
- Prodotto: questo prodotto
Impostazioni testo prezzo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo del prezzo come segue:
- Carattere prezzo: PT Sans
- Peso del carattere del prezzo: grassetto
- Colore testo prezzo: #ce8654
- Dimensione testo prezzo: 27px
Aggiungi Woo Add to Cart Module alla colonna 2
Contenuto dinamico
Il modulo successivo e ultimo di cui abbiamo bisogno per completare questo tutorial è un modulo Woo Add to Cart.
- Prodotto: questo prodotto
Impostazioni dei campi
Passa alla scheda Progettazione e modifica le impostazioni dei campi come segue:
- Colore di sfondo dei campi: #ffffff
- Colore testo campi: #000000
- Carattere dei campi: Open Sans
- Tutti gli angoli: 0px
- Larghezza bordo inferiore dei campi: 1px
- Colore bordo inferiore dei campi: #ce8654
Impostazioni dei pulsanti
Quindi, modella il pulsante nelle impostazioni del pulsante.
- Usa stili personalizzati per pulsante: Sì
- Colore del testo del pulsante: #ffffff
- Colore di sfondo del pulsante: # 0a0201
- Larghezza bordo pulsante: 0px
- Raggio del bordo del pulsante: 100 px
- Carattere pulsante: PT Sans
- Peso del carattere del pulsante: grassetto
- Imbottitura superiore del pulsante: 20 px
- Imbottitura fondo pulsante: 20px
- Imbottitura pulsante sinistro: 50 px
- Imbottitura pulsante destro: 50 px
Spaziatura
E completa le impostazioni del modulo e questo tutorial aggiungendo un margine superiore al modulo Woo Add to Cart. Una volta che hai finito di modificare il modello della pagina del prodotto, assicurati di salvare tutte le modifiche al Theme Builder prima di visualizzare il risultato sulle pagine del tuo prodotto!
- Margine superiore: 5%
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come essere creativo con le pagine dei prodotti che crei utilizzando Divi's Theme Builder e i moduli WooCommerce. Più specificamente, ti abbiamo mostrato come impilare verticalmente le immagini della galleria woo. Questo approccio si sposa bene con un design della pagina del prodotto a schermo intero, ma può tornare utile per qualsiasi tipo di modello di pagina del prodotto che crei. Sei stato anche in grado di scaricare il file JSON gratuitamente! 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.