시각적 선택

Visual Choice 필드는 마스터 애드온으로 구축된 사용자 정의 위젯에 클릭 가능한 이미지 카드 행을 추가합니다 위젯 빌더. 각 카드는 옵션의 작은 그림이므로 편집자는 레이아웃이나 스타일을보고 선택합니다. 템플릿은 클릭 한 카드의 키를 얻습니다.

Visual Choice 는 Pro 필드입니다. 무료 플러그인에는 제한된 Widget Builder 가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.

Visual Choice 필드가 수행하는 작업 #

• Elementor 패널에 옵션을 이미지 카드로 표시합니다. 선택한 카드는 하이라이트를 얻습니다.
• 각 옵션에는 키,제목 및 이미지가 있습니다. 제목은 카드의 도구 설명 및 대체 텍스트로 사용됩니다.
• 템플릿은 다음과 같이 선택한 키를 받습니다 grid 또는 list클래스 이름이나 an에서 사용할 수 있는 것입니다 {% if %} 체크.
• 열 설정은 패널의 한 행에 몇 장의 카드가 있는지 제어합니다.

아직 위젯을 구축하지 않았다면, 을 읽어보세요 위젯 빌더 개요 첫째. 텍스트나 아이콘으로 잘 읽히는 선택 항목의 경우 선택 그리고 선택 필드를 설정하는 것이 더 빠릅니다.

시작하기 전에 #

• Elementor가 설치되어 활성화된 WordPress입니다.
• Elementor 및 Master Addons Pro 용 마스터 애드온,둘 다 활성화됨. The 설치 가이드 설정을 다룹니다.
• 각 옵션에 대한 작은 이미지. 투명한 배경의 PNG 로 저장된 240 x 160 픽셀 정도의 간단한 선 그림은 Elementor 의 어두운 패널에서 깔끔하게 보입니다.
• 위젯 빌더에서 열린 위젯. 이 가이드의 예는 세 가지 레이아웃이있는 “팀 쇼케이스”위젯입니다: 그리드,목록 및 스포트라이트.

Visual Choice 필드를 추가하는 방법 #

1. 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
2. 에 콘텐츠 탭, 섹션을 추가하세요 레이아웃 선택기가 보통 먼저 진행되므로 편집자는 다른 것보다 먼저 구조를 선택합니다.
3. 유형 visual 왼쪽의 필드 검색 상자에.
4. 드래그 시각적 선택 섹션으로. 그 설정은 왼쪽 사이드 바에서 열립니다.

Visual Choice 필드 옵션을 설명했습니다 #

• 라벨 예를 들어 “레이아웃”과 같이 Elementor의 카드 위에 있는 텍스트입니다.
• 이름 는 필드의 고유 ID 및 해당 템플릿 토큰입니다, 그래서 team_layout 된다 {{team_layout}}. 문자, 숫자, 밑줄만 표시됩니다.
• 설명 elementor의 카드 아래에 나타납니다.
• 옵션 카드당 한 행을 보유합니다. 키 템플릿이 얻는 값입니다(짧고 소문자로 유지하세요 grid). 제목 카드의 이름을 지정합니다. 를 클릭합니다 이미지 이미지 선택 창을 열고 파일을 업로드하거나 미디어 라이브러리에서 파일을 선택한 다음 클릭하려면 상자를 선택하세요 이 이미지를 사용하세요. 더하기 아이콘은 행을 추가하고 빨간색 십자가는 행을 제거합니다.
• 열 1 부터 6 까지 한 행에 몇 장의 카드가 들어있는지 설정합니다. 상자에 이미 2 가 표시되어 있어도 숫자를 입력합니다. 표시된 숫자는 변경하기 전까지 저장되지 않으며,저장된 값이 없으면 Elementor 는 각 행에 카드 한 장을 넣습니다.
• 토글 는 패널에 나열되어 있지만 테스트에서는 아무런 차이가 없었습니다. 편집자는 항상 선택한 카드를 다시 클릭하여 지울 수 있습니다.

