Cum să creați tranziții de secțiune neregulate cu Divi

Una dintre cele mai bune modalități de a spori designul site-ului dvs. web este prin utilizarea tranzițiilor de secțiuni diferite. Într-o postare anterioară, v-am arătat cum puteți face acest lucru folosind numai opțiunile încorporate Divi. Cu toate acestea, dacă doriți să creați ceva puțin mai avansat sau personalizat, puteți crea și tranziții de secțiuni de formă neregulată. Datorită complexității lor, cel mai bun mod de a aborda acest lucru este prin utilizarea imaginilor cu un chenar transparent.

În această postare, vă vom arăta cum puteți face acest lucru. Nu numai că vă vom arăta ce să faceți în cadrul Divi Builder, dar vă vom arăta și cum puteți crea aceste margini transparente pe imagini cu câțiva pași folosind Photoshop.

Exemplu de rezultat

Să aruncăm o privire la un eșantion de aspect cu tranziții uimitoare ale secțiunilor de formă neregulată:

După cum puteți observa, puteți utiliza aceste margini transparente pe întregul site și în diferite secțiuni. Este important să ne amintim că, în funcție de cât de mare este chenarul tău transparent, ar trebui să ai suficient loc în secțiuni pentru a se potrivi diferitelor conținuturi pe care încerci să le partajezi. De asemenea, va crea un echilibru frumos între diferitele secțiuni.

Cum să creați tranziții de secțiune neregulate cu Divi

Abonați-vă la canalul nostru Youtube

Creați chenare transparente cu Photoshop

Puteți obține forme cât de originale doriți cu Photoshop. De asemenea, ați putea opta pentru o alternativă gratuită numită GimpShop. Pentru acest tutorial, vom folosi Photoshop.

Deschideți Photoshop

Începeți prin a deschide Photoshop pe computer.

Deschideți imaginea

După ce ați făcut acest lucru, deschideți imaginea la care doriți să lucrați.

Faceți dublu clic pe Image & Create Layer

Odată ce imaginea dvs. este încărcată în Photoshop, faceți dublu clic pe stratul de imagine și creați un strat nou pentru acesta (Stratul 0).

Adăugați încă un strat

Pentru a adăuga chenarul transparent, veți avea nevoie și de un alt strat, așa că mergeți mai departe și adăugați-l făcând clic pe pictograma pe care am marcat-o în ecranul de imprimare de mai jos. După ce creați stratul (Stratul 1), asigurați-vă că este plasat deasupra stratului care conține imaginea dvs.

Selectați Pensulă și dimensiune

În timp ce aveți stratul 1 activat, continuați și faceți clic pe pictograma pensulei.

Odată ce ați făcut acest lucru, puteți ajusta dimensiunea și modelul care sunt utilizate pentru pensulă la preferințele dvs. Există o mulțime de pensule Photoshop gratuite pe internet, astfel încât, în funcție de tipul de site web pe care îl creați, alegeți unul potrivit. De asemenea, asigurați-vă că opacitatea este setată la 100%.

Începeți să utilizați Pensula pe margini

Odată ce aveți peria în poziție, începeți să o utilizați pe partea în care doriți să fie transparentă. Asigurați-vă că acoperiți întreaga margine cu pensula, astfel încât totul să devină transparent după aceea.

CTRL (Windows) sau Command (Mac) + Selectați noul strat

După ce ați terminat, puteți apăsa CTRL (pentru Windows) sau Comandă (pentru Mac) de pe tastatură și faceți clic pe Stratul 1 în același timp. Veți vedea că Photoshop va selecta tot ceea ce ați adăugat la acel strat, care este, în acest caz, marginea în formă.

Faceți ca noul strat să fie invizibil

Apoi, faceți stratul 1 invizibil scoțând ochiul așa cum este marcat în ecranul de imprimare de mai jos.

Selectați Image & Delete New Layer

Apoi, faceți clic pe stratul care conține imaginea dvs. și apăsați butonul de ștergere de pe tastatură. După ce faceți acest lucru, veți vedea că marginea va deveni transparentă.

Selectați Rectangular Marquee Tool și faceți clic pe imagine

Faceți clic pe instrumentul de marcaj dreptunghiular și apăsați undeva aleatoriu pe imagine.

Salvați imaginea ca PNG

În cele din urmă, va trebui să salvați imaginea ca PNG, astfel încât să o puteți utiliza pe site-ul dvs. web.

Adăugați fundaluri la Divi

Odată ce creați diferitele imagini pe care doriți să le utilizați pe site-ul dvs. Divi (utilizând tehnica Photoshop de mai sus), restul este simplă. Imaginile pe care le-ați creat servesc ca fundal al unei anumite secțiuni. Vă vom arăta cum să construiți secțiunea erou a exemplului nostru, deoarece aceeași metodă se aplică și pentru diferitele secțiuni.

Adăugați o nouă secțiune standard

Adăugați o pagină nouă, comutați la Visual Builder și adăugați o nouă secțiune standard la pagina respectivă.

Încărcați imaginea de fundal

După ce ați plasat toate modulele pe care doriți să le apară în secțiunea erou, puteți continua și adăuga imaginea pe care ați creat-o în partea anterioară a acestui post.

Adăugați o culoare de fundal

După ce ați făcut acest lucru, puteți decide ce culoare va apărea în partea transparentă a imaginii. În acest exemplu, am folosit „#dddddd” ca culoare de fundal. Puteți vedea imediat că culoarea va apărea chiar în partea transparentă a imaginii.

Asigurați-vă că există suficientă căptușeală

În funcție de numărul de module și de dimensiunea chenarului transparent pe care l-ați folosit în secțiunea erou, ar putea fi necesar să adăugați niște umpluturi personalizate. Jucați-vă cu diferitele valori de umplere a secțiunii și vedeți care dintre acestea vă oferă cel mai bun rezultat.

Adăugați aceeași culoare de fundal la secțiunea următoare

Pentru a vă asigura că diferitele secțiuni se îmbină bine unele cu altele, utilizați aceeași culoare de fundal pe care ați folosit-o în secțiunea erou în secțiunea următoare. Asta nu înseamnă neapărat că trebuie să utilizați o culoare de fundal cu o singură culoare pentru următoarea secțiune, puteți utiliza un fundal degradat, atât timp cât culorile ambelor secțiuni se amestecă frumos.

Exemplu

După cum sa menționat anterior, puteți crea oricâte margini de imagine doriți și le puteți utiliza într-un mod creativ pe tot site-ul dvs. web. Pentru a vă face o probă, am creat următorul exemplu de previzualizare:

Gânduri finale

În această postare, v-am arătat cum puteți utiliza cu ușurință tranzițiile secțiunilor de formă neregulată. Prin utilizarea acestei metode, puteți crea practic orice tip de tranziție de secțiune doriți. În afară de a vă arăta cum să creați aceste forme neregulate cu câțiva pași în Photoshop, v-am arătat și cum puteți face să funcționeze în cadrul Divi Builder. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!