주요 시사점
- Elementor 가격 토글은 두 부분으로 구성됩니다: 월별 및 연간 가격 테이블 두 세트와 한 번에 한 세트를 표시하는 스위치 위젯.
- Elementor Pro의 가격표 위젯에는 월별 및 연간 스위치가 없으므로 토글은 콘텐츠 토글 위젯이나 탭 위젯 내부에 배치된 가격표에서 가져옵니다.
- 마스터 애드온 콘텐츠 토글 위젯은 템플릿으로 설정된 유형 제어와 섹션, 페이지 또는 위젯의 템플릿 유형을 사용하여 저장된 템플릿을 각 옵션에 로드합니다.
- 컨테이너를 사용하는 Elementor 사이트에서는 Toggle Content의 섹션 목록에 섹션 유형으로 저장된 템플릿만 표시되므로 각 가격표 세트를 페이지 템플릿으로 저장합니다.
- 콘텐츠 전환의 활성 인덱스 설정은 방문자가 첫 번째 옵션에 1, 두 번째 옵션에 2를 표시하여 먼저 볼 청구 기간을 결정합니다.
Elementor 가격 토글을 추가하려면 월별 요금제와 연간 요금제를 저장된 두 개의 템플릿으로 구축한 다음 두 가지 모두 콘텐츠 토글 위젯에 로드하세요. 방문자는 월별 또는 연간을 클릭하고 가격이 제자리에 교체됩니다. 페이지는 한 화면 높이로 유지되며 누구도 한 번에 6개의 가격 열을 읽을 필요가 없습니다.
이 튜토리얼에서는 가격표와 콘텐츠 전환 마스터 애드온의 위젯,그리고 탭 위젯을 통한 애드온 없음 경로로 끝납니다. 모든 것은 Elementor 4,3 에서 테스트되었습니다.
목차
시작하기 전에 필요한 것
Elementor,가격표 위젯 및 콘텐츠를 전환하는 위젯이 필요합니다. Elementor Pro 에는 가격표 위젯이 있지만 Elementor 나 Elementor Pro 에는 스위치가 없습니다.
- 가격표. 이 가이드는 다음을 사용합니다 가격표 위젯 마스터 애드온에서. Elementor Pro 의 가격표 또는 제목이있는 일반 컨테이너도 작동합니다.
- 스위치입니다. 이것은 Toggle Content 의 일부분입니다 마스터 애드온 프로.
- 당신의 가격. 연간 할인을 먼저 결정하십시오. 약 17 퍼센트 인 2 개월의 휴가는 일반적인 선택입니다.
Elementor에서 가격 토글을 추가하는 방법
전체 빌드는 다섯 단계를 거칩니다: 월별 계획을 세우고, 저장하고, 연간 계획을 세우고, 저장한 다음 둘 다 토글에 연결합니다.
1단계: 월별 계획을 수립합니다
새 페이지를 만들거나 빈 초안을 열고 Elementor 로 편집합니다. 세 개의 열이 있는 컨테이너를 추가하고 각각에 하나의 Pricing Table 위젯을 드래그합니다. 요금제 이름,가격, 청구 텍스트 및 기능 목록을 채웁니다.
하나의 계획을 완전히 구축한 다음 두 번 복제하고 세부 정보를 변경합니다. 그러면 기능 행이 줄지어 유지됩니다. 켜기 하이라이트 테이블? 그리고 사람들이 선택하기를 원하는 계획의 리본.
2단계: 월별 계획을 템플릿으로 저장합니다
게시 버튼 옆의 화살표를 클릭하고 선택하십시오 템플릿으로 저장. 월별 가격 계획 이름을 지정하고 저장하세요.
이렇게 저장하면 Page template 이 생성됩니다. 중요한 것은 Toggle Content 가 템플릿을 유형별로 나열하기 때문입니다. 해당 섹션 목록에는 Section 유형으로 저장된 템플릿만 표시됩니다. 컨테이너를 사용하는 사이트에서 컨테이너를 마우스 오른쪽 버튼으로 클릭하고 저장하면 Container 템플릿이 생성되며 섹션 목록에 해당 페이지 템플릿이 표시되지 않습니다. 페이지 템플릿은 항상 Page 아래에 표시됩니다.
3단계: 연간 계획을 수립하고 저장합니다
동일한 초안을 유지하십시오. 각 가격을 연간 요금으로 변경하고 청구 텍스트를 연간 청구로 변경하십시오. 그런 다음 템플릿으로 다시 저장을 사용하고이 하나의 연간 가격 계획 이름을 지정하십시오.
이제 동일한 레이아웃과 다른 번호를 가진 두 개의 템플릿이 있습니다. 초안 페이지를 삭제할 수 있습니다.
4 단계: 토글 내용 추가 및 템플릿 연결
Elementor 에서 실제 가격 페이지를 엽니다. 에 대한 위젯 패널을 검색하십시오 콘텐츠 전환 그리고 요금제가 표시되어야 하는 곳으로 드래그하십시오. 아직 가격 페이지가 없다면 다음 중 하나부터 시작하십시오 Elementor 가격 페이지 템플릿.
- 에서 요소 목록을 작성하고 첫 번째 항목을 클릭한 후 변경하세요 라벨 월간으로.
- 세트 유형 에 틀.
- 세트 템플릿 유형 에 페이지.
- 에서 페이지 선택, 월별 가격 계획을 선택하세요.
- 두 번째 항목을 클릭하고 연간 라벨을 붙인 다음 동일한 방식으로 연간 가격 계획을 선택하세요.
페이지를 업데이트하고 프런트 엔드에서 엽니다. Yearly 를 클릭하면 세 테이블이 연간 가격으로 변경됩니다.
단계 5: 기본 옵션을 설정하고 스위치의 스타일을 지정하십시오
오픈 설정 토글 콘텐츠 탭에서. 활성 인덱스 페이지가 로드되는 시기를 표시하는 옵션을 선택합니다. 월별은 1, 연간은 2입니다. 위치 테이블 앞이나 뒤에 스위치를 놓습니다 표시기 속도 하이라이트가 슬라이드되는 속도를 기본적으로 0.3초로 설정합니다.
그런 다음 스타일 탭으로 이동합니다. The 토글러 섹션에는 스위치 모양(원형 또는 정사각형), 배경색, 정렬, 크기 및 너비에 대한 줌이 있습니다. 아래의 표시기 및 라벨 섹션은 하이라이트 색상과 정상 및 활성 상태에 대한 라벨 색상을 설정합니다.
테이블이 먼저 필요하십니까? 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 가격표 위젯 페이지에는 5가지 레이아웃, 리본, 판매 가격 및 기능 도구 설명이 표시됩니다.
비디오 튜토리얼
이 비디오는 Elementor 편집기에서 콘텐츠 전환 위젯이 추가되고 설정되는 모습을 보여줍니다.
애드온 없이 가격 토글
Elementor 자체 가격 스위치를 구축할 수 있습니다 탭 위젯각 탭은 그 안에 있는 모든 위젯을 허용하기 때문입니다. 방문자는 애드온에 슬라이딩 스위치가 표시되는 두 개의 탭 제목을 보고 가격은 동일한 방식으로 교환됩니다.
- 드래그하세요 탭 페이지에 위젯을 추가하고 세 번째 탭을 삭제하세요.
- 두 탭의 이름을 월간 및 연간으로 바꿉니다.
- 월간 탭을 클릭하고 콘텐츠 영역 내에 가격 열을 구축하세요.
- 해당 컨테이너를 연간 탭에 복제하고 가격을 변경합니다.
- 스타일 탭에서 탭 제목을 중앙에 놓고 모서리를 둥글게 하여 스위치로 읽습니다.
트레이드 오프는 유지입니다. 두 테이블 세트 모두 페이지 자체에 있으므로 편집기가 길어지고 템플릿을 사용하는 것처럼 다른 페이지에서 동일한 세트를 재사용 할 수 없습니다.
| 템플릿으로 콘텐츠 전환 | 탭 위젯 | |
|---|---|---|
| 처럼 보인다 | 표시기가 있는 슬라이딩 스위치 | 두 개의 탭 제목 |
| 테이블이 사는 곳 | 저장된 템플릿에서 | 페이지의 탭 안쪽 |
| 다른 페이지에서 재사용 | 예, 동일한 템플릿을 선택하세요 | 위젯을 복사하여 붙여넣습니다 |
| 두 가지 이상의 옵션 | 예, 항목을 추가합니다 | 예, 탭을 추가합니다 |
| 필요 | 마스터 애드온 프로 | 요소만 |
가격 토글을 작동하게 만드는 다섯 가지
가격 토글은 방문자가 1 초 만에 이해하는 경우에만 도움이됩니다.이 다섯 가지 습관은 그 대부분을 다룹니다.
- 저축을 말로 말하십시오. 가격 아래에 “매년 청구,2 개월 할인”을 넣으십시오. 스위치만으로는 사람들에게 왜 매년이 더 나은지 알 수 없습니다.
- 레이아웃을 동일하게 유지하십시오. 두 세트의 동일한 계획,동일한 순서,동일한 기능 행. 스위치가 뒤집힐 때 숫자 만 이동해야합니다.
- 일부러 기본값을 선택합니다. Active Index 를 대부분의 사람들이 구매하기를 원하는 청구 기간으로 설정합니다.
- 전화로 확인한다. Labels 스타일 섹션에서, 스택 온 라벨이 연속적으로 맞지 않으면 모바일에 쌓을 수 있습니다.
- 스위치는 선택 사항을 저장하지 않습니다. 모든 방문은 기본 옵션에서 시작되므로 각 버튼의 결제 링크를 자체 청구 기간으로 지정하십시오.
테이블 자체에 대한 레이아웃 및 복사 조언은 당사 문서를 참조하세요 Elementor 가격표 팁. 요금제 가격이 아닌 기능별로 요금제가 다른 경우 a 비교표 토글 아래에서는 사람들이 세부 사항을 확인하는 데 도움이 됩니다.
자주 묻는 질문
Elementor Price Table 위젯에 월별 및 연간 토글이 있습니까?
아니요. Elementor Pro 의 Price Table 위젯은 테이블당 하나의 가격을 보여주며 청구 스위치가 없습니다. 월별 가격과 연간 가격 사이를 전환하려면 Tabs 위젯 내부에 두 세트의 테이블을 배치하거나 애드온에서 콘텐츠 토글 위젯에 로드합니다.
플러그인 없이 Elementor에서 가격 토글을 추가할 수 있나요?
예. 탭 위젯을 사용하고 탭의 이름을 월간 및 연간으로 지정하고 각 탭 내부에 가격 열 세트를 빌드합니다. 애드온이 슬라이딩 스위치를 표시하는 탭 제목을 표시하며 방문자는 여전히 한 번에 한 세트의 가격을 볼 수 있습니다.
저장된 템플릿이 콘텐츠 전환 목록에서 누락된 이유는 무엇입니까?
Toggle Content lists templates by type. 자체적으로 저장된 컨테이너는 섹션 목록에 표시되지 않는 컨테이너 템플릿으로 저장됩니다. 페이지 템플릿을 생성하는 게시 화살표에서 템플릿으로 저장 으로 레이아웃을 저장하고 템플릿 유형을 페이지로 설정합니다.
가격 토글에는 월별, 연간, 평생 등 세 가지 옵션이 있을 수 있나요?
예. 콘텐츠 토글의 요소 목록에서 항목 추가를 클릭하고 세 번째 템플릿을 연결합니다. 세 가지 이상의 옵션을 사용하면 방문자가 원하는 레이블을 클릭하고 활성 레이블을 클릭하면 다음 레이블로 이동합니다.
Google은 두 가지 가격 세트를 모두 볼 수 있습니까?
예. 토글 콘텐츠는 HTML 페이지의 모든 옵션을 인쇄하고 한 번에 하나씩 표시하므로 월별 가격과 연간 가격이 모두 소스에 있습니다. 가장 관심 있는 버전을 기본 옵션으로 만드세요.
최종 생각
Elementor 가격 토글에는 저장된 템플릿 2 개와 스위치 1 개가 필요합니다. 월별 요금제를 빌드하고 페이지 템플릿으로 저장한 다음 매년 반복한 다음 둘 다 Toggle Content 에 로드하고 Active Index 를 설정합니다.
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 콘텐츠 위젯 페이지 전환 당신이 당신의 자신을 구축하기 전에 클릭 할 수있는 라이브 청구 스위치 데모가 있습니다.
관련 읽기
