가격 테이블 디자인: 예제가 포함된 10가지 팁(요소)

주요 시사점

• 좋은 가격표 디자인은 3~4개의 계획을 나란히 표시하며, 하나의 계획은 나머지 계획보다 시각적으로 높으므로 독자가 기본적으로 선택할 수 있습니다.
• 모든 카드가 동일한 순서를 따를 때 가격 테이블이 더 잘 변환됩니다: 계획 이름, 대상, 가격, 청구 기간, 짧은 기능 목록 및 하나의 버튼.
• 기능 행은 각각 3~6단어여야 합니다; 두 번째 줄로 감싸는 행은 읽는 속도를 늦추고 카드를 고르지 않게 만듭니다.
• 판매 가격 옆에 줄이 그어진 원래 가격은 독자에게 앵커를 제공하고 마스터 애드온 가격 테이블 위젯에는 정확히 해당 판매 스위치가 있습니다.
• 월간 및 연간 토글에는 두 세트의 카드가 필요합니다; 마스터 애드온에서 콘텐츠 토글 위젯(Pro)은 저장된 두 섹션 템플릿 사이를 전환합니다.
• 전화에서 가격 카드는 한 열에 쌓이므로 강조 표시된 계획은 세 번째가 아닌 첫 번째 또는 두 번째에 있어야합니다.

가격 테이블 디자인은 이미 제품을 원하는 방문자가 몇 초 안에 올바른 계획을 찾을 수 있는지 여부를 결정합니다. 레이아웃은 간단합니다: 카드 행,각각 하나의 가격,각각 하나의 버튼. 중요한 결정은 그보다 작습니다: 얼마나 많은 계획,어떤 것이 제기되는지,가격은 어떻게 생겼는지,각 기능 행은 얼마나 오래 실행되는지,버튼은 무엇을 말하는지.

이 게시물은 Elementor 용 Master Addons 의 Pricing Table 위젯으로 구축 된 실제 테이블에 각각 표시된 10 가지 가격 테이블 디자인 팁을 살펴 봅니다. 예제는 만들어진 계획 (시작,성장, 대행사) 을 사용하므로 가격을 복사하지 않고 구조를 복사 할 수 있습니다. 팁에 월별 및 연간 토글과 같은 두 번째 위젯이 필요한 경우 게시물에는 어느 위젯과 Pro 플랜에 있는지 여부가 표시됩니다.

1. 세 가지 계획을 보여,최대 네

세 가지 계획은 대부분의 독자가 한눈에 비교할 수있는 가격표 디자인입니다. 두 가지 계획은 예 또는 아니오 결정을 강요합니다. 다섯 가지 이상의 계획은 테이블을 스프레드 시트로 바꾸고 독자는 노트북에서 옆으로 스크롤하고 전화기를 포기하기 시작합니다.

대부분의 사람들이 구매하기를 원하는 플랜을 중간에 넣으십시오. 사람들은 왼쪽에서 오른쪽으로 행을 읽지 만 카드가 쌓일 때 전화에서 눈이 먼저 떨어지는 곳이기도 한 중앙에 정착합니다. 맞춤 가격으로 대행사 또는 Enterprise 플랜을 판매하는 경우 별도의 테이블이 아닌 “문의하기”버튼이있는 네 번째 카드로 보관하십시오.

Elementor 에서 각 카드는 하나의 Pricing Table 위젯을 자체 열 또는 컨테이너에 드롭합니다. 3 열 컨테이너에 있는 3 개의 위젯은 각각 동일한 레이아웃으로 설정되어 있으며 위의 표를 제공합니다. The 가격표 위젯 페이지 전체 제어 목록과 5개의 라이브 레이아웃을 갖추고 있습니다.

2.나머지보다 한 가지 계획을 높이십시오

강조 표시된 계획은 독자에게 기본값을 제공하며,대부분은 그것을 취할 것입니다. 하이라이트는 한 번에 세 가지 작업을 수행합니다: 카드는 조금 더 크거나 들어 올려지고,버튼은 윤곽선 스타일 대신 악센트 색상을 사용하고,리본은 그 이유를 명명합니다 (“가장 인기있는”, “최고의 가치”, “추천”).

정확히 하나의 카드를 강조. 두 강조 표시된 카드는 서로 취소. 가장 비싼 하나가 아니라 여전히 대부분의 독자에 맞는 당신을 위해 가장 좋은 여백으로 계획을 선택합니다.

가격표 위젯에서 스위치를 켭니다 하이라이트 테이블 콘텐츠 탭에서 을 엽니다 리본 텍스트, 정렬, 위치 및 회전을 설정하는 섹션입니다. 강조 표시된 카드에 스타일 탭에서 다른 버튼 색상을 지정하여 리본에만 의존하지 않도록 합니다.

3. 가격을 카드에서 가장 큰 것으로 만드십시오

가격은 카드에서 가장 큰 텍스트로 계획 이름보다 커야합니다. 독자는 먼저 가격표를 스캔하여 숫자 이름을 두 번째로 읽으므로 가격보다 이름을 크게 만드는 디자인은 속도를 늦춥니다.

