번호

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 숫자 필드 사용자 정의 위젯의 패널에 일반 숫자 입력을 추가합니다. 열 개수,픽셀 너비,슬라이드당 항목,별점: 숫자로만 의미가 있는 모든 설정이 여기에 속합니다. 마스터 애드온 내부 위젯 빌더를, 허용 범위를 한 번 설정하면 편집기는 그 안에 있는 숫자만 허용하는 입력을 얻습니다.

Number 필드가 지원합니다 조건 다른 필드를 기반으로 컨트롤을 표시하거나 숨기기 위해 해당 토큰은 빌더의 필드를 통해 렌더링됩니다 나뭇가지 구문 템플릿 엔진숫자 비교는 다음과 같습니다 {% if price > 0 %} 즉시 작업하십시오. 두 가이드 모두 설정 및 제한 사항을 다룹니다.

값은 템플릿 토큰을 통해 위젯에 연결됩니다. 쓰기 {{ your_field_name }} HTML,CSS, JS 패널에서 숫자는 렌더링 시간에 거기에 인쇄됩니다. 하나의 컨트롤은 마크업,스타일링, 스크립트 동작을 동시에 구동할 수 있습니다.

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

• 브라우저 스피너 화살표를 사용하여 위젯의 Elementor 패널에 숫자 입력을 렌더링합니다.
• 범위를 강화합니다 민, 맥스, 그리고 단계 빌더에서 정의한 옵션.
• 어디에 놓든 일반 숫자를 출력합니다 {{ token }} HTML, CSS 또는 JS 패널에서.
• 비교에서 작동하므로 템플릿이 분기될 수 있습니다 {% if my_number > 3 %}.
• Elementor의 선택기 메커니즘을 대체 배선으로 지원하여 값을 CSS 규칙에 바로 작성합니다.

빌더와 위젯을 구축한 적이 없습니까? The 위젯 빌더 개요 편집기 자체를 살펴보고 개별 필드에 들어가기 전에 10분의 가치가 있습니다.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 Number 필드가 명명된 클라이언트 로고 캐러셀입니다 logos_per_slide 한 번에 표시되는 로고 수를 제어합니다.

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

드래그하세요 번호 필드 패널에서 아래 섹션으로 필드 콘텐츠 또는 스타일 탭. 착륙하자마자 필드의 옵션이 빌더의 왼쪽에 열립니다.

숫자 필드 옵션 설명 #

• 라벨: elementor의 입력 옆에 표시된 텍스트, 예를 들어 “슬라이드당 로고”.
• 이름: 템플릿이 참조하는 고유 식별자입니다. 예를 들어 문자,숫자 및 밑줄만 표시됩니다 logos_per_slide.
• 기본값: 위젯이 새 드롭으로 시작하는 번호입니다.
• 자리 표시자: 입력이 비어 있는 동안 표시되는 힌트 텍스트입니다.
• 최소/최대: 입력이 허용하는 가장 낮은 값과 가장 높은 값.
• 단계: 예를 들어 스피너 화살표가 이동하는 증가분입니다 1 정수의 경우 또는 0.5 반 단계를 위해.
• 설명: 제어하에 선택적 도우미 텍스트입니다.
• 라벨 표시, 라벨 블록, 분리기: 표준 디스플레이가 전환되고 다른 컨트롤에 특정 값이 있는 경우에만 필드를 표시하기 위한 조건이 추가됩니다.

숫자 필드를 토큰과 연결합니다 #

Number 필드는 토큰 필드입니다. 어디서나 {{ logos_per_slide }} 패널에 나타나고,현재 값은 그 자리에 인쇄됩니다. 세 패널 모두 수락합니다:

<!-- HTML panel -->
<div class="logo-track" data-count="{{ logos_per_slide }}">

/* CSS panel */
.logo-track { grid-template-columns: repeat({{ logos_per_slide }}, 1fr); }
.logo-item { min-width: {{ logo_min_width }}px; }

// JS panel
var perSlide = {{ logos_per_slide }};

