주요 시사점
- Elementor에 대한 이 10가지 콘텐츠 토글 예제는 Master Addons Toggle Content 위젯으로 구축된 라이브 데모이며, 각각은 동일한 섹션의 두 버전 간에 전환됩니다.
- 콘텐츠 토글은 두 옵션이 하나의 레이아웃을 공유하고 월별 및 연간 가격이나 미터법 및 영국식 측정값과 같은 세부 정보만 변경될 때 가장 잘 작동합니다.
- 가격은 가장 일반적인 콘텐츠 토글 예이며, 10개의 데모 중 2개는 청구 스위치입니다. 하나는 월간 및 연간 라벨이 지정되고 다른 하나는 청구된 월간 및 청구된 연간 라벨이 지정됩니다.
- 콘텐츠 토글은 사양표, 분기별 결과, 점심 및 저녁 메뉴, 두 명의 청중을 위해 작성된 메시지 등 가격이 책정되지 않은 콘텐츠에도 적합합니다.
- 콘텐츠 전환 위젯의 각 옵션에는 편집기나 저장된 섹션, 페이지 또는 위젯 템플릿의 텍스트가 포함되어 있으므로 모든 Elementor 레이아웃이 스위치 뒤에 위치할 수 있습니다.
가장 잘 작동하는 Elementor 의 콘텐츠 토글 예제는 스위치의 양쪽에 동일한 종류의 콘텐츠를 보여줍니다. 계획은 동일하게 유지되고 가격은 변경됩니다. 테이블은 동일하게 유지되고 단위는 변경됩니다. 아래는 해당 규칙을 따르는 10 개의 라이브 데모로,각자가 무엇을 전환하고 언제 패턴을 사용할지 보여줍니다.
10개 모두로 제작되었습니다 콘텐츠 전환의, 마스터 애드온 프로에서 콘텐츠 토글 위젯. 어떤 데모 링크를 클릭하여 직접 스위치를 시도합니다.
목차
좋은 콘텐츠 토글을 만드는 것은
콘텐츠 토글은 방문자가 두 버전 중 하나가 필요하고 한 번에 두 버전이 모두 필요하지 않을 때 사용할 가치가 있습니다. 사람들이 양쪽을 함께 읽고 싶다면 나란히 놓으십시오.
| 패턴 | 왼쪽 옵션 | 오른쪽 옵션 | 아래 예 |
|---|---|---|---|
| 청구 기간 | 월간 | 연간 | 1, 2 |
| 단위 | 미터법 | 임페리얼 | 4 X 1000 X 1000 X 1000 X 400 X 400 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 4 |
| 데이터 범위 | 자체 운영 | 공급 체인 | 5 X 1000 X 1000 X 1000 X 100 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 5 |
| 청중 | 팀으로 | 스스로 | 7 X 1000 X 10 |
| 기간 | Q3 | Q4 | 6 X 1000 X 1000 X 1000 X 100 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X |
| 프로세스 | 주문 제작 | 주식에서 | 8 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 80 X 80 X 80 X 80 X 80 |
| 카테고리 | 주거용 | 시민 | 9 X 1000 X 1000 X 1000 X 1000 X 100 X 100 X 100 X 100 X 100 X 100 X |
| 시간 | 점심 | 저녁 식사 | 10 X 10 X 10 X 10 X 10 X 10 X |
| 계획 범위 | 싱글 | 무제한 | 3 X 1000 X 1000 X 1000 X 100 X 100 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X |
가격 토글 예제
가격은 대부분의 사람들이 콘텐츠 토글을 처음 만나는 곳입니다. 두 청구 기간은 동일한 요금제를 공유하므로 스위치는 페이지의 카드 수를 절반으로 줄입니다.
1. 청구 스위치 가격 카드
월간 및 연간 스위치는 스타터,팀 및 스케일 카드 위에 있습니다. 연간에서 각 카드는 더 낮은 월별 요금과 연간 합계 및 절약이있는 라인을 보여줍니다. 중간 계획에는 양쪽에 가장 많이 선택한 레이블이 있습니다.
다음을 위해 사용하십시오: SaaS 및 구독 가격. Billing Switch 데모 열기.
2. 가격 책정을 통해 콘텐츠를 전환합니다
이 것은 개인 및 시작 계획 위의 매월 청구 및 매년 청구 레이블을 사용합니다. 각 옵션은 가격 테이블의 전체 세트를 보유하므로 전체 행은 한 번의 클릭으로 변경됩니다.
다음을 위해 사용하십시오: 가격 페이지 에서 건축된 가격표 위젯. 가격 데모 열기.
3. 토글 내용 반올림
둥근 스위치는 단일 요금제와 무제한 요금제 사이를 이동하며 각각 고유한 제목과 설명이 있습니다. 두 면은 범위에 따라 다르므로 스위치는 청구 기간에 묶여 있지 않습니다.
다음을 위해 사용하십시오: 싱글, 언리미티드 등 범위에 따라 다른 플랜. 라운드드 데모를 엽니다.
표 및 데이터 전환 예제
테이블은 두 번째 자연스러운 맞춤입니다. 행과 열은 그대로 유지되고 숫자는 변경되므로 방문자는 스위치를 뒤집을 때 자신의 위치를 유지합니다.
4. 단위 스위치 Spec 테이블
자전거 형상 테이블은 Metric 과 Imperial 사이를 전환합니다. 도달 범위,스택 및 기타 측정값은 세 가지 프레임 크기에 대해 허용 오차 열과 함께 나열됩니다. 다른 국가의 구매자는 각각 읽을 수있는 숫자를 얻습니다.
다음을 위해 사용하십시오: 제품 사양, 크기 차트 및 레시피. Unit Switch 데모 열기.
5. 데이터 스위치 벤치 마크 테이블
배출 보고서는 자체 운영과 공급망 사이를 전환합니다. 각 측면에는 배출원, 기준선 점유율 및 톤수가 나열되어 있습니다. 이제 화면을 채울 두 개의 테이블이 각각 하나를 공유합니다.
다음을 위해 사용하십시오: 보고서, 벤치마크, 전후 수치. 데이터 스위치 데모 열기. 데이터가 클릭으로 절대 변경되지 않으면 일반 테이블 위젯 는 더 간단하다.
6. 분기 스위치 메트릭스 벤투
결과의 벤토 그리드는 Q3 와 Q4 사이를 전환합니다. 수익,성장 및 각 그림 아래의 메모는 모두 함께 변경됩니다. 대시 보드처럼 읽혀지며 하나의 공간을 차지합니다.
다음을 위해 사용하십시오: 투자자 업데이트, 연간 보고서 및 월별 통계. 쿼터 스위치 데모 열기.
열 개 모두 한 곳에 모시고 싶으신가요? 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 콘텐츠 위젯 페이지 전환 모든 데모와 위젯의 전체 설정을 로드하는 뷰어가 있습니다.
대상 및 범주 예제 전환
마지막 그룹은 메시지를 전환합니다. 각 면은 다른 리더를 위해 작성되거나 다른 카테고리를 다룹니다.
7. 관객 스위치 기능 패널
코스 페이지는 As a team 과 On your own 사이를 전환합니다. 각 측면에는 자체 헤드 라인,증명 지점 및 기능 목록이 있습니다. 방문자는 자신을 설명하는 버전을 선택하고 나머지는 건너 뜁니다.
다음을 위해 사용하십시오: 기업과 개인 모두에게 판매되는 제품. Audience Switch 데모 열기.
8. 주문 경로 단계 타임 라인
번호가 매겨진 단계 목록은 주문 제작과 재고 중으로 전환됩니다. 단계와 대기 시간은 각 경로마다 다르며 레이아웃은 동일하게 유지됩니다. 두 종류의 구매자 모두 “주문 후 어떻게 되나요?”라고 대답합니다.
다음을 위해 사용하십시오: 배송, 온보딩 및 두 가지 경로가 있는 모든 프로세스. Order Route 데모 열기. 날짜가 지정된 단일 시퀀스의 경우 타임라인 위젯 가 더 잘 맞습니다.
9. 프로젝트 스위치 오버레이 카드
건축 스튜디오는 Residential 과 Civic 사이에서 대형 프로젝트 카드를 전환합니다. 각 측면에는 자체 사진,위치, 연도 및 개요가 있습니다. 두 가지 사례 연구는 일반적으로 갈 위치에 적합합니다.
다음을 위해 사용하십시오: 두 가지 작업 라인이 있는 포트폴리오. Project Switch 데모 열기.
10. 서비스 스위치 메뉴 목록
레스토랑 메뉴는 점심과 저녁 사이를 전환합니다. 제공 시간은 스위치 아래에 있으며,요리와 가격은 그에 따라 변경됩니다. 손님들은 계획중인 식사의 메뉴를 봅니다.
다음을 위해 사용하십시오: 레스토랑, 미용실 및 두 가지 서비스 목록이 있는 모든 비즈니스. Service Switch 데모 열기.
이러한 예제 중 하나를 구축하는 방법
각 예제는 두 개의 항목이 있는 콘텐츠 전환 위젯입니다. 섹션의 첫 번째 버전을 빌드하고,복사하고, 세부 정보를 변경하고,각 항목에 하나의 버전을 넣습니다.
- 드래그 콘텐츠 전환 페이지에 두 항목의 이름을 지정합니다 요소 리스트.
- 짧은 내용은 떠나라 유형 콘텐츠에 대해 편집기에 작성하세요.
- 전체 레이아웃의 경우 설정합니다 유형 템플릿으로 이동하여 각 항목에 대해 저장된 템플릿을 선택합니다.
- 세트 활성 인덱스 설정 전환에서 먼저 표시되는 옵션을 선택합니다.
- 스타일 탭의 토글러, 표시기 및 레이블 섹션에서 스위치의 스타일을 지정합니다.
가격 버전에는 몇 가지 추가 단계가 있으며 이에 대해 다룹니다 elementor에서 월별 및 연간 가격 토글을 추가하는 방법. 설정의 전체 목록은 에 있습니다 콘텐츠 문서 전환.
자주 묻는 질문
Elementor 에서 콘텐츠 토글이란 무엇입니까?
콘텐츠 토글은 스위치와 두 개 이상의 레이블이 있는 위젯입니다. 레이블을 클릭하면 해당 옵션의 콘텐츠가 표시되고 다른 콘텐츠는 숨겨집니다. Elementor 에는 하나가 포함되어 있지 않으므로 위젯을 Toggle Content 라고 하는 Master Addons Pro 와 같은 애드온에서 제공됩니다.
콘텐츠 토글 안에 무엇을 넣을 수 있나요?
콘텐츠 전환에서 각 옵션은 내장 편집기의 텍스트 또는 저장된 Elementor 템플릿 중 하나를 보유합니다. 템플릿에는 모든 위젯이 포함될 수 있으므로 옵션은 가격 테이블,데이터 테이블,양식, 이미지 갤러리 또는 전체 섹션이 될 수 있습니다.
콘텐츠 토글에 세 가지 옵션이 있을 수 있나요?
예. 요소 목록에서 항목 추가 를 클릭하여 세 번째 또는 네 번째 옵션을 추가합니다. 스위치는 두 개 또는 세 개의 레이블로 가장 잘 읽습니다. 그 이상의 경우 일반적으로 방문자가 탭을 스캔하기가 더 쉽습니다.
이러한 콘텐츠 토글 데모를 템플릿으로 사용할 수 있습니까?
데모는 각각을 열 수 있는 콘텐츠 토글 위젯 페이지의 템플릿 뷰어에 표시됩니다. Master Addons Pro의 일부인 콘텐츠 토글 위젯으로 제작되었습니다.
최종 생각
위의 10 개의 콘텐츠 토글 예제는 세 가지 작업을 다룹니다: 가격 전환,숫자 집합 전환 및 메시지 전환. 모든 하나에서 레이아웃은 여전히 유지되고 세부 사항 만 이동하므로 스위치를 쉽게 따라갈 수 있습니다.
에 그들을 시도하십시오 콘텐츠 위젯 페이지 전환을, 그런 다음 이미 가지고 있는 섹션의 두 가지 버전으로 자신만의 것을 구축하세요.
관련 읽기
