Divi: 5 preklapanja maski i uzoraka primjenjivih na pozadinsku sliku

Želite li koristiti Divijevu masku i preklapanje pozadinskog uzorka?

Sa poslednjim verzija maske pozadine i karakteristike pozadinskog uzorka Divi, možete kreirati jedinstvene herojske sekcije za svoje site Web. Odjeljak heroja je prvi dio vašeg site Web i to je prva stvar koja je tvoja posjetitelja pogledajte prije skrolovanja site Web, tako da je važno da budete privlačni!

Ovaj članak će vam pokazati kako da kreirate pet jedinstvenih pozadinskih maski i preklapanja uzoraka koje možete primeniti na pozadinsku sliku da biste stvorili zaista zapanjujuće sekcije heroja. 

Ovaj vodič će pokriti osnovne korake potrebne za kreiranje svakog odjeljka Heroja i dati vam alate koji su vam potrebni za stvaranje upečatljivog odjeljka Hero za vašu web stranicu za nekoliko minuta.

Krenimo!

pregled

Evo kratkog pregleda pet sekcija heroja koje ćemo kreirati u ovom današnjem članku.

Preuzmite DIVI sada!!!

Dizajni su suptilni, jednostavni, a opet upečatljivi.

Pročitajte takođe: Divi: Kako koristiti "Gradient Builder" da uljepšate svoje slike

Kreirajte novu stranicu sa Divi Builder-om

Da biste započeli, morat ćete učiniti sljedeće:

Sa WordPress kontrolne table idite na Stranice> Dodaj novo za stvaranje nove stranice.

Dajte mu naslov koji vam ima smisla i kliknite Koristite Divi Builder

Zatim kliknite na Start Building (Gradi od ogrebotina)

Nakon toga imat ćete prazno platno za početak dizajniranja u Divi-ju.

Pet primjera prekrivanja pozadinske maske i uzorka za primjenu na pozadinsku sliku

Prvo, napravimo odjeljak Hero

Svi naši uzorci dizajna koriste istu strukturu sekcija, reda i stupaca, pa hajde da ih sada postavimo.

1. Kreirajte strukturu izgleda

Dodajte red na svoju stranicu, a zatim kliknite na zelenu ikonu "+" da prikažete strukturu kolone i odaberite prvu kolonu, kolonu pune širine.

2. Dodajte razmak između sekcija

Sada kada smo definirali naš red i stupac, vrijeme je da dodamo malo razmaka u odjeljak.

Na kartici Razmak ažurirajte sljedeće:

• Radna površina: 400 piksela (gore i dno)
• Tablet: 200 piksela (gore i dno); 25px (lijevo i desno)
• Telefon: 50 piksela (gore i dno); 25px (lijevo i desno)

Dizajn sekcije heroja #1

Dizajnirajmo prvi odjeljak Heroja.

Preuzmite DIVI sada!!!

1. Dodajte tekst zaglavlja

Kliknite na sivu ikonu „+“ da biste prikazali biblioteku modula. Pomaknite se do teksta i kliknite za učitavanje.

Unesite tekst naslova, a zatim ispod kartice Tekst zaglavlja, konfigurirajte ove postavke:

• Font naslova: Work Sans
• Boja teksta: Bijela #ffffff
• Veličina teksta naslova:
  • Desktop: 3 em
  • Tablet: 2,2 em
  • Telefon: 1.4em

2. Dodaj modul gumba

Dodajte dugme i konfigurišite ove postavke:

• Ispod kartice Sadržajs: Saznajte više
• Ispod kartice Poravnanje, odaberite: Centar
• kliknite na Koristite prilagođene stilove za dugme zatim konfigurirajte:
  • Veličina teksta dugmeta:
    • Desktop: 20px
    • Tablet: 16px
    • Telefon: 14px
  • Boja teksta dugmeta: #ffffff
  • Pozadina: #1d1d1d
  • Širina ivice dugmeta: 0
  • Poluprečnik granice: 0
  • Razmak između slova: 3 boda
  • Font dugmeta: Work Sans
  • Stil fonta: TT

3. Dodajte sliku za pozadinu

Sada kada je naš sadržaja je konfigurisan, vrijeme je da počnete dizajnirati pozadinu odjeljka.

• Idite na prekidač za pozadinu i kliknite na 3. karticu, karticu slike, a zatim kliknite na „Dodaj pozadinsku sliku“.
• Ovo će prikazati vašu medijsku biblioteku u kojoj možete odabrati fotografiju ili otpremiti novu.
• Nakon što odaberete svoju fotografiju, kliknite na dugme "Učitaj sliku" u donjem desnom uglu.

