때로는 한 섹션이 FAQ 와 팀 그리드 또는 월별 및 연간 가격과 같은 두 가지를 같은 자리에 표시해야 할 때도 있습니다. The 콘텐츠 전환 위젯 인 Elementor용 마스터 애드온 그들 사이를 뒤집는 작은 스위치를 추가합니다. 각 토글 옵션에는 일반 텍스트 또는 전체 저장된 Elementor 템플릿이 있으며 방문자는 레이블을 탭하여 표시되는 내용을 바꿉니다.
라벨,선택 아이콘 및 각각이 표시하는 것을 설정한 다음 스위치를 일치하도록 스타일을 지정합니다. 사람을 다른 페이지로 보내지 않고 더 적은 공간에 더 많이 넣을 수 있는 깔끔한 방법입니다. 이 가이드는 위젯의 모든 설정을 다룹니다.
먼저 보는 것을 선호하시나요? 이 짧은 튜토리얼은 Toggle Content 위젯을 끝에서 끝까지 살펴봅니다:
콘텐츠 전환 위젯이 수행하는 작업 #
위젯은 두 개 이상의 레이블이 있는 토글 스위치를 보여줍니다. 레이블을 클릭하면 아래 영역이 해당 옵션의 콘텐츠로 바뀝니다. 각 옵션은 입력한 텍스트 블록 또는 보관함의 저장된 템플릿,섹션 또는 페이지가 될 수 있습니다.
템플릿을 가져올 수 있기 때문에 토글은 짧은 텍스트에만 국한되지 않습니다. Elementor 의 다른 곳에 구축되어 토글에 삭제된 전체 FAQ 레이아웃과 팀 섹션 사이를 전환할 수 있습니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 템플릿을 전환할 계획이라면 먼저 Elementor에 저장하세요 템플릿 라이브러리.
콘텐츠 전환 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 콘텐츠 전환또는 마스터 애드온 섹션으로 스크롤합니다. 페이지로 드래그하십시오. 두 개의 샘플 토글 옵션으로로드되므로 스위치를 바로 볼 수 있습니다.
토글 옵션 설정 #
에서 콘텐츠 탭, the 콘텐츠 전환 섹션에는 다음이 포함됩니다 요소 반복기. 각 항목은 하나의 토글 옵션입니다. 기본값은 Label One 과 Label Two 이며,더 많은 것을 추가합니다 항목 추가를 복사 아이콘으로 복제하거나 X로 제거합니다.
항목을 클릭하여 자체 콘텐츠 및 스타일 하위 탭이 있는 설정을 엽니다.
- 라벨: 토글 버튼의 텍스트,FAQ 나 Our Team 처럼요. 동적 태그를 지원합니다.
- 아이콘: 라벨 옆에 표시된 선택적 아이콘입니다.
- 유형: 입력한 텍스트의 내용이나 템플릿을 선택하여 저장된 레이아웃을 가져옵니다.
- 내용: 유형이 콘텐츠이면 미디어, 서식 및 코드 보기가 포함된 전체 텍스트 편집기가 나타납니다.
텍스트 대신 저장된 템플릿을 전환합니다 #
세트 유형 에 틀 그리고 두 개의 컨트롤이 더 나타납니다: 템플릿 유형 (섹션 등) 및 섹션을 선택하세요라이브러리에서 저장된 템플릿을 선택합니다. 단일 토글 옵션으로 사전 구축된 전체 레이아웃을 표시할 수 있습니다.
데모에서 한 옵션은 저장된 FAQ 섹션을 가리키고 다른 옵션은 팀 섹션을 가리킵니다. 토글을 뒤집으면 전체 레이아웃이 교체됩니다.
설정 토글 #
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 설정 토글 섹션은 스위치의 작동 방식을 제어합니다.
- 활성 인덱스: 페이지가 로드될 때 어떤 옵션이 먼저 표시되는지 첫 번째 옵션은 1, 두 번째 옵션은 2 등으로 설정합니다.
- 위치: 라벨 아이콘을 라벨 텍스트 앞이나 뒤에 배치합니다.
- 표시기 속도: 활성 표시기가 옵션 사이를 몇 초 만에 미끄러지는 속도입니다.
토글을 스타일링합니다 #
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 스타일 탭이 분할됩니다 토글러, 표시기, 그리고 라벨. 토글러 섹션은 스위치 컨테이너 자체를 제어합니다.
- 스타일: round 와 같은 토글의 모양.
- 배경 색상 및 테두리 반경: 스위치 트랙의 모습.
- 정렬, 확대 및 너비: 열 내에서 스위치의 위치를 지정하고 크기를 조정합니다.
- 테두리, 상자 그림자, 패딩, 여백: 일반적인 프레이밍 컨트롤.
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 표시기 섹션은 활성 레이블 뒤의 슬라이딩 하이라이트 스타일을 지정합니다 라벨 섹션에서는 레이블 텍스트의 타이포그래피와 색상을 활성 상태와 비활성 상태로 설정합니다.
페이지의 결과 #
게시 또는 미리보기 및 토글이 실시간으로 작동: 방문자가 레이블을 탭하고 아래의 내용이 슬라이드로 바뀝니다. 여기서 토글은 FAQ 레이아웃에서 우리 팀 템플릿으로 뒤집어지며,각각은 전체 저장된 섹션입니다.
일반적인 사용 사례 #
- 월간 가격 대 연간 가격 위에서 전환되었습니다 가격표.
- FAQ 및 팀 서비스 페이지에서 하나의 슬롯을 공유하는 섹션.
- 설명 및 사양 제품 페이지에서.
- 전후 사례 연구 레이아웃.
- 저장된 템플릿 2개 두 번째 페이지나 팝업 없이 스왑됩니다.
콘텐츠 전환 위젯 작업 팁 #
- 먼저 템플릿을 빌드합니다. 라이브러리에서 전환하려는 섹션을 저장한 다음 각 옵션을 하나로 지정합니다.
- 라벨을 짧게 유지하세요. 한두 단어는 스위치에 깔끔하게 맞고 빠르게 읽습니다.
- Active Index를 의도적으로 설정한다. 대부분의 방문자가 먼저보고 싶은 옵션으로 리드하십시오.
- 가능한 곳에서 콘텐츠 높이를 일치시키세요. 매우 다른 높이 사이를 전환하면 페이지가 점프합니다.
- 명확성을 위해 아이콘을 사용하세요. 각 라벨 옆에 있는 작은 아이콘은 사람들이 옵션을 구분하는 데 도움이 됩니다.
자주 묻는 질문 #
마스터 애드온의 콘텐츠 전환 위젯은 무엇입니까?
같은 자리에 있는 두 개 이상의 콘텐츠 세트 사이를 전환하기 위해 토글 스위치를 추가하는 Elementor 위젯입니다. 각 토글 옵션은 입력된 텍스트나 저장된 Elementor 템플릿을 보유할 수 있으며 방문자는 레이블을 탭하여 표시되는 내용을 교환합니다.
토글에 저장된 Elementor 템플릿을 표시할 수 있나요?
예. 토글 옵션에서 유형을 템플릿으로 설정하고 템플릿 유형을 선택한 다음 라이브러리에서 저장된 섹션이나 페이지를 선택합니다. 그런 다음 토글은 전체 레이아웃을 표시하므로 사전 구축된 전체 디자인 사이를 전환할 수 있습니다.
어떤 옵션이 먼저 표시되는지 어떻게 설정하나요?
설정 전환 섹션을 열고 활성 인덱스를 설정합니다. 첫 번째 옵션에는 1 을 사용하고 두 번째 옵션에는 2 를 사용하는 식입니다. 해당 옵션은 페이지가 로드될 때 표시되며 방문자는 레이블을 탭하여 다른 옵션으로 전환할 수 있습니다.
토글 레이블에 아이콘을 추가할 수 있나요?
예. 각 토글 옵션에는 콘텐츠 하위 탭에 아이콘 필드가 있습니다. 또한 토글 설정의 위치 옵션을 사용하여 레이블 텍스트 앞에 또는 뒤에 아이콘이 있는지 설정할 수도 있습니다.
Toggle Content 는 Tabs 와 어떻게 다른가요?
둘 다 콘텐츠를 제자리에 전환하지만 토글은 두 개 또는 몇 가지 옵션용으로 제작된 단일 컴팩트 스위치로,종종 월별 및 연간과 같은 바이너리 선택입니다. 탭은 더 긴 섹션 목록에 적합합니다. 또한 콘텐츠를 토글하면 저장된 템플릿을 직접 가져올 수 있습니다.
감싸는 #
콘텐츠 전환 위젯은 두 레이아웃을 하나의 슬롯에 맞추고 방문자가 탭으로 레이아웃 사이를 전환할 수 있도록 합니다. 옵션을 추가하고,각각에 대해 텍스트 또는 저장된 템플릿을 선택하고,어느 것이 리드하는지 설정하고,스위치가 일치하도록 스타일을 지정합니다. 콘텐츠를 구성하는 다른 방법은 을 참조하십시오 탭 위젯, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
