팝오버 토글

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 는 자체 옵션 기능 클러스터에 대해 동일한 패턴을 사용하며 마스터 애드온 내부 위젯 빌더 사용자 정의 위젯에 대해 동일한 작업을 수행합니다: 관련 설정 세트는 전체 추가 섹션으로 패널을 붐비는 대신 하나의 토글 뒤에 숨겨져 있습니다.

Popover Toggle이 지원합니다 조건 모든 컨트롤과 마찬가지로 팝오버 내부의 각 필드도 고유한 결합 토큰을 얻습니다 {{ toggle_field }}, 에 의해 렌더링됩니다 나뭇가지 구문 템플릿 엔진. 두 가이드 모두 설정 및 제한 사항을 다룹니다.

일반 값 필드와 달리 Popover Toggle 은 구조적입니다. on/off 상태 자체를 보유하며,구성된 이름으로 값이 템플릿에 도달하는 하위 필드를 전달합니다. 해당 모델의 두 반쪽은 작업 오버레이 예제로 아래에서 다룹니다.

Popover Toggle 필드가 수행하는 작업 #

• 토글을 렌더링합니다 온 및 오프 라벨이 있는 위젯 패널에 있습니다.
• 어린이 컨트롤 팝오버를 엽니다 스위치를 켰을 때 필드의 팝오버 필드 목록에 정의되어 있습니다.
• 대부분의 값 필드 유형을 어린이로 받아들입니다색상, 텍스트, 선택 및 슬라이더 필드와 같은.
• 토글 상태를 템플릿에 노출합니다 켜져 있을 때는 진실한 값으로, 꺼져 있을 때는 빈 문자열로 사용됩니다.
• 각 자식 값을 노출합니다 밑줄로 부모 이름과 자식 이름을 연결하는 구성된 이름 아래.

위젯 빌딩이 새로운 영역이라면 다음을 읽어보세요 위젯 빌더 개요 첫번째.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• 사용자 정의 위젯은 위젯 빌더 편집기에서 열립니다. 우리의 예는 옵션 색상 오버레이와 이미지 배너 위젯입니다: 하나의 토글이 명명 overlay, 한 색깔의 아이가 이름을 붙였습니다 color.

Popover Toggle 필드를 추가하는 방법 #

Widget Builder 편집기에서 찾을 때까지 왼쪽의 필드 패널을 스크롤합니다 팝오버 토글 탭 및 리피터와 같은 다른 구조 필드와 함께 나열된 필드입니다.

아래의 섹션으로 드래그하세요 콘텐츠 또는 스타일 탭, 선택적 설정이 속한 곳 어디든. 일단 착륙하면 필드의 옵션이 왼쪽에 열리고, 주요 작업은 팝오버가 보유할 자식 필드를 정의하는 것입니다.

Popover 토글 필드 옵션이 설명되었습니다 #

• 라벨: elementor 에서 토글 옆에 있는 텍스트,예를 들어 “오버레이”.
• 이름: 예를 들어 토글, 문자, 숫자 및 밑줄에 대한 고유 식별자입니다 overlay. 아이 이름은 그것에 쌓아 올린다, 그래서 짧게 유지한다.
• 라벨 켜기 / 라벨 끄기: 스위치에 표시된 “예” 와 “아니오” 와 같은 두 가지 상태.
• 반환값: 토글이 켜져 있는 동안 저장된 값은 기본적으로 “예”입니다. 끄기는 빈 문자열을 저장합니다.
• 팝오버 필드: 아이는 팝오버 안을 제어합니다. 대부분의 값 필드 타입은 허용됩니다; 우리의 예제는 이름이 붙은 단일 색상 필드를 보유합니다 color.
• 설명, 라벨 표시, 구분 기호 및 조건은 일반적인 표시 옵션을 다룹니다.

템플릿에서 토글과 해당 하위 항목을 읽어보세요 #

두 가지 명명 규칙은 이 필드가 생성하는 모든 것을 다룹니다.

토글 자체 는 자체 이름으로 사용할 수 있습니다. 켜져 있을 때 반환 값을 인쇄하고 꺼져 있을 때 빈 문자열을 인쇄하므로 자연스러운 조건이 됩니다:

{% if overlay %} ... {% endif %}

