Snažili jste se někdy vytvořit vertikální sledovač pokroku namísto tradičního posuvníku? Pokud ne, projděte si tento článek až do konce a zjistěte, jak jej vytvořit Elementor Pro.
Než se ale pustíme do hlavního tématu, připomeňme si nejprve, co je tracker pokroku.
Sledovač průběhu je indikátor průběhu, který informuje uživatele o průběhu probíhajícího procesu, jako je instalace aplikace, aktualizace, čtení článku atd. . A jsou dva typy:
- le lineární sledovač pokroku
- le kruhový sledovač pokroku
Můžete si také přečíst: Elementor: Jak vytvořit efektovou kartu z portfolia
V tomto tutoriálu vám ukážeme, jak vložit vertikální indikátor průběhu krok za krokem do sekce obsahující archivy příspěvků.
Vytvořte sledovač pokroku
Na kartě prvky z panelu nástrojůElementor, zadejte do vyhledávacího pole Sledování pokroku. Poté widget přetáhněte do sekce.
Poté se zobrazí indikátor průběhu. Ve výchozím nastavení je orientován vodorovně. Ale nebojte se, později uvidíte, jak to uspořádat vertikálně.
Ukazatel průběhu, který se vytváří, proveďte nezbytné úpravy, abyste dosáhli požadovaného výsledku.
Viz také: Elementor: Jak vytvořit efektovou kartu z portfolia
Upravit obsah sledování průběhu
Zde si vyberete typ trackeru a s čím souvisí.
Hlavní nastavení jsou:
- typický tracker: zde je výchozí hodnota Horizontální. Při posouvání seznamu dolů však typ cirkulační se vám také nabízí. Ponechte výchozí.
- Pokrok vzhledem k: v tomto druhém nastavení vyberte hodnotu výběrčí. Tato volba vyvolá další nastavení: Volič.
- Volič: Toto pole je určeno k přijetí identifikátoru objektu, ke kterému bude sledovač připojen.
Vyberme archiv publikací, protože je to prvek, ke kterému je připojen náš sledovač.
Na panelu nastavení přejděte na kartu Upřesnit a do pole vyplňte hodnotu CSS ID.
Dále se vraťte na panel trackeru a vyplňte pole Selector v nabídce obsah.
Nakonec nastavte orientaci ukazatele průběhu doprava.
Změňte styl sledovače pokroku
V tomto kroku nakonfigurujeme parametry indikátoru průběhu a také jeho pozadí.
Začněte nastavením indikátoru průběhu.
Čtěte také: Elementor: Jak vytvořit galerii obrázků
- Nastavení barva pokroku umožňuje volit mezi klasickou progresí a gradientovou progresí. V našem příkladu vyberte první možnost. Ať už je volba jakákoli, zobrazí se nastavení barva.
- Set lmá barvu pomocí globální palety barev nebo nástroje pro výběr barvy.
- Typ hranice: zde máte šest návrhů (žádný, plný, dvojitý, tečkovaný, tečkovaný, rýha). Rozhodněte se pro úplný okraj.
- šíře: Tímto se udává tloušťka okraje vašeho indikátoru postupu.
- Poloměr hranice: Ve výchozím nastavení vypadá indikátor průběhu jako obdélník. Úpravou jeho poloměru se jeho konce zaoblí.
Nakonec nastavte piste nastavení pozadí. Všimnete si, že jde o téměř stejná nastavení, která se vracejí. Omezte se proto na výše uvedené.
Změnit pokročilé možnosti sledování pokroku
Pro dokončení naší práce nastavíme následující záložky: pohybové efekty, transformace a vlastní CSS.
Začněme nejprve záložkou Vlastní CSS. Vyberte jej a do příslušného pole vložte následující kód. Umožňuje definovat šířku trackeru. Nastaví tedy šířku na 50 % výšky okna.
Poté otočte sledovač ve svislém směru. Chcete-li to provést, vyberte podnabídku transformátor, povolte otáčení a do prázdného pole zadejte 90. Tím se náš widget otočí o 90 stupňů a získáte požadovanou vertikální polohu.
Chcete-li náš widget zarovnat na stejnou úroveň jako první příspěvky, použijte offset 145.
Na této úrovni, pokud posouváme naši stránku, uvidíte, že náš ukazatel průběhu zmizí, zatímco budeme posouvat naši stránku obsah.
Chcete-li tento problém vyřešit, otevřete kartu Pohybové efektya poté rozbalte příkaz Kolík a zvolte níže.
Tentokrát při posouvání dolů můžeme vidět, jak se náš sledovač pokroku postupně naplňuje, jak procházíme naším archivem příspěvků.
Získejte nyní prvek Elementor Pro!
Proč investovat do čističky vzduchu?
Tak ! To je vše pro tento článek, který vám ukáže, jak vytvořit vertikální sledovač pokroku.
Přidání interaktivních prvků, jako je vertikální indikátor průběhu při vytváření webové stránky může to opravdu posunout na další úroveň tím, že bude intuitivnější. Navíc může být propojen s celou stránkou nebo s obsah publikace a dokonce i na jakýkoli jiný konkrétní prvek stránky. Vědět, jak jej používat, by proto bylo další výhodou.
Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu 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.
...
