Vorresti utilizzare il modulo Portfolio filtrabile di Divi e non sai quale layout scegliere?
Il modulo « Portafoglio filtrabile "Per Divi ti offre due opzioni di layout tra cui scegliere. Entrambe le opzioni presentano vantaggi e funzionano molto bene per determinati scopi.
In questo articolo, confronteremo i layout a larghezza intera e griglia di questo modulo per aiutarti a decidere di cosa hai bisogno per il tuo sito web.
Personalizzeremo inoltre entrambi i layout per vedere come funzionano in un unico layout Divi.
Cominciamo!
Panoramica
Per prima cosa, vediamo cosa creeremo in questo tutorial.
Versione desktop del layout della griglia
Scarica DIVI ora!!!
Versione telefono del layout della griglia
Versione desktop del layout a larghezza intera
Leggi anche: Divi: come utilizzare gli effetti ombra e al passaggio del mouse per creare contenuti interattivi
Versione per telefono del layout a larghezza intera
Come modificare il layout del modulo Portfolio filtrabile
Per impostazione predefinita, il modulo "Portafoglio filtrabile" visualizza il layout a tutta larghezza. È possibile modificare il layout per visualizzare gli elementi in una griglia. Per prima cosa, apri il parametri del modulo.
Quindi seleziona la scheda Design. La prima opzione è disposizione. Ha un elenco a discesa con alcune scelte. Selezionalo per scegliere tra Intera Larghezza et Griglia.
Se scegli l'opzione che non è attualmente selezionata, il modulo ricaricherà e visualizzerà gli elementi del portfolio in questo layout. L'esempio seguente mostra il layout della griglia.
Confronto del layout del modulo portfolio filtrabile
I due layout sono molto diversi, ma hanno alcune somiglianze. Entrambi mostrano il filtro nella parte superiore del modulo, il titolo e il meta sotto le immagini dell'elemento e l'impaginazione nella parte inferiore del modulo.
Ecco come sono diversi.
Layout a tutta larghezza
A tutta larghezza viene visualizzata un'immagine di grandi dimensioni con un elemento del portfolio che occupa l'intera larghezza dell'area del portfolio. Le immagini vengono visualizzate nella loro forma originale e si espandono per adattarsi alla larghezza disponibile.
Non aggiunge molto spazio tra gli elementi del portafoglio. Ti consigliamo di limitare il numero di post a pochi. L'esempio seguente mostra il layout a larghezza intera con 2 post.
Layout della griglia
Il layout Griglia mostra fino a 4 elementi di fila. Aggiunge più spazio tra gli elementi. Le immagini vengono ritagliate per creare miniature della stessa dimensione indipendentemente dalle dimensioni e dalla forma dell'immagine.
Per questo, abbiamo limitato il modulo alla visualizzazione di quattro post per mostrare l'impaginazione.
Quando utilizzare ogni layout del modulo Portfolio filtrabile
Entrambe le disposizioni hanno i loro vantaggi. Ecco alcuni suggerimenti su quando utilizzare ogni layout.
Layout a tutta larghezza
Usa il layout Larghezza intera quando hai solo pochi elementi da visualizzare o vuoi concentrarti su pochi elementi.
Utilizzare questo layout anche quando si desidera evidenziare o attirare l'attenzione sulle immagini in primo piano.
Layout della griglia
Usa il layout Griglia quando vuoi mostrare molti elementi o quando vuoi che un layout mostri più elementi in uno spazio più piccolo.
Come personalizzare i layout dei moduli portfolio filtrabili
Ora che abbiamo visto come selezionare i layout, come funzionano e quando usarli, vediamo come personalizzare questi due layout.
Utilizzeremo la pagina Portfolio del Pacchetto layout pittore gratuito disponibile in Divi. Ecco la pagina originale.
Sostituiremo il portfolio con il modulo Portfolio filtrabile e utilizzeremo le stesse immagini e titoli.
Creeremo due versioni: una con un layout a larghezza intera e una con un layout a griglia.
Come personalizzare il layout della griglia del modulo Portfolio filtrabile
Inizieremo con il layout della griglia. Userò i colori e i caratteri del layout originale.
Contenuto
Aprili parametri del modulo e inserisci 4 per il Conteggio dei post. Seleziona tutto categorie che si desidera visualizzare nel modulo.
- Conteggio post: 4
- Categorie incluse: seleziona le categorie
Fornitura
Quindi seleziona la scheda Design e scegliere Griglia nelle opzioni di layout.
- Disposizione: griglia
Immagine
Scorri fino a Immagine e scegli l'opzione Box Shadow. Cambiarlo colore dell'ombra in rgba(0,0,0,0.05).
- Box Ombra: 4ème opzione
- Colore ombra: rgba(0,0,0,0.05)
Testo
Quindi scorri verso il basso fino a Testo e modificare il allineamento Al centro. Questo centra il filtro, il titolo, il meta e l'impaginazione.
- Allineamento del testo: centro
Titolo del testo
Quindi scorri verso il basso fino a Titolo del testo e modificare le seguenti impostazioni.
- Carattere del titolo: Merriweather
- Colore testo titolo: #000000
Cambia la dimensione del police a 26px per desktop, 20px per tablet e 18px per telefoni.
- Dimensioni del testo del titolo: desktop 26px, tablet 20px, telefono 18px
Filtra il testo del criterio
Quindi scorri verso il basso fino a Filtra il testo dei criteri e modificare le seguenti impostazioni:
- Criteri di filtro:
- Fonte: Montserrat
- Peso del carattere: grassetto
- Stile: TT
- Colore del testo: #fd6927
- Dimensione del testo: 12px
Metatesto
Quindi scorri verso il basso fino a Meta testo. Cambiarlo police a Montserrat e il colore in #fd6927.
- Dimensione del meta testo: Montserrat
- Colore del meta testo: #fd6927
Definisci il taille su 12 pixel, ilspaziatura del carattere su 2 pixel e il hauteur di linea su 1,2 em.
- Dimensione del testo: 12px
- Spaziatura meta lettere: 2px
- Altezza della linea meta: 1,2 em
Testo di impaginazione
Infine, scorri verso il basso fino a Testo di impaginazione e cambialo police a Montserrat, e impostare il colore carattere su nero. Chiudi il modulo e salva le impostazioni.
- Carattere di impaginazione: Montserrat
- Colore testo impaginazione: #000000
Come personalizzare il modulo portfolio filtrabile in un layout a larghezza intera
Ora, configuriamo il modulo in un layout a larghezza intera.
Utilizzeremo gli stessi suggerimenti di progettazione del layout della griglia, ma apporteremo alcune modifiche che funzionano bene per questo layout. Useremo alcuni semplici CSS per apportare alcune piccole modifiche.
Contenuto
Aprili parametri del modulo e cambia il numero di pubblicazioni a 2. Ciò mantiene la pagina più piccola e più gestibile con immagini di grandi dimensioni. Seleziona tutto categorie che si desidera visualizzare nel modulo.
- Conteggio post: 2
- Categorie incluse: scegli le categorie
elementi
Scorri fino a Elementi e disattivare Mostra categorie. Lascia gli altri abilitati. Le categorie saranno comunque abilitate per il filtro, ma non verranno visualizzate con il titolo.
- Mostra Categorie: NO
Fornitura
Seleziona la scheda Design. sotto disposizione, lasciare il Layout impostato su Intera Larghezza, che è l'impostazione predefinita.
- Disposizione: larghezza intera
Immagine
Quindi scorri verso il basso fino a Immagine . Scegli l'opzione scatola di ombra e cambialo colore sfumatura in rgba (0,0,0,0.05).
- Box Ombra: 4ème opzione
- Colore ombra: rgba(0,0,0,0.05)
Testo
Quindi scorri verso il basso fino a Testo. Cambiare il allineamento Al centro. Il filtro, il titolo e l'impaginazione saranno centrati con le immagini.
- Allineamento del testo: centro
Titolo del testo
Quindi scorri verso il basso fino a Titolo del testo . Cambiarlo police a Merriweather e cambiare il colore in nero.
- Carattere del titolo: Merriweather
- Colore testo titolo: #000000
Cambia la dimensione del police a 40px per desktop, 20px per tablet e 18px per telefoni.
- Dimensioni del testo del titolo: desktop 40px, tablet 20px, telefono 18px
Filtra il testo del criterio
Quindi scorri verso il basso fino a Filtra il testo dei criteri e modificare le seguenti impostazioni:
- Criteri di filtro:
- Fonte: Montserrat
- Peso del carattere: grassetto
- Stile: TT
- Colore del testo: #fd6927
Testo di impaginazione
Quindi scorri verso il basso fino a Testo di impaginazione. Cambiarlo police a Montserrat, cambia il poids semigrassetto e impostare il colore del carattere su #fd6927. Chiudi il modulo e salva le impostazioni.
- Carattere di impaginazione: Montserrat
- Colore: #fd6927
- Peso del carattere: semigrassetto
Testo del titolo CSS
Apri la scheda Tecnologia e scorri fino a Titolo portafoglio. Seleziona l'icona Desktop. Copia il codice qui sotto per le diverse dimensioni dello schermo. Chiudi il modulo e salva le impostazioni.
Titolo portafoglio:
- Desktop
padding-bottom:40px- Tavoletta
padding-bottom:30px- Telefono
padding-bottom:20px
Risultati
Versione desktop del layout della griglia
Versione telefono del layout della griglia
Scarica DIVI ora!!!
Versione desktop del layout a larghezza intera
Guarda anche: Divi: come modificare la sfumatura di uno sfondo al passaggio del mouse
Versione telefonica del layout a larghezza intera
Scarica DIVI ora!!!
Conclusione
Questa è la nostra opinione sull'utilizzo di un layout a larghezza intera rispetto a una griglia nel modulo Portafoglio filtrabile di Divi. Scegliere tra le due opzioni di layout è facile.
Ogni opzione ha vantaggi e dovrebbe essere progettata in modo diverso per funzionare con il tuo sito web. Basta apportare alcune modifiche per garantire che il modulo funzioni bene con qualsiasi layout Divi.
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.
...
