Come inquadrare un prodotto nell'immagine di sfondo con le opzioni delle colonne di Divi
Pubblicato: 2020-01-26Con i moduli WooCommerce di Divi là fuori, ci sono tonnellate di design che puoi realizzare usando Divi. Nel tutorial Divi di oggi, cercheremo di ispirarti con un'altra idea di design che puoi realizzare utilizzando solo le opzioni integrate di Divi. Più specificamente, ti mostreremo come inquadrare un prodotto nell'immagine di sfondo. Il risultato dipende interamente dalla tua immagine di sfondo, ma se segui questo tutorial, saprai quali passaggi adottare per personalizzare la tecnica per il tuo sito web! Potrai anche scaricare gratuitamente il file JSON del tutorial!
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 The Frame
Per mettere le mani sul layout del prodotto frame 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. Imposta la sezione con un'immagine di sfondo reattiva
Aggiungi nuova sezione
Immagine di sfondo reattiva
Il primo passo per inquadrare un prodotto nell'immagine di sfondo è aggiungere una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e carica immagini di sfondo reattive. Puoi trovare entrambe le immagini che abbiamo usato nella cartella che hai potuto scaricare all'inizio di questo post.
- Immagine di sfondo: Paesaggio
- Dimensione immagine di sfondo: adatta
- Posizione immagine di sfondo: in alto al centro
- Immagine di sfondo: quadrato
Spaziatura
Passa alla scheda Design e aggiungi un'imbottitura superiore e inferiore personalizzata su diverse dimensioni dello schermo.
- Imbottitura superiore: 3vw (desktop), 0vw (tablet e telefono)
- Imbottitura inferiore: 3vw (desktop), 7vw (tablet), 18vw (telefono)
Frontiera
Completa le impostazioni della sezione aggiungendo un bordo.
- Larghezza bordo: 2vw
- Colore bordo: #ffffff
2. Aggiungi diversi elementi del telaio alla colonna
Aggiungi nuova riga
Struttura della colonna
Ora, come puoi notare nell'immagine di sfondo, il prodotto si trova sul lato destro dell'immagine di sfondo. Sceglieremo una struttura di colonne corrispondente per una nuova riga nella nostra sezione. In questo caso, questa è la seguente struttura a colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento di conseguenza:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza: 100%
- Larghezza massima: 100%
Spaziatura
Completa le impostazioni della riga aggiungendo del padding sinistro e destro personalizzato.
- Imbottitura sinistra: 5vw
- Imbottitura destra: 5vw
Aggiungi modulo di testo alla colonna 2
Lascia la casella del contenuto vuota
È ora di iniziare ad aggiungere moduli! Per consentire la visualizzazione del prodotto, utilizzeremo un modulo di testo vuoto.
Spaziatura
Successivamente aumenteremo l'altezza del modulo nelle impostazioni di spaziatura.
- Imbottitura superiore: 22vw (desktop), 39vw (tablet), 35vw (telefono)
- Imbottitura inferiore: 15vw (desktop), 39vw (tablet), 35vw (telefono)
Frontiera
E aggiungeremo anche un bordo.
- Larghezza bordo: 3vw
- Larghezza bordo inferiore: 1vw
- Colore del bordo: rgba (255,255,255,0.7)
Aggiungi modulo titolo Woo alla colonna 2
Contenuto dinamico
Al modulo successivo, che è un modulo titolo Woo. Seleziona un prodotto a tua scelta.
- Prodotto: Trova nell'elenco
Colore di sfondo
Usa il seguente colore di sfondo:
- Colore di sfondo: rgba (255,255,255,0.7)
Impostazioni del testo del titolo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H3 di conseguenza:
- Livello titolo titolo: H3
- Carattere del titolo: Work Sans
- Dimensione del testo del titolo: 2.5vw (desktop), 5vw (tablet), 6vw (telefono)
Spaziatura
Aggiungi anche alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 1vw
- Imbottitura inferiore: 1vw
- Imbottitura sinistra: 3vw
- Imbottitura destra: 3vw
Aggiungi il modulo di descrizione di Woo alla colonna 2
Contenuto dinamico
Il prossimo modulo di cui abbiamo bisogno è un modulo di descrizione di Woo. Seleziona un prodotto a tua scelta.
- Prodotto: Trova nell'elenco
- Tipo di descrizione: breve descrizione
Colore di sfondo
Cambia di conseguenza il colore di sfondo del modulo:
- Colore di sfondo: rgba (255,255,255,0.7)
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:
- Carattere del testo: Open Sans
- Dimensione del testo: 0.9vw (desktop), 2.2vw (tablet), 2.8vw (telefono)
- Altezza della riga del titolo: 2.2em
Spaziatura
Completa le impostazioni del modulo aggiungendo alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 1vw
- Imbottitura inferiore: 1vw
- Imbottitura sinistra: 3vw
- Imbottitura destra: 3vw
Aggiungi il modulo di testo Woo Price alla colonna 2
Contenuto dinamico
Successivamente, abbiamo il modulo di testo Woo Price. Seleziona un prodotto a tua scelta.
- Prodotto: Trova nell'elenco
Colore di sfondo
Modifica il colore di sfondo.
- Colore di sfondo: rgba (255,255,255,0.7)
Impostazioni testo prezzo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo del prezzo di conseguenza:
- Carattere prezzo: Work Sans
- Colore testo prezzo: #000000
- Dimensioni testo prezzo: 2vw (desktop), 4vw (tablet), 5vw (telefono)
Spaziatura
Completa le impostazioni del modulo aggiungendo alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 2vw
- Imbottitura inferiore: 2vw
- Imbottitura sinistra: 3vw
- Imbottitura destra: 3vw
Aggiungi Woo Add To Cart Module alla colonna 2
Contenuto dinamico
Al prossimo e ultimo modulo, che è il modulo Woo Add To Cart! Seleziona un prodotto a tua scelta.
- Prodotto: Trova nell'elenco
Colore di sfondo
Cambia il colore di sfondo.
- Colore di sfondo: rgba (255,255,255,0.7)
Impostazioni dei campi
Modifica anche le impostazioni dei campi del modulo.
- Colore di sfondo dei campi: #ffffff
- Colore testo campi: #000000
- Carattere dei campi: Open Sans
- Larghezza bordo inferiore dei campi: 1px
- Colore bordo inferiore dei campi: #000000
Impostazioni dei pulsanti
Continua con lo stile del pulsante come segue:
- Usa stili personalizzati per pulsante: Sì
- Dimensione del testo del pulsante: 1.1vw (desktop), 2.5vw (tablet), 3.5vw (telefono)
- Colore del testo del pulsante: #ffffff
- Colore di sfondo del pulsante: #000000
- Larghezza bordo pulsante: 0px
- Raggio del bordo del pulsante: 10vw
- Carattere pulsante: Open Sans
- Imbottitura superiore: 1vw (Desktop), 2vw (Tablet), 4vw (Telefono)
- Imbottitura inferiore: 1vw (desktop), 2vw (tablet), 4vw (telefono)
- Imbottitura sinistra: 4vw (desktop), 6vw (tablet), 10vw (telefono)
- Imbottitura destra: 4vw (desktop), 6vw (tablet), 10vw (telefono)
Spaziatura
E completa le impostazioni del modulo aggiungendo alcuni margini personalizzati e valori di riempimento.
- Margine inferiore: 2vw
- Imbottitura superiore: 3vw
- Imbottitura inferiore: 3vw
- Imbottitura sinistra: 3vw
- Imbottitura destra: 3vw
3. Stile, ridimensiona e riposiziona colonna
Modifica le impostazioni della colonna 2
Sfondo sfumato
Ora, l'ultima parte di questo tutorial ci permette di unire i diversi moduli. Apri le impostazioni della colonna 2 e usa il seguente sfondo sfumato per questo:
- Colore 1: RGB (43,135,218,0)
- Colore 2: #ffffff
- Tipo di gradiente: lineare
- Posizione di partenza: 39%
Frontiera
Aggiungi anche degli angoli arrotondati.
- Tutti gli angoli: 1vw
Scatola ombra
Stiamo creando una certa profondità aggiungendo anche una sottile ombra a scatola.
- Forza sfocatura dell'ombra della scatola: 100 px
- Colore ombra: rgba(0,0,0,0.24)
Trasforma Traduci
E completeremo le impostazioni della colonna modificando i valori di traduzione della trasformazione su diverse dimensioni dello schermo. Questo passaggio ci consente di riposizionare la colonna come desideriamo. Quando usi la tua immagine di sfondo, ti piacerà sicuramente questa opzione!
- Destra: 0px (desktop), 9vw (tablet e telefono)
- In basso: -5vw (desktop), 0vw (tablet e telefono)
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 inquadrare un prodotto nell'immagine di sfondo utilizzando le opzioni integrate di Divi e i moduli WooCommerce inclusi in Divi Builder. L'approccio adottato dipende dall'immagine di sfondo che stai utilizzando, ma seguire questo tutorial ti aiuterà a capire l'approccio generale. Sei stato anche in grado di scaricare gratuitamente il file JSON del layout! 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.