Přejít k hlavnímu obsahu

Jak vytvořit rolovací kolotoč člena týmu s Divi

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 701.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

Při vytváření stránky About budete pravděpodobně chtít představit také členy svého týmu. Přitom umožníte návštěvníkům komunikovat s lidmi, kteří stojí za vaším podnikáním. Pokud hledáte způsob, jak oživit sekci členů týmu ve svitku, může být tento návod pro vás. Vytvoříme karusel člena týmu s automatickým posouváním, který se bude pohybovat při procházení stránky návštěvníky. 

Demonstrace

Než se ponoříme do tutoriálu, pojďme se podívat na výsledek na různých velikostech obrazovky.

Posuňte člena týmu divi

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)
Konfigurace parametrů

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é
Konfigurace přetečení

Přidat řádek # 1

Struktura sloupců

Pokračujte v přidávání nového řádku do sekce pomocí následující struktury sloupců:

Zvolte rozložení divi

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ů
Parametr Divi Line

vzdálenost

Přidáme také vlastní horní a dolní výplň.

  • Horní výplň: 100px
  • Spodní výplň: 100px
Konfigurace divi řádkování

Do sloupce přidejte textový modul

Přidat obsah H2

Je čas přidat moduly, počínaje prvním textovým modulem. Zadejte obsah H2 podle vašeho výběru.

Seznamte se s týmem

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)
Rozteč textu Divi

Přidejte do sloupce separační modul

viditelnost

Poté přidejte separační modul. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

  • Zobrazit oddělovač: Ano
Zobrazit oddělovač divi

Linka

Poté proveďte některé změny v nastavení linky.

  • Barva čáry: # edf000
  • Styl čáry: pevná
  • Pozice řádku: Horní
Styl rozteče Divi

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
Dimenzování modulu divi line

Přidejte řádek # 2

Struktura sloupců

Do dalšího řádku! Použijte následující strukturu sloupců:

Konfigurace sloupce Divi

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%
Konfigurace šířky žlabu

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)
Konfigurace stylu řádkování

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.

Konfigurace řady parametrů Divi

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
Konfigurace zadního sloupku Divi

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.

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

  • Velikost obrázku na pozadí: Obálka
  • Pozice obrázku na pozadí: Střed
Přidejte obrázek pozadí sloupce divi

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é;
Kód css divi sloupec

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 Person do sloupce 1 a použijte jakýkoli obsah, který chcete.

Jméno osoby divi

Odstranit obrázek

Poté obrázek smažte. Místo toho použijeme obrázek na pozadí sloupce.

Odebrat divi obrázek

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
Konfigurace pozadí modulu osoby

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%
Přizpůsobení názvu modulu Divi

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
Přizpůsobení těla Divi

Nastavení textu polohy

Poté proveďte některé změny nastavení textu polohy.

  • Pozice písma: Otevřít Bezpatky
  • Barva textu pozice: # edf000
Divi pozice

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%
Rozteč modulů Divi person

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é upravit obsah.

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

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)
Řádkování divi modifikace řádkování

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
Konfigurace animace posouvání Divi

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ář

Posuňte člena týmu divi

Závěrečné myšlenky

V tomto tutoriálu jsme vám ukázali, jak být kreativní s integrovanými efekty posouvání Divi. Konkrétně jsme znovu vytvořili krásný karusel členů týmu s automatickým posouváním. Jak se návštěvníci posouvají dolů po stránce, zobrazí se další část karuselu.

Tento článek obsahuje komentáře 0

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek
0 akcie
podíl
tweet
Zadat