Divi: 5 preklapanja maski i uzoraka primjenjivih na pozadinsku sliku

Želite li upotrijebiti Divi masku i sloj pozadinskog uzorka?

S posljednjim verzija pozadinske maske i značajke pozadinskog uzorka Divi, možete stvoriti jedinstvene odjeljke Hero za svoje web stranica. Dio heroja prvi je dio vašeg web stranica a to ti je prva stvar posjetitelji pogledajte prije listanja web stranica, pa je važno biti upečatljiv!

Ovaj će vam članak pokazati kako izraditi pet jedinstvenih pozadinskih maski i preklapanja uzoraka koje možete primijeniti na pozadinsku sliku kako biste stvorili doista zadivljujuće herojske dijelove. 

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

Započnimo!

pregled

Evo kratkog pregleda pet odjeljaka heroja koje ćemo danas izraditi u ovom članku.

Preuzmite DIVI sada!!!

Dizajni su suptilni, jednostavni, a opet dojmljivi.

Pročitajte također: Divi: Kako koristiti "Gradient Builder" za uljepšavanje vaših slika

Stvorite novu stranicu s Divi Builderom

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

S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.

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

zatim kliknite Počnite graditi (Gradi od ogrebotina)

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

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

Prvo, stvorimo odjeljak Hero

Svi naši primjeri dizajna koriste istu strukturu odjeljaka, retka i stupca, pa ih sada postavimo.

1. Napravite strukturu izgleda

Dodajte redak na svoju stranicu, zatim kliknite zelenu ikonu "+" za prikaz strukture stupca i odaberite prvi stupac, stupac pune širine.

2. Dodajte razmak između odjeljaka

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 dolje)
• Tablet: 200 piksela (gornji i donji dio); 25px (lijevo i desno)
• Telefon: 50 piksela (gore i dolje); 25px (lijevo i desno)

Dizajn sekcije heroja #1

Dizajnirajmo prvi odjeljak Heroja.

Preuzmite DIVI sada!!!

1. Dodajte tekst zaglavlja

Kliknite na sivu ikonu "+" za prikaz biblioteke modula. Dođite 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:
  • Radna površina: 3 em
  • Tablet: 2,2 em
  • Telefon: 1.4em

2. Dodajte modul gumba

Dodajte gumb i konfigurirajte ove postavke:

• Ispod kartice Sadržajs: Saznajte više
• Ispod kartice Poravnanje, odaberite: Središte
• Kliknite Koristite prilagođene stilove za gumb zatim konfiguriraj:
  • Veličina teksta gumba:
    • Radna površina: 20 px
    • Tablet: 16 px
    • Telefon: 14 px
  • Boja teksta gumba: #ffffff
  • Pozadina: #1d1d1d
  • Širina obruba gumba: 0
  • Polumjer granice: 0
  • Razmak između slova: 3 boda
  • Font gumba: Work Sans
  • Stil fonta: TT

3. Dodajte pozadinsku sliku

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

• Idite na prekidač za pozadinu i kliknite na 3. karticu, karticu sa slikom, zatim kliknite na "Dodaj pozadinsku sliku".
• Ovo će prikazati vašu medijsku biblioteku, gdje možete odabrati fotografiju ili učitati novu.
• Nakon što ste odabrali svoju fotografiju, kliknite gumb "Učitaj sliku" u donjem desnom kutu.

4. Dodajte pozadinski uzorak

Sad kad smo postavili pozadinsku sliku, dodajmo uzorak.

• U kartici pozadina, idite na 5. karticu, karticu Pozadinski uzorak, zatim kliknite "Dodaj pozadinski uzorak".
• odabrati Čupav iz padajućeg izbornika i konfigurirajte ove postavke:
  • Boja uzorka – rgba(255,255,255,0.31)
  • Transformacija uzorka: nema
  • Veličina: stvarna veličina
  • Izvor ponavljanja uzorka: gore dolje
  • Ponavljanje uzorka: Ponavljanje
  • Način miješanja: Normalno

5. Dodajte masku pozadine

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

• U kartici pozadina, idite na 6. karticu, karticu Maska za pozadinu, a zatim kliknite "Dodaj pozadinsku masku".
• odabrati Grah iz padajućeg izbornika i konfigurirajte ove postavke:
  • Boja maske: rgba(0,0,0,0.36)
  • Omjer širine i visine maske: horizontalni pravokutnik
  • Veličina: Stretch to Fill

Dakle! Sada imate prekrasno dizajniran odjeljak Hero.

Dizajn Section Hero #2

Dizajnirajmo sada drugu sekciju heroja.

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

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

2. Dodajte pozadinski uzorak

Sad kad smo postavili pozadinsku sliku, dodajmo pozadinski uzorak.

• U kartici Pozadina idite na 5. karticu, karticu Pozadinski uzorak, zatim kliknite "Dodaj pozadinski uzorak".
• odabrati Čupav iz padajućeg izbornika i konfigurirajte ove postavke:
  • Boja uzorka – rgba(255,255,255,0.09)
  • Transformacija uzorka: nema
  • Veličina: korice
  • Početak ponavljanja uzorka: gore lijevo
  • Ponavljanje uzorka: Ponavljanje
  • Način miješanja: Normalno

3. Dodajte masku pozadine

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

• U kartici pozadina, idite na 6. karticu, karticu Maska za pozadinu, zatim kliknite "Dodaj masku pozadine".
• odabrati Znak za umetanje iz padajućeg izbornika i konfigurirajte ove postavke:
  • Boja maske: rgba(0,0,0,0.36)
  • Transformacija maske: Nema
  • Omjer slike: horizontalni pravokutnik
  • Veličina maske: rastezljiva do punjenja
  • Način miješanja maske: Normalno

