Come creare un design a blocchi reattivo per le pagine dei prodotti Woo con Divi

Pubblicato: 2019-11-02

Ora che puoi usare i moduli woo in Divi, l'unico limite è la tua immaginazione. Ogni modulo woo dinamico è personalizzabile come tutti gli altri moduli all'interno del builder. In questo post, ti mostreremo come ricreare un design a blocchi creativi per le pagine dei tuoi prodotti. I moduli dinamici sono raggruppati in un set creativo che si distingue dallo sfondo scuro. Puoi anche scaricare il file JSON gratuitamente!

Andiamo ad esso.

Anteprima

Prima di iniziare, diamo un'occhiata al design su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE The Responsive Block Design

Per mettere le mani sul design del blocco reattivo gratuito, devi 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 i file

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

1. Aggiungi/Apri prodotto WooCommerce

Dettagli del prodotto

Apri un prodotto esistente o creane uno nuovo. Per ricreare questo design in stile blocco, dovrai inserire le seguenti informazioni:

Titolo
Descrizione
Prezzo
Categoria
attributi
Immagine in evidenza

La scheda degli attributi è il punto in cui vengono estratte le informazioni per il modulo di informazioni aggiuntive woo. Per aggiungere queste informazioni, fai clic sulla scheda attributi e crea tre attributi personalizzati come segue:

Attributi:
- Capacità: 250 ml / 2 tazze da tè
- Materiale: rame puro
- Condizione: normale usura

L'immagine in primo piano deve avere lo stesso colore di sfondo del colore del design.

Abilita Divi Builder e modifica le impostazioni della pagina

Quando tutti i dettagli del prodotto sono stati compilati, vai avanti e abilita Divi Builder. Cambia il layout della pagina in "Larghezza intera".

Passa a Visual Builder

Continua passando a Visual Builder.

Elimina la sezione del prodotto predefinito

Poiché stiamo creando una pagina di prodotto personalizzata, vai avanti ed elimina la sezione del prodotto woo predefinita.

2. Ricrea il design del blocco reattivo

Aggiungi nuova sezione

Sfondo

Il primo passo per ricreare il design è aggiungere una nuova sezione. Aggiungi uno sfondo sfumato su schermi di diverse dimensioni.

Sfondo: gradiente
Colore 1: grigio chiaro #f2f6f5
Colore 2: Quasi nero #313131
Direzione:
- Desktop: 90%
- Tablet + Telefono: 180%
Inizio + Fine:
- Scrivania: 50%
- Compressa: 40%
- Telefono: 30%

Dimensionamento

Regola le impostazioni di dimensionamento della sezione.

Larghezza: 100%
Larghezza massima: 100%

Spaziatura

Rimuovi anche l'imbottitura superiore e inferiore predefinita.

Imbottitura superiore + inferiore: 0vw

Visibilità

Infine, regola gli overflow della sezione.

Overflow verticale + orizzontale: nascosto

Aggiungi riga n. 1

Struttura della colonna

Dopo aver impostato la sezione, aggiungi la prima riga con una colonna.

Dimensionamento

Nella scheda Design, regola le dimensioni per le diverse dimensioni dello schermo.

Larghezza:
- Scrivania: 50%
- Tablet + Telefono: 100%
Larghezza massima: 100%
Allineamento riga: a sinistra

Visibilità

Infine, imposta l'overflow orizzontale e verticale su visibile.

Overflow orizzontale + visibile: visibile

Aggiungi Woo Pangrattato

Contenuto

Aggiungi il primo modulo, il modulo breadcrumb woo. Seleziona "Questo prodotto".

Prodotto: questo prodotto

Testo

Nella scheda Design, modella il testo come segue.

Carattere del testo: Fenix
Colore del testo: marrone #594239
Dimensione del testo:
- Desktop: 1vw
- Tablet: 2vw
- Telefono: 3vw

Spaziatura

Aggiungi alcuni valori di spaziatura per le diverse dimensioni dello schermo.

Margine superiore: 3vw
Margine sinistro:
- Desktop: 10vw
- Tablet + Telefono: 20vw

Aggiungi immagine Woo

Aggiungi contenuto

Ora è il momento di aggiungere l'immagine del prodotto con un modulo Woo Image. Nella scheda dei contenuti, scegli "Questo prodotto".

Prodotto: questo prodotto

Dimensionamento

Continuare regolando il dimensionamento del modulo.

Larghezza: 100%

Visibilità

Infine, nascondi l'overflow.

Overflow orizzontale + verticale: nascosto

Aggiungi riga #2

Struttura della colonna

Aggiungi una seconda riga con due colonne.

Dimensionamento

