Divi 플러그인 하이라이트: Divi Ajax 필터

Divi Ajax Filter는 Divi Builder에 몇 가지 새로운 모듈을 추가하는 타사 플러그인입니다. 이러한 모듈은 함께 작동하여 단순하거나 복잡한 필터를 만듭니다. Divi Ajax 필터는 WooCommerce 제품 및 고급 사용자 정의 필드와 같은 페이지, 게시물, 프로젝트 및 사용자 정의 게시물 유형과 함께 작동합니다. 이 게시물에서는 Divi Ajax 필터를 살펴보고 이것이 귀하의 필요에 맞는 제품인지 결정하는 데 도움이 되는 작동 방식을 살펴보겠습니다. 우리는 Divi Whisky Layout Pack을 사용하여 야생에서 이 플러그인을 사용하는 방법을 보여줄 것입니다.

Divi Ajax 필터 모듈

Divi Ajax Filter는 Divi Builder에 블록을 추가합니다. 이것을 클릭하면 Ajax 필터 모듈이 포함된 하위 메뉴가 열립니다. 모듈은 필터가 있는 게시물 목록과 함께 작동합니다. 이를 사용하여 레이아웃을 만들거나 만든 레이아웃을 표시할 수 있습니다.

아카이브 루프 – Divi Ajax 필터

보관 루프 모듈은 제품 또는 게시물을 표시하기 위해 선택한 모든 루프 레이아웃을 표시합니다. 즉, 선택한 사용자 지정 게시물 유형 목록이 표시됩니다. 제품 게시물 유형을 선택하면 제품 목록이 표시됩니다. 사용자 정의 루프 레이아웃에서는 사용할 수 없습니다. 아카이브, 카테고리 페이지 및 일반 페이지와 함께 사용하도록 설계되었습니다.

루프 레이아웃을 만들고 지정할 때까지 루프 레이아웃을 만들라는 메시지가 표시됩니다. 루프 레이아웃은 포스트 제목 및 썸네일과 같은 Divi Ajax 모듈로 생성되어야 합니다. 기본 WooCommerce 루프를 선택할 수도 있습니다.

모듈 옵션

게시물, 페이지, 미디어, 프로젝트 및 제품과 같은 게시물 유형을 선택할 수도 있습니다. 게시물 유형을 자동 감지하거나 가변 제품을 단일 제품으로 설정하십시오.

루프 스타일의 경우 WooCommerce 레이아웃 또는 사용자 지정 레이아웃 중에서 선택합니다. 사용자 지정 레이아웃을 선택하면 Divi 라이브러리에서 레이아웃을 선택할 수 있는 또 다른 드롭다운 상자가 표시됩니다.

표시할 게시물 수를 선택합니다. 이렇게 하면 모듈 영역 내에 표시되는 숫자를 제어할 수 있지만 더 로드 버튼을 사용하여 페이지 매김을 사용하여 더 많은 게시물을 표시할 수 있습니다. 메인 루프로 설정하면 필터가 제어하는 ​​게시물 목록이 됩니다. 정렬 옵션으로 주문을 추가하고 결과 수를 표시할 수도 있습니다.

결과 수는 여전히 Divi Builder에서 1-9개의 결과를 표시하지만 아래 예와 같이 프런트 엔드에 올바른 수의 결과를 표시합니다.

페이지 매김이 표시되는 방법에 대한 몇 가지 옵션이 있습니다. 추가 로드, 표준 페이지 매김, 무한 스크롤 또는 없음 중에서 선택합니다.

ajax 업데이트 후 맨 위로 스크롤하거나 기능을 비활성화하십시오. 페이지 매김의 위치를 ​​미세 조정할 수도 있습니다.

카테고리에 하위 카테고리, 특정 카테고리 및 제품이 있는 경우 제품과 같은 많은 요소를 비활성화, 제외 또는 포함합니다. 특정 항목이 로드 시에만 포함되도록 설정할 수도 있습니다. 쉼표로 필드에 입력하십시오.

필터의 애니메이션과 무한 스크롤 옵션을 선택합니다. 세로 3줄, 가로 3줄, 튀는 점 3개, 도넛, 도넛 멀티플, 잔물결을 포함하여 선택할 수 있는 6개의 애니메이션이 있습니다. 애니메이션은 매끄럽고 반짝임을 더합니다.

