번호

숫자 필드는 마스터 애드온으로 빌드한 사용자 지정 위젯에 숫자 입력을 추가합니다 위젯 빌더. 열 개수,글꼴 크기,행당 항목,별점: 숫자로만 의미가 있는 모든 것이 여기에 속합니다. 빌더에서 허용 범위를 설정하면 편집자는 그 안에 보관하는 입력을 받습니다.

Number 는 무료 버전의 Widget Builder 에서 사용할 수 있는 필드 중 하나입니다. 무료 플러그인에는 제한된 Widget Builder 가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.

숫자 필드가 수행하는 작업 #

• Elementor의 위젯 패널에 스피너 화살표가 포함된 숫자 입력을 추가합니다.
• 편집자가 입력할 수 있는 내용을 제한합니다 민, 맥스 그리고 단계.
• HTML, CSS 또는 JS 패널에서 토큰을 배치하는 위치에 번호를 인쇄합니다.
• 비교에서 작동합니다 {% if columns > 2 %} 마크업의 일부를 전환할 수 있습니다.

건축업자에게 새로운? 읽기 위젯 빌더 개요 일단 위젯을 열어놓고 돌아오세요.

시작하기 전에 #

• Elementor가 설치되어 활성화된 WordPress입니다.
• Elementor 용 마스터 애드온이 설치되고 활성화되었습니다. The 설치 가이드 설정을 다룹니다.
• 위젯 빌더에서 열린 위젯. 이 가이드의 예는 두 개의 숫자 필드가 있는 “상태 카운터” 위젯입니다: columns 콘텐츠 탭의 (1~4) 및 stat_size 스타일 탭의 (20 ~ 96).

숫자 필드를 추가하는 방법 #

1. 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
2. 설정이 속한 탭에 섹션을 추가합니다. 레이아웃 카운트가 맞습니다 콘텐츠, 사이즈가 맞습니다 스타일.
3. 유형 number 왼쪽의 필드 검색 상자에.
4. 드래그 번호 섹션으로. 필드의 연필을 클릭하여 설정을 엽니다.

숫자 필드 옵션 설명 #

• 라벨: elementor의 입력 옆에 있는 텍스트, 예를 들어 “열”입니다.
• 이름: 필드의 고유 ID 및 토큰 이름. 예를 들어 문자,숫자 및 밑줄만 사용합니다 columns.
• 설명: elementor 의 입력 아래에 표시된 힌트. 숫자가 제어하는 것과 중요한 경우 단위를 말하십시오.
• 자리 표시자: 입력이 비어 있는 동안 회색 텍스트가 표시됩니다.
• 민 그리고 최대: 입력이 허용하는 가장 낮은 값과 가장 높은 값.
• 단계: 스피너 화살표가 클릭할 때마다 얼마나 멀리 이동하는지. 정수는 1, 짝수는 2, 반은 0.5 를 사용합니다.
• 기본값: 위젯의 새 복사본이 시작하는 번호입니다.

Min,Max 및 Step 이 입력 자체에 도달합니다. 우리의 테스트에서 Columns 필드는 min 1,max 4 및 step 1 의 숫자 입력으로 Elementor 에 도착했기 때문에 화살표는 범위의 끝에서 멈 춥니 다.

공통 설정은 다음을 포함한 다른 필드와 마찬가지로 작동합니다 조건 다른 필드가 설정되어 있을 때만 숫자가 나타나야 하는 경우.

템플릿에 숫자를 인쇄하세요 #

토큰은 세 패널 모두에서 작동합니다. Stat Counter 위젯에서 HTML 은 값을 데이터 속성에 넣고 비교에 사용합니다:

<div class="stats-grid" data-columns="{{ columns }}">
  ...
</div>
{% if columns > 2 %}
<p class="stats-note">Tip: drop to two columns for a narrower layout.</p>
{% endif %}

CSS 패널은 숫자 필드가 보통 그것의 유지를 얻는 곳에 이다. 필드가 벌거벗은 수를 저장하기 때문에,단위를 버팀대 이상으로 둔다:

