Jak wyświetlać pasek postępu czytania w WordPress z Elementor

Pasek odczytu postępu jest wizualnym wskaźnikiem na stronie internetowej, która pokazuje czytelnikom, jak daleko przewidują stronę lub post na ekranie. Zazwyczaj wyświetla to cienki pasek, który wypełnia się w miarę postępu czytelników, przewijając stronę. Jest to proste, ale skuteczne narzędzie dla blogów i witryn ciężkich treści.

Ostatnie badanie dotyczące zaangażowania użytkowników sugeruje, że wskazówki wizualne mogą zwiększyć czas spędzony na stronie nawet o 20%, dzięki czemu treść jest łatwiejsza do zarządzania . W ten sam sposób pasek postępu może pomóc użytkownikom śledzić ich podróż do czytania, co może zwiększyć satysfakcję i zachęcić ich do eksploracji więcej.

Dzięki Elementor łatwo jest dodać pasek postępu czytania do WordPress. Tak więc w tym artykule omówimy przewodnik krok po kroku, jak wyświetlać pasek czytania postępu w WordPress z Elementor.

Korzyści z wyświetlania paska postępu czytelnika w WordPress

Dodanie paska postępu czytania do witryny WordPress oferuje kilka korzyści. To nie tylko poprawia wrażenia użytkownika, ale także zaangażowanie. Spójrz na kilka kluczowych korzyści z dodawania paska postępu czytania w WordPress poniżej.

• Poprawia zaangażowanie użytkowników

Pasek postępu czytania może motywować czytelników, pokazując, jak daleko postępowali przez post. To zachęca użytkowników do kontynuowania czytania, szczególnie w przypadku treści długoterminowych. Spójrz na kilka szybkich punktów na temat poprawy zaangażowania użytkowników w swojej witrynie.

• Zwiększa przejrzystość nawigacji

W przypadku długich artykułów lub samouczków pasek postępu stanowi wyraźne wskazanie, ile treści pozostaje. Pomaga to użytkownikom odgadnąć, czy mają czas na zakończenie, czy nie.

• Zmniejsza wskaźniki odrzuceń

Oferując wizualną wskazówkę, która rozkłada treść w śledzącą podróż, pasek postępu może sprawić, że długie posty wydają się mniej przytłaczające. Może to niezwykle obniżyć wskaźniki odrzuceń. Oto przewodnik, jak zmniejszyć współczynnik odrzuceń w WordPress.

• Zwiększa estetyczny apel

Dobrze zaprojektowany pasek postępu dodaje nowoczesnej atrakcyjności dla Twojej witryny. Możesz dostosować wygląd paska Reading Progress, aby pasować do marki Twojej witryny, aby stworzyć wypolerowany wygląd.

• Obsługuje użyteczność mobilną

Na urządzeniach mobilnych, gdzie przewijanie może wydawać się nieograniczone, pasek postępu zapewnia poczucie kontroli i kontekstu. Zapewnia użytkowników, którzy robią postępy przez post lub stronę.

Jak wyświetlać pasek postępu czytania w WordPress z Elementor

W tym samouczku krok po kroku przeprowadzimy Cię przez proces dodawania i dostosowywania paska postępu czytania na Twojej stronie WordPress za pomocą Elementor i bezpłatną wersję HappyAddons. Ale możesz zapytać - dlaczego Happyaddons i co to jest ?

W rzeczywistości HappyAddons to znany dodatek wtyczki Elementor. Jest wyposażony w wiele zaradnych funkcji i widżetów, aby przezwyciężyć ograniczenia elementora. Czytanie paska postępu jest jednym z. Dobrą wiadomością jest to, że funkcja paska czytania jest całkowicie bezpłatna.

Warunki wstępne dodawania paska czytania postępów

• Elementor
• Happyaddons

Upewnij się, że wtyczki są instalowane i aktywowane na Twojej stronie. Gdy będą gotowe na Twojej stronie, zacznij wykonać kroki wyjaśnione w samouczku poniżej.

Krok 01: Włącz funkcję paska czytania

Przejdź do deski rozdzielczej WordPress i przejdź do funkcji HappyAddons> .

Po wejściu na stronę funkcji zlokalizuj opcję czytania paska postępu . Włącz, aby włączyć tę funkcję.

Krok 02: Otwórz stronę z Elementor

Teraz, aby skonfigurować funkcję paska odczytu, otwórz stronę z Elementor.

Krok 03: Przejdź do ustawień witryny Elementor

Kliknij ikonę hamburgera w lewym górnym rogu panelu elementora.

Przejdź do opcji Ustawienia witryny , klikając ją.

Przewijając panel Elementor, zlokalizuj pasek odczytu postępu i kliknij go .

Włącz, aby włączyć opcję czytania Postępu Postępu .

Krok 04: Skonfiguruj opcję czytania paska postępu

Po włączeniu opcji paska odczytu Progress otrzymasz wiele opcji, aby skonfigurować funkcję.

# Wybierz, gdzie wyświetlić pasek postępu

Możesz wyświetlić pasek postępu w całej witrynie, co oznacza wszystkie posty i strony. Lub możesz wyświetlić go selektywnie.

Jeśli chcesz wyświetlić go zarówno na postach i stronach, wybierz je w polu obok wyświetlania.

# Wybierz typ paska postępu

