Vai al contenuto principale

Tutorial Divi: come utilizzare il modulo wallet con filtro

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]

Il modulo Fullwidth Portfolio del tema Divi funziona esattamente come il normale modulo Portfolio, tranne per il fatto che mostra il tuo progetto in una superba modalità Fullwdth. Inoltre viene fornito con alcune nuove configurazioni uniche: Grid e Carousel. Il modulo funziona visualizzando un elenco dei tuoi progetti più recenti e può essere utilizzato da designer e artisti che desiderano visualizzare una galleria del loro lavoro più recente.

modulo porfolio a larghezza intera divi.png

Come aggiungere un modulo Portfolio Fullwidth alla tua pagina

Prima di poter aggiungere un modulo portfolio completo 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.

filterable port.png

Individua il modulo portafoglio filtrabile 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 "portfolio filtrabile" e quindi fare clic su "Invio" per trovare e aggiungere automaticamente il modulo portfolio filtrabile. 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: aggiunta di un modulo portfolio filtrabile a una pagina portfolio

Per questo esempio, ti mostrerò come presentare un portfolio su una pagina portfolio che copre l'intera larghezza della pagina.

portfolio su un'intera pagina divi.jpg

Cominciamo.

Usa il visual builder per aggiungere una sezione a tutta larghezza sotto l'intestazione della pagina. Quindi aggiungi un modulo portfolio filtrabile.

aggiungi un portfolio filtrabile divi.jpg

Aggiorna le impostazioni del portfolio filtrabili come segue:

Opzioni di contenuto

Numero messaggi: 8 Impaginazione display: NO

Opzioni di design

Layout: Grid Zoom Icon Color: # 000000 Colore overlay al passaggio del mouse: #ffffff Carattere titolo: predefinito, grassetto, maiuscolo Dimensione carattere titolo: 14px Spaziatura lettera titolo: 1px Dimensione carattere Meta: 12px Meta Spacing lettere: 1px

filterable portfolio module divi.png

È tutto!

Opzione del contenuto del modulo Portfolio

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.

filterable portfolio module divi contenuto section.png

Titolo del portafoglio

Inserisci un titolo visualizzato sopra il portfolio o lascialo vuoto in modo da non utilizzare un titolo.

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]

Includi categorie

Scegli le categorie che desideri visualizzare. I progetti di categorie non selezionate non verranno visualizzati nell'elenco dei progetti.

Numero di messaggi

Controlla il numero di progetti visualizzati Lascia vuoto o usa 0 per non limitare l'importo.

Mostra titolo

Scegli se visualizzare o meno il titolo di ogni progetto quando passi il mouse sopra l'elemento del progetto.

Mostra la data

Scegli se visualizzare o meno la data di pubblicazione per ogni progetto quando passi il mouse sopra l'elemento del progetto.

Colore di sfondo

Definisci un colore di sfondo personalizzato per il tuo modulo o lascia vuoto per utilizzare il colore predefinito.

Immagine di sfondo

Se impostata, questa immagine verrà utilizzata come sfondo per questo modulo. Per rimuovere un'immagine di sfondo, è sufficiente rimuovere l'URL dal campo delle impostazioni. Le immagini di sfondo appariranno sopra i colori di sfondo, il che significa che il colore di sfondo non sarà visibile quando viene applicata un'immagine di sfondo.

Etichetta amministratore

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 design del portafoglio a larghezza piena

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.

modulo di progettazione divi.png

Fornitura

Scegli il layout che desideri utilizzare. "Griglia" mostrerà tutti i tuoi articoli in un layout a più colonne e più righe. Il carosello mostra i tuoi elementi in una singola riga di immagini affiancate che scorrono per rivelare elementi aggiuntivi nell'elenco.

Icona colore zoom

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

Hover Color Overlay

Quando passi il mouse su un elemento nel modulo portfolio, viene visualizzato un colore di sovrapposizione nella parte superiore dell'immagine e sotto il testo e l'icona del titolo del portfolio. 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

Hover Icon Selector

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

Colore del testo

Qui puoi scegliere se il tuo testo deve essere chiaro o scuro.

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]

opzione design filterable portfolio module divi.png

Carattere del titolo

È possibile modificare il carattere del testo del titolo 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 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à.

