슬라이더 필드는 Elementor의 드래그-세트 범위 제어를 마스터 애드온으로 구축된 사용자 지정 위젯에 추가합니다 위젯 빌더니다. 편집자는 핸들을 드래그하거나 숫자를 입력하고 단위를 선택하면 값이 CSS 에 들어갑니다. 간격,너비, 높이,아이콘 크기,글꼴 크기 또는 하나의 숫자에 단위를 더한 모든 것에 사용합니다.
슬라이더는 프로 필드입니다. 무료 플러그인에는 제한된 위젯 빌더가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.
슬라이더 필드가 수행하는 작업 #
- Elementor 패널에 숫자 상자와 단위 메뉴가 있는 슬라이더가 표시됩니다.
- 최소값, 최대값, 단계와 시작값을 설정합니다.
- 값은 24 와 px 와 같이 숫자와 단위가 함께 있습니다.
- CSS 선택기 행을 사용하여 CSS에 연결하거나 두 개의 토큰이 있는 HTML 또는 CSS 탭에서 인쇄합니다.
아직 위젯을 구축하지 않았다면, 을 읽어보세요 위젯 빌더 개요 첫번째.
시작하기 전에 #
- Elementor가 설치되어 활성화된 WordPress입니다.
- Elementor 및 Master Addons Pro 용 마스터 애드온,둘 다 활성화됨. The 설치 가이드 설정을 다룹니다.
- 위젯 빌더에서 열린 위젯. 이 가이드의 예는 두 개의 슬라이더가 있는 “팀 그리드” 위젯입니다: 카드 사이의 공간에 대한 카드 간격과 라운드 이니셜에 대한 아바타 크기.
슬라이더 필드를 추가하는 방법 #
- 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
- 를 클릭합니다 스타일 탭하고 섹션을 추가, 예를 들어 “그리드 레이아웃”.
- 유형
slider왼쪽의 필드 검색 상자에. - 드래그 슬라이더 섹션으로. 그 설정은 왼쪽 사이드 바에서 열립니다.
슬라이더 필드 옵션 설명 #
- 라벨 는 Elementor 의 슬라이더 위의 텍스트,예를 들어 “Card Gap”입니다.
- 이름 는 필드의 고유 ID이며 토큰의 시작입니다, 그래서
card_gap제공합니다{{ card_gap.size }}. 문자, 숫자, 밑줄만 표시됩니다. - 설명 elementor 의 슬라이더 아래에 나타납니다.
- 최소값, 최대 값 그리고 단계 범위와 핸들의 각 이동 거리를 설정합니다. 카드 갭은 2 단계씩 0 에서 80 을 사용합니다.
- 기본값 는 시작 번호와 단위이며, 자체 작은 슬라이더와 단위 메뉴로 설정됩니다.
박스에 이미 0,100 및 1 이 표시되더라도 Min,Max 및 Step 값을 입력합니다. 절대 만지지 않는 박스는 저장되지 않으며,그 중 하나도 저장되지 않은 슬라이더는 Elementor 의 범위로 돌아갑니다: px 의 경우 0 ~ 1000,%의 경우 0 ~ 100,em 및 rem 의 경우 0 ~ 10 으로 설정하면 모든 단위에 동일한 범위가 사용되므로 px 뿐만 아니라 em 에서도 0 ~ 80 이 적용됩니다.
어떤 단위가 나타나는지 설정이 없습니다. 편집자는 px,%, em 및 rem 을 선택할 수 있습니다. 더 아래로, 반응형 제어 데스크톱, 태블릿 및 모바일이 다른 값을 가질 수 있도록 장치 아이콘을 추가합니다.
슬라이더를 CSS 선택기와 연결합니다 #
로 스크롤 CSS 선택기 그리고 클릭하세요 항목 추가. 새 행에는 예제가 채워져 있습니다(.text-1, .text-2 그리고 color: {{VALUE}};), 두 상자를 모두 교체하십시오:
CSS Selector: .team-grid
CSS Properties: gap: {{SIZE}}{{UNIT}};
{{SIZE}} 는 숫자로 대체되고 {{UNIT}} 선택한 단위를 사용하면 24px가 됩니다 gap: 24px;. 당신은 필요하지 않습니다 {{WRAPPER}} 빌더가 대신 추가하기 때문에 선택기에서. 다른 요소에 동일한 값을 사용하기 위해 더 많은 행을 추가합니다.
싱글이 아닌 이 행을 사용합니다 선택기 사이드바 하단의 상자. 그 상자는 CSS 속성을 위한 자리가 없으므로 슬라이더에 대한 작업 규칙을 작성할 수 없습니다.
대신 템플릿의 값을 사용하십시오 #
HTML 또는 CSS 탭에서 값을 인쇄할 수도 있습니다. 크기와 단위를 옆에 있는 두 개의 토큰으로 작성합니다. 아바타 크기 슬라이더는 아바타 너비와 높이를 이런 식으로 설정합니다:
.team-avatar {
width: {{ avatar_size.size }}{{ avatar_size.unit }};
height: {{ avatar_size.size }}{{ avatar_size.unit }};
}
벌거벗은 {{ avatar_size }} 아무것도 출력하지 않습니다. 예를 들어 조건의 숫자를 비교할 수도 있습니다 {% if card_gap.size >= 40 %}. 반응형 제어가 켜져 있으면 Elementor가 각 장치에 대해 별도의 규칙을 작성하므로 CSS 선택기 행을 사용하십시오.
클릭 설정 저장 다 끝났을 때.
Elementor 에서 슬라이더 컨트롤을 사용합니다 #
페이지에 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다.Select the widget and open the 스타일 탭. 각 슬라이더에는 핸들,숫자 상자 및 단위 레이블이 표시됩니다.
핸들을 드래그하거나 숫자를 입력하면 위젯이 바로 업데이트됩니다. 단위 레이블을 클릭하여 px,%, em 및 rem 사이를 전환합니다.
여기서 간격은 48px로, 아바타는 96px로 증가합니다:
일반적인 사용 사례 #
- 카드, 열 및 목록 항목 간의 간격입니다.
- 이미지, 카드 또는 섹션의 너비, 최대 너비 또는 높이입니다.
- 아이콘, 아바타 및 배지 크기.
- 한 요소의 글꼴 크기 또는 줄 높이.
- 모든 변이 하나의 값을 공유하는 경우 경계 반경 또는 경계 너비.
슬라이더 필드와 작업하기 위한 팁 #
- 슬라이더가 합리적인 범위를 갖도록 항상 Min, Max 및 Step을 입력하십시오.
- 편집자가 선택할 수 있는 모든 단위 편집기에 맞는 범위를 선택하십시오. 0 ~ 80 은 px 에 적합하지만 em 에 대해서는 매우 큽니다.
- CSS 탭에 속성의 기본 값을 유지합니다
gap: 24px;, 그래서 위젯은 누군가가 슬라이더를 터치하기 직전에 보입니다. - 예제 텍스트를 새 CSS 선택기 행으로 바꿉니다. 그대로 두면 위젯에 없는 클래스를 대상으로 하는 행입니다.
- 패딩이나 여백 등 4개의 변이 있는 값의 경우 다음을 사용합니다 치수 필드.
자주 묻는 질문 #
Slider 필드는 무료인가요?
아니요. 슬라이더는 위젯 빌더의 Pro 필드 중 하나이므로 위젯에 추가하려면 Master Addons Pro가 활성화되어 있어야 합니다.
슬라이더 토큰이 아무것도 인쇄하지 않는 이유는 무엇입니까?
슬라이더에는 숫자와 단위가 들어 있습니다 {{ field_name }} 자체 인쇄에는 아무것도 없습니다. 사용 {{ field_name.size }}{{ field_name.unit }}.
슬라이더가 1000 까지 올라가는 이유는?
Min,Max 및 Step 이 저장되지 않았습니다. 이미 0,100 및 1 이 표시되더라도 세 개의 상자에 값을 모두 입력한 다음 위젯을 저장합니다.
슬라이더를 px로만 제한할 수 있나요?
필드 패널에서가 아닙니다. 편집자는 px,%, em 또는 rem 을 선택할 수 있습니다. 네 가지 모두에 대해 작동하는 범위를 선택하거나 합리적인 기본값을 설정하여 px 가 시작 단위가 되도록 합니다.
CSS Selector 에 {{WRAPPER}} 가 필요한가요?
아니요. 건축업자가 덧붙입니다 {{WRAPPER}} 당신을 위한 선택기 앞에서, 그래서 .team-grid 충분하다.
감싸는 #
슬라이더 필드를 추가하고 Min, Max 및 Step을 입력하고 기본값을 설정한 다음 다음과 같은 CSS 선택기 행과 연결합니다 gap: {{SIZE}}{{UNIT}};. 을 이용하세요 .size 그리고 .unit 값이 HTML 또는 CSS 탭에 속할 때 토큰입니다. 다른 크기 조절 컨트롤에 대해서는 을 참조하십시오 치수 그리고 타이포그래피 필드 및 확인 가격 각 계획에 포함된 내용입니다.
