선택

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 필드 선택 위젯의 옵션 패널에 네이티브 드롭다운을 넣습니다. 고정된 선택 집합을 정의하면 사용자가 하나를 선택하고 템플릿이 선택에 반응합니다: 다른 레이아웃 클래스,다른 마크업 블록,다른 CSS 값 마스터 애드온 내부 위젯 빌더는,선택은 지명된 이체의 줌을 가진 무엇이든을 위한 주력입니다. 배치 작풍,호버 효력,순서를 분류하십시오,결정의 그 종류.

옵션 값을 선택하면 천연 연료가 됩니다 조건: 특정 옵션을 선택한 경우에만 다른 컨트롤이 나타날 수 있습니다. the 에서 동일한 값이 작동합니다 나뭇가지 구문 템플릿 엔진 같은 수표로 {% if layout == "card" %}따라서 한 번의 드롭다운으로 패널과 마크업을 모두 전환할 수 있습니다.

하나의 디테일이 이 문서의 모든 패턴을 형성합니다. 템플릿이 받는 값은 옵션의 키,선택한 짧은 슬러그이지 사용자가 보는 사람이 읽을 수 있는 레이블이 아닙니다. 키는 클래스 이름과 비교에 들어갑니다; 레이블은 패널에 유지됩니다.

Select 필드가 수행하는 작업 #

• 표준 드롭다운을 렌더링합니다 elementor 패널에서는 동일한 기본 선택 제어 코어 위젯이 사용됩니다.
• 고정된 집합에서 하나의 값을 보유합니다 키와 레이블 쌍으로 정의합니다.
• 선택한 키를 템플릿에 입력합니다, 수정자 클래스에 대한 준비가 되었습니다 {% if %} 블록.
• 다른 컨트롤의 조건을 구동합니다따라서 “상자”를 선택하면 “최소”가 숨기는 테두리 색상 필드가 드러날 수 있습니다.
• 반응형 플래그를 지원합니다, 사용자가 장치별로 다른 옵션을 선택하도록 합니다.

위젯을 처음 구축했다면 다음부터 시작하세요 위젯 빌더 개요 첫번째.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 Boxed,Minimal 및 Outlined 변형을 제공하는 “레이아웃 스타일” 드롭다운이 있는 가격 테이블 위젯입니다.

Select 필드를 추가하는 방법 #

위젯 빌더 편집기에서 위젯을 열고 왼쪽의 필드 패널을 살펴보세요. 선택 다른 선택 필드와 함께 앉습니다.

아래의 섹션으로 드래그하세요 콘텐츠 또는 스타일 탭. 우리와 같은 레이아웃 전환기는 Style; 에 속합니다. 정렬 순서와 같은 콘텐츠 관련 선택이 콘텐츠에 맞습니다. 일단 착륙하면 필드의 옵션이 왼쪽에 열립니다.

설명 된 필드 옵션을 선택 합니다 #

• 라벨: elementor의 드롭다운 옆에 표시된 텍스트, 예를 들어 “레이아웃 스타일”입니다.
• 이름: 필드,문자, 숫자 및 밑줄에 대한 고유 식별자만 해당됩니다. 예를 들어 템플릿은 이 이름을 참조합니다 layout_style.
• 옵션: 선택들 그 자체,각각의 키에 라벨을 더한 것. 키는 템플릿이 받는 것; 라벨은 사용자가 읽는 것입니다. 키를 짧게 유지하고 CSS-safe: boxed, minimal, outlined.
• 기본값: 위젯이 페이지에 처음 떨어질 때 선택한 키입니다. 가장 잘 생긴 변형으로 설정하십시오.
• 반응형: 장치 아이콘을 추가하여 중단점별로 픽이 다를 수 있습니다.
• 설명, 라벨 표시, 분리기: 표준 디스플레이 설정과 다른 컨트롤에 특정 값이 있는 경우에만 필드를 표시하기 위한 조건이 더 아래에 있습니다.

선택 항목을 템플릿에 연결합니다 #

Select 는 일반 토큰으로 값을 인쇄합니다. 그 값은 항상 the 키는, 상표 결코. 2 개의 본은 거의 각 사용을 커버합니다.