sezione del modulo divisibile del portafoglio filtrabile metadonnee.png

Meta Font

Puoi modificare il carattere del tuo meta testo 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 del carattere Metas

Qui puoi regolare la dimensione del tuo meta-testo. È 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 meta-testo

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore del tuo meta-testo, scegli il colore desiderato dal selettore di colori usando questa opzione.

Spaziatura Meta Letter

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera nel tuo meta-testo, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di input 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 tipo di unità.

Meta Line Height

L'altezza della riga influisce sullo spazio tra ogni riga nel tuo meta-testo 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 immissione 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 tipo di unità.

Usa il bordo

Abilitando questa opzione verrà posizionato un bordo attorno al modulo. Questo bordo può essere personalizzato utilizzando i seguenti parametri condizionali.

Colore del bordo

Questa opzione influisce sul colore del bordo. Seleziona un colore personalizzato dal selettore di colori per applicarlo al bordo.

Larghezza del confine

Per impostazione predefinita, i bordi sono larghi 1 pixel. È possibile aumentare questo valore trascinando il dispositivo di scorrimento dell'intervallo o immettendo un valore personalizzato nel campo di immissione a destra del dispositivo di scorrimento. Sono supportate unità di misura personalizzate, il che significa che puoi cambiare l'unità predefinita da "px" a qualcos'altro come em, vh, vw ecc.

Border Style

I bordi supportano otto diversi stili: solido, punteggiato, punteggiato, doppio, scanalatura, cresta, sovrapposizione e inizio. Seleziona lo stile desiderato dal menu a discesa per applicarlo al bordo.

Opzioni di portafoglio avanzate Fullwidth

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.

sezione del modulo portfolio portfolio divisibile in avanti.png

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]

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.

Giostra automatica

Se si sceglie l'opzione di layout del carosello e si desidera che il carosello scivoli automaticamente senza che il visitatore debba fare clic sul pulsante successivo, abilitare tale opzione e regolare la velocità di rotazione di seguito se lo si desidera.

Velocità automatica del carosello

Qui puoi indicare la velocità di rotazione del carosello, se l'opzione "Rotazione automatica carosello" è attivata sopra. Più alto è il numero, più lunga è la pausa tra ogni rotazione. (Es. 1000 = 1 sec)

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 i commenti 7

  1. Buongiorno,
    Riesco ad avere un portafoglio filtrabile o un portafoglio a larghezza intera ma l'intera larghezza non è filtrabile.
    Vorrei poter aggiungere il titolo del progetto in questione alle mie immagini di portfolio filtrabili, come nel caso dei portfolio "classici". Sai come si fa ?

  2. Buongiorno !

    Sono appena andato da Divi e inciampo sulla buona strada per creare una pagina "Annunci" in cui i miei nuovi annunci sarebbero visualizzati in piccole miniature / minuziose una accanto all'altra come sui siti delle agenzie immobiliari. Per informazione ho già creato la mia pagina ANNUNCI e alcuni articoli (un articolo per annuncio) che associo alla categoria ANNUNCI…. ma appaiono in grande formato. Spero di essermi spiegato bene nella mia problematica! In attesa dei vostri suggerimenti, vi ringrazio anticipatamente per le vostre spiegazioni e consigli! Buona serata !! Cordiali saluti - Jerome

    1. Ciao, se stai usando il modulo blog, dovrai aggiungere CSS specifico che si applica a questo modulo. Sfortunatamente, questo stampo non offre molte opzioni di personalizzazione.

  3. Buongiorno,

    Grazie per il tuo articolo molto completo.
    Riesco a visualizzare un porftolio a larghezza intera o un portfolio filtrabile ma con ampi margini intorno.
    Sai se divi ti consente di visualizzare un portafoglio filtrabile a larghezza intera?
    O per visualizzare un portafoglio filtrabile senza i margini importanti?

    grazie

  4. Ciao, ho apprezzato molto il tuo articolo ma quando provo a riprodurre questo tipo di layout ho grandi spazi tra le mie immagini. Avrei preferito unire le immagini come nel tuo esempio. Come configurare il modulo per questo?

    Merci!

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
14 azioni
quota2
Tweet2
Enregistrer10