Come applicare uno stile al filtro di categoria nel modulo Portfolio filtrabile di Divi

Il modulo portfolio filtrabile di Divi contiene molti elementi e ciascuno può essere disegnato individualmente. Il filtro è uno degli elementi più utili, ma a volte viene trascurato. In questo post, vedremo come applicare uno stile al filtro di categoria nel modulo portfolio filtrabile di Divi. Vedremo cosa si può fare con le impostazioni standard e analizzeremo i CSS per vedere come modificarlo ulteriormente.

Iniziamo!

Anteprima

Per prima cosa, vediamo cosa costruiremo in questo tutorial.

Esempio di filtro categoria desktop uno

Esempio di filtro categoria telefono uno

Filtro categoria desktop Esempio due

Filtro categoria telefono Esempio due

Esempio tre di filtro categoria desktop

Filtro categoria telefono Esempio tre

Suddivisione dei progetti in categorie

Per utilizzare al meglio il filtro di categoria, dovrai dividere i tuoi progetti in categorie che hanno più senso per i tuoi lettori. Per creare le tue categorie, vai su Progetti > Categorie nella dashboard di WordPress.

Qui vedrai i campi per aggiungere il nome, lo slug, la categoria padre e la descrizione. Vedrai anche il tuo elenco di categorie in un elenco in cui puoi modificarle.

Dopo aver creato le tue categorie, assicurati di scegliere quelle per ciascuno dei tuoi progetti che hanno più senso per il lettore. Per creare i tuoi progetti, vai su Progetti e fai clic su Aggiungi nuovo nel menu o nella parte superiore della pagina.

Per i miei esempi, ho creato progetti per un'azienda di ristrutturazioni di case. L'azienda si concentrerebbe sulle ristrutturazioni domestiche, ma includerebbe anche lavori simili per aziende e potrebbero costruire da zero. Per le case, sto usando le categorie Interno ed Esterno. Per tutti gli altri lavori ho aggiunto Corporate e Construction.

Impostazioni del modulo portfolio filtrabile

Nel nostro esempio, sostituirò la sezione portfolio della pagina Portfolio dal pacchetto di layout di ristrutturazione gratuito con un modulo portfolio filtrabile. Per prima cosa, vediamo come modellare il modulo. Quindi, modelleremo il filtro in tre modi diversi. Ecco la pagina prima di apportare le modifiche.

Ecco la pagina dopo aver aggiunto il modulo Portfolio filtrabile al posto delle immagini.

Per prima cosa, modelleremo il modulo. Useremo queste stesse impostazioni per tutti e tre gli esempi.

Contenuto

Nella scheda Contenuto, imposta il numero di post su 8 e seleziona le Categorie dall'elenco delle Categorie incluse.

• Conteggio post: 8
• Categorie incluse: a tua scelta

Elementi

Scorri verso il basso fino a Elementi e disattiva Mostra categorie . Useremo solo i titoli e consentiremo al filtro di visualizzare le categorie.

• Mostra categorie: n

Disposizione

Quindi, vai alla scheda Design e seleziona Griglia in Layout . L'avevo già selezionato per le immagini precedenti, ma il modulo visualizza l'intera larghezza per impostazione predefinita.

• Disposizione: griglia

Testo

Quindi, scorri fino a Testo e imposta Allineamento testo su Centra. Questo centra il filtro e l'impaginazione con il modulo ei titoli con le immagini del progetto.

• Allineamento del testo: centro

Testo del titolo

Quindi, scorri fino a Testo del titolo . Cambia il carattere in Kanit e imposta il peso su Semi grassetto. Imposta il Colore su nero.

• Carattere: Kanit
• Peso: semigrassetto
• Colore: #000000

Modifica la dimensione del carattere su 20px per desktop, 18px per tablet e 16px per telefoni. Imposta l' interlinea su 1px e l' altezza della linea su 1,3em.

• Dimensioni: desktop 20px, tablet 18px, telefono 16px
• Spaziatura lettere: 1px
• Altezza della linea: 1,3 em

Testo di impaginazione

Quindi, scorri verso il basso fino a Testo di impaginazione e cambia il carattere in Kanit. Cambia il Colore in nero.

• Carattere: Kanit
• Colore: #000000

Cambia l' interlinea a 1px. Salva il tuo lavoro. Ora possiamo definire lo stile del filtro di categoria per i nostri esempi.

• Spaziatura lettere: 1px

Esempi di filtri di categoria

Ora possiamo passare ai nostri esempi di filtri di categoria. Sto usando spunti di progettazione dal pacchetto di layout.

Esempio di filtro di categoria Uno

Il nostro primo esempio è il più semplice dei tre. Usa le impostazioni di base e non fa nulla di speciale. Funziona bene con il design del layout.

Filtra il testo dei criteri

Nella scheda Progettazione , scorri verso il basso fino a Testo criteri . Cambia il carattere in Kanit. Cambia lo stile in TT e il colore in nero.

• Carattere: Kanit
• Stile: TT
• Colore: #000000

