Come aggiungere le informazioni del prodotto Slide-In alla pagina del prodotto Divi

Il modo in cui progetti le pagine dei prodotti dice molto sul tuo negozio in generale. Il design della pagina del tuo prodotto è una parte importante dell'esperienza di acquisto, quindi spesso ne vale la pena. Se stai cercando di creare una pagina di prodotto un po' più interattiva, adorerai questo post. In questo tutorial, ti mostreremo come aggiungere informazioni sul prodotto a scorrimento all'interno di un layout di pagina del prodotto splendidamente costruito. Trasformeremo anche questo layout in un modello di pagina del prodotto e potrai scaricare il file JSON gratuitamente!

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 Slide-In

Per mettere le mani sul modello di pagina del prodotto a scorrimento, 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 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.

SCARICA

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. Aggiungi/Apri prodotto WooCommerce

Dettagli del prodotto

Inizia creando un nuovo prodotto o aprendone uno esistente. Per ottenere lo stesso identico risultato nel design, dovrai aggiungere i seguenti dettagli al tuo prodotto:

• Nome
• Descrizione
• Immagine del prodotto con sfondo trasparente
• Prezzo
• Categoria

Abilita Divi Builder e modifica le impostazioni della pagina del prodotto

Abilita Divi Builder e cambia il layout della pagina nell'angolo in alto a destra.

• Layout di pagina: a tutta larghezza

Passa a Visual Builder

Dopo aver modificato il layout della pagina, puoi passare a Visual Builder di Divi facendo clic su "Crea sul front-end".

2. Crea il layout della pagina del prodotto con le informazioni sul prodotto a scorrimento

Rimuovi più righe sulla pagina

All'interno dell'editor della pagina del prodotto, noterai vari elementi rilevanti per il tuo prodotto. Abbiamo solo bisogno degli elementi della seconda riga, quindi vai avanti ed elimina la prima e l'ultima riga all'interno della sezione.

Modifica impostazioni sezione

Colore di sfondo

È ora di iniziare a modificare i diversi elementi per creare il nostro layout di informazioni sul prodotto a scorrimento! Apri le impostazioni della sezione e cambia il colore di sfondo.

• Colore di sfondo: #ffe4a5

Dimensionamento

Aggiungi anche un'altezza minima alle impostazioni di dimensionamento. Questo passaggio consentirà alla sezione di occupare l'intera altezza del tuo browser.

• Altezza minima: 100 vh

Spaziatura

Quindi, vai alle impostazioni di spaziatura e rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Visibilità

Nascondi anche gli overflow della sezione. Ciò contribuirà a garantire che non appaia alcuna barra orizzontale durante le animazioni.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Modifica impostazioni riga

Dimensionamento

Quindi, apri le impostazioni della riga e modifica le impostazioni di dimensionamento su diverse dimensioni dello schermo.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100% (desktop), 90% (tablet e telefono)

Spaziatura

Rimuovi anche l'imbottitura superiore e inferiore predefinita della riga.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Posizione

Quindi, vai alle impostazioni della posizione e assicurati che la riga rimanga nella parte inferiore della sezione modificando le impostazioni di conseguenza:

• Posizione: assoluta (desktop), predefinita (tablet e telefono)
• Posizione: in basso al centro

Modifica le impostazioni della colonna 2

Colore di sfondo

Successivamente, apporteremo alcune modifiche alla seconda colonna. Usa un colore di sfondo bianco.

• Colore di sfondo: #FFFFFF

Spaziatura

Quindi, aggiungi alcuni valori di riempimento personalizzati alle impostazioni di spaziatura.

• Imbottitura superiore: 10vw
• Imbottitura inferiore: 10vw
• Imbottitura sinistra: 8vw
• Imbottitura destra: 8vw

Filtro predefinito

Passa alle impostazioni dei filtri della colonna e assicurati che i filtri luminosità, inversione e seppia mantengano il loro valore predefinito in uno stato normale.