Per prima cosa, regola le dimensioni.

Larghezza grondaia: 1
Larghezza:
- Desktop: 53%
- Tablet + Telefono: 53%
Larghezza massima: 100%
Allineamento: Destra

Spaziatura

Quindi, i valori di spaziatura.

Margine superiore:
- Desktop: -47vw
- Tablet + Telefono: 0vw
Margine sinistro:
- Tablet: -5vw
- Telefono: -8vw
Imbottitura inferiore:
- Desktop + Tablet: 4.1vw
Imbottitura sinistra:
- Desktop: 0vw
- Tablet: 16vw
- Telefono: 12vw
Imbottitura destra:
- Desktop: 0vw
- Tablet: 0vw

CSS personalizzato

Nella scheda Avanzate, aggiungi alcuni CSS personalizzati.

Elemento principale CSS:
- display: flessibile;

display: flex;

Visibilità

Infine, imposta gli overflow su visibili.

Overflow orizzontale + verticale: visibile

Impostazioni colonna 1

Spaziatura

Prima di aggiungere qualsiasi modulo, regolare i valori di spaziatura nella colonna 1.

Imbottitura sinistra: 4vw
Imbottitura destra: 0vw

Impostazioni colonna 2

Spaziatura

Regola anche i valori di spaziatura della colonna 2.

Imbottitura superiore:
- Desktop: 7vw
- Tablet: 17vw
- Telefono: 28vw
Imbottitura destra:
- Desktop + Tablet: 15vw

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

Ora è il momento di aggiungere i moduli. Inizia con un modulo di testo. Inserisci contenuto descrittivo per il prodotto.

Testo

Quindi, modella il testo.

Carattere: Fenix
Colore: #f2eed0
Taglia:
- Desktop: 1.3vw
- Tablet: 2.6vw
- Telefono: 3.8vw
Spaziatura lettere: 1px
Allineamento: Centro

Dimensionamento

Regola le dimensioni del modulo per le diverse dimensioni dello schermo.

Larghezza:
- Scrivania: 50%
- Compressa: 60%
- Telefono: 80%

Spaziatura

Inoltre, regolare i valori di spaziatura come segue.

Imbottitura superiore + inferiore: 1vw
Imbottitura sinistra + destra: 1vw

Frontiera

Aggiungi un bordo al modulo di conseguenza.

Stili bordo: in alto + sinistra + destra
Larghezza del bordo:
- In alto + Sinistra + Destra: 2px
Colore del bordo:
- In alto + Sinistra + Destra: Crema #f2eed0

Aggiungi il titolo Woo alla colonna 1

Aggiungi contenuto

Ora aggiungi un modulo titolo woo e scegli "Questo prodotto" nella scheda contenuto.

Prodotto: questo prodotto

Sfondo

Per modellare il modulo, aggiungi uno sfondo arancione scuro.

Colore di sfondo
Colore: Arancio Rame #d66b00

Testo del titolo

Quindi, modifica le impostazioni del testo dell'intestazione.

Livello titolo titolo: H1
Carattere: Fenix
Colore: Crema #f2eed0
Taglia:
- Desktop: 2.9vw
- Tablet: 7.8vw
- Telefono: 13.9vw
Spaziatura lettere H1: 1px

Dimensionamento

Inoltre, regolare il dimensionamento del modulo

Larghezza: 100%

Spaziatura

Quindi, aggiungi alcuni valori di riempimento.

Imbottitura superiore + inferiore:
- Desktop: 2vw
- Tablet: 3vw
- Telefono: 4vw
Imbottitura sinistra + destra:
- Desktop: 2vw
- Tablet: 3vw
- Telefono: 4vw

Frontiera

Infine, aggiungi un bordo come segue.

Stili bordo: in alto + sinistra + destra
Larghezza del bordo:
- In alto + Sinistra + Destra: 2px
Colore del bordo:
- In alto + Sinistra + Destra: Crema #f2eed0

Aggiungi il titolo della descrizione di Woo alla colonna 1

Aggiungi contenuto

Sotto il titolo, aggiungi un modulo di descrizione woo. Nella scheda dei contenuti, scegli "Questo prodotto".

Prodotto: questo prodotto
Tipo di descrizione: Descrizione

Testo

Quindi, modella il testo.

Carattere: Open Sans
Colore: Crema #f2eed0
Taglia:
- Desktop: 08vw
- Tablet: 2vw
- Telefono: 3vw

Dimensionamento

Inoltre, regola la taglia.

Larghezza: 100%

Spaziatura

Allo stesso modo, regola la spaziatura.

Imbottitura superiore + inferiore:
- Desktop: 2vw
- Tablet + Telefono: 3vw
Imbottitura sinistra + destra:
- Desktop: 2vw
- Tablet + Telefono: 3vw

