Cum se utilizează intrările CSS personalizate încorporate ale Divi pentru editare avansată receptivă

Divi are o editare de design receptivă încorporată, care face extrem de ușor să ajustați stilul site-ului dvs. web pe desktop, tabletă sau telefon (fără să știți CSS). O parte din editarea receptivă integrată a lui Divi include o metodă simplificată pentru a face modificări mai avansate ale designului receptiv utilizând CSS personalizat. Acest lucru este mult mai convenabil decât să vă bazați pe o foaie de stil externă cu interogări media. Puteți face chiar ajustări vizuale CSS în timp real pentru fiecare dintre afișajele dispozitivului, scoțând o mare parte din presupuneri din designul receptiv.

În acest tutorial, vă voi arăta cum să efectuați modificări de proiectare adaptabile, folosind CSS personalizat, astfel încât să puteți efectua retușe de proiectare avansate care ar putea să nu fie disponibile în opțiunile de proiectare încorporate ale Divi.

Să începem.

Punctele de întrerupere încorporate ale Divi pentru editarea receptivă

Divi are trei puncte de întrerupere responsive generale (puncte în care designul se modifică în funcție de lățimea browserului) care sunt încorporate în setările oricărui element din Divi Builder. Aceste trei puncte de întrerupere sunt menite în primul rând să faciliteze setările specifice de proiectare pentru afișajele de pe desktop, tabletă și telefon.

Cele trei puncte de întrerupere responsive principale ale Divi pentru afișajele desktop, tabletă și telefon sunt următoarele:

• Desktop: 981 px și mai mult
• Tabletă: între 980px și 768px
• Mobil: 767 px și mai puțin

Aceste trei puncte de întrerupere sunt aceleași prin intermediul tuturor filelor de proiectare receptive din întregul constructor Divi, nu doar pentru CSS personalizate avansate. Așadar, de fiecare dată când implementați filele de proiectare receptive, orice stil realizat sub acele file va fi afișat în intervalul celor trei puncte de întrerupere responsive principale.

De asemenea, merită menționat faptul că aceste puncte de întrerupere generale pentru afișajele dispozitivelor nu sunt singurele puncte de întrerupere care sunt încorporate în structura temei Divi. Puteți afla despre cele din articolul nostru despre identificarea punctelor de întrerupere receptive ale Divi.

Înțelegerea casetelor de intrare CSS personalizate ale Divi

Când personalizați un element (secțiune, rând sau modul) în cadrul constructorului Divi, fiecare opțiune de proiectare corespunde (sau vizează) o parte specifică a acelui element. De exemplu, atunci când editați un modul text, puteți viza orice parte a acelui modul folosind setările încorporate (de exemplu, Font Heading 2, Left Padding, etc ...).

În mod similar, atunci când personalizați un element Divi (secțiune, rând sau modul) folosind casetele avansate de intrare CSS personalizate, fiecare casetă de intrare va corespunde (sau vizează) întregul sau anumite părți ale acelui element Divi. Numărul de casete CSS personalizate disponibile va diferi în funcție de elementul pe care îl creați. Un modul text poate avea doar trei casete personalizate de introducere a elementelor CSS (înainte, principal și după), dar un modul de apel la acțiune va avea casete suplimentare pentru titlu, descriere și buton. Acest lucru se datorează faptului că modulul are mai multe părți care pot fi vizate în cadrul acelui element de modul.

Iată o ilustrare a diferitelor casete de intrare CSS personalizate disponibile pentru modulul Apel la acțiune.

Fiecare casetă de intrare CSS personalizată vizează o anumită clasă CSS din element. Pentru a vedea clasa vizată pentru un anumit element, pur și simplu treceți cursorul deasupra elementului și faceți clic pe pictograma semnului întrebării. Acolo veți vedea clasa CSS fiind vizată.

Prin urmare, nu este nevoie să adăugați o clasă CSS la fragmentul CSS din caseta de introducere. Dacă da, codul nu va funcționa.

În schimb, pur și simplu adăugați proprietățile CSS direct în caseta pe care doriți să o aplicați clasei deja vizate.

Cum să adăugați CSS personalizat la punctele de întrerupere ale designului receptiv

