마스터 애드온
가격
카테고리 보기

선택

로이 제미
2026년 9월 17일에 업데이트되었습니다

7분 읽기

선택 필드는 마스터 애드온으로 빌드한 사용자 지정 위젯에 아이콘 버튼 행을 추가합니다 위젯 빌더. Elementor 가 텍스트 정렬에 사용하는 것과 같은 종류의 컨트롤입니다: 몇 개의 버튼,한 번에 하나씩 활성화됩니다. 옵션이 2~4 개만 있고 아이콘이 단어보다 각 옵션을 더 빠르게 설명할 때 사용합니다.

Choose 는 무료 버전의 위젯 빌더에서 사용할 수 있는 필드 중 하나입니다. 무료 플러그인에는 제한된 위젯 빌더가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.

콜아웃 상자 위젯의 Elementor 아이콘 버튼 옆에 있는 Master Addons Widget Builder에서 필드 설정을 선택합니다

Choose 필드가 수행하는 작업 #

  • Elementor의 위젯 패널에 옵션당 하나의 버튼으로 아이콘 버튼 행을 추가합니다.
  • 편집기가 버튼을 누르면 각 옵션의 제목을 도구 설명으로 표시합니다.
  • 저장합니다 키 다음과 같이 선택한 옵션 중 center제목이 아닙니다.
  • 토큰을 배치하는 곳마다 해당 키를 인쇄합니다 {{ align }}. 일반적인 접근 방식은 CSS 클래스로 바꾸는 것입니다.

건축업자에게 새로운? 읽기 위젯 빌더 개요 일단 위젯을 열어놓고 돌아오세요.

시작하기 전에 #

  • Elementor가 설치되어 활성화된 WordPress입니다.
  • Elementor 용 마스터 애드온이 설치되고 활성화되었습니다. The 설치 가이드 설정을 다룹니다.
  • 위젯 빌더에서 열린 위젯. 이 가이드의 예는 두 개의 Choose 필드가 있는 “Callout Box” 위젯입니다: align (왼쪽, 중앙, 오른쪽) 그리고 icon_position (위 또는 왼쪽).

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

  1. 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
  2. 에 섹션을 추가합니다 콘텐츠 탭, 예를 들어 “Callout”. 레이아웃 선택도 스타일 탭에 잘 맞습니다.
  3. 유형 choose 왼쪽의 필드 검색 상자에.
  4. 드래그 선택 섹션으로. 필드의 연필을 클릭하여 설정을 엽니다.
검색으로 찾은 필드 선택 정렬이 있는 위젯 빌더 및 아이콘 위치 필드의 콜아웃 섹션에서 선택합니다

새로운 Choose 필드는 비어 있지 않습니다. 세 가지 정렬 옵션 (왼쪽,중앙 및 오른쪽) 과 중앙이 기본값으로 제공되므로 간단한 정렬 제어를 위해서는 레이블과 이름만 변경하면 됩니다.

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

레이블, 이름, 설명, 설정 취소, 키에 대한 옵션 행, 제목 및 아이콘, 기본값이 포함된 필드 옵션을 선택합니다
  • 라벨: elementor 의 버튼 옆에 있는 텍스트,예를 들어 “Icon Position”.
  • 이름: 필드의 고유 ID 및 토큰 이름. 예를 들어 문자,숫자 및 밑줄만 사용합니다 icon_position.
  • 설명: elementor의 버튼 아래에 표시된 힌트입니다.
  • 설정되지 않음: 편집자가 활성 버튼을 다시 클릭하여 선택을 지울 수 있습니다. 이에 의존하기 전에 아래 참고 사항을 참조하십시오.
  • 옵션: 버튼당 한 행. 키 는 템플릿이 얻는 값입니다 제목 는 툴팁, 그리고 아이콘 아이콘 선택기를 엽니다. 빨간색 십자가를 사용하여 행을 제거하고 더하기 버튼을 사용하여 행을 추가합니다.
  • 기본값: 위젯의 새 복사본 옵션은 다음으로 시작합니다. 드롭다운에는 제목이 표시되지만 필드에는 키가 저장됩니다.