저장된 값은 기본적으로 부울이 아닌 “예”인 반환 값 문자열입니다. 예제에서와 같이 진실성을 테스트합니다; 필드를 true와 비교하는 것은 결코 일치하지 않습니다.

각 어린이 는 밑줄로 결합된 부모 이름과 자식 이름으로 사용할 수 있습니다. The color 의 아이 overlay 팝오버가 됩니다 overlay_color. 종합해보면,배너의 오버레이 레이어는 HTML 패널에서 이렇게 보입니다:

<div class="banner-media">
  <img src="{{ banner_image }}" alt="">
  {% if overlay %}
  <div class="banner-overlay" style="background: {{ overlay_color }}"></div>
  {% endif %}
</div>

토글 끄기,오버레이 div 렌더링 전혀 없음. 토글 켜기,div 는 편집기가 선택한 색상으로 나타납니다. 더 많은 자식을 추가하고 각각은 동일한 패턴을 따릅니다: 이름이 지정된 자식 opacity 다음과 같이 읽습니다 {{ overlay_opacity }}.

조심하세요: 여기에는 점 표기법이 없습니다. {{ overlay.color }} 아무 것도 아닌 것으로 해결합니다. 왜냐하면 자식은 부모 아래에 중첩되지 않고 밑줄이 연결된 이름으로 평평해지기 때문입니다. 자식 값이 비어 있으면 먼저 구성된 이름을 확인하십시오.

Elementor 에서 Popover 토글을 사용합니다 #

Elementor 의 페이지에 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 컨트롤이 레이블이 지정된 스위치로 나타납니다.

뒤집으면 하위 컨트롤로 팝오버가 열립니다. 배너 예제에서 편집기는 오버레이 색상을 선택하고 레이어는 미리보기의 이미지 위로 페이드 인되며 토글을 끄면 선택한 색상을 잃지 않고 다시 제거됩니다.

일반적인 사용 사례 #

• 이미지 및 비디오 오버레이, 하나의 스위치 뒤에 색상과 불투명도 어린이가 있습니다.
• 옵션 배지 토글에는 배지가 표시되고 어린이는 텍스트와 스타일을 설정하는 카드의 경우.
• 호버 효과 설정 이는 효과가 활성화된 경우에만 중요합니다.
• 카운트다운 또는 일정 옵션 때때로 시간 제한이 있는 배너에.
• 보조 버튼, 두 번째 버튼의 텍스트, 링크, 스타일을 필요 때까지 눈에 띄지 않게 유지.

Popover Toggle 필드 작업을 위한 팁 #

• 종속 마크업을 감싸세요 {% if parent %}. 토글의 요점은 아이들이 켜져 있을 때만 중요하다는 것입니다; 템플릿은 이를 반영해야 합니다.
• 밑줄로 자식 이름을 구성합니다. 부모 overlay 플러스 아이 color 이다 {{ overlay_color }}, 절대 {{ overlay.color }}.
• 부모 이름을 짧게 유지. 모든 자식 토큰은 부모 이름을 반복하며, 그리고 {{ overlay_color }} 보다 더 잘 읽습니다 {{ banner_image_overlay_settings_color }}.
• 진정한 선택적 클러스터에 사용하십시오. 위젯이 항상 필요로 하는 설정은 열린 패널에 속합니다; 팝오버는 때때로 기능을 위한 것입니다.
• 아이들에게 합리적인 기본값을 제공하십시오. 토글이 켜지는 순간, 기능은 스타일이 지정되지 않은 것이 아니라 의도적인 것처럼 보여야 합니다.

자주 묻는 질문 #

감싸는 #

위젯 빌더 팝오버 토글 필드는 위젯의 패널을 정직하게 유지합니다: 일상적인 컨트롤은 계속 표시되며 옵션 클러스터는 스위치 뒤에서 기다립니다. 와이어 {% if parent %} 어린이를 위한 마크업과 밑줄 결합 토큰 주변과 기능이 깔끔하게 켜지고 꺼집니다. 다른 구조 패턴에 대해서는 다음을 참조하세요 리피터 필드이 필드가 옵션을 처리하는 것과 동일한 방식으로 목록을 처리하는 것입니다. 나머지 부분을 탐색합니다 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.