Elementor 가격표 템플릿 및 예제 (12 디자인)

주요 시사점

• 마스터 애드온 가격 테이블 위젯은 5 개의 Elementor 가격 테이블 템플릿을 레이아웃 드롭다운으로 제공합니다: 기본값, 왼쪽 정렬 콘텐츠, 반올림 테이블, BG 이미지가 있는 테이블 및 BG 패턴 기울기.
• 레이아웃 드롭다운을 전환하면 요금제 이름, 가격, 기능 및 버튼이 그대로 유지되므로 1분 안에 5가지 디자인 모두에서 한 세트의 콘텐츠를 미리 볼 수 있습니다.
• 마스터 애드온 템플릿 라이브러리에는 편집기에서 모든 Elementor 페이지로 가져오는 어두운 색, 2플랜, 4플랜 및 청구 스위치 디자인을 포함하여 기성 가격 책정 섹션이 있습니다.
• 이 페이지의 모든 가격 테이블 예제는 동일한 순서를 따릅니다: 플랜 이름, 대상, 가격 및 기간, 3~7개의 기능 행, 1개의 버튼 및 선택적 신뢰 라인.
• 어두운 가격표는 강조 표시된 계획에만 밝은 악센트가 하나 있는 것이 가장 좋습니다; 아래 예에서는 해당 단일 카드에 녹색, 청록색 또는 분홍색을 사용합니다.
• 가격 섹션을 월별 및 연간으로 전환하려면 두 세트의 카드와 Master Addons Pro의 콘텐츠 전환 위젯이 필요합니다.

Elementor 가격 테이블 템플릿은 가장 오래 걸리는 작업 부분을 저장합니다: 디자인 결정. 아래의 위젯 레이아웃은 한 번의 클릭으로 카드 모양을 제공하고 기성품 섹션은 제목,스위치 및 카드가 이미 배열 된 전체 가격 블록을 제공합니다. 어느 쪽이든 계획 이름,가격 및 기능을 대체하고 디자인을 유지합니다.

이 페이지에는 12개의 가격표 예제가 포함되어 있습니다 마스터 애드온 elementor 의 경우. 처음 다섯 개는 정확한 설정이 사용된 위젯의 자체 레이아웃이므로 각각을 재현할 수 있습니다. 다음 일곱 개는 템플릿 라이브러리의 섹션으로,공통 가격 페이지 모양을 다루도록 선택되었습니다: 세 가지 계획,두 가지 계획,네 가지 계획,어둡고 밝고 청구 스위치.

이러한 템플릿을 사용하는 방법

이 페이지에는 두 종류의 템플릿이 있습니다. 예제 1 에서 5 는 위젯 레이아웃입니다: drop the 가격표 위젯 컨테이너에 드롭다운에서 레이아웃을 선택하고 각 예제 아래에 나열된 설정을 복사합니다. 예제 6~12 는 전체 섹션입니다: 를 엽니다 템플릿 라이브러리를 가져오고, 섹션을 가져오고, 제자리에서 텍스트를 편집합니다.

각 레이아웃에 대해 나열된 설정은 모양을 변경하는 것입니다. 다른 모든 것은 기본값입니다. 색상은 스타일 탭에 붙여 넣을 수 있도록 16 진수 값으로 제공되며 5 개의 레이아웃 카드는 모두 동일한 내용을 사용합니다: 세 가지 기능이있는 $29 요금제와 “시작하기”버튼.

5가지 가격표 위젯 레이아웃

1. 기본값

Default 레이아웃은 시작할 레이아웃입니다. 헤더는 중앙에 위치하며 가격은 이름 아래에 위치하며 기능과 버튼은 본문에 따라옵니다. 모든 플랜 수에 대해 작동하며 3 열 행에 가장 안전한 선택입니다.

• 레이아웃: 기본값
• 헤더 색 구성표: 사용자 정의, 135 도에서 #6938EF에서 #B497FF까지의 그라데이션
• 제목 및 가격 색상: #FFFFFF; 부제 및 기간: #E4DBFF
• 기능 아이콘: 체크, #6938EF; 기능 텍스트: #1A1033
• 단추: 배경 #F1EEFF 의 원본 #6938EF 의 반경 6 px
• 추가 정보: “언제든지 취소”, #6B7280

2. 왼쪽 정렬 내용

왼쪽 정렬 콘텐츠는 이름,가격 및 기능을 왼쪽 가장자리로 이동합니다. 요금제 이름이 길거나 카드가 텍스트 단락 옆에 있으면 더 빨리 읽혀지며 다른 모든 항목이 정렬된 편집 스타일 가격 페이지와 일치합니다.

• 레이아웃: 왼쪽 정렬 콘텐츠
• 모든 색상은 기본값과 같습니다
• 버튼 정렬: 왼쪽, 바닥글에 24px 왼쪽 패딩이 있습니다

3. 둥근 테이블

