Vuoi sapere come personalizzare gli elementi della griglia del modulo Portfolio filtrabile di Divi ? Seguici in questo tutorial...
Avere una zona sul tuo sito web per mostrare il tuo lavoro è importante. Se sei uno stilista, puoi creare diversi progetti sul tuo sito web WordPress per mostrare i tuoi concetti. Se sei un brand builder, puoi utilizzare un portfolio per mostrare il tuo lavoro. Inoltre, possiamo anche andare oltre e aggiungere diverse categorie per i nostri progetti. È qui cosa fa il modulo Portfolio filtrabile di Divi? .
Con questo modulo, siamo in grado di mostrare il nostro duro lavoro in modo semplice e organizzato.
Nel tutorial di oggi, personalizzeremo i singoli elementi della griglia del modulo Portfolio filtrabile. Useremo layout da pacchetti di layout gratuiti Convegno Divi et Istruttore Divi Online Yoga fornito con ogni acquisto di Divi .
Come per tutto ciò che riguarda Divi, abbiamo la possibilità di personalizzare questo modulo in base alle nostre esigenze e desideri. Tuttavia, prima di entrare nello stile, impariamo un po' di più sul modulo.
Che cos'è il modulo Portafoglio filtrabile di Divi?
I progetti fanno parte di un tipo di post personalizzato che funziona allo stesso modo dei post. Puoi trovarli nella dashboard di WordPress.
Qui è dove creerai i tuoi singoli progetti che popoleranno il tuo modulo Portfolio filtrabile. Il modulo ci offre due modi per mostrare i nostri progetti: in un formato a griglia ou in un formato a tutta larghezza. Per noi, useremo e personalizzeremo il formato della griglia.
Con il modulo Filterable Portfolio, saremo in grado di presentare i nostri progetti più recenti. Gli utenti del nostro sito vedranno una barra dei filtri nella parte superiore della griglia del nostro portfolio. Da lì, possono navigare tra le diverse categorie di portfolio che permettiamo di visualizzare nel modulo.
Ecco un esempio di configurazione a griglia del modulo con alcuni progetti di esempio:
Aree da considerare quando si crea il portfolio filtrabile di Divi
Come tutte le mod Divi, il modulo Portfolio filtrabile viene fornito con una serie di funzionalità che possiamo personalizzare in base alle nostre esigenze e desideri. Pertanto, la maggior parte delle funzionalità fornite con il modulo possono essere modificate nella scheda Design dalle impostazioni del modulo modale. Possiamo modificare le seguenti aree e altro:
- Titolo del progetto
- Categoria progetto
- Vignette
- Filtra il testo
- Miniatura al passaggio del mouse
- Impaginazione
Questo non è un elenco completo e non abbiamo nemmeno iniziato a parlare di come i CSS abbiano aggiunto personalizzazioni più approfondite a questo modulo!
Come personalizzeremo il modulo Portfolio filtrabile di Divi
Come accennato in precedenza, per questo tutorial utilizzeremo due layout: Convegno Divi et Istruttore Divi Online Yoga. Di seguito puoi avere una panoramica del lavoro che faremo durante questo tutorial.
Disposizione degli elementi del layout "Divi Conference".
Disposizione degli elementi del layout "Divi Online Yoga Instructor".
Puoi scaricare facilmente entrambi i layout da Divi Costruttore.
Ora iniziamo!
Guarda anche: Divi: scegli tra la griglia e il layout a larghezza intera del modulo Portfolio filtrabile
Personalizzazione del modulo Portfolio filtrabile di Divi: "Divi Conference Edition"
Innanzitutto, dovremo installare il modello di pagina dell'evento dal Divi Conference Layout Pack. Dopo aver creato la tua nuova pagina in WordPress e aver attivato Divi Builder, entreremo nella Libreria Divi.
Accedi alla libreria di layout Divi
Clicca sull'icona « Carica dalla libreria per accedere alla Libreria layout Divi
Individua il layout nella Libreria layout Divi
Utilizzando la funzione di ricerca nella libreria di layout di Divi, ricerca la disposizione" Pagina dell'evento della conferenza".
Installa il layout
Dopo aver selezionato il layout, fare clic su " Usa questo layout per installare il layout nella tua pagina.
Rimuovere e sostituire il modulo immagine
Rimuoveremo il modulo Immagine mostrato di seguito per fare spazio al modulo Portfolio filtrabile che personalizzeremo. Clicca sul " Elimina dopo aver passato il mouse sopra l'immagine per eliminare la foto.
Inserisci il modulo Portfolio filtrabile di Divi
Con il modulo Image rimosso, ora possiamo fare spazio al nostro modulo Portfolio filtrabile. Faremo clic sull'icona " Aggiungi modulo (il segno più grigio), quindi selezionare il modulo nella casella modale del modulo che viene visualizzata.
Impostazione del numero di post e del layout del portfolio
Per impostazione predefinita, questo modulo presenterà il tuo lavoro in una singola colonna. Tuttavia, utilizzeremo il layout della griglia che viene fornito di default con 4 colonne.
Pertanto, ti consigliamo di scegliere un multiplo di 4 (4, 8, 12, 16, ecc.) come numero di post per il tuo portfolio.
Per questo tutorial, useremo 12 progetti nella nostra griglia.
Inizia a personalizzare il portfolio filtrabile di Divi: titolo e metatesto
Ora che i nostri progetti sono visualizzati in una griglia, colleghiamo alcuni degli elementi di design del modello selezionato. In questo caso, utilizzeremo lo stile fornito con il Divi Conference Layout Pack nel nostro nuovo modulo.
Stile del testo
- Allineamento del testo: centrato
- Colore del testo: scuro
Stile del testo del titolo
- Titolo Titolo Livello: H2
- Carattere del titolo: Krona One
- Colore del testo: #000000
Stile metatesto
- Meta Font: Predefinito (Open Sans)
- Colore metatesto: #ff6651
Ora che abbiamo definito il nostro stile per i titoli nella griglia del portfolio, apportiamo alcune modifiche alla forma effettiva delle miniature del progetto stesse.
Cambia il bordo della miniatura del progetto e gli angoli arrotondati
Nel nostro pacchetto Divi Conference Layout, utilizziamo una combinazione unica di angoli arrotondati per dare una forma unica ad alcuni dei fotogrammi chiave del pacchetto. Applichiamo questo stile alle miniature del nostro modulo.
Immagine
- immagine:
- Angoli arrotondati: 50px 50px 50px 0px
- Stili di bordo: tutti
- Larghezza bordo: 3px
- Colore: #000000
- Stile del bordo: solido
Questo darà alle nostre miniature una forma che corrisponde al resto delle altre immagini nel pacchetto di layout.
Personalizzazione della sovrapposizione al passaggio del mouse
Facciamo un ulteriore passo avanti con il nostro stile e apportiamo una leggera modifica all'overlay predefinito fornito con questo modulo. Cambieremo il colore e l'icona utilizzata fin dall'inizio.
sovrapposizione
- Colore icona zoom: #bcf5fd
- Colore sovrapposizione al passaggio del mouse: #ff6651
- Selettore di icone al passaggio del mouse: Zoom
Come ora puoi vedere, abbiamo aggiunto i colori del marchio per questo layout alla sovrapposizione, oltre a modificare l'icona che Divi fornisce per impostazione predefinita per la funzione di sovrapposizione al passaggio del mouse in questo modulo.
Personalizzazione dell'impaginazione
Inizieremo ora a utilizzare piccoli frammenti di CSS per aggiungere ulteriore personalizzazione al nostro modulo Portfolio filtrabile. Innanzitutto, personalizzeremo l'impaginazione di questo modulo. Successivamente, rimuoveremo il bordo che appare sopra di esso con una singola riga di CSS
Testo di impaginazione
- Impaginazione:
- Carattere: Krona One
- Allineamento del testo: centrato
- Colore del testo: #ff6651, #000000 (al passaggio del mouse)
Per il nostro CSS, passeremo alla scheda Tecnologia del nostro modulo. In secondo luogo, faremo clic sulla scheda CSS personalizzato. Successivamente, inseriremo il seguente frammento di codice per rimuovere il bordo sopra la nostra impaginazione, conferendogli un aspetto più pulito.
Impaginazione portfolio
border-top: 0px;
Utilizzo delle impostazioni Divi e CSS per personalizzare il testo del filtro
Per il testo del filtro, faremo un salto di qualità. Useremo i CSS per cambiare lo sfondo e gli effetti al passaggio del mouse.
Vogliamo avere una perfetta continuità tra il modulo appena aggiunto e lo stile del layout pack. Per prima cosa, inseriamo le nostre impostazioni Divi per il carattere.
Testo dei criteri di filtro
- Criteri di filtro:
- Carattere: Krona One
- Colore carattere: #ffffff, #000000 (passa con il mouse)
Allo stato attuale, il nostro filtro sembra essere sparito. In effetti, nel suo stato predefinito, è testo bianco su sfondo bianco. Tuttavia, lo cambieremo con CSS personalizzato in due punti.
Innanzitutto, aggiungeremo uno snippet CSS nelle impostazioni della pagina che aggiungerà uno sfondo al testo del filtro. In secondo luogo, personalizzeremo il filtro del portafoglio attivo utilizzando la scheda Tecnologia du modulo.
Accedere impostazioni della pagina, fai clic sui tre puntini al centro dello schermo. con bagno, selezionare l'icona dell'ingranaggio che aprirà le impostazioni della pagina. Allora lei vai alla scheda CSS personalizzato e inserisci quanto segue per aggiungere uno sfondo al testo del filtro.
CSS personalizzato
In questo frammento CSS, puntiamo al colore di sfondo del filtro. Eseguiamo anche il targeting e lo stile del suo stato al passaggio del mouse. Successivamente all'ordine del giorno, aggiungiamo altri CSS al modulo ed evidenziamo la nostra scheda Filtro attivo.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}
Stile della scheda attiva del filtro portfolio
La scheda attiva di ffiltro portafoglio richiama l'attenzione degli utenti sulla categoria di portfolio corrente che stanno visitando. Attualmente questo filtro ha testo bianco e uno sfondo chiaro.
Andremo alla scheda Tecnologia del modulo Portafoglio filtrabile e aggiungere testo agli stati predefinito e al passaggio del mouse di questa funzione. Ecco le proprietà CSS che aggiungeremo in uno stato predefinito:
background: #ff6651;
color: #ffffff !important;
Stato al passaggio del mouse
Al passaggio del mouse, cambieremo lo sfondo in nero.
color: #000000!important;
Aspetto finale del design del portfolio filtrabile di Divi con "Divi Conference"
Ecco il look finale!
E ora, ecco come appare quando passi il mouse!
Personalizzazione del modulo Portfolio filtrabile di Divi: "Divi Online Yoga Instructor"
Come con la Divi Conference Edition, trova il tuo layout nel pacchetto di layout per istruttori di yoga online all'interno di Divi Builder.
Useremo il layout della pagina di destinazione per questo tutorial. Scorri verso il basso fino alla sezione Classi sezione con il titolo Sezione Tutte le prossime classi.
Inserimento del modulo Portfolio filtrabile
Da qui, rimuoveremo le righe con le classi. Fare clic sull'icona viola con tre punti su di essa . Poi, selezionare la vista wireframe. Infine, eliminerai le due righe contenenti tre colonne.
Quindi li sostituiremo con una singola colonna nella riga all'interno. Quindi, aggiungeremo il nostro modulo Portfolio filtrabile.
Come nell'esempio precedente, utilizzeremo il layout della griglia per questo modulo con un multiplo di 4 per il numero di post.
Ora facciamo qualcosa di leggermente diverso con le informazioni che presentiamo sulla mappa.
Nella scheda Contenuti, navigare verso elementi e deselezionare Mostra categorie . Ciò significa che il modulo Portfolio visualizzerà solo il nome del progetto senza il nome della categoria in cui si trova.
Personalizzazione del testo dei criteri di filtro, del titolo del progetto e del testo dell'impaginazione
Definiamo la base di stile per le parti di testo del nostro modulo. Il corpo del testo di questo layout è Sans Aperte e il carattere utilizzato per le intestazioni principali è Scalpello. Pertanto, utilizzeremo una combinazione di questi due caratteri durante tutto il processo di styling.
Testo
- Allineamento del testo: centrato
- Colore del testo: chiaro
Titolo del testo
- Carattere del titolo: Cinzel
- Colore del testo del titolo: #ffffff
Testo dei criteri di filtro
- Criteri di filtro Spessore carattere: grassetto
- Filtro Criteri testo Colore: #ffffff
Testo di impaginazione
- Peso del carattere di impaginazione: grassetto
Questo è l'aspetto attuale del nostro modulo portfolio filtrabile. Non è molto, ma ci stiamo arrivando piano piano!
Crea una sovrapposizione al passaggio del mouse traslucida
Prendiamo ispirazione dai diversi moduli e dai bellissimi gradienti in questo layout. Per questo, creeremo una sovrapposizione al passaggio del mouse traslucida e personalizzeremo l'icona che appare anche al passaggio del mouse.
- Colore icona zoom: #323741
- Colore sovrapposizione al passaggio del mouse: rgba (255 201 165, 0,85)
- Hover Icon Picker: cerca un foglio e vedi l'icona sopra
Aggiunta di bordi agli elementi della griglia del portfolio con CSS personalizzati
Analogamente al nostro primo esempio, ora utilizzeremo i CSS per aggiungere più interesse al nostro modulo Portfolio filtrabile.
Ora aggiungeremo un bordo attorno a ogni singolo elemento nella griglia del portfolio. Utilizza lo snippet CSS di seguito nella parte CSS personalizzata delle impostazioni della pagina per aggiungere il nostro bordo.
Useremo anche "border" come classe CSS per questo modulo.
- Classe CSS: bordo
CSS personalizzato
/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}
Qui ora abbiamo il nostro modulo Portfolio filtrabile con un bel bordo - e riempimento - attorno a ciascun elemento della griglia.
Aggiunto CSS al bordo di impaginazione dello stile
A differenza del nostro esempio precedente, aggiungiamo un colore al bordo della nostra impaginazione con i CSS. Questo andrà anche in zona Impostazioni > Pagina CSS personalizzata .
/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}Stile del testo dei criteri di filtro
Simile allo stile del nostro modulo Divi Conference Portfolio, vogliamo aggiungere il jazz ai nostri filtri di categoria. Ancora una volta, vogliamo attingere dallo stile che è già presente nel modello fornitoci.
Ecco il CSS che aggiungeremo nella nostra sezione CSS personalizzata per scegliere come target lo sfondo e il passaggio del mouse sulla nostra barra dei filtri.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}Con queste due nuove aggiunte al nostro CSS personalizzato, questo è l'aspetto che avrà il nostro modulo Portfolio filtrabile.
Tuttavia, si noti come il filtro del portafoglio attivo viene perso. Ha sempre uno sfondo chiaro con testo bianco sopra. Andiamo alle impostazioni del modulo e aggiungiamo un po' di CSS per cambiarlo.
CSS personalizzato
Filtro portafoglio attivo:
background: #ffffff;
color: #323741 !important;
Rimuovi l'animazione del modulo
Per fornire un'esperienza più pulita, rimuoveremo l'animazione predefinita fornita con il modulo Portfolio filtrabile. Per questo dovremo prima tornare alle impostazioni della nostra pagina e aggiungere alcuni CSS che mireranno agli elementi della griglia del portfolio e rimuoveranno il transizione scorrevole succede fuori dagli schemi.
CSS personalizzato
/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}Leggi anche: Divi: come modificare il numero di colonne in un blog
Cambia la griglia del portfolio da quattro colonne a tre
La nostra ultima aggiunta CSS sarà quella di trasformare il nostro modulo Portfolio filtrabile da quattro colonne a tre. Questo ci darà più spazio per vedere i nostri progetti.
Inoltre, aggiungeremo una linea extra al nostro modulo. Troverai anche l'ultimo frammento CSS che puoi utilizzare per convertire le tue colonne.
CSS personalizzato
Per quest'ultimo frammento, aggiungeremo l'ID CSS #griglia-a-tre-colonne al nostro modulo. Manterremo comunque intatta la nostra classe CSS di prima.
/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}
Scarica DIVI ora!!!
Conclusione
Come con la maggior parte dei moduli Divi, le impostazioni fornite con Divi possono essere ulteriormente sviluppate con i CSS. Mettere in mostra il tuo lavoro è una parte importante della gestione di un'attività, di un blog o di un marchio online.
Pertanto, avere un modo organizzato per mostrare il tuo lavoro è essenziale. Guadagna suggerimenti che sono stati condivisi oggi per prendere parte al tuo viaggio di progettazione del modulo Portfolio filtrabile di Divi.
Si spera che questa tecnica aggiunga un'altra utile abilità di progettazione per progetti futuri.
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.
Non esitate a consultare anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
