Cum să adăugați suprapuneri de culoare și degrade la fundalurile Divi Parallax și video

Suprapunerile de culoare și de gradient sunt elemente de design excelente care pot capta atenția publicului dvs. și vă pot face conținutul să iasă în evidență. Funcționează excelent cu imaginile de fundal. Adăugați o imagine de fundal într-o secțiune, rând sau coloană, adăugați o suprapunere de culoare sau gradient, apoi plasați conținutul peste acesta. O problemă, totuși, este că suprapunerile de culoare și de gradient nu funcționează în mod implicit cu fundaluri paralele și video în Divi.

În acest tutorial, vă vom arăta cum să adăugați suprapuneri de culoare și gradient pe fundaluri, fie cu o imagine în paralelă, fie cu un videoclip utilizând un plugin terță parte de pe piața noastră. Vom vedea, de asemenea, suprapunerile care lucrează cu separatoare de secțiuni. Acest lucru ar necesita în mod normal cod, dar cu instrumentele potrivite, nu este dificil de implementat de nimeni.

Sa incepem.

Trage cu ochiul

Iată o privire la ceea ce vom construi în acest tutorial.

Creez un aspect cu un fundal de paralaxă într-o secțiune și un fundal video în alta. Fundalul de paralaxă va avea un gradient, iar fundalul video va avea o singură culoare. De asemenea, vom stiliza divizoarele de secțiuni. Folosesc pagina de destinație din Pizzeria Layout Pack pentru că, bine, pizza. Așa arată pe un desktop.

Așa arată același design pe un telefon.

Fundaluri paralele și video standard Divi

Instrumentele standard Divi vă permit să adăugați imagini de fundal și videoclipuri la secțiuni, rânduri și coloane, dar suprapunerile pentru acestea sunt limitate. Pentru imaginile de fundal, puteți adăuga o suprapunere în gradient, dar nu o suprapunere pentru o culoare solidă. Opțiunile pentru videoclip nu includ suprapuneri.

Opțiunile pentru imaginile de fundal includ paralaxă, dar dacă activați paralaxa pentru imaginea de fundal, suprapunerea nu se mai afișează peste imagine. Este dezactivat, chiar dacă l-ați selectat pentru a afișa suprapunerea.

Cum să adăugați suprapuneri de culoare și degrade la fundalurile Divi Parallax și video

Vom adăuga suprapuneri de culoare și gradient la paralaje și fundaluri video folosind un plugin terță parte numit Divi Background Plus. Vom vedea, de asemenea, cum să stilizați separatoarele de secțiuni folosind acest plugin.

Instalați Divi Background Plus

Divi Background Plus este disponibil pe piața Divi. Să vedem cum să începem. Mai întâi, cumpărați și descărcați Divi Background Plus pe computer.

În tabloul de bord WordPress, accesați Plugins și selectați Adăugați un nou . Faceți clic pe Încărcare plugin în partea de sus a ecranului.

Selectați Alegeți fișier , navigați la fișierul comprimat de pe computer, selectați fișierul și faceți clic pe Instalare acum .

După încărcarea fișierului, faceți clic pe Activați pluginul . Nu este necesară nicio altă configurare. Pluginul este acum gata de utilizare.

Un nou modul este adăugat la Divi Builder numit Divi Background Plus. Vom utiliza acest modul pentru a crea suprapuneri de gradient și culoare pentru fundaluri video de paralaxă. Acest plugin și fundalurile din secțiuni sunt tot ce vom avea nevoie pentru acest tutorial.

Adăugați suprapuneri de gradient la fundalul Divi Parallax

Deschideți setările secțiunii unde veți încărca imaginea de fundal. În acest exemplu, folosesc imaginea de fundal cu prima secțiune din pachetul de aspect Pizzeria, dar îl puteți încărca în orice secțiune, rând sau coloană doriți.

Deschideți fila imagine din setările de conținut. Activați Utilizarea efectului paralax . Folosesc True Parallax, care este setarea implicită. CSS Parallax funcționează și el.

Activarea efectului de paralaxă dezactivează gradientul, dar setările pentru gradient sunt încă la locul lor. În loc să folosim gradientul în setările secțiunii, vom adăuga gradientul în setările din modulul Divi Background Plus.

Dacă doriți să utilizați același gradient care este deja utilizat pentru această secțiune (ca și eu sunt), selectați fila Gradient și faceți clic dreapta undeva pe gradient. Faceți clic pe Copiați culorile gradientului de fundal .

Selectați pentru a adăuga un nou modul la secțiunea cu imaginea de fundal și alegeți Divi Background Plus .

În setările Aspect din fila Conținut, alegeți să aplicați setările secțiunii, rândului sau coloanei. Selectez secțiunea .

Deschideți setările de fundal și selectați fila Gradient. Gradientul implicit este aplicat automat. Puteți ajusta opacitatea astfel încât fundalul dvs. să se afișeze, să creați propriul gradient sau să îl utilizați pe cel din aspect.

