진행률 표시줄 위젯 설정

하나의 진행률 표시줄은 하나의 스토리를 알려줍니다. 그 중 쌓인 세트는 독자가 작업하게 만들지 않고도 전체 기술 세트,서비스 라인업 또는 프로젝트의 상태를 보여줍니다. The 진행률 표시줄 위젯 에서 Elementor용 마스터 애드온 는 그 경우를 위해 만들어졌습니다. 여러 애니메이션 막대를 하나의 위젯으로 그룹화하므로 필요한 만큼 추가하고 함께 또는 한 번에 하나씩 스타일을 지정합니다.

독립형으로 멀티 바 동반자라고 생각하십시오 진행률 표시줄 위젯. 모든 메트릭에 대해 별도의 위젯을 삭제하는 대신 하나의 패널에서 전체 그룹을 관리합니다. 각 막대는 자체 제목,백분율 및 색상을 얻는 반면 공유 스타일 탭은 세트의 모양을 제어합니다.

먼저 보는 것을 선호하시나요? 이 짧은 튜토리얼은 위젯을 드래그하는 것부터 바 스타일링까지 위젯을 끝까지 살펴봅니다:

Progress Bars 위젯이 수행하는 작업 #

위젯은 뷰로 스크롤할 때 0 에서 설정 값으로 애니메이션되는 가로 막대 목록을 렌더링합니다. 모든 막대는 왼쪽에 제목,퍼센트 레이블 및 입력한 숫자와 일치하도록 커지는 색상 채우기를 표시합니다.

단일 바 위젯과의 차이점은 구조입니다. 여기서 바는 라는 중계기 내부에 살고 있습니다 통계 바,그러므로 캔버스를 건드리지 않고 막대를 추가,복제, 재정렬,삭제합니다. 하나의 위젯,하나의 스타일 컨트롤 세트,그리고 임의의 수의 막대.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• 막대가 갈 Elementor 편집기에서 열린 페이지입니다.

진행률 표시줄 위젯을 추가하는 방법 #

Elementor 편집기에서 을 엽니다 요소 패널 및 검색 진행률 표시줄또는 마스터 애드온 섹션으로 스크롤을 내려갑니다. 여기서 이름 보기: 거의 같은 내용을 읽는 두 개의 위젯이 있습니다. 진행률 표시줄 는 단일 바, 그리고 진행률 표시줄 는 그룹입니다. 드래그 진행률 표시줄 귀하의 페이지에.

이미 3개의 샘플 막대가 채워진 상태로 드롭인되므로 즉시 작업 결과가 표시되고 빈 상태로 시작하는 대신 거기에서 편집할 수 있습니다.

콘텐츠 탭에서 각 막대를 편집합니다 #

열다 콘텐츠 탭을 누르면 찾을 수 있습니다 통계 바 반복기. 각 행은 하나의 막대입니다. 행을 클릭하여 확장하면 세 가지 설정이 제공됩니다:

• 통계 제목: “웹 디자인” 또는 “워드 프레스” 와 같은 막대 위에 표시된 레이블. 이 필드는 Elementor 동적 태그를 가져 오므로 태그 아이콘을 사용하여 게시물 필드, 작성자 메타 또는 다른 동적 소스에서 제목을 가져올 수 있습니다.
• 백분율 값: 막대가 얼마나 채워지는지,라벨이 무엇을 읽는지 설정하는 1 부터 100 까지의 숫자입니다. Enter 87 그리고 막대는 87 퍼센트로 채워집니다.
• 바 색상: 이 한 막대에 대한 선택적 색상입니다. 전역 활성 막대 색상을 사용하려면 비워 두거나 단일 막대에 대한 그룹 색상을 재정의하려면 여기에 설정하십시오.

바별 색상이 그룹을 유연하게 만드는 요소입니다. 모든 바를 하나의 브랜드 색상으로 유지하거나,각 메트릭에 고유한 색조를 부여하여 한눈에 쉽게 구분할 수 있도록 하세요.

무제한 바 추가 #

다른 막대를 추가하려면 을 클릭합니다 항목 추가 중계기 하단에. 이름을 바꾸고 설정할 수 있는 기본값이 있는 새 막대가 나타납니다. 캡이 없으므로 필요한 만큼 콘텐츠를 구축하세요. 모든 행의 복사 아이콘은 설정이 그대로 유지된 막대를 복제하고 X 아이콘은 하나를 제거합니다.

콘텐츠 탭에는 다음도 있습니다 도움말 문서 빠른 참조를 위한 링크 및 a 래퍼 링크 무료에서 옵션 래퍼 링크 전체 위젯을 클릭 가능하게 만드는 확장. 그 하나는 바 어딘가에 링크 카드에 앉아있을 때 편리하게 제공됩니다.