사용자 지정 레이아웃 옵션

사용자 정의 레이아웃 옵션을 사용하면 사용자 정의 분류로 사용하기 위해 생성한 레이아웃을 선택할 수 있습니다. 포함할 사용자 지정 분류를 지정할 수도 있습니다.

기본 레이아웃 옵션

기본 레이아웃 옵션을 사용하면 그리드 또는 클래식 블로그 레이아웃 중에서 선택할 수 있습니다. 그리드의 경우 표시할 열 수를 선택합니다. 평점, 발췌, 가격 및 장바구니에 추가 버튼을 표시할 수도 있습니다.

프론트엔드에서 보면 이렇습니다. 4개의 열이 있는 그리드를 표시하도록 설정했습니다. 발췌 옵션도 비활성화했습니다.

여기에는 색상 및 패딩 옵션도 포함됩니다. 판매 배지, 별점 및 제품 배경의 색상을 변경합니다. 슬라이더를 사용하여 제품의 네 면 모두에 패딩을 추가합니다. 패딩을 추가하고 별에 색상을 지정하고 판매 배지 색상을 변경했습니다.

프론트엔드에서 보면 이렇습니다.

디자인 설정

디자인 설정에는 글꼴, 색상, 간격 및 나머지 표준 Divi 설정을 포함한 모든 요소에 대한 세부 옵션이 포함됩니다.

게시물 필터링 – Divi Ajax 필터

게시물 필터 모듈은 아카이브 루프 모듈과 함께 작동하여 표시되는 게시물을 필터링합니다. 사용자 지정 루프 레이아웃에서는 사용하면 안 됩니다. 필터 항목은 하위 모듈입니다. 필터를 생성하려는 만큼 추가할 수 있습니다.

새 필터 항목

새 필터 항목을 추가하면 해당 하위 모듈이 열립니다. 여기에는 많은 설정이 포함됩니다. 기본 설정을 사용하면 범주, 태그, 가격, 등급, 속성 및 사용자 정의 분류 사이에서 필터링할 항목을 선택할 수 있습니다. 검색 상자를 만들 수도 있습니다. 게시물 유형, 값, 제외 옵션 등을 선택합니다.

레이아웃을 사용하면 필터 매개변수 표시, 레이블 표시, 필터 너비 선택을 선택할 수 있습니다.

선택 옵션을 사용하면 Select2를 활성화하고 옵션 텍스트를 변경할 수 있습니다.

범주, 태그 및 분류를 사용하면 목록에서 용어가 정렬되는 방식, 표시 모드, 접두사 및 축소 옵션을 선택할 수 있습니다.

범위를 사용하면 필터의 범위 설정을 완전히 제어할 수 있습니다. 레이블 숨기기, 값 유형 선택, 범위 설정, 단계 레벨 선택, 모양 조정, 텍스트 전후 선택 등.

조건부 논리를 사용하면 필터에 대한 논리 규칙을 생성할 수 있습니다. 즉, 필터를 미세 조정하여 필터를 제어하고 가능한 한 스마트하게 만들 수 있습니다.

여러 필터 항목을 추가하여 원하는 정확한 필터를 만듭니다. 검색 옵션, 범주, 태그 및 가격으로 필터를 만들었습니다. 사용자는 필터 도구 중 하나를 선택하거나 함께 사용할 수 있습니다.

메인 필터 포스트 설정

기본 옵션에는 필터 업데이트 유형(버튼 클릭 또는 필드 변경 중에서 선택), 스크롤 위치 선택, 검색 및 재설정 버튼에 대한 텍스트 추가, Select2 활성화가 포함됩니다.

레이아웃 옵션은 필터 요소의 레이아웃을 결정합니다. 측면 Colome 또는 전체 너비 열을 선택하고 크기, 토글과 슬라이드 사이의 필터 스타일을 설정하고 버튼을 숨기거나 표시합니다.

모바일 옵션은 토글을 추가하고, 토글 스타일을 선택하고, 버튼 텍스트를 변경하고, 필터를 개별적으로 토글할 수 있도록 합니다.

게시물 제목 – 아카이브 페이지