통화 기호와 청구 기간을 숫자보다 작게 유지하십시오. “$ 49”는 “월 49.00 USD”보다 빨리 읽습니다. 플랜을 할인하는 경우 판매 가격 옆에 줄이 그어진 원래 가격을 표시합니다. 줄이 그어진 숫자는 앵커입니다: 49 는 혼자보다 옆에 앉을 때 69 가 더 저렴해 보입니다.

위젯에는 다음이 있습니다 판매 가격 아래에서 전환하세요. 켜고 입력하세요 원래 가격를,그리고 취소선이 자동으로 나타납니다. 목록에서 통화를 선택하거나 자신의 기호를 입력합니다.

4. 계층이 아닌 구매자의 이름을 따서 계획 이름을 지정합니다

계획 이름은 독자에게 계획이 누구를 위한 것인지 말할 때 가장 잘 작동합니다. “Starter,Growth, Agency”는 “Basic,Standard, Premium”보다 더 많은 것을 말하고 각 이름 아래에 한 줄짜리 자막 (“For one site”, “For small teams”, “For client work”) 이 추측을 제거합니다.

의미를 갖기 위해 기능 목록이 필요한 이름을 피하십시오. 독자가 어떤 계획이 “표준”인지 알아 내기 위해 행을 비교해야한다면 이름이 실패했습니다. 같은 이유로 농담과 내부 코드 이름을 피하십시오.

가격표 위젯에는 다음이 있습니다 제목 그리고 a 자막 헤더 섹션의 필드,그리고 옵션 아이콘과 태그. 자막은 “소규모 팀의 경우”에 적합한 장소입니다.

5. 특징 행을 짧게 그리고 동일한 순서로 유지하십시오

각 기능 행은 한 줄, 세 개에서 여섯 개 단어에 맞아야 합니다. 긴 행이 줄바꿈되고 카드가 고르지 않게 되며 행이 더 이상 정렬되지 않기 때문에 리더는 계획 간 비교를 중지합니다.

모든 카드에서 행을 같은 방식으로 주문하고 맨 위에 있는 계획 간에 변경되는 행 (“1 사이트” 대 “5 사이트” 대 “무제한 사이트”) 을 사용합니다. 카드당 5~7 개의 행이면 충분합니다. 스무 개의 기능이 있는 경우 가격표는 해당 항목에 맞지 않는 위치입니다: 여기에 상위 5 개를 넣고 나머지는 비교표로 연결합니다.

위젯의 특징 리피터는 행당 텍스트, 아이콘 및 선택적 도구 설명을 사용합니다. 포함된 모든 기능에 대해 동일한 아이콘을 사용하고 계획에 포함되지 않은 기능에 대해 다른 아이콘(또는 없음)을 사용하므로 시각적 패턴이 카드 전체에서 일치합니다.

6. 세부 사항을 행이 아닌 도구 설명에 넣으십시오

툴팁을 사용하면 행을 짧게 유지하고 “그것에는 무엇이 포함됩니까?”라는 질문에 답할 수 있습니다. 행에는 “모든 위젯”이라고 표시됩니다; 툴팁에는 “모든 위젯 및 확장”이라고 표시됩니다.

지원 질문을 생성하는 두 개 또는 세 개의 행에 대해 도구 설명을 사용하세요. 모든 행에 대해 사용 설명서가 없습니다. 모든 기능에 점선 밑줄이 있는 카드는 무언가를 숨기고 있는 것처럼 보입니다. 도구 설명 텍스트를 한 문장으로 유지합니다.

가격표 위젯에서 기능 중계기의 각 행에는 다음이 있습니다 도구 설명 스위치, 텍스트 필드 및 배치 옵션(상단, 하단, 왼쪽, 오른쪽).

7. 카드당 버튼 1 개,동사 얹혀

버튼은 카드에서 아무 것도하는 유일한 요소이므로 한 가지 작업을 부여하고 동사로 레이블을 지정하십시오. “시작하기”, “무료 평가판 시작”, “성장 선택”모든 작업. “제출”및 “여기를 클릭하십시오”는하지 않습니다.

버튼 아래에서 하나의 짧은 신뢰 라인은 마지막 이의를 제거합니다: “언제든지 취소”, “14 일 환불”, “필요한 카드 없음”. 다섯 단어로 유지하고 세 단어를 쌓지 마십시오.

위젯의 바닥글 섹션에는 버튼 텍스트, 링크 및 an이 있습니다 추가 정보 신뢰 라인에 대한 필드. Easy Digital Downloads 로 판매하는 경우 동일한 섹션에 제품에 바로 연결되는 EDD 구매 버튼이 있습니다. WooCommerce 제품의 경우 해당 버튼을 제품 또는 체크아웃 페이지에 연결합니다.

8. 저장 값을 표시할 가치가 있는 경우에만 월별 및 연간 토글을 추가합니다

