Chcete vytvoriť jedinečné a úžasné pozadie s maskami a vzormi pozadia z divi ?
Nová funkcia masiek a vzorov pozadia divi sa najčastejšie používa pre sekcie stránky. Môžeme ich však pridať aj do hlavičiek!
V tomto návode vám ukážeme, ako pridať masky a vzory pozadia do šablóny hlavičky divi pomocou konštruktora témy.
Je to skvelý spôsob, ako vytvoriť úplne jedinečné návrhy hlavičiek webové stránky.
Začnime.
prehľad
Tu je rýchly pohľad na dizajn, ktorý vytvoríme v tomto návode.
Prejdite do tvorcu tém Divi a začnite vytvárať globálnu hlavičku
Na hlavnom paneli WordPress prejdite na Divi > Tvorca tém
Kliknite na "Pridať globálnu hlavičku"
vybrať „Vytvoriť globálnu hlavičku“.
Potom môžete začať navrhovať novú hlavičku pomocou Divi Builder.
Ako pridať masky na pozadie a vzory do hlavičky Divi
Vytvorenie pozadia sekcie s farbou pozadia a vzorom
Čítajte tiež: Divi: Ako vytvoriť sekciu Referencie vo forme mriežky
Ak chcete začať, otvorte nastavenia existujúcej sekcie.
Pod záložkou obsah, aktualizujte možnosti pozadia pomocou nasledujúcich nastavení:
Farba pozadia:
- Pozadie: #262d3f
Vzor pozadia:
- Model: Pilulky
- Farba vzoru: rgba (255,255,255,0.1)
- Veľkosť vzoru: vlastná veľkosť.
- Šírka vzoru: 1px
Vypchávka
Pod záložkou dizajn, aktualizujte výplň sekcie takto:
- Výplň (horná a dolná časť): 0 pixelov
Tým sa trochu zmenší vertikálny priestor hlavičky.
Pridajte riadok s nasledujúcim rozložením stĺpcov
Pridaný obsah hlavičky zástupného symbolu (ponuka a tlačidlo)
V ľavom stĺpci riadka pridajte novú ponuku.
Vyberte ponuku.
Potom pridajte logo a pomocou nastavení upravte ponuku a logo podľa potreby.
V pravom stĺpci pridajte tlačidlový modul a tiež si ho prispôsobte podľa seba.
Vytvorenie pozadia čiary s prechodom, maskou a vzorom
Gradient
Otvorte nastavenia riadku obsahujúce vašu ponuku a tlačidlo. Potom aktualizujte možnosti pozadia pomocou nasledujúcich nastavení pozadia:
Gradient pozadia:
- Zarážky prechodu 1 (50 %): Jasné
- Zarážky gradientu 2 (75 %): #ff4c00
- Riadenie: 90 stupňov
Pattern
- Model: Pilulky
- Farba vzoru: rgba (38,45,63,0.48)
- Veľkosť vzoru: 1 pixel
- Vertikálny posun: 20 pixelov
Poznámka: Vertikálne odsadenie vzoru je nastavené na 20 pixelov, pretože v sekcii nad čiarou je horná výplň 20 pixelov. Tým sa zabezpečí, že vzor sekcie bude zarovnaný so vzorom riadkov.
Maska pozadia
- Maska: Rybia kosť
- Farba masky: #262d3f
POZNÁMKA: Pri hlavičkách je najlepšie ponechať veľkosť masky nastavenú na „Rozšíriť na vyplnenie“, aby pokryla vodorovný priestor bez toho, aby sa ohrozil dizajn masky.
Záverečné dotyky na čiare
Pozri tiež: Divi: Ako používať "Gradient Builder" na skrášlenie vašich obrázkov
Na dokončenie návrhu pridáme k čiare polomer okraja a niekoľko ďalších úprav.
Polomer, okraj a rozostup okrajov
Pod záložkou dizajn, aktualizujte výplň takto:
- Výplň (horná a dolná časť): 5 pixelov
Potom dajte riadku pekný zaoblený roh pre extra dizajnový prvok.
- Zaoblené rohy: 50px
- Šírka ľavého okraja: 50 px
- Farba ľavého okraja: #262d3f
Musíme ohraničiť ľavú stranu radu, pretože štvorcový okraj masky bude pretekať riadok napriek zaobleným rohom.
Konečný výsledok
Pozrime sa na konečný výsledok.
Gradient je trochu jemný, takže tu je pohľad na to, ako to vyzerá.
A tu je dizajn hlavičky pre stolné počítače a mobilné zariadenia.
Stiahnite si DIVI teraz!!!
záver
Návrh pozadia hlavičky je len špičkou ľadovca. S možnosťami pozadia dostupnými v Divi je veľa skúmania.
Dúfame, že vám tento tutoriál pomohol pochopiť, ako môžu masky a vzory pozadia Divi spolupracovať pri vytváraní jedinečného dizajnu pozadia pre vaše hlavičky.
Nebojte sa experimentovať s viacerými kombináciami dizajnu pozadia, aby vyhovovali vášmu vlastnému dizajnu. webové stránky alebo váš pripravovaný projekt.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
