Cum se creează un fundal de imagine Parallax cu o suprapunere de gradient amestecat în Divi
Publicat: 2022-08-03În versiunile anterioare ale Divi, adăugarea unei suprapuneri de gradient la o imagine de fundal paralaxă nu era o opțiune încorporată. Dar, cu noile opțiuni de fundal ale Divi (și Gradient Builder), puteți crea cu ușurință fundaluri paralaxe frumoase cu nenumărate modele de suprapunere cu gradient.
În acest tutorial, vă vom arăta cum să utilizați opțiunile de fundal ale Divi pentru a adăuga o suprapunere de gradient colorată care se îmbină cu o imagine de fundal folosind atât metodele True, cât și CSS Parallax.
Trage cu ochiul
Iată o privire rapidă asupra modelelor de fundal pe care le vom construi în acest tutorial.
Primul are o suprapunere de gradient cu modul de amestec de culori utilizat pe imaginea de fundal folosind metoda True Parallax.
Și aici este același design folosind metoda CSS Parallax. Observați că gradientul rămâne fix/atașat la imaginea de fundal, astfel încât să pară a fi o parte a imaginii reale și nu doar un strat.
Și iată un exemplu de suprapunere de gradient care utilizează opriri de culoare semi-transparente fără un mod de amestecare.
Conceptul
Ideea de bază a acestui design implică doi pași:
1. Creați un gradient de fundal pentru o secțiune folosind generatorul de gradient, asigurându-vă că plasați gradientul deasupra imaginii de fundal.
2. Adăugați o imagine de fundal în aceeași secțiune care utilizează una dintre metodele de paralaxă și modul de amestec de culori.
Acest lucru va permite gradientului colorat să suprapună imaginea paralaxă în timp ce aceasta se mișcă la derularea în jos a paginii. Modul de amestec de culori îmbină suprapunerea cu gradient cu imaginea pentru o imagine frumoasă, care arată grozav cu paralaxă.
Descărcați aspectul GRATUIT
Pentru a pune mâna pe modelele din acest tutorial, mai întâi va trebui să îl descărcați folosind butonul de mai jos. A dobândi
acces la descărcare va trebui să vă abonați la lista noastră de e-mail Divi Daily utilizând formularul de mai jos. Ca nou
abonat, vei primi și mai multă bunătate Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă ești deja pe
listă, pur și simplu introduceți adresa dvs. de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „reabonat” și nu veți primi e-mailuri suplimentare.
Descarcă gratis
Alăturați-vă buletinului informativ Divi și vă vom trimite prin e-mail o copie a pachetului Divi Landing Page Layout, plus o mulțime de alte resurse, sfaturi și trucuri Divi uimitoare și gratuite. Urmăriți-vă și veți deveni un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, introduceți adresa de e-mail mai jos și faceți clic pe descărcare pentru a accesa pachetul de layout.
Te-ai abonat cu succes. Vă rugăm să vă verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele săptămânale gratuite de layout Divi!
Pentru a importa aspectul secțiunii în Biblioteca Divi, procedați în felul următor:
- Navigați la Biblioteca Divi.
- Faceți clic pe butonul Import din partea de sus a paginii.
- În fereastra pop-up de portabilitate, selectați fila de import
- Alegeți fișierul de descărcare de pe computer (asigurați-vă că dezarhivați mai întâi fișierul și utilizați fișierul JSON).
- Apoi faceți clic pe butonul de import.
Odată terminat, aspectul secțiunii va fi disponibil în Divi Builder.
Să trecem la tutorial, da?
De ce aveți nevoie pentru a începe
Pentru a începe, va trebui să faceți următoarele:
- Dacă nu ați făcut-o încă, instalați și activați Tema Divi.
- Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina pe front-end (generator vizual).
- Alegeți opțiunea „Construiți de la zero”.
- Acum aveți o pânză goală pentru a începe să proiectați în Divi!
Cum se creează un fundal de imagine Parallax cu o suprapunere de gradient amestecat în Divi
1. Creați rândul de completare și textul titlului
Deși ne vom concentra pe designul de fundal al secțiunii pentru acest tutorial, este logic să adăugați un rând de completare și un titlu pentru a obține o imagine mai bună despre cum va arăta designul într-un caz normal de utilizare.
Pentru a începe lucrurile, adăugați un rând cu o singură coloană la secțiunea existentă în generator.
Apoi, adăugați un modul text la rând/coloană.
Setări text
Deschideți setările pentru modulul de text. Sub fila Conținut, adăugați un titlu H2 la conținutul corpului.
<h2>Say Hello to Divi</h2>
Sub, fila Design, actualizați opțiunile de titlu și lățimea maximă după cum urmează:
- Titlul 2 Font: Inter
- Greutatea fontului titlul 2: aldine
- Culoare text titlul 2: #fff
- Titlul 2 Dimensiunea textului: 8vw
- Titlul 2 Înălțimea liniei: 1,2 em
- Titlul 2 Text Shadow: vezi captura de ecran
- Titlul 2 Intensitatea estomparii umbrei textului: 0,28 em
- Culoare umbra textului titlului 2: #10076d
- Latime maxima: 50%
Setări rând
Acum că titlul este la locul său, să actualizăm dimensiunea rândurilor și spațierea pentru a le face mai receptive.
Deschideți setările rândului. Sub fila Design, actualizați următoarele:
- Latime: 100%
- Latime maxima: 80vw
- Captuseala: 15vw de sus, 15vw de jos
2. Proiectați fundalul gradient pentru secțiune
Acum că conținutul de completare este complet, suntem gata să începem să proiectăm fundalul gradient al secțiunii.
Setări pentru gradient de fundal
Deschideți setările pentru secțiune. Sub fila Conținut, selectați fila gradient sub opțiunile de fundal și actualizați opțiunile gradient după cum urmează:
- Oprire gradient 1: #0094ff (la 0%)
- Oprire gradient 2: #ff00c7 (la 25%)
- Oprire gradient 3: #0094ff (la 50%)
- Oprire gradient 4: #ff00c7 (la 75%)
- Oprire gradient 5: #0094ff (la 100%)
- Tip gradient: circular
- Poziție gradient: stânga jos
- Plasați gradient deasupra imaginii de fundal: DA
3. Adăugați o imagine de fundal Parallax cu modul Color Blend
Odată ce designul gradientului este complet, suntem gata să adăugăm imaginea noastră de fundal paralaxă. Apoi vom aplica modul de amestec de culori pentru a amesteca designul gradient cu imaginea de fundal pentru un design frumos de fundal paralax.
Setări imagine de fundal
În timp ce vă aflați în opțiunile de fundal ale secțiunii, selectați fila Imagine de fundal și încărcați o imagine de fundal . Actualizarea urmează:
- Utilizați efectul de paralaxă: DA
- Metoda paralaxei: Paralaxa adevărată
- Amestecare imagini de fundal: Culoare
De ce modul de amestec de culori?
Modul de amestec de culori îmbină o versiune în tonuri de gri a imaginii cu culorile (nuanță și saturație) gradientului. Acest lucru păstrează calitatea vizuală a imaginii cu o schemă de culori complet nouă.
4. Adăugați o mască de fundal (De ce nu?)
Pentru a finaliza designul, să adăugăm o mască de fundal care va sta în spatele titlului nostru pentru a face textul să iasă puțin mai mult și a sublinia efectul de paralaxă.
Setări măști de fundal
În timp ce vă aflați în opțiunile de fundal ale secțiunii, selectați fila Mască de fundal și actualizați următoarele:
- Mască: Lame
- Transformarea măștii: Întoarce orizontală, inversează
- Dimensiune masca: Dimensiune personalizata
- Lățimea măștii: 72vw
- Poziția măștii: Sus dreapta
5. Adăugați un spațiu temporar de derulare pentru testare
Înainte de a verifica rezultatele finale, trebuie să adăugăm puțin spațiu deasupra și sub secțiunea noastră, astfel încât să avem suficient spațiu de defilare pentru a vedea efectul de paralaxă în acțiune. Pentru a face acest lucru, adăugați pur și simplu următoarea marjă la secțiune:
- Marja: 80vh de sus, 80vh de jos
Nu uitați să eliminați această spațiere când adăugați secțiunea în propria pagină.
Rezultate finale
Să aruncăm o privire la rezultatul final pe o pagină live.
Și aici este același design folosind metoda CSS Parallax. Observați că gradientul rămâne fix/atașat la imaginea de fundal, astfel încât să pară a fi o parte a imaginii reale și nu doar un strat.
Utilizarea unei suprapuneri cu gradient fără modul de amestecare
Deși îmi place modul de amestecare pentru acest design, este posibil să simți nevoia unei suprapuneri mai tradiționale cu gradient pentru imaginea de fundal paralaxă.
De exemplu, puteți alege să nu adăugați un mod de amestecare la design și pur și simplu să dați fiecărei opriri de culoare gradient o culoare semi-transparentă. Acest lucru vă va permite să vedeți o reprezentare mai subtilă a imaginii de fundal din spatele suprapunerii cu gradient.
Pentru a face acest lucru, puteți reduce opacitatea fiecărei culori la ceva de genul 72% și apoi puteți seta opțiunea de amestecare a imaginii de fundal înapoi la Normal.
Iată un exemplu despre cum ar arăta.
Încercați mai multe degrade!
Gradient Builder poate crea atât de multe culori și tipuri de gradient pe care le puteți folosi pentru a scoate în evidență aceste modele de fundal stratificate. Puteți consulta demonstrațiile noastre live cu mai multe posibilități de design cu gradient de fundal.
Gânduri finale
Crearea unui design de fundal paralax cu o suprapunere de gradient amestecată se poate face cu ușurință folosind opțiunile de fundal încorporate ale Divi. Îți oferă într-adevăr puterea Photoshop în Divi ca niciodată înainte. Simțiți-vă liber să explorați diferite combinații de culori cu nenumărate opriri și poziții de culoare gradient. În plus, puteți experimenta și diferite moduri de amestecare.
Sperăm că acest lucru va fi util pentru propriul dvs. site web sau pentru următorul dvs. proiect.
Aștept cu nerăbdare vești de la tine în comentarii.
Noroc!