Chcete vytvořit přechody na pozadí mezi prvky? divi ?
Vytvářejte plynulé přechody návrhu pozadí mezi prvky divi je skvělý způsob, jak vylepšit svůj design Webové stránky divi.
To vám umožní plynule přecházet přechod, vzorek a masku pozadí mezi čárou a řezem kreativním způsobem.
Můžete mít například přechod vzoru nebo masky v různých barvách, aniž byste ztratili celkové zarovnání a symetrický vzhled designu.
V tomto tutoriálu použijeme vestavěné možnosti návrhu pozadí Divi k vytvoření hladkého přechodu návrhu pozadí mezi sekcí Divi a čárou. Aplikace a všestrannost tohoto designu jsou neomezené a posouvají možnosti designu pozadí Divi na zcela novou úroveň!
Začněme.
přehled
Zde je rychlý pohled na design, který vytvoříme v tomto tutoriálu.
Zde jsou některé další vzorové návrhy, které jsou možné s několika jednoduchými změnami masek a vzorů pozadí.
Vytvořte novou stránku pomocí Divi Builder
Chcete-li začít, budete muset provést následující:
Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.
Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder
poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)
Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.
Vytvoření plynulého přechodu na pozadí mezi sekcí Divi a čárou
Vytvoření záhlaví jako zástupného obsahu
Čtěte také: Divi: Jak vytvořit karty s efektem hoveru z čar
Než skočíme dovnitř, musíme přidat hlavičku jako obsah fiktivní. Chcete-li začít, přidejte do výchozí části stránky řádek s jedním sloupcem.
Poté přidejte na řádek modul Text.
Přidejte text velikosti H1.
Na kartě Design, aktualizujte návrh textu záhlaví podle potřeby.
- Písmo: Roboto Condensed
- Tloušťka písma: Tučné
- Styl: TT
- Zarovnání textu: Na střed
- Barva textu: #000000
- Velikost textu nadpisu: 4vw
- Vzdálenost mezi písmeny: 0.1 em
- Výška řádku: 1.3 m
Návrh pozadí sekce
Do sekce přidána výplň
Jakmile je falešné záhlaví na svém místě, otevřete nastavení sekce a aktualizujte mezery následovně:
- Polstrování (nahoře a dole): 15vw
Do sekce byl přidán přechod pozadí
Nyní, když máme více prostoru pro práci, jsme připraveni přidat do sekce náš návrh pozadí. Pod záložkou Přechod pozadí, přidejte následující body přechodu:
- Přechodové zastávky:
- 0 %: #4f0f75 (při 0 %)
- 25 %: #2843c9 (při 25 %)
- 50 %: #4ae2e0 (při 50 %)
- 75 %: #3881ff (při 75 %)
- 100 %: #4f0f75 (při 100 %)
Přidání vzoru pozadí do sekce
Na kartě Vzorek pozadí, aktualizujte následující:
- Vzor: Diagonální pruhy
- Barva vzoru: rgba (79,15,117,0.23)
- Transformace: Otočit
- Velikost vzoru: Vlastní velikost
- Šířka: 7vw
- Výška: 5vw
- Počátek opakování vzoru: Střed
Poznámka: Ujistěte se, že pro šířku a výšku vzoru používáte jednotku délky VW. A také nezapomeňte nastavit opakovaný počátek na "střed". Vzorek pozadí tak zůstane na stejném místě jako vzor pozadí, který do řádku přidáme později.
Přidání masky pozadí do sekce
Na kartě Pozadí masky, přidejte následující:
- Maska pozadí: Vrstva Blob
- Barva masky: rgba (0,0,0,0.7)
- Šířka masky: 100vw
- Pozice: Střed
Poznámka: Stejně jako u vzoru potřebujeme velikost masky pomocí jednotky délky VW. Také musíme dát masce centrální polohu.
Návrh pozadí linie
Zkopírujte a vložte pozadí oddílu na pozadí řádku
Chcete-li urychlit proces návrhu pozadí čáry, zkopírujte nastavení pozadí sekce.
Poté vložte pozadí na existující řádek.
V tomto okamžiku již můžete vidět, jak vzor pozadí a maska na čáře plynule přecházejí na pozadí řezu.
Vypadá to, že čára má průhledné pozadí, ale ve skutečnosti je to stejný vzor a maska použitá v sekci se stejnou velikostí a pozicí.
Upravte velikost řádku a výplň pomocí VW
Dále musíme našemu řádku přiřadit vlastní šířku pomocí jednotky délky VW. Aktualizujte následující:
- Šířka: 75vw
- Maximální šířka: 75vw
- Polstrování (nahoře, dole, vlevo a vpravo): 10vw
Upravte přechodové zastávky na lince
Dále musíme upravit zarážky přechodu na pozadí čáry pro plynulý přechod do přechodu pozadí sekce.
Na kartě Přechod na pozadí, zachováme tři střední body přechodu zděděné z pozadí řezu) a odstraníme první a poslední zarážku přechodu.
Poté nastavte první zarážku na 0 % a třetí zarážku na 100 %. Po dokončení byste měli mít následující přechody.
- Přechodové zastávky
- 0%: #2843c9
- 50 %: #4ae2e0
- 100 %: #3881ff
Přidejte na čáru stín rámečku
Abychom design trochu pozdvihli a zdůraznili plynulý přechod pozadí, můžeme do řádku přidat stín boxu.
- Box Shadow: viz snímek obrazovky
- Vertikální pozice: 0px
- Box Shadow Blur Strength: 4vw
- Barva stínu: rgba (0,0,0,0.5)
Upravte barvu vzoru pozadí čáry
Nyní, když máme všechny prvky pozadí na svém místě, můžeme začít upravovat barvy pro kreativnější design.
Pod možností Vzorek pozadí řádek, aktualizujte následující:
- Barva vzoru: rgba (255,255,255,0.23)
Upravte barvu masky pozadí čáry
Můžeme také aktualizovat barvu masky pro linku, aby design skutečně vynikl.
Na kartě Pozadí masky, aktualizujte následující:
- Barva masky: #ffffff
- Transformace masky: obrácená
Konečný výsledek
Uvidíme konečný výsledek.
Stáhněte si DIVI hned teď!!!
Více možností
Zde jsou některé další vzorové návrhy, které jsou možné s několika jednoduchými změnami masek a vzorů pozadí.
Viz také: Divi: Jak používat "Gradient Builder" ke zkrášlení vašich obrázků
Stáhněte si DIVI hned teď!!!
Proč investovat do čističky vzduchu?
Klíčem k vytvoření bezproblémových přechodů na pozadí v Divi je používat tyto jednotky délky VW moudře.
Nejprve musíme vytvořit návrh pozadí sekce, který odpovídá šířce výřezu prohlížeče (ze středové pozice na stránce). Po dokončení můžeme použít stejný jednořádkový design pozadí. Poté už máme jen několik přechodových a barevných vylepšení pro úžasný design.
Doufejme, že tato technika přidá další užitečnou designovou dovednost pro budoucí projekty.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
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.
...
