Elementor 가격표에 월별 및 연간 토글을 추가하는 방법

주요 시사점

• Elementor 가격 테이블 토글에는 월별 가격과 연간 가격이 포함된 카드 두 세트와 한 번에 한 세트씩 표시되는 컨트롤이 필요합니다.
• 무료 Elementor 플러그인은 중첩 탭 위젯으로 할 수 있습니다: 청구 기간당 하나의 탭, 추가 기능 없이 각 탭 내부의 가격 카드 행.
• Master Addons Pro의 콘텐츠 전환 위젯은 사람들이 기대하는 모양, 월간 및 연간 라벨이 있는 알약을 제공하고 저장된 섹션 템플릿에서 각 세트를 로드합니다.
• 마스터 애드온 가격표 위젯은 카드당 하나의 가격을 보유하고 있으며 자체 청구 스위치가 없으므로 이 페이지의 모든 경로는 두 번째 위젯과 쌍을 이룹니다.
• Elementor 컨테이너에서 저장된 템플릿은 컨테이너 유형으로 저장되며 콘텐츠 전환 섹션 목록에는 섹션 유형 템플릿만 표시되므로 가격 행을 섹션으로 저장합니다.
• 두 토글 상태가 좋아요와 비슷하게 비교되도록 “매년 청구” 메모로 월별 연간 가격을 표시합니다.

Elementor 가격 테이블 토글은 월별 가격과 연간 가격 사이에서 모든 카드를 뒤집는 계획 위의 스위치입니다. Elementor 에는 자체적으로이 작업을 수행하는 위젯이 없으며 대부분의 애드온 가격 테이블은 카드 당 단일 가격을 보유하므로 토글은 항상 두 부분으로 구성됩니다: 두 세트의 카드와 한 번에 한 세트를 보여주는 것.

이 가이드는 동일한 세 가지 계획에 세 가지 방법으로 토글을 빌드합니다. 경로 1 은 무료 Elementor Nested Tabs 위젯을 사용합니다. 경로 2 는 Toggle Content 위젯을 사용합니다 마스터 애드온 실제 청구 스위치처럼 보이는 버전 인 두 개의 저장된 섹션 템플릿이 있습니다. Route 3 는 스위치가 내장 된 상태로 배송되는 위젯과 편의를 위해 포기한 것을 다룹니다.

Elementor에서 가격 토글이 작동하는 방식

가격 토글은 두 개의 완전한 가격 책정 행과 그 중 하나를 숨기는 컨트롤입니다. 방문자가 Yearly 를 클릭하면 월간 행이 숨겨지고 연간 행이 표시됩니다. 다시 계산되는 것은 없습니다. 그렇기 때문에 단일 가격 필드가 있는 카드를 포함하여 모든 가격 위젯으로 월간 및 연간 카드를 빌드할 수 있습니다.

컨트롤은 경로 간에 변경되는 부분입니다. 중첩 탭은 탭 버튼을 제공합니다. 콘텐츠를 전환하면 슬라이딩 표시기가있는 알약 스위치가 제공됩니다. 스위치가 내장 된 위젯은 자체 제어 및 자체 카드 디자인을 제공합니다. 아래 카드는 처음 두 경로에서 동일하게 유지되므로 카드를 먼저 선택하고 컨트롤을 두 번째로 선택하십시오.

모든 경로에 대해 하나의 규칙이 적용됩니다: 연간 청구된다는 메모와 함께 월별 수치로 연간 가격을 표시합니다. “$49 / 월” 옆에 “$39 / 월, 연간 청구”를 사용하면 독자가 산술을하지 않고도 절약을 볼 수 있습니다. 월별 가격 옆에있는 연간 총액은 더 저렴하더라도 더 비싸 보입니다.

1단계: 월별 및 연간 카드를 작성합니다

월별 행을 먼저 빌드한 다음 복제하고 가격을 변경합니다. Elementor 에서 하위 컨테이너 3 개가 나란히 있는 컨테이너를 추가하고 하나를 삭제합니다 가격표 위젯 각각에. 콘텐츠 탭에서 요금제 이름,자막, 가격 및 기간을 설정합니다. 행에 기본 요금제가 있도록 가운데 카드 하이라이트 표와 리본을 제공합니다.

이제 부모 컨테이너를 마우스 오른쪽 버튼으로 클릭하고 Duplicate 를 선택합니다. 사본에서 각 카드를 열고 가격을 변경합니다. 연간 청구의 경우 판매 스위치를 켜고 월 가격을 원래 가격으로 입력하고 연간 월 가격을 가격으로 입력하고 기간을 “/ 월,매년 청구”로 설정합니다. 교차된 월별 수치가 판매를 수행합니다.

