Divi è stato progettato per essere compatibile con WooCommerce. Per integrare WooCommerce, è necessario installare la versione più recente di WooCommerce.

WooCommerce è il plugin e-commerce che consigliamo, poiché ha il set di funzionalità, interfaccia e segue le migliori pratiche di codifica. Dopo aver attivato il plug-in, vedrai due nuove sezioni "WooCommerce" e "Prodotti" aggiunte alla dashboard di WordPress. Puoi utilizzare queste aree per modificare le impostazioni del tuo e-commerce e pubblicare nuovi prodotti. Puoi trovare il documentazione completare su WooCommerce qui .

Tieni presente che anche se il builder include vari moduli WooCommerce, puoi anche usare WooCommerce da solo senza il builder. Puoi creare pagine standard per Checkout, Carrello, ecc. Come mostrato nella loro documentazione. Puoi anche collegarti direttamente alle tue categorie di woocommerce o utilizzare il Shortcode WooCommerce in un modulo di testo Divi. Ti dà la libertà di fare qualsiasi cosa.

Come aggiungere un modulo negozio alla tua pagina

Prima di poter aggiungere un modulo negozio alla tua pagina, devi prima passare a Divi Builder. Una volta che il Tema Divi installato sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editor dei post ogni volta che crei una nuova pagina. Fare clic su questo pulsante per attivare Divi Builder e accedere a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visuale. Puoi anche fare clic sul pulsante Usa Visual Builder quando navighi sul tuo sito Web in primo piano se sei connesso alla dashboard di WordPress.

Una volta entrato in Visual Builder, puoi fare clic sul pulsante più grigio per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli possono essere aggiunti solo all'interno delle righe. Se stai iniziando una nuova pagina, ricordati di aggiungere prima una riga alla tua pagina. Abbiamo ottimi tutorial sull'utilizzo degli elementi di linea e di sezione di Divi.

Individua il modulo negozio nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco dei moduli è ricercabile, il che significa che puoi anche digitare la parola "negozio" e quindi fare clic su Invio per cercare e aggiungere automaticamente il modulo negozio! Una volta aggiunto il modulo, sarai accolto dall'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .

Esempio di caso d'uso: mostrare i prodotti più recenti su una home page utilizzando il modulo Negozio

Per questo esempio, userò il modulo negozio per visualizzare i prodotti più recenti su una home page.

Ecco la pagina con i quattro prodotti presentati.

Cominciamo.

Usa il visual builder per aggiungere una sezione regolare con una riga a larghezza intera (1 colonna). Modificare il parametro della riga per renderlo a larghezza intera con una larghezza di rilegatura personalizzata di 2.

Quindi aggiungi un modulo negozio alla linea.

Aggiorna le impostazioni del modulo come segue:

Opzioni di contenuto

Tipo: prodotti recenti
Numero di prodotti: 4

Opzioni di design

Icona Hover Colore: # ea1d63
Titolo Police: Open Without
Dimensione carattere titolo: 24px
Premio della polizia: aperto senza
Dimensione carattere prezzo: 20px

Opzioni avanzate (CSS personalizzato)

Titolo:

allineamento del testo: centro;
sfondo: #fff;
margin-top: -10px! significativa;

Prix:

allineamento del testo: centro;
sfondo: #fff;
tappezzeria-down: 15px;

È tutto! Questo è il risultato finale.

Acquista opzioni di contenuto

Nella scheda dei contenuti troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla cosa appare nel tuo modulo si troverà sempre in questa scheda.

Tipologia

Scegli il tipo di prodotti che desideri visualizzare nel feed dei prodotti. Puoi scegliere tra Prodotti recenti che mostreranno tutti i tuoi prodotti in ordine cronologico, Prodotti in vetrina, Prodotti in saldo, Prodotti più venduti o Prodotti più votati.

Numero di prodotti

Definisci il numero di prodotti che desideri visualizzare. Avrai bisogno di prodotti realizzati per far apparire qualsiasi cosa in questo modulo.

Includi categorie

Scegli le categorie che desideri includere.

Numero di colonne

Scegli il numero di colonne da visualizzare nel modulo del tuo negozio. 4 colonne devono essere utilizzate per una riga di 1 colonna. 3 colonne devono essere utilizzate per una colonna che occupa 3/4 dello spazio della riga. La colonna 2 dovrebbe essere utilizzata per una colonna che occupa metà dello spazio della luce. Una colonna dovrebbe essere utilizzata per una colonna 1/2 di spazio di riga.

Riorganizzare di

Scegli come desideri ordinare i tuoi prodotti. Scegli di ordinare per impostazione predefinita Ordina, Popolarità, Valutazione, Data, Prezzo dal più basso al più alto, Prezzo dal più alto al più basso, dal più vecchio al più recente, dal più recente al più vecchio.

Etichetta amministrativa

Questo cambierà l'etichetta del modulo nel costruttore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette vengono visualizzate nel blocco del modulo dell'interfaccia di Divi Builder.

Opzioni di progettazione dell'officina

Nella scheda Design, troverai tutte le opzioni di stile del modulo, come caratteri, colori, dimensioni e spaziatura. Questa è la scheda che utilizzerai per modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare qualsiasi cosa.

Icona di sovrapposizione

Quando passi il mouse su un articolo nel modulo Negozio, viene visualizzata un'icona in sovrimpressione. È possibile regolare il colore utilizzato per questa icona utilizzando il selettore di colori in questa impostazione.

Colore della sovrapposizione

Quando passi il mouse su un articolo nel modulo Negozio, un colore di sovrapposizione appare nella parte superiore dell'immagine e sotto il testo e l'icona del titolo del negozio. Per impostazione predefinita, viene utilizzato un colore bianco semitrasparente. Se desideri utilizzare un colore diverso, puoi regolare il colore utilizzando il selettore di colori in questa impostazione

