Chcete vytvořit vlastní vzory pozadí pomocí možnosti opakování přechodu? divi ?
Možnosti pozadí divi nabízí mnoho způsobů, jak vytvořit vzory pozadí. Můžete dokonce vytvářet vzory na pozadí pouze pomocí přechodů. Možnost opakování přechodu to zjednodušuje a usnadňuje.
V tomto článku uvidíme, jak používat možnost opakování přechodu divi vytvořit vlastní vzory pozadí.
Začněme.
Viz také: Divi: Jak vytvořit kontaktní formulář, který se zobrazí po kliknutí na tlačítko
Co je opakování gradientu
Možnost opakování přechodu vytvoří vzor založený na zarážkách přechodu. Zarážky přechodu jsou měření, která určují, kde se barvy objeví a zastaví v přechodu. divi a jeho Tvůrce přechodů používají tyto zarážky k vytvoření vzoru.
Poslední barva sděluje přechodu, kde je v přechodu bod přerušení. Před tímto bodem přerušení můžete mít tolik barev, kolik chcete.
Le Tvůrce přechodů poté jej zopakuje, aby vyplnil obrazovku, která vytváří vzor. Možnost lze přidat do libovolné sekce, řádku, sloupce nebo modulu a lze je použít společně.
Aktivujte možnost „Přechod pozadí“.
Pro aktivaci možnosti Opakování přechodu, otevřete nastavení sekce kliknutím na ikonu ozubeného kola. Pracuje také s řádky, sloupci a moduly.
Přejděte na Pozadí . Vyberte kartu Pozadí přechodu a klikněte na tlačítko Přidat přechod pozadí.
Pod pruhem zarážky přechodu je nazvané nastavení Opakování přechodu . Toto je ve výchozím nastavení zakázáno. Stačí na něj kliknout a aktivovat jej.
Přechod se nyní bude opakovat a vytvoří vzorek na základě vašich zarážek přechodu a dalších nastavení přechodu, jako je jednotka přechodu.
Přechodové jednotky
Jednotkou gradientu je jednotka měření. To určuje, co označují čísla zarážek přechodu na pruhu přechodu, což určuje, jak se měří zarážky přechodu. To ovlivní vzor vytvořený volbou opakování.
Diviův generátor gradientu pozadí nabízí 15 jednotek. Podívejme se na příklad čtyř nejoblíbenějších možností. Jak uvidíme v našich příkladech, výsledek se bude měnit v závislosti na vašem počtu přechodových zastávek a vašem nastavení.
Procenta (procenta)
Procento měří zarážky gradientu v procentech. To vypočítá body přechodu na základě rodičovského prvku. Čím menší je poslední přechodový steh, tím těsnější je vytvořený vzor. Při nastavování polohy jedné z barev se tato barva pohybuje, zatímco ostatní zůstávají na místě.
Pixely (px)
Pixely měří počet pixelů pro každou zarážku přechodu. To dává přechodu menší vzor než u většiny ostatních typů jednotek. Přesunutím pozice první nebo poslední barvy se změní pozice každé barvy.
Výška okna (vh)
Výřez je oblast okna prohlížeče, která je viditelná. Měří se zvlášť na výšku a šířku. Výška okna používá přechodové zarážky k měření procenta výšky velikosti okna. Úprava polohy první nebo poslední barvy ovlivní všechny barvy.
Šířka okna (vw)
Šířka okna používá přechodové zarážky k měření procenta šířky velikosti okna (nebo šířky prohlížeče). Úpravy se mění v závislosti na šířce. Jak upravujete číslo větší nebo menší, tato konkrétní barva změní polohu, zatímco ostatní zůstanou stejné.
Příklady použití volby "Gradient Repeat".
Čtěte také: Divi: Jak vytvořit tablet s rolovacím upoutávkovým obsahem
Pro naše příklady používáme sekci Výzva k akci na domovské stránce webu bezplatný balíček pro rozložení akupunktury k dispozici v Divi.
Budeme muset provést úpravu prvního sloupce sekce. Otevřete je parametry linky kliknutím na ikonu ozubeného kola.
Poté vyberte ikona ozubeného kola pro první sloupec.
sloupec jedna gradient
První sloupec má svůj vlastní gradient pozadí. Je součástí rozvržení. To nezměníme. Stejný gradient použijeme v našich čtyřech příkladech. Zde jsou nastavení pro případ, že byste je potřebovali.
- Přechodové zastávky:
- 0px: #f4d5b8
- 100px: rgba(244,213,184,0)
Nastavení přechodu
- Typ gradientu: Lineární
- Pozice gradientu: 180 stupňů
- Opakovat gradient: NE
- Přechodová jednotka: procento
- Čtvercový přechod nad obrázkem pozadí: NE
vzdálenost
Vlevo od sloupce přidáme mezery. Přejděte na kartu Design, přejděte na Vzdálenost a vyberte ikona tabletu otevřete možnosti zařízení.
Přidejte 5% levé odsazení pro karty na ploše a tabletu. Vyberte kartu telefonu a odstraňte levou výplň. Nahoře a vpravo ponechte jejich aktuální nastavení.
- Vycpávka
- Horní: 180 pixelů
- Vlevo: 5 %
- Vlevo: 80px
příklad jedna
Náš první příklad vytváří diagonální opakující se vzor s tenkými čarami.
Tento má tři sklonové zastávky.
- Přechodové zastávky:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Použijte následující nastavení.
- Typ gradientu: Lineární
- Směr gradientu: 156 stupňů
- Opakovat přechod: ANO
- Přechodová jednotka: pixely
- Čtvercový přechod nad obrázkem pozadí: Ne
Druhý příklad
Náš druhý příklad vytváří diagonální opakující se vzor s většími čarami.
Tento má tři sklonové zastávky.
- Přechodové zastávky:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
Pro nastavení gradientu
- Typ gradientu: Lineární
- Směr gradientu: 156 stupňů
- Opakovat přechod: ANO
- Přechodová jednotka: pixely
- Čtvercový přechod nad obrázkem pozadí: NE
Příklad tři
Náš třetí příklad vytváří opakující se kruhový vzor se středně velkými kruhy.
Tento má tři sklonové zastávky.
- Přechodové zastávky
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Použijte následující nastavení přechodu
- Typ přechodu: Kruhový
- Pozice gradientu: Spodní
- Opakovat přechod: ANO
- Přechodová jednotka: procento
- Čtvercový přechod nad obrázkem pozadí: NE
Příklad 4
Náš čtvrtý příklad vytváří kruhový vzor s velkými kruhy.
Tento má tři sklonové zastávky.
- Přechodové zastávky:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
Nastavení přechodu změňte následovně:
- Typ přechodu: Kruhový
- Pozice gradientu: Střed
- Opakovat přechod: ANO
- Přechodová jednotka: procento
- Čtvercový přechod nad obrázkem pozadí: Ne
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Toto je náš pohled na to, jak tuto možnost využít Opakování přechodu z Divi k vytvoření vlastního pozadí. Mnoho úprav v nastavení přechodu ovlivňuje návrh přechodu.
Opakování přechodu dobře funguje se všemi těmito vylepšeními a snadno vytváří zajímavé vlastní vzory pozadí.
Doporučujeme vyzkoušet příklady, které jsme zde uvedli, a provést změny, abyste viděli, jak jsou přechody ovlivněny, a vytvořit si vlastní přechody pozadí.
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 vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu 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.
...
