Želite li koristiti maske i uzorke za svoj odjeljak Hero u Divi ?
Divi nove maske i uzorci pozadine su jedna od naših najboljih novih dizajnerskih značajki dosad. Svaka od maski i uzoraka može se kombinirati s drugim pozadinskim elementima (kao što su boje, slike i gradijenti) za bezbrojne jedinstvene kombinacije sa samo nekoliko klikova.
Danas ćemo vam pokazati kako koristiti Divi i njegove nove maske i pozadinske uzorke za dizajniranje dijela heroja.
U ovom vodiču ćemo pokriti važne korake potrebne za stvaranje maski i pozadinskih uzoraka.
Pokazat ćemo čak i kako postaviti pozadinske slike tako da odgovaraju dizajnu maske. Ovo bi vam trebalo dati outils trebate stvoriti savršen odjeljak Hero za svoju stranicu u nekoliko minuta.
pregled
Evo kratkog pregleda dizajna koji ćemo izraditi u ovom vodiču.
Pročitajte također: Divi: Kako stvoriti responzivnu slikovnu rešetku s poveznicama i efektima lebdenja
Primjer dijela junaka s bijelom maskom i uzorkom.
Ovdje je tamna verzija istog dijela Heroja s crnom maskom i uzorkom.
S ovim dizajnom možete jednostavno mijenjati maske i položaje maski sa samo nekoliko klikova!
Stvorite novu stranicu s Divi Builderom
S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.
Dajte mu naslov koji vam ima smisla i kliknite Koristiti Divi Graditelj
zatim kliknite Počnite graditi (Gradi od ogrebotina)
Nakon toga ćete imati prazno platno na kojem možete početi dizajnirati Divi.
Kako koristiti Divine maske i pozadinske uzorke u svom odjeljku s herojima
1. Napravite strukturu izgleda
Za ovaj glavni odjeljak koristimo klasičnu strukturu izgleda s naslovom i pozivom na radnju s lijeve strane i slikom (ili vizualnim dizajnom) s desne strane.
Za ovaj primjer, naš vizualni dizajn bit će izrađen korištenjem Divi opcija pozadine. Ali prije nego što prijeđemo na sitnice, moramo stvoriti redak s dva stupca kako bismo uštedjeli prostor na desnoj strani stranice kako bismo prikazali pozadinske maske odjeljaka i dizajn uzorka.
2. Dodajte naslov i poziv na akciju
U lijevom stupcu (stupac 1) dodajte tekstualni modul za vaš glavni naslov, tekstualni modul za vaš tekst podnaslova i modul gumba za vaš gumb.
3. Dodajte okomiti razmak odjeljku
Kako bi naš dizajn pozadine izgledao visoko i lijepo, moramo dodati okomitu visinu sekciji. Jednostavan način da to učinite je dodavanje ispune na vrh i dno odjeljka. Imajte na umu da moramo prilagoditi ispunu na zaslonu tableta i telefona kako bismo napravili mjesta za dizajn pozadine nakon što se stupci okomito naslažu.
Otvorite postavke odjeljka. Na kartici dizajna ažurirajte ispunu na sljedeći način:
- Ispuna:
- Stolno računalo: Gornji 20vw, Donji 20vw
- Tablet: gornji 8vw, donji 48vw
- Telefon: Gornji 8vw, Donji 70vw
4. Dodajte pozadinsku sliku i gradijent
Zatim možemo dodati pozadinsku sliku i gradijent odjeljku. Imajte na umu da će glavna žarišna točka pozadinske slike biti otkrivena na desnoj strani odjeljka, stoga koristite sliku koja ima ono što želite vidjeti na desnoj strani.
Za ovaj primjer koristimo sliku s horizontom grada. Desna strana slike ima bliže i bolje izgledajuće zgrade, tako da radi jako dobro.
Ispod kartice Pozadina slike, prenesite sliku u pozadinu odjeljka.
U Diviju možete jednostavno dodati gradijent boje pozadinskoj slici. Ispod kartice Gradijent pozadine, dodajte sljedeći gradijent u pozadinu odjeljka:
- Gradijent zaustavljanja:
- 0%: #3e22ff
- 100%: jasno
- Kvadratni gradijent iznad pozadinske slike: DA
5. Napravite pozadinski uzorak za odjeljak
Sada kada imamo spremnu pozadinsku sliku i gradijent, možemo dodati pozadinski uzorak kako bismo dovršili dizajn.
U ovom primjeru koristit ćemo suptilan uzorak koji samo dodaje malo teksture kako bi dobio jedinstveniji izgled.
Ispod kartice Pozadinski obrasciažurirajte sljedeće:
- Uzorak pozadine: čupava
TRIK: S pozadinskim uzorcima obično je najbolje da budu suptilni. Pokušajte koristiti prilagođene veličine za manje dizajne, a zatim smanjite neprozirnost boje.
6. Napravite masku pozadine za odjeljak
S našim pozadinskim uzorkom na mjestu, konačno smo spremni testirati potpuno novu pozadinsku masku za naš dizajn. Postoji hrpa opcija i varijacija za odabir. Za ovaj primjer koristit ćemo masku saća.
Ispod kartice Maska za pozadinuažurirajte sljedeće:
- Maska: Saće
- Boja maske: #ffffff
- Veličina: korice
7. Podesite položaj pozadinske slike
Budući da koristimo pozadinsku masku, dio naše pozadinske slike je maskiran (ili "maskiran").
U ovom primjeru, pobrinut ćemo se da donji desni dio slike bude najvidljiviji i pomaknut ćemo ga malo udesno kako bismo prikazali više zgrada.
Na kartici Slika ažurirajte sljedeće:
- Položaj pozadinske slike: dolje desno
- Horizontalni pomak pozadinske slike: -4vw
8. Koristite način miješanja
Jedan od načina da postanete kreativni sa svim ovim pozadinskim elementima je dodavanje načina miješanja. Načini miješanja mogu se dodati bilo kojoj od opcija pozadine i mogu se koristiti za miješanje više pozadinskih slojeva (slika, gradijent, maska itd.) na kreativne načine.
Za ovaj primjer, pomiješat ćemo pozadinsku sliku s bojom gradijenta. Da biste to učinili, kliknite na karticu Pozadina slike i dodajte način miješanja kako biste uklopili boju gradijenta s pozadinskom slikom na sljedeći način:
- Miješanje pozadinske slike: Množenje
9. Podesite masku pozadine za mobitel
Važno je osigurati da dizajn pozadinske maske također izgleda sjajno na mobilnim uređajima. Srećom, ugrađene opcije olakšavaju ovaj proces.
Ne zaboravite da smo već dodali dodatnu podlogu na tablet i telefon kako bismo napravili mjesta za naš dizajn pozadine.
Sada sve što trebamo učiniti je upotrijebiti opcije transformacije pozadine i omjera slike da prilagodimo masku za mobitel.
Ispod kartice Maska za pozadinu, omogućite responzivne opcije i ažurirajte sljedeće:
Verzija za tablete
- Transformacija maske: okretanje okomito, okretanje vodoravno, rotiranje
- Omjer slike maske: kvadrat
Telefonska verzija
- Transformacija maske: okretanje okomito, okretanje vodoravno, rotiranje
- Omjer maske: Portret
Rezultat
Pogledajte dizajn koji smo do sada izradili.
Stolno računalo
Verzija tableta
Izdanje za telefon
10. Napravite tamnu verziju
Ako želite tamnu verziju ovog dizajna, samo promijenite boju maske pozadine u tamnu boju (poput crne).
Zatim promijenite boju uzorka u crnu.
Zatim promijenite tekst naslova i podnaslova u bijeli. A možda biste željeli ažurirati i boju gumba.
Ovako izgleda mračna verzija.
Konačni rezultati
Vidi također: Divi: Kako prilagoditi vezu "Pročitajte više" na blogu
Evo još jednog pogleda na naše konačne rezultate.
Preuzmite DIVI odmah!!!
Zaključak
Dizajnirajte odjeljak Hero za svoje web stranica je super zabavno s maske i pozadinske uzorke od Divi. Opcije pozadine lako se mijenjaju kako bi se dobio savršen dizajn. Postoji i mnogo drugih opcija koje možete koristiti (kao što su načini stapanja) za stvaranje još jedinstvenijih pozadina.
Osim toga, možete dodati maske i uzorke bilo kojem Divi elementu, ne samo odjeljcima. Zato se zabavite eksperimentirajući!
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 treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu 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.
...