HappyAddons pozwala wybierać spośród trzech rodzajów pasków postępu - poziomego, pionowego i okręgu . Wybierz dowolne z nich, kliknij opcję rozwijaną obok typu .

Zobaczysz opcje. Wybierz typ, który chcesz. W samouczku pójdziemy z typem poziomym.

# Wybierz pozycję dla paska postępu

Możesz wyświetlić pasek postępu na górze lub na dole. Wybierz, gdzie chcesz wyświetlić go z opcji pozycji obok niego.

Kiedy przewijaliśmy stronę, możesz zobaczyć pasek postępu pojawi się na stronie.

# Stylizuj pasek postępu

Z tego samego panelu elementorowego możesz dostosować wysokość, kolor paska postępu, kolor tła i procentowe podpowiedź funkcji paska postępu.

Mam nadzieję, że sam możesz wykonać to dostosowanie.

Krok 05: Podgląd paska postępu

Po zakończeniu przejdź do frontu swojej witryny. Sprawdź, czy pasek postępu działa dobrze, czy nie, przewijając ekran.

W ten sposób możesz łatwo dodać pasek Postępu Reading do WordPress za pomocą wtyczek Elementor i HappyAddons.

Jak wygląda pionowy pasek postępu

Powyżej pokazaliśmy proces tworzenia poziomego paska postępu. W ten sam sposób możesz włączyć i wyświetlić pionowy pasek postępu na swojej stronie. Po włączeniu paska postępu będzie wyglądać jak ten pokazany na filmie dołączonym poniżej.

Jak wygląda pasek postępu koła

Ponownie, zgodnie z tym samym procesem, możesz wyświetlić pasek postępu Circle Progress na swojej stronie WordPress, konfigurowanie jego stylizacji i ustawień. Możesz obejrzeć, jak to wygląda na frontend z filmu dołączonego poniżej. Pasek postępu okręgu pojawia się w prawym górnym rogu.

Co jeszcze możesz zrobić z Happyaddons?

Gdy masz HappyAddons, nie tylko możesz pokonać wady Elementor, ale także cieszyć się wieloma bardziej ekscytującymi funkcjami i widżetami. Spójrz, co więcej możesz zrobić z wtyczką HappyAddons.

A. Użyj konstruktora motywów

Builder motywów HappyAddons pozwala dostosować każdy aspekt części szablonu witryny WordPress, w tym nagłówki, stopki, pojedyncze strony, pojedyncze posty i strony archiwum. Wspaniałą wiadomością jest to, że funkcja konstruktora motywów jest całkowicie bezpłatna, która jest cechą premium w Elementor. Sprawdź, jak uzyskać dostęp do konstruktora motywów HappyAddons.

B. Ulepsz witryny WooCommerce

Happyaddons Pro oferuje potężny zestaw widżetów WooCommerce, aby poprawić projekt i funkcjonalność sklepu e -commerce. WooCommerce Widżety, które oferują HappyAddons, to siatka produktów, karuzel produktu, siatka kategorii produktów, karuzel kategorii produktów, pojedynczy produkt, mini wózek, koszyk, kasa i pasek wysyłkowy.

C. Tworzyć kreatywne treści

Happyaddons zapewnia ponad 130 widżetów i dwa tuziny ekscytujących funkcji, aby witryna była bardzo ekscytująca. Korzystając z nich, możesz podkreślić cenne informacje na swojej stronie w niezwykle kreatywny sposób, który wygląda zarówno dobrze, jak i atrakcyjnie dla użytkowników.

D. Utwórz posty/strony infograficzne

Happyaddons umożliwia tworzenie atrakcyjnych wizualnie postów i stron w stylu infograficznym za pomocą widżetów, takich jak wykres baru, pasek umiejętności, interaktywne wykresy i post. W rezultacie możesz wyświetlać porównania, takie jak wyniki sprzedaży lub ankiety z konfigurowalnymi kolorami i etykietami. Dowiedz się, jak utworzyć stronę internetową infograficzną z Elementor.

mi. Kopiowa wklej cross-domen

Funkcja wklejania kopiowania między domenami w Happyaddons Pro pozwala kopiować widżety, sekcje lub całe strony z jednej domeny i wkleić je do drugiej, zachowując wszystkie style i ustawienia. Jest to oszczędność czasu dla programistów lub agencji zarządzających wieloma witrynami.

Oprócz tych wszystkich będziesz mieć zaradną bibliotekę szablonów, czat na żywo, kompleksową dokumentację i telewizor na YouTube, aby Twoja podróż do projektowania stron internetowych z HappyAddons była wyjątkowo przyjemna.

Ostateczne myśli!

Mam nadzieję, że podobał Ci się ten samouczek. Ciągle piszemy coraz więcej postów na blogu opartych na samouczku na naszej stronie internetowej, aby Twoja podróż do projektowania stron internetowych bez kodu była bardziej pomocna i wydajna. Jak czytałeś cały post, oczywiście masz pojęcie o tym, co możesz zrobić z wtyczką HappyAddons.

Jeśli masz na swojej stronie zarówno Elementor, jak i HappyAddons, możesz zrobić prawdziwą magię. Możesz sprawdzić recenzje na temat HappyAddons na WordPress.org i innych stronach recenzji, aby zbadać, jak bardzo nasi użytkownicy są zadowoleni. Po tych wszystkich, jeśli masz na myśli jakieś pytania, możesz zostawić komentarz poniżej lub zapukać do naszej czatu.