요소와 함께 WordPress에 읽기 진행 막대를 표시하는 방법

Reading Progress Bar는 웹 사이트의 시각적 표시기로, 독자에게 화면의 페이지 또는 게시물을 통해 얼마나 멀리 스크롤했는지 보여줍니다. 이것은 일반적으로 독자가 진행함에 따라 채우고 페이지를 스크롤하는 얇은 막대를 표시합니다. 블로그 및 콘텐츠가 많은 웹 사이트를위한 간단하지만 효과적인 도구입니다.

사용자 참여에 대한 최근의 연구에 따르면 시각적 신호는 콘텐츠를보다 관리하기 쉽게 만들어 페이지에 소비 된 시간을 최대 20% 증가시킬 수 있습니다 . 같은 방식으로 진행률 바는 사용자가 독서 여행을 추적하여 만족을 높이고 더 많은 탐구를 장려 할 수 있습니다.

Elementor를 사용하면 WordPress에 읽기 진행률 표시 줄을 추가하기가 쉽습니다. 따라서이 기사에서는 요소와 함께 WordPress의 Reading Progress Bar를 표시하는 방법에 대한 단계별 안내서를 다룹니다.

WordPress에 Reader Progress Bar 표시의 이점

WordPress 사이트에 읽기 진행률 표시 줄을 추가하면 몇 가지 이점이 있습니다. 이것은 사용자 경험뿐만 아니라 참여도 향상시킵니다. 아래의 WordPress에서 읽기 진행 상황을 추가하면 몇 가지 주요 이점을 살펴보십시오.

• 사용자 참여를 향상시킵니다

독서 진행률 바는 게시물을 통해 얼마나 멀리 진행했는지 시각적으로 보여 주면서 독자들에게 동기를 부여 할 수 있습니다. 이를 통해 사용자는 특히 긴 형식의 콘텐츠에 대해 계속 읽을 수 있습니다. 웹 사이트에서 사용자 참여를 향상시키는 방법에 대한 몇 가지 빠른 포인트를 살펴보십시오.

• 내비게이션 선명도를 향상시킵니다

긴 기사 나 튜토리얼의 경우 진행률 표시 줄은 남은 콘텐츠의 양을 명확하게 표시합니다. 이를 통해 사용자는 마무리 할 시간이 있는지 추측하는 데 도움이됩니다.

• 이탈률을 줄입니다

콘텐츠를 추적 가능한 여행으로 분류하는 시각적 큐를 제공함으로써 진행률 바는 긴 게시물을 덜 압도적으로 보이게 할 수 있습니다. 이것은 현저하게 이탈률을 낮출 수 있습니다. 다음은 WordPress의 바운스 속도를 줄이는 방법에 대한 안내서입니다.

• 미적 매력을 향상시킵니다

잘 디자인 된 진행률 바는 사이트에 현대적인 매력을 더합니다. 사이트의 브랜딩에 맞도록 Reading Progress Bar의 외관을 사용자 정의하여 세련된 모양을 만들 수 있습니다.

• 모바일 유용성을 지원합니다

스크롤링이 끝없이 느껴질 수있는 모바일 장치에서 진행률 바는 제어 감각과 컨텍스트를 제공합니다. 게시물이나 페이지를 통해 진행중인 사용자를 안심시킵니다.

요소와 함께 WordPress에 읽기 진행 막대를 표시하는 방법

이 단계별 자습서에서는 Elementor와 무료 버전의 HappyAddons를 사용하여 WordPress 사이트에서 읽기 진행률 표시 줄을 추가하고 사용자 정의하는 프로세스를 안내합니다. 그러나 당신은 물어볼 수 있습니다 - 왜 Happyaddons 와 이것이 무엇입니까 ?

실제로, Happyaddons는 Elementor 플러그인의 잘 알려진 애드온입니다. 요소의 한계를 극복하기 위해 많은 풍부한 기능과 위젯이 제공됩니다. Reading Progress Bar는 그 중 하나입니다. 그리고 좋은 소식은 Reading Progress Bar 기능이 완전히 사용할 수 있다는 것입니다.

