Pri vytváraní stránky Informácie pravdepodobne budete chcieť na nej predstaviť aj členov svojho tímu. Týmto povolíte Návštevníci komunikovať s ľuďmi, ktorí stoja za vašou firmou. Ak hľadáte spôsob, ako animovať sekciu členov tímu pri posúvaní, môže vám pomôcť tento návod. Vytvoríme karusel členov tímu s automatickým rolovaním, ktorý sa bude pohybovať, keď vy Návštevníci posúvajte stránku.
demonštrácie
Predtým, ako sa ponoríme do tutoriálu, pozrime sa na výsledok v rôznych veľkostiach obrazovky.
Začiatok počatia
Pridajte novú sekciu
vzdialenosť
Začnite pridaním novej bežnej sekcie na stránku, na ktorej pracujete. Otvorte nastavenia sekcií a pridajte vlastné polstrovanie pre rôzne veľkosti obrazoviek.
- Vrchná výplň: 200px (písací stôl), 100px (tablet a telefón)
- Spodné čalúnenie: 200px (písací stôl), 100px (tablet a telefón)
pretečeniu
Aby sme sa uistili, že sa v našom dizajne neobjaví žiadny vodorovný posúvač, skryjeme na karte rozšírené pretečenia sekcií.
- Horizontálny prepad: skrytý
- Vertikálny prepad: skrytý
Pridajte riadok č. 1
Štruktúra stĺpcov
Pokračujte v pridávaní nového riadku do sekcie pomocou nasledujúcej štruktúry stĺpcov:
dimenzovanie
Bez pridania akýchkoľvek modulov ešte otvorte nastavenia riadkov, prepnite na kartu dizajn a zmeňte šírku a maximálnu šírku v nastaveniach veľkosti.
- Šírka: 90%
- Maximálna šírka: 1580 pixlov
vzdialenosť
Pridáme tiež vlastné vrchné a spodné čalúnenie.
- Horná vypchávka: 100px
- Spodné čalúnenie: 100px
Pridajte do stĺpca textový modul
Pridajte obsah H2
Je čas pridať moduly, počnúc prvým textovým modulom. Zadajte ho obsah H2 podľa vlastného výberu.
Nastavenia textu H2
Prejdite na kartu Návrh modulu a zmeňte nastavenie textu H2 nasledovne:
- Názov písma 2: Quicksand
- Názov písma 2: polotučné
- Farba textu položky 2: # 000000
- Hlavička 2 Veľkosť textu: 70 px (na počítači), 50 pixelov (tablet), 40 pixlov (na telefóne)
Pridajte do kolóny separačný modul
viditeľnosť
Potom pridajte separačný modul. Uistite sa, že je povolená možnosť „Zobraziť oddeľovač“.
- Zobraziť oddeľovač: Áno
Linka
Potom vykonajte niektoré zmeny nastavení linky.
- Farba čiary: # edf000
- Štýl čiary: plný
- Pozícia riadku: hore
dimenzovanie
A dokončite parametre modulu príslušnou úpravou parametrov dimenzovania:
- Hmotnosť deliča: 20px
- Šírka: 11%
- Zarovnanie modulu: vľavo
- Výška: 20px
Pridajte riadok # 2
Štruktúra stĺpcov
Do ďalšieho radu! Použite nasledujúcu štruktúru stĺpcov:
dimenzovanie
Bez pridania ďalších modulov otvorte parametre linky a upravte parametre veľkosti takto:
- Použite vlastnú šírku odkvapov: Áno
- Šírka odkvapov: 2
- Šírka: 100%
- Maximálna šírka: 100%
vzdialenosť
Potom pridajte výplň vľavo a vpravo iba na menšie obrazovky.
- Výplň doľava: 5% (iba tablet a telefón)
- Pravá výplň: 5% (iba tablet a telefón)
Parametre stĺpca (5x)
Teraz v ďalších troch krokoch tohto tutoriálu urobíme nejaké zmeny v stĺpcoch. Použite tri kroky na každý zo stĺpcov v riadku.
Gradient pozadia
Najskôr do každého stĺpca pridajte gradientné pozadie.
- Farba 1: rgba (255,255,255,0)
- Farba 2: rgba (0,0,0,0,84)
- Typ gradientu: lineárny
- Počiatočná pozícia: 25%
- Koncová pozícia: 86%
- Umiestniť prechod nad obrázok na pozadí: Áno
Obrázok pozadia
Potom nahrajte obrázok pozadia podľa vášho výberu. Tento obrázok na pozadí predstavuje každého člena tímu, takže pre každý stĺpec použite iný obrázok.
- Veľkosť obrázka na pozadí: Obal
- Pozícia obrázka na pozadí: Stred
Hlavný prvok
Dokončite nastavenia stĺpca pridaním vlastných CSS do hlavného prvku tabletu v každom stĺpci. Tieto riadky kódu CSS nám pomôžu umiestniť stĺpce jeden na druhý na tablete, namiesto dvoch vedľa seba.
šírka: 100%! dôležité; okraj: 50px 0px 50px 0px! dôležité;
Pridajte do stĺpca modul osoby
Pridajte obsah
Na zdieľanie informácií o členoch tímu použijeme modul Osoba. Pridajte prvý modul Osoba do stĺpca 1 a použite obsah de votre choix.
Odstrániť obrázok
Potom obrázok vymažte. Namiesto toho použijeme obrázok na pozadí stĺpca.
Obrázok pozadia
Potom pridáme prekrytie obrázka ako obrázok na pozadí modulu. Ten, ktorý používame, nájdete stiahnutím priečinka na začiatku tohto tutoriálu.
- Veľkosť obrázka na pozadí: Obal
- Pozícia obrázka na pozadí: Stred
Nastavenia názvu nadpisu
Prejdite na kartu Návrh modulu a zmeňte nastavenie textu nadpisu takto:
- Úroveň Názov: H3
- Písmo názvu: Quicksand
- Hmotnosť písma názvu: tučné
- Farba textu názvu: #ffffff
- Veľkosť textu názvu: 230%
Nastavenia textu tela
Zmeňte tiež nastavenia textu tela.
- Telo písma: Open Sans
- Farba textu tela: #ffffff
- Výška línie tela: 2,2 em
Nastavenie polohy textu
Potom vykonajte niektoré zmeny nastavení textu polohy.
- Pozícia písma: Open Sans
- Farba textu pozície: # edf000
vzdialenosť
Dokončite nastavenia modulu pridaním vlastných hodnôt výplne do nastavení medzery.
- Vrchná vypchávka: 70%
- Spodná vypchávka: 10%
- Výplň doľava: 10%
- Pravá výplň: 10%
Duplikujte modul Osoba 4-krát
Po dokončení modulu Osoba môžete celý modul naklonovať štyrikrát.
Vložte duplikáty do zvyšných stĺpcov
Umiestnite duplicitné moduly do zostávajúcich štyroch stĺpcov riadku. Nezabudnite tiež zmeniť obsah.
Premeňte riadok na kolotoč s automatickým posúvaním
Zmeňte veľkosť riadka # 2
Teraz, aby sa tento riadok zmenil na karusel člena tímu s automatickým posúvaním, musíme znova otvoriť nastavenia riadkov a zmeniť šírku a maximálnu šírku v nastaveniach veľkosti.
- Šírka: 180%
- Maximálna šírka: 220% (stôl), 100% (tablet a telefón)
Pridajte vodorovný pohyb čiary 2
Dokončite nastavenia riadkov pridaním vodorovného pohybu k nastaveniam efektu posúvania na karte Rozšírené a máte hotovo!
- Aktivujte horizontálny pohyb: Áno
- Počiatočný posun:
- Kancelária: 2,5
- Tablet a telefón: 0
- Priemerný ofset: 0 (pri 40%)
- Koncový posun:
- Kancelária: -25 (na 62%)
- Tablet a telefón: 0
- Efekt spúšťacieho pohybu: stred prvku
prehľad
Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.
kancelária
záverečné myšlienky
V tomto návode sme vám ukázali, ako byť kreatívny pomocou vstavaných efektov posúvania divi. Konkrétne sme znovu vytvorili krásny kolotoč členov tímu s automatickým rolovaním. Keď Návštevníci rolovaním stránky sa zobrazí ďalšia časť karuselu.