게시물 제목 모듈은 제목을 표시하고 제목 수준을 선택하고 단일 페이지에 연결하고 새 탭을 열고 URL을 입력할 수 있습니다.

디자인 탭에는 게시물 제목과 제품 제목에 대한 별도의 설정이 포함되어 있습니다. 모든 표준 설정이 포함되어 있습니다.

썸네일 – Divi Ajax 필터

썸네일 모듈을 사용하면 이미지 크기를 선택하고, 이미지를 단일 페이지에 연결하고, 고급 사용자 정의 필드와 함께 자리 표시자 이미지를 사용하고, 새 탭에서 열고, 제목 태그를 활성화하고, 이미지 스타일을 선택할 수 있습니다.

썸네일 이미지 크기에는 많은 옵션이 포함되어 있습니다.

제품 필터 구축

먼저 Archive Loop Module과 Filter Posts Module을 사용하여 제품 필터를 구축하겠습니다.

다음으로 보관 루프 모듈의 경우 제품으로 설정하고 기본 WooCommerce 레이아웃을 선택했습니다. 이렇게 하면 기본적으로 이미지, 제목 및 가격이 제공됩니다. 이를 메인 루프로 설정하고 Order By Menu와 Results Count를 활성화했습니다. 로딩 옵션으로 더 보기를 선택했습니다. 레이아웃은 3개의 열이 있는 그리드로 설정됩니다. 또한 평점, 가격, 발췌, 카트에 추가 버튼을 표시하도록 선택했습니다. 판매 배지와 별점은 사용자 정의 색상이 있으며 제품에 약간의 패딩을 추가했습니다.

다음은 디자인 설정입니다. 장바구니에 추가 버튼뿐만 아니라 개별 텍스트 요소의 색상과 스타일을 조정했습니다.

마지막으로 필터의 경우 검색, 카테고리, 가격 및 등급을 추가했습니다. 카테고리 필터로는 라디오 버튼을 선택했습니다. 가격은 $5에서 $100 사이에서 설정됩니다.

필터의 디자인 설정을 위해 폰트 색상, 버튼 색상 등을 조정했습니다.

제품 필터 결과

다음은 Divi Whisky Layout Pack의 스타일로 프런트 엔드에서 어떻게 보이는지 보여줍니다.

다음은 정렬 기능입니다. 사용자는 기본 정렬, 인기순 정렬, 평균 평점, 최신순, 낮은 가격순 또는 높은 가격순을 선택할 수 있습니다.

다음은 검색 옵션에 대한 결과입니다. WooCommerce 데모 제품을 사용하고 있습니다. "분홍"을 검색하여 2개의 결과를 찾았습니다.

카테고리의 경우 "Kitchen" 카테고리 라디오 버튼을 선택하고 4개의 결과를 찾았습니다.

이 예에서는 가격대별로 제품을 필터링했습니다. 5-30개를 선택하고 낮은 가격에서 높은 가격순으로 정렬했습니다.

필터를 함께 사용할 수도 있습니다. 이 예에서는 "주방" 범주를 선택하고 가격 범위를 $30에서 $50로 설정했습니다. 내 인벤토리에 있는 해당 카테고리 및 가격대의 제품을 보여줍니다.

Divi Ajax 필터 구입처

Divi Ajax Filter는 Divi Marketplace에서 $97에 구입할 수 있습니다. 여기에는 1년 지원 및 업데이트와 30일 환불 보장이 포함됩니다.

결말 생각

이것이 Divi Ajax Filter의 모습입니다. 이것은 많은 WordPress 게시물 유형에 대한 놀라운 필터를 생성하는 Divi Builder용 강력한 모듈 세트입니다. Divi Ajax 필터는 복잡합니다. 배우는 데 시간이 좀 걸리지만 일단 시작하면 이해하고 사용하는 데 그리 어렵지 않습니다. 데모를 따르면 시간이 절약되고 학습 곡선이 상당히 줄어듭니다. 게시물 유형에 대한 고급 필터에 관심이 있다면 Divi Ajax Filter는 탁월한 선택입니다.

여러분의 의견을 듣고 싶습니다. Divi Ajax 필터를 사용해 보셨습니까? 의견에 대해 어떻게 생각하는지 알려주세요.