읽기 진행률 표시 줄을 추가하기위한 사전 반품

• 요소
• Happyaddons

플러그인이 사이트에 설치되어 활성화되어 있는지 확인하십시오. 사이트에 준비되면 아래 튜토리얼에서 설명 된 단계를 시작하십시오.

단계 01 : 읽기 진행률 표시 줄 기능을 활성화합니다

WordPress 대시 보드 로 이동하여 HappyAddons> 기능 으로 이동하십시오.

기능 페이지에 오면 Reading Progress Bar 옵션을 찾으십시오. 기능을 활성화하려면 전환하십시오 .

02 단계 : 요소와 함께 페이지를 엽니 다

이제 Reading Progress Bar 기능을 구성하려면 Elementor와 함께 페이지를 엽니 다.

단계 03 : Elementor의 사이트 설정으로 이동하십시오

요소 패널의 왼쪽 상단 코너에서 햄버거 아이콘을 클릭하십시오 .

클릭하여 사이트 설정 옵션 으로 이동하십시오 .

요소 패널을 스크롤하여 읽기 진행률 표시 줄을 찾아 클릭하십시오 .

읽기 진행률 표시 줄 옵션을 활성화 하려면 전환하십시오 .

단계 04 : 읽기 진행률 표시 줄 옵션을 구성하십시오

Reading Progress Bar 옵션을 활성화하면 기능을 구성 할 수있는 다양한 옵션이 제공됩니다.

# 진행률 표시 줄을 표시 할 위치를 선택하십시오

사이트 전체에 진행률 표시 줄을 표시하도록 선택할 수 있습니다. 이는 모든 게시물과 페이지에 걸쳐 있습니다. 또는 선택적으로 표시하도록 선택할 수 있습니다.

게시물과 페이지 모두에 표시하려면 표시 옆의 상자에서 선택하십시오.

# 진행률 표시 줄 유형을 선택하십시오

Happyaddons를 사용하면 수평, 수직 및 원의 세 가지 진행률 막대 중에서 선택할 수 있습니다. 따라서 그 중 하나를 선택하고 유형 옆의 드롭 다운 옵션을 클릭하십시오 .

옵션이 보입니다. 원하는 유형을 선택하십시오. 튜토리얼의 경우 수평 유형으로 이동합니다.

# 진행률 표시 줄의 위치를 ​​선택하십시오

진행 막대를 상단 또는 하단에 표시 할 수 있습니다. 따라서 옆 위치 옵션 에서 표시 할 위치를 선택하십시오 .

페이지를 스크롤하면 페이지 상단에 진행 막대가 나타납니다.

# 진행률 표시 줄을 스타일시킵니다

동일한 요소 패널에서 진행률 표시 줄 기능의 높이, 진행률 표시 줄 색상, 배경색 및 백분율 툴팁을 사용자 정의 할 수 있습니다.

이 사용자 정의를 직접 할 수 있기를 바랍니다.

단계 5 : 진행률 표시 줄을 미리 봅니다

완료되면 사이트의 정면으로 이동하십시오. 화면을 스크롤하여 진행률 표시 줄이 잘 작동하는지 확인하십시오.

따라서 Elementor 및 Happyaddons 플러그인을 사용하여 WordPress에 읽기 진행률 표시 줄을 쉽게 추가 할 수 있습니다.

수직 진행 막대가 어떻게 보이는지

위에서, 우리는 당신에게 수평 진행 막대를 만드는 과정을 보여주었습니다. 같은 방식으로 사이트에서 수직 진행률 표시 줄을 활성화하고 표시 할 수 있습니다. 일단 활성화되면 진행률 표시 줄은 아래에 첨부 된 비디오에 표시된 것과 같습니다.

Circle Progress Bar의 모습

여기서도 동일한 프로세스에 따라 WordPress 사이트에 Circle Progress Bar를 표시하여 양식화 및 설정을 구성 할 수 있습니다. 아래에 첨부 된 비디오에서 프론트 엔드에서 어떻게 보이는지 볼 수 있습니다. 서클 진행 막대가 오른쪽 상단 코너에 나타납니다.

