Vai al contenuto principale

Come aggiungere una fisarmonica informativa su un prodotto WooCommerce con Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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.

Design della fisarmonica Divi

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 lo 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 stai configurando 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.

Crea un prodotto woocommerce divi 1

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. In Dati prodotto, modifica 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".

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Modello divi a tutta larghezza

7. Quindi, nella scheda Varianti sotto il commutatore dati prodotto, utilizza la voce a discesa per creare variazioni da tutti gli attributi.

Crea varianti woocommerce
Varianti del prodotto Woocommerce

8. Seleziona "Imposta prezzi regolari" dal menu a discesa per impostare il prezzo normale per le tre variabili.

Definisci variazioni di prezzo regolari woocommerce

9. Nella finestra di dialogo, immettere il valore "50" e selezionare OK.

Imposta un valore di prezzo per woocommerce

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.

Rimuovi il modulo woocommerce

Quindi aggiungere un nuovo modulo di fisarmonica per sostituire le schede.

Fisarmonica Woocommerce

Nella finestra a comparsa Impostazioni fisarmonica, fare clic sull'icona dell'ingranaggio sulla prima fisarmonica per aprire le singole impostazioni della fisarmonica.

Accordeon e divi parametri

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.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Usa contenuti dinamici per woocommerce wordpress

Seleziona "Descrizione prodotto" dall'elenco dei contenuti dinamici.

Descrizione del prodotto woocommerce

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
Fisarmoniche dell'icona del carattere di configurazione
  • 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
Configurazione del pannello Woocommerce
  • Carattere corpo: Lato
  • Dimensione del testo del corpo: 16px
  • Altezza del corpo: 1.8em
Configurazione del carattere del corpo della fisarmonica di Woocommerce
  • Colore testo collegamento: #ff9375

Questo mirerà a tutti i collegamenti che hai nel contenuto dinamico per ciascuna fisarmonica, come la valutazione a stelle.

Configurazione del colore del collegamento Woocommerce
  • 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
Configurazione del bordo della fisarmonica divi woocommerce

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.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Informazioni sul prodotto fisarmonica div

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.

Informazioni sul prodotto fisarmonica div

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 della maggior parte degli elementi WooCommerce di un prodotto in Divi viene ereditato dal valore del colore secondario delle impostazioni di personalizzazione del tema. Potrebbe essere più facile aggiornare questo colore secondario una volta che i colori sono stati modificati da 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.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
1 azioni
quota1
Tweet
Enregistrer