Icona Selettore

Qui puoi scegliere un'icona personalizzata da visualizzare quando un visitatore passa con il mouse sugli articoli del negozio nel modulo.

Colore del badge di vendita

Quando un articolo è in saldo, sull'immagine del prodotto viene visualizzato un badge di vendita. Con questa impostazione è possibile regolare il colore utilizzato per lo sfondo del badge.

Carattere del titolo

È possibile modificare il carattere del testo del titolo selezionando il carattere desiderato dal menu a discesa. Divi offre dozzine di fantastici caratteri offerti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

Dimensione del carattere del titolo

Qui puoi regolare la dimensione del testo del titolo. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo o immettere direttamente il valore della dimensione del testo desiderato nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Colore del testo del titolo

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se desideri modificare il colore del testo del titolo, scegli il colore desiderato dal selettore di colori utilizzando questa opzione.

Spaziatura delle lettere del titolo

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera nel testo del titolo, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione di spaziatura desiderata nel campo di immissione a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Altezza della riga del titolo

L'altezza della linea influisce sullo spazio tra ogni riga del testo del titolo.Se desideri aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di input situato a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Politica dei prezzi

Puoi modificare il carattere del testo del prezzo selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

Dimensione carattere prezzo

Qui puoi regolare la dimensione del testo del prezzo. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo o immettere direttamente il valore della dimensione del testo desiderato nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Colore del testo del prezzo

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se desideri modificare il colore del testo del prezzo, scegli il colore desiderato dal selettore di colori utilizzando questa opzione.

Spaziatura delle lettere dei prezzi

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nel testo del prezzo, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione della spaziatura desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Altezza della linea di prezzo

L'altezza della riga influisce sullo spazio tra ogni riga del testo del prezzo Se vuoi aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di input situato a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Opzioni avanzate del negozio

Nella scheda Avanzate troverai le opzioni che i web designer più esperti potrebbero trovare utili, come gli attributi CSS e HTML personalizzati. Qui puoi applicare CSS personalizzati a uno qualsiasi dei molti elementi del modulo. Puoi anche applicare classi e ID CSS personalizzati al modulo, che possono essere utilizzati per personalizzare il modulo nel file style.css del tema figlio.

ID CSS

Immettere un ID CSS opzionale da utilizzare per questo modulo. Un ID può essere utilizzato per creare uno stile CSS personalizzato o per collegarsi a particolari sezioni della tua pagina.

Classe CSS

Immettere le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS può essere utilizzata per creare uno stile CSS personalizzato. Puoi aggiungere più classi, separate da uno spazio. Queste classi possono essere utilizzate nel tema figlio Divi o nel foglio di stile CSS personalizzato che aggiungi alla tua pagina o al tuo sito Web utilizzando le opzioni del tema Divi o le impostazioni nella pagina Divi Builder.

CSS personalizzato

Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi parte interna del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere fogli di stile CSS personalizzati direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già inserite nei tag di stile. Quindi inserisci le regole CSS separate da punto e virgola.

visibilità

Questa opzione ti consente di controllare i dispositivi su cui appare il tuo modulo. Puoi scegliere di disattivare singolarmente il tuo modulo su tablet, smartphone o desktop. Questo è utile se vuoi usare diverse mod su diversi dispositivi, o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" vuoto "layout =" espanso "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "piatto" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] SCARICA IL TEMA DIVI [/ vcex_button] [/ width_column] [» [vc_column] » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "vuoto" layout = "espanso" align = "centro" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] SCARICA MODELLI DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Altri tutorial di Divi

• siti 5 che utilizzano Divi ristorante a tema
• Come aggiungere testo su un prodotto Divi WooCommerce
• Come cambiare il colore del menu tra le pagine Divi
• Come personalizzare le griglie di un blog con Divi
• Come utilizzare il ruolo di Editor Divi su WordPress
• Come creare un dispositivo di scorrimento Divi a schermo intero
• Come cambiare il colore dei menu tra le pagine di Divi
• Funzionalità che probabilmente non conosci su Divi
• Come usare Divi Builder su WordPress
• Come usare il modulo di scorrimento video Divi
• Come utilizzare il modulo Divi Builder Flip
• Come aggiungere un modulo di testimonianza su Divi Builder
• Come usare il modulo di testo Divi
• Come creare un dispositivo di scorrimento su Divi
• Come modificare un ruolo utente Divi
• Come usare il modulo Divi Social Media
• Come utilizzare il modulo negozio sul tema WordPress Divi
• Come utilizzare il modulo barra laterale Divi
• Come utilizzare il modulo Tabella prezzi Divi
• Come utilizzare il modulo del titolo delle pubblicazioni Divi
• Come aggiungere un modulo video di Divi
• Come utilizzare il modulo di navigazione dell'articolo
• Come usare il modulo di ricerca Divi
• Come utilizzare il modulo portafoglio Divi
• Come usare il modulo persona su Divi Builder
• Come usare il modulo portafoglio con filtro Divi
• Come utilizzare il modulo di scorrimento a larghezza piena
• Come utilizzare il modulo immagine Divi Builder
• Come utilizzare il modulo di navigazione a larghezza intera di Divi Builder
• Come utilizzare il modulo della galleria di immagini
• Come utilizzare il modulo Divi Builder Full-Width Card
• Come utilizzare il modulo Divi Full Width Portfolio
• Come utilizzare il modulo di intestazione a tutta larghezza Divi
• Come utilizzare il modulo contatore Divi
• Come utilizzare il dispositivo di scorrimento degli articoli su Divi Builder
• Come utilizzare il modulo Divi Email Optin