Pentru a-l utiliza pe cel din aspect, faceți clic dreapta și selectați Lipiți culorile gradientului de fundal . Aceasta nu va aplica doar culorile, ci și setările pentru tipul de gradient, direcția, poziția de început, poziția finală și plasarea gradientului deasupra imaginii de fundal.

Iată rezultatul. Acum am o versiune a originalului care include aceeași imagine și suprapunere, dar acum afișează fundalul în paralela adevărată.

Iată cum arată același aspect pe un telefon.

Adăugați suprapunere de culori la fundalul video Divi

Adăugați o nouă secțiune obișnuită sub prima secțiune. Vom adăuga videoclipul de fundal la această secțiune, un modul Divi Background Plus pentru suprapunere și vom adăuga module de text pentru a afișa mesaje, informații de contact și un CTA în suprapunere.

Plănuiesc să folosesc textul din secțiunea îndemn. Acest lucru este ușor de făcut cu instrumentele Divi's Layer. Pentru a face acest lucru, faceți clic dreapta pe secțiunea pe care doriți să o copiați și selectați Go To Layer .

Faceți clic dreapta pe rândurile pe care doriți să le copiați și selectați Copiere rând .

Apoi, selectați secțiunea în care doriți să plasați rândul, faceți clic dreapta și selectați Lipire rând . Fac asta pentru ambele rânduri pe care vreau să le copiez din această secțiune. Alternativ, aș fi putut să copiez această secțiune și să-i adăug modulul Divi Background Plus.

Acum am o nouă secțiune cu Divi Background Plus, mai multe module de text și un CTA.

Apoi, adăugați videoclipul pe fundalul secțiunii. Culorile din videoclip funcționează bine cu culorile din text, dar vreau să adaug o suprapunere pentru a le face să iasă puțin mai mult în evidență. Pentru videoclipul meu de fundal, folosesc videoclipul gratuit Tima Miroshnichenko's Mixt Toppings Over a Pizza from Pexels.

Deschideți setările Divi Background Plus și alegeți Secțiune pentru aspect.

Derulați în jos până la fila Fundal și selectați opțiunea de culoare. Desigur, culorile dvs. vor fi diferite în funcție de videoclip. Am vrut să dau videoclipului o nuanță roșie. Am folosit:

• rgba (150,0,0,0,15)

Iată cum arată videoclipul de fundal cu suprapunerea mea roșie pe un desktop.

Iată același aspect pe un telefon.

Pentru câteva alte exemple, iată-l cu fundalul violet standard cu o opacitate de 30%.

Aceasta este portocala standard cu o opacitate de 80%.

Stilizați divizorul de secțiune

Suprapunerile funcționează și cu separatoare de secțiuni. Pentru a adăuga un divizor de secțiune, deschideți setările secțiunii.

Mergeți la fila Proiectare, selectați Separatoare și alegeți Sus sau Jos , în funcție de locul în care doriți să adăugați un separator. Adăug un separator doar în partea de jos. Faceți clic pe caseta derulantă denumită Stil divizor pentru a alege divizorul dvs.

Alegeți stilul divizor dorit. Selectez al cincilea stil, care creează un unghi cu două culori.

Selectați pictograma de editare pentru a adăuga o culoare personalizată. Aceasta este culoarea care apare în acea secțiune în care divizorul nu apare. Culoarea implicită este alb, așa cum puteți vedea în exemplul anterior. Adăugați culoarea ca cod hexagonal sau alegeți culoarea din selectorul de culori. Adăug culoarea # 0d0d0d, care este una dintre culorile din secțiunea de sub videoclip.

• Culoare # 0d0d0d

Videoclipul are acum un divizor stilizat pentru partea de jos a acelei secțiuni. Puteți vedea videoclipul care se prezintă prin părțile transparente ale divizorului și se combină bine cu ambele secțiuni.

Rezultat

Să aruncăm o privire asupra aspectului aspectului pe desktop și pe mobil.

Iată o privire la versiunea desktop. Are un fundal de paralaxă adevărat, cu o suprapunere de gradient în prima secțiune. A doua secțiune include o imagine de fundal cu o suprapunere de culori și un divizor de secțiune care o separă de secțiunea următoare.

Iată cum arată aspectul pe un telefon. Toate elementele funcționează bine pe dispozitivele mobile.

Gânduri de sfârșit

Acesta este aspectul nostru despre cum să adăugăm suprapuneri de culoare și gradient la paralela Divi și fundalurile video. Divi Background Plus le face ușor de construit și de utilizat. Funcționează cu secțiuni, rânduri și coloane și este ușor de ales între ele. Toate personalizările sunt instrumente și setări standard Divi, deci sunt familiare.

Acum fundalurile dvs. pot include suprapuneri de culoare și de gradient fără a fi nevoie să dezactivați paralaxa și videoclipurile!

Vrem sa auzim de la tine. Ați creat suprapuneri de culoare și de gradient pentru imaginile și videoclipurile dvs. de paralaxă cu Divi Background Plus? Spuneți-ne ce părere aveți despre asta în comentarii.

Imagine prezentată prin Lauritta / shutterstock.com