진행률 표시줄 추가.
한눈에 진행 정도를 보여주는 라벨이 있는 색상 막대를 만들 수 있습니다. 프로젝트 상태, 모금 목표, 강좌 진도, 기술 수준에 사용하세요.
진행률 표시줄 추가
로그인한 상태에서 페이지를 엽니다. 콘텐츠 영역에 마우스를 올리면 빌더 컨트롤이 나타납니다. 기본 사용법은 첫 페이지에서 확인하세요.
- 컬럼에 마우스를 올리고 컨트롤 바에서 +를 클릭하거나, 빈 페이지에서 요소 추가를 클릭합니다. 콘텐츠 탭을 열고 진행률 표시줄을 클릭합니다. 컬럼 맨 위에 요소가 추가되고 설정 대화상자가 열립니다.
- 막대의 라벨을 입력합니다(예: “Website redesign”).
- 막대가 채워지는 정도를 진행률로 드래그하여 정하거나 슬라이더 옆 입력란에 값을 직접 입력합니다. 여기에서는 73%를 선택합니다.
- 팔레트에서 채워진 부분의 전경색을 고릅니다.
- 같은 대화상자의 아래쪽에서 막대에 줄무늬를 적용할지 선택합니다. 여기에서는 막대에 줄무늬 패턴 추가를 선택합니다.
- 대화상자에서 저장을 클릭합니다. 그런 다음 콘텐츠 영역 상단의 툴바에서 저장을 클릭하여 페이지를 저장합니다.
표시 내용
입력한 라벨이 표시된 막대가 선택한 색상으로 설정한 값까지 채워집니다. 라벨은 채워진 부분 안에 표시됩니다. 동영상에서는 줄무늬 막대에 Website redesign이라고 표시되고 트랙의 73%까지 채워집니다. 페이지를 저장하고 게시하면 방문자에게 표시됩니다.
진행률 표시줄 설정
요소에 마우스를 올리고 컨트롤 바에서 더보기 > 설정을 엽니다. 옵션:
- 라벨: 막대의 텍스트. 페이지의 라벨을 직접 클릭하여 그 자리에서 편집할 수도 있습니다.
- 진행률: 막대가 채워지는 정도(0~100%). 기본값은 50입니다.
- 막대 높이: 픽셀 단위의 막대 높이. 기본값은 45입니다.
- 배경색: 빈 트랙의 색상.
- 전경색: 채워진 부분의 색상.
- 확장 애니메이션: 기본적으로 꺼져 있습니다. 켜면 막대가 비어 있다가 절반이 화면에 들어오면 채워지기 시작합니다.
- 줄무늬: 막대에 줄무늬 패턴 추가를 선택하면 대각선 줄무늬가 추가됩니다. 줄무늬 애니메이션(줄무늬 패턴 필요)을 선택하면 줄무늬가 움직입니다.
표시되지 않는 경우
- 콘텐츠 탭에 진행률 표시줄이 없습니다. 사용자 프로필에서 숨겨져 있습니다. 관리자에게 사용자 프로필에서 활성화해 달라고 요청하세요.
- 다시 로드하면 사라집니다. 페이지가 저장되지 않았습니다. 다시 추가하고 콘텐츠 영역 상단의 툴바에서 저장을 클릭합니다.
- 막대가 비어 보입니다. 진행률이 0이거나 확장 애니메이션이 켜져 있는데 막대가 아직 절반도 화면에 들어오지 않았습니다. 막대까지 스크롤하거나 요소에 마우스를 올리고 컨트롤 바에서 더보기 > 설정을 열어 진행률을 높입니다.
- 줄무늬가 없거나 움직이지 않습니다. 막대에 줄무늬 패턴 추가가 선택되지 않았으며, 줄무늬 애니메이션(줄무늬 패턴 필요)에는 해당 설정이 필요합니다. 막대에 줄무늬 패턴 추가의 줄무늬 항목을 선택합니다.
- 채워진 부분이 트랙과 구분되지 않습니다. 전경색과 배경색이 너무 비슷합니다. 더 진한 전경색이나 더 밝은 배경색을 선택합니다.
다음 단계
스타일 탭에서 진행률 표시줄의 간격과 배경을 변경할 수 있습니다.