Come aggiungere immagini adesive del prodotto al modello di pagina del prodotto Divi

Quando si tratta di acquistare prodotti online, le immagini dei prodotti eccezionali sono essenziali per concludere la vendita. Ecco perché la maggior parte delle pagine dei prodotti ha quelle immagini del prodotto nella parte superiore della pagina, quindi è la prima cosa che vedono gli acquirenti. Tuttavia, quando l'utente scorre la pagina verso il basso per visualizzare ulteriori informazioni sul prodotto (descrizioni, recensioni, ecc.), l'immagine principale del prodotto non è più visibile. Un modo per mantenere visibili le immagini del prodotto è aggiungere un'immagine del prodotto adesiva che rimanga visibile mentre un potenziale acquirente sfoglia le informazioni sul prodotto.

In questo tutorial, ti mostreremo come aggiungere immagini di prodotti adesivi al modello di pagina del prodotto Divi. Per fare ciò, possiamo ottimizzare il modulo dell'immagine del prodotto WooCommerce di Divi per mostrare e rimanere nella parte superiore della pagina proprio mentre l'immagine del prodotto originale scorre fuori dalla vista.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, 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!

https://youtu.be/vwfPFqyVaNM

Iscriviti al nostro canale Youtube

Come caricare il modello

Vai a Divi Theme Builder

Per caricare il modello, vai al Divi Theme Builder nel backend del tuo sito Web WordPress.

Carica modello di sito web

Quindi, nell'angolo in alto a destra, vedrai un'icona con due frecce. Fare clic sull'icona.

Passa alla scheda di importazione, carica il file JSON che sei stato in grado di scaricare in questo post e fai clic su "Importa modelli Divi Theme Builder".

Salva le modifiche al generatore di temi Divi

Una volta caricato il file, noterai un nuovo modello con una nuova area del corpo che è stata assegnata a Tutti i post. Salva le modifiche di Divi Theme Builder non appena desideri che il modello venga attivato.

Passiamo al tutorial così possiamo imparare a costruire questa cosa da zero, vero?

Come aggiungere immagini adesive del prodotto al modello di pagina del prodotto Divi

Caricamento del modello di pagina del prodotto Theme Builder Pack 5

Per iniziare, faremo un salto di qualità sul design aggiungendo uno dei nostri modelli di pagina prodotto predefiniti. Per importare il modello in Theme Builder, dovrai fare quanto segue:

1. Passa a Divi Theme Builder
2. Fare clic sull'icona della portabilità in alto a destra della pagina.
3. Seleziona la scheda Importa nel popup Portabilità.
4. Scarica e importa il file modello di prodotto Divi Divi Theme Builder 5. Una volta scaricato il pacchetto qui, decomprimi il file e troverai il file "divi-theme-builder-pack-5-product-page-template.json" che dovrai importare.
5. Fare clic sul pulsante Importa
6. Una volta che il modello è stato importato, fare clic sull'icona di modifica nell'area del corpo personalizzata del modello per modificare il layout del modello.

Aggiungi una nuova riga

Vogliamo che l'immagine del prodotto venga visualizzata una volta che l'utente ha passato la sezione superiore che include già l'immagine del prodotto (non è necessario mostrarla lì). Pertanto, lo aggiungeremo a una nuova sezione sotto la sezione superiore del layout.

Vai avanti e aggiungi una nuova sezione normale sotto la sezione superiore.

Apri le impostazioni della nuova sezione e aggiorna il padding:

• Imbottitura: 0px in alto, 0px in basso

Vai alla scheda avanzata e aggiorna l'indice z:

• Indice Z: 13

In questo modo l'immagine (l'elemento figlio di questa sezione) rimarrà sopra le altre sezioni/elementi della pagina durante lo scorrimento.

Aggiungi la riga

Quindi, aggiungi una riga a una colonna nella sezione.

Apri le impostazioni della riga e regola l'allineamento e il riempimento delle righe:

• Allineamento riga: a destra
• Imbottitura: 0px in alto, 0px in basso

Aggiungi immagine prodotto

Ora siamo pronti per aggiungere l'immagine del prodotto che alla fine si attaccherà alla parte superiore della pagina durante lo scorrimento. Per aggiungere l'immagine del prodotto, copia il modulo immagine del prodotto esistente nella sezione superiore e incollalo nella nostra nuova riga.

Impostazioni immagini Woo

Apri le impostazioni per il nuovo modulo immagini woo e regola il contenuto come segue:

• Mostra immagini della galleria: OFF
• Mostra badge vendita: OFF

(NOTA: se lo desideri, puoi conservare le immagini della galleria. Fai solo attenzione a non occupare troppo spazio poiché questo modulo immagine passerà con il mouse sopra altri elementi della pagina.)

Nella scheda Progettazione, aggiorna l'opzione Forza larghezza intera su "S".

Quindi aggiorna quanto segue:

• Larghezza massima: 300 px (desktop), 200 px (telefono)
• Allineamento del modulo: a destra

Il regolare l'imbottitura:

• Imbottitura: 10px in alto, 10px a destra

Nella scheda Avanzate, aggiorna quanto segue:

• Indice Z: 1
• Posizione appiccicosa: bastone in alto

Ciò farà sì che l'immagine si attacchi alla parte superiore della pagina una volta che l'utente scorre oltre quell'immagine.

Una volta che la posizione adesiva è a posto, torna alla scheda Progettazione e usa l'opzione adesiva per aggiornare il filtro di opacità in modo che nasconda l'immagine finché non diventa appiccicosa. Puoi distribuire l'opzione di stile permanente passando con il mouse sull'impostazione e facendo clic sull'icona della miniatura.

• Opacità: 0% (desktop), 100% (appiccicoso)

Rimuovi la spaziatura di sezione, riga e colonna

In questo momento, abbiamo una spaziatura indesiderata che la nuova immagine del prodotto sta utilizzando all'interno del flusso del nostro layout. Per rimuovere quella spaziatura, tutto ciò che dobbiamo fare è dare alla colonna un valore di altezza personalizzato che sia "0" o qualcosa di veramente basso. L'immagine del prodotto continuerà a essere visualizzata/overflow anche se ha una colonna senza altezza effettiva.

Apri le impostazioni della colonna e aggiungi il seguente CSS personalizzato all'elemento principale:

height: 15px;

Questo è tutto! Abbiamo finito.

Risultato finale

Controlla il risultato finale guardando un post dal vivo sul tuo sito.

Pensieri finali

L'aggiunta di un'immagine di prodotto adesiva al modello della pagina del prodotto in Divi è un modo semplice e veloce per mantenere i tuoi prodotti in vista mentre i visitatori esplorano il tuo prodotto. Inoltre, puoi anche scegliere di incollare il pulsante Aggiungi al carrello accanto ad esso utilizzando la stessa tecnica. Comunque, si spera, questo ti aiuterà con il tuo prossimo progetto.

Non vedo l'ora di sentirti nei commenti.

Saluti!