Pri navrhovaní stránky služieb sa chcete uistiť, že vaše Návštevníci všimnite si všetky rôzne služby, ktoré poskytujete. V mnohých prípadoch to bude len jedna konkrétna služba, ktorú hľadajú, ale ak vo svojej štruktúre služieb poskytnete efektívny spôsob, je pravdepodobnejšie, že Návštevníci vysporiadať sa s nimi všetkými.
V tomto návode vám ukážeme, ako byť kreatívny s efektmi posúvania divi a vytvoriť bezproblémový prechod služby. Budete si tiež môcť zadarmo stiahnuť súbor JSON!
Poďme.
Možný výsledok
Predtým, ako sa ponoríme do tutoriálu, pozrime sa na výsledok v rôznych veľkostiach obrazovky.
1, znovu vytvoriť štruktúru prvkov
Pridajte časť # 1
vzdialenosť
Začnite pridaním novej sekcie na stránku, na ktorej pracujete. Otvorte nastavenia sekcie a zmeňte hodnoty výplne na rôznych veľkostiach obrazovky.
- Vrchná výplň: 80px (stolné a tablety), 0px (telefón)
- Spodné čalúnenie: 80px
Pridať nový riadok
Štruktúra stĺpcov
Pokračujte v pridávaní nového riadku pomocou nasledujúcej štruktúry stĺpcov:
dimenzovanie
Bez pridania ďalších modulov otvorte parametre linky a vykonajte nasledujúce zmeny parametrov dimenzovania:
- Použite vlastnú šírku odkvapov: Áno
- Šírka odkvapov: 1
- Šírka: 90%
- Maximálna šírka: 1580 pixlov
vzdialenosť
Potom pridajte vlastný horný a dolný okraj.
- Horný okraj: 200px
- Dolný okraj: 200px
Pridajte textový stĺpec do stĺpca 1
Pridajte obsah H2
Je čas pridať moduly, počnúc textovým modulom v stĺpci 1. Zadajte obsah H2 podľa vlastného výberu.
Nastavenia textu H2
Prejdite na kartu Návrh modulu a zmeňte nastavenie textu H2 nasledovne:
- Hlava 2 Polícia: štvrťročne
- Hlavička 2 Veľkosť textu: 80 pixelov (stolné počítače), 50 pixelov (tablety), 40 pixlov (telefóny)
- Výška čiary 2 hlavy: 1.2em
vzdialenosť
Potom pridajte dolný okraj do tabletu a do telefónu.
- Dolný okraj: 50 pixelov (iba tablet a telefón)
Pridajte textový stĺpec do stĺpca 2
Pridajte obsah
Prejdime k druhému stĺpcu. Prvý modul, ktorý potrebujeme, je textový modul s určitým obsah popis.
Nastavenia textu
Prepnite na kartu návrhu modulu a podľa toho zmeňte nastavenie textu:
- Písmo textu: kabína
- Štýl písma textu: veľké písmená
- Farba textu: # 000000
- Veľkosť textu: 18 px (na počítači), 15 pixelov (tablet), 13 pixlov (telefón)
- Medzery v texte: 3px (na počítači), 1px (na tablete a telefóne)
- Výška riadku textu: 3em
Pridajte separačný modul do stĺpca 2
viditeľnosť
Ďalším a posledným modulom, ktorý v tomto stĺpci potrebujeme, je separačný modul. Uistite sa, že je povolená možnosť „Zobraziť oddeľovač“.
- Zobraziť oddeľovač: Áno
Linka
Potom zmeniť farbu čiary modulu.
- Farba čiary: # 000000
dimenzovanie
Potom vykonajte niektoré zmeny parametrov veľkosti.
- Hmotnosť deliča: 3px
- Šírka: 28%
vzdialenosť
Pridáme tiež horný okraj.
- Horný okraj: 10px
Pridajte časť # 2
vzdialenosť
Prejdime k ďalšej pravidelnej časti. Odstráňte z časti predvolené horné polstrovanie.
- Horná vypchávka: 0px
pretečeniu
Tiež skryte prepady.
- Horizontálny prepad: skrytý
- Vertikálny prepad: skrytý
Pridať nový riadok
Štruktúra stĺpcov
Pokračujte v pridávaní prvého riadku pomocou nasledujúcej štruktúry stĺpcov:
dimenzovanie
Bez pridania ďalších modulov otvorte parametre linky, získajte prístup k parametrom dimenzovania a vykonajte nasledujúce úpravy:
- Použite vlastnú šírku odkvapov: Áno
- Šírka odkvapov: 1
- Vyrovnajte výšky stĺpcov: Áno
- Šírka: 90%
- Maximálna šírka: 1580 pixlov
vzdialenosť
Potom odstráňte všetky predvolené vrchné a spodné čalúnenie.
- Horná vypchávka: 0px
- Spodné čalúnenie: 0px
Nastavenia stĺpca 1
Farba pozadia
Potom otvorte nastavenia pre stĺpec 1 a zmeňte farbu pozadia.
- Farba pozadia: # f7f7f7
vzdialenosť
Dokončite nastavenia stĺpca pridaním vlastných hodnôt výplne pre rôzne veľkosti obrazovky.
- 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)
- Výplň doľava: 8%
- Pravá výplň: 8%
Nastavenia stĺpca 2
vzdialenosť
Pokračujte otvorením nastavení v stĺpci 2. Prejdite na kartu rozšírené a pridajte vlastné hodnoty výplne pre rôzne veľkosti obrazovky.
- Vrchné čalúnenie: 100px (stolné počítače), 50px (tablety a telefóny)
- Spodné čalúnenie: 200px
- Čalúnenie vľavo: 150 px (stôl), 0 px (tablet a telefón)
Pridajte separačný modul do stĺpca 1
viditeľnosť
V prvom stĺpci je prvým modulom, ktorý potrebujeme, separačný modul. Uistite sa, že je povolená možnosť „Zobraziť oddeľovač“.
- Zobraziť oddeľovač: Áno
Linka
Potom zmeniť farbu čiary modulu.
- Farba čiary: # 000000
dimenzovanie
Vykonajte tiež zmeny parametrov veľkosti.
- Hmotnosť deliča: 3px
- Šírka: 50%
Pridajte textový stĺpec do stĺpca 1
Pridajte obsah H3
Ďalší modul, ktorý potrebujeme v stĺpci 1, je textový modul s obsah H3.
Nastavenia textu H3
Prejdite na kartu návrhu modulu a zmeňte nastavenie textu H3:
- Hlava 3 Polícia: štvrťročne
- Farba textu položky 3: # 000000
- Položka 3 Veľkosť textu: 50 pixelov (stolné počítače), 40 pixelov (tablety), 35 pixlov (telefóny)
- Výška čiary 3 hlavy: 1.1em
Pridajte textový stĺpec do stĺpca 2
Pridajte obsah
V druhom stĺpci, prvý modul, ktorý potrebujeme, je textový modul s určitým obsahom popisu.
Nastavenia textu
Zmeňte nastavenia textu modulu takto:
- Písmo textu: kabína
- Štýl písma textu: veľké písmená
- Veľkosť textu: 18 px (na počítači), 15 pixelov (tablet), 13 pixlov (telefón)
- Medzery v texte: 3px (na počítači), 1px (na tablete a telefóne)
- Výška riadku textu: 3em
Pridajte stĺpcový modul do stĺpca 2
Pridajte kópiu
Ďalším a posledným modulom, ktorý potrebujeme, je tlačidlový modul. Zadajte kópiu podľa vášho výberu.
Nastavenia tlačidiel
Potom štýl tlačidlo.
- Pre tlačidlo použite vlastné štýly: Áno
- Veľkosť textu tlačidla: 20 pixlov
- Farba textu tlačidla: #ffffff
- Farba pozadia tlačidla: # 000000
- Šírka okraja tlačidla: 0px
- Písmo tlačidla: štvrťročne
- Hmotnosť písma tlačidla: tučné
vzdialenosť
Pridajte tiež vlastné čalúnenie.
- Horná vypchávka: 50px
- Spodné čalúnenie: 50px
- Ľavé čalúnenie: 100px
- Pravá výplň: 100px
poloha
A podľa toho premiestnite tlačidlo:
- Pozícia: Absolútna
- Umiestnenie: vľavo dole
Klonujte riadok toľkokrát, koľkokrát je to potrebné
Po dokončení celého riadku a všetkých jeho modulov môžete celý riadok naklonovať trikrát.
Zmeňte všetok obsah
Nezabudnite upravovať všetok obsah v duplikovaných riadkoch.
2. Použite posúvacie efekty
Efekty posúvania v prvom riadku
Horizontálny pohyb
Po dokončení všetkých riadkov v sekcii je čas pridať efekty rolovania. Otvorte prvý riadok sekcie a pridajte vodorovný pohyb.
- Aktivujte horizontálny pohyb: Áno
- Počiatočný posun: -5
- Priemerný ofset: 0 (pri 26%)
- Koncový posun: 0
- Efekt spúšťacieho pohybu: stred prvku
Stmievanie a zoslabovanie
Použite tiež efekt stmievania prichádzajúcich a odchádzajúcich.
- Aktivácia stmievania a vypínania: Áno
- Počiatočná opacita: 100%
- Priemerná opacita: 100% (pri 50%)
- Konečná opacita: 0% (až 53%)
- Efekt spúšťacieho pohybu: stred prvku
Efekty posúvania v strednom riadku
Vertikálny pohyb
Ďalej pridáme efekty rolovania na všetky riadky medzi prvým a posledným riadkom sekcie. Najprv použite vertikálny pohyb:
- Aktivujte vertikálny pohyb: Áno
- Počiatočný posun: -4
- Priemerný ofset: 0 (pri 26%)
- Koncový posun: 0
- Efekt spúšťania pohybu: stred prvku
Stmievanie a zoslabovanie
Taktiež aktivujte efekt stmievania.
- Aktivácia stmievania a vypínania: Áno
- Počiatočná opacita: 0%
- Priemerná opacita: 100% (od 27% do 50%)
- Koncový posun: 0 (pri 53%)
- Efekt spúšťacieho pohybu: stred prvku
Efekty posúvania na poslednom riadku
Vertikálny pohyb
Potom otvorte posledný riadok sekcie a pridajte nasledujúci vertikálny pohyb:
- Aktivujte vertikálny pohyb: Áno
- Počiatočný posun: -4
- Priemerný ofset: 0 (pri 26%)
- Koncový posun: 0
- Efekt spúšťacieho pohybu: stred prvku
Stmievanie a zoslabovanie
S efektom prichádzajúcich a odchádzajúcich fade a máte hotovo!
- Aktivácia stmievania a vypínania: Áno
- Počiatočná opacita: 0%
- Priemerná opacita: 100% (od 27% do 50%)
- Konečná opacita: 100% (až 53%)
- Efekt spúšťacieho pohybu: stred prvku
Konečný výsledok
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.
záverečné myšlienky
V tomto článku sme vám ukázali, ako vytvoriť krásny prechod podávania pomocou efektov posúvania divi. Ešte predtým, ako jedno podanie zmizne, začne sa objavovať druhé, čo poskytuje pekný prechod, ktorý je nenáročný na oči. Tento prístup vám pomôže vyzdvihnúť každú službu na individuálnej úrovni. Tiež ste si mohli zadarmo stiahnuť súbor JSON! Ak máte nejaké otázky alebo návrhy, neváhajte zanechať komentár v sekcii komentárov nižšie.
