Divi 플러그인 하이라이트: Divi FilterGrid

Divi FilterGrid는 Divi Builder에 필터링 가능한 새 모듈을 추가하는 타사 플러그인입니다. 모든 사용자 지정 게시물 유형의 게시물을 표시하고 사용자 지정 필터를 만들어 선택한 분류에 따라 표시할 수 있습니다. 블로그 게시물, 프로젝트, 제품을 표시하고 갤러리를 만드는 등의 작업을 수행합니다.

이 플러그인 하이라이트에서는 Divi FilterGrid를 살펴보고 무엇을 할 수 있는지, 얼마나 사용하기 쉬운지 살펴보겠습니다. 개발자 웹사이트에서 플러그인을 구입할 수 있습니다.

Divi FilterGrid 모듈

Divi FilterGrid 모듈이 Divi Builder에 추가되었습니다. 아이콘은 색상으로 되어 있으며 나머지 부분과 구별됩니다.

Divi FilterGrid 콘텐츠 탭

콘텐츠 탭에는 많은 기능이 추가됩니다. 여기에는 게시물 요소, 쿼리 옵션, 필터 옵션, 페이지 매김 옵션 및 모든 배경색을 조정하는 배경이 포함됩니다. 여기에는 표준 링크 및 관리자 레이블 옵션도 포함됩니다.

포스트 요소

포스트 요소 옵션을 사용하면 추천 이미지를 표시하거나 숨긴 다음 축소판 작업을 결정할 수 있습니다. 게시물에 링크하거나, 라이트박스에 이미지를 표시하거나, 라이트박스 갤러리에 표시하거나, 게시물을 팝업으로 표시하거나, 사용자 정의 라이트박스 갤러리를 열 수 있습니다. 이 예에서는 팝업으로 게시물을 보여주고 있습니다.

라이트박스 갤러리에서 이미지를 엽니다. 독자는 화살표를 선택하여 모든 게시물의 추천 이미지를 볼 수 있습니다. 게시물 제목을 클릭하면 여전히 같은 탭에서 게시물이 열립니다.

오버레이 색상, 아이콘 및 아이콘 색상을 변경할 수도 있습니다. 위의 이미지에서 각각을 사용자 정의했습니다. 제목을 표시하고, 제목에 링크를 추가하고, 발췌문을 추가하고, 발췌문 문자 수를 제한하고, 더 읽기 버튼을 표시하고, 사용자 정의 필드를 추가하는 등의 작업을 수행할 수도 있습니다. 발췌문을 추가하고 포스트 메타를 비활성화했습니다.

쿼리 옵션

쿼리 옵션을 사용하면 기본, 고급 및 사용자 지정 중에서 쿼리 유형을 선택할 수 있습니다. 카테고리, 우편 번호, 오프셋 번호 및 주문 기준 옵션을 선택하십시오. 이 예에서는 하나의 범주를 선택했습니다.

고급 옵션은 몇 가지 새로운 기능을 제공합니다. 특정 게시물 유형, 분류, 용어를 선택하고 용어 및 분류를 제외합니다. 비공개 게시물과 고정 게시물을 표시할 수도 있습니다. 위의 예에서는 분류 체계를 설정하고 있습니다. 사용하려는 특정 카테고리나 태그를 선택한 다음 검색어와의 관계를 지정할 수 있습니다. 하위 용어는 동일한 방식으로 작동합니다. 이렇게 하면 카테고리나 태그를 기반으로 게시물을 표시할 뿐만 아니라 추가 세부 정보를 얻을 수 있습니다. 분류에 대한 게시물 번호 및 주문 옵션을 설정할 수도 있습니다.

사용자 정의 쿼리 유형을 사용하면 사용자 정의 콘텐츠를 사용할 수 있습니다. 이를 설정하는 방법을 배울 수 있는 문서에 대한 링크를 제공합니다. 사용자 정의 쿼리는 functions.php 파일의 코드로 수행됩니다. 설명서에는 단계별로 설명하는 몇 가지 예가 포함되어 있습니다.

필터 옵션

필터 옵션을 사용하면 검색어별로 그리드를 필터링할 수 있습니다. 기본 필터를 선택하면 게시물 및 프로젝트에 대한 카테고리와 태그를 선택할 수 있는 모달이 표시됩니다. 순서를 설정하고 ID, 이름 또는 사용자 지정 순서로 필터링할 수도 있습니다. 맞춤 주문의 경우 쉼표로 구분된 값을 입력할 수 있는 상자가 표시됩니다.

