Scarica una bellissima pagina del prodotto a schermo intero per Divi
Pubblicato: 2019-11-04Dal momento che i moduli WooCommerce sono diventati parte di Divi, ti abbiamo mostrato un paio di design di pagine prodotto che puoi creare utilizzando le opzioni integrate di Divi. Oggi aggiungiamo un nuovo tutorial a quell'elenco mostrandoti come creare una bellissima pagina del prodotto a schermo intero. Stiamo inserendo tutto il contenuto del prodotto in un'unica sezione mentre creiamo un design straordinario. Sebbene stiamo limitando lo scorrimento verticale richiesto sulla pagina del prodotto, il design non sembra in alcun modo travolgente. Ci siamo anche assicurati che il design rimanesse bello e reattivo su schermi di piccole dimensioni. Potrai anche scaricare gratuitamente il file JSON!
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 layout del prodotto a schermo intero
Per mettere le mani sul layout del prodotto gratuito a schermo intero, 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!
Iscriviti al nostro canale Youtube
Iniziamo a ricreare!
Apri la pagina del prodotto esistente
La prima cosa che devi fare è aprire una pagina del prodotto esistente o crearne una nuova. Per questo particolare layout, abbiamo aggiunto i seguenti elementi alla nostra pagina del prodotto:
- Titolo del prodotto
- Immagine in primo piano
- Breve descrizione
- Descrizione
- Prezzo
Abilita Divi e modifica le impostazioni della pagina
Continua abilitando Divi e modificando il layout della pagina nelle impostazioni della pagina.
Passa a Visual Builder
Fatto ciò, puoi passare a Visual Builder.
Elimina la sezione esistente
All'interno di Visual Builder, noterai una sezione con gli elementi della pagina del prodotto predefinita. Puoi andare avanti ed eliminare l'intera sezione. Nei prossimi passaggi di questo post, ricreeremo il nostro design alternativo.
Aggiungi nuova sezione
Spaziatura
È ora di iniziare a creare! Aggiungi una nuova sezione, apri le impostazioni della sezione e modifica i valori di riempimento superiore e inferiore.
- Imbottitura superiore: 5vw
- Imbottitura inferiore: 5vw
straripamenti
Nascondi anche gli overflow della sezione.
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni di riga e regola le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 100%
Colonna 1
Indice Z
Stiamo anche aumentando l'indice z della prima colonna nelle impostazioni di visibilità.
- Indice Z: 10
Colonna 2
Sfondo sfumato
Apri successivamente le impostazioni della colonna 2 e aggiungi uno sfondo sfumato su diverse dimensioni dello schermo:
- Colore 1: #ffcb49
- Colore 2: #ffffff
- Tipo di gradiente: radiale
- Direzione radiale: Centro
- Posizione iniziale: 66% (desktop), 50% (tablet e telefono)
- Posizione finale: 66% (desktop), 50% (tablet e telefono)
Aggiungi modulo titolo Woo alla colonna 1
Contenuto dinamico
È ora di iniziare ad aggiungere moduli! Nella colonna 1, l'unico modulo di cui abbiamo bisogno è un modulo titolo Woo.
- Prodotto: questo prodotto
Impostazioni del testo del titolo
Passa alla scheda Design del modulo e modifica le impostazioni del testo del titolo come segue:
- Carattere del titolo: Montserrat
- Peso del carattere del titolo: ultraleggero
- Allineamento del testo del titolo: a sinistra (desktop), al centro (tablet e telefono)
- Dimensione del testo del titolo: 9vw
Dimensionamento
Modifica anche il dimensionamento del modulo.
- Larghezza: 50vw (desktop), 100% (tablet e telefono)
Spaziatura
Insieme alle impostazioni di spaziatura.
- Margine superiore: 14vw (desktop), 0vw (tablet e telefono)
- Margine inferiore: 5vw (tablet e telefono)
- Margine sinistro: -11vw (desktop), 2vw (tablet e telefono)
- Margine destro: 2vw (tablet e telefono)
Trasforma Ruota
Ultimo ma non meno importante, ruota l'intero modulo nelle impostazioni di trasformazione.
- Sinistra: 270deg (desktop), 0deg (tablet e telefono)
Aggiungi modulo immagini Woo alla colonna 2
Contenuto dinamico
Al secondo modulo! Lì, l'unico modulo di cui abbiamo bisogno è il modulo Woo Image.
- Prodotto: questo prodotto
Impostazioni immagine
Passa alla scheda di progettazione del modulo e modifica le impostazioni dell'immagine come segue:
- Angoli arrotondati immagine: 1vw (tutti gli angoli)
- Forza sfocatura ombra scatola: 50 px
- Colore ombra: rgba(0,0,0,0.3)
Dimensionamento
Completa le impostazioni del modulo Woo Image modificando la larghezza e l'allineamento del modulo nelle impostazioni di dimensionamento.
- Larghezza: 35vw
- Allineamento del modulo: Centro
Aggiungi il modulo di descrizione di Woo n. 1 alla colonna 3
Contenuto dinamico
All'ultima colonna! Lì, il primo modulo di cui abbiamo bisogno è il modulo di descrizione di Woo.
- Prodotto: questo prodotto
- Tipo di descrizione: breve descrizione
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:
- Carattere del testo: Montserrat
- Stile del carattere del testo: maiuscolo
- Dimensione del testo: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Spaziatura delle lettere del testo: -0.07vw
- Altezza riga di testo: 1,8 em
Spaziatura
Modifica anche le impostazioni di spaziatura.
- Margine superiore: 9vw
- Imbottitura sinistra: 2vw (desktop), 5vw (tablet e telefono)
- Imbottitura destra: 5vw
Aggiungi modulo prezzo Woo alla colonna 3
Contenuto dinamico
Al modulo successivo, che è il modulo prezzo Woo.
- Prodotto: questo prodotto
Impostazioni testo prezzo
Modifica le impostazioni del testo del prezzo del modulo come segue:
- Carattere prezzo: Montserrat
- Colore testo prezzo: #333333
- Dimensioni testo prezzo: 3vw (desktop), 7vw (tablet), 10vw (telefono)
- Altezza linea prezzo: 1,8 em
Spaziatura
Modifica anche le impostazioni di spaziatura.
- Margine superiore: 4vw
- Imbottitura sinistra: 2vw (desktop), 5vw (tablet e telefono)
- Imbottitura destra: 2vw (desktop), 5vw (tablet e telefono)
Aggiungi Woo Add To Cart Module alla colonna 3
Contenuto dinamico
Il prossimo e ultimo modulo di cui abbiamo bisogno per completare questo progetto è il modulo Woo Add To Cart.
- Prodotto: questo prodotto
Impostazioni dei campi
Modificare le impostazioni dei campi del modulo come segue:
- Colore di sfondo dei campi: #0a0900
- Colore testo campi: #ffffff
- Carattere dei campi: Montserrat
- Dimensioni del testo dei campi: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
- Angoli arrotondati dei campi: 50vw (tutti gli angoli)
Impostazioni dei pulsanti
Gioca anche con le impostazioni dei pulsanti.
- Usa stili personalizzati per pulsante: Sì
- Dimensione del testo del pulsante: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Colore del testo del pulsante: #ffffff
- Colore di sfondo del pulsante: #ffcb49
- Larghezza bordo pulsante: 0px
- Carattere pulsante: Montserrat
- Imbottitura superiore: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
- Imbottitura inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Imbottitura sinistra: 4vw (desktop), 8vw (tablet), 10vw (telefono)
- Imbottitura destra: 4vw (Desktop), 8vw (Tablet), 10vw (Telefono)
Spaziatura
E completa le impostazioni del modulo aggiungendo alcuni valori di spaziatura personalizzati su diverse dimensioni dello schermo.
- Margine superiore: 2vw
- Margine sinistro: -3vw (desktop), 5vw (tablet e telefono)
- Margine destro: 5vw (tablet e telefono)
Trasforma la pagina del prodotto in un modello
Salva il layout della pagina nella libreria Divi
Una volta completata la pagina del prodotto a schermo intero, puoi utilizzarla per ciascuno dei tuoi prodotti utilizzando Divi's Theme Builder. Per farlo, salva il layout che hai appena creato nella tua libreria Divi.
Aggiungi un nuovo modello al generatore di temi
Passa al Generatore di temi nelle impostazioni Divi e aggiungi un nuovo modello.
Seleziona le pagine dei prodotti in cui desideri che questo layout venga visualizzato.
Carica layout nel corpo del modello
Quindi, fai clic su "Aggiungi corpo globale" e seleziona "Aggiungi da libreria".
Scegli il tuo layout nella scheda "I tuoi layout salvati".
E salva tutte le tue modifiche!
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 ricreare una bellissima pagina di prodotto a schermo intero che puoi utilizzare per qualsiasi tipo di sito di eCommerce che stai configurando. Abbiamo abbinato le impostazioni dei vari moduli woo per creare un risultato straordinario e limitare lo scorrimento verticale richiesto. Speriamo che questo design ti ispiri a creare anche le tue pagine di prodotto a schermo intero! 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.