Rounded Table 은 헤더의 큰 원 안에 가격을 넣어서 누구나 가장 먼저 보는 숫자가 됩니다. 더 높은 헤더가 필요하므로 모든 카드에 동일한 기능 수를 부여하거나 행이 고르지 않게 보일 것입니다. 기능 행의 노란색 밑줄은 레이아웃의 일부입니다.

• 레이아웃: 반올림된 테이블
• Default 에서와 같이 헤더 그라데이션; #F50A7F 에서 #FF6FB1 까지 135 도의 원 그라데이션,또는 기본 색조에 둡니다
• 기능 텍스트: #1A1033, 밑줄 색상 #FFD600(레이아웃 기본값)

4. BG 이미지를 가진 테이블

BG Image 가 있는 표는 이미지,그라디언트, 비디오 또는 슬라이드 쇼로 전체 카드를 채우고 헤더와 기능이 위에 떠 있습니다. 하나의 추천 플랜이나 시각적 제품의 가격 페이지에 적합합니다. 기능 패널에는 어두운 반투명 배경이 필요하므로 텍스트는 모든 사진에서 읽을 수 있습니다.

• 레이아웃: BG 이미지가 있는 테이블
• 배경: 이미지, 위치 센터 센터, 크기 커버
• 특징 배경: rgba(20, 10, 45, 0.6); 기능 텍스트: #FFFFFF
• 기본값과 같은 헤더 그라데이션, 불투명도 70 퍼센트로 사진이 끝까지 표시됩니다

5. BG 패턴을 왜곡

BG 패턴 스큐는 헤더를 비스듬히 자르고 두 개의 흰색 줄무늬를 추가하여 이미지 없이 카드 이동을 제공합니다. 하나의 악센트 색상을 사용하세요; 그라데이션은 줄무늬와 싸웁니다. 랜딩 페이지에서 단일 카드에 가장 자주 선택되는 레이아웃입니다.

• 레이아웃: BG 패턴을 왜곡합니다
• 헤더 색상 구성표: 사용자 정의, 솔리드 #6938EF
• 카드 반경: 20 px; 카드 배경 #FFFFFF
• 기본값과 같이 기능 밑줄, 버튼

6. 강조된 중간 카드를 가진 3 개의 계획

표준 SaaS 가격 행: 3열 컨테이너에 3개의 가격표 위젯이 있고 가운데 위젯이 올라갑니다. 올려진 카드는 하이라이트 테이블, “가장 인기 있는” 리본, 윤곽선 대신 단색 핑크 버튼, 원래 가격으로 $69, 현재 가격으로 $49인 세일 스위치를 사용합니다. 외부 카드는 더 밝은 바디 색상을 사용하므로 가운데 카드가 앞으로 서 있습니다.

• 컨테이너: 31.5 퍼센트 너비의 세 개의 자식 컨테이너, 간격 28 px, 정렬 항목: 스트레치
• 중간 카드: 하이라이트 테이블 에; 리본 “가장 인기있는”, 수직 18, 수평 -10; 버튼 배경 #F50A7F, 텍스트 #FFFFFF
• 외부 카드: 몸 배경 #F6F5FA; 중간 카드: 0 24px 60px rgba (105, 56, 239, 0.28) 그림자가있는 #FFFFFF

7. 어두운 4 계획 가격표

강조 표시된 계획의 테두리와 태그에 단일 라임 악센트가있는 검은 색 배경의 네 가지 계획. 기능은 카드마다 동일하므로 의도적 인 선택입니다: 계획의 차이점은 가격 일 뿐이며 독자는 예산으로 선택하기위한 것입니다. 버튼은 Creative Button 위젯을 사용하므로 호버 효과는 사용자 정의 CSS 가 아닌 해당 위젯에서 나옵니다.

기능이 아닌 제한에 따라 계획이 다를 때 이 템플릿을 사용하십시오. 첫 번째 카드의 굵은 기능 텍스트와 다른 카드의 일반 텍스트가 유일한 시각적 계층 구조이므로 그대로 유지하십시오.

8. 사용자 정의 계획과 다크 SaaS 가격

Finix 템플릿 키트에서 이 섹션은 고정 가격 없이 플랜을 처리하는 방법을 보여줍니다. 세 번째 카드는 숫자가 있을 “사용자 정의”를 인쇄하고 버튼 텍스트를 “Talk to us”로 바꿉니다. 각 가격 아래의 한 줄 설명은 플랜이 누구를 위한 것인지 설명하고,행 아래의 각주는 청구와 연간 할인을 한 문장으로 다룹니다.

카드 뒤에 희미한 동심원은 위젯의 일부가 아닌 섹션 배경 이미지입니다. 이미지를 교체하거나 제거하면 카드가 그대로 유지됩니다.

9. 2 계획 빛 가격표

