Quando si crea una pagina di prodotto in Divi, possiamo utilizzare il modulo a fisarmonica per visualizzare le informazioni sul prodotto utilizzando contenuti dinamici. Questo ti darà un design unico per le pagine dei prodotti, preservando lo spazio prezioso sulla pagina.
In questo tutorial, ti mostreremo come utilizzare la funzione di contenuto dinamico di Divi per creare una fisarmonica con informazioni sul prodotto, nonché come progettare la fisarmonica (e il suo contenuto) utilizzando Divi Visual Builder.
Cominciamo.
Panoramica
Ecco un'anteprima del design che costruiremo in questo tutorial.
Tieni presente che devi disporre di una configurazione del prodotto come descritto in questo tutorial per ottenere gli stessi risultati.
Commencer
Per iniziare, dovrai fare quanto segue:
- Se non l'hai già fatto, installa e attiva il Tema Divi installato (o il plug-in Divi Builder se non stai utilizzando il Tema Divi).
- Installa e attiva il plugin WooCommerce. Se configuri WooCommerce per la prima volta, dovrai eseguire la procedura guidata di configurazione di base per preparare il tuo negozio. Una volta terminato, sei pronto per aggiungere i tuoi nuovi prodotti.
- Crea un nuovo prodotto come mostrato di seguito.
Impostazione del prodotto di esempio
Per configurare il prodotto di esempio per questo tutorial, vai a Prodotti> Aggiungi nuovo. Assegna al prodotto il titolo "Massaggio (sessione singola)" e fai clic per utilizzare Divi Builder.
Quindi aggiornare le seguenti impostazioni della pagina del prodotto e le informazioni sul prodotto:
1. In Divi Page Settings, seleziona il layout No Sidebar.
2. Aggiungi / seleziona una categoria di prodotti
3. Aggiungi l'immagine del prodotto
4. Aggiungi il contenuto della descrizione.
5. sotto Dati del prodotto, modificare il tipo di prodotto in Prodotto variabile.
6. Aggiungi un attributo denominato "Tipo" con i seguenti valori: Svedese | Pietra calda | Aromaterapia | Tessuto profondo. Assicurati di selezionare "Usato per variazioni".
7. Quindi nella scheda Variazioni sotto l'interruttore di dati del prodotto, utilizza la voce del menu a discesa per creare variazioni da tutti gli attributi.
8. Seleziona "Imposta prezzi regolari" dal menu a discesa per impostare il prezzo normale per le tre variabili.
9. Nella finestra di dialogo, immettere il valore "50" e selezionare OK.
10. un Al termine, salvare o pubblicare il prodotto.
Ora sei pronto per iniziare a progettare il layout con una fisarmonica personalizzata.
Creazione della fisarmonica Product Info con contenuto dinamico in Divi
Il layout del prodotto predefinito mostra le informazioni sul prodotto utilizzando vari moduli Woo. Per questo esempio, si desidera utilizzare la fisarmonica per visualizzare tre informazioni principali sul prodotto: descrizione del prodotto, informazioni aggiuntive sul prodotto e recensioni del prodotto. Questi tre contenuti sono attualmente visualizzati nel modulo delle schede woo. Tutto quello che dobbiamo fare è rimuovere il modulo woo tabs e sostituirlo con un modulo a fisarmonica con le stesse informazioni introdotte tramite contenuto dinamico.
Ecco come farlo.
Innanzitutto, fai clic per utilizzare Divi sul sistema front-end per distribuire il generatore di immagini. Quindi rimuovere il modulo Woo Tabs.
Quindi aggiungere un nuovo modulo di fisarmonica per sostituire le schede.
Nella finestra a comparsa Impostazioni fisarmonica, fare clic sull'icona dell'ingranaggio sulla prima fisarmonica per aprire le singole impostazioni della fisarmonica.
Immettere il titolo "Informazioni sul prodotto".
Quindi passa con il mouse sulla casella di immissione del contenuto del corpo e fai clic sull'icona del contenuto dinamico.
Seleziona "Descrizione prodotto" dall'elenco dei contenuti dinamici.
Questo mostrerà la lunga descrizione del prodotto che abbiamo definito per il prodotto nel backend.
Una volta installato il primo contenuto di fisarmonica, apri le impostazioni della seconda fisarmonica e aggiorna quanto segue:
- Titolo: Specifiche
Quindi aggiungi il contenuto dinamico "Ulteriori informazioni sul prodotto" al corpo.
Quando il secondo contenuto di fisarmonica è pronto, aggiungi un nuovo elemento di fisarmonica e aggiorna le impostazioni della fisarmonica come segue:
- Titolo: Ulteriori informazioni
Quindi aggiungi il contenuto dinamico "Recensioni prodotto" al corpo per incorporare l'elemento / contenuto della recensione del prodotto.
NOTA: assicurati di aver aggiunto almeno una recensione del prodotto per vedere il contenuto sulla pagina live.
Progettazione del prodotto e accordo sui contenuti con Divi
Ora che la nostra fisarmonica con le informazioni sul prodotto ha il contenuto dinamico per visualizzare le informazioni sul prodotto, siamo pronti per personalizzarla utilizzando le impostazioni del modulo della fisarmonica integrato.
Aprire le impostazioni del modulo della fisarmonica e aggiornare quanto segue:
- Colore icona: # ff9375
- Usa dimensione carattere icona: SÌ
- Dimensione carattere icona: 26px
- Cambia colore di sfondo: #ffffff
- Apri il titolo del testo Colore: #ff9375
- Titolo del testo: #222222
- Carattere del titolo: Lato
- Carattere del titolo: grassetto
- Stile del carattere del titolo: TT
- Dimensioni del titolo del testo: 20px
- Spazio delle lettere del titolo: 0.2em
- Altezza della riga del titolo: 2em
- Carattere corpo: Lato
- Dimensione del testo del corpo: 16px
- Altezza del corpo: 1.8em
- Colore testo collegamento: #ff9375
Questo mirerà a tutti i collegamenti che hai nel contenuto dinamico per ciascuna fisarmonica, come la valutazione a stelle.
- Colore del testo dell'elenco non ordinato: # ff9375
- Tipo di stile elenco non ordinato: Cerchio
- Rientro elemento elenco non ordinato: 5%
- Larghezza del bordo: 0px
- Larghezza del bordo superiore: 1px
- Colore del bordo superiore: #222222
E per l'ultimo passaggio, aggiungiamo un piccolo estratto css per estrarre il margine predefinito tra le scale della fisarmonica.
Nella scheda Avanzate, aggiungi il seguente CSS all'elemento Toggle:
margin-bottom: 0px;
Vediamo ora il design finale della fisarmonica informativa sul prodotto.
Adeguamenti finali al layout
È possibile apportare alcune modifiche al layout per adattarlo al design della fisarmonica. Ad esempio, possiamo regolare il carattere di ciascuno dei moduli su Lato, aggiungere un bordo personalizzato e un raggio del bordo attorno all'elenco a discesa delle variabili e aggiornare il pulsante Aggiungi al carrello con un colore di sfondo a tinta unita che gli si addice.
Una volta fatto, ecco il risultato finale.
Ho incluso questo disegno come download gratuito sopra. Non esitate a verificarlo di persona. Notare che è necessario disporre della configurazione del prodotto descritta in questo tutorial per ottenere gli stessi risultati.
NOTA: il colore predefinito per la maggior parte degli articoli WooCommerce di un prodotto in Divi viene ereditato dal valore del colore secondario delle impostazioni di personalizzazione del tema. Potrebbe essere più semplice aggiornare questo colore secondario una volta che il modulo colori di woo.
Considerazioni finali
Come abbiamo appreso, i moduli Woo non sono le uniche cose che possono essere utilizzate per estrarre informazioni dinamiche sui prodotti. La fisarmonica delle informazioni sul prodotto è un ottimo esempio di come è possibile utilizzare qualsiasi modulo Divi per visualizzare le informazioni sul prodotto in modo univoco e conciso. Sentiti libero di esplorare nuovi ed entusiasmanti progetti di fisarmoniche per le pagine dei tuoi prodotti. E, naturalmente, puoi utilizzare più moduli rocker invece di una fisarmonica per ottenere risultati simili.
