슬라이더

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 슬라이더 필드 사용자 정의 위젯의 패널에 드래그-설정 범위 컨트롤을 넣습니다. Elementor 가 자체 위젯의 간격,너비 및 테두리 반경에 사용하는 것과 동일한 것입니다. 마스터 애드온 내부 위젯 빌더를 사용하면 사용자가 선택할 수 있는 최소값,최대값, 단계 및 단위를 설정합니다. Elementor 에서 위젯을 편집한 다음 원시 CSS 값을 입력하는 대신 핸들을 드래그하는 사람.

슬라이더 필드가 지원합니다 조건 모든 컨트롤과 마찬가지로 해당 값은 숫자이므로 나뭇가지 구문 템플릿 엔진 다음과 같은 비교를 통해 분기할 수 있습니다 {% if columns >= 3 %}. 두 가이드 모두 설정 및 제한 사항을 다룹니다.

슬라이더가 생성하는 값은 일반 숫자가 아닙니다. 쌍입니다: 크기와 단위. 그 하나의 세부 사항이 필드를 스타일시트에 연결하는 방법을 결정하므로 이 문서는 대부분의 시간을 그곳에서 보냅니다.

슬라이더 필드가 수행하는 작업 #

• 범위 슬라이더를 렌더링합니다 드래그 가능한 핸들과 숫자 입력이 옆에 있어 Elementor의 기본 슬라이더 컨트롤과 일치합니다.
• 단위 스위처를 제공합니다 둘 이상의 단위를 허용하면 동일한 컨트롤이 px, % 또는 em에서 작동할 수 있습니다.
• 크기와 유닛을 함께 저장합니다 하나의 값으로 CSS 패널은 점 표기법으로 읽습니다.
• 반응형 값 지원사용자가 장치 아이콘과 장치당 다른 크기를 설정할 수 있습니다.
• 동적 값을 받아들입니다 그리고 CSS 패널의 대안으로 Elementor의 선택기 메커니즘을 통해 CSS를 작성할 수 있습니다.

위젯을 구축하는 새로운? 읽기 위젯 빌더 개요 첫째; 이 문서는 편집기에 이미 위젯이 열려 있다고 가정합니다.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 팀 카드 그리드입니다 .team-row 컨테이너는 사용자가 조절할 수 있는 카드 사이의 간격이 필요합니다.

슬라이더 필드를 추가하는 방법 #

Widget Builder 편집기에서 찾을 때까지 왼쪽의 필드 패널을 스크롤합니다 슬라이더 치수와 같은 다른 CSS 값 필드와 함께 나열된 필드입니다.

아래의 섹션으로 드래그하세요 스타일 탭, 어디 크기 조절은 일반적으로 살고 있지만 콘텐츠 및 고급도 작동. 일단 착륙, 필드의 옵션은 왼쪽에 열립니다.

슬라이더 필드 옵션 설명 #

• 라벨: elementor의 컨트롤 옆에 있는 텍스트, 예를 들어 “Card Gap”.
• 이름: 예를 들어 CSS가 참조하는 고유 식별자는 문자, 숫자 및 밑줄만 표시됩니다 my_gap.
• 기본값: 시작 값은 크기와 단위로 저장됩니다.
• 최소, 최대, 단계: 핸들이 커버하는 범위와 각 드래그 증가분이 얼마나 멀리 이동하는지. 갭 컨트롤은 1 단계씩 0 에서 100 까지 실행될 수 있습니다.
• 크기 단위: 사용자가 전환할 수 있는 단위,예를 들어 px,%, em. 한 단위는 스위처를 숨깁니다; 여러 개가 보여줍니다.
• 반응형: 장치 아이콘을 추가하여 각 중단점이 자체 값을 유지하도록 합니다.
• 동적 그리고 선택기: 동적 태그 지원, 그리고 Elementor의 선택기 메커니즘은 아래에서 다룹니다.
• 설명, 라벨 표시, 구분 기호 및 조건은 모든 필드에 적용되는 동일한 표시 옵션입니다.

슬라이더를 CSS에 연결합니다 #

슬라이더의 값은 두 개의 키가 있는 배열입니다: size 그리고 unit. 필드 이름을 자체적으로 인쇄하면 인쇄할 단일 값이 없으므로 아무것도 출력하지 않습니다. CSS 패널에서는 항상 두 부분을 점 표기법으로 작성하십시오:

.team-row {
  gap: {{ my_gap.size }}{{ my_gap.unit }};
}

