쇼핑객이 두세 가지 옵션의 무게를 측정할 때,나란히 놓인 테이블이 별도의 페이지 사이를 스크롤하는 것보다 더 빠르게 질문에 답합니다. The 비교표 위젯, Pro 위젯이 들어있습니다 Elementor용 마스터 애드온는, 그 테이블을 구축: 측면 아래 기능의 열, 상단에 걸쳐 제품 당 열, 그리고 각각에 가격 플러스 구매 버튼. 당신은 어떤 HTML 테이블이 필요하지 Elementor 패널에서 그것을 채우기.
각 셀은 텍스트,틱 또는 십자가를 보유할 수 있으므로 한눈에 읽습니다. 4 가지 레이아웃 스타일,조정 가능한 제품 열 수 및 풀 컬러 컨트롤은 테이블이 모든 페이지와 일치할 수 있음을 의미합니다. 이 가이드는 기능 행에서 얼룩말 줄무늬까지 모든 설정을 다룹니다.
먼저 보는 것을 선호하시나요? 이 짧은 튜토리얼은 비교표 위젯을 끝에서 끝까지 살펴봅니다:
비교표 위젯이 수행하는 작업 #
위젯은 그리드를 배치합니다: 기능 이름은 첫 번째 열을 따라 실행되며,각 제품은 제목,가격, 기능별 값 및 클릭 유도 문구가 있는 자체 열을 얻습니다. 제품 수를 변경하고 열이 일치하도록 조정합니다.
모든 것을 손으로 입력하므로 WooCommerce 에 의존하지 않습니다. 따라서 플러그인,서비스 계층 또는 하드웨어를 비교하는 데 상점 제품과 마찬가지로 유용합니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- 마스터 애드온 프로 활성 라이센스와 함께 설치,비교 테이블은 프로 위젯이기 때문에. 플러그인에 새로운? 참조 설치 가이드.
- 비교하려는 제품과 기능 목록입니다.
비교표 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 비교표또는 마스터 애드온 섹션으로 스크롤합니다. 페이지로 드래그하면 이미 자리 표시자 제품 및 기능으로 채워진 샘플 테이블이 나타나므로 빈 그리드 대신 작업 레이아웃에서 편집할 수 있습니다.
일반 설정: 레이아웃 및 제품 수 #
열다 콘텐츠 탭과 일반 섹션에는 전체 테이블을 형성하는 두 가지 설정이 있습니다.
- 레이아웃: 스타일 1, 2, 3, 4 를 선택합니다. 각각 헤더, 가격, 열을 다른 모양으로 재배열합니다.
- 제품: 표에 표시되는 제품 열 수를 2 에서 6 으로 설정합니다. 숫자를 높이고 새 열마다 일치하는 제품 섹션이 아래에 표시됩니다.
기능 행을 설정합니다 #
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 특징 상자 섹션은 왼쪽 열, 비교하는 항목의 목록을 정의합니다. The 향하고 상단의 라벨(“기능” 또는 “제품” 등)입니다 특징 리피터는 행당 하나의 항목을 보유합니다.
각 기능 항목은 크기,보증 또는 가용성과 같은 행 레이블입니다. 사용 항목 추가 행을 추가하려면 복사 아이콘을 사용하여 행을 복제하고 X를 사용하여 행을 제거합니다. a도 있습니다 버튼 헤딩 구매 버튼을 누른 행 필드입니다.
각 제품 열을 채웁니다 #
모든 제품은 자체 섹션을 얻습니다 (제품 1, 제품 2등등). 안에서 열의 제목,가격, 이미지,버튼 텍스트,링크를 설정한 다음 각 특징 행의 값을 설정합니다.
편리한 부분은 행당입니다 콘텐츠 제어. 각 기능에 대해 수표,십자가, 선택한 아이콘 또는 일반 텍스트를 선택합니다. 틱 앤 크로스 그리드는 즉시 읽히는 반면 텍스트 필드는 “1 년”또는 “모든 크기”와 같은 사양에 적합합니다. An 스타일 재정의 토글을 사용하면 단일 열이 눈에 띄게 되며 이는 권장 선택을 강조하는 데 유용합니다.
레이아웃 스타일 선택하기 #
4 개의 레이아웃은 콘텐츠를 건드리지 않고도 테이블의 모양을 변경합니다. 레이아웃 사이를 전환하는 것은 페이지에 맞는 스타일을 찾는 원클릭 방법입니다.
스타일 4 열을 곡선형 컬러 헤더가 있는 별도의 카드로 바꾸면 주요 비교를 위해 더 대담한 모양이 됩니다.
스타일 2 각 열 위에 순환 가격 배지를 띄우고 그 아래에 색상이 지정된 제목 표시줄이 표시됩니다. 여기서 표는 열의 크기를 보여주는 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 스타일 탭은 색상과 간격을 제어합니다. The 일반 섹션에서는 테이블 전체의 모양을 설정하고 나머지는 분할합니다 기능 상자, 제품, 버튼, 그리고 패턴 무료일 때 패턴 확장이 켜져 있습니다.
- 홀수 행 색상 및 짝수 행 색상: 긴 테이블을 더 쉽게 읽을 수 있게 해주는 얼룩말 줄무늬.
- 테두리 유형, 너비 및 색상: 세포 사이의 선.
- 상자 반경, 열 간격 및 행 간격: 둥근 모서리와 열과 행 사이의 간격.
- 기능 상자, 제품, 버튼: 표의 각 부분에 대한 타이포그래피, 색상, 정렬 및 패딩.
페이지의 결과 #
게시 또는 미리보기 및 테이블 렌더링 기능,제품, 가격,버튼이 제자리에 있고 얼룩말 행과 모든 것이 있습니다. 아래는 세 가지 제품이 있는 스타일 2 테이블입니다.
일반적인 사용 사례 #
- 제품 비교 두세 가지 모델을 나란히 놓습니다.
- 계획 또는 가격 계층 쌓아두는 대신 격자를 원할 때 가격표.
- 플러그인 또는 소프트웨어 기능 매트릭스 틱 앤 크로스 행이 있습니다.
- 서비스 패키지 각 계층에 포함된 내용을 비교합니다.
- 미국 대 그들 테이블 스타일 재정의 토글을 사용하여 제품 강조 표시.
비교표 위젯 작업 팁 #
- 예/아니요 기능에 대해 진드기와 십자가를 사용하십시오. 그들은 “예” 와 “아니오” 라는 단어보다 빠르게 스캔하고 테이블을 깔끔하게 유지합니다.
- 기능 라벨을 짧게 유지하세요. 행당 하나 또는 두 개의 단어가 첫 번째 열이 넓어지는 것을 방지합니다.
- 스타일 재정의로 열 하나를 강조 표시합니다. 다른 색상은 권장 옵션으로 눈을 안내합니다.
- 충분한 대비로 얼룩말 색상을 설정하세요. 행 색상이 번갈아 나타나는 것이 긴 테이블을 읽을 수 있게 만드는 요소입니다.
- 제품 수를 화면에 일치시킵니다. 3 개의 열은 대부분의 레이아웃에 적합; 4 개 이상은 작은 화면에서 비좁을 수 있습니다. 시작 탭 형식 아래 너비에서 (기본적으로 767px) 일부 레이아웃은 제품 탭으로 전환되므로 모바일 보기를 확인하십시오.
자주 묻는 질문 #
마스터 애드온의 비교 테이블 위젯은 무엇입니까?
나란히 비교 그리드를 구축하는 Elementor 용 Master Addons Pro 위젯입니다. 기능 이름은 첫 번째 열을 따라 실행되며 각 제품은 제목,가격, 기능별 값 및 버튼이있는 자체 열을 얻습니다. 모든 것을 손으로 입력하므로 WooCommerce 가 필요하지 않습니다.
표에서 몇 개의 제품을 비교할 수 있습니까?
일반 아래의 제품 필드에서 2 에서 6 까지 숫자를 설정합니다. 숫자를 올리면 추가하는 각 열에 대해 새 제품 섹션이 나타납니다. 세 개의 열은 대부분의 페이지 너비에 적합하며,네 개 이상의 열은 더 넓은 레이아웃에서 가장 잘 작동합니다.
텍스트 대신 틱과 크로스 마크를 표시할 수 있나요?
예. 각 제품 섹션에서 모든 기능 행에는 수표,십자가, 원하는 아이콘 또는 일반 텍스트를 선택하는 콘텐츠 컨트롤이 있습니다. 틱 앤 크로스 표시는 예/아니오 기능을 스캔할 수 있게 하는 반면 텍스트는 보증 길이와 같은 사양에 적합합니다.
비교 테이블에는 몇 가지 레이아웃 스타일이 있습니까?
네. 스타일 1 은 클래식 테이블이고 스타일 2 는 원형 가격 배지를 추가하며 스타일 4 는 열을 곡선 헤더가있는 카드로 바꿉니다. 레이아웃을 전환하면 동일한 내용이 재배열되므로 데이터를 다시 실행하지 않고도 각각을 시도 할 수 있습니다.
제품 열 하나를 강조 표시할 수 있나요?
예. 각 제품 섹션에는 하나의 열에 고유한 색상을 부여할 수 있는 재정의 스타일 토글이 있습니다. 이를 사용하여 권장 옵션을 표의 다른 옵션과 차별화하십시오.
감싸는 #
비교표 위젯은 제품과 기능의 목록을 명확한 나란히 그리드로 바꿉니다: 레이아웃을 선택하고,열 수를 설정하고,기능 행을 추가하고,각 열에 값,가격, 버튼을 채웁니다. WooCommerce 에 의존하지 않기 때문에,모든 페이지에 드롭됩니다. 레이아웃 예제와 가격표를 대신 선택할 시기는 을 참조하세요 Elementor 비교표 위젯 페이지. the 와 짝을 지어 가격표 위젯 플랜 페이지의 경우 전체를 탐색합니다 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.