두 계획은 예 또는 아니오 결정이므로이 레이아웃은 유료 카드를 놓칠 수 없게 만듭니다: 전체 카드는 악센트 색상으로 채워지고 버튼은 어두운 색으로 반전됩니다. 포함되지 않은 기본 카드 마크 기능의 회색 확인 아이콘으로 두 카드가 동일한 4 행을 유지할 수 있습니다.

무료 계층과 유료 계층이 하나 있을 때 이 기능을 사용하세요. 3개 이상의 요금제를 사용하면 풀 컬러 카드가 너무 시끄러워집니다.

10. 청구 스위치가있는 가격 카드

이 섹션에는 이미 구축된 월간 및 연간 토글이 있습니다. 스위치는 Master Addons Pro 의 콘텐츠 토글 위젯이며,각 주에서는 저장된 가격 행을 로드합니다. 카드는 가격 아래에 “월별 청구” 또는 “연간 청구”를 인쇄하므로 독자는 어떤 상태가 표시되는지 알 수 있습니다. 가져오기,템플릿 > 저장된 템플릿을 열고,거기의 두 가격 행을 편집합니다. 섹션 유형 템플릿 캐치를 포함하여 처음부터 동일한 것을 구축하려면 다음을 따르십시오 월간 및 연간 토글 가이드.

11. 기능 진드기와 네 계획 비교

계획이 한계 보다는 오히려 특징에 의해 다를 때,진드기와 십자가는 독자가 란을 아래로 검사하는 것을 시켰습니다. 대략 7 개의 행을 지나서,a 비교표 카드보다 이 작업이 더 좋습니다. 4개의 카드 모두 동일한 순서로 동일한 7개의 행을 가지고 있으며 아이콘은 계획마다 변경됩니다. 강조 표시된 계획은 흰색 버튼과 함께 악센트 색상으로 채워져 있으며 페이지에서는 대부분의 독자가 더 높은 계층을 선택할 것으로 예상하기 때문에 두 번째가 아닌 세 번째에 위치합니다.

12. 월간 및 연간 토글을 통한 어두운 가격

밝은 카드가 있는 어두운 섹션은 예제 7 의 반대이며,카드를 페이지에서 가장 밝은 것으로 만듭니다. 토글은 제목과 카드 사이에 있고,각 계획 이름 아래의 사용자별 메모는 기대치를 설정하며,각 버튼 아래의 “신용 카드 필요 없음”은 마지막 반대를 제거합니다. 모서리의 장식 모양은 섹션 배경 요소입니다.

가격 섹션을 가져오는 방법

1. Elementor 에서 페이지를 열고 편집기에서 마스터 애드온 템플릿 아이콘을 클릭하거나 템플릿 > 마스터 애드온 템플릿을 엽니다.
2. “가격 책정”을 검색하고 섹션을 미리보고 가져오기를 클릭하십시오. Pro 위젯으로 구축 된 섹션은 Master Addons Pro 활성.
3. 섹션이 커서가 있던 위치에 도착합니다. 패널에서 각 카드의 텍스트를 편집합니다; 디자인이 유지됩니다.
4. 토글이 있는 섹션의 경우 템플릿 > 저장된 템플릿 아래의 두 가격 행을 편집합니다.

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 템플릿 가져오기 가이드 편집기 버튼, 페이지 가져오기 화면 및 가져온 복사본에 발생하는 작업을 다룹니다.

아무 것도 가져오지 않고 다섯 가지 레이아웃을 모두 원하십니까? 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 가격표 위젯 한 번의 드롭다운으로 제공됩니다 템플릿 라이브러리 위에 표시된 전체 섹션이 있습니다.

자주 묻는 질문

최종 생각

열두 템플릿은 두 가지 경로로 제공됩니다. 다섯 위젯 레이아웃은 카드 모양을 커버하고 각각 한 드롭 다운 변경을합니다. 일곱 라이브러리 섹션은 페이지 모양을 커버: 강조 표시된 중간,어두운 네 계획,사용자 정의 계층과 SaaS,두 계획 빛,청구 스위치,네 계획 틱과 십자가,그리고 어두운 카드와 함께 어두운 각 하나는 작동하는 순서를 유지합니다: 이름,누구를위한 것인지,가격, 짧은 기능 목록,하나의 버튼.

계획에 가장 가까운 레이아웃이나 섹션으로 시작하세요 가격표 위젯 페이지, 텍스트를 변경하고, 그것이 라이브되기 전에 전화로 확인.

관련 읽기

• 가격 테이블 디자인: 예제가 포함된 10가지 팁
• 마스터 애드온 템플릿 라이브러리
• Elementor 템플릿 키트
• 요소 섹션 템플릿
• 가격표 위젯 문서
• Elementor 가격표에 월별 및 연간 토글을 추가하는 방법
• Elementor 가격표와 비교표: 사용할 항목
• Elementor에서 가격표나 메뉴를 작성하는 방법