Chcete zkombinovat masky pozadí a oddělovač divi mít vznešené a jedinečné pozadí?
Kombinace masek na pozadí s oddělovači sekcí v divi přidává další vrstvu kreativity do již tak silného arzenálu možností návrhu pozadí.
Kromě možností pozadí umožňují děliče sekcí také uživatelům vylepšit jejich návrhy pozadí.
V tomto tutoriálu vám ukážeme, jak kombinovat masky pozadí s oddělovači oddílů v divi. Dáme vám návod krok za krokem, jak pomocí této techniky vytvořit design pozadí pro sekci Divi.
Navíc vám dokonce vysvětlíme, jak vytvořit alternativní návrhy pomocí několika jednoduchých vylepšení.
Začněme!
přehled
Zde je náhled výkresů v tomto tutoriálu.
Koncept
Základním konceptem tohoto tutoriálu je zkombinovat masku pozadí a oddělovače sekcí a vytvořit tak ještě jedinečnější tvary masky.
Nejprve přidáme masku pozadí.
Dále přidáme děliče sekcí, abychom kreativně dotvořili tvar masky.
Vytvořte novou stránku pomocí Divi Builder
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.
Kombinujte masky pozadí a oddělovače v Divi
Přidejte velikost sekce a mezery
Pro začátek přidáme velikost a mezery do existující sekce v konstruktoru. Pozastavíme přidávání řádku nebo všech obsah takže se můžeme zaměřit na návrh pozadí sekce.
Otevřete nastavení sekce. Pod záložkou Design, aktualizujte velikost a mezery takto:
- Minimální výška: 50 vw
- Výplň (nahoře a dole): 0 pixelů
Vytvořte přechod na pozadí
Jakmile má sekce určitou výšku, jsme připraveni přidat do sekce gradient pozadí.
Na kartě Obsah, klikněte na kartu Přechod na pozadí pod možnostmi pozadí. Poté přidejte gradient následovně:
- Přechodové zastávky
- 20 %: #1a2a6c
- 60 %: #b21f1f
- 100 %: #fdbb2d
Vytvořte masku pozadí
Nyní, když máme barevný přechod, jsme připraveni vytvořit masku pozadí.
Na kartě Pozadí masky, aktualizujte následující:
- Maska: Rybí kost
- Barva masky: #000000
- Transformace: Invertovaná
- Poměr stran masky: viz snímek obrazovky
Přidat oddělovače sekcí (oddělovače)
S naší maskou na místě můžeme dále upravovat tvar masky pomocí děličů sekcí.
V tomto příkladu přidáme oddělovač půlkruhové sekce nahoře a dole. Tím se maska pozadí zkomprimuje, aby vypadala spíše jako ozdobný design šipky.
Chcete-li to provést, klepněte na kartu Design a přidejte následující oddělovače:
Nejprve přidejte horní oddělovač pod záložku Vrchní část.
- Styl oddělovače: Viz snímek obrazovky
- Barva: #000
- Výška děliče: 10 vw
Dále přidejte spodní oddělovač pod záložku Spodní část.
- Styl oddělovače: Viz snímek obrazovky
- Barva: #000
- Výška děliče: 10 vw
- Překlopení rozdělovače: Vertikální převrácení
Výsledek
Zde je zatím výsledek.
Upravte možnosti pozadí a oddělovače pro lepší design
Nyní, když máte základní myšlenku na místě, můžeme si snadno pohrát s oddělovači sekcí a vytvořit další vzory.
Viz také: Divi: Jak používat "Gradient Builder" ke zkrášlení vašich obrázků
Alternativní design #1
Pro náš první alternativní návrh otočíme stávající masku pozadí. Dále nahradíme půlkruhové děliče sekcí trojúhelníky.
Chcete-li to provést, otevřete stávající nastavení sekce a klikněte na kartu Pozadí masky a aktualizujte následující:
- Transformace masky: vertikální převrácení, rotace
- Poměr stran masky: viz snímek obrazovky
Dále aktualizujte oddělovače oddílů takto:
Horní přepážka
- Styl oddělovače: Viz snímek obrazovky
- Výška děliče: 13 vw
Spodní přepážka
- Styl oddělovače: Viz snímek obrazovky
- Výška: 13 vw
- Překlopení rozdělovače: deaktivace
Výsledek
Zde je výsledek.
Alternativní design #2
Pro náš druhý a poslední alternativní design vyměníme masku krovy podle masky Diagonální tyče 2 a také mu dát nový rozdělovač horní části.
Chcete-li to provést, otevřete stávající nastavení sekce a klikněte na kartu Pozadí masky a aktualizujte následující:
- Maska: Diagonální pruhy 2
- Transformace masky: horizontální převrácení
- Poměr stran: viz snímek obrazovky
Dále aktualizujte oddělovače oddílů takto:
Horní přepážka
- Styl oddělovače: Viz snímek obrazovky
- Překlopení rozdělovače: Horizontální převrácení
Spodní přepážka
- Styl oddělovače: Žádný
Výsledek
Zde je výsledek.
Konečné výsledky
Abyste měli lepší představu o tom, jak budou tato pozadí vypadat obsah, přidali jsme řádek do sloupce s názvem.
Čtěte také: Divi: Jak vytvořit lepkavou masku na pozadí
Stáhněte si DIVI hned teď!!!
Proč investovat do čističky vzduchu?
Kombinace masek a děličů sekcí pro návrhy pozadí otevírá další možnosti k vytvoření jedinečných tvarů pro tyto vestavěné masky.
Neváhejte a prozkoumejte různé kombinace sami.
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.
...
