Chceli by ste vytvoriť vlastné vzory pozadia pomocou možnosti Opakovanie prechodu z divi ?
Možnosti pozadia divi ponúkajú mnoho spôsobov vytvárania vzorov na pozadí. Môžete dokonca vytvoriť vzory pozadia iba pomocou prechodov. Možnosť Gradient Repeat to zjednodušuje a zjednodušuje.
V tomto článku uvidíme, ako používať možnosť Opakovanie prechodu divi na vytvorenie vlastných vzorov pozadia.
Začnime.
Pozri tiež: Divi: Ako vytvoriť kontaktný formulár, ktorý sa zobrazí po kliknutí na tlačidlo
Čo je gradient opakovania
Možnosť Opakovanie prechodu vytvorí vzor založený na zarážkach prechodu. Zarážky prechodu sú merania, ktoré určujú, kde sa farby objavia a zastavia v prechode. divi a jeho Gradient Builder používajú tieto zarážky na vytvorenie vzoru.
Posledná farba hovorí prechodu, kde je bod prerušenia v prechode. Pred týmto bodom zlomu môžete mať toľko farieb, koľko chcete.
Le Tvorca prechodov potom to zopakuje, aby vyplnil obrazovku, ktorá vytvára vzor. Voľbu je možné pridať do ľubovoľnej sekcie, riadku, stĺpca alebo modulu a možno ich použiť spoločne.
Aktivujte možnosť „Prechod pozadia“.
Ak chcete aktivovať možnosť Opakovanie prechodu, otvorte nastavenia sekcie kliknutím na ikonu ozubeného kolieska. Pracuje aj s riadkami, stĺpcami a Moduly.
Prejdite na položku pozadia . Vyberte kartu Pozadie gradientu a kliknite na tlačidlo Pridať prechod pozadia.
Pod lištou zarážky prechodu je nastavenie tzv Opakovanie prechodu . Toto je predvolene vypnuté. Stačí naň kliknúť a aktivovať ho.
Prechod sa teraz bude opakovať, čím sa vytvorí vzor založený na vašich zarážkach prechodu a iných nastaveniach prechodu, ako je napríklad jednotka prechodu.
Gradientové jednotky
Jednotka gradientu je jednotka merania. Toto určuje, čo označujú čísla zarážok prechodu na pruhu prechodu, čo určuje spôsob merania zarážok prechodu. Ovplyvní to vzor vytvorený možnosťou opakovania.
Diviho generátor gradientu pozadia ponúka 15 jednotiek. Pozrime sa na príklad štyroch najpopulárnejších možností. Ako uvidíme v našich príkladoch, výsledok sa bude meniť v závislosti od vášho počtu prechodových zastávok a vašich nastavení.
Percento (percento)
Percento meria zarážky gradientu v percentách. Tým sa vypočítajú body prechodu na základe rodičovského prvku. Čím menší je posledný prechodový steh, tým pevnejší je vytvorený vzor. Pri nastavovaní polohy jednej z farieb sa táto farba pohybuje, zatiaľ čo ostatné zostávajú na svojom mieste.
Pixely (px)
Pixels meria počet pixelov pre každú zarážku gradientu. To dáva gradientu menší vzor ako väčšina ostatných typov jednotiek. Posunutím pozície prvej alebo poslednej farby sa zmení pozícia každej farby.
Výška okna (vh)
Výrez je oblasť okna prehliadača, ktorá je viditeľná. Meria sa zvlášť na výšku a šírku. Výška okna používa prechodové zarážky na meranie percenta výšky veľkosti okna. Úprava polohy prvej alebo poslednej farby ovplyvní všetky farby.
Šírka okna (vw)
Šírka okna používa prechodové zarážky na meranie percenta šírky veľkosti okna (alebo šírky prehliadača). Úpravy sa menia v závislosti od šírky. Keď upravíte číslo väčšie alebo menšie, konkrétna farba zmení polohu, zatiaľ čo ostatné zostávajú rovnaké.
Príklady použitia možnosti "Gradient Repeat".
Čítajte tiež: Divi: Ako vytvoriť tablet s rolovateľným obsahom ukážky
Pre naše príklady používame sekciu Call-to-Action na domovskej stránke bezplatný balík na usporiadanie akupunktúry dostupné v Divi.
Budeme musieť urobiť úpravu v prvom stĺpci sekcie. Otvorte ich parametre linky kliknutím na ikonu ozubeného kolieska.
Potom vyberte ikona ozubeného kolieska pre prvý stĺpec.
stĺpec jeden gradient
Prvý stĺpec má svoj vlastný gradient pozadia. Je súčasťou rozloženia. To nezmeníme. Rovnaký gradient použijeme v našich štyroch príkladoch. Tu sú nastavenia pre prípad, že by ste ich potrebovali.
- Zarážky prechodu:
- 0px: #f4d5b8
- 100 pixelov: rgba (244,213,184,0)
Nastavenia gradientu
- Typ gradientu: Lineárny
- Pozícia gradientu: 180 stupňov
- Opakovať gradient: NIE
- Jednotka prechodu: Percento
- Štvorcový prechod nad obrázkom na pozadí: NIE
vzdialenosť
Naľavo od stĺpca pridáme medzery. Prejdite na kartu dizajn, prejdite na riadkovanie a vyberte ikona tabletu otvorte možnosti zariadenia.
Pridajte 5 % ľavé odsadenie pre karty pracovnej plochy a tabletu. Vyberte kartu telefónu a odstráňte ľavú výplň. Hore a vpravo ponechajte ich aktuálne nastavenia.
- Vypchávka
- Horná časť: 180 pixelov
- Vľavo: 5 %
- Vľavo: 80 pixelov
príklad jedna
Náš prvý príklad vytvára diagonálny opakujúci sa vzor s tenkými čiarami.
Tento má tri sklonové zastávky.
- Zarážky prechodu:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Použite nasledujúce nastavenia.
- Typ gradientu: Lineárny
- Smer gradientu: 156 stupňov
- Opakovanie prechodu: ÁNO
- Jednotka prechodu: pixely
- Štvorcový prechod nad obrázkom na pozadí: Nie
Druhý príklad
Náš druhý príklad vytvára diagonálny opakujúci sa vzor s väčšími čiarami.
Tento má tri sklonové zastávky.
- Zarážky prechodu:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
Pre nastavenia gradientu,
- Typ gradientu: Lineárny
- Smer gradientu: 156 stupňov
- Opakovanie prechodu: ÁNO
- Jednotka prechodu: pixely
- Štvorcový prechod nad obrázkom na pozadí: NIE
Príklad tri
Náš tretí príklad vytvára opakujúci sa kruhový vzor so stredne veľkými kruhmi.
Tento má tri sklonové zastávky.
- Prechodové zarážky
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Použite nasledujúce nastavenia gradientu
- Typ prechodu: Kruhový
- Pozícia gradientu: Spodná
- Opakovanie prechodu: ÁNO
- Jednotka prechodu: Percento
- Štvorcový prechod nad obrázkom na pozadí: NIE
Príklad 4
Náš štvrtý príklad vytvára kruhový vzor s veľkými kruhmi.
Tento má tri sklonové zastávky.
- Zarážky prechodu:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
Nastavenia prechodu zmeňte takto:
- Typ prechodu: Kruhový
- Pozícia gradientu: Stred
- Opakovanie prechodu: ÁNO
- Jednotka prechodu: Percento
- Štvorcový prechod nad obrázkom na pozadí: Nie
Stiahnite si DIVI teraz!!!
záver
Toto je náš pohľad na to, ako túto možnosť využiť Opakovanie prechodu od Divi na vytvorenie vlastného pozadia. Mnoho úprav v nastaveniach prechodu ovplyvňuje návrh prechodu.
Gradient Repeat funguje dobre so všetkými týmito vylepšeniami na jednoduché vytváranie zaujímavých vlastných vzorov pozadia.
Odporúčame vám vyskúšať príklady, ktoré sme tu uviedli, a vykonať zmeny, aby ste videli, ako sú ovplyvnené prechody, a vytvoriť si vlastné prechody pozadia.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete 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.
...