페이지 매김 옵션

페이지 매김 옵션을 사용하면 페이지 매김 유형을 선택할 수 있습니다. 페이지, 추가 로드 버튼 또는 스크롤 시 추가 로드 중에서 선택합니다. 페이지 옵션의 경우 화살표, 텍스트 및 링크에 표시되는 페이지 수를 선택할 수 있습니다. 이 예에서 텍스트를 추가하고 화살표를 변경했습니다.

배경

배경 설정을 사용하면 그리드, 필터, 활성 필터, 페이지 매김 및 활성 페이지 매김의 배경을 사용자 지정할 수 있습니다. 또한 Divi 모듈에서 기대할 수 있는 표준 배경 옵션도 포함합니다. 위의 예에서 필터, 그리드 및 페이지 매김에 대한 배경색을 조정했습니다.

Divi FilterGrid 디자인 탭

디자인 탭은 레이아웃 옵션, 포스트 제목 텍스트, 포스트 메타데이터 텍스트, 포스트 콘텐츠 텍스트, 필터 텍스트, 페이지 매김 텍스트, 더 읽기 버튼, 더 로드 버튼 및 모든 표준 Divi 모듈 옵션에 대한 사용자 정의를 제공합니다.

레이아웃 옵션

레이아웃 옵션을 사용하면 레이아웃, 스킨을 선택하고 항목 너비, 열 및 행 여백 크기, 격자 글꼴 크기를 설정할 수 있습니다. 항목 너비를 줄이고 거터를 제거하고 스킨에 자정을 선택했습니다. 글꼴 크기도 줄였습니다.

이것은 왼쪽 수직 필터입니다. 필터를 왼쪽의 수직 스택에 배치합니다. 이미지가 더 크게 보이도록 항목 너비를 늘렸습니다.

오버레이의 항목입니다. 이 옵션에서는 게시물이 더 짧습니다.

이미지 확대는 중앙에 오버레이와 제목이 있는 각 이미지를 보여줍니다. 이미지는 마우스 오버 시 확대됩니다.

라이브러리는 테두리가 있는 카드를 표시하고 이미지 위에 제목을 배치합니다.

기본 스킨을 사용한 목록 레이아웃입니다.

전폭입니다. 제목, 메타 및 발췌문을 이미지 하단에 배치합니다.

Divi FilterGrid 모듈 고급 탭

고급 탭은 모듈 내의 거의 모든 요소에 대해 15개의 사용자 정의 CSS 필드를 추가합니다. CSS 사용자는 사용자 정의할 특정 요소를 타겟팅하는 데 문제가 없습니다.

Divi FilterGrid 모듈 스타일링

레이아웃 옵션은 흥미로운 디자인을 만들 수 있습니다. 이 예에서는 너비를 줄여 단일 행에 표시했습니다. 메타와 발췌문도 제거했습니다.

이를 위해 항목 너비를 늘렸습니다. 이것은 멋진 모자이크 갤러리 디자인을 만듭니다.

여기에서는 제목, 모든 메타, 발췌문, 더 읽기 버튼을 추가했습니다. 제목의 색상을 변경하고 모두 대문자로 만들고 크기를 늘리고 가운데에 맞추고 문자 간격을 늘렸습니다. 또한 더 읽기 버튼의 크기를 줄이고 텍스트 스타일을 흰색으로 지정했습니다.

더 읽기 버튼에 대한 많은 스타일 옵션이 있습니다. 이 경우 기본 크기로 돌아가지만 텍스트의 무게를 가볍게 했습니다. 가장자리를 둥글게 처리하고 배경 그라디언트를 적용했습니다.

편집기 모드에서는 표시되지 않지만 버튼에 이미지를 추가할 수도 있습니다. 단색 오버레이 또는 그라디언트 오버레이를 사용하여 이미지를 단독으로 추가할 수 있습니다. 이 예에서는 녹색 그라디언트 뒤에 이미지를 추가했습니다.

포스트 메타 데이터 텍스트는 모든 포스트 메타를 함께 조정합니다. 색상과 줄 간격을 변경했습니다.

필터 텍스트를 사용하면 필터 글꼴의 스타일을 지정할 수 있습니다. 글꼴 크기를 늘리고 색상을 변경하고 그림자 효과를 추가했습니다. 기본 필터 스타일은 선택한 필터의 색상이 다릅니다. 콘텐츠 탭의 배경 옵션에서 별도로 조정할 수 있습니다.

