Vai al contenuto principale

Tutorial Divi: come utilizzare il modulo negozio

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

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

Divi è stato progettato per essere compatibile con WooCommerce. Per integrare WooCommerce, devi installare l'ultima versione di WooCommerce.

WooCommerce è il plug-in di e-commerce che consigliamo perché ha il set di funzionalità, interfaccia e segue le migliori pratiche di codifica. Dopo aver attivato il plugin, vedrai due nuove sezioni "WooCommerce" e "Prodotti" aggiunte alla dashboard di WordPress. Puoi utilizzare queste aree per modificare le impostazioni di e-commerce e pubblicare nuovi prodotti. Puoi trovare il file 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 installato il tema Divi 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.

costruttore di divi

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.

modulo di acquisto divi.png

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.

visualizzare i prodotti su una pagina accel divi.jpg

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.

zone option divi.png

Quindi aggiungi un modulo negozio alla linea.

inserire il modulo boutique divi.png

Aggiorna le impostazioni del modulo come segue:

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]

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.

sezione prodotto divi.jpg

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.

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]

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.

setting shop divi.png

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à.

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]

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.

opzione anticipata boutique divi.png

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.

Altri tutorial di Divi

Questo articolo contiene 1 commento

  1. Caro Bair,

    Grazie per il vostro contributo.
    Ho una domanda sul modulo negozio e sarei molto felice se potessi rispondere per me.
    E vorrei che i prodotti selezionati individualmente fossero visibili nel mio modulo negozio. Ho pensato che questo potesse essere ottenuto adottando "prodotti di punta". Ma dopo aver selezionato questa opzione, non riesco a trovare alcun modo per selezionare i prodotti desiderati per il modulo. Mi sto perdendo qualcosa? Hai una spiegazione?

    Cordialmente, Frederik

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
11 azioni
quota4
Tweet2
Enregistrer5