• Luminosità: 100%
• Inverti: 0%
• Seppia: 0%

Filtro al passaggio del mouse

Al passaggio del mouse, tuttavia, modificheremo i valori di conseguenza:

• Luminosità: 49%
• Inverti: 100%
• Seppia: 100%

Posizione

Ci stiamo anche assicurando che la colonna sia posizionata nell'angolo in basso a destra del contenitore di righe applicando le seguenti impostazioni di posizione:

• Posizione: assoluta (desktop), predefinita (tablet e telefono)
• Posizione: in basso a destra

Modifica modulo titolo Woo nella colonna 2

Impostazioni del testo del titolo

È ora di iniziare a personalizzare i diversi moduli nella colonna 2! Apri il modulo titolo Woo e modifica le impostazioni del testo H1 come segue:

• Carattere del titolo: Display Playfair
• Colore del testo del titolo: #000000
• Dimensione del testo del titolo: 3vw (desktop), 5vw (tablet), 7vw (telefono)

Modifica modulo prezzo Woo nella colonna 2

Impostazioni testo prezzo

Successivamente apri le impostazioni del modulo prezzi Woo e modifica le impostazioni del testo del prezzo.

• Carattere prezzo: Poppins
• Colore testo prezzo: #e5bc87
• Dimensioni testo prezzo: 1.4vw (desktop), 3vw (tablet), 4vw (telefono)

Spaziatura

Aggiungi anche un margine superiore e inferiore personalizzato su diverse dimensioni dello schermo.

• Margine superiore: 2vw (desktop), 4vw (tablet e telefono)
• Margine inferiore: 3vw (desktop), 5vw (tablet e telefono)

Modifica modulo descrizione Woo nella colonna 2

Impostazioni testo

Al modulo di descrizione di Woo. Modifica le impostazioni del testo del modulo di conseguenza:

• Carattere del testo: Poppins
• Peso del carattere del testo: leggero
• Dimensione del testo: 0.8vw (desktop), 1.8vw (tablet), 2.7vw (telefono)
• Altezza riga di testo: 2.1em

Spaziatura

Aggiungi anche un margine inferiore reattivo.

• Margine inferiore: 3vw (desktop), 5vw (tablet e telefono)

Modifica Woo Aggiungi al modulo del carrello nella colonna 2

Impostazioni dei campi

Successivamente abbiamo il modulo Woo Add to Cart. Modifica le impostazioni dei campi del modulo.

• Colore di sfondo dei campi: rgba (255,255,255,0)
• Colore testo campi: #000000
• Carattere dei campi: Poppins
• Dimensioni del testo dei campi: 0.9vw (desktop), 2vw (tablet), 3vw (telefono)

• Tutti gli angoli: 0px
• Larghezza bordo inferiore dei campi: 1px
• Colore bordo inferiore dei campi: #e5bc87

Impostazioni dei pulsanti

Passa alle impostazioni del pulsante e modella il pulsante di conseguenza:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 0.9vw (desktop), 2vw (tablet), 3vw (telefono)
• Colore del testo del pulsante: #ffffff
• Colore sfumatura 1: #e5bd89
• Colore sfumatura 2: #e5bc87
• Tipo di gradiente: lineare
• Direzione del gradiente: 153 gradi
• Larghezza bordo pulsante: 0px

• Raggio del bordo del pulsante: 1px
• Carattere pulsante: Poppins

• Imbottitura superiore: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
• Imbottitura inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Imbottitura sinistra: 3vw (Desktop), 6vw (Tablet), 9vw (Telefono)
• Imbottitura destra: 3vw (Desktop), 6vw (Tablet), 9vw (Telefono)

Spaziatura

Completa le impostazioni del modulo aggiungendo un margine del pulsante su diverse dimensioni dello schermo.

• Margine inferiore: 2vw (Destkop), 4vw (tablet e telefono)

