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