수정자 클래스. 키를 클래스 속성으로 바로 인쇄하고 CSS 탭이 나머지를 수행하게하십시오:

<div class="pricing layout--{{ layout_style }}">
  ...
</div>

“박스형” 렌더링을 선택합니다 layout--boxed, 그리고 같은 규칙 .layout--boxed { border: 1px solid #e2e2e2; } 인수한다. 세 가지 변종은 세 개의 짧은 CSS 블록이 된다. HTML 은 결코 분기하지 않는다.

조건부 마크업. 변형이 단지 다른 스타일이 아니라 다른 HTML을 필요로 할 때, 키와 비교하십시오:

{% if layout_style == 'boxed' %}
  <div class="pricing-frame"> ... </div>
{% elseif layout_style == 'outlined' %}
  <div class="pricing-outline"> ... </div>
{% else %}
  <div class="pricing-plain"> ... </div>
{% endif %}

여기서 한 가지를 조심하십시오: 비교는 키를 사용해야합니다. {% if layout_style == 'boxed' %} 작동하지만 {% if layout_style == 'Boxed Layout' %} 묵묵히 일치하지 않으며 이에 대한 경고도 받지 않습니다. 조건문이 발사를 거부하면 다른 것을 의심하기 전에 키 철자를 확인하세요.

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

Elementor 의 페이지에 사용자 정의 위젯을 놓습니다. 위젯을 저장하기 전에 페이지가 이미 열려 있었다면 먼저 편집기를 다시 로드합니다. Elementor 는 이전 컨트롤 구성을 유지할 때까지 유지하므로 위젯을 선택하고 드롭다운은 기본 옵션을 미리 선택한 상태에서 설정한 레이블 아래의 패널에 나타납니다.

다른 옵션을 선택하면 미리보기가 즉시 업데이트됩니다. 수정자 클래스가 변경되고 CSS 변형이 시작되며 이 필드에 조절된 컨트롤이 나타나거나 사라져 일치합니다.

일반적인 사용 사례 #

• 레이아웃 변형 하나의 위젯에서 박스형, 최소형, 윤곽이 잡힌 카드 스타일 등이 있습니다.
• 호버링 및 애니메이션 사전 설정 각 키는 자체 전환을 통해 CSS 클래스에 매핑됩니다.
• 선택 정렬 및 주문 목록 스타일 위젯의 경우 최신 위젯 또는 알파벳순입니다.
• 표제 태그 선택기 조건부 블록을 통해 h2를 h3로 바꿉니다.
• 조건 드라이버 선택한 키를 기반으로 다른 필드의 전체 그룹을 표시하거나 숨깁니다.

Select 필드로 작업하기 위한 팁 #

• 키는 코드용이고 라벨은 사람용입니다. 민달팽이를 사용하세요 boxed 라벨에 친숙한 문구를 열쇠로 저장하세요.
• 키를 CSS-안전하게 유지하세요. 소문자, 숫자, 하이픈이나 밑줄은 클래스 이름에 깔끔하게 인쇄됩니다.
• 열쇠와 비교하십시오, 결코 상표. 이것이 Select 조건이 일치하지 않는 가장 일반적인 이유입니다.
• 조건문보다 수식어 클래스를 선호합니다 스타일만 변경되는 경우. 템플릿은 한 블록을 유지하고 변형은 CSS 에 있습니다.
• 선택 항목을 사용하여 조건을 운전하세요. 스위처와 함께 다른 필드를 공개하거나 숨기는 일반적인 컨트롤입니다.
• 합리적인 기본값을 설정합니다 따라서 위젯은 삭제되는 순간 의도적으로 보입니다.

자주 묻는 질문 #

감싸는 #

Widget Builder Select 필드는 명명된 변형을 원클릭 선택으로 바꿉니다. 키와 레이블을 정의하고 키를 수정자 클래스 또는 an으로 인쇄합니다 {% if %} 블록,그리고 모든 레이아웃 결정은 Elementor 패널로 이동합니다. 목록이 길어지거나 하나의 픽이 충분하지 않을 때,다음으로 올라갑니다 2 필드를 선택합니다. 나머지 부분을 탐색하세요 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.