Imposta l' interlinea su 1px e imposta l' altezza della linea su 1,3 em. Questo è tutto per il primo. Ora salva le tue impostazioni e chiudi il modulo.

• Spaziatura lettere: 1px
• Altezza della linea: 1,3 em

Filtro di categoria Esempio due

Il nostro secondo esempio utilizzerà alcuni semplici CSS per il modulo e la pagina per creare angoli arrotondati e un'ombra del riquadro. Questo sembra il più diverso.

Filtra il testo dei criteri

Vai alla scheda Design e scorri verso il basso fino a Filtra testo criteri . Cambia il carattere in Kanit. Imposta il Colore su nero, la Dimensione su 16px e l' Altezza della linea su 1.5em. La dimensione del carattere funziona bene su tutte le dimensioni dello schermo, quindi non sarà necessario modificarla per tablet o telefoni.

• Carattere: Kanit
• Colore: #000000
• Dimensioni: 16px
• Altezza della linea: 1,5 em

Modulo CSS

Quindi, vai alla scheda Avanzate . Scorri verso il basso fino a Filtro portafoglio attivo e aggiungi CSS per il colore di sfondo e chiudi il modulo. Questo cambia il colore di sfondo del filtro attivo. Qualsiasi filtro su cui l'utente fa clic cambia in questo colore di sfondo e il filtro precedente torna al colore normale.

• Filtro di portafoglio attivo CSS:

  background-color:#ffd000;

CSS delle impostazioni della pagina

Quindi, apri le Impostazioni pagina nel menu Pagina. Nella modale Impostazioni pagina, seleziona la scheda Avanzate e incolla il CSS personalizzato nel campo. Questo CSS rimuove il bordo dagli elementi del filtro, crea un raggio di confine di 25px e aggiunge 5px di margine tra gli elementi. Aggiunge anche un piccolo riquadro-ombra nella parte inferiore degli oggetti e cambia il colore dell'ombra. Chiudi il modulo e salva le impostazioni.

• CSS personalizzato:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {border-width:0px; border-radius: 25px!important; margin:5px; box-shadow: 1px 2px rgba(0,0,0,0.3);}

Esempio di filtro di categoria tre

Il nostro terzo esempio segue idee di progettazione CSS simili dall'esempio precedente. Non include angoli arrotondati e cambia i colori del carattere e dello sfondo al passaggio del mouse. Utilizza anche CSS sia per il modulo che per la pagina.

Filtra il testo dei criteri

Vai alla scheda Design e scorri verso il basso fino a Filtra testo criteri . Scegli Kanit per il Font , imposta lo Stile su TT e il Colore su bianco.

• Carattere: Kanit
• Stile: TT
• Colore: #ffffff

Quindi, seleziona l' opzione Passa il mouse per il Colore del testo e cambia il Colore in nero. Questo si prende cura dei caratteri al passaggio del mouse. Gestiremo gli sfondi con CSS. Cambia la spaziatura delle lettere a 1px e l' altezza della linea a 1,3 em.

• Colore al passaggio del mouse: #000000
• Spaziatura lettere: 1px
• Altezza della linea: 1,3 em

Modulo CSS

Quindi, vai alla scheda Avanzate e scorri verso il basso fino a Filtro portafoglio attivo . Aggiungi il seguente CSS per cambiare lo sfondo del filtro attivo. Chiudere il modulo.

• Filtro di portafoglio attivo CSS:

  background-color:#ffd000

CSS delle impostazioni della pagina

Infine, apri le Impostazioni della pagina. vai alla scheda Avanzate e inserisci il seguente CSS personalizzato . Chiudi il modulo e salva le impostazioni. Questo cambia lo sfondo in nero, aggiunge 15px di riempimento in alto e in basso e 30px di riempimento a sinistra e a destra. Questo ridimensiona gli elementi del filtro in modo che corrispondano strettamente ai pulsanti all'interno del layout e aiuta a creare il cambio di colore per l'effetto al passaggio del mouse. Lo sfondo diventerà bianco al passaggio del mouse.

• CSS personalizzato:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {background-color:black; padding: 15px 30px 15px 30px;}

Risultati

Esempio di filtro categoria desktop uno

Esempio di filtro categoria telefono uno

Filtro categoria desktop Esempio due

Filtro categoria telefono Esempio due

Esempio tre di filtro categoria desktop

Filtro categoria telefono Esempio tre

Pensieri finali

Questo è il nostro sguardo su come definire lo stile del filtro di categoria nel modulo portfolio filtrabile di Divi. Il filtro di categoria include gli stessi strumenti di stile degli altri elementi, quindi può essere facilmente adattato per funzionare con qualsiasi layout Divi. Aggiungendo CSS sia al modulo che alla pagina, possiamo applicare uno stile al filtro di categoria in molti modi unici per distinguerci dalla massa.

Vogliamo sentire da voi. Hai disegnato il tuo filtro di categoria nel modulo portfolio filtrabile di Divi? Fatecelo sapere nei commenti.