4. Dodajte uzorak pozadine

Sada kada smo postavili našu pozadinsku sliku, dodajmo uzorak.

• Na kartici pozadina, idite na 5. karticu, karticu Uzorak pozadine, a zatim kliknite na “Dodaj pozadinski uzorak”.
• izabrati Tufter sa padajućeg menija i konfigurišite ove postavke:
  • Boja uzorka – rgba(255,255,255,0.31)
  • Transformacija uzorka: nema
  • Veličina: stvarna veličina
  • Porijeklo ponavljanja uzorka: vrh dolje
  • Ponavljanje uzorka: Ponavljanje
  • Režim mešanja: Normalan

5. Dodajte masku pozadine

Sada kada smo postavili pozadinsku sliku i uzorak, dodajmo masku pozadine.

• Na kartici pozadina, idite na 6. karticu, karticu Pozadinska maska, a zatim kliknite na "Dodaj masku pozadine".
• izabrati grah sa padajućeg menija i konfigurišite ove postavke:
  • Boja maske: rgba(0,0,0,0.36)
  • Omjer širine i visine maske: horizontalni pravougaonik
  • Veličina: rastegnite do punjenja

Dakle! Sada imate prekrasno dizajniran odjeljak za heroje.

Odjeljak Hero #2 dizajn

Sada dizajnirajmo drugi odjeljak heroja.

1. Dodajte pozadinu i postavite način miješanja na Overlay

Odaberite svoju pozadinsku sliku, postavite način miješanja na Overlay i dodajte boju preklapanja rgba (10,10,10,0.64).

2. Dodajte uzorak pozadine

Sada kada smo postavili pozadinsku sliku, dodajmo pozadinski uzorak.

• Na kartici Pozadina idite na 5. karticu, karticu Uzorak pozadine, a zatim kliknite na “Dodaj pozadinski uzorak”.
• izabrati Tufter sa padajućeg menija i konfigurišite ove postavke:
  • Boja uzorka – rgba(255,255,255,0.09)
  • Transformacija uzorka: nema
  • Veličina: Poklopac
  • Porijeklo ponavljanja uzorka: gore lijevo
  • Ponavljanje uzorka: Ponavljanje
  • Režim mešanja: Normalan

3. Dodajte masku pozadine

Sada kada smo postavili pozadinsku sliku i uzorak, dodajmo masku pozadine.

• Na kartici pozadina, idite na 6. karticu, karticu Pozadinska maska, zatim kliknite na „Dodaj masku pozadine“.
• izabrati Caret sa padajućeg menija i konfigurišite ove postavke:
  • Boja maske: rgba(0,0,0,0.36)
  • Transformacija maske: Nema
  • Omjer širine i visine: horizontalni pravougaonik
  • Veličina maske: rastegnite za popunjavanje
  • Način miješanja maske: Normalan

Odjeljak Hero #3 dizajn

Sada dizajnirajmo treći odjeljak Heroja.

1. Dodajte pozadinu i postavite način miješanja na Overlay

Odaberite svoju pozadinsku sliku, postavite način miješanja na Overlay i dodajte boju preklapanja rgba (10,10,10,0.39).

2. Dodajte uzorak pozadine

Sada kada smo postavili pozadinsku sliku, dodajmo pozadinski uzorak.

• Na kartici pozadina, idite na 5. karticu, karticu Uzorak pozadine, a zatim kliknite na “Dodaj pozadinski uzorak”.
• izabrati Dijagonalne pruge 2 sa padajućeg menija i konfigurišite ove postavke:
  • Boja uzorka – rgba(0,0,0,0.06)
  • Transformacija uzorka: nema
  • Veličina: stvarna veličina
  • Porijeklo ponavljanja uzorka: gore lijevo
  • Ponavljanje uzorka: Ponavljanje
  • Režim mešanja: Normalan

3. Dodajte masku pozadine

Sada kada smo dodali pozadinsku sliku i uzorak, dodajmo masku pozadine.

• Na kartici pozadina, idite na 6. karticu, karticu Pozadinska maska, zatim kliknite na „Dodaj masku pozadine“.
• izabrati Triangles sa padajućeg menija i konfigurišite ove postavke:
  • Boja maske: rgba (10, 10, 10, 0,61)
  • Transformacija maske: nema
  • Omjer širine i visine: horizontalni pravougaonik
  • Veličina maske: rastegnite za popunjavanje
  • Način miješanja maske: Normalan

Odjeljak Hero #4 dizajn

Sada dizajnirajmo četvrti dio Heroja.

1. Dodajte sliku za pozadinu

Odaberite svoju pozadinsku sliku.