이제 페이지에 두 개의 행이 있습니다. 경로 1 과 2 는 한 번에 하나씩 표시되는 방법을 결정합니다.

경로 1: 중첩 탭(무료 Elementor)

무료 Elementor 플러그인의 Nested Tabs 위젯은 모든 탭 안에 컨테이너를 넣으므로 전체 가격 책정 행이 탭 패널에 맞습니다. 현재 Elementor 설치 시 기본적으로 켜져 있는 Flexbox Container 기능이 필요합니다.

1. 드래그하세요 탭 가격이 책정되어야 하는 위 페이지에 위젯(컨테이너 아이콘이 있는 중첩된 위젯)이 표시됩니다.
2. 콘텐츠 탭에서 탭 #1의 이름을 다음으로 바꿉니다 월간 그리고 탭 #2 to 매년. 세 번째 탭을 삭제합니다.
3. 월간 가격 책정 컨테이너를 월간 탭 패널로,연간 컨테이너를 연간 패널로 드래그하십시오. 드롭 대상이 적중하기 어려운 경우 Navigator (레이어 패널) 를 사용하십시오.
4. 스타일 탭에서 탭 제목 정렬을 중앙으로 설정하고 활성 탭에 악센트 색상을 지정합니다.

결과는 효과가 있고 비용이 들지 않습니다. 보이지 않는 것은 청구 스위치입니다. 탭은 탐색으로 읽으므로 일부 방문자는 연간 가격이 존재한다는 것을 놓칩니다. 두 탭 제목을 테두리 반경과 배경 색상의 알약 모양으로 스타일링 할 수 있으며,이는 가까워집니다. 전화기에서 중첩 된 탭은 설정한 중단점 아래에서 아코디언으로 바뀌므로 기본적으로 월간 패널이 열려 있는지 확인하십시오.

경로 2: 두 개의 섹션 템플릿으로 콘텐츠를 전환합니다

토글 콘텐츠 위젯은 알약 스위치 뒤에있는 여러 콘텐츠 중 하나를 보여 주며 각 조각은 저장된 Elementor 템플릿이 될 수 있습니다. 두 개의 저장된 가격 책정 행과이 위젯은 SaaS 가격 책정 페이지에있는 것과 같은 월간 및 연간 토글 콘텐츠의 일부입니다 마스터 애드온 프로.

각 행을 섹션 템플릿으로 저장합니다

1. 월별 가격 컨테이너의 핸들을 마우스 오른쪽 버튼으로 클릭하고 선택합니다 템플릿으로 저장.
2. “매월 가격 책정”이라고 이름을 지정하고 저장하십시오. “매년 가격 책정”과 같은 연간 컨테이너에 대해 동일한 작업을 수행합니다.
3. 오픈 템플릿 > 저장된 템플릿 wordpress 관리자에서 유형 열을 확인하세요.

Elementor는 컨테이너를 다음과 같이 저장합니다 컨테이너 type을 입력하면 콘텐츠 전환 위젯의 섹션 목록에는 해당 위젯의 템플릿만 표시됩니다 섹션 유형,왜 단계 3 열을 확인 하는 이유입니다. 두 템플릿이 컨테이너 라고 하면 “선택 섹션” 드롭다운은 아무것도 표시 되지 않습니다. 수정 사항은 저장 하기 전에 레거시 섹션 (엘리멘터 > 설정 > 기능,또는 네비게이터에서 섹션을 추가) 내부에 행을 구축 하거나 선택 하는 것입니다 페이지 위젯의 템플릿 유형으로 행을 페이지 템플릿으로 저장합니다. 두 경로 모두 작동합니다; 섹션 1은 위젯의 기본값을 유지합니다.

콘텐츠 전환 위젯을 추가합니다

1. 드래그 콘텐츠 전환 마스터 애드온 그룹에서 가격이 속한 페이지로. 템플릿이 이제 그들을 보유하고 있기 때문에 두 개의 원래 가격 컨테이너를 삭제합니다.
2. 에서 요소 중계기,첫 번째 항목을 엽니다. Set the Label to 월간, 에 입력합니다 틀, 템플릿 유형 섹션그리고 선택 섹션에서 “월별 가격 책정”을 선택하세요.
3. 두 번째 항목을 열고 레이블을 다음으로 설정합니다 매년 그리고 “매년 가격 책정”을 선택하세요.
4. 언더 설정 토글active Index를 1로 남겨두면 월간이 먼저 표시되고 활성 색상을 악센트로 설정합니다.