Dizajn Section Hero #3

Dizajnirajmo sada treći odjeljak Heroja.

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

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

2. Dodajte pozadinski uzorak

Sad kad smo postavili pozadinsku sliku, dodajmo pozadinski uzorak.

• U kartici pozadina, idite na 5. karticu, karticu Pozadinski uzorak, zatim kliknite "Dodaj pozadinski uzorak".
• odabrati Dijagonalne pruge 2 iz padajućeg izbornika i konfigurirajte ove postavke:
  • Boja uzorka – rgba(0,0,0,0.06)
  • Transformacija uzorka: nema
  • Veličina: stvarna veličina
  • Početak ponavljanja uzorka: gore lijevo
  • Ponavljanje uzorka: Ponavljanje
  • Način miješanja: Normalno

3. Dodajte masku pozadine

Sad kad smo dodali pozadinsku sliku i uzorak, dodajmo pozadinsku masku.

• U kartici pozadina, idite na 6. karticu, karticu Maska za pozadinu, zatim kliknite "Dodaj masku pozadine".
• odabrati Trokuti iz padajućeg izbornika i konfigurirajte ove postavke:
  • Boja maske: rgba (10, 10, 10, 0,61)
  • Transformacija maske: nema
  • Omjer slike: horizontalni pravokutnik
  • Veličina maske: rastezljiva do punjenja
  • Način miješanja maske: Normalno

Dizajn Section Hero #4

Dizajnirajmo sada četvrti dio Heroja.

1. Dodajte pozadinsku sliku

Odaberite pozadinsku sliku.

2. Dodajte pozadinski uzorak

Sad kad smo dodali našu pozadinsku sliku, dodajmo pozadinski uzorak.

• U kartici pozadina, idite na 5. karticu, karticu Pozadinski uzorak, zatim kliknite "Dodaj pozadinski uzorak".
• odabrati Osmjesi iz padajućeg izbornika i konfigurirajte ove postavke:
  • Boja uzorka – rgba(0,0,0,0.2)
  • Transformacija uzorka: nema
  • Veličina: korice
  • Ponovi izvor: gore lijevo
  • Ponavljanje uzorka: Ponavljanje
  • Način miješanja uzorka: Normalno

3. Dodajte masku pozadine

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

• U kartici pozadina, idite na 6. karticu, karticu Maska za pozadinu, zatim kliknite "Dodaj masku pozadine".
• odabrati Corner Lake  iz padajućeg izbornika i konfigurirajte ove postavke:
  • Boja maske: rgba (10, 10, 10, 0,61)
  • Transformacija maske: horizontalna
  • Omjer slike: vodoravni pravokutnik
  • Veličina: korice
  • Položaj maske: sredina lijevo
  • Mask Blender Mode: Normalno

3. Konfigurirajte parametre linije

Prije nego krenemo, ovaj odjeljak Hero ima jedinstvene stilove linija. Postavimo ovo.

• Veličina:
  • Širina: 80%
  • Maksimalna širina: 800 px
• Poravnanje reda:
  • Radna površina: Zadano
  • Tablet: središte
  • Telefon: Centar
• Margine:
  • Lijevo: 20vw

Section Hero #5 Dizajn

Dizajnirajmo sada peti dio Heroja.

Preuzmite DIVI sada!!!

1. Dodajte pozadinsku sliku

Odaberite pozadinsku sliku.

2. Dodajte uzorak

Sada kada smo postavili pozadinsku sliku, primijenimo pozadinski uzorak.

• U kartici pozadina, idite na 5. karticu, karticu Pozadinski uzorak, zatim kliknite "Dodaj pozadinski uzorak".
• odabrati Križevi iz padajućeg izbornika i konfigurirajte ove postavke:
  • Boja uzorka – #ffffff
  • Transformacija uzorka: nema
  • Veličina: prilagođena veličina
  • Širina uzorka: 10 px
  • Visina uzorka: 10 px
  • Ponovite početak: gore dolje
  • Ponavljanje uzorka: Ponavljanje
  • Način miješanja uzorka: Normalno

3. Dodajte masku pozadine

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

• U kartici pozadina, idite na 6. karticu, karticu Maska za pozadinu, zatim kliknite "Dodaj masku pozadine".
• odabrati Dijagonalne tablete  iz padajućeg izbornika i konfigurirajte ove postavke:
  • Boja maske: rgba (10, 10, 10, 0,61)
  • Transformacija maske: horizontalna
  • Omjer slike: vodoravni pravokutnik
  • Veličina: korice
  • Položaj maske: sredina lijevo
  • Način miješanja maske: Normalno

3. Konfigurirajte parametre linije

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

• Veličina:
  • Širina: 80%
  • Maksimalna širina: 800 px
• Poravnanje reda:
  • Radna površina: Zadano
  • Tablet: središte
  • Telefon: Centar
• Razmak:
  • Margina (desna): 18vw

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

Zaključak

S novim opcijama jednostavno je dizajnirati jedinstveni i privlačni Hero odjeljak za vašu web stranicu maska ​​pozadine i uzorka od Divi. Svaka značajka ima mnogo opcija koje vam omogućuju stvaranje istinski kreativnih pozadina. 

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

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

Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.

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

Ne ustručavajte se također konzultirati naš vodič o Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

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

...