숫자는 문장보다 더 빨리 설득: 5.5K 알림 전달, 120M 동영상 조회. 그만큼 카운터 업 위젯 인 Elementor용 마스터 애드온 방문자가 스크롤할 때 0부터 카운트업되는 카드 행에 해당 통계를 넣습니다. 각 카드에는 아이콘, K+ 또는 M+와 같은 접미사 및 자체 스타일이 있습니다.
이 가이드는 처음부터 4 개의 stat 섹션을 구축 합니다: 항목, 숫자, 아이콘, 레이아웃, 그리고 카드 스타일링, 라이브 페이지에서 완성 된 카운터로 끝나는.
카운터 업 위젯이 하는 일 #
하나의 위젯은 카운터 항목 세트를 보유합니다. 각 항목은 stat: 뷰로 스크롤할 때 0 부터 애니메이션되는 숫자,주변에 접두사 또는 접미사,아래에 제목,상단에 선택적인 아이콘 또는 이미지입니다. 위젯은 항목을 열로 배열하고 그룹으로 스타일링하므로 카드당 만지작거림 없이도 통계 밴드가 일관성을 유지합니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 기본 위젯 아래의 마스터 애드온 옵션 패널에서 카운터 업 위젯이 활성화되었습니다.
- 여러분의 실수. 발명된 수치로 된 통계 섹션은 통계가 전혀 없는 것보다 더 큰 해를 끼칩니다.
카운터 업 위젯을 추가하는 방법 #
Elementor 편집기에서 다음을 검색합니다 요소 위한 패널 카운터 업 그리고 페이지로 드래그합니다. 이미 캔버스에 카운팅 중인 샘플 항목으로 로드되므로 애니메이션이 첫 초부터 보입니다.
각 카운터 항목을 설정합니다 #
오픈 카운터업 콘텐츠 그리고 목록에서 항목을 클릭합니다. 각각은 per-stat 컨트롤의 전체 세트를 운반:
- 유형: stat 위에 없음, 아이콘 또는 이미지.Icon은 Elementor 라이브러리를 엽니다; image는 미디어 라이브러리를 엽니다.
- 제목: “알림 전달”과 같은 번호 아래의 라벨입니다.
- 숫자 접두사 및 접미사: 숫자 주위에 텍스트. “$” 접두사 또는 “K +” 접미사는 5.5 를 $ 5.5 또는 5.5K +로 바꿉니다.
- 번호: 카운터가 올라가는 값입니다. 소수는 작동하므로 K+ 접미사가 붙은 5,5 는 5,5K+를 읽습니다.
- 배경: 하나의 통계가 눈에 띄어야 하는 경우를 위한 항목별 카드 색상입니다.
접미사 트릭은 큰 숫자를 짧게 유지합니다: 120,000,000 으로 애니메이션하는 대신 데모는 M + 접미사로 120 으로 계산됩니다. 더 빠른 애니메이션,더 깨끗한 카드,그리고 아무도 확인할 0 을 계산하지 않습니다.
항목별 배경 그 카드만 색칠합니다. 헤드라인 통계를 강조 표시하거나 건너뛰고 공유 상자 스타일이 네 가지를 모두 처리하도록 하는 데 유용합니다:
열과 콘텐츠 위치를 선택합니다 #
항목 목록 아래, 열 장치당 응답 토글을 사용하여 행을 공유하는 카운터 수를 설정합니다. 콘텐츠 위치 숫자를 기준으로 제목을 배치합니다: 위쪽, 왼쪽, 오른쪽 또는 아래쪽. 데모는 나란히 숫자와 제목이있는 2 열을 시도 한 다음 4 열을 쌓아 다시 정착합니다.
아이콘을 조정합니다 #
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 아이콘 설정 섹션은 모든 카드의 아이콘 블록을 제어합니다: 아이콘/이미지 위치 (스탯의 왼쪽, 위, 오른쪽), 아이콘 크기, 그리고 아이콘 원 또는 이미지 크기 글리프 뒤에 있는 컬러 디스크의 경우. 데모는 86 픽셀 서클에 30 픽셀 아이콘을 실행합니다.
카드를 스타일링합니다 #
에서 스타일 탭, 카운터 업 박스 스타일 공유 카드 모양을 덮습니다: 배경 색상, 패딩, 여백, 국경 유형, 테두리 반경, 그리고 박스 섀도우. 데모는 20 픽셀 패딩과 여백이있는 소프트 핑크 카드에 착륙하여 하드 테두리없이 4 개의 통계를 구분합니다.
숫자, 제목, 아이콘을 스타일링합니다 #
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 콘텐츠 스타일 섹션은 카드의 요소당 하나씩, 4개의 그룹으로 나뉩니다:
- 아이콘 스타일: 글리프 색상과 그 뒤에있는 원 색상. 데모는 흰색 아이콘으로 원을 진한 보라색으로 바꿉니다.
- 번호 스타일: 카드에서 가장 큰 텍스트인 통계 자체의 색상 및 타이포그래피입니다.
- 숫자 접두사: 자체 색상, 타이포그래피, 크기 및 여백이 있으므로 통화 기호는 숫자보다 작게 표시될 수 있습니다.
- 제목 스타일: 라벨의 색상, 타이포그래피 및 여백.
페이지의 결과 #
라이브 페이지에서 섹션이 뷰로 스크롤되면서 숫자가 0 에서 스핀업된 다음 최종 값으로 정착됩니다. 여기에 완성된 밴드가 있습니다:
일반적인 사용 사례 #
- 회사 통계 밴드: 서비스를 받은 고객, 프로젝트 제공, 수년간의 사업.
- SaaS 증명 섹션: 사용자, 가동 시간, 통합.
- 포트폴리오 번호: 캠페인 실행, 수익 창출, 편집 시간.
- 비영리 영향: 식사 배달, 자원봉사자, 기금 모금.
- 코스 및 커뮤니티 페이지: 학생, 수업, 리뷰.
더 나은 카운터를위한 팁 #
- 큰 숫자에 접미사를 사용하세요. M+ 접미사를 사용하여 120까지 계산하면 9자리까지 계산하는 것보다 더 빠르게 애니메이션화되고 더 깔끔하게 읽혀집니다.
- 세트를 3~4개의 통계로 유지하세요. 6개의 카운터가 경쟁합니다; 4개는 읽혀집니다.
- 가장 강한 숫자로 리드하세요. 방문자는 왼쪽에서 오른쪽으로 읽으며 행을 끝내지 못할 수도 있습니다.
- 아이콘 서클을 팔레트에 일치시킵니다. 원 색상은 카드에서 가장 눈에 띄는 스타일 선택입니다; 데모의 보라색-분홍색 작품은 둘 다 하나의 팔레트에서 나오기 때문입니다.
- 모바일 열 수를 확인합니다. 전화기의 4개 열이 숫자를 압축합니다; 응답 열 컨트롤은 한 번의 클릭으로 문제를 해결합니다.
비디오 자습서 #
카운터 업 위젯이 작동하는 모습을 보고 싶다면, 이 비디오는 첫 번째 항목부터 라이브 페이지의 애니메이션 통계 대역까지 전체 설정을 살펴봅니다:
자주 묻는 질문 #
마스터 애드온의 카운터 업 위젯은 무엇입니까?
애니메이션 통계 섹션용 Elementor 위젯입니다. 각 항목에는 스크롤에서 0 부터 카운트업하는 숫자와 접두사,접미사, 제목 및 선택적 아이콘 또는 이미지가 포함되어 있습니다. 열,아이콘 크기 조정 및 카드 스타일링은 세트 전체에서 공유됩니다.
120000000 대신 120M+를 어떻게 표시하나요?
Number 를 120 으로 설정하고 Number Suffix 를 M+로 설정합니다. 카운터는 120 으로 애니메이션을 적용하고 120M+를 표시합니다. K+ 접미사가 붙은 5,5 와 같은 K+ thousands 및 decimal 값에서도 동일하게 작동합니다.
각 카운터에는 고유한 아이콘과 색상이 있을 수 있나요?
예. 모든 항목은 유형 컨트롤을 통해 자체 아이콘 또는 이미지를 선택하고 각 항목에는 고유한 배경 색상이 있습니다. 공유 아이콘 크기,원 크기 및 카드 스타일은 아이콘 설정 및 스타일 탭에서 가져옵니다.
카운팅 애니메이션은 언제 시작되나요?
위젯이 뷰포트로 스크롤될 때 숫자가 애니메이션화되어 0 부터 설정한 값까지 계산됩니다. 섹션에 도착한 방문자는 카운트업 플레이를 한 번 볼 수 있습니다.
연속으로 몇 개의 카운터가 있는지 변경할 수 있나요?
예. 카운터 업 콘텐츠의 열 드롭다운은 행 수를 설정하고 반응형 토글을 전달하므로 4 열 데스크톱 밴드는 태블릿에서 2 열,휴대폰에서 1 열로 드롭할 수 있습니다.
감싸는 #
카운터 업 위젯은 일반 숫자를 이동하는 통계 밴드로 바꿉니다: 항목별 아이콘, 접두사, 접미사, 공유 열 및 카드 스타일링, 그리고 정확히 한 번 시선을 끄는 카운트업 애니메이션의 전체 세트를 찾아봅니다 마스터 애드온 위젯 및 확장 플러그인과 함께 제공되는 다른 항목을 확인하고 확인하세요 가격 페이지 패턴과 같은 Pro 엑스트라의 경우.