월간 및 연간 토글은 연간 청구가 독자에게 보통 2 개월 이상의 명확한 금액을 절약 할 때 의미가 있습니다. 연간 할인이 작으면 토글은 결정을 변경하지 않고 단계를 추가하고 단일 “매년 청구”라인이 동일한 작업을 수행합니다.

전체 연간 총액이 아닌 월별 연간 가격 (“$39 / 월, 연간 청구”) 을 표시하므로 두 토글 상태는 좋아요와 비교됩니다. 독자가 스위치를 클릭하기 전에 스위치가 존재하는 이유를 알 수 있도록 토글 옆에 저장 (“20% 저장”) 을 넣으십시오.

가격표 위젯은 카드당 하나의 가격을 보유하므로 토글은 두 번째 위젯에서 나옵니다. 월별 가격으로 카드 한 세트를 만들고 연간 가격으로 카드 한 세트를 만들고 각각을 섹션 템플릿으로 저장하고 둘 다 넣습니다 콘텐츠 위젯 토글는 Master Addons Pro 플랜에 있습니다. 콘텐츠 전환 페이지에는 설정 단계와 실시간 예제가 있습니다.

9.페이지와 일치하는 레이아웃을 선택한 다음 유지하십시오

가격표의 레이아웃은 주변의 섹션과 일치해야 합니다: 깨끗한 SaaS 페이지의 일반 카드,더 부드러운 브랜드의 둥근 헤더,페이지의 나머지 부분이 사진을 사용할 때의 배경 이미지 하나를 골라 테이블의 모든 카드에 사용합니다.

하나의 테이블 안에 레이아웃을 혼합하는 것은 일반적인 실수입니다. 독자는 계획의 차이로 모양의 차이를 읽습니다. 색상도 제한 유지: 강조 표시된 카드에 대해 하나의 악센트 색상,나머지에 대해 하나의 중립.

가격표 위젯에는 5개의 레이아웃이 있습니다 레이아웃 드롭다운 (기본값,왼쪽 정렬 콘텐츠,반올림된 테이블,BG 이미지가 있는 테이블 및 BG 패턴 기울임), 그리고 콘텐츠 간에 전환할 때 콘텐츠가 그대로 유지됩니다. The 템플릿 라이브러리 완성된 디자인에서 시작하려는 경우 이러한 레이아웃을 기반으로 가격 책정 섹션이 구축되어 있습니다.

10. 당신이 간행하기 전에 전화에 테이블을 검사하십시오

전화에 카드는 한 열에 스택, 그래서 독자는 한 번에 하나의 계획을보고 다른 사람을 과거 스크롤. 그 두 가지 결정을 변경: 어떤 카드가 먼저 와서, 각 카드의 키가 얼마나.

강조 표시된 요금제를 모바일에서 첫 번째 또는 두 번째로 놓습니다. 데스크톱에서 세 번째로 놓인 경우 컨테이너에서 Elementor 의 응답 순서를 사용하여 위로 이동합니다. 기능 목록을 5 행으로 유지하여 카드가 대략 한 화면에 맞도록 하고 버튼을 탭할 수 있을 만큼 넓게 만듭니다.

Elementor 응답 모드 (패널 하단의 전화 아이콘) 를 열고 모바일 중단점에서 테이블을 확인합니다. 가격 테이블 위젯의 스타일 탭 컨트롤에는 응답 스위치가 있으므로 데스크톱 버전을 변경하지 않고도 전화기의 가격 글꼴과 패딩을 줄일 수 있습니다.

자주 묻는 질문

최종 생각

가격 테이블 디자인은 짧은 목록으로 내려옵니다: 세 가지 계획, 한 가지 인상, 가장 큰 텍스트로서의 가격, 계획이 누구인지를 말하는 계획 이름, 한 줄에 맞는 기능 행, 세부 사항에 대한 도구 설명, 동사가있는 버튼 하나, 연간 절약이 실제 일 때만 토글, 테이블 당 하나의 레이아웃, 전화의 수표 위의 열 가지 예제 각각은 가격 테이블 위젯과 몇 가지 패널 설정으로 구축되었습니다.

처음부터 시작하는 경우 을 엽니다 가격표 위젯 페이지 5가지 레이아웃을 실시간으로 확인하거나 에서 완성된 가격 섹션을 선택하세요 템플릿 라이브러리 그리고 계획을 변경합니다. 위젯은 다음 중 하나입니다 위젯 및 확장 master Addons에서는 청구 스위치에 대한 콘텐츠 전환 위젯이 계획에 있습니다 가격 페이지.

관련 읽기

• 비교표 위젯: 가격표에서 연결해야 하는 전체 기능 매트릭스입니다
• 동적 테이블 위젯: 메뉴 및 서비스 목록에 대해 행당 하나의 가격으로 구성된 가격표입니다
• Elementor 애니메이션 버튼: 카드 바닥글의 버튼 스타일
• Elementor 마케팅 위젯: Master Addon의 다른 변환 위젯입니다
• 가격표 위젯 문서: 모든 컨트롤이 설명되었습니다
• 테마 빌더: 나머지 가격 페이지에 대한 머리글 및 바닥글 템플릿입니다