Come evidenziare un modulo Blurb sospeso sfocando gli altri con Divi

Qualunque sia il tipo di sito web che stai costruendo, è molto probabile che a un certo punto vorrai visualizzare un elenco di diversi servizi, passaggi e altro ancora. Uno dei modi più semplici per affrontare la creazione di un elenco di questo tipo in modo attraente è utilizzare il modulo Blurb di Divi. I moduli Blurb ti consentono di strutturare magnificamente il contenuto dell'elenco fornendo allo stesso tempo infinite possibilità di design.

Nel tutorial di oggi, faremo un ulteriore passo avanti e ti mostreremo come evidenziare un modulo Blurb sospeso sfocando gli altri che hai visualizzato. Questo è un ottimo modo per focalizzare l'attenzione su un modulo Blurb alla volta, senza permettere agli altri moduli Blurb di distrarre il lettore. Non appena un visitatore passa a un altro modulo Blurb, quello diventa invece quello evidenziato. Potrai anche scaricare gratuitamente il file JSON del layout!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il layout del modulo Blurb fluttuante

Per mettere le mani sul layout del modulo blurb con hovered gratuito, devi prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Iniziamo a ricreare!

Aggiungi nuova sezione

Colore di sfondo

Inizia aggiungendo una sezione normale a una nuova pagina o a quella su cui stai lavorando. Apri le impostazioni della sezione e cambia il colore di sfondo.

• Sfondo Coor: #eaeaea

Spaziatura

Aggiungi anche alcuni margini personalizzati e valori di riempimento.

• Margine superiore: 2vw
• Margine inferiore: 2vw
• Margine sinistro: 2vw
• Margine destro: 2vw
• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Frontiera

Completa le impostazioni della sezione aggiungendo un raggio di bordo.

• Tutti gli angoli: 20px

Aggiungi nuova riga

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 riga e modifica le impostazioni di dimensionamento. L'abilitazione dell'opzione "Equalizza le altezze delle colonne" aiuterà con il passaggio successivo che allinea il contenuto della colonna.

• Equalizza le altezze delle colonne: Sì
• Larghezza: 90%
• Larghezza massima: 1580 px
• Altezza minima: 500 px (desktop), automatico (tablet e telefono)

Elemento principale

Allinea il contenuto della colonna aggiungendo una singola riga di codice CSS all'elemento principale della riga.

align-items: center;

Aggiungi modulo Blurb alla colonna 1

Aggiungi contenuto

L'unico modulo che stiamo utilizzando in questo tutorial è un modulo Blurb, ma puoi sostituire questo modulo con qualsiasi modulo a tua scelta, purché tu aggiunga la classe CSS che condivideremo nei prossimi passaggi. Aggiungi il primo modulo Blurb alla colonna 1 e inserisci alcuni contenuti a tua scelta.

Seleziona icona

Seleziona un'icona successiva.

Sfondo sfumato al passaggio del mouse

Quindi, usa uno sfondo sfumato solo al passaggio del mouse.

• Colore 1: #ffffff
• Colore 2: #0f1bff
• Tipo di gradiente: lineare
• Posizione di partenza: 20%
• Posizione finale: 20%

Impostazioni predefinite dell'icona

Passa alla scheda di progettazione del modulo e modifica le impostazioni dell'icona come segue:

• Colore icona: #ffffff
• Icona del cerchio: Sì
• Colore del cerchio: #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: #0f1bff
• Colore del cerchio: #f7f7f7

Impostazioni predefinite del testo del titolo

Continua modificando le impostazioni del testo del titolo.

• Carattere del titolo: Source Sans Pro
• Peso del carattere del titolo: grassetto
• Stile carattere del titolo: maiuscolo

Passa il mouse sulle impostazioni del testo del titolo

Cambia il colore del testo del titolo al passaggio del mouse.

• Colore del testo del titolo: #ffffff

Impostazioni predefinite del corpo del testo

Le prossime sono le impostazioni del testo del corpo.

• Carattere del corpo: Open Sans
• Altezza della linea del corpo: 2em

Impostazioni del testo del corpo al passaggio del mouse

Usa un colore di testo al passaggio del mouse bianco.

• Colore del corpo del testo: #ffffff

Spaziatura

Quindi, vai alle impostazioni di spaziatura e aggiungi alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 50px
• Imbottitura inferiore: 50 px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Ombra casella predefinita

Stiamo usando anche un'ombra di scatola.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: -20px
• Colore ombra: rgba (255,255,255,0.18)

Ombra del riquadro al passaggio del mouse

Cambia il colore dell'ombra al passaggio del mouse.

• Colore ombra: rgba(0,0,0,0.18)

Classe CSS

E per ottenere l'effetto sfocatura, dovremo assegnare una classe CSS al nostro modulo Blurb. Più avanti nel post, useremo questa classe CSS in un po' di codice JQuery.

• Classe CSS: blurb-item

Clona il modulo Blurb due volte 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 colonne rimanenti della riga.

Clona intera riga

Puoi clonare la riga fino a 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 ogni modulo Blurb.

Aggiungi nuova riga

Struttura della colonna

Aggiungi un'altra riga alla sezione utilizzando la seguente struttura di colonne:

Spaziatura

Apri le impostazioni della riga e rimuovi tutto il riempimento superiore e inferiore predefinito. Ciò contribuirà a ridurre lo spazio occupato da questa riga.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi modulo codice alla colonna

Inserisci codice JQuery e CSS

Aggiungi un modulo di 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');

});
});

.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come essere creativo con i moduli Blurb che condividi sul tuo sito web. Più specificamente, ti abbiamo mostrato come evidenziare un modulo Blurb sospeso sfocando gli altri che hai visualizzato. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.