공통 설정에서 찾을 수 있습니다 라벨 표시, 라벨 블록, 분리기 그리고 조건다른 분야와 동일하게 작동합니다.

Elementor에 나타나는 아이콘을 선택하세요 #

옵션의 아이콘을 클릭하면 마스터 애드온 아이콘 선택기가 열립니다. Open the 요소 아이콘 예를 들어 탭과 검색 align정렬 및 위치 아이콘을 찾으려면.

선택 옵션에 대한 정렬 아이콘을 사용하여 Elementor 아이콘으로 필터링된 마스터 애드온 아이콘 선택기입니다

해당 탭을 고수하십시오. 선택기는 Simple Line,Iconic Font,Linear 및 Material 아이콘도 나열하지만 테스트에서 해당 버튼은 Elementor 패널에 비어 있는 것으로 나타났습니다. Elementor 아이콘만 표시됩니다.

키, 제목 및 설정 해제 #

  • 키를 짧고 소문자로 유지하며 공백 없이 유지합니다 left 또는 top. 그들은 결국 학급 이름으로 끝납니다.
  • 언제든지 제목 이름을 바꿀 수 있습니다. 키를 변경하면 이전 페이지를 이미 저장한 페이지가 중단됩니다.
  • 테스트에서 활성 버튼을 클릭하면 값도 지워졌습니다 설정 해제 아래 템플릿에 표시된 것처럼 어느 쪽이든 빈 값에 대한 계획 없음으로 설정합니다.

템플릿에서 선택 항목을 사용하세요 #

토큰은 키를 출력하므로 가장 깔끔한 설정은 수정자 클래스입니다. 이것이 Callout Box HTML 입니다:

<div class="callout{% if align %} callout--{{ align }}{% endif %}{% if icon_position %} callout--icon-{{ icon_position }}{% endif %}">
  {% if icon_position %}<span class="callout-icon">!</span>{% endif %}
  <div class="callout-body">
    <p class="callout-title">{{ callout_title }}</p>
    <p class="callout-text">{{ callout_text }}</p>
  </div>
</div>
If 블록 내부의 수정자 클래스로 align 및 icon_position 토큰을 사용하는 위젯 HTML

각기 {% if %} 값이 비어 있을 때 클래스를 건너뜁니다. Icon Position 의 경우 빈 값도 아이콘을 숨기므로 해당 필드에 Unset 이 켜져 있습니다. 그런 다음 CSS 패널에서 각 클래스의 스타일을 지정합니다:

.callout--left { text-align: left; }
.callout--center { text-align: center; }
.callout--right { text-align: right; }
.callout--icon-top .callout-icon { margin-bottom: 14px; }
.callout--icon-left { display: flex; gap: 18px; align-items: flex-start; }

예를 들어 값을 직접 비교할 수도 있습니다 {% if icon_position == 'left' %}. 열쇠와 비교하십시오, 결코 제목.

선택기와 반응형 컨트롤을 끄십시오 #

  • 선택기: 이 분야에 대해 씁니다 color: {{VALUE}};. 테스트에서 선택기는 다음과 같습니다 .callout-title 생산되었습니다 color:center;브라우저가 무시하는. 다른 일부 필드와 달리 Choose 에는 자신의 속성을 작성할 수 있는 CSS 선택기 행이 없습니다. 위에 표시된 대로 클래스를 사용합니다.
  • 반응 제어: 장치 아이콘을 추가하여 편집자가 태블릿과 모바일에서 다른 옵션을 선택할 수 있지만 토큰은 데스크톱 선택만 인쇄합니다. 장치별 선택 항목은 템플릿에 도달하지 않습니다.

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

