선택

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 가 텍스트 정렬에 사용하는 것과 동일한 컨트롤: 한 번에 하나씩 활성화되는 세 개 또는 네 개의 버튼. 마스터 애드온 내부 위젯 빌더는, 선택권이 몇몇이고 아이콘이 낱말 보다는 더 많은 것을 말할 때마다 맞은 후비는 물건입니다. 줄맞춤은 명백한 보기입니다, 그러나 위치 및 방향 스위치는 동일한 형을 적합합니다.

Choose 컨트롤의 옵션 키는 직접 작동합니다 조건따라서 선택한 옵션에 따라 다른 필드가 나타날 수 있습니다 나뭇가지 구문 템플릿 엔진, 수표가 있는 곳 {% if align == "center" %} 마크업을 전환합니다. 두 가이드 모두 세부 사항을 다룹니다.

Select 와 마찬가지로 템플릿에 전달되는 값은 제목이 아니라 옵션의 키입니다. Choose 가 맨 위에 추가하는 것: 옵션당 아이콘,선택적인 토글오프 동작,정렬과 같은 순수 CSS 선택을 위한 Elementor 의 선택기 메커니즘으로의 간단한 경로입니다.

Choose 필드가 수행하는 작업 #

• 아이콘 버튼 행을 렌더링합니다 elementor 패널에서,당신이 정의하는 옵션 당 하나.
• 열쇠 하나를 가지고 있습니다 정의된 집합에서 한 번에 정확히 하나의 버튼이 활성화됩니다.
• 각 옵션을 eicon과 쌍으로 연결합니다와 같은 eicon-text-align-left, 그래서 선택은 한눈에 읽혀집니다.
• 선택적으로 토글 끄기: 전환 옵션을 켜고 활성 버튼을 다시 클릭하면 선택 취소되고 값이 비워집니다.
• 반응형 플래그를 지원합니다 그리고 아래에서 다루는 선택기를 통해 직접 CSS를 작성할 수 있습니다.

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

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 “인용 정렬” 선택기가있는 평가 위젯입니다: 왼쪽,중앙, 오른쪽.

선택 필드를 추가하는 방법 #

Widget Builder 편집기에서 다음을 찾으세요 선택 왼쪽 패널의 필드를 다른 선택 필드와 그룹화합니다.

아래의 섹션으로 드래그하세요 스타일 탭; 정렬형 설정은 자연스럽게 거기에 살고 있습니다. 일단 착륙하면 필드의 옵션이 왼쪽에 열립니다.

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

• 라벨: elementor 의 버튼 옆에 표시된 텍스트,예를 들어 “견적 정렬”.
• 이름: 예를 들어 필드, 문자, 숫자 및 밑줄에 대한 고유 식별자입니다 quote_align.
• 옵션: 각 옵션은 키에 제목과 아이콘을 더한 것입니다. 제목은 버튼의 툴팁이 되고 아이콘은 예를 들어 eicon 클래스입니다 eicon-text-align-left 열쇠를 위해 left.
• 토글: 켜짐 인 경우 활성 버튼을 다시 클릭하면 선택 해제되고 필드의 값이 비어 있습니다. 위젯에 항상 값이 필요한 경우 해제하십시오.
• 기본값: 위젯이 페이지에 처음 떨어질 때 활성화된 키입니다.
• 반응형: 장치 아이콘을 추가하여 중단점마다 정렬이 다를 수 있습니다.
• 설명, 라벨 표시, 분리기: 표준 표시 설정과 다른 컨트롤에 특정 값이 있는 경우에만 필드를 표시하는 조건이 추가됩니다.

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

두 가지 배선 스타일이 있습니다. 정렬 예제는 둘 중 하나와 함께 작동합니다.

템플릿 패턴. 토큰은 선택한 키를 인쇄하므로 Select 패턴은 변경되지 않고 그대로 이어집니다. 수정자 클래스는 CSS 탭에 변형을 유지합니다:

<blockquote class="quote align--{{ quote_align }}">
  {{ quote_text }}
</blockquote>

와 함께 .align--center { text-align: center; } 그리고 CSS 탭의 친구들. 조건부도 작동합니다: {% if quote_align == 'center' %}. 선택과 마찬가지로 키와 비교하고 제목은 비교하지 마십시오.

