Při navrhování stránky služeb se chcete ujistit, že vaše Návštěvníci všimněte si všech různých služeb, které poskytujete. V mnoha případech to bude pouze jedna konkrétní služba, kterou hledají, ale pokud ve své struktuře služeb poskytnete efektivní způsob, je pravděpodobnější, že Návštěvníci vypořádat se s nimi všemi.
V tomto tutoriálu vám ukážeme, jak být kreativní s rolovacími efekty divi a vytvořit bezproblémový přechod služby. Budete si také moci zdarma stáhnout soubor JSON!
Pojďme.
Možný výsledek
Než se ponoříme do tutoriálu, pojďme se podívat na výsledek na různých velikostech obrazovky.
1, znovu vytvořte strukturu prvků
Přidat oddíl # 1
vzdálenost
Začněte přidáním nové sekce na stránku, na které pracujete. Otevřete nastavení sekce a změňte hodnoty výplně na různých velikostech obrazovky.
- Horní výplň: 80px (stolní a tablet), 0px (telefon)
- Spodní výplň: 80px
Přidat nový řádek
Struktura sloupců
Pokračujte v přidávání nového řádku pomocí následující struktury sloupců:
dimenzování
Bez přidání dalších modulů otevřete parametry linky a v parametrech kótování použijte následující změny:
- Použít vlastní šířku okapu: Ano
- Šířka okapu: 1
- Šířka: 90%
- Maximální šířka: 1580 pixelů
vzdálenost
Poté přidejte vlastní horní a dolní okraj.
- Horní okraj: 200px
- Dolní okraj: 200px
Přidejte textový sloupec do sloupce 1
Přidat obsah H2
Je čas přidat moduly, počínaje textovým modulem ve sloupci 1. Zadejte obsah H2 dle vašeho výběru.
Nastavení textu H2
Přejděte na kartu Návrh modulu a změňte nastavení textu H2 následujícím způsobem:
- Hlava 2 Policie: čtvrtletní
- Záhlaví 2 Velikost textu: 80px (na ploše), 50px (tablet), 40px (telefon)
- Výška řádku 2 hlavy: 1.2em
vzdálenost
Poté přidejte spodní okraj tabletu a telefonu.
- Dolní okraj: 50 pixelů (pouze tablet a telefon)
Přidejte textový sloupec do sloupce 2
Přidat obsah
Přejdeme k druhému sloupci. První modul, který potřebujeme, je textový modul s určitým obsah popis.
Nastavení textu
Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení textu:
- Písmo textu: kabina
- Styl písma textu: velká písmena
- Barva textu: # 000000
- Velikost textu: 18 px (stolní počítač), 15 pixelů (tablet), 13 pixelů (telefon)
- Mezery mezi písmeny: 3px (na ploše), 1px (na tabletu a telefonu)
- Výška řádku textu: 3em
Do sloupce 2 přidejte separační modul
viditelnost
Další a poslední modul, který v tomto sloupci potřebujeme, je separační modul. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.
- Zobrazit oddělovač: Ano
Linka
Poté změňte barvu čáry modulu.
- Barva čáry: # 000000
dimenzování
Poté proveďte některé změny parametrů velikosti.
- Hmotnost děliče: 3px
- Šířka: 28%
vzdálenost
Přidáme také horní okraj.
- Horní okraj: 10px
Přidat oddíl # 2
vzdálenost
Pojďme k další pravidelné části. Odstraňte výchozí horní polstrování ze sekce.
- Horní výplň: 0px
přetečení
Také skrýt přepady.
- Horizontální přetečení: skryté
- Vertikální přetečení: skryté
Přidat nový řádek
Struktura sloupců
Pokračujte v přidávání prvního řádku pomocí následující struktury sloupců:
dimenzování
Bez přidání dalších modulů otevřete parametry linky, otevřete parametry kótování a proveďte následující úpravy:
- Použít vlastní šířku okapu: Ano
- Šířka okapu: 1
- Vyrovnání výšek sloupců: Ano
- Šířka: 90%
- Maximální šířka: 1580 pixelů
vzdálenost
Poté odeberte všechny výchozí horní a dolní výplně.
- Horní výplň: 0px
- Spodní výplň: 0px
Nastavení sloupce 1
Barva pozadí
Poté otevřete nastavení pro sloupec 1 a změňte barvu pozadí.
- Barva pozadí: # f7f7f7
vzdálenost
Dokončete nastavení sloupce přidáním vlastních hodnot výplně na různé velikosti obrazovky.
- Horní výplň: 200px (stůl), 100px (tablet a telefon)
- Spodní výplň: 200px (stůl), 100px (tablet a telefon)
- Výplň vlevo: 8%
- Pravá výplň: 8%
Nastavení sloupce 2
vzdálenost
Pokračujte otevřením nastavení ve sloupci 2. Přejděte na kartu Upřesnit a přidejte vlastní hodnoty výplně pro různé velikosti obrazovky.
- Horní výplň: 100 px (stolní počítač), 50 pixelů (tablet a telefon)
- Spodní výplň: 200px
- Levé čalounění: 150 px (stůl), 0 px (tablet a telefon)
Do sloupce 1 přidejte separační modul
viditelnost
V prvním sloupci je prvním modulem, který potřebujeme, separační modul. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.
- Zobrazit oddělovač: Ano
Linka
Poté změňte barvu čáry modulu.
- Barva čáry: # 000000
dimenzování
Proveďte také změny parametrů velikosti.
- Hmotnost děliče: 3px
- Šířka: 50%
Přidejte textový sloupec do sloupce 1
Přidat obsah H3
Dalším modulem, který potřebujeme ve sloupci 1, je textový modul obsah H3.
Nastavení textu H3
Přepněte na kartu návrhu modulu a změňte nastavení textu H3:
- Hlava 3 Policie: čtvrtletní
- Barva textu položky 3: # 000000
- Položka 3 Velikost textu: 50 pixelů (stolní), 40 pixelů (tablet), 35 pixelů (telefon)
- Výška řádku 3 hlavy: 1.1em
Přidejte textový sloupec do sloupce 2
Přidat obsah
Ve druhém sloupci je prvním modulem, který potřebujeme, textový modul s určitým obsahem popisu.
Nastavení textu
Změňte nastavení textu modulu následujícím způsobem:
- Písmo textu: kabina
- Styl písma textu: velká písmena
- Velikost textu: 18 px (stolní počítač), 15 pixelů (tablet), 13 pixelů (telefon)
- Mezery mezi písmeny: 3px (na ploše), 1px (na tabletu a telefonu)
- Výška řádku textu: 3em
Přidejte sloupcový modul do sloupce 2
Přidat kopii
Další a poslední modul, který potřebujeme, je tlačítkový modul. Zadejte kopii podle vašeho výběru.
Nastavení tlačítek
Pak styl tlačítko.
- Pro tlačítko použijte vlastní styly: Ano
- Velikost textu tlačítka: 20 pixelů
- Barva textu tlačítka: #ffffff
- Barva pozadí tlačítka: # 000000
- Šířka ohraničení tlačítka: 0px
- Tlačítko Písmo: Čtvrtletně
- Hmotnost písma tlačítka: tučně
vzdálenost
Přidejte také vlastní polstrování.
- Horní výplň: 50px
- Spodní výplň: 50px
- Levá výplň: 100px
- Pravá výplň: 100px
Pozice
A podle toho umístěte tlačítko:
- Pozice: Absolutní
- Umístění: vlevo dole
Klonujte řádek tolikrát, kolikrát je třeba
Jakmile dokončíte celou řadu a všechny její moduly, můžete celou řadu naklonovat třikrát.
Změňte veškerý obsah
Ujistěte se, že veškerý obsah upravujete v duplikovaných řádcích.
2. Použijte efekty posouvání
Efekty posouvání v prvním řádku
Horizontální pohyb
Jakmile dokončíte všechny řádky ve vaší sekci, je čas přidat rolovací efekty. Otevřete první řádek sekce a přidejte vodorovný pohyb.
- Aktivujte horizontální pohyb: Ano
- Počáteční posun: -5
- Průměrný ofset: 0 (při 26%)
- Koncový offset: 0
- Efekt spouštěcího pohybu: střed prvku
Zmizet a odejít
Použijte také efekt příchozí a odchozí fade.
- Aktivace a vyblednutí: Ano
- Počáteční krytí: 100%
- Průměrná neprůhlednost: 100% (při 50%)
- Konečná krytí: 0% (až 53%)
- Efekt spouštěcího pohybu: střed prvku
Efekty rolování ve středních řadách
Vertikální pohyb
Dále přidáme efekty posouvání na všechny řádky mezi prvním a posledním řádkem sekce. Nejprve použijte svislý pohyb:
- Aktivujte svislý pohyb: Ano
- Počáteční posun: -4
- Průměrný ofset: 0 (při 26%)
- Koncový offset: 0
- Efekt spouštění pohybu: uprostřed prvku
Zmizet a odejít
Také aktivujte efekt zesílení a vysunutí.
- Aktivace a vyblednutí: Ano
- Počáteční krytí: 0%
- Průměrná neprůhlednost: 100% (od 27% do 50%)
- Koncový offset: 0 (při 53%)
- Efekt spouštěcího pohybu: střed prvku
Efekty posunu na poslední řádek
Vertikální pohyb
Poté otevřete poslední řádek sekce a přidejte následující vertikální pohyb:
- Aktivujte svislý pohyb: Ano
- Počáteční posun: -4
- Průměrný ofset: 0 (při 26%)
- Koncový offset: 0
- Efekt spouštěcího pohybu: střed prvku
Zmizet a odejít
S příchozím a odchozím efektem fade a jste hotovi!
- Aktivace a vyblednutí: Ano
- Počáteční krytí: 0%
- Průměrná neprůhlednost: 100% (od 27% do 50%)
- Konečná krytí: 100% (až 53%)
- Efekt spouštěcího pohybu: střed prvku
Konečný výsledek
Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.
Závěrečné myšlenky
V tomto článku jsme vám ukázali, jak vytvořit krásný přechod pro podávání s efekty posouvání divi. Ještě předtím, než jedno podání zmizí, začne se objevovat druhé, což poskytuje pěkný přechod, který je nenáročný na oči. Tento přístup vám pomůže zvýraznit každou službu na individuální úrovni. Také jste si mohli zdarma stáhnout soubor JSON! Máte-li jakékoli dotazy nebo návrhy, neváhejte je zanechat komentář v sekci komentářů níže.