페이지를 미리 보고 Yearly 를 클릭합니다. 월간 행은 슬라이드 아웃되고 연간 행은 슬라이드 인되며 알약 표시기가 가로질러 이동합니다. 스타일 탭은 알약 크기,라벨 색상 및 스위치와 콘텐츠 사이의 공간을 제어합니다.

위젯은 저장된 템플릿의 자체 스타일시트를 대기열에 추가하지 않으므로,카드가 프런트 엔드에서 스타일이 지정되지 않은 것처럼 보이면,템플릿의 페이지 설정이 아닌 위젯 컨트롤에서 색상을 설정하거나,Elementor 캐시를 Elementor > Tools 에서 지웁니다. 나중에 계획을 편집하는 경우,페이지가 아닌 템플릿 > 저장된 템플릿에서 저장된 템플릿을 편집합니다; 페이지가 참조만 합니다.

경로 3: 스위치가 내장된 가격 위젯입니다

일부 애드온은 이미 내부에 청구 스위치가있는 가격 위젯을 제공하므로 월별 가격과 카드 당 연간 가격을 입력하고 위젯은 토글을 그립니다. HT Mega 에는 이러한 방식으로 작동하는 Flip Switcher Pricing Table 위젯이 있습니다. Essential Addons,Premium Addons,PowerPack 및 The Plus Addons 를 포함한 대부분의 다른 사람들은 Route 2 가하는 일을합니다: 두 세트의 카드를 감싸는 별도의 토글 또는 스위처 위젯 (해당 플러그인 각각의 Pro). 각 토글 위젯을 계획하는 가격 테이블 위젯 비교 목록이 있습니다.

마스터 애드온 가격표 위젯은 카드당 하나의 가격 필드가 있고 내장 스위치가 없기 때문에 이 가이드에서는 토글 콘텐츠와 페어링합니다. 내장 스위치와의 절충안은 디자인입니다: 해당 위젯의 카드 레이아웃과 스위치 스타일로 제한됩니다. 두 세트의 카드를 사용하면 다섯 가지 레이아웃,리본 및 기능 도구 설명을 포함하여 가격표 위젯의 모든 컨트롤을 계속 사용할 수 있으며 카드를 다시 작성하지 않고도 스위치를 변경할 수 있습니다.

하나의 위젯 안에 스위치를 원한다면 커밋하기 전에 세 가지를 확인하십시오: 위젯의 연간 가격이 매월 찍은 수치를 보여줄 수 있는지, 스위치 라벨 텍스트가 편집 가능한지, 카드가 전화기에 쌓이는 방법.

기성품 토글 가격 섹션

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 마스터 애드온 템플릿 라이브러리 토글이 이미 배선된 가격 섹션이 있습니다. “청구 스위치 가격 카드”는 두 개의 가격 행이 있는 토글 콘텐츠를 사용하고 “청구 토글 가격 탭”은 3 년 옵션을 포함한 탭에서 동일한 작업을 수행합니다. 템플릿 > 편집기의 마스터 애드온 템플릿에서 하나를 가져온 다음 요금제 이름,가격 및 기능을 교환합니다. 가격 테이블 템플릿 게시물에는 이와 같은 섹션이 더 많이 있으며 각 섹션 뒤에 설정이 있습니다.

두 섹션 모두 Master Addons Pro 위젯으로 제작되었으므로 가져오려면 Pro 플러그인 활성화가 필요합니다.

선택할 경로

두 번 구축하지 않고 스위치를 원하십니까? 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 콘텐츠 위젯 토글 월간 및 연간 알약 뒤에 저장된 템플릿을 표시합니다 가격표 카드는 리본과 도구 설명 등 5가지 레이아웃을 모두 유지합니다.

자주 묻는 질문

최종 생각

Elementor 가격 테이블의 월별 및 연간 토글은 두 개의 가격 책정 행과 하나의 컨트롤입니다. 중첩된 탭은 무료로 컨트롤을 제공하고 탭으로 읽습니다. Master Addons Pro 의 Toggle Content 는 알약 스위치를 제공하고 저장된 섹션 템플릿에서 각 행을 로드하며 템플릿이 섹션 유형이어야 한다는 한 가지 캐치가 있습니다. 스위치가 내장된 위젯은 단계를 절약하고 레이아웃 선택 비용을 절감합니다.

에 있는 카드부터 시작하세요 가격표 위젯 페이지정확히 이런 방식으로 라이브 토글이 구축된 다음 계획에 맞는 스위치를 추가합니다.

관련 읽기

• 가격 테이블 디자인: 예제가 포함된 10가지 팁
• 콘텐츠 위젯 토글
• 콘텐츠 문서 전환
• 가격표 위젯 문서
• Elementor에서 탭을 만드는 방법