2. Dodajte uzorak pozadine

Sada kada smo dodali pozadinsku sliku, dodajmo pozadinski uzorak.

• Na kartici pozadina, idite na 5. karticu, karticu Uzorak pozadine, a zatim kliknite na “Dodaj pozadinski uzorak”.
• izabrati smiles sa padajućeg menija i konfigurišite ove postavke:
  • Boja uzorka – rgba(0,0,0,0.2)
  • Transformacija uzorka: nema
  • Veličina: Poklopac
  • Porijeklo ponavljanja: gore lijevo
  • Ponavljanje uzorka: Ponavljanje
  • Režim mešanja uzorka: Normalan

3. Dodajte masku pozadine

Sada kada smo primijenili pozadinsku sliku i uzorak, dodajmo masku pozadine.

• Na kartici pozadina, idite na 6. karticu, karticu Pozadinska maska, zatim kliknite na „Dodaj masku pozadine“.
• izabrati Corner Lake  sa padajućeg menija i konfigurišite ove postavke:
  • Boja maske: rgba (10, 10, 10, 0,61)
  • Transformacija maske: horizontalna
  • Omjer širine i visine: Horizontalni pravougaonik
  • Veličina: Poklopac
  • Položaj maske: centar lijevo
  • Mask Blender Mode: Normalan

3. Konfigurirajte parametre linije

Prije nego krenemo, ovaj odjeljak Hero ima jedinstvene stilove linija. Hajde da ovo postavimo.

• Veličina:
  • Širina: 80%
  • Maksimalna širina: 800px
• Poravnanje redova:
  • Radna površina: Podrazumevano
  • Tablet: Centar
  • Telefon: Centar
• marže:
  • Lijevo: 20vw

Odjeljak Hero #5 dizajn

Sada dizajnirajmo peti odjeljak Heroja.

Preuzmite DIVI sada!!!

1. Dodajte sliku za pozadinu

Odaberite svoju pozadinsku sliku.

2. Dodajte uzorak

Sada kada smo postavili pozadinsku sliku, primijenimo pozadinski uzorak.

• Na kartici pozadina, idite na 5. karticu, karticu Uzorak pozadine, a zatim kliknite na “Dodaj pozadinski uzorak”.
• izabrati križevi sa padajućeg menija i konfigurišite ove postavke:
  • Boja uzorka – #ffffff
  • Transformacija uzorka: nema
  • Veličina: prilagođena veličina
  • Širina uzorka: 10px
  • Visina uzorka: 10px
  • Porijeklo ponavljanja: vrh dolje
  • Ponavljanje uzorka: Ponavljanje
  • Režim mešanja uzorka: Normalan

3. Dodajte masku pozadine

Sada kada imamo primijenjenu pozadinsku sliku i uzorak, dodajmo masku pozadine.

• Na kartici pozadina, idite na 6. karticu, karticu Pozadinska maska, zatim kliknite na „Dodaj masku pozadine“.
• izabrati Diagonal Pills  sa padajućeg menija i konfigurišite ove postavke:
  • Boja maske: rgba (10, 10, 10, 0,61)
  • Transformacija maske: horizontalna
  • Omjer širine i visine: Horizontalni pravougaonik
  • Veličina: Poklopac
  • Položaj maske: centar lijevo
  • Način miješanja maske: Normalan

3. Konfigurirajte parametre linije

Prije nego krenemo, ovaj odjeljak Hero također ima jedinstvene stilove linija. Hajde da ovo postavimo.

• Veličina:
  • Širina: 80%
  • Maksimalna širina: 800px
• Poravnanje redova:
  • Radna površina: Podrazumevano
  • Tablet: Centar
  • Telefon: Centar
• Razmak:
  • Margina (desno): 18vw

Vidi također: Divi: Kako dodati maske i pozadinske obrasce u zaglavlje

zaključak

Dizajniranje jedinstvenog i privlačnog odjeljka Hero za vašu web stranicu je lako s novim opcijama maska ​​pozadine i uzorka od Divi. Svaka funkcija ima mnogo opcija koje vam omogućavaju da kreirate zaista kreativne pozadine. 

Osim toga, možete dodati uzorke pozadine i maske bilo kojoj Divi Builder stavci! Mogućnosti dizajna su beskrajne.

Nadamo se da će ova tehnika dodati još jednu korisnu vještinu dizajna za buduće projekte.

Nadamo se da će vas ovaj vodič inspirisati za vaše sljedeće Divi projekte. Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara da razgovaramo o tome.

Takođe možete konsultovati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.

Ne ustručavajte se da konsultujete i naš vodič o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...