가격은 방문자가 결정하는 곳이므로 테이블을 스캔하기 쉽고 비교하기 쉬워야합니다. 무료 가격표 위젯 에서 Elementor용 마스터 애드온 헤더, 가격, 기능 목록 및 클릭 유도 문구 버튼으로 단일 계획을 구축하고 몇 가지를 나란히 설정하여 전체 가격 섹션을 만듭니다.
계획의 이름을 지정하고 가격과 기간을 설정하고 기능을 나열한 다음 리본을 추가하여 인기있는 것을 표시하고 색상을 스타일링합니다. 손으로 코딩한 테이블은 없습니다. 이 가이드는 위젯의 모든 설정을 다룹니다.
가격표 위젯이 수행하는 작업 #
위젯은 한 번에 하나의 계획을 구축합니다. 각각 제목,자막 및 가격이있는 헤더,체크 마크 아이콘이있는 기능 목록,버튼 및 선택적인 바닥 글 메모가 있습니다. 세 개를 행에 놓으면 고전적인 가격 비교가 가능합니다.
세 개의 탭이 실행됩니다. 콘텐츠 레이아웃, 헤더 텍스트, 가격, 기능 및 리본을 보유합니다. 스타일 헤더 배경, 기능 및 가격 색상, 버튼을 처리합니다. 고급 일반적인 Elementor 간격 및 가시성입니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 플랜 이름, 가격, 기능 목록 및 각 버튼이 연결되어야 하는 위치.
가격표 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 가격표또는 Master Addons 섹션으로 스크롤합니다(위젯에는 보라색 MA 배지가 있음). 페이지로 드래그하면 편집할 수 있는 샘플 계획이 로드됩니다.
레이아웃 설정 #
열다 콘텐츠 탭. 그만큼 가격 내용 섹션은 전체 레이아웃과 두 개의 빠른 토글을 설정하고 그 아래에 헤더, 가격, 기능, 바닥글 및 리본 섹션이 있습니다.
- 레이아웃: 5 가지 디자인 중 하나: 기본값, 왼쪽 정렬 콘텐츠, 둥근 테이블, BG 이미지 또는 BG 패턴 기울기 테이블.
- 하이라이트 테이블?: 이 계획을 다른 계획보다 눈에 띄게 높이십시오.
- 기능을 표시하시겠습니까?: 기능 목록을 표시하거나 숨깁니다.
헤더 편집 #
열다 헤더 계획 이름과 태그라인에 대한 섹션입니다. 또한 각 계획에 색상을 부여하는 헤더 배경을 선택하는 곳이기도 합니다.
- 헤더 BG 색상: 세 가지 그라데이션 사전 설정 중 하나 또는 스타일 탭에서 자신만의 색상을 설정하는 사용자 정의입니다.
- 제목 및 HTML 태그: 계획 이름과 제목 수준.
- 부제: 제목 아래 짧은 줄, 처럼 단일 웹 사이트에 적합.
가격을 설정하십시오 #
열다 가격 숫자와 읽는 방법에 대한 섹션. 통화,금액, 청구 기간 및 선택 판매 가격을 설정합니다.
- 통화 기호: $ 또는 € 유로와 같이 가격 앞에 표시된 기호입니다.
- 가격 및 판매: 판매 토글을 사용하여 취소선 원본을 표시하는 금액입니다.
- 기간: /월 또는 /년과 같은 청구 주기 텍스트입니다.
기능을 추가합니다 #
열다 특징 섹션. 반복기이므로 각 목록 항목은 레이블과 아이콘이 있는 자체 항목입니다.
- 텍스트: 기능 #1 또는 무제한 티켓과 같은 기능 레이블입니다.
- 아이콘: 각 기능 옆에 표시된 체크표시 또는 십자가입니다.
- 도구 설명: 기능을 설명하는 선택적 호버 노트입니다.
- 항목 추가: 계획에 필요한 만큼 많은 기능을 추가하세요.
리본을 추가 #
열다 리본 트렌딩이나 인기 같은 코너 배지를 추가하는 섹션. 사람들이 선택하기를 원하는 계획을 사람들에게 알려주는 가장 빠른 방법입니다.
- 표시 및 제목: 리본을 켜고 텍스트를 설정합니다.
- 정렬 및 위치: 리본을 구석에 놓고 쿡쿡 찔러보세요.
- 회전: 모서리를 가로 질러 리본을 각도.
테이블을 스타일링합니다 #
열다 스타일 색상과 간격을 제어하는 탭. 헤더,가격, 기능,바닥글 및 리본에 대한 섹션이 있으며 각각 고유한 색상과 타이포그래피가 있습니다.
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 및 앱 계획 3개의 계층과 강조 표시된 즐겨찾기로 구성됩니다.
- 회원 사이트 기본 및 프리미엄 액세스 계층이 있습니다.
- 대행사 및 프리랜서 패키지 서비스 계층 표시.
- 호스팅 및 도구 체크마크를 통해 플랜당 기능을 나열합니다.
- 코스 및 이벤트 기본 및 프리미엄 티켓을 제공합니다.
가격표 위젯 작업 팁 #
- 하나의 계획을 강조한다. 대부분의 사람들이 구매하기를 원하는 플랜에 하이라이트 테이블 토글과 리본을 사용하십시오. 세 가지를 모두 강조 표시하고 그 중 어느 것도 눈에 띄지 않습니다.
- 기능 목록을 균등하게 유지하세요. 계획 전반에 걸쳐 유사한 행 수를 사용하면 한눈에 쉽게 비교할 수 있습니다.
- 버튼을 동작에 일치시킵니다. 지금 구매하고, 무료로 시작하고, 시작하세요. 모두 다르게 읽으므로 제안에 맞는 것을 선택하세요.
- 그라디언트를 아껴서 사용하세요. 계획 당 하나의 악센트 색상은 서로 싸우는 세 개의 큰 그라데이션보다 깨끗하게 읽습니다.
- 명확한 기간을 설정하세요. 항상 /월 또는 /년을 표시하므로 가격이 결코 모호하지 않습니다.
자주 묻는 질문 #
마스터 애드온의 가격표 위젯은 무엇입니까?
헤더,가격 및 기간,기능 목록 및 버튼으로 하나의 가격 계획을 구축하는 Elementor 위젯입니다. 전체 가격 섹션을 만들기 위해 몇 가지를 나란히 배치하고 모든 것이 코드없이 Elementor 패널에서 설정됩니다.
플랜을 가장 인기 있는 플랜으로 표시하려면 어떻게 해야 합니까?
가격 내용 섹션에서 하이라이트 테이블 토글을 켜서 계획을 높이고,리본 섹션에 트렌딩 또는 인기 같은 텍스트가 있는 리본을 추가합니다. 함께 방문자가 선택하기를 원하는 계획에 시선을 끕니다.
판매 또는 할인된 가격을 추가할 수 있나요?
예. 가격 섹션에는 판매 토글이 있습니다. 켜면 위젯에 판매 가격 옆에 원래 가격이 표시되므로 방문자는 할인을 볼 수 있습니다. 같은 섹션에서 통화 기호와 청구 기간을 설정합니다.
요금제당 더 많거나 적은 기능을 표시할 수 있나요?
예. 기능 섹션은 리피터입니다. 항목 추가를 사용하여 행을 추가하고 X 를 사용하여 제거하므로 각 계획에서 고유한 기능을 정확하게 나열할 수 있습니다. 기능 표시 토글을 사용하여 기능 목록을 완전히 숨길 수도 있습니다.
가격 기능에 툴팁을 추가할 수 있나요?
예. 리피터의 각 기능에는 Tooltip 탭이 있으므로 기능의 의미를 설명하는 짧은 호버 노트를 첨부 할 수 있습니다. 레이블만으로는 충분히 명확하지 않은 기술적 기능에 편리합니다.
감싸는 #
가격표 위젯은 계획을 깔끔한 비교로 바꿔줍니다: 헤더와 가격을 설정하고,기능을 나열하고,인기 있는 계획에 리본을 추가한 다음,색상과 버튼을 스타일링합니다. 관련 위젯은 을 참조하세요 Call to Action 위젯을 실행합니다 그리고 the 정보 상자 위젯, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 보세요 가격표 위젯 페이지 단계별 빌드를 위해 다섯 가지 레이아웃과 Elementor Pro 의 가격표와의 비교.
