Vrei să știi cum să pui un modul Blurb din Divi evidențiate în timp ce le estompează pe altele?
Oricare ar fi tipul de site-ul web construiți, sunt șanse ca la un moment dat să doriți să vedeți o listă cu diferite servicii, etape și multe altele.
Una dintre cele mai ușoare moduri de a aborda crearea unei astfel de liste într-un mod atractiv este să utilizați modulul Blurb de la Divi. Modulele Blurb vă permit să structurați frumos cuprins din listă, oferindu-vă în același timp posibilități de design nesfârșite.
În acest tutorial, vom face un pas mai departe și vă vom arăta cum să evidențiați un modul Blurb la trecerea cu mouse-ul și să estompați pe celelalte pe care le-ați afișat. Este o modalitate excelentă de a sublinia câte un modul Blurb la un moment dat, fără a lăsa alte module Blurb să distragă atenția cititorului.
Să mergem.
studiu
Înainte de a explora acest tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.
Calculator desktop
Versiune mobila
Să începem să proiectăm cu Divi
Adăugați o secțiune nouă
Culoare de fundal
Începeți prin a adăuga o secțiune obișnuită la o pagină nouă sau la cea la care lucrați.
De asemenea, puteți consulta: Divi: Cum să creați o secțiune pentru membrii echipei ca un carusel
Deschideți setările secțiunii și schimbați culoarea de fundal.
- Fundal: #eaeaea
spațiere
De asemenea, adăugați valori de spațiere.
- Marja (sus, jos, stânga și dreapta): 2vw
- Umplutură (sus și jos): 0px
Frontieră
Completați setările secțiunii adăugând o rază de chenar.
- Colțuri rotunjite: 20px
Adăugați o linie nouă
Structura coloanei
Continuați adăugând un nou rând la secțiune folosind următoarea structură de coloane:
dimensionarea
Fără a adăuga încă module, deschideți setările liniei și modificați setările de dimensionare.
- Egalizare înălțimi coloane: DA
- Latime: 90%
- Lățimea maximă: 1 px
- Înălțime minimă: 500 px (desktop), automat (tabletă și telefon)
CSS personalizat (element principal)
Aliniați cuprins a coloanei prin adăugarea unei singure linii de cod CSS la elementul principal al rândului.
align-items: center;
Adăugați modulul Blurb la coloana 1
Adăugați conținut
Singurul modul pe care îl folosim în acest tutorial este un modul Blurb.
Cu toate acestea, 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 următorii pași.
Adăugați primul modul Blurb la coloana 1 și introduceți cuprins de votre choix.
Selectați pictograma
Apoi selectați o pictogramă.
- Utilizați pictograma: DA
- Pictogramă: vezi captura de ecran
Gradient de fundal (Hover)
Apoi utilizați un gradient de fundal numai la trecerea cursorului.
- Se oprește gradient
- 20%: #ffffff
- 80%: #0f1bff
- Tip de gradient: Linear
Setări pictograme (desktop)
Comutați la filă Amenajări a modulului și modificați setările pictogramei după cum urmează:
- Culoare pictogramă: #ffffff
- Imagine/pictogramă Colțuri rotunjite: 50px
- Lățimea chenarului imaginii/pictogramei: 5px
- Culoare chenar: #ffffff
- Plasarea imaginii/pictogramei: Sus
- Aliniere imagine/pictogramă: stânga
Setările pictogramei treceți cu mouse-ul
Schimbați diferitele culori ale pictogramei la trecerea cursorului.
- Culoare pictogramă (Hover): #0f1bff
- Culoare de fundal imagine/pictogramă (Hover): #f7f7f7
Setări text de titlu
Continuați prin modificarea setărilor pentru textul titlului.
- Font titlu: Source Sans Pro
- Greutatea fontului: aldine
- Stilul fontului titlului: TT (majuscule)
Treceți cursorul pe setările textului titlului
Schimbați culoarea textului titlului la trecerea cursorului.
- Culoare text titlu: #ffffff
Setări text de descriere (desktop)
Urmează setările pentru textul corpului.
- Font pentru corp: Open Sans
- Înălțimea liniei corpului: 2 em
Setări pentru textul de descriere
Folosiți o culoare de text la trecerea cursorului.
- Culoarea textului corpului (Hover): #ffffff
spațiere
Apoi, accesați setările de spațiere și adăugați valori personalizate de umplutură.
- Umplutură (sus, jos, stânga și dreapta): 50px
Box Shadow (Desktop)
De asemenea, folosim o umbră cutie.
- Intensitatea estomparii umbrei casetei: 80px
- Intensitatea răspândirii umbrei casetei: -20px
- Culoare umbră: rgba(255,255,255,0.18)
Box Shadow (Hover)
Schimbați culoarea umbrei hover.
- Culoare umbră: rgba(0,0,0,0.18)
CSS
Și pentru ca efectul de estompare să aibă loc, va trebui să atribuim o clasă CSS modulului nostru Blurb. Mai târziu în articol, vom folosi această clasă CSS în codul JQuery.
- Clasa CSS: element-blurb
Clonează modulul Blurb de două ori și plasează duplicatele în coloanele rămase
După ce completați modulul Blurb din coloana 1, îl puteți clona de două ori și plasați duplicatele în coloanele rămase ale rândului.
Clonează î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 o linie 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 liniei și eliminați toate umpluturile de sus și de jos în mod implicit. Acest lucru va ajuta la reducerea spațiului ocupat de acest rând.
- Umplutură (sus și jos): 0px
Adăugați modulul Cod la coloană
Introduceți codul JQuery și CSS
Adăugați un modul Cod în coloana rândului și introduceți niște cod JQuery și CSS pentru a face efectul.
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');
});
});Citiți și: Divi: Cum să creați o secțiune de Mărturii sub forma unei grile
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
studiu
Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.
Calculator desktop
Versiune mobila
Descărcați DIVI acum!!!
Concluzie
În acest articol, v-am arătat cum să fiți creativ cu modulele Blurb pe care le partajați site-ul web.
Mai exact, v-am arătat cum să evidențiați un modul Blurb la trecerea cursorului prin estomparea celorlalți pe care le-ați afișat.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte. Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.
Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
