Come creare un modello di pagina prodotto divertente per i prodotti per bambini con Divi
Pubblicato: 2020-01-06I siti web di prodotti per bambini hanno uno stile unico. Tendono ad essere divertenti, colorati e ispirano un sorriso. Il tuo negozio WooCommerce per i prodotti per bambini ora è più facile da creare con il generatore di temi Divi e i moduli woo personalizzabili. Perché non renderlo un po' più speciale con un design unico e divertente? In questo post, ti mostreremo come creare un modello di pagina prodotto per bambini nel generatore di temi che si applicherà a tutti i tuoi prodotti. Funzionerà al meglio con le immagini dei prodotti con uno sfondo trasparente. Potrai anche scaricare gratuitamente il file JSON!
Iniziamo.
Anteprima
Prima di iniziare a ricreare il design, diamo un'occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica GRATUITAMENTE il modello di prodotto per bambini divertenti
Per mettere le mani sul modello di prodotto per bambini divertente e gratuito, devi prima scaricarlo utilizzando il pulsante qui sotto. 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. Preparazione del design per il modello di prodotto per bambini
Rimuovi lo sfondo dalla foto del prodotto
La prima cosa che faremo prima di iniziare con il design del prodotto per bambini è preparare le immagini. Rimuovi lo sfondo dalle immagini del prodotto. Puoi ottenere ciò con Adobe Photoshop, Adobe Illustrator o remove.bg. Lascia un po' di spazio intorno al prodotto in modo che si adatti bene al design. La dimensione migliore per l'immagine finale è 600X400 pixel.
Crea un disegno di sfondo
Il secondo passo è creare un disegno di sfondo da posizionare dietro l'immagine. Questo disegno con forme sovrapposte si crea facilmente all'interno di Adobe Illustrator. In alternativa, puoi trovare questa immagine di sfondo nella cartella scaricabile sopra. Ecco i passaggi da seguire se si desidera creare lo sfondo:
- Crea (o crea) una forma.
- Dai alla forma il colore che desideri.
- Duplica la forma.
- Coloralo con un tono simile all'originale.
- Ruota la seconda forma per creare una bella composizione.
- Aggiungi un po' di trasparenza a entrambe le forme.
- Aggiungi uno sfondo dello stesso colore dello sfondo nel progetto finale.
- Salva come JPG a circa 1750X1650 px.
2. Crea/aggiungi un nuovo prodotto Woocommerce
Informazioni prodotto
Una volta che abbiamo l'immagine del prodotto e i design dello sfondo pronti, è il momento di creare un prodotto per bambini. Per creare un design esattamente come il nostro, inserisci le seguenti informazioni.
- Titolo: Blocchi di lettere in legno
- Descrizione lunga: questi blocchi di legno naturale sono l'ideale per i bambini per imparare le lettere e i numeri in modo divertente e creativo. I bordi sono arrotondati per i mignoli e la vernice è atossica.
- Prezzo di vendita vecchio: 12,99
- Nuovo prezzo di vendita: 7,99
- Immagine in evidenza: ritagliare l'immagine dei blocchi di legno. Dimensioni preferite: 600 x 400 px
- Attributi: vedi sotto
Nella scheda attributi, inserisci i valori per il modulo di informazioni aggiuntive.
- Materiale: legno di pino naturale
- Vernice: vernice bianca non tossica
- Colori della vernice: bianco, blu, verde, fucsia
3. Crea un nuovo modello in Theme Builder
Apri Divi Theme Builder e aggiungi un nuovo modello
Ora è il momento di passare al generatore di temi Divi. Costruiremo il design lì dentro. Aggiungi un nuovo modello.
Inizia a creare carrozzeria personalizzata per tutti i prodotti
Usa questo modello su tutti i prodotti e inizia a costruire il corpo.
Suggerimento per il costruttore di temi:
Quando crei un design di prodotto all'interno del generatore di temi, tieni sempre aperta una pagina del prodotto in un'altra finestra per verificare le modifiche.
4. Ricrea il design del prodotto per bambini
Aggiungi nuova sezione
Sfondo
All'interno del generatore di modelli del corpo, noterai una sezione. Apri quella sezione e cambia il colore di sfondo.
- Colore di sfondo: rosa pallido #f9f2f2
Aggiungi nuova riga
Struttura della colonna
Ora aggiungi una nuova riga con 2 colonne.
Dimensionamento
Quindi, regola le dimensioni della riga.
- Larghezza grondaia personalizzata: 2
- Larghezza: 90%
- Larghezza massima: 90%
Impostazioni colonna 1
Sfondo
Nell'impostazione per la colonna 1, aggiungi il design dell'immagine di sfondo che hai creato con le forme sovrapposte.
- Immagine di sfondo
Spaziatura
Quindi, regolare la spaziatura di conseguenza.
- Imbottitura superiore e inferiore: 5vw
- Imbottitura sinistra e destra
- Tablet: 2vw
- Telefono: 0vw
Impostazioni colonna 2
Spaziatura
Passa alla colonna 2 e regola i valori di spaziatura come segue.
- Imbottitura superiore: 1vw
- Imbottitura inferiore:
- Tablet + Telefono: 1vw
- Imbottitura sinistra e destra:
- Desktop: 2vw
- Tablet e telefono: 7vw
Aggiungi modulo immagine Woo alla colonna 1
Contenuto
Ora è il momento di aggiungere i moduli. Innanzitutto, nella colonna 1, aggiungi un modulo immagine woo e seleziona questo prodotto in contenuto.
- Prodotto: questo prodotto
Elementi
Quindi, seleziona gli elementi che verranno mostrati sul design.
- Immagine in evidenza: Sì
- Galleria: No
- Distintivo di vendita: Sì
Testo del badge di vendita
Nella scheda Design, regola i valori per il badge di vendita come segue.
- Colore distintivo: trasparente
- Carattere: Nunito
- Peso del carattere: grassetto
- Colore del testo: rosa #f24881
- Dimensione del testo:
- Desktop: 5vw
- Tablet: 12vw
- Telefono: 10vw
Dimensionamento
Quindi, regola la spaziatura per adattare meglio le cose.
- Imbottitura superiore:
- Desktop e Tablet: 1vw
- Telefono: 2vw
- Imbottitura inferiore: 0vw
- Imbottitura sinistra e destra: 0vw
Aggiungi modulo titolo Woo alla colonna 2
Contenuto
Nella seconda colonna, aggiungi un modulo titolo woo e seleziona questo prodotto nella scheda contenuto.
- Prodotto: questo prodotto
Sfondo
Dai al modulo uno sfondo bianco.
- Colore di sfondo: bianco #ffffff
Testo del titolo
Quindi, modella il testo del titolo a un livello H1.
- Livello di intestazione: H1
- Carattere: Nunito
- Peso del carattere: Ultra grassetto
- Allineamento del testo: Centro
- Colore del testo: grigio scuro verdastro #314942
- Dimensione del testo:
- Desktop: 2.6vw
- Tablet e telefono: 6.4vw
Spaziatura
Continuare regolando la spaziatura nel modulo.
- Imbottitura superiore e inferiore:
- Desktop: 1.5vw
- Tablet e telefono: 2.5vw
- Imbottitura sinistra e destra: 2vw
Frontiera
Infine, regola il bordo sia per le dimensioni desktop che reattive.
- Angoli arrotondati:
- Desktop: 1vw tutti e quattro gli angoli
- Tablet e telefono: 3vw tutti e quattro gli angoli
Aggiungi il modulo di descrizione di Woo alla colonna 2
Contenuto
Sotto il titolo del prodotto, aggiungi un modulo di descrizione woo. Scegli il tipo di descrizione e questo prodotto nella scheda contenuto.
- Prodotto: questo prodotto
- Tipo di descrizione: Descrizione
Sfondo
Quindi, dai al modulo un colore di sfondo.
- Colore di sfondo: bianco #ffffff
Testo
Passa alla scheda Design e modella il testo.
- Carattere: Nunito
- Colore: grigio scuro verdastro #314942
- Taglia:
- Desktop: 1vw
- Tablet: 2.5vw
- Telefono: 3vw
Spaziatura
Quindi, regolare la spaziatura per il modulo.
- Margine superiore:
- Desktop e tablet: -0.5vw
- Telefono: -3vw
- Imbottitura superiore e inferiore:
- Desktop: 1.5vw
- Tablet e telefono: 4vw
- Imbottitura sinistra e destra:
- Desktop: 2vw
- Tablet e telefono: 6vw
Frontiera
Infine, aggiungi gli angoli arrotondati.
- Angoli arrotondati:
- Desktop: 1vw tutti e quattro gli angoli
- Tablet e telefono: 3vw tutti e quattro gli angoli
Aggiungi il modulo di informazioni aggiuntive di Woo alla colonna 2
Contenuto
Sotto il modulo di descrizione, aggiungi il modulo di informazioni aggiuntive woo. Scegli questo prodotto nella scheda contenuto.
- Prodotto: questo prodotto
Sfondo
Quindi, aggiungi uno sfondo bianco.
- Colore di sfondo: bianco #ffffff
Testo
Nella scheda Design, inizia a definire lo stile dei diversi tipi di testo. Innanzitutto, il testo che si applica ai valori degli attributi.
- Carattere: Nunito
- Stile: corsivo
- Colore: grigio scuro verdastro #314942
- Taglia:
- Desktop: 0.8vw
- Tablet: 1.5vw
- Telefono: 2vw
Testo del titolo
Secondo, dai uno stile al testo del titolo.
- Carattere: Nunito
- Peso: Ultra Bold
- Colore: rosa #f24881
- Taglia:
- Desktop: 1.7vw
- Tablet: 3vw
- Telefono: 3.5vw
- Altezza della linea: 1em
Testo attributo
Terzo, dai uno stile al testo dell'attributo.
- Carattere: Nunito
- Peso: grassetto
- Colore: grigio scuro verdastro #314942
- Taglia:
- Desktop: 0.9vw
- Tablet: 2vw
- Telefono: 3vw
Spaziatura
Quindi, regolare la spaziatura come segue.
- Margine superiore:
- Desktop e tablet: -0.5vw
- Telefono: -3vw
- Imbottitura superiore:
- Desktop: 1.5vw
- Tablet: 3vw
- Telefono: 5vw
- Imbottitura sinistra: 1vw
- Imbottitura destra:
- Desktop: 2vw
- Tablet e telefono: 5vw
Frontiera
Infine, aggiungi gli angoli arrotondati.
- Angoli arrotondati:
- Desktop: 1vw tutti e quattro gli angoli
- Tablet e telefono: 3vw tutti e quattro gli angoli
Aggiungi modulo prezzo Woo alla colonna 2
Contenuto
Aggiungi un modulo prezzo woo e scegli questo prodotto nella scheda contenuto.
- Prodotto: questo prodotto
Sfondo
Inoltre, aggiungi uno sfondo rosa al modulo per farlo risaltare.
- Colore di sfondo: rosa #f24881
Vendita vecchio prezzo testo
Passa alla scheda Design e imposta il vecchio prezzo di vendita.
* Quando aggiungi un nuovo e un vecchio prezzo di vendita a un prodotto, il modulo del prezzo di woo non li mostrerà entrambi nel generatore di temi. Controlla sulla pagina del prodotto reale per vedere come appare il design finale.
- Carattere: Nunito
- Colore: Bianco #ffffff
- Taglia:
- Desktop: 1.5vw
- Tablet: 2.5vw
- Telefono: 3vvw
Testo nuovo prezzo di vendita
Continua con lo styling del nuovo prezzo.
- Carattere: Nunito
- Peso: grassetto
- Colore: Bianco #ffffff
- Taglia:
- Desktop: 2vw
- Tablet: 2vw
- Telefono: 4vw
- Spaziatura lettere: 1px
Spaziatura
Quindi, regolare la spaziatura del modulo.
- Margine superiore:
- Desktop e tablet: -0.5vw
- Telefono: -3vw
- Imbottitura superiore e inferiore:
- Desktop: 1.5vw
- Tablet e telefono:
- Imbottitura sinistra e destra:
- Desktop: 2vw
- Tablet e telefono: 5vw
Frontiera
Infine, aggiungi gli angoli arrotondati.
- Angoli arrotondati:
- Desktop: 1vw tutti e quattro gli angoli
- Tablet e telefono: 3vw tutti e quattro gli angoli
Progetto definitivo
Questo è l'aspetto del design sul prodotto reale rispetto a come appare nel generatore di temi.
Aggiungi Woo Add to Cart Module alla colonna 2
Contenuto
Sotto il modulo del prezzo, posiziona un modulo woo add to cart. Seleziona questo prodotto nella scheda dei contenuti.
* Quando aggiungi un modulo woo add to cart, noterai che nella parte superiore ha un menu a discesa per un'opzione di colore. Se non l'hai specificato nella pagina del prodotto, non verrà visualizzato nel design finale. Puoi assicurarti controllando il prodotto live mentre stai costruendo all'interno del generatore di temi.
- Prodotto: questo prodotto
Elementi
Andando avanti, seleziona gli elementi che verranno visualizzati nel modulo.
- Campo quantità: disattivato
- Stock: spento
Sfondo
Quindi, aggiungi un colore di sfondo bianco.
- Colore di sfondo: bianco #ffffff
Pulsante
Ora è il momento del pulsante di stile. Aggiungi i valori come segue.
- Dimensione del testo:
- Desktop: 2vw
- Tablet: 3vw
- Telefono: 5vw
- Colore del testo: rosa #f24881
- Colore di sfondo: bianco #ffffff
- Spaziatura lettere: 1px
- Carattere: Nunito
- Peso: pesante
- Margine superiore e inferiore: -0.3vw
Spaziatura
Quindi, regolare la spaziatura del modulo.
- Margine superiore:
- Desktop e tablet: -0.5vw
- Tablet: -3vw
- Imbottitura superiore e inferiore: 0vw
- Margine sinistro e destro: 0vw
Frontiera
Infine, aggiungi un bordo arrotondato.
- Angoli arrotondati:
- Desktop: 1vw tutti e quattro gli angoli
- Tablet e telefono: 3vw tutti e quattro gli angoli
Anteprima
Diamo un'ultima occhiata al design finito su schermi di diverse dimensioni. Il modello di progettazione del prodotto per bambini verrà ora applicato a tutti i prodotti nel tuo negozio. Assicurati di tornare a controllare le dimensioni delle immagini per assicurarti che si adattino bene.
Desktop
Mobile
È un involucro sulla pagina del prodotto per bambini!
In questo post, ti abbiamo mostrato come ricreare un design per la pagina di un prodotto per bambini. Questo design con bordi morbidi, uno sfondo divertente e colori allegri renderà tutti i tuoi prodotti invitanti e pronti per l'acquisto. Ci auguriamo che questo design ti piaccia e lo utilizzerai per ispirare le tue creazioni Divi. Lasciaci i tuoi pensieri nei commenti!