Happyaddons와 함께 무엇을 할 수 있습니까?

일단 당신이 Happyaddons를 가지고 있다면, 당신은 요소의 단점을 극복 할뿐만 아니라 더 흥미로운 기능과 위젯을 즐길 수 있습니다. Happyaddons 플러그인으로 무엇을 할 수 있는지 살펴보십시오.

에이. 테마 빌더를 사용하십시오

HappyAddons의 테마 빌더를 사용하면 헤더, 바닥 글, 단일 페이지, 단일 게시물 및 아카이브 페이지를 포함하여 WordPress 사이트 템플릿 부품의 모든 측면을 사용자 정의 할 수 있습니다. 좋은 소식은 테마 빌더 기능이 무료로 사용할 수 있으며 요소의 프리미엄 기능이라는 것입니다. HappyAddons 테마 빌더에 액세스하는 방법을 확인하십시오.

비. WooCommerce 사이트를 향상시킵니다

Happyaddons Pro는 전자 상거래 상점의 설계 및 기능을 향상시키기 위해 강력한 Woocommerce 위젯 제품군을 제공합니다. HappyAddons가 제공하는 WooCommerce 위젯은 제품 그리드, 제품 회전 목마, 제품 카테고리 그리드, 제품 카테고리 회전 목마, 단일 제품, 미니 카트, 카트, 체크 아웃 및 배송 바입니다.

기음. 창의적인 콘텐츠를 제작하십시오

Happyaddons는 웹 사이트를 매우 흥미롭게 만들기 위해 130 개가 넘는 위젯과 2 개의 흥미로운 기능을 제공합니다. 그것들을 사용하면 사이트의 귀중한 정보를 사용자에게 좋고 매력적으로 보이는 매우 창의적인 방식으로 강조 할 수 있습니다.

디. 인포 그래픽 게시물/페이지를 만듭니다

HappyAddons는 막대 차트, 스킬 바, 대화식 차트 및 포스트 그리드와 같은 위젯을 사용하여 시각적으로 매력적인 인포 그래픽 스타일 게시물 및 페이지를 만들 수 있습니다. 결과적으로 사용자 정의 가능한 색상 및 레이블로 판매 또는 설문 조사 결과와 같은 비교를 표시 할 수 있습니다. 요소와 함께 인포 그래픽 웹 페이지를 만드는 방법을 알아보십시오.

이자형. 크로스 도메인 복사 페이스트

Happyaddons Pro의 크로스 도메인 복사 페이스트 기능을 사용하면 한 도메인에서 위젯, 섹션 또는 전체 페이지를 복사하여 다른 스타일과 설정을 유지할 수 있습니다. 이것은 여러 사이트를 관리하는 개발자 또는 대행사를위한 타임 절약입니다.

이 모든 것 외에도 풍부한 템플릿 라이브러리, 라이브 채팅, 포괄적 인 문서 및 YouTube 튜토리얼 재생 목록이있어 Happyaddons와 함께 웹 디자인 여행을 매우 즐겁게 만들 수 있습니다.

마지막 생각!

이 튜토리얼을 즐겼기를 바랍니다. 우리는 웹 사이트에 점점 더 많은 튜토리얼 기반 블로그 게시물을 끊임없이 작성하여 No-Code 웹 디자인 여정을보다 도움이되고 효율적으로 만들었습니다. 전체 게시물을 읽었 듯이 Happyaddons 플러그인으로 무엇을 더 할 수 있는지에 대한 아이디어가 분명히 있습니다.

사이트에 Elementor와 Happyaddons가 있으면 진짜 마술을 할 수 있습니다. WordPress.org 및 기타 리뷰 사이트에서 HappyAddons에 대한 리뷰를 확인하여 사용자가 얼마나 만족하는지 탐색 할 수 있습니다. 이 모든 후에는 궁금한 점이 있으시면 아래에 의견을 남기거나 지원 채팅 상자를 노크 할 수 있습니다.