.stats-grid { grid-template-columns: repeat({{ columns }}, 1fr); }
.stat-value { font-size: {{ stat_size }}px; }

예를 들어 JS 패널에서도 동일한 토큰이 작동합니다 var perRow = {{ columns }};.

모든 숫자 필드에 기본 값을 지정합니다 #

빈 필드는 아무것도 인쇄하지 않으며, 이는 주변의 규칙을 조용히 위반합니다. 열 필드가 지워지면 CSS가 됩니다 repeat(, 1fr), 어떤 브라우저가 삭제되고 그리드가 다시 단일 열로 떨어졌습니다. 그만큼 {% if columns > 2 %} 체크가 동시에 일치를 멈췄습니다. 패널에 있는 아무 것도 경고하지 않습니다.

따라서 CSS 또는 JavaScript를 공급하는 모든 숫자 필드에 기본 값을 설정하고 편집자가 지울 수 있는 경우 템플릿에서 빈 값을 가능한 한 처리하십시오.

숫자 필드에서 선택기를 비워 둡니다 #

Selector 박스는 이 필드에 대해 이상하게 동작하며, 우리의 테스트에서 한 번에 두 가지 문제를 일으켰습니다:

• 속성 이름 없이 규칙에 맨 숫자를 썼으므로 사용할 수 있는 CSS가 나오지 않았습니다.
• 선택기가 채워지는 동안 필드의 기본 값이 토큰에 도달하는 것을 중단했습니다. 아무도 렌더링하지 않은 위젯입니다 font-size:px 프런트 엔드에. 선택기를 지우면 고정, 그리고 렌더링 같은 손길이 닿지 않은 위젯 font-size:44px.

대신 위에 표시된 것처럼 CSS 패널에서 토큰을 인쇄하십시오. 그러면 기본값이 계속 작동하고 속성과 단위를 직접 작성할 수 있습니다.

Elementor 에서 Number 컨트롤을 사용합니다 #

페이지에 위젯을 추가하거나 페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 각 숫자 필드는 레이블 아래,포장한 탭에 작은 입력으로 표시됩니다. 값을 입력하거나 화살표를 사용하고 미리보기가 업데이트됩니다.

다음은 4개의 열과 더 큰 숫자 크기의 2개의 열에 있는 동일한 위젯입니다:

일반적인 사용 사례 #

• 그리드 및 회전목마의 열 또는 항목 수입니다.
• 픽셀 단위의 글꼴 크기, 간격 값 및 너비입니다.
• 별점, 리뷰 점수 및 백분율.
• 슬라이드당 항목 또는 자동 재생 지연과 같은 스크립트 읽기 횟수와 속도를 계산합니다.

숫자 필드를 작업하기 위한 팁 #

• 항상 Default Value 를 설정한다. 작동하는 위젯과 묵묵히 깨진 규칙의 차이입니다.
• Min 과 Max 를 디자인이 취할 수 있는 것으로 설정하십시오. 네 개의 기둥을 위해 만들어진 격자는 12 를 받아서는 안 됩니다.
• 라벨이나 설명에 장치를 넣으세요필드는 일반 숫자를 저장하므로 “픽셀 단위”가 있는 “숫자 크기”와 같습니다.
• 유닛을 토큰 외부에 보관하십시오 CSS에서: {{ stat_size }}px, 교정기 내부가 아닙니다.
• 대신 유닛이 있는 슬라이더를 원하시나요? 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 슬라이더 필드 편집자에게 드래그 핸들을 제공하는 Pro 필드입니다.

자주 묻는 질문 #

감싸는 #

숫자 필드를 추가하고 Min,Max, Step 및 Default Value 를 설정한 다음 필요한 곳에 토큰을 인쇄하고 직접 유닛을 추가합니다. 기본값이 계속 작동하도록 Selector 를 비워 둡니다. 유닛 옵션이 있는 드래그 핸들의 경우 다음을 참조하십시오 슬라이더 필드, 그리고 확인 가격 각 계획에 포함된 내용입니다.