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 시각적 선택 필드 위젯의 패널에 있는 이미지 카드 세트를 옵션당 하나씩 렌더링하고 사용자가 썸네일을 클릭하여 선택합니다. 레이아웃-피커 컨트롤입니다. Select 가 단어를 제공하고 Choose 가 아이콘을 제공하는 경우 Visual Choice 는 각 변형이 실제로 어떻게 보이는지에 대한 작은 그림을 보여줍니다. 마스터 애드온 내부 위젯 빌더이는 그리드 대 목록 결정 및 스크린샷이 이름보다 빠르게 설명하는 모든 변형에 자연스럽게 적합합니다.
Visual Choice 옵션 값은 바로 연결됩니다 조건, 다른 컨트롤이 선택한 레이아웃을 따르도록 합니다 나뭇가지 구문 템플릿 엔진, 어디 {% if style == "grid" %} 마크업을 일치하도록 전환합니다. 두 가이드 모두 세부 사항을 다룹니다.
템플릿 계약은 다른 선택 필드와 일치합니다: 값은 선택한 옵션의 키입니다. Visual Choice 를 차별화하는 것은 두 번째 배선 스타일인 접두사 클래스로,위젯 래퍼의 클래스를 변경하여 CSS 가 템플릿이 필드를 언급하지 않고도 레이아웃을 전환할 수 있습니다.
Visual Choice 필드가 수행하는 작업 #
- 클릭 가능한 이미지 카드를 렌더링합니다 elementor 패널에서 각 옵션은 키, 제목 및 이미지로 정의됩니다.
- 열쇠 하나를 가지고 있습니다 정의된 세트에서 현재 선택된 카드입니다.
- 카드를 열에 배치합니다, 기본적으로 행당 3개이며 열 옵션을 통해 조정 가능합니다.
- 피드는 선택한 키를 템플릿화합니다 수식어 클래스의 경우 및
{% if %}블록. - 선택적으로 래퍼 클래스를 설정합니다 접두사 클래스 옵션을 통해 CSS만으로도 레이아웃을 전환할 수 있습니다.
위젯을 처음 구축했다면 다음부터 시작하세요 위젯 빌더 개요 첫번째.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 썸네일 카드를 통해 선택한 3열 그리드와 누적 목록이라는 두 가지 레이아웃 변형이 있는 팀원 위젯입니다.
Visual Choice 필드를 추가하는 방법 #
찾기 시각적 선택 widget Builder 편집기 왼쪽의 필드 패널에 다른 선택 필드와 그룹화되어 있습니다.
아래의 섹션으로 드래그하세요 콘텐츠 또는 스타일 탭. 레이아웃 선택기는 일반적으로 패널에서 콘텐츠 탭 상단에 먼저 위치하므로 편집자는 콘텐츠를 채우기 전에 구조를 선택합니다. 필드가 착지하면 왼쪽에서 옵션이 열립니다.
Visual Choice 필드 옵션을 설명했습니다 #
- 라벨: elementor의 카드 위에 표시된 텍스트, 예를 들어 “레이아웃”입니다.
- 이름: 예를 들어 필드, 문자, 숫자 및 밑줄에 대한 고유 식별자입니다
team_layout. - 옵션: 각 옵션은 키 플러스 제목과 이미지입니다. 이미지는 클릭 가능한 카드가됩니다; 제목이 레이블을 지정합니다. 키는 짧게 유지되며 CSS-safe:
grid,list. - 열: 패널에서 한 행에 몇 장의 카드가 앉는지,기본적으로 3 장입니다. 두 장의 큰 카드가 2 열로 더 잘 읽혀집니다.
- 접두사 클래스: 클래스 스템 Elementor 는 선택한 키를 위젯 래퍼에 추가하고 배치합니다. With
team-layout-그리고 열쇠grid, 포장지는 나릅니다team-layout-grid. - 기본값: 위젯이 페이지에 처음 떨어질 때 선택한 키입니다.
- 설명, 라벨 표시, 분리기: 표준 표시 설정과 다른 컨트롤에 특정 값이 있는 경우에만 필드를 표시하는 조건이 추가됩니다.
Visual Choice를 위젯에 연결하세요 #
두 배선 스타일. 필드 당 하나를 선택합니다.
스타일 A: 템플릿 패턴. 토큰은 선택한 키를 인쇄하므로 모든 것이 가능합니다 필드 선택 적용된다. a 수식어 클래스:
<div class="team team--{{ team_layout }}">
...
</div>또는 변형에 다른 마크업이 필요한 경우 구조적 분기:
{% if team_layout == 'list' %}
<ul class="team-list"> ... </ul>
{% else %}
<div class="team-grid"> ... </div>
{% endif %}스타일 B: 접두사 클래스. 접두사 클래스 옵션을 입력하세요 team-layout-그리고 Elementor가 씁니다 team-layout-grid 또는 team-layout-list 사용자가 카드를 클릭할 때 위젯의 래퍼에. 그러면 CSS 가 결합된 클래스를 대상으로 합니다:
.team-layout-grid .member { /* grid card rules */ }
.team-layout-list .member { /* stacked row rules */ }템플릿은 필드를 전혀 참조하지 않습니다; 래퍼 클래스는 전환을 수행합니다. 이렇게 하면 HTML 이 단일 마크업 블록으로 유지되고 모든 변형이 스타일시트로 푸시됩니다. 프레젠테이션만 변경되면 일반적으로 더 깔끔한 컷이 됩니다.
한 필드에 두 스타일을 혼합 조심. 가정하는 템플릿 조건부 grid 접두사 클래스가 동시에 설정되는 동안 team-layout-list 는 진실의 두 가지 원천이며,보통 몇 달 후에 누군가가 한쪽을 편집하고 다른 쪽이 존재한다는 것을 잊을 때 표류 할 것입니다. 이 필드가 템플릿을 통해 말하는지 아니면 래퍼 클래스를 통해 말하는지 결정한 다음 고수하십시오.
Elementor 에서 Visual Choice 컨트롤을 사용합니다 #
사용자 정의 위젯을 Elementor 의 페이지에 추가하여 페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 컨트롤은 패널에 옵션 카드를 표시하며 선택한 카드는 강조 표시됩니다.
카드를 클릭하면 레이아웃이 미리보기에서 뒤집힙니다. 수정자 클래스나 래퍼의 접두사 클래스 중 선택한 배선을 통해 말이죠. 각 카드는 변형 자체를 보여주기 때문에 편집자는 아무것도 읽지 않고 올바른 레이아웃을 선택합니다.
일반적인 사용 사례 #
- 그리드 대 목록 레이아웃 팀, 포트폴리오, 포스트 위젯용.
- 카드 스타일 변형 썸네일은 실제 박스형, 오버레이 및 분할 디자인을 보여줍니다.
- 헤더 배열 이미지 상단, 이미지 왼쪽 및 텍스트 전용 영웅 변형과 같은.
- 슬라이더 대 정적 프레젠테이션 동일한 콘텐츠 세트의.
- 하나의 위젯 안에 템플릿 팩이 들어 있습니다고객이 사진으로 선택한 세 가지 사전 디자인된 모습입니다.
Visual Choice 필드 작업을 위한 팁 #
- 실제 스크린샷을 옵션 이미지로 사용하세요. 각 변형의 작은 렌더링이 추상 아이콘을 능가합니다; 카드는 문서입니다.
- 분야 당 1 개의 배선 작풍을 선택하십시오. 둘 다 아닌 템플릿 패턴이나 접두사 클래스 또는 둘 다 결국 동의하지 않습니다.
- 키는 클래스 이름에 들어가므로 슬러그를 유지하세요.
grid그리고list“그리드 레이아웃”이 아닙니다. - 구분 기호로 접두사를 끝냅니다.
team-layout-플러스grid로 읽는다team-layout-grid; 하이픈 없이 얻을 수 있습니다team-layoutgrid. - 열을 카드 수와 일치시킵니다. 3 열에 걸쳐 두 가지 옵션은 간격을 남깁니다; columns 를 2 로 설정하고 행이 채워집니다.
- 시각적 차이를 위해 예약하세요. 옵션이 모양보다는 동작이 다른 경우 레이블이 명확한 Select가 편집자에게 더 나은 서비스를 제공합니다.
자주 묻는 질문 #
Master Addons Widget Builder의 Visual Choice 필드는 무엇입니까?
Visual Choice 필드는 사용자 정의 Elementor 위젯에 이미지 카드 선택기를 추가합니다. 각 옵션은 제목과 축소판 이미지가 있는 키입니다; 사용자가 카드를 클릭하면 위젯이 템플릿에서 선택한 키를 통해 또는 위젯 래퍼에 배치된 접두사 클래스를 통해 반응합니다.
접두사 클래스는 어떻게 작동하나요?
예를 들어 접두사 클래스 옵션에서 클래스 스템을 설정합니다 team-layout-. Elementor 는 선택된 키를 추가하고 다음과 같은 결과를 넣습니다 team-layout-grid위젯의 래퍼 요소에. CSS는 클래스를 결합하여 레이아웃을 전환하는 대상을 지정하며 템플릿에는 토큰이 전혀 필요하지 않습니다.
템플릿 토큰을 계속 받나요?
예. {{ team_layout }} 선택한 키를 인쇄하므로 수정자 클래스와 {% if team_layout == 'list' %} 조건문은 Select 와 똑같이 작동합니다. 접두사 클래스는 대체가 아닌 대안입니다.
연속으로 몇 장의 카드가 들어있나요?
기본적으로 3 개입니다. 열 옵션은 이를 변경하므로 두 개의 큰 레이아웃 축소판이 2 열 쌍으로 배치될 수 있고 6 개의 작은 스타일 견본이 두 행에 걸쳐 3 열로 포장될 수 있습니다.
선택 또는 선택 대신 Visual Choice 를 언제 사용해야 합니까?
그림이 단어 또는 아이콘보다 옵션을 더 빠르게 식별하는 경우. 레이아웃 및 디자인 변형이 고전적인 경우입니다. eicon 이 덮는 짧은 시각적 세트의 경우 정렬 또는 방향,the 필드 선택 더 가볍습니다; 장황하거나 긴 목록의 경우 선택을 사용하십시오.
값이 옵션 제목이나 키를 사용합니까?
모든 선택 필드와 마찬가지로 키입니다. 패널에는 제목과 이미지가 존재합니다; 비교, 수정자 클래스 및 접두사 클래스 접미사는 모두 정의한 키를 사용합니다.
감싸는 #
위젯 빌더 비주얼 초이스 필드는 편집자가 레이아웃을 보고 선택할 수 있게 합니다: 패널에 있는 이미지 카드,템플릿에 있는 키,그리고 CSS 만으로 레이아웃을 전환하고 싶을 때 접두사 클래스 옵션과 자연스럽게 짝을 이룹니다 필드 선택. 썸네일은 큰 구조 픽을 처리하고 아이콘은 작은 조정을 버튼으로 처리합니다. 나머지 부분을 탐색하세요 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.
