Už ste niekedy hľadali možnosť vytvoriť vertikálny sledovač pokroku namiesto tradičného posúvača? Ak nie, prečítajte si tento článok až do konca a zistite, ako ho vytvoriť Elementor Pre.
Predtým, ako sa pustíme do hlavnej témy, si však najprv pripomeňme, čo je to tracker.
Sledovač pokroku je indikátor priebehu, ktorý informuje používateľa o priebehu prebiehajúceho procesu, ako je inštalácia aplikácie, aktualizácia, čítanie článku atď. A sú dva typy:
- le lineárny sledovač pokroku
- le kruhový sledovač pokroku
Môžete si tiež prečítať: Elementor: Ako vytvoriť efektovú kartu z portfólia
V tomto návode vám ukážeme, ako vložiť vertikálny indikátor priebehu krok za krokom do sekcie obsahujúcej archívy príspevkov.
Vytvorte sledovač pokroku
Na karte prvky z panela nástrojovElementor, zadajte do vyhľadávacieho panela Sledovač pokroku. Potom potiahnite miniaplikáciu do sekcie.
Potom sa zobrazí indikátor priebehu. Štandardne je orientovaný horizontálne. Ale nebojte sa, ako to usporiadať vertikálne, uvidíte neskôr.
Pri vytváraní indikátora pokroku urobme potrebné úpravy, aby sme dosiahli požadovaný výsledok.
Pozri tiež: Elementor: Ako vytvoriť efektovú kartu z portfólia
Upravte obsah sledovania pokroku
Tu si vyberiete typ sledovača a s čím súvisí.
Hlavné nastavenia sú:
- typický sledovač: tu je predvolená hodnota Horizontálne. Pri rolovaní nadol v zozname však typ kruhový sa ponúka aj vám. Ponechajte predvolenú hodnotu.
- Pokrok v pomere k: v tomto druhom nastavení vyberte hodnotu selektor. Táto voľba vyvolá ďalšie nastavenie: Selektor.
- Selektor: Toto pole je určené na prijatie identifikátora objektu, ku ktorému bude sledovač pripojený.
Vyberme archív publikácií, pretože je to prvok, ku ktorému je pripojený náš sledovač.
Na paneli nastavení prejdite na kartu Rozšírené a potom do poľa vyplňte hodnotu CSS ID.
Potom sa vráťte na panel sledovania a vyplňte pole Selector v ponuke obsah.
Nakoniec nastavte orientáciu indikátora priebehu doprava.
Zmeňte štýl sledovania pokroku
V tomto kroku nakonfigurujeme parametre indikátora priebehu, ako aj jeho pozadie.
Začnite nastavením indikátora priebehu.
Čítajte tiež: Elementor: Ako vytvoriť galériu obrázkov
- Úprava farba pokroku vám umožňuje vybrať si medzi klasickou progresiou a gradientovou progresiou. V našom príklade vyberte prvú možnosť. Bez ohľadu na výber sa zobrazí nastavenie farba.
- Set lmá farbu pomocou globálnej palety farieb alebo nástroja na výber farieb.
- Typ hranice: tu máte šesť návrhov (žiadny, plný, dvojitý, bodkovaný, bodkovaný, ryha). Rozhodnite sa pre úplný okraj.
- šírka: Toto má poskytnúť hrúbku okraja vášho indikátora postupu.
- Polomer hranice: V predvolenom nastavení vyzerá indikátor priebehu ako obdĺžnik. Úpravou jeho polomeru sa jeho konce zaoblia.
Nakoniec nastavte piste nastavenia pozadia. Všimnete si, že ide o takmer rovnaké nastavenia, ktoré sa vracajú. Obmedzte sa preto na vyššie uvedené.
Zmeňte rozšírené možnosti sledovania pokroku
Na dokončenie našej práce nastavíme nasledujúce karty: pohybové efekty, transformácia a vlastné CSS.
Začnime najskôr kartou Vlastné CSS. Vyberte ho a do príslušného poľa vložte nasledujúci kód. Umožňuje definovať šírku sledovača. Takže nastaví šírku na 50% výšky okna.
Potom otočte sledovač vo vertikálnom smere. Ak to chcete urobiť, vyberte podponuku Transformer, povoľte rotáciu a potom do prázdneho poľa zadajte 90. Tým sa náš widget otočí o 90 stupňov, čím získate požadovanú vertikálnu polohu.
Ak chcete zarovnať náš widget na rovnakú úroveň ako prvé príspevky, použite posun 145.
Na tejto úrovni, ak posúvame našu stránku, uvidíte, že náš indikátor priebehu zmizne, keď posúvame našu stránku obsah.
Ak chcete vyriešiť tento problém, otvorte kartu Pohybové efektya potom rozbaľte príkaz Pin a vyberte položku nižšie.
Tentoraz pri posúvaní nadol vidíme, ako sa náš sledovač pokroku postupne napĺňa, keď sa pohybujeme v našom archíve príspevkov.
Získajte teraz prvok Elementor!
záver
Takže ! To je všetko pre tento článok, ktorý vám ukáže, ako vytvoriť vertikálny sledovač pokroku.
Pridanie interaktívnych prvkov, ako je vertikálny indikátor priebehu pri vytváraní webové stránky môže to skutočne posunúť na ďalšiu úroveň tým, že bude intuitívnejšie. Okrem toho môže byť prepojený s celou stránkou alebo s obsah publikácie a dokonca aj na akýkoľvek iný špecifický prvok stránky. Vedieť, ako ho používať, by preto bolo ďalšou výhodou.
Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete 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.
...