아래의 공통 설정은 다음을 포함한 다른 필드에서와 마찬가지로 작동합니다 조건. 패널에는 이 필드에 대한 기본값이 없으므로 선택한 카드가 없는 상태에서 위젯의 새 복사본이 시작됩니다.

클릭 설정 저장 옵션을 추가한 후.

템플릿에서 선택한 키를 사용합니다 #

{{team_layout}} 선택한 카드의 키를 출력합니다. 가장 간단하게 사용할 수 있는 방법은 수정자 클래스입니다:

<div class="ts-team ts-team--{{team_layout}}">
  ...
</div>

그리드를 선택하면 렌더링됩니다 ts-team--grid. 레이아웃에 다른 마크업이 필요할 때 키를 확인하세요 {% if %}. 예제는 List 레이아웃에만 짧은 약력을 보여줍니다:

{% if team_layout == 'list' %}
  <p class="ts-bio">Leads brand and product design across every client project.</p>
{% endif %}

그런 다음 키당 CSS 규칙 한 세트를 작성하십시오:

.ts-team--grid { grid-template-columns: repeat(3, 1fr); }
.ts-team--list { grid-template-columns: 1fr; }
.ts-team--spotlight { grid-template-columns: 1.4fr 1fr; }

편집자가 카드를 클릭할 때까지 토큰은 아무것도 인쇄하지 않으며 위의 클래스는 다음과 같습니다 ts-team--. 기초를 주세요 .ts-team 자체적으로 괜찮아 보이는 레이아웃을 클래스화하므로 선택이 이루어지기 전에 위젯이 깨진 것처럼 보이지 않습니다.

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

페이지에 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 카드가 콘텐츠 탭에 나타납니다. 하나를 클릭하면 캔버스가 바로 업데이트됩니다.

목록을 클릭하면 팀이 행으로 전환됩니다 {% if %} 블록은 바이오스를 추가합니다:

스포트라이트는 첫 번째 멤버를 더 크게 만듭니다:

선택한 카드를 다시 클릭하여 선택을 지웁니다. 그러면 템플릿은 위에서 설명한 대로 빈 키를 얻습니다.

일반적인 사용 사례 #

• 팀, 블로그, 포트폴리오 및 추천 위젯을 위한 레이아웃 선택기입니다.
• 이름보다 그림에서 더 쉽게 인식할 수 있는 카드 또는 헤더 스타일입니다.
• 이미지 왼쪽, 이미지 오른쪽 또는 상단의 이미지와 같은 이미지 위치 선택.
• 하나의 클래스로 여러 CSS 규칙을 한 번에 전환하는 사전 설정 설계.

Visual Choice 필드 작업을 위한 팁 #

• 모든 옵션 이미지에 동일한 그리기 스타일을 사용하므로 카드가 한 세트처럼 보입니다.
• 키를 짧게,소문자로 공백 없이 유지하세요. 클래스 이름으로 끝납니다.
• 위젯을 사용 중인 후에는 키 이름을 바꾸지 마십시오. 이전 키를 저장한 페이지가 새 CSS 와 일치하지 않습니다.
• 세 개 이하의 옵션이 있는 경우 열을 옵션 수로 설정하여 모든 카드가 한 줄에 놓이도록 합니다.
• 빈 상태를 스타일링합니다. 누군가가 카드를 선택할 때까지,키가 비어 있습니다.

자주 묻는 질문 #

감싸는 #

각 옵션에 키, 제목, 이미지를 부여하고 열 값을 입력하고 사용합니다 {{field_name}} 클래스 이름 또는 {% if %} 확인. 편집자가 카드를 클릭할 때까지 아무것도 선택되지 않으므로 빈 상태에 대한 계획을 세우십시오. 대신 텍스트 목록에서 선택하려면 다음을 참조하십시오 2 필드를 선택합니다, 그리고 확인 가격 각 계획에 포함된 내용입니다.