px가 선택된 렌더링의 값은 24입니다 gap: 24px;. 단위 전환기를 %로 변경하면 동일한 규칙이 됩니다 gap: 24%; 템플릿을 건드리지 않고.

조심하세요: {{ my_gap }} 자체적으로 빈 문자열을 인쇄합니다. If your rule renders as gap: ; 그리고 레이아웃은 컨트롤을 무시합니다 .size 그리고 .unit 거의 항상 왜입니다. 동일한 침묵이 이름 바꾸기를 따릅니다: 필드의 이름을 나중에 변경하면 이전 토큰이 계속 렌더링되므로 아무 것도 포함하지 않으므로 같은 자리에서 CSS 패널을 업데이트하십시오.

선택기 대안 #

슬라이더는 또한 CSS 패널을 거치는 대신 CSS 를 대신 써주는 Elementor 의 선택기 메커니즘과 함께 작동합니다. 슬라이더의 경우 Elementor 는 전체 선언이 아닌 베어 값을 주입하므로 빌더의 일반 선택기 필드만으로는 사용 가능한 규칙을 생성할 수 없습니다. 사용자 지정 선택기 항목은 Elementor 의 자체 자리 표시자를 사용하여 전체 속성을 전달해야 합니다:

'{{WRAPPER}} .team-row' => 'gap: {{SIZE}}{{UNIT}};'

대부분의 위젯의 경우 CSS 패널 토큰은 더 간단한 경로입니다; Elementor가 출력을 관리하기를 원할 때 선택기 항목에 도달합니다.

Elementor 에서 슬라이더 컨트롤을 사용합니다 #

Elementor 의 페이지에 사용자 정의 위젯을 추가합니다. 페이지가 이미 열려 있는 경우 오래된 탭에 이전 패널이 계속 표시되므로 먼저 편집기를 다시 로드합니다. 슬라이더는 레이블,핸들, 숫자 입력 및 단위 전환기와 함께 위젯 패널에 표시됩니다. 두 개 이상의 단위를 허용한 경우.

핸들을 드래그하거나 숫자를 입력하면 미리보기가 즉시 이어집니다. Responsive 를 켜면 장치 아이콘이 데스크톱,태블릿 및 모바일 값 간에 컨트롤을 전환하므로 동일한 필드의 휴대폰에서 40px 데스크톱 간격이 16px 로 줄어들 수 있습니다.

일반적인 사용 사례 #

• 그리드 및 플렉스 갭 카드, 열 또는 갤러리 항목 사이.
• 요소 너비와 높이이미지 크기나 구분선 길이와 같은 유체 레이아웃에 대한 % 옵션이 있습니다.
• 국경 반경 하나의 균일한 반경으로 충분할 때 카드와 버튼에.
• 아이콘 및 글꼴 크기 조정 em 단위가 주변 텍스트와 관련하여 항목을 유지하는 경우.
• 간격 오프셋 배지와 그것이 앉은 모서리 사이의 거리처럼.

슬라이더 필드와 작업하기 위한 팁 #

• 항상 두 부분을 모두 인쇄하십시오. {{ my_gap.size }}{{ my_gap.unit }} 전체 연결입니다; 맨 필드 이름은 빈 문자열을 제공합니다.
• Min, Max, Step을 숙소로 일치시키세요. 1단계의 0~100 범위는 간격에 적합하며; 반경 제어에는 0~50만 필요할 수 있습니다.
• 말이 되는 유닛만 제공하세요. px 전용 컨트롤은 %가 깨진 레이아웃을 생성하는 컨트롤보다 더 명확합니다.
• CSS 패널 구조에 대체를 유지하십시오. 위젯이 첫 번째 드롭의 기본값에 계속 정상적으로 배치되도록 규칙을 작성합니다.
• 레이아웃 값에 대해 반응형 켜기. 간격과 너비는 거의 항상 더 엄격한 모바일 설정이 필요합니다.
• 선택기 필드보다 CSS 패널 토큰을 선호합니다. 일반 선택기 필드는 슬라이더에 대한 기본 값만 주입하며 이는 완전한 선언이 아닙니다.

자주 묻는 질문 #

감싸는 #

위젯 빌더 슬라이더 필드는 위젯의 단일 CSS 길이를 편집기가 끌 수 있는 컨트롤로 바꿉니다: 필드 이름을 지정하고 범위를 바인딩한 다음 인쇄합니다 {{ name.size }}{{ name.unit }} CSS 패널에서. 그것은 자연스럽게 쌍을 이룹니다 치수 필드 위젯에 단일 값과 함께 4 면 간격이 필요한 경우 나머지 부분을 탐색합니다 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.