스킬 바,펀딩 목표,프로젝트 상태 모두 문장에 묻혀있는 숫자보다 시각적으로 더 잘 읽혀집니다. 무료 진행률 표시줄 위젯 에서 Elementor용 마스터 애드온 제목과 백분율이 있는 애니메이션 막대와 일반 선, 거품이 있는 선, 전체 원 및 반원 게이지 사이를 전환하는 스타일 사전 설정 드롭다운을 제공합니다.
제목과 값을 설정하고 사전 설정을 선택한 다음 브랜드에 맞게 앞 막대,뒤 막대 및 값을 색칠합니다. 이 가이드에서는 위젯의 모든 설정을 다룹니다.
Progress Bar 위젯이 하는 일 #
위젯은 하나의 진행 표시기를 렌더링합니다: 제목,퍼센트 값,페이지가 로드될 때 해당 값으로 채워지는 막대. The 스타일 사전 설정 드롭다운은 모양을 변경하므로 동일한 값이 수평선, 부동 버블이 있는 선, 도넛 원 또는 반원 게이지로 표시될 수 있습니다.
그것은 세 개의 탭이 있습니다. 콘텐츠 제목과 값을 보유합니다. 스타일 사전 설정, 앞면 및 뒷면 막대 색상, 거품, 제목 및 값 텍스트를 제어합니다. 고급 일반적인 Elementor 간격 및 가시성 옵션을 제공합니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- WordPress 60% 또는 Java 85%와 같이 표시하려는 레이블 및 비율입니다.
Progress Bar 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 진행률 표시줄또는 마스터 애드온 섹션으로 스크롤합니다 (위젯에는 보라색 MA 배지가 있습니다). 페이지로 드래그하면 편집할 준비가 된 단일 막대가 로드됩니다.
앞면: 두 개의 유사한 위젯이 있습니다. 진행률 표시줄 는 단일 바 (이 가이드), 그리고 진행률 표시줄 (그 진행률 표시줄 위젯) 는 하나의 위젯 안에 여러 개의 막대를 쌓습니다. 다른 스타일의 몇 개의 독립 막대의 경우 단일 Progressbar 가 유연한 선택입니다.
제목과 값을 설정합니다 #
열다 콘텐츠 탭. 오직 두 개의 필드만 있어,설정을 빠르게 유지합니다.
- 제목: 바 위의 라벨, 워드프레스나 디자인처럼.
- 값: 막대가 채우는 비율은 0에서 100입니다.
각 Progressbar 는 하나의 막대이기 때문에 위젯을 복제하여 세트를 만듭니다. 마우스 오른쪽 버튼을 클릭하고 Duplicate (또는 Ctrl/Cmd + D 를 누름) 를 선택한 다음 각 복사본의 제목과 값을 변경합니다. 이것이 바로 위의 WordPress 및 Java 막대가 나란히 끝나는 방식입니다.
스타일 사전설정을 선택합니다 #
로 전환하십시오 스타일 탭 및 열기 일반 스타일. 그만큼 스타일 사전 설정 드롭다운은 모양을 선택하는 곳입니다. The 라인 버블 preset은 fill의 끝에 백분율과 rides를 보여주는 부동 버블을 추가합니다.
- 스타일 사전 설정: 라인, 라인 버블, 서클, 팬(반원 게이지).
- 버블 색상: 버블 사전 설정의 퍼센트 버블 색상입니다.
- 버블 위치: 바에 대해 거품을 위 또는 아래로 이동하십시오.
원 및 반원 게이지 사전 설정 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 서클 preset은 중앙에 백분율이 있는 전체 도넛을 그립니다. 이는 컴팩트한 통계 블록에 적합합니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 팬 사전 설정은 대시보드 스타일 등급이나 속도계 모양에 적합한 반원 게이지를 그립니다.
막대 부분을 스타일링합니다 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 스타일 탭은 위젯을 스스로 스타일을 지정할 수 있는 부분으로 나눕니다: 일반 스타일, 제목, 프론트 바, 백 바, 그리고 값. 무료인 경우 패턴 확장이 켜져 있습니다 패턴 장식 오버레이 섹션도 이 탭에 나타납니다.
- 제목: 라벨의 색상 및 타이포그래피.
- 앞 바: 채워진 부분의 색상과 너비.
- 뒷바: 그 뒤에 채워지지 않은 트랙의 색상과 너비입니다.
- 값: 백분율 텍스트의 색상 및 타이포그래피입니다.
오픈 프론트 바 채우기 색상과 너비를 설정하려면. 이것은 전체 막대 또는 게이지에 걸쳐 브랜드 색상을 전달하는 것입니다.
일반적인 사용 사례 #
- 스킬 바 약 또는 이력서 페이지(WordPress 90%, Design 75%).
- 자금 또는 목표 측정기 캠페인이 얼마나 가까운지 보여줍니다.
- 서클 통계 서비스 또는 결과 블록에서.
- 반원 게이지 점수, 평점 또는 대시보드 위젯용.
- 프로젝트 상태 클라이언트 또는 포트폴리오 페이지의 막대.
Progress Bar 위젯 작업 팁 #
- 복제한 다음 편집합니다. 하나의 막대를 원하는 방식으로 스타일링한 다음 복사하고 제목과 값을 변경합니다.
- 규모를 정직하게 유지하십시오. 값은 퍼센트이므로 60 은 60 퍼센트가 가득 찼다는 의미입니다.
- 일치 전면 및 후면 바 대비. 브랜드 색상 채우기 뒤에 있는 가벼운 트랙이 명확하게 읽혀집니다.
- 정확한 숫자에 대해서는 거품을 사용하십시오. 라인 버블 사전 설정은 채우기에 백분율을 바로 표시합니다.
- 컨텍스트에 대한 모양을 선택합니다. 하나의 뛰어난 통계를 위한 스킬 목록, 서클 및 팬을 위한 라인입니다.
비디오 자습서를보십시오 #
화면에서 따라하는 것을 선호하시나요? 아래의 비디오 튜토리얼은 Progress Bar 요소를 처음부터 끝까지 살펴보고 Elementor 편집기에서 각 스타일 사전 설정,색상 및 값이 어떻게 작동하는지 보여줍니다.
자주 묻는 질문 #
마스터 애드온의 Progress Bar 위젯은 무엇입니까?
제목과 백분율이 있는 애니메이션 진행률 표시기를 보여주는 Elementor 위젯입니다. 스타일 사전 설정 드롭다운은 선,거품이 있는 선,전체 원 및 반원 게이지 사이를 전환하며 Elementor 패널의 모든 부분을 색칠합니다.
위젯에는 어떤 진행률 표시줄 스타일이 포함되어 있나요?
4 개의 사전 설정: 선,선 버블,서클, 팬. 선은 일반 수평 막대,선 버블은 부동 백분율 버블을 추가하고,서클은 중앙에 값이있는 전체 도넛을 그리고,팬은 반원 게이지를 그립니다. 값은 그들 모두에 걸쳐 동일하게 유지됩니다.
Elementor 에서 원형 또는 게이지 진행률 표시줄을 만들 수 있습니까?
예. 스타일 사전 설정을 중앙에 백분율이 있는 전체 도넛의 경우 원으로 설정하거나 반원 게이지의 경우 팬으로 설정합니다. 둘 다 설정한 값에 애니메이션을 적용하고 스타일 탭의 앞면 막대 및 뒷면 막대 섹션을 통해 색칠할 수 있습니다.
여러 진행률 표시줄을 어떻게 추가합니까?
각 Progressbar 위젯은 하나의 막대이므로 위젯을 복제하고 각 복사본의 제목과 값을 변경합니다. 스킬 막대 행의 열에 복사본을 배치합니다. 하나의 위젯 내부에서 관리되는 여러 막대의 경우 별도의 Progressbars 위젯을 대신 사용하십시오.
진행률 표시줄이 애니메이션됩니까?
네,한 번입니다. 페이지가 로드될 때 바가 0 에서 그 값까지 약 1 초 만에 채워지므로,뷰로 스크롤될 때가 아니라,상단 근처에 배치된 바가 모션을 가장 잘 보여줍니다. 선,원, 팬 사전 설정에서 동일하게 작동합니다.
감싸는 #
Progress Bar 위젯은 일반 퍼센트를 애니메이션 라인,버블, 원 또는 게이지로 바꿉니다. 제목과 값을 설정하고 사전 설정을 선택한 다음 전면 막대,뒷면 막대 및 값에 색상을 지정하여 디자인에 맞게 지정합니다. Elementor 자체 Progress Bar 와의 개요 및 비교는 을 참조하십시오 Elementor 원 진행률 표시줄 위젯 페이지. 관련된 위젯은 을 참조하십시오 진행률 표시줄 스킬 바의 경우, 읽기 진행률 표시줄 스크롤 표시기의 경우 카운터 업 위젯 그리고 the 정보 상자 위젯, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