Frontiera

Simile ad altri moduli, aggiungi un bordo.

Stili dei bordi: tutti e quattro i bordi
Larghezza: 2px
Colore: Crema #f2eed0

Aggiungi informazioni aggiuntive Woo alla colonna 2

Aggiungi contenuto

Ora è il momento di aggiungere gli attributi personalizzati con il modulo di informazioni aggiuntive di woo. Nella scheda dei contenuti, scegli "Questo prodotto".

Prodotto: questo prodotto

Testo

Modificare le impostazioni del testo come segue.

Carattere: Open Sans
Stile: corsivo
Colore: Crema #f2eed0
Taglia:
- Desktop: 0.6vw
- Tablet: 1.6vw
- Telefono: 2.2vw

Testo attributo

Quindi, modella il testo dell'attributo di conseguenza:

Carattere: Fenix
Colore: Crema #f2eed0
Taglia:
- Desktop: 1.1vw
- Tablet: 2vw
- Telefono: 3vw
Spaziatura: 1px

Dimensionamento

Inoltre, regola la taglia.

Larghezza: 100%

Frontiera

E infine, aggiungi un bordo.

Stili bordo: in alto + a destra + in basso
Larghezza del bordo:
- Alto + Destra + Basso: 2px
Colore del bordo:
- In alto + Destra + In basso: Crema #f2eed0

Aggiungi riga #3

Struttura della colonna

Aggiungi la terza riga, con due colonne.

Dimensionamento

Prima di aggiungere moduli, regolare le dimensioni della riga per le diverse dimensioni dello schermo.

Larghezza:
- Scrivania: 50%
- Compressa: 87%
- Telefono: 93%
Allineamento: Destra

Imbottitura

Inoltre, regola l'imbottitura.

Imbottitura inferiore: 12vw

Impostazioni colonna 1

Spaziatura

Continua regolando l'imbottitura nella prima colonna.

Imbottitura sinistra:
- Desktop: 5vw
- Tablet + Telefono: 12vw

Aggiungi il prezzo di Woo alla colonna 1

Aggiungi contenuto

Ora aggiungi il prezzo del prodotto utilizzando il modulo prezzo woo. Nella scheda dei contenuti, scegli "Questo prodotto".

Prodotto: questo prodotto

Testo del prezzo

Quindi, modella il testo di conseguenza.

Carattere: Fenix
Colore: Crema #f2eed0
Taglia:
- Desktop: 1.5vw
- Tablet: 3.5vw
- Telefono: 5vw

Dimensionamento

Inoltre, regolare il dimensionamento del modulo.

Larghezza:
- Desktop: 39%
- Compressa: 45%
- Telefono: 54%

Spaziatura

Regola anche la spaziatura.

Imbottitura superiore:
- Desktop: 1vw
- Tablet: 2vw
- Telefono: 3v2
Imbottitura inferiore:
- Desktop: 1vw
- Tablet + Telefono: 2vw
Imbottitura sinistra:
- Desktop: 1vw
- Tablet + Telefono: 2vw
Imbottitura destra:
- Tablet + Telefono: 2vw

Frontiera

Infine, aggiungi il bordo.

Stili di bordo: tutti e quattro i lati
Larghezza: 2px
Colore: Crema #f2eed0

Aggiungi Woo Aggiungi al carrello alla colonna 2

Aggiungi contenuto

Il modulo finale è un modulo woo add to cart. Nella scheda dei contenuti, scegli "Questo prodotto".

Stili dei pulsanti

Stile il pulsante come segue.

Stili personalizzati: Sì
Dimensione del testo del pulsante:
- Desktop: 1.3vw
- Tablet: 3.5vw
- Telefono: 5vw
Colore del testo: crema #f2eed0
Colore di sfondo: Arancio Rame #d66b00

Imbottitura dei pulsanti

Quindi, aggiungi alcuni valori di riempimento al pulsante.

Imbottitura superiore + inferiore: 0,5 vw
Imbottitura sinistra + destra: 1.5vw

Dimensionamento

Ultimo ma non meno importante, regola il dimensionamento del modulo e il gioco è fatto!

Larghezza: 100%

Anteprima

Diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

È un involucro

Questo è tutto! Se il tuo contenuto è più lungo o più corto di quello in questo tutorial, potrebbe interrompere la spaziatura dei blocchi. Tutto quello che devi fare è regolare le impostazioni della colonna in modo che si adattino meglio alla composizione. Speriamo che questo tutorial ti ispiri a creare design Divi più sorprendenti. Fateci sapere nei commenti se avete domande.