Modifica modulo Woo Meta nella colonna 2

Impostazioni testo

Continua aprendo il modulo Woo Meta e modifica le impostazioni del testo.

• Meta font: Poppins
• Peso del carattere meta: leggero
• Dimensioni del meta testo: 0.8vw (desktop), 1.8vw (tablet), 3vw (telefono)

Link alle impostazioni del testo

Cambia anche il colore del testo del collegamento.

• Colore del testo del collegamento: #e5bc87

Aggiungi modulo codice alla colonna 2

Per cambiare il colore di sfondo dello zoom del modulo immagine Woo, avremo bisogno di un po' di codice CSS che inseriremo in un nuovo modulo codice nella colonna 2.

Aggiungi codice CSS per cambiare il colore di sfondo dello zoom dell'immagine Woo

Aggiungi le seguenti righe di codice CSS al Modulo di codice:

<style>
.zoomImg {
background-color: #FFE4A5 !important;
}
</style>

3. Aggiungi impostazioni di animazione sincronizzata ai contenitori

Modulo immagine Woo

Ora che abbiamo stilizzato i diversi elementi sulla nostra pagina del prodotto, è il momento di realizzare l'effetto delle informazioni sul prodotto a scorrimento! Per fare ciò, utilizzeremo le impostazioni di animazione integrate di Divi. Apri il modulo Woo Image nella colonna 1 e applica la seguente animazione:

• Stile di animazione: diapositiva
• Direzione dell'animazione: su
• Opacità iniziale dell'animazione: 50%
• Curva di velocità dell'animazione: facilità

Colonna 1

Apri quindi le impostazioni della colonna 1 e utilizza le seguenti impostazioni di animazione:

• Stile di animazione: diapositiva
• Direzione animazione: sinistra (desktop), su (tablet e telefono)
• Ritardo animazione: 950 ms (desktop), 0vw (tablet e telefono)
• Intensità animazione: 25%
• Opacità iniziale dell'animazione: 100%
• Curva di velocità dell'animazione: facilità di entrata e uscita

Colonna 2

Infine, applica le seguenti impostazioni di animazione alla colonna 2:

• Stile di animazione: diapositiva
• Direzione animazione: sinistra (desktop), su (tablet e telefono)
• Durata dell'animazione: 1200 ms
• Ritardo animazione: 800 ms (desktop), 0 ms (tablet e telefono)
• Opacità iniziale dell'animazione: 100%
• Curva di velocità dell'animazione: facilità di entrata e uscita

4. Trasforma il layout della pagina del prodotto in un modello

Salva layout nella libreria Divi

Una volta completato il design dell'intera pagina del prodotto, puoi salvarlo nella tua libreria Divi. Useremo questo layout di pagina del prodotto salvato per creare un nuovo modello di pagina del prodotto.

Vai a Divi Theme Builder e aggiungi un nuovo modello

Vai al Divi Theme Builder e aggiungi un nuovo modello.

Usa il modello su tutti i prodotti

Utilizza il nuovo modello su tutti i prodotti.

• Utilizzare su: tutti i prodotti

Carica il layout nel corpo del modello della pagina del prodotto

Quindi, fai clic su "Aggiungi corpo personalizzato" e fai clic su "Aggiungi da libreria".

Vai a "I tuoi layout salvati" e seleziona il layout della pagina del prodotto che hai caricato nella tua libreria Divi.

5. Salva le modifiche del generatore di temi e visualizza il risultato

Una volta caricato il layout nel nuovo modello di pagina del prodotto, l'unica cosa che resta da fare è salvare tutte le modifiche del Theme Builder e visualizzare il risultato sul tuo sito web!

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 ravvivare le pagine dei tuoi prodotti mostrandoti come progettare un layout di informazioni sui prodotti a scorrimento. Questo è un ottimo modo per aggiungere ulteriori interazioni alle pagine dei tuoi prodotti. 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.