선택기 옵션. Choose 는 Elementor 의 선택기 메커니즘을 통해 CSS 를 작성할 수도 있으며 템플릿을 완전히 건너뛸 수 있습니다. 이에 의존하기 전에 알아야 할 한 가지: Elementor 가 Choose 선택기에 대해 주입하는 기본 속성은 다음과 같습니다 color: {{VALUE}}정렬에 쓸모가 없는. 사용자 정의 선택기 항목은 부동산을 설명해야 합니다:

text-align: {{VALUE}};

그러면 키는 유효한 CSS 값(CSS 값)이어야 합니다left, center, right 이미 그렇습니다), 그리고 {{WRAPPER}} 이러한 종류의 값 제어를 위해 자동으로 앞에 추가되므로 작성하지 않고도 스타일이 위젯에 맞게 조정됩니다.

이 실수의 무음 버전을 조심하십시오. A 기본 속성을 유지하는 선택기에 유선된 Choose 는 행복하게 작성됩니다 color: center잘못된 선언은 브라우저가 단어없이 떨어집니다. 콘솔 경고 없음,시각적 힌트 없음 버튼이 아무 것도하지 않는 것처럼 보이면 필드 구성을 터치하기 전에 생성 된 CSS 를 검사하십시오.

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

사용자 정의 위젯을 Elementor 의 페이지에 추가하고,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 컨트롤이 레이블 아래에 아이콘 버튼 행으로 나타나며 기본 키의 버튼이 활성화되어 있습니다.

버튼을 클릭하면 미리보기가 한 번에 업데이트됩니다. 토글을 켜면 활성 버튼을 클릭하면 선택 항목이 지워지고 위젯은 CSS 탭에서 정의한 대로 돌아갑니다. 응답이 켜지면 장치 아이콘을 통해 각 중단점이 자체 선택을 유지할 수 있습니다.

일반적인 사용 사례 #

• 텍스트 정렬 제목, 따옴표, 캡션은 컨트롤의 홈 잔디.
• 요소 위치 미디어 및 텍스트 카드의 왼쪽 이미지 또는 오른쪽 이미지와 같은 것입니다.
• 방향 스위치 수평 목록과 수직 목록 및 타임라인의 경우.
• 크기 사전 설정 수정자 클래스에 매핑된 소형, 중형, 대형과 같습니다.
• 쇼 사이드 선택 배지와 리본의 경우 왼쪽 상단부터 오른쪽 하단 모서리까지.

선택 필드와 함께 작업하기 위한 팁 #

• 두 개, 세 개, 네 개의 옵션으로 유지하세요. 일곱 아이콘 버튼의 행은 의상을 입고 드롭 다운입니다; 대신 선택을 사용합니다.
• 선택기를 사용할 때 키를 CSS 값과 일치시킵니다. 열쇠 같은 left 그리고 center 곧장 떨어지세요 text-align: {{VALUE}} 번역 레이어가 없습니다.
• 사용자 정의 선택기에서 부동산을 정의합니다. 기본 주입 속성은 다음과 같습니다 color: {{VALUE}}실제 색상 선택에만 적합합니다.
• Toggle 이 켜져 있는 경우 빈 값에 대한 계획. 선택 취소된 필드는 빈 키를 인쇄하므로 align-- 수업과 조건문은 이를 허용하거나 토글을 계속 꺼두어야 합니다.
• 조건문의 키와 비교하세요. 옵션 제목은 패널 전용 텍스트이며 결코 일치하지 않습니다 {% if %}.
• 정렬에 Responsive 를 사용합니다. 이동 중에도 중앙, 데스크탑에는 왼쪽이 두 개가 아닌 하나의 컨트롤입니다.

자주 묻는 질문 #

감싸는 #

위젯 빌더 선택 필드는 작은 시각적 결정에 합당한 제어권을 제공합니다. 키는 아이콘 버튼 뒤에 있고 토큰은 수정자 클래스와 조건문을 제공하며 선택기 경로는 실제 CSS 속성을 정의한 후 정렬과 같은 한 속성 선택을 처리합니다. 아이콘이 아닌 전체 축소판이 필요한 레이아웃 픽의 경우 다음으로 올라갑니다 시각적 선택 필드. 나머지 부분을 탐색하세요 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.