스타일 탭에서 모든 막대를 스타일링합니다 #

로 전환하십시오 스타일 전체 그룹의 모습을 제어하는 탭. 이러한 설정은 한 번에 모든 막대에 적용되므로 콘텐츠 탭에서 막대당 재정의가 알 가치가 있는 이유가 바로 여기에 있습니다. 스타일 탭이 침입합니다 통계 바, 통계 제목, 통계 백분율, 그리고 패턴.

통계 바 #

• 바 BG 색상: 모든 채우기 뒤에 있는 빈 트랙의 색상입니다.
• 활성 바 색상: 콘텐츠 탭에 자체 막대 색상이 설정되어 있지 않은 막대의 기본 채우기 색상입니다.
• 수직 간격: 쌓인 막대 사이의 간격.
• 바 높이: 막대의 두께는 픽셀 단위입니다.
• 통계 막대 테두리 반경: 모서리를 둥글게 만듭니다. 짝수 반경에 대한 네 개의 값을 연결하거나,상단, 오른쪽,하단, 왼쪽을 별도로 설정합니다.

통계 제목 #

이 섹션에서는 각 막대 위의 레이블 스타일을 지정합니다.

• 정렬: 제목 텍스트의 왼쪽, 중앙 또는 오른쪽.
• 색상: 제목 색상이.
• 타이포그래피: 글꼴 패밀리, 크기, 무게, 변환 및 Elementor의 나머지 유형 옵션을 완벽하게 제어합니다.

통계 백분율 #

백분율 레이블은 자체 색상 및 타이포그래피 컨트롤을 가져오므로 숫자를 굵게 크게 만들거나 조용히 유지할 수 있습니다.Below it sits the 패턴 섹션. 그것은 무료 패턴 확장에서 온다 고 바 내부가 아닌 전체 위젯 뒤에 고정 된 색상 배경 패턴을 추가 합니다.

페이지의 결과 #

페이지를 게시하거나 미리보기하면 섹션이 뷰포트에 들어갈 때 막대가 0 에서 설정 값까지 애니메이션화됩니다. 스타일링은 다음을 통해 진행됩니다: 사용자 정의 막대 색상,제목 색상,백분율 크기,간격 및 높이 모두 라이브 페이지에 표시됩니다.

일반적인 사용 사례 #

• 스킬 바 정보 또는 이력서 페이지(디자인, 개발, 마케팅).
• 서비스 강점 대행사 페이지에는 제안당 하나의 바가 있습니다.
• 프로젝트 또는 캠페인 상태 완료율로 표시됩니다.
• 기능 점수 비교 블록에서 a와 쌍을 이룹니다 비교표.
• Stat 하이라이트 애니메이션 숫자 옆 카운터 업 위젯.

진행률 표시줄 작업을 위한 팁 #

• 그룹 스타일링을 먼저 설정한 다음 재정의합니다. 활성 바 색상과 바 높이를 한 번 선택한 다음 바가 눈에 띄는 위치에만 바별 색상을 추가하세요.
• 백분율을 정직하게 유지하세요. 숫자도 레이블이므로 76 으로 설정된 막대는 “76%”라고 읽습니다. 채우기를 실제 수치와 일치시킵니다.
• 높이와 반경을 함께 조정합니다. 반경이 일치하는 더 큰 막대는 둥근 알약으로 읽혀집니다; 반경이 큰 얇은 막대는 잘린 것처럼 보일 수 있습니다.
• 템플릿에서 동적 제목을 사용합니다. 막대가 게시물이나 아카이브 템플릿에 있으면 통계 제목을 동적 태그에 연결하여 각 항목에 라벨을 붙입니다.
• 다시 만드는 대신 복제합니다. 복사 아이콘은 색상과 타이포그래피로 막대를 복제하여 새 항목을 직접 설정하는 것보다 낫습니다.

자주 묻는 질문 #

감싸는 #

Progress Bars 위젯은 메트릭 스택을 깔끔한 애니메이션 블록 하나로 바꿉니다. Stats Bars 리피터에 막대를 추가하고,각 제목과 백분율을 설정하고,개별적으로 또는 그룹으로 색칠하고,스타일 탭에서 전체 집합을 형성합니다. 단일 독립 실행형 막대의 경우,에 도달하십시오 진행률 표시줄 위젯 대신. 전체 찾아보기 마스터 애드온 위젯 및 확장 무엇을 더 만들 수 있는지 확인하고 다음을 확인하세요 진행률 표시줄 위젯 페이지 데모의 경우. 위젯은 무료이며 Pro 전용 옵션이 없습니다.