Kurkite ir pritaikykite progreso juostas Elementor

Pažangos juostos yra veiksmingas žiniatinklio dizaino elementas, kuris patraukliai informuoja lankytojus apie projekto ar tikslo įgyvendinimo eigą. Elementor, vienas populiariausių WordPress puslapių kūrimo įskiepių, suteikia galimybę lengvai integruoti pažangos juostas į savo svetaines. Šiame vadove sužinosite, kaip sukurti ir pritaikyti pažangos juostą "Elementor" programoje.

Pagrindinės išvados

• Pažangos juostos vizualiai parodo pažangą ir tikslus.
• Galite pritaikyti pavadinimus, reikšmes ir spalvas.
• Vidinį tekstą galima pasirinktinai rodyti arba paslėpti.
• Yra įvairių stilių ir pritaikymo parinkčių, kad juostą galėtumėte pritaikyti prie savo dizaino.

Žingsnis po žingsnio instrukcijos

Pirmiausia atidarykite savo "WordPress" svetainę ir pereikite į "Elementor" redaktorių. Ten galite pridėti naują elementą ir pasirinkti progreso juostą.

Dabar galite įvesti savo pažangos juostos pavadinimą. Sugalvokite tinkamą pavadinimą, pavyzdžiui, "Pardavimų tikslas". Tai suteiks jūsų lankytojams pradinę nuorodą, apie ką ji yra.

Kitame žingsnyje turite apibrėžti tikslo arba sėkmės pranešimą. Pagalvokite, ką konkrečiai norite rodyti, ir įrašykite tai į numatytą lauką. Šis žingsnis padeda padaryti jūsų pažangos juostą lengviau suprantamą naudotojams.

Dabar galite nustatyti pažangos juostos spalvą. Tai nėra privaloma, tačiau tai gera galimybė pritaikyti dizainą. Galite pasirinkti spalvą, kuri derėtų prie likusios jūsų svetainės dalies.

Tada pereikite prie procentinių dydžių. Čia galite nustatyti pažangą, pavyzdžiui, 40 %. Nepamirškite, kad didžiausią reikšmę galite nustatyti iki 100 %, o mažiausią - iki 0 %. Šis grįžtamasis ryšys padės lankytojams greitai suprasti jūsų pažangą.

Procentai gali būti rodomi arba paslėpti. Dažnai atrodo patraukliau, jei paslepiate tekstą, ypač jei pageidaujate švaraus dizaino. Pagalvokite, kuris variantas geriausiai tinka jūsų projektui.

Jei norite, taip pat galite pridėti vidinį tekstą, kuriame pateikiami procentai. Ši funkcija ypač naudinga, jei norite parodyti tiesioginę pažangą. Jei nuspręsite atsisakyti vidinio teksto, čia taip pat galite paslėpti skaičių.

Dabar viskas priklauso nuo pažangos juostos stiliaus. Galite pritaikyti juostos spalvą, neužpildytos srities fono spalvą ir juostos aukštį. Užpildytai sričiai pasirinkite tamsiai žalią atspalvį, o neutraliai fono spalvai - aiškų vaizdą.

Taip pat galite suapvalinti progreso juostos kampus, kad suteiktumėte jai patrauklesnę formą. Atminkite, kad kampus galima užapvalinti tik priekyje, kol progreso juosta nepasiekia 100 %.

Jei norite pritaikyti vidinį tekstą, čia taip pat galite pakeisti spalvą ir tipografiją. Galite nuspręsti išjungti šriftą, kad sutelktumėte dėmesį į pažangą.

Galiausiai pereisite į išplėstinius nustatymus, kur galėsite pritaikyti teksto spalvą ir pavadinimo stilių. Juodas, paryškintas pavadinimas su pasirenkamu šešėliu užtikrina, kad jūsų pavadinimas išsiskirtų.

Dabar išsaugokite pakeitimus ir eikite į savo puslapį, kad pamatytumėte rezultatą. Galbūt nuspręsite, kad prasminga rodyti procentinę dalį. Jei ne, progreso juosta vis tiek bus rodoma patraukliai.

Dabar jūsų pažangos juostoje rodoma nurodyta reikšmė be animacinio skaičiavimo nuo 0. Vietoj to pažanga vizualizuojama iš karto.

Jei naudojate "Elementor Pro" versiją, jums taip pat bus siūlomi dinaminiai atributai. Ši funkcija ypač naudinga norint pritaikyti pažangos juostas pagal išorinius duomenis ar net duomenų bazės valdomas reikšmes.

Apibendrinimas

Šiame vadove sužinojote, kaip Elementor sukurti ir pritaikyti progreso juostą. Galite nustatyti pavadinimus ir progreso juostas, pasirinkti spalvas ir atlikti įvairius pakeitimus, kad integruotumėte patrauklią ir veiksmingą progreso juostą.