Vuoi sapere come inserire un modulo Blurb da Divi evidenziato mentre si sfocano gli altri?
Indipendentemente dal tipo di sito web stai costruendo, è probabile che a un certo punto vorrai vedere un elenco di diversi servizi, fasi e altro.
Uno dei modi più semplici per avvicinarsi alla creazione di un elenco del genere in modo attraente è utilizzare il modulo Blurb da Divi. I moduli Blurb ti consentono di strutturare magnificamente il file contenuto dall'elenco offrendo allo stesso tempo infinite possibilità di progettazione.
In questo tutorial, faremo un ulteriore passo avanti e ti mostreremo come evidenziare un modulo Blurb al passaggio del mouse e sfocare gli altri che hai visualizzato. È un ottimo modo per enfatizzare un modulo Blurb alla volta, senza lasciare che altri moduli Blurb distraggano il lettore.
Andiamo.
Panoramica
Prima di immergerci in questo tutorial, diamo una rapida occhiata al risultato su diverse dimensioni dello schermo.
Computer desktop
Versione mobile
Iniziamo a progettare con Divi
Aggiungi una nuova sezione
Colore di sfondo
Inizia aggiungendo una sezione regolare a una nuova pagina oa quella su cui stai lavorando.
Puoi anche consultare: Divi: come creare una sezione dei membri del team come un carosello
Apri le impostazioni della sezione e cambia il colore di sfondo.
- Sfondo: #eaeaea
Spaziatura
Aggiungi anche valori di spaziatura.
- Margine (superiore, inferiore, sinistro e destro): 2vw
- Imbottitura (superiore e inferiore): 0px
Confine
Completa le impostazioni della sezione aggiungendo un raggio di confine.
- Angoli arrotondati: 20px
Aggiungi una nuova linea
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della linea e modifica le impostazioni del dimensionamento.
- Equalizza le altezze delle colonne: SÌ
- Larghezza: 90%
- Larghezza massima: 1 px
- Altezza minima: 500px (desktop), automatica (tablet e telefono)
CSS personalizzato (elemento principale)
Allinealo contenuto della colonna aggiungendo una singola riga di codice CSS all'elemento principale della riga.
align-items: center;
Aggiungi il modulo Blurb alla colonna 1
Aggiungi contenuto
L'unico modulo che utilizziamo in questo tutorial è un modulo Blurb.
Tuttavia, puoi sostituire questo modulo con qualsiasi modulo di tua scelta purché aggiungi la classe CSS che condivideremo nei prossimi passaggi.
Aggiungi il primo modulo Blurb alla colonna 1 e inserisci il file contenuto de votre choix.
Seleziona l'icona
Quindi seleziona un'icona.
- Usa icona: SÌ
- Icona: vedi screenshot
Gradiente di sfondo (al passaggio del mouse)
Quindi usa una sfumatura di sfondo solo al passaggio del mouse.
- Gradiente si ferma
- 20%: #ffffff
- 80%: #0f1bff
- Tipo di gradiente: lineare
Impostazioni icona (desktop)
Passa alla scheda Design del modulo e modificare le impostazioni dell'icona come segue:
- Colore icona: #ffffff
- Immagine/icona Angoli arrotondati: 50px
- Larghezza bordo immagine/icona: 5px
- Colore bordo: #ffffff
- Posizionamento immagine/icona: in alto
- Allineamento immagine/icona: a sinistra
Impostazioni dell'icona al passaggio del mouse
Cambia i diversi colori delle icone al passaggio del mouse.
- Colore icona (al passaggio del mouse): #0f1bff
- Colore sfondo immagine/icona (passa con il mouse): #f7f7f7
Impostazioni del testo del titolo
Continua modificando le impostazioni del testo del titolo.
- Carattere del titolo: Source Sans Pro
- Peso del carattere: grassetto
- Stile carattere titolo: TT (maiuscolo)
Impostazioni del testo del titolo al passaggio del mouse
Cambia il colore del testo del titolo al passaggio del mouse.
- Colore del testo del titolo: #ffffff
Descrizione Impostazioni testo (desktop)
Poi ci sono le impostazioni del corpo del testo.
- Carattere del corpo: Open Sans
- Altezza della linea del corpo: 2 em
Impostazioni del testo della descrizione al passaggio del mouse
Usa un colore del testo al passaggio del mouse.
- Colore del corpo del testo (al passaggio del mouse): #ffffff
Spaziatura
Quindi, vai alle impostazioni di spaziatura e aggiungi valori di riempimento personalizzati.
- Imbottitura (superiore, inferiore, sinistra e destra): 50px
Scatola Ombra (Desktop)
Usiamo anche un'ombra box.
- Intensità sfocatura ombra scatola: 80px
- Box Shadow Spread Forza: -20px
- Colore ombra: rgba(255,255,255,0.18)
Box Shadow (al passaggio del mouse)
Cambia il colore dell'ombra al passaggio del mouse.
- Colore ombra: rgba(0,0,0,0.18)
Classe CSS
E affinché si verifichi l'effetto sfocatura, dovremo assegnare una classe CSS al nostro modulo Blurb. Più avanti nell'articolo, useremo questa classe CSS nel codice JQuery.
- Classe CSS: elemento blurb
Clona due volte il modulo Blurb e posiziona i duplicati nelle colonne rimanenti
Una volta completato il modulo Blurb nella colonna 1, puoi clonarlo due volte e posizionare i duplicati nelle restanti colonne della riga.
Clona l'intera riga
Puoi clonare la riga tutte le volte che vuoi, a seconda di quanti moduli Blurb vuoi visualizzare sulla tua pagina.
Personalizza i moduli Blurb individualmente
Ovviamente, dovrai modificare i singoli contenuti di ciascun modulo Blurb.
Aggiungi una nuova linea
Struttura della colonna
Aggiungi un'altra riga alla sezione utilizzando la seguente struttura di colonne:
Spaziatura
Apri le impostazioni della linea e rimuovi tutto il riempimento superiore e inferiore per impostazione predefinita. Ciò contribuirà a ridurre lo spazio occupato da questa riga.
- Imbottitura (superiore e inferiore): 0px
Aggiungi il modulo Codice alla colonna
Inserisci codice JQuery e CSS
Aggiungi un modulo Codice alla colonna della riga e inserisci del codice JQuery e CSS per ottenere l'effetto.
Non dimenticare di inserire il codice JQuery tra i tag di script e il codice CSS tra i tag di stile, come puoi vedere nella schermata di stampa qui sotto.
jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
});
});Leggi anche: Divi: come creare una sezione Testimonianze sotto forma di griglia
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
Computer desktop
Versione mobile
Scarica DIVI ora!!!
Conclusione
In questo articolo, ti abbiamo mostrato come diventare creativo con i moduli Blurb che condividi sul tuo sito web.
In particolare, ti abbiamo mostrato come evidenziare un modulo Blurb al passaggio del mouse sfocando gli altri che hai visualizzato.
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.
...
