Želite znati kako staviti Blurb modul iz Divi istaknuti dok su drugi zamagljeni?
Bez obzira na vrstu web stranica gradite, velike su šanse da ćete u nekom trenutku poželjeti vidjeti popis različitih usluga, faza i više.
Jedan od najjednostavnijih načina da pristupite izradi takvog popisa na atraktivan način je korištenje modula Blurb iz Divi. Blurb moduli omogućuju vam lijepo strukturiranje sadržaj s popisa dajući vam beskrajne mogućnosti dizajna.
U ovom ćemo vodiču otići korak dalje i pokazati vam kako istaknuti Blurb modul dok lebdite i zamutiti ostale koje ste prikazali. To je sjajan način za naglašavanje jednog po jednog Blurb modula, bez dopuštanja da drugi Blurb moduli odvlače pozornost čitatelja.
Idemo.
pregled
Prije nego što se upustimo u ovaj vodič, pogledajmo na brzinu rezultate na različitim veličinama zaslona.
Stolno računalo
Mobilna verzija
Počnimo dizajnirati s Divi
Dodajte novi odjeljak
Boja pozadine
Započnite dodavanjem uobičajenog odjeljka na novu stranicu ili onu na kojoj radite.
Također se možete konzultirati: Divi: Kako stvoriti odjeljak za članove tima kao vrtuljak
Otvorite postavke odjeljka i promijenite boju pozadine.
- Pozadina: #eaeaea
Razmještanje
Također dodajte vrijednosti razmaka.
- Margina (gornja, donja, lijeva i desna): 2vw
- Razmak (gornji i donji dio): 0 px
Granica
Dovršite parametre odjeljka dodavanjem radijusa granice.
- Zaobljeni uglovi: 20 px
Dodajte novi redak
Struktura stupca
Nastavite dodavanjem novog retka u odjeljak pomoću sljedeće strukture stupaca:
dimenzioniranje
Bez dodavanja modula, otvorite postavke linije i promijenite postavke veličine.
- Izjednačavanje visine stupaca: DA
- Širina: 90%
- Maksimalna širina: 1 px
- Min. visina: 500 px (stolno računalo), automatski (tablet i telefon)
Prilagođeni CSS (glavni element)
Poravnajte sadržaj stupca dodavanjem jednog retka CSS koda u glavni element retka.
align-items: center;
Dodajte modul Blurb u stupac 1
Dodajte sadržaj
Jedini modul koji koristimo u ovom vodiču je Blurb modul.
Međutim, ovaj modul možete zamijeniti bilo kojim modulom po svom izboru sve dok dodate CSS klasu koju ćemo podijeliti u sljedećim koracima.
Dodajte prvi modul Blurb u stupac 1 i umetnite sadržaj po vašem izboru.
Odaberite ikonu
Zatim odaberite ikonu.
- Koristi ikonu: DA
- Ikona: Pogledajte snimak zaslona
Pozadinski gradijent (prelazak)
Zatim koristite pozadinski gradijent samo dok lebdite.
- Gradijent zaustavljanja
- 20%: #ffffff
- 80%: #0f1bff
- Vrsta gradijenta: linearni
Postavke ikone (radna površina)
Prijeđite na karticu dizajn modula i promijenite postavke ikone na sljedeći način:
- Boja ikone: #ffffff
- Zaobljeni uglovi slike/ikone: 50 px
- Širina obruba slike/ikone: 5 px
- Boja obruba: #ffffff
- Položaj slike/ikone: Vrh
- Poravnanje slike/ikone: lijevo
Postavke ikone lebdenja
Promijenite različite boje ikona dok lebdite.
- Boja ikone (prelazak pokazivačem): #0f1bff
- Boja pozadine slike/ikone (lebdeći): #f7f7f7
Postavke teksta naslova
Nastavite mijenjanjem postavki teksta naslova.
- Font naslova: Source Sans Pro
- Težina fonta: Podebljano
- Stil fonta naslova: TT (velika slova)
Postavke teksta naslova pri lebdenju
Promjena boje teksta naslova pri lebdenju.
- Boja teksta naslova: #ffffff
Postavke teksta opisa (stolno računalo)
Sljedeće su postavke teksta tijela.
- Font tijela: Open Sans
- Visina linije tijela: 2 em
Postavke teksta opisa pri lebdenju
Koristite boju teksta pri lebdenju.
- Boja teksta (prelazak pokazivačem): #ffffff
Razmještanje
Zatim idite na postavke razmaka i dodajte prilagođene vrijednosti ispune.
- Razmak (gore, dno, lijevo i desno): 50 px
Box Shadow (stolno računalo)
Također koristimo kutijastu sjenu.
- Snaga zamućenja sjene okvira: 80px
- Snaga širenja sjene okvira: -20px
- Boja sjene: rgba(255,255,255,0.18)
Sjena okvira (lebdeći)
Promijenite boju sjene lebdenja.
- Boja sjene: rgba(0,0,0,0.18)
CSS klasa
A da bi se postigao efekt zamućenja, morat ćemo dodijeliti CSS klasu našem Blurb modulu. Kasnije u članku koristit ćemo ovu CSS klasu u JQuery kodu.
- CSS klasa: blurb-item
Dvaput klonirajte Blurb modul i smjestite duplikate u preostale stupce
Nakon što dovršite Blurb modul u stupcu 1, možete ga dvaput klonirati i smjestiti duplikate u preostale stupce retka.
Klonirajte cijeli red
Možete klonirati red koliko god puta želite, ovisno o tome koliko Blurb modula želite prikazati na svojoj stranici.
Prilagodite Blurb module pojedinačno
Naravno, morat ćete izmijeniti pojedinačni sadržaj svakog Blurb modula.
Dodajte novi redak
Struktura stupca
Dodajte drugi redak odjeljku koristeći sljedeću strukturu stupaca:
Razmještanje
Otvorite postavke linije i prema zadanim postavkama uklonite sva gornja i donja ispuna. To će pomoći smanjiti prostor koji zauzima ovaj red.
- Razmak (gornji i donji dio): 0 px
Dodajte modul koda u stupac
Umetnite JQuery i CSS kod
Dodajte modul koda u stupac retka i umetnite malo JQuery i CSS koda kako biste postigli učinak.
Ne zaboravite staviti JQuery kod između oznaka skripte i CSS kod između oznaka stila kao što možete vidjeti na ekranu za ispis u nastavku.
jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
});
});Pročitajte također: Divi: Kako kreirati odjeljak Svjedočanstva u obliku mreže
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
pregled
Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.
Stolno računalo
Mobilna verzija
Preuzmite DIVI odmah!!!
Zaključak
U ovom smo vam članku pokazali kako postati kreativan s Blurb modulima koje dijelite na svom web stranica.
Konkretno, pokazali smo vam kako istaknuti Blurb modul dok lebdite mišem tako što ćete zamutiti ostale koje ste prikazali.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće projekte. Divi. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se također konzultirati naš vodič o Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
