Chcete vytvořit jedinečné a ohromující pozadí s maskami a vzory pozadí? divi ?
Nová funkce masky a vzory pozadí divi se nejčastěji používá pro části stránky. Můžeme je ale přidat i do hlaviček!
V tomto tutoriálu vám ukážeme, jak přidat masky a vzory pozadí do šablony záhlaví divi pomocí konstruktoru témata.
Je to skvělý způsob, jak vytvořit zcela jedinečné návrhy záhlaví Webové stránky.
Začněme.
přehled
Zde je rychlý pohled na design, který vytvoříme v tomto tutoriálu.
Přejděte do Divi's theme builder a začněte vytvářet globální záhlaví
Z řídicího panelu WordPress přejděte na Divi > Tvůrce motivů
Klepněte na tlačítko "Přidat globální záhlaví"
vybrat "Vytvořit globální záhlaví".
Poté můžete začít navrhovat novou hlavičku pomocí Divi Builderu.
Jak přidat masky na pozadí a vzory do záhlaví Divi
Vytvoření pozadí sekce s barvou pozadí a vzorem
Čtěte také: Divi: Jak vytvořit sekci Reference ve formě mřížky
Chcete-li začít, otevřete nastavení stávající sekce.
Na kartě Obsah, aktualizujte možnosti pozadí pomocí následujících nastavení:
Barva pozadí:
- Pozadí: #262d3f
Vzor pozadí:
- Model: Pilulky
- Barva vzoru: rgba (255,255,255,0.1)
- Velikost vzoru: vlastní velikost.
- Šířka vzoru: 1px
Vycpávka
Na kartě Design, aktualizujte výplň sekce následovně:
- Výplň (nahoře a dole): 0 pixelů
Tím se trochu zmenší vertikální prostor záhlaví.
Přidejte řádek s následujícím rozložením sloupců
Přidán obsah zástupného záhlaví (nabídka a tlačítko)
V levém sloupci řádku přidejte novou nabídku.
Vyberte nabídku.
Poté přidejte logo a pomocí nastavení upravte nabídku a logo podle potřeby.
V pravém sloupci přidejte modul tlačítka a také si jej upravte podle svého.
Vytvoření pozadí čáry s přechodem, maskou a vzorem
Gradient
Otevřete nastavení řádku obsahující vaši nabídku a tlačítko. Poté aktualizujte možnosti pozadí pomocí následujících nastavení pozadí:
Gradient pozadí:
- Přechodové zarážky 1 (50 %): Jasné
- Přechodové zastávky 2 (75 %): #ff4c00
- Řízení: 90 stupňů
Vzor
- Model: Pilulky
- Barva vzoru: rgba (38,45,63,0.48)
- Velikost vzoru: 1 pixel
- Vertikální posun: 20px
Poznámka: Vertikální odsazení vzoru je nastaveno na 20 pixelů, protože v části nad čarou je horní odsazení 20 pixelů. Tím zajistíte, že vzor řezu bude zarovnán se vzorem řádku.
Pozadí masky
- Maska: Rybí kost
- Barva masky: #262d3f
POZNÁMKA: U záhlaví je nejlepší ponechat velikost masky nastavenou na "Extend to Fill", aby pokryla vodorovný prostor, aniž by došlo k ohrožení designu masky.
Poslední úpravy čáry
Viz také: Divi: Jak používat "Gradient Builder" ke zkrášlení vašich obrázků
Pro dokončení návrhu přidáme poloměr ohraničení a několik dalších úprav čáry.
Poloměr, ohraničení a rozestup ohraničení
Na kartě Design, aktualizujte výplň následovně:
- Výplň (nahoře a dole): 5 pixelů
Pak dejte řadě pěkný zaoblený roh pro další designový prvek.
- Zaoblené rohy: 50px
- Šířka levého okraje: 50px
- Barva levého okraje: #262d3f
Potřebujeme ohraničit levou stranu řady, protože čtvercový okraj masky přeteče řadu i přes zaoblené rohy.
Konečný výsledek
Uvidíme konečný výsledek.
Gradient je trochu jemný, takže zde je pohled na to, jak to vypadá.
A zde je design záhlaví pro stolní a mobilní zařízení.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Návrh pozadí záhlaví je jen špičkou ledovce. S možnostmi pozadí dostupnými v Divi je potřeba hodně prozkoumávat.
Doufáme, že vám tento tutoriál pomohl pochopit, jak mohou masky a vzory pozadí Divi spolupracovat a vytvořit jedinečný design pozadí pro vaše záhlaví.
Nebojte se experimentovat s více kombinacemi designu pozadí, aby se vešly do vašeho vlastního návrhu. Webové stránky nebo váš připravovaný projekt.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.
Neváhejte se také podívat na našeho průvodce na Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
