Chtěli byste mít v pozadí gradient divi mění se to při vznášení?
Tvorba webových stránek je o tom, že každý detail je správný. Věnování pozornosti malým detailům vašeho designu rychle zvýší kvalitu vašeho Webové stránky.
S novými možnostmi umístění divi, můžete snadno přidat malé interakce na vašem Webové stránky. Možnosti přechodu platí pro téměř všechny parametry návrhu. Můžete například nepřímo změnit pozadí s přechodem při najetí myší a vytvořit tak pěkný přechod.
To je přesně to, co vám ukážeme v tomto tutoriálu. Kromě přechodu přechodu vytvoříme také úžasný příklad designu od začátku, který budete moci použít pro jakýkoli typ Webové stránky které vytvoříte.
Pojďme!
přehled
Než se ponoříme do tutoriálu, podívejme se na konečný výsledek.
Začněme navrhovat s Divi
Přidat oddíl # 1
vzdálenost
První věc, kterou budete muset udělat, je vytvořit novou stránku nebo otevřít existující a přidat na ni novou běžnou sekci. Otevřete nastavení a přidejte vlastní horní a dolní okraje.
- Výplň (nahoře a dole): 100px
Přidat řádek 1
Struktura kolony
Pokračujte přidáním nového řádku pomocí následující struktury sloupců:
Výchozí barva pozadí (Desktop) sloupce 1
Bez přidání jakýchkoli modulů otevřete nastavení řádku a přidejte následující výchozí barvu pozadí do sloupce 1:
- Pozadí (počítač): #e7ffa0
Barva pozadí sloupce 1 při umístění kurzoru
Změňte tuto barvu pozadí při najetí myší.
- Pozadí: #00020c
Sloupec 1 přechod pozadí
Do sloupce 1 přidejte také barvu pozadí s přechodem. Všimněte si, že používáme zcela průhlednou barvu. Tato barva umožní prosvítit barvu pozadí, která se změní při najetí myší.
- Barva 1 (20 %): rgba (255,255,255,0)
- Barva 2 (100 %): rgba (16,0,201,0.8)
- Typ gradientu: Lineární
- Směr gradientu: 50 stupňů
Barva pozadí sloupce 2
Přidejte také barvu pozadí do sloupce 2.
- Pozadí: #ffffff
dimenzování
Poté přejděte na kartu Design a změňte nastavení velikosti v této možnosti Rozměry.
- Použít vlastní šířku okapu: ANO
- Šířka žlabu: 1
- Šířka: 2000px
vzdálenost
Pokračujte přidáním vlastních hodnot výplně do nastavení mezer.
- Výplň (nahoře a dole): 0px
Mezery (sloupec 2)
- Výplň (nahoře a dole): 6vw (počítač), 120px (tablet a telefon)
- Výplň (vlevo a vpravo): 5VW (počítač), 80px (tablet), 50px (telefon)
Stín boxu
A také dát řadě jemný stín boxu.
- Síla rozostření rámečku: 100 pixelů
- Síla rozprostření stínu rámečku: -10px
Přechody
Nakonec vytvoříme plynulý přechod na pozadí s přechodem zvýšením doby trvání přechodu na kartě pokročilý.
- Délka přechodu: 1100 ms
Přidejte Image modul do sloupce 1
Nahrajte obrázek
Je čas začít přidávat moduly! Přidejte modul Image do prvního sloupce.
Přechodové pozadí
Přejděte do nastavení pozadí tohoto modulu Image a přidejte pozadí s přechodem. Opět používáme plně průhlednou barvu, aby ostatní barvy mohly prosvítat.
- Barva 1 (57 %): rgba (50,217,255,0.66)
- Barva 2 (100 %): rgba (255,255,255,0)
- Typ přechodu: Kruhový
- Pozice gradientu: nahoře
vzdálenost
Dále do modulu přidejte vlastní horní polstrování.
- Polstrování (horní): 14vw
Přidejte textový modul do sloupce 2
Přidat obsah
Přesuňme se do druhého sloupce! První modul, který budeme potřebovat, je Textový modul pro titulek. Pokračujte a přidejte a obsah titul výběru.
Nastavení textu záhlaví
Dále přejděte do nastavení textu záhlaví a proveďte nějaké změny.
- Písmo: Abril Fatface
- Barva textu: #000000
- Velikost textu: 4 vw (počítač), 60 px (tablet), 40 px (telefon)
Přidejte druhý textový modul do sloupce 2
Přidat obsah
Druhý modul, který budeme potřebovat, je další modul Text. Přidejte nějaké obsah volby.
Nastavení textu
Dále přejděte do nastavení textu a změňte zarovnání textu.
- Zarovnání textu: Zarovnané
dimenzování
Upravte také šířku v nastavení velikosti.
- Šířka: 73 % (počítač), 100 % (tablet a telefon)
vzdálenost
Nakonec přidejte vlastní horní a dolní okraj modulu, abyste vytvořili mezery.
- Okraj (nahoře a dole): 2,5 vw (počítač), 50 px (tablet a telefon)
Přidejte modul tlačítka do sloupce 2
Přidat popis
Třetí a poslední modul, který budeme potřebovat ve druhém sloupci, je modul Button. Přidejte kopii dle vlastního výběru.
Nastavení tlačítek
Poté změňte nastavení tlačítka.
- Použít vlastní styly pro tlačítko: ANO
- Velikost textu tlačítka: 1,2 vw (počítač), 14 px (tablet a telefon)
- Barva textu tlačítka: #ffffff
- Přechodové zastávky 1 (0 %): #9ea6ff
- Zarážky přechodu 2 (100 %): rgba (16,0,201,0.8)
- Řízení: 78 stupňů
- Šířka okraje tlačítka: 0 pixelů
- Poloměr ohraničení: 30 pixelů
- Mezera mezi písmeny: -1px
- Tloušťka písma: Ultra Bold
- Styl písma: TT (velká písmena)
vzdálenost
Přidejte také vlastní hodnoty výplně.
- Výplň (nahoře a dole): 10px
- Výplň (vlevo a vpravo): 40px
Stín boxu
A na tlačítko naneste jemný stín boxu.
- Síla rozostření rámečku: 40px
Čtěte také: Jak přizpůsobit modul „Časovač odpočítávání“ pomocí GIF
Přidat oddíl # 2
vzdálenost
Nyní, když jsme dokončili první část, přejdeme k další. Přidejte novou běžnou sekci pomocí následujících vlastních hodnot odsazení:
- Výplň (nahoře a dole): 100px
Přidejte řádek do dvou sloupců
Struktura kolony
Pokračujte přidáním nového řádku do sekce pomocí následující struktury sloupců:
Pozadí sloupce 1
Bez přidání jakýchkoli modulů otevřete nastavení řádku a přidejte následující barvu pozadí do sloupce 1:
- Pozadí: #ffffff
Pozadí sloupce 2 (počítač)
Přidejte následující barvu pozadí do sloupce 2.
- Pozadí (počítač): #ffffff
Barva pozadí sloupce 2 při najetí myší
A změňte tuto barvu pozadí při najetí myší.
- Pozadí (Hover): #3d02ff
2 sloupcové přechodové pozadí
Do sloupce také přidejte pozadí s přechodem.
- Zarážky přechodu 1 (20 %): rgba (255,255,255,0)
- Přechodové zastávky 2 (100 %): #ff7700
dimenzování
Dále přejděte na nastavení velikosti a proveďte nějaké změny.
- Použít vlastní šířku okapu: ANO
- Šířka žlabu: 1
- Šířka: 2000 pixelů
Mezery (řádky)
Pokračujte přidáním vlastních hodnot výplně do nastavení mezer.
- Výplň (nahoře a dole): 0px
Mezery (sloupec 1)
Změňte nastavení mezer ve sloupci 1
- Výplň (nahoře a dole): 6vw (počítač), 120px (tablet a telefon)
- Výplň (vlevo a vpravo): 5VW (počítač), 80px (tablet), 50px (telefon)
Stín boxu
A také přidejte do této řady jemný stín boxu.
- Síla rozostření rámečku: 100px
- Síla rozprostření stínu rámečku: -10px
Přechody
Nakonec vytvořte plynulý přechod zvýšením doby trvání přechodu na kartě pokročilý.
- Doba trvání přechodu: 1100 ms
Duplicitní moduly řádku 1
Protože již máme všechny moduly, které potřebujeme v předchozí části, ušetříme čas jejich klonováním.
Umístěte duplikáty do sloupců řádku 2
A umístěte duplikáty na nový řádek následovně:
Upravit obsah
Ujistěte se, že jste změnili obsah vašich modulů.
Změnit pozadí tlačítka s přechodem
Změňte také přechod pozadí tlačítka.
- Zastavení přechodu 0 %: #ff653f
- Zastavení přechodu 100 %: #0066ff
- Řízení: 39 stupňů
Změnit obrázek
Vyměňte obrázek.
Změna přechodu pozadí
Nakonec upravte gradient pozadí modulu Obrázek.
- Zastavení přechodu 0%: rgba(0,2,12,0.66)
- Zastavení přechodu 57%: rgba(255,255,255,0)
přehled
Nyní, když jsme prošli všemi kroky, pojďme se naposledy podívat na konečný výsledek.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
V tomto článku jsme vám ukázali, jak změnit pozadí s přechodem při najetí myší divi. Vytvořili jsme také skvělý příklad od začátku, který používá tento přístup.
Můžete volně použít design a kresbu pro jakýkoli typ webu, který vytvoříte.
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.
...