이 예에서는 페이지 매김 텍스트를 조정하고 있습니다. 색상을 변경하고 크기를 늘리고 문자 간격을 추가하고 그림자를 추가했습니다. 흐림 강도도 조정했습니다.

추가 로드 버튼에는 기본 스타일 옵션도 포함되어 있습니다. 기본 텍스트를 사용하고 있습니다(콘텐츠 탭에서 변경할 수 있음). 또한 텍스트를 흰색으로 설정했습니다(기본적으로 녹색).

글꼴 크기를 늘리고, 문자 간격을 추가하고, 테두리를 조정하고, 그라디언트를 추가하고, 호버링 시 아이콘만 표시하지 않도록 설정했습니다.

Divi FilterGrid 및 사용자 정의 게시물 유형

나는 사용자 정의 포스트 유형과 함께 사용하기 쉽다는 것을 알았습니다. 쿼리 옵션에서 게시물 유형 선택을 클릭한 다음 모달에서 게시물 유형을 선택합니다.

여전히 원래 필터가 표시되지만 직접 만들거나 비활성화할 수 있습니다. 필터 옵션에서 필터 분류를 클릭하고 목록에서 분류를 선택합니다. 값 설정 을 클릭합니다.

이제 WooCommerce 제품에 대한 사용자 정의 필터가 있습니다.

이제 마음의 콘텐츠에 스타일을 지정할 수 있는 WooCommerce 제품 모듈이 있습니다.

Divi FilterGrid 블로그 예

이 예에서는 Dog Walker 레이아웃 블로그 페이지에서 블로그 모듈을 교체했습니다. 게시물의 색상, 글꼴 스타일 및 둥근 모서리에 맞게 스타일을 지정했습니다. 그런 다음 블로그 목록에 표시할 WooCommerce 제품을 추가했습니다. 이것은 블로그 스트림에 다양한 유형의 콘텐츠를 추가하는 좋은 방법입니다.

결과는 놀랍습니다. 필터링 가능한 블로그를 만들거나 필터를 비활성화하고 콘텐츠를 표시할 수 있습니다.

Divi FilterGrid 모듈 문서 및 가격

문서는 개발자 웹 사이트에서 사용할 수 있습니다. 고급 기능에 대한 특정 정보를 보려면 버튼을 클릭하십시오. FAQ 페이지를 방문하거나 여기에서 지원 티켓을 제출할 수 있습니다. 모듈의 모든 기능에 대한 물음표를 클릭하여 사용 방법에 대한 설명을 볼 수도 있습니다.

Divi FilterGrid를 구매하는 데는 4가지 옵션이 있습니다.

• 단일 사이트 – $19
• 5개 사이트 – $39
• 무제한 사이트 – $59
• 평생 무제한 사이트 – $129

개발자 웹사이트에서 플러그인을 구입할 수 있습니다.

마무리 생각

Divi FilterGrid는 흥미로운 플러그인입니다. 다양한 유형의 콘텐츠를 표시하기 위한 훌륭한 모듈입니다. 거의 모든 게시물 유형을 표시하고 여러 게시물 유형을 함께 표시할 수 있습니다. 필터링 옵션은 원하는 만큼 복잡할 수 있습니다.

나는 배경에 대한 색상 조정 옵션이 있는 것을 좋아합니다. 콘텐츠 탭에 색상 옵션이 있다는 것은 색상 옵션이 두 개의 다른 위치에 있음을 의미합니다. 이러한 색상 조정이 디자인 탭으로 이동되면 터치가 더 직관적일 것이라고 생각합니다. 하지만 색상을 개별적으로 사용자 지정할 수 있다는 것은 좋은 일입니다.

나는 그것이 매우 직관적이라는 것을 알았습니다. 모든 옵션을 보려면 탐색하는 것이 좋습니다. 게시물 유형을 표시하기 위해 강력한 필터링된 그리드를 추가하는 데 관심이 있다면 Divi FilterGrid를 추천할 수 있는 쉬운 플러그인입니다.

우리는 당신의 의견을 듣고 싶습니다. Divi FilterGrid를 사용해 보셨습니까? 의견에 대해 어떻게 생각하는지 알려주십시오.

Thepanyo/Shutterstock.com을 통한 추천 이미지