Želite li stvoriti jedinstvenu i zapanjujuću pozadinu s maskama i pozadinskim uzorcima iz Divi ?
Nove značajke pozadinskih maski i uzoraka Divi najčešće se koristi za dijelove stranice. Ali možemo ih dodati i u zaglavlja!
U ovom vodiču ćemo vam pokazati kako dodati maske i pozadinske uzorke predlošku zaglavlja Divi pomoću konstruktora teme.
To je sjajan način za stvaranje potpuno jedinstvenog dizajna zaglavlja za vaše web stranica.
Počnimo.
pregled
Evo kratkog pregleda dizajna koji ćemo izraditi u ovom vodiču.
Idite na Divijev alat za izradu tema i počnite stvarati globalno zaglavlje
S WordPress nadzorne ploče idite na Divi > Izrada tema
Kliknite "Dodaj globalno zaglavlje"
odabrati “Izradi globalno zaglavlje”.
Nakon toga možete početi dizajnirati novo zaglavlje koristeći Divi Builder.
Kako dodati pozadinske maske i uzorke Divi zaglavlju
Stvaranje pozadine odjeljka s pozadinskom bojom i uzorkom
Pročitajte također: Divi: Kako kreirati odjeljak Svjedočanstva u obliku mreže
Za početak otvorite postavke postojećeg odjeljka.
Ispod kartice Sadržajažurirajte opcije pozadine sa sljedećim postavkama:
Boja pozadine:
- Pozadina: #262d3f
Pozadinski uzorak:
- Model: Tablete
- Boja uzorka: rgba(255,255,255,0.1)
- Veličina uzorka: prilagođena veličina.
- Širina uzorka: 1px
punjenje
Ispod kartice dizajnažurirajte ispunu odjeljka na sljedeći način:
- Razmak (gornji i donji dio): 0 px
Ovo će malo smanjiti okomiti prostor zaglavlja.
Dodajte red sa sljedećim rasporedom stupaca
Dodan sadržaj zaglavlja rezerviranog mjesta (izbornik i gumb)
U lijevom stupcu retka dodajte novi izbornik.
Odaberite izbornik.
Zatim dodajte logotip i pomoću postavki prilagodite izbornik i logotip po želji.
U desnom stupcu dodajte modul gumba i također ga prilagodite svojim željama.
Stvaranje pozadine linija s gradijentom, maskom i uzorkom
Gradijent
Otvorite postavke retka koji sadrže vaš izbornik i gumb. Zatim ažurirajte opcije pozadine sa sljedećim postavkama pozadine:
Pozadinski gradijent:
- Granice gradijenta 1 (50%): Jasno
- Granice gradijenta 2 (75%): #ff4c00
- Upravljanje: 90 stupnjeva
Uzorak
- Model: Tablete
- Boja uzorka: rgba(38,45,63,0.48)
- Veličina uzorka: 1 piksel
- Vertikalni pomak: 20px
Napomena: Vertikalni pomak uzorka postavljen je na 20 px jer postoji 20 px gornji ispun na dijelu iznad crte. Ovo osigurava da se uzorak odjeljka poravna s uzorkom retka.
Maska za pozadinu
- Maska: riblja kost
- Boja maske: #262d3f
NAPOMENA: Za zaglavlja, najbolje je zadržati veličinu maske postavljenu na "Proširi do popune" tako da pokriva vodoravni prostor bez ugrožavanja dizajna maske.
Završni detalji na liniji
Vidi također: Divi: Kako koristiti "Gradient Builder" za uljepšavanje vaših slika
Da bismo dovršili dizajn, dodat ćemo radijus granice i još nekoliko izmjena linije.
Polumjer, obrub i granični razmak
Ispod kartice dizajnažurirajte ispunu na sljedeći način:
- Razmak (gornji i donji dio): 5 px
Zatim dajte redu lijep zaobljeni kut za dodatni element dizajna.
- Zaobljeni uglovi: 50 px
- Širina lijevog ruba: 50px
- Boja lijevog ruba: #262d3f
Moramo postaviti obrub na lijevu stranu reda jer će kvadratni rub maske prelaziti preko reda unatoč zaobljenim kutovima.
Konačni rezultat
Da vidimo konačni rezultat.
Gradijent je malo suptilan, pa evo pogleda kako izgleda.
A ovdje je dizajn zaglavlja za desktop i mobilni uređaj.
Preuzmite DIVI odmah!!!
Zaključak
Dizajn pozadine zaglavlja samo je vrh ledenog brijega. Ima puno toga za istraživati s pozadinskim opcijama dostupnim u Diviju.
Nadamo se da vam je ovaj vodič pomogao razumjeti kako pozadinske maske i uzorci Divi mogu raditi zajedno kako bi stvorili jedinstven dizajn pozadine za vaša zaglavlja.
Slobodno eksperimentirajte s više kombinacija dizajna pozadine kako biste odgovarali vlastitom dizajnu. web stranica ili vaš nadolazeći projekt.
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.
...
