Come creare un modulo Galleria da scala di grigi a colori in Divi

Rifat Divi Tutorials Aug 23, 2021

Pochissimi temi WordPress possono eguagliare il livello di personalizzazione del tema Divi . Indubbiamente, Divi è molto flessibile in termini di personalizzazione. Nella nostra sezione Tutorial Divi , troverai quasi tutti gli articoli di personalizzazione per elevare il tuo sito Web da zero a eroe. Oggi stiamo per dare un effetto in scala di grigi a qualsiasi immagine in Divi Gallery, che verrà cambiata al colore originale passando il mouse. Inoltre, questo effetto funzionerà anche se tocchi il piccolo schermo. Oggi impareremo come possiamo implementare facilmente questo design reattivo sul sito web.

Anteprima del progetto

Prima di dimostrare come rendere grigie le immagini e poi riportare il colore passandoci sopra o toccando, ecco un piccolo video che mostra il risultato del design di oggi. Questo schema di design funziona in modo eccellente per dipinti, fotografie, manufatti o qualsiasi sito Web relativo all'arte in cui la visualizzazione delle immagini è una parte fondamentale.

Preparazione della pagina con il modulo Divi Gallery

Se il tuo sito web non ha pagine di galleria divi, puoi crearne una come stiamo per fare con un modello divi prefabbricato. Se hai già una pagina con gli elementi della galleria, assicurati di utilizzare il modulo della galleria divi. Altrimenti, non funzionerà.Â

Ora crea una nuova pagina dalla dashboard e aprila con Divi visual builder.Â

Create Amazing Websites

Con il miglior generatore di pagine gratuito Elementor

Parti ora

Quindi seleziona la seconda opzione etichettata come "Sfoglia layout" e da lì, continua con la scelta della pagina della galleria dello studio di ceramica.

Ora sostituiremo il modulo della galleria personalizzata esistente con una cambusa Divi. Passa alla seconda sezione e cancella tutte le righe all'interno. In questo modo verranno rimossi tutti gli elementi all'interno della riga.

Creiamo una sezione e diamogli un colore di sfondo.

  • Colore sfondo sezione: rgba(198,182,0,0.12)

Ora siamo pronti per procedere con la creazione di una galleria e l'implementazione dell'effetto.

Disegno di riga

Aggiunta di una nuova riga

Aggiungi una nuova riga a due colonne alla nostra sezione appena creata.

Aggiunta di moduli galleria

Ora aggiungi il modulo della galleria divi alla prima colonna.

Aggiungi immagini

Ora aggiungi le immagini che desideri visualizzare.

Galleria di design

Dalla scheda Design, imposta l'allineamento e il colore del testo.

Font

Ora cambia il carattere in Poppins .

Effetto colore scala di grigi

Poiché la nostra galleria è pronta, ora applicheremo l'effetto scala di grigi al nostro design. È facile da fare e non abbiamo bisogno di alcuna conoscenza di programmazione per farlo.

Icona di sovrapposizione e cambio del colore di sfondo

Sposta la sezione di sovrapposizione della scheda del design della galleria e regola il colore della sovrapposizione con qualcosa che si adatti bene al tuo design.

  • Colore icona sovrapposizione: #fdb467

Trasforma il colore di sfondo della sovrapposizione in trasparente.

Impostazioni immagine

Passa alla sezione dell'immagine dalla scheda Design e applica le seguenti impostazioni.

  • Saturazione predefinita dell'immagine: 0%

Ora stiamo per applicare la saturazione al passaggio del mouse. Imposteremo la saturazione al 100% al passaggio del mouse. Tuttavia, se vuoi rendere l'immagine più vivace, puoi aumentare la saturazione.

  • Saturazione predefinita dell'immagine (al passaggio del mouse): 100%

Non noterai questo cambiamento mentre sei nella pagina di modifica. Non c'è motivo di preoccuparsi perché una volta che chiudi le opzioni di creazione della pagina e visiti direttamente la pagina, noterai il cambiamento. Inoltre, puoi invertire l'impostazione se vuoi vedere un'immagine con il colore all'inizio e mettere un effetto scala di grigi passando il mouse.

Anteprima finale

Ora possiamo vedere l'output finale del nostro design visitandolo direttamente dalla pagina.

Parole finali

È molto facile creare un effetto in scala di grigi su qualsiasi modulo della galleria divi . Tutto quello che devi fare è modificare le impostazioni di saturazione normale e in bilico. Questo effetto dà vita a siti Web di fotografia come fotografia naturalistica, matrimoni, paesaggistica, fotografia spaziale e molti altri. Nonostante qualsiasi nicchia, l'effetto scala di grigi della galleria Divi trasformerà il tuo sito Web da buono a migliore.