Cum să evidențiați un modul de blocare planat prin estomparea celorlalți cu Divi

Indiferent de tipul de site web pe care îl construiți, sunt mari șanse ca, la un moment dat, să doriți să afișați o listă cu diferite servicii, pași și multe altele. Una dintre cele mai simple modalități de abordare atractivă pentru crearea unei astfel de liste este utilizarea modulului Blurb al lui Divi. Modulele Blurb vă permit să structurați frumos conținutul listei, oferindu-vă în același timp posibilități de design nesfârșite.

În tutorialul de astăzi, vom face un pas mai departe și vă vom arăta cum să evidențiați un modul Blurb plutit prin estomparea celorlalte pe care le-ați afișat. Acesta este un mod excelent de a pune accentul pe un modul Blurb la un moment dat, fără a permite celorlalte module Blurb să distragă atenția cititorului. De îndată ce un vizitator trece la un alt modul Blurb, acesta devine în schimb cel evidențiat. Veți putea descărca gratuit fișierul JSON al machetei!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați GRATUIT aspectul modulului Hurbed Blurb

Pentru a pune mâna pe aspectul gratuit al modulului de blurb planat, va trebui mai întâi să-l descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Să începem să recreăm!

Adăugați o secțiune nouă

Culoare de fundal

Începeți prin adăugarea unei secțiuni obișnuite pe o pagină nouă sau pe cea la care lucrați. Deschideți setările secțiunii și schimbați culoarea de fundal.

• Fundal Coor: #eaeaea

Spațiere

Adăugați și câteva valori de marjă și umplere personalizate.

• Marja superioară: 2vw
• Marja inferioară: 2vw
• Marja stângă: 2vw
• Marja dreaptă: 2vw
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Frontieră

Completați setările secțiunii adăugând o rază de margine.

• Toate colțurile: 20 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare. Activarea opțiunii „Egalizați înălțimile coloanei” va ajuta la următorul pas care aliniază conținutul coloanei.

• Egalizați înălțimile coloanei: Da
• Lățime: 90%
• Lățime maximă: 1580 px
• Înălțime minimă: 500 px (desktop), automată (tabletă și telefon)

Elementul principal

Aliniați conținutul coloanei adăugând o singură linie de cod CSS la elementul principal al rândului.

align-items: center;

Adăugați Blurb Module la coloana 1

Adauga continut

Singurul modul pe care îl folosim în acest tutorial este un modul Blurb, dar puteți înlocui acest modul cu orice modul la alegere, atâta timp cât adăugați clasa CSS pe care o vom împărtăși în pașii următori. Adăugați primul modul Blurb în coloana 1 și introduceți un conținut la alegere.

Selectați pictograma

Selectați o pictogramă în continuare.

Plasați cursorul pe fundalul gradientului

Apoi, utilizați un fundal de gradient numai la cursor.

• Culoare 1: #ffffff
• Culoare 2: # 0f1bff
• Tipul gradientului: liniar
• Poziția inițială: 20%
• Poziție finală: 20%

Setări implicite pentru pictograme

Treceți la fila de proiectare a modulului și modificați setările pictogramei după cum urmează:

• Culoare pictogramă: #ffffff
• Pictogramă cerc: Da
• Culoarea cercului: #ffffff
• Plasare imagine / pictogramă: sus
• Aliniere imagine / pictogramă: stânga

Plasați cursorul pe setările pictogramei

Schimbați diferitele culori ale pictogramei la cursor.

• Culoare pictogramă: # 0f1bff
• Culoarea cercului: # f7f7f7

Setări implicite pentru textul titlului

Continuați modificând setările pentru textul titlului.

• Titlu Font: Source Sans Pro
• Greutatea fontului titlului: Bold
• Stilul fontului titlului: majuscule

Plasați cursorul pe setările pentru textul titlului

Schimbați culoarea textului titlului la cursor.

• Culoarea textului titlului: #ffffff

Setări implicite pentru textul corpului

Următoarele sunt setările pentru textul corpului.

• Font corp: Open Sans
• Înălțimea liniei corpului: 2em

Plasați cursorul pe Setările textului corpului

Folosiți o culoare albă a textului.

• Culoarea textului corpului: #ffffff

Spațiere

Apoi, accesați setările de spațiere și adăugați câteva valori de umplere personalizate.

• Căptușeală superioară: 50 px
• Căptușeală inferioară: 50 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Default Box Shadow

Folosim și o umbră de cutie.

• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -20px
• Culoare umbră: rgba (255,255,255,0,18)

Hover Box Shadow

Schimbați culoarea umbrei la cursor.

• Culoare umbră: rgba (0,0,0,0.18)

Clasa CSS

Și pentru a face efectul de estompare, va trebui să atribuim o clasă CSS modulului nostru Blurb. Mai târziu, vom folosi această clasă CSS într-un cod JQuery.

• Clasa CSS: blurb-item

Clonați modulul Blurb de două ori și plasați duplicatele în coloanele rămase

După ce ați completat modulul Blurb din coloana 1, îl puteți clona de două ori și plasa duplicatele în coloanele rămase ale rândului.

Clonați întregul rând

Puteți clona rândul de câte ori doriți, în funcție de câte module Blurb doriți să afișați pe pagina dvs.

Personalizați modulele Blurb individual

Desigur, va trebui să modificați conținutul individual al fiecărui modul Blurb.

Adăugați un rând nou

Structura coloanei

Adăugați un alt rând la secțiune folosind următoarea structură de coloane:

Spațiere

Deschideți setările rândului și eliminați toate umpluturile implicite de sus și de jos. Acest lucru va ajuta la reducerea spațiului pe care îl ocupă acest rând.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un modul de cod în coloană

Introduceți codul JQuery și CSS

Adăugați un modul de cod în coloana rândului și introduceți câteva coduri JQuery și CSS pentru ca efectul să se întâmple. Nu uitați să puneți codul JQuery între etichetele de script și codul CSS între etichetele de stil așa cum puteți vedea în ecranul de imprimare de mai jos.

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);
}

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, ți-am arătat cum să devii creativ cu modulele Blurb pe care le distribui pe site-ul tău. Mai exact, v-am arătat cum să evidențiați un modul Blurb plutit prin estomparea celorlalte pe care le-ați afișat. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.