Chtěli byste, aby se členové vašeho týmu prezentovali formou kolotoče s divi ?
Při nastavování stránky O aplikaci budete pravděpodobně chtít zahrnout i členy svého týmu. Tím povolíte Návštěvníci spojit se 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 si zamilujete.
Chystáme se znovu vytvořit krásný kolotoč členů týmu s automatickým posouváním, který se pohybuje jako váš Návštěvníci posouvat stránku.
Pojďme.
přehled
Než se ponoříme do tutoriálu, pojďme se rychle podívat na výsledek na různých velikostech obrazovky.
Stolní počítač
Mobilní verze
Začněme navrhovat s Divi
Čtěte také: Divi: Jak odhalit obsah při najetí myší na oddělovač sekcí
Přidejte novou sekci
Vnitřní mágové
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.
- Výplň (nahoře a dole): 200 pixelů (počítač), 100 pixelů (tablet a telefon)
viditelnost
Abychom zajistili, že se v našem návrhu nebudou zobrazovat žádné vodorovné posuvníky, skryjeme přetečení sekcí na kartě Upřesnit.
- Horizontální přetečení: Skryté
- Vertikální přetečení: Skryté
Přidejte řádek #1
Struktura kolony
Pokračujte přidáním nového řádku do sekce pomocí následující struktury sloupců:
Šířka
Zatím bez přidávání modulů otevřete nastavení linky, přepněte na záložku Design a změňte šířku a maximální šířku v nastavení velikosti.
- Šířka: 90 %
- Maximální šířka: 1 pixelů
vzdálenost
Přidáme také vlastní horní a dolní výplň.
- Výplň (nahoře a dole): 100px
Přidejte do sloupce modul Text
Přidejte obsah velikosti H2
Je čas přidat moduly, počínaje prvním textovým modulem. Vložte obsah Velikost H2 dle vašeho výběru.
Nastavení textu H2
Přepnout na kartu Design modulu a upravte textové parametry H2 následovně:
- Písmo: Quicksand
- Tloušťka písma: Polotučné
- Barva textu: #000000
- Velikost textu: 70 pixelů (počítač), 50 pixelů (tablet), 40 pixelů (telefon)
Přidejte do sloupce modul "Divider".
viditelnost
Poté přidejte modul dělič. Ujistěte se, že je povolena možnost „Zobrazit oddělovač“.
- Oddělovač pořadu: ANO
Linka
Poté proveďte nějaké změny v nastavení linky.
- Barva čáry: #edf000
- Styl: Pevný
- Pozice čáry: nahoře
Rozměry
A doplňte parametry modulu odpovídající úpravou parametrů velikosti:
- Hmotnost oddělovače: 20px
- Šířka: 11 %
- Zarovnávací modul: vlevo
- Výška: 20px
Přidat řádek 2
Struktura kolony
Další řada! Použijte následující strukturu sloupců:
Rozměry
Bez přidání jakýchkoli modulů ještě otevřete nastavení řádku a změňte nastavení velikosti následujícím způsobem:
- Použít vlastní šířku okapu: Ano
- Šířka žlabu: 2
- Šířka: 100 %
- Max. šířka: 100 %
Mezery (pouze tablet a telefon)
Dále přidejte levé a pravé odsazení pouze na malé velikosti obrazovky.
- Výplň (levá a pravá): 5 % (pouze tablet a telefon)
Parametry sloupce (5x)
Nyní, v následujících třech krocích tohoto tutoriálu, provedeme nějaké změny ve sloupcích. Použijte tři kroky na každý ze sloupců v řádku.
Přechod na pozadí
Nejprve přidejte do každého sloupce pozadí s přechodem.
- Zarážky přechodu (25 %): rgba (255,255,255,0)
- Zarážky přechodu (86 %): rgba (0,0,0,0.84)
- Typ: Lineární
- Čtvercový přechod nad obrázkem 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
Přidáno vlastní CSS (pouze tablet)
Dokončete nastavení sloupců přidáním vlastního CSS do hlavního prvku (Pro zobrazení Tablet pouze) 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.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
Přidejte do sloupce modul „Osoba“.
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í
Dále přidáme překryvný obrázek jako obrázek na pozadí modulu.
- Velikost obrázku na pozadí: Obálka
- Umístění obrázku na pozadí: střed
Nastavení textu nadpisu
Přepnout na kartu Design modulu a změňte nastavení textu nadpisu následovně:
- Úroveň nadpisu: H3
- Písmo názvu: Quicksand
- Tloušťka písma: Tučné
- Barva textu nadpisu: #ffffff
- Velikost textu nadpisu: 230 %
Nastavení textu těla
Změňte také nastavení textu těla.
- Body Font: Open Sans
- Barva textu: #ffffff
- Výška řádku: 2,2 em
Nastavení textu příspěvku člena týmu
Dále proveďte nějaké změny v nastavení textu pozice, kterou zastává člen týmu.
- Písmo pozice: Otevřít bez
- Barva textu pozice: #edf000
vzdálenost
A dokončete nastavení modulu přidáním vlastních hodnot výplně do nastavení mezer.
- Polstrování: 70 % (nahoře), 10 % (dole, vlevo a vpravo)
Čtyřikrát naklonujte modul „Person“.
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 karusel s automatickým posouváním
Viz též: Divi: Jak vytvořit mřížku sloupce tekutiny při vznášení
Změňte velikost řádku #2
Nyní, abychom z této čáry udělali karusel s automatickým posouváním, budeme muset znovu otevřít nastavení čáry a změnit šířku a maximální šířku v nastavení velikosti.
- Šířka: 180 %
- Maximální šířka: 220 % (počítač), 100 % (tablet a telefon)
Přidejte horizontální pohyb k řádku 2
Dokončete nastavení čar přidáním vodorovného pohybu pro posouvání nastavení efektů na kartě pokročilý pod opcí Posunujte efekty a máte hotovo!
- Povolit horizontální pohyb: Ano
- Počáteční offset:
- Desktop: 2,5
- Tablet a telefon: 0
- Střední offset: 0 (až 40 %)
- Koncový posun:
- Počítač: -25 (až 62 %)
- Tablet a telefon: 0
- Spouštění efektu pohybu: Uprostř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.
Stolní počítač
Stáhnout DIVI hned!!!
Mobilní pohled
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
V tomto článku jsme vám ukázali, jak být kreativní s vestavěnými efekty posouvání divi.
Konkrétně jsme znovu vytvořili krásný kolotoč s členy týmu s automatickým posouváním. Když Návštěvníci posuňte stránku, objeví se další část karuselu.
Doufáme, že vás tento tutoriál inspiruje pro vaše další projekty. divi. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.
Neváhejte se také podívat na našeho průvodce na Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
