Chceli by ste, aby sa členovia vášho tímu prezentovali formou kolotoča s divi ?
Pri nastavovaní stránky Informácie pravdepodobne budete chcieť zahrnúť aj členov svojho tímu. Tým povoľujete Návštevníci spojiť sa s ľuďmi, ktorí stoja za vašou firmou.
Ak hľadáte spôsob, ako animovať sekciu členov tímu pri posúvaní, tento návod sa vám bude páčiť.
Znovu vytvoríme krásny kolotoč členov tímu s automatickým posúvaním, ktorý sa pohybuje ako váš Návštevníci posúvajte stránku.
Poďme.
prehľad
Predtým, ako sa ponoríme do tutoriálu, pozrime sa rýchlo na výsledok na rôznych veľkostiach obrazovky.
Stolný počítač
Verzia pre mobilné zariadenia
Začnime navrhovať s Divi
Čítajte tiež: Divi: Ako odhaliť obsah pri umiestnení kurzora myši nad oddeľovač sekcií
Pridajte novú sekciu
Vnútorní mágovia
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.
- Výplň (horná a dolná časť): 200 pixlov (počítač), 100 pixlov (tablet a telefón)
viditeľnosť
Aby sme zabezpečili, že sa v našom dizajne nebudú zobrazovať žiadne vodorovné posúvače, skryjeme pretečenia sekcií na karte Rozšírené.
- Horizontálne pretečenie: Skryté
- Vertikálne pretečenie: Skryté
Pridajte riadok #1
Štruktúra stĺpca
Pokračujte pridaním nového riadka do sekcie pomocou nasledujúcej štruktúry stĺpcov:
Šírka
Zatiaľ bez pridávania modulov, otvorte nastavenia linky, prepnite sa na kartu dizajn a zmeňte šírku a maximálnu šírku v nastaveniach veľkosti.
- Šírka: 90 %
- Maximálna šírka: 1 pixelov
vzdialenosť
Pridáme tiež vlastné vrchné a spodné čalúnenie.
- Výplň (horná a dolná časť): 100 pixelov
Pridajte do stĺpca modul Text
Pridajte obsah veľkosti H2
Je čas pridať moduly, počnúc prvým textovým modulom. Zadajte a obsah Veľkosť H2 podľa vášho výberu.
Nastavenia textu H2
Prepnúť na kartu dizajn modulu a upravte textové parametre H2 takto:
- Písmo: Quicksand
- Hmotnosť písma: polotučné
- Farba textu: #000000
- Veľkosť textu: 70 pixelov (počítač), 50 pixelov (tablet), 40 pixelov (telefón)
Pridajte do stĺpca modul "Rozdeľovač".
viditeľnosť
Potom pridajte modul delič. Uistite sa, že je povolená možnosť „Zobraziť oddeľovač“.
- Rozdeľovač relácií: ÁNO
Linka
Potom vykonajte nejaké zmeny v nastaveniach linky.
- Farba čiary: #edf000
- Štýl: Pevný
- Pozícia linky: hore
Dimenzovanie
A doplňte parametre modulu príslušnou úpravou parametrov veľkosti:
- Hmotnosť oddeľovača: 20px
- Šírka: 11 %
- Modul zarovnania: vľavo
- Výška: 20px
Pridajte riadok 2
Štruktúra stĺpca
Ďalší riadok! Použite nasledujúcu štruktúru stĺpcov:
Dimenzovanie
Bez pridania akýchkoľvek modulov otvorte nastavenia riadkov a zmeňte nastavenia veľkosti nasledujúcim spôsobom:
- Použiť vlastnú šírku odkvapu: Áno
- Šírka odkvapu: 2
- Šírka: 100 %
- Maximálna šírka: 100 %
Medzery (iba tablet a telefón)
Potom pridajte ľavú a pravú výplň iba na malé obrazovky.
- Výplň (vľavo a vpravo): 5 % (iba tablet a telefón)
Parametre stĺpca (5x)
Teraz, v nasledujúcich troch krokoch tohto návodu, urobíme nejaké zmeny v stĺpcoch. Použite tri kroky na každý zo stĺpcov vo vašom riadku.
Prechod pozadia
Najprv pridajte do každého stĺpca pozadie s prechodom.
- Zarážky prechodu (25 %): rgba (255,255,255,0)
- Zarážky prechodu (86 %): rgba (0,0,0,0.84)
- Typ: Lineárny
- Štvorcový prechod nad obrázkom na pozadí: ÁNO
Obrázok na pozadí
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í: obálka
- Pozícia obrázka na pozadí: Stred
Pridané vlastné CSS (iba tablety)
Dokončite nastavenia stĺpcov pridaním vlastného CSS do hlavného prvku (Na zobrazenie tableta iba) každého stĺpca.
Tieto riadky kódu CSS nám pomôžu umiestniť stĺpce jeden pod druhý na tablete namiesto toho, aby boli dva vedľa seba.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
Pridajte do stĺpca modul „Osoba“.
Pridajte obsah
Na zdieľanie informácií o členoch tímu použijeme modul Človek.
Pridajte prvý modul Osoba do stĺpca 1 a použite obsah de votre choix.
Odstrániť obrázok
Potom odstráňte obrázok. Namiesto toho použijeme obrázok na pozadí stĺpca.
Obrázok na pozadí
Ďalej pridáme prekryvný obrázok ako obrázok na pozadí modulu.
- Veľkosť obrázka na pozadí: obálka
- Poloha obrázka na pozadí: stred
Nastavenia názvu nadpisu
Prepnúť na kartu dizajn modul a zmeňte nastavenia textu nadpisu takto:
- Úroveň nadpisu: H3
- Písmo názvu: Quicksand
- Hrúbka písma: tučné
- Farba textu nadpisu: #ffffff
- Veľkosť textu nadpisu: 230 %
Nastavenia textu tela
Zmeňte tiež nastavenia textu tela.
- Písmo tela: Open Sans
- Farba textu: #ffffff
- Výška riadku: 2,2 em
Nastavenia textu pozície člena tímu
Ďalej vykonajte nejaké zmeny v nastaveniach textu pozície, ktorú zastáva člen tímu.
- Písmo pozície: Otvorené Žiadne
- Farba textu pozície: #edf000
vzdialenosť
Dokončite nastavenia modulu pridaním vlastných hodnôt výplne do nastavení medzery.
- Výplň: 70 % (horná časť), 10 % (dolná, ľavá a pravá strana)
Štyrikrát naklonujte modul „Osoba“.
Po dokončení modulu Osoba môžete celý modul naklonovať štyrikrát.
Umiestnite duplikáty do zostávajúcich 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
Pozri tiež: Divi: Ako vytvoriť mriežku stĺpca tekutiny pri vznášaní sa
Zmeňte veľkosť riadku č. 2
Teraz, aby sme túto čiaru zmenili na karusel s automatickým posúvaním, budeme musieť znova otvoriť nastavenia čiary a zmeniť šírku a maximálnu šírku v nastaveniach veľkosti.
- Šírka: 180 %
- Maximálna šírka: 220 % (stolný počítač), 100 % (tablet a telefón)
Pridajte horizontálny pohyb k riadku 2
Dokončite nastavenia čiar pridaním horizontálneho pohybu na posúvanie nastavení efektov na karte pokročilý pod opciou Efekty posúvania a hotovo!
- Povoliť horizontálny pohyb: Áno
- Počiatočný posun:
- Desktop: 2,5
- Tablet a telefón: 0
- Stredný posun: 0 (až 40 %)
- Koncový posun:
- Počítač: -25 (až 62 %)
- Tablet a telefón: 0
- Spúšťač pohybového efektu: 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.
Stolný počítač
Stiahnite si DIVI teraz!!!
Mobilný pohľad
Stiahnite si DIVI teraz!!!
záver
V tomto článku sme vám ukázali, ako byť kreatívny pomocou vstavaných efektov posúvania divi.
Konkrétne sme znovu vytvorili krásny kolotoč s členmi tímu s automatickým rolovaním. Keď Návštevníci rolovaním stránky sa zobrazí ďalšia časť karuselu.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie projekty. divi. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