Pentru a accesa cele trei puncte de întrerupere ale proiectării responsive principale pentru oricare dintre casetele de intrare CSS, pur și simplu treceți cu mouse-ul peste element și faceți clic pe pictograma tabletei. Apoi, veți vedea cele trei file de design responsive.

Acum, tot ce trebuie să faceți este să utilizați filele pentru a adăuga CSS la oricare dintre cele trei afișaje ale dispozitivului (desktop, tabletă și telefon).

De exemplu, să presupunem că doriți să aveți butonul promoțional pentru un apel la acțiune care să se întindă pe întreaga lățime a modulului de pe tabletă și telefon, dar nu și pe desktop. Ați selecta fila tabletei sub caseta de introducere a butonului Promo și ați adăuga „display: block;”.

Observați că atunci când selectați fila tabletei, modul de vizualizare Divi Builder trece la modul de vizualizare tabletă (o lățime de 768 pixeli) pentru a vedea mai bine cum va arăta designul dvs. în timp real.

Dispozitivul mai mic Moștenește implicit CSS-ul dispozitivelor mai mari

În mod implicit, codul care se aplică la fila tabletei va fi, de asemenea, moștenit de afișajul telefonului. Pentru a ne reaminti acest lucru, Divi adaugă codul substituent gri în caseta de introducere cu același cod care a fost adăugat pe ecranul tabletei.

Motivul pentru care afișajul telefonului moștenește afișajul tabletei se datorează faptului că punctul de întrerupere real (interogarea media) pentru afișajul tabletei de pe backend este setat la „lățime maximă: 980 px;” ceea ce înseamnă că codul adăugat pe tabletă va fi aplicat și telefonului, deoarece ecranul telefonului are o lățime mai mică de 980 px. Deci, dacă doriți să aplicați un stil diferit telefonului, va trebui să adăugați cod suplimentar în caseta de introducere a filei telefonului.

NOTĂ: Dacă adăugați și CSS personalizat pe ecranul telefonului, Divi va schimba inteligent interogarea media pentru tabletă pe backend la intervalul mai precis între 768px și 980px (sau lățimea maximă: 980px și lățimea minimă: 768px).

Ce se aplică CSS personalizat pe backend

Să presupunem că adăugăm CSS personalizat la toate cele trei file receptive (desktop, tabletă și telefon).

Pe desktop, poziționăm butonul din dreapta jos al modulului.

Pe tabletă, înlocuim codul desktopului și pur și simplu extindem butonul pe toată lățimea modulului.

Pe telefon, înlocuim tableta CSS și redăm ecranul la normal.

Dacă inspectăm CSS pe backend, puteți vedea că Divi organizează codul cu următoarele interogări media, astfel încât să nu trebuie:

Desktop:

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

Comprimat:

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

Telefon

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

Cum este stocat CSS în Divi?

Ca parte a optimizărilor încorporate ale vitezei Divi, toate stilurile din Divi Builder (inclusiv CSS personalizat) vor fi combinate, minimizate și stocate ca un fișier CSS static pentru încărcarea mai rapidă a paginii. Deci, dacă doriți să ocoliți nevoia de a adăuga CSS personalizat printr-o temă copil, puteți profita de intrările CSS receptive încorporate fără a fi nevoie să vă faceți griji cu privire la încetinirea site-ului dvs.

Pentru mai multe informații, consultați postarea noastră despre cum să accelerați site-ul dvs. Divi.

Gânduri finale

Sperăm că această postare vă va ajuta să înțelegeți un pic mai bine cum să profitați de casetele de intrare CSS personalizate încorporate ale Divi pentru a face schimbări convenabile de design receptiv la site-ul dvs. web.

Pentru majoritatea oamenilor, nu va fi nevoie să vă aventurați în fila avansată pentru a adăuga CSS personalizat la design. Divi are atât de multe opțiuni încorporate încât chiar și utilizatorii avansați vor găsi rareori nevoia de a utiliza CSS personalizat. Cu toate acestea, dacă vine momentul în care aveți nevoie de un stil avansat, vă ajută să știți cât de ușor este de făcut în Divi.

Care a fost experiența dvs. cu intrările CSS personalizate ale Divi?