웹사이트를 더 매력적으로 만들고 싶으신가요? 진행률 표시줄을 추가하면 도움이 될 수 있습니다. 진행률 표시줄은 데이터를 시각적으로 표시하여 정보를 한 눈에 쉽게 이해할 수 있게 해줍니다. 진행률 또는 통계에 대한 명확한 시각적 지표를 제공하여 사용자 경험을 향상시킵니다.
이 가이드에서는 워드프레스 구텐베르크 편집기에서 진행률 표시줄을 추가하는 방법을 보여드리겠습니다.
구텐베르크용 워드프레스에서 진행률 표시줄을 추가하는 단계
우리는 ZoloBlocks 플러그인 (개발사 BD테마)를 클릭하여 진행률 표시줄을 추가합니다. ZoloBlocks는 최고의 워드프레스 플러그인 쉽게 웹사이트 사용자 지정. 웹사이트에 사용할 수 있는 30개 이상의 사용자 정의 가능한 UI 블록을 미리 만들어 풍부한 기능을 제공합니다.
따라서 먼저 다음을 수행해야 합니다. ZoloBlocks 설치. 방법은 다음과 같습니다:
- 워드프레스 대시보드에 로그인합니다.
- 플러그인 > 새 플러그인 추가로 이동합니다.
- "ZoloBlocks"를 검색합니다.
- 플러그인을 설치하고 활성화합니다.
ZoloBlocks를 설치했으면 워드프레스 웹사이트에 진행률 표시줄을 추가하는 방법을 알아볼 준비가 된 것입니다. ZoloBlocks에서 제공하는 모든 블록을 확인하여 이를 통해 어떤 작업을 수행할 수 있는지 알아보세요.
이제 워드프레스 구텐베르크에서 진행률 표시줄을 추가하는 단계를 보여드리겠습니다.
1단계: 구텐베르크 편집기에서 웹페이지 열기
워드프레스 대시보드로 이동하여 진행률 표시줄을 추가할 페이지 또는 글을 찾습니다. 새 페이지를 만들려면 새 페이지를 만든 다음 구텐베르크 편집기로 이동합니다.
편집기에 들어가면 추가하려는 섹션까지 아래로 스크롤하여 진행률 표시줄을 표시합니다.
2단계: 진행률 표시줄 추가하기
진행률 표시줄을 추가할 위치를 결정한 후 새 블록 추가 버튼(+). 검색창에 '진행률 표시줄'을 입력하면 ZoloBlocks의 진행률 표시줄 블록이 표시됩니다. 진행률 표시줄 블록을 클릭하여 페이지에 추가합니다.
이제 끝났습니다! 진행률 표시줄 블록이 페이지에 추가되었습니다. 처음에는 다음과 같은 모양이 될 것입니다.
진행률 표시줄의 레이아웃을 위한 다양한 사전 설정 디자인이 제공됩니다. 따라서 여러 디자인을 살펴보고 자신에게 가장 잘 어울리는 디자인을 찾을 수 있습니다.
이 블록을 원하는 대로 추가로 사용자 지정할 수 있습니다.
3단계: 진행률 표시줄 사용자 지정하기
진행률 표시줄 사용자 지정은 간단하고 직관적입니다.
브랜드와 호환되도록 하려면 다음 단계를 따르세요:
- 색상을 조정합니다: 진행률 표시줄 블록을 클릭하여 설정 패널을 엽니다. 여기에서 사이트 테마에 맞게 진행률 표시줄 색상을 변경할 수 있습니다.
- 백분율 값을 설정합니다: 표시할 백분율 값을 입력합니다. 이 값은 얼마나 진행되었는지 보여줍니다.
- 레이블을 추가합니다: 레이블이나 설명을 추가하여 컨텍스트를 제공하세요. 이렇게 하면 사용자가 진행률 표시줄이 무엇을 나타내는지 이해하는 데 도움이 됩니다.
- 스타일 및 레이아웃을 선택합니다: 스타일 및 레이아웃 옵션을 사용자 지정하여 진행률 표시줄을 원하는 대로 표시할 수 있습니다.
이러한 요소를 사용자 지정할 때는 진행률 표시줄이 사이트 디자인과 매끄럽게 어울리도록 하는 데 중점을 두어야 합니다.
보너스: 고급 사용자 지정 팁
진행률 표시줄을 한 단계 업그레이드하고 싶으신가요? 다음은 몇 가지 고급 사용자 지정 팁입니다:
- 사용자 정의 CSS: 사용자 정의 CSS를 추가하여 진행률 표시줄의 스타일을 더 지정할 수 있습니다. 이 기능은 독특한 모양을 만드는 데 적합합니다.
- 애니메이션: 애니메이션을 통합하여 진행률 표시줄을 역동적이고 흥미롭게 만들 수 있습니다. 예를 들어 사용자가 페이지를 아래로 스크롤할 때 진행률 표시줄이 서서히 채워지도록 할 수 있습니다.
- 여러 개의 진행률 표시줄: 한 페이지에 여러 개의 진행률 표시줄을 추가하여 다양한 데이터 세트를 표시할 수 있습니다. 이 기능은 다양한 프로젝트 마일스톤이나 통계를 표시할 때 유용합니다.
- 조건부 가시성: 조건부 표시 규칙을 설정합니다. 즉, 특정 사용자 상호 작용이나 조건에 따라 진행률 표시줄이 표시되도록 설정할 수 있습니다.
이러한 고급 옵션을 사용하면 더욱 인터랙티브하고 시각적으로 매력적인 진행률 표시줄을 만들 수 있습니다.
워드프레스 웹사이트에서 진행률 표시줄 사용의 이점
진행률 표시줄은 웹사이트에 다양한 이점을 제공하여 사용자 경험과 참여도를 크게 향상시킵니다. 이점에 대해 자세히 살펴보세요:
- 시각적 매력 강화: 진행률 표시줄은 사이트에 역동적인 시각적 요소를 추가하여 사이트를 더욱 매력적이고 매력적으로 만들어 줍니다. 텍스트가 많은 콘텐츠를 나누고 색상과 움직임을 제공하여 방문자의 시선을 사로잡고 유지할 수 있습니다.
- 사용자 이해도 향상: 진행률 표시줄은 방문자가 진행 중인 작업이나 프로젝트의 상태를 빠르게 파악할 수 있도록 도와주는 직관적인 도구입니다. 사용자 온보딩 프로세스의 완료 여부를 추적하거나 모금 캠페인의 진행 상황을 표시하는 등 진행률 표시줄은 복잡한 정보를 간단하고 시각적인 방식으로 전달합니다.
- 참여도를 높입니다: 진행률 표시줄은 실시간 피드백을 제공하여 사용자의 참여를 유도할 수 있습니다. 예를 들어, 사용자가 설문조사를 통해 자신이 80%임을 확인하면 설문조사를 완료할 가능성이 높아집니다. 이러한 진행 상황은 사용자가 사이트와 더 많이 상호 작용하도록 유도합니다.
- 명확한 지표를 제공하세요: 진행률 막대는 진행률 또는 데이터 포인트를 명확하고 시각적으로 표시합니다. 이는 프로젝트 완료율, 사용자 성과 또는 신청 프로세스 상태와 같은 메트릭을 표시하는 데 특히 유용합니다.
- 사용자 동기 부여: 시각적인 진행 상황을 보는 것은 큰 동기 부여가 될 수 있습니다. 운동 진행 상황을 보여주는 피트니스 트래커나 학습 마일스톤을 표시하는 교육 사이트에서 진행률 표시줄은 사용자가 목표를 향해 계속 노력하도록 독려할 수 있습니다.
- 전문성: 진행률 표시줄을 사용하면 웹사이트가 세련되고 전문적인 느낌을 줄 수 있습니다. 세부 사항에 세심한 주의를 기울이고 고품질의 사용자 경험을 제공하기 위해 최선을 다하고 있음을 보여줍니다.
- 다용도성: 진행률 표시줄은 프로젝트 관리 대시보드부터 주문 처리 단계를 보여주는 전자상거래 웹사이트에 이르기까지 다양한 상황에서 사용할 수 있습니다. 다재다능한 기능 덕분에 거의 모든 사이트에 유용하게 추가할 수 있습니다.
진행률 표시줄 사용 모범 사례
웹사이트에서 진행률 표시줄의 효과를 극대화하려면 다음 모범 사례를 따르세요:
전략적 배치
진행률 표시줄은 가장 효과적인 영역에 배치하세요. 일반적인 위치로는 헤더, 사이드바 또는 주요 콘텐츠 섹션이 있습니다. 페이지 레이아웃을 압도하지 않으면서 방문자에게 눈에 잘 띄도록 배치하세요.
일관된 디자인
웹사이트의 전체 테마 및 브랜딩과 일치하는 일관된 진행률 표시줄 디자인을 유지하세요. 여기에는 색상, 글꼴, 스타일을 일치시키는 것이 포함됩니다. 일관성은 일관성 있는 사용자 경험을 제공하고 브랜드 아이덴티티를 강화하는 데 도움이 됩니다.
레이블 지우기
진행률 표시줄에는 항상 레이블이나 설명을 포함하세요. 이러한 맥락은 사용자가 진행률 표시줄이 무엇을 나타내는지 이해하는 데 도움이 됩니다. 예를 들어, "프로젝트 완료"라는 레이블이 붙은 진행률 표시줄은 레이블이 없는 진행률 표시줄보다 훨씬 더 많은 정보를 제공합니다.
현실적인 가치
진행률 표시줄에 표시되는 백분율 값이 정확하고 현실적인지 확인하세요. 과장된 진행률로 사용자를 오도하면 신뢰와 공신력이 손상될 수 있습니다. 진행률 표시줄을 정기적으로 업데이트하여 최신 데이터를 반영하세요.
대화형 요소
진행률 표시줄에 도구 설명이나 추가 정보를 제공하는 클릭 가능한 세그먼트와 같은 대화형 요소를 추가하는 것을 고려해 보세요. 이러한 대화형 요소는 사용자 참여를 높이고 데이터에 대한 접근성을 높일 수 있습니다.
여러 개의 진행률 표시줄 사용
표시할 데이터 요소나 지표가 여러 개 있는 경우 여러 개의 진행률 표시줄을 사용합니다. 이는 사용자가 다양한 정보를 한 눈에 확인해야 하는 대시보드나 실적 추적 페이지에서 특히 유용할 수 있습니다.
접근성
장애가 있는 사용자를 포함한 모든 사용자가 진행률 표시줄에 액세스할 수 있는지 확인하세요. 대비되는 색상을 사용하여 눈에 잘 띄게 하고, 대체 텍스트를 제공하며, 키보드를 사용하여 진행률 표시줄을 탐색할 수 있도록 하세요.
반응형 디자인
진행률 표시줄이 데스크톱, 태블릿, 스마트폰 등 모든 기기에서 반응성이 뛰어나고 올바르게 표시되는지 확인하세요. 다양한 화면 크기에서 테스트하여 원활한 사용자 경험을 보장하세요.
정기적인 테스트 및 최적화
진행률 표시줄을 지속적으로 테스트하여 다양한 브라우저와 디바이스에서 의도한 대로 작동하는지 확인하세요. 분석 도구를 사용하여 사용자가 진행률 표시줄과 상호 작용하는 방식을 추적하고 사용자 피드백 및 행동에 따라 조정하세요.
문맥 관련성
진행률 표시줄의 사용이 페이지의 콘텐츠와 맥락적으로 관련이 있는지 확인하세요. 예를 들어, 모금 캠페인에서 진행률 표시줄을 사용하여 기부 목표를 추적하는 것은 관련성이 높고 사용자 경험에 가치를 더합니다.
진행률 표시줄 테스트 및 최적화
진행률 표시줄을 추가하고 사용자 지정한 후에는 이를 테스트하고 최적화하는 것이 중요합니다:
- 장치 호환성: 데스크톱, 태블릿, 스마트폰 등 다양한 디바이스에서 진행률 표시줄이 올바르게 표시되는지 확인하세요.
- 브라우저 호환성: 여러 브라우저에서 진행률 표시줄을 테스트하여 모든 플랫폼에서 원활하게 작동하는지 확인하세요.
- 상호 작용을 추적합니다: 분석 도구를 사용하여 사용자가 진행률 표시줄과 상호 작용하는 방식을 모니터링하세요. 이 데이터는 사용자 행동에 대한 인사이트를 제공하고 필요한 조정을 하는 데 도움이 될 수 있습니다.
- 정기 업데이트: 진행률 데이터를 최신 상태로 유지하세요. 진행률 표시줄을 정기적으로 업데이트하면 사용자에게 정확한 정보를 제공하여 신뢰와 참여도를 유지할 수 있습니다.
결론
이제 ZoloBlocks를 사용하여 워드프레스 구텐베르크에 진행률 표시줄을 추가하는 방법을 알았으니 한 번 시도해 보시겠습니까?
진행률 표시줄은 사용자 경험을 향상시킬 수 있는 간단하면서도 강력한 방법입니다. 진행률을 시각적으로 명확하게 표시하고 사용자의 참여를 유도하며 사이트에 전문적인 느낌을 더할 수 있습니다.
이 가이드에 설명된 단계에 따라 필요에 맞는 진행률 표시줄을 만들고 사용자 지정하세요. 다양한 스타일과 배치를 실험하여 오디언스에게 가장 적합한 것을 찾아보세요.
자주 묻는 질문
진행률 표시줄이란 무엇인가요?
진행률 표시줄은 작업 또는 데이터 요소의 진행률을 표시하는 시각적 표시기로, 주로 색상 막대로 표시됩니다. 사용자가 목표를 향해 얼마나 진행되었는지 빠르게 파악할 수 있도록 도와줍니다.
진행률 표시줄은 사용자 경험을 어떻게 개선하나요?
진행률 표시줄은 작업 또는 데이터의 상태에 대한 명확한 시각적 피드백을 제공하여 사용자 경험을 향상시킵니다. 진행률 표시줄은 정보를 한 눈에 쉽게 파악할 수 있도록 하여 사용자의 참여와 관심을 유도합니다.
단일 페이지에 여러 개의 진행률 표시줄을 추가할 수 있나요?
예, 하나의 페이지에 여러 개의 진행률 표시줄을 추가할 수 있습니다. 이는 프로젝트 마일스톤이나 다양한 캠페인 목표와 같은 다양한 데이터 세트를 표시하는 데 유용합니다.
진행률 표시줄은 모든 워드프레스 테마와 호환되나요?
ZoloBlocks로 만든 진행률 표시줄은 대부분의 워드프레스 테마와 호환되도록 설계되었습니다. 하지만 원활한 통합을 위해 특정 테마에서 진행률 표시줄을 테스트해 보는 것이 좋습니다.