여기서 묵묵히 실패하는 한 가지: 빈 필드는 빈 문자열을 인쇄하고, 그리고 repeat(, 1fr) 는 유효한 CSS 가 아니므로 브라우저는 불만없이 전체 규칙을 삭제합니다. 토큰이 CSS 또는 JS 표현식을 공급하는 경우 새 위젯이 구멍이있는 상태로 렌더링되지 않도록 기본값을 설정하십시오.

값이 숫자이기 때문에 비교는 템플릿 로직에서 작동합니다. 캐러셀은 모든 것이 이미 하나의 슬라이드에 맞을 때 탐색 화살표를 건너뛸 수 있습니다:

{% if logos_per_slide > 4 %}
<button class="logo-nav">&rarr;</button>
{% endif %}

필드도 Elementor 의 선택자 대안으로 배선하기. Number 의 경우 Elementor 는 전체 선언이 아닌 bare 값을 주입하므로 선택기 항목은 예를 들어 전체 속성을 철자해야 합니다 width: {{VALUE}}px;.

조심하세요: 토큰이 CSS 또는 JS 표현식 내부에 도달하면 장치를 중괄호 외부에 놓습니다. width: {{ logo_min_width }}px 작동; 필드가 자체 단위를 전달할 것으로 기대하는 것은 값이 맨 숫자이기 때문에 그렇지 않습니다. 단위를 선택하기 위해 편집기가 필요한 경우 슬라이더 필드가 더 적합합니다.

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

사용자 정의 위젯을 Elementor 의 페이지에 놓습니다 (페이지가 이미 열려 있는 경우 먼저 편집기를 다시 로드합니다). 숫자 필드는 설정한 레이블 아래에 스피너 화살표가 있는 작은 입력으로 나타납니다. 값을 입력하거나 화살표를 클릭합니다. 미리 보기는 실시간으로 업데이트되며 Min/Max 범위 밖의 값은 입력 자체에 의해 거부됩니다.

일반적인 사용 사례 #

• 열 및 항목 수 CSS 그리드 또는 플렉스 규칙으로 인쇄됩니다.
• 회전목마 설정 보기당 슬라이드 또는 자동 재생 지연과 같이 JS 패널에서 읽습니다.
• 픽셀 및 백분율 값 고정 단위 너비나 간격과 같이 단일 단위가 위젯에 의해 고정되는 경우.
• 등급 및 점수 템플릿을 임계값과 비교합니다.
• 한계 위젯의 스크립트로 전달되는 “최대 N개의 게시물을 표시합니다”와 같습니다.

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

• Min 과 Max 를 설정합니다. 0 또는 40 의 열 수는 대부분의 레이아웃을 깰 것입니다; 빌더에서 입력을 경계 짓는 것이 템플릿에서 보호하는 것보다 저렴합니다.
• Match Step 값의 의미에. 전체 항목이 가져옵니다 1; 불투명도 스타일 값이 나타납니다 0.1.
• 합리적인 Default를 발송합니다 따라서 위젯은 삭제되는 순간 올바르게 렌더링됩니다.
• 레이블이 아닌 숫자와 비교하십시오. {% if logos_per_slide > 4 %} 유효한 템플릿 논리입니다; a와 달리 여기에는 비교할 옵션 레이블이 없습니다 필드 선택.
• 선택기 항목의 전체 선언입니다. 토큰 대신 선택기 옵션을 통해 필드를 연결하면 Elementor가 숫자에 대한 기본 값만 주입하므로 전체 속성을 작성합니다.

자주 묻는 질문 #

감싸는 #

위젯 빌더 번호 필드는 정확한 작업을 수행합니다: 하나의 제한된 숫자 입력, 하나의 토큰, 그리고 값은 마크업, 스타일 또는 스크립트에서 위젯이 필요로하는 곳마다 도착합니다. pair it with the 스위처 필드 on/off 동작 및 리피터 필드 카운트가 설정 대신 실제 항목에서 나와야 하는 경우 나머지 항목을 탐색합니다 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.