페이지에 위젯을 추가하거나 페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 버튼은 기본 옵션이 강조 표시된 레이블 아래에 있습니다. 버튼을 누르면 제목을 확인하고 클릭하여 전환합니다. 미리보기가 바로 업데이트됩니다.

정렬 및 아이콘 위치 아이콘 버튼과 왼쪽 도구 설명이 있는 Elementor의 콜아웃 상자 위젯입니다

여기 다른 선택으로 동일한 콜아웃이 있습니다:

왼쪽 정렬, 중앙 정렬 및 왼쪽 아이콘이 있는 프런트 엔드의 콜아웃 상자

일반적인 사용 사례 #

  • 제목, 따옴표 및 카드에 대한 텍스트 정렬입니다.
  • 이미지 또는 아이콘 위치: 상단, 왼쪽 또는 오른쪽.
  • 행이나 열과 같은 레이아웃 방향입니다.
  • 각각 명확한 아이콘이 있는 경우 밝은 스타일이나 어두운 스타일과 같은 작은 시각적 변형입니다.

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

  • 네 가지 옵션 이하로 유지하십시오. 더 긴 목록의 경우 다음을 사용하십시오 필드 선택.
  • 항상 빈 값을 처리합니다. 클래스와 마크업을 마무리합니다 {% if %}그리고 기본 클래스에 합리적인 기본 스타일을 제공합니다.
  • 명확한 제목을 작성하세요. 툴팁은 편집자가 각 버튼에 대해 볼 수 있는 유일한 텍스트입니다.
  • Elementor 아이콘만 사용하세요따라서 모든 버튼에는 눈에 보이는 아이콘이 있습니다.
  • 편집자가 위젯을 사용하기 전에 키를 결정합니다. 제목과 아이콘은 나중에 변경할 수 있지만 키는 변경할 수 없습니다.

자주 묻는 질문 #

Choose 필드는 무료 버전에서 사용할 수 있습니까?

예. Choose 는 무료 버전의 Widget Builder 에서 사용할 수 있는 필드 중 하나입니다. Widget Builder 필드의 전체 세트는 Master Addons Pro 와 함께 제공됩니다.

Choose 토큰은 무엇을 인쇄합니까?

예를 들어 선택한 옵션의 키입니다 center. 아무 옵션도 선택되지 않았을 때 아무것도 인쇄하지 않습니다.

Elementor에서 일부 선택 버튼이 비어 있는 이유는 무엇입니까?

아이콘은 아마도 Elementor 아이콘이 아닌 다른 라이브러리에서 나온 것입니다. 우리의 테스트에서는 패널에 표시된 Elementor 아이콘 탭의 아이콘 만 있습니다. 해당 탭에서 대체 아이콘을 선택하십시오.

정렬에 Selector 옵션을 사용할 수 있습니까?

이 필드에 대한 것이 아닙니다. Selector 가 씁니다 color: {{VALUE}};따라서 정렬 키는 잘못된 색상이 됩니다. 키를 CSS 패널에서 해당 클래스의 클래스 및 스타일로 인쇄합니다.

Unset이 꺼져 있을 때 편집자가 선택을 취소할 수 있는 이유는 무엇입니까?

테스트에서 활성 버튼을 클릭하면 Unset이 아니요로 설정된 경우에도 값이 지워졌습니다. 빈 값을 가능한 한 처리하고 처리하십시오 {% if %}.

감싸는 #

Choose 필드를 추가하고 Elementor 아이콘과 명확한 제목이 있는 짧은 키를 설정한 다음 HTML 에서 키를 클래스로 인쇄하고 CSS 패널에서 각 클래스의 스타일을 지정합니다. 빈 값을 처리하면 편집기가 선택을 지울 때 위젯이 깔끔하게 유지됩니다. 긴 옵션 목록은 을 참조하십시오 필드 선택, 그리고 확인 가격 각 계획에 포함된 내용입니다.

당신의 감정은 무엇입니까