Při vytváření stránky O aplikaci na ní pravděpodobně budete chtít představit členy svého týmu. Tímto povolíte Návštěvníci komunikovat s lidmi, kteří stojí za vaší firmou. Pokud hledáte způsob, jak animovat sekci členů vašeho týmu při posouvání, tento tutoriál může být pro vás. Vytvoříme karusel členů týmu s automatickým posouváním, který se pohybuje, když vy Návštěvníci posouvat stránku.
Demonstrace
Než se ponoříme do tutoriálu, pojďme se podívat na výsledek na různých velikostech obrazovky.
Začátek početí
Přidejte novou sekci
vzdálenost
Začněte přidáním nové běžné sekce na stránku, na které pracujete. Otevřete nastavení sekce a přidejte vlastní výplň pro různé velikosti obrazovky.
- Horní výplň: 200px (stůl), 100px (tablet a telefon)
- Spodní výplň: 200px (stůl), 100px (tablet a telefon)
přetečení
Abychom se ujistili, že se v našem designu neobjeví žádný vodorovný posuvník, skryjeme přetečení sekcí na kartě Upřesnit.
- Horizontální přetečení: skryté
- Vertikální přetečení: skryté
Přidat řádek # 1
Struktura sloupců
Pokračujte v přidávání nového řádku do sekce pomocí následující struktury sloupců:
dimenzování
Bez přidání jakýchkoli modulů ještě otevřete nastavení řádků, přepněte na kartu Návrh a změňte šířku a maximální šířku v nastavení velikosti.
- Šířka: 90%
- Maximální šířka: 1580 pixelů
vzdálenost
Přidáme také vlastní horní a dolní výplň.
- Horní výplň: 100px
- Spodní výplň: 100px
Do sloupce přidejte textový modul
Přidat obsah H2
Je čas přidat moduly, počínaje prvním textovým modulem. Zadejte jej 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:
- Název písma 2: Quicksand
- Název písma 2: polotučné
- Barva textu položky 2: # 000000
- Záhlaví 2 Velikost textu: 70px (na ploše), 50px (tablet), 40px (telefon)
Přidejte do sloupce separační modul
viditelnost
Poté přidejte separační modul. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.
- Zobrazit oddělovač: Ano
Linka
Poté proveďte některé změny v nastavení linky.
- Barva čáry: # edf000
- Styl čáry: pevná
- Pozice řádku: Horní
dimenzování
A dokončete parametry modulu příslušnou úpravou parametrů kótování:
- Hmotnost děliče: 20px
- Šířka: 11%
- Zarovnání modulu: vlevo
- Výška: 20px
Přidejte řádek # 2
Struktura sloupců
Do dalšího řádku! Použijte následující strukturu sloupců:
dimenzování
Bez přidání dalších modulů otevřete parametry linky a upravte parametry velikosti takto:
- Použít vlastní šířku okapu: Ano
- Šířka okapu: 2
- Šířka: 100%
- Maximální šířka: 100%
vzdálenost
Poté přidejte výplň vlevo a vpravo pouze na menších obrazovkách.
- Výplň vlevo: 5% (pouze tablet a telefon)
- Pravá výplň: 5% (pouze tablet a telefon)
Parametry sloupce (5x)
Nyní v příštích třech krocích tohoto kurzu provedeme některé změny ve sloupcích. Použijte tři kroky na každý ze sloupců v řádku.
Přechodové pozadí
Nejprve do každého sloupce přidejte pozadí s přechodem.
- Barva 1: rgba (255,255,255,0)
- Barva 2: rgba (0,0,0,0,84)
- Typ přechodu: lineární
- Počáteční pozice: 25%
- Koncová pozice: 86%
- Umístěte přechod na obrázek pozadí: Ano
Obrázek na pozadí
Poté nahrajte obrázek na pozadí podle vašeho výběru. Tento obrázek na pozadí představuje každého člena týmu, takže pro každý sloupec použijte jiný obrázek.
- Velikost obrázku na pozadí: Obálka
- Pozice obrázku na pozadí: Střed
Hlavní prvek
Dokončete nastavení sloupce přidáním vlastního CSS do hlavního prvku tabletu každého sloupce. Tyto řádky kódu CSS nám pomohou umístit sloupce jeden pod druhý na tabletu, místo aby byly dva vedle sebe.
šířka: 100%! důležité; okraj: 50px 0px 50px 0px! důležité;
Do sloupce přidejte modul osoby
Přidat obsah
Ke sdílení informací o členech týmu použijeme modul Osoba. Přidejte první modul Osoba do sloupce 1 a použijte obsah De votre choix.
Odstranit obrázek
Poté obrázek smažte. Místo toho použijeme obrázek na pozadí sloupce.
Obrázek na pozadí
Poté přidáme překryvný obrázek jako obrázek na pozadí modulu. Ten, který používáme, najdete stažením složky na začátku tohoto tutoriálu.
- Velikost obrázku na pozadí: Obálka
- Pozice obrázku na pozadí: Střed
Nastavení textu nadpisu
Přejděte na kartu Návrh modulu a změňte nastavení textu nadpisu následujícím způsobem:
- Úroveň titulu: H3
- Písmo názvu: Quicksand
- Hmotnost písma nadpisu: tučně
- Barva textu nadpisu: #ffffff
- Velikost textu nadpisu: 230%
Nastavení textu těla
Změňte také nastavení textu těla.
- Body písmo: Open Sans
- Barva textu těla: #ffffff
- Výška linie těla: 2,2 em
Nastavení textu polohy
Poté proveďte některé změny nastavení textu polohy.
- Pozice písma: Otevřít Bezpatky
- Barva textu pozice: # edf000
vzdálenost
A dokončete nastavení modulu přidáním vlastních hodnot výplně do nastavení mezer.
- Horní výplň: 70%
- Dolní výplň: 10%
- Výplň vlevo: 10%
- Pravá výplň: 10%
Duplikujte modul Osoba 4krát
Jakmile dokončíte modul Osoba, můžete celý modul klonovat čtyřikrát.
Umístěte duplikáty do zbývajících sloupců
Umístěte duplicitní moduly do zbývajících čtyř sloupců řádku. Nezapomeňte také změnit obsah.
Proměňte řádek v kolotoč s automatickým posuvem
Změňte velikost řádku 2
Nyní, abychom tento řádek změnili na karusel členů týmu s automatickým posouváním, musíme znovu otevřít nastavení řádku a změnit šířku a maximální šířku v nastavení velikosti.
- Šířka: 180%
- Maximální šířka: 220% (stůl), 100% (tablet a telefon)
Přidat vodorovný pohyb linky # 2
Dokončete nastavení čáry přidáním vodorovného pohybu k nastavení efektu posouvání na kartě Upřesnit a jste hotovi!
- Aktivujte horizontální pohyb: Ano
- Počáteční posun:
- Kancelář: 2,5
- Tablet a telefon: 0
- Průměrný ofset: 0 (při 40%)
- Koncový offset:
- Kancelář: -25 (na 62%)
- Tablet a telefon: 0
- Efekt spouštěcího pohybu: střed prvku
přehled
Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.
Kancelář
Závěrečné myšlenky
V tomto tutoriálu jsme vám ukázali, jak být kreativní s vestavěnými rolovacími efekty divi. Konkrétně jsme znovu vytvořili krásný kolotoč členů týmu s automatickým posouváním. Když Návštěvníci posuňte stránku, objeví se další část karuselu.
