Divi 플러그인 하이라이트: Divi 제품 캐러셀 모듈

Divi 제품 캐러셀 모듈은 캐러셀 슬라이더 내에 WooCommerce 제품을 표시하는 Divi용 타사 플러그인입니다. 제품 캐러셀을 만들고 모든 Divi 레이아웃에 배치합니다. 스타일을 지정하고 여러 레이아웃 및 표시 옵션을 선택할 수 있습니다. 이 기사에서는 Divi Product Carousel Module을 살펴보고 그 기능을 살펴보고 사용하기가 얼마나 쉬운지 살펴보겠습니다.

Divi 제품 캐러셀 모듈은 개발자 웹사이트와 Divi 마켓플레이스에서 사용할 수 있습니다.

Divi 제품 캐러셀 모듈

플러그인을 업로드하고 활성화한 후 대시보드 메뉴에서 DiviGear로 이동하여 라이선스를 활성화합니다. 이 개발자의 플러그인이 여러 개인 경우 플러그인 탭을 선택해야 합니다.

Product Carousel이라는 새 모듈이 Divi Builder에 추가되었습니다. 군중에서 눈에 띄도록 보라색 아이콘이 포함되어 있습니다.

설정에는 콘텐츠, 디자인 및 고급 탭이 포함됩니다. 콘텐츠 탭에는 WooCommerce 콘텐츠에 대한 설정이 있습니다. 드롭다운 상자에서 최근, 추천, 판매, 베스트 셀러, 최고 평점 또는 제품 카테고리에서 제품 유형을 선택합니다. 표시할 제품 개수의 숫자를 입력합니다. 인기도, 등급, 날짜 또는 가격에서 정렬 순서를 선택합니다. 장바구니에 추가 버튼 및 설명을 활성화할 수도 있습니다. 전체 설명 또는 발췌문을 표시합니다.

캐러셀 설정을 사용하면 사용된 장치에 따라 열 수를 선택할 수 있습니다. 또한 멀티슬라이드(화면의 슬라이드 수만큼 슬라이드하도록 활성화하거나 한 번에 한 슬라이드씩 슬라이드하도록 비활성화), 항목 간격, 전환 지속 시간, 중앙, 루프, 자동 재생, 점 및 화살표 탐색, 정렬 및 슬라이드 효과. 기타 설정에는 링크 및 배경이 포함됩니다. 점과 화살표를 함께 사용할 수 있다는 점이 흥미롭습니다. 슬라이드 하단의 오른쪽, 중간 또는 왼쪽에 점을 배치할 수 있습니다.

디자인 탭에는 오버레이, 제목, 가격, 설명, 판매 배지, 장바구니에 추가 버튼, 리뷰, 화살표, 점, 이미지, 호버, 간격, 테두리 및 상자 그림자에 대한 설정이 포함됩니다. 선택한 선택 항목에 따라 다른 설정이 추가됩니다. 이러한 각 설정은 광범위합니다.

고급 탭에는 예상 CSS, 가시성 및 전환 기능이 포함되어 있습니다. 사용자 정의 CSS에는 제품, 이미지, 제목, 가격, 이전 판매 배지 화살표, 다음 화살표 및 점에 대한 필드가 포함됩니다. 이것은 CSS로 많은 제어를 제공합니다.

Divi 제품 캐러셀 모듈 설정

제목과 가격을 상단이나 하단으로 이동할 수 있습니다. 이 예에서는 둘 다 맨 위로 이동하고 크기와 색상을 변경했습니다. 배경색과 글꼴 크기를 변경하여 판매 배지의 스타일을 지정했습니다. 비활성 점과 활성 점의 스타일도 지정했습니다.

전면에서 보면 이렇습니다. 오버레이도 추가했고 마우스를 가져가면 장바구니에 추가 버튼이 나타납니다. 오버레이 호버와 버튼 호버 모두에 대해 이 버튼의 스타일을 지정할 수 있습니다.

여기서는 6개의 열을 선택하고 모든 텍스트를 다시 맨 아래로 이동하고 텍스트 색상을 조정하고 장바구니에 추가 버튼에 약간의 불투명도를 추가했습니다. 호버 불투명도를 기본값으로 두었으므로 버튼 자체 위에 마우스를 올려 놓으면 버튼이 단색으로 표시됩니다.

이를 위해 레이아웃을 4열로 설정했습니다. 화살표를 추가하고 화살표와 점의 색상을 변경했습니다. 제목, 가격, 설명에도 배경을 추가하고 모든 텍스트를 흰색으로 변경했습니다. 상자 내에서 텍스트를 잘 정렬하기 위해 콘텐츠 패딩을 추가했습니다. 또한 상단에 대한 콘텐츠 패딩이 포함됩니다(이미지 위에 제목이나 가격을 배치하는 경우).

전면에서 보면 이렇습니다. 오른쪽의 화살표는 표시할 수 있는 제품의 끝에 있음을 나타내기 위해 더 밝습니다. 루프로 설정하면 일반 색상이 됩니다.

다음은 오버플로를 선택했을 때의 모습입니다. 멋진 3D 카드 효과를 제공합니다. 회전량을 조정하고 슬라이드 그림자를 활성화할 수 있습니다.

이 예에서는 카드에 상자 그림자를 주고 흐림 효과를 조정했습니다. 화살표도 원으로 변경하고 색상을 조정했습니다.

센터 슬라이드가 활성화된 프런트 엔드의 모습은 다음과 같습니다. 4열 레이아웃입니다. 중앙 슬라이드를 선택하면 다르게 표시됩니다.

위의 예와 동일한 설정을 사용한 5열 레이아웃입니다.

제품 캐러셀은 Divi 레이아웃에 잘 맞습니다. 이 예에서는 Divi shop 모듈을 Divi Product Carousel Module로 교체하고 레이아웃과 일치하도록 스타일을 지정했습니다.

이 경우 제목을 상단으로 이동하고 상단과 하단에 패딩을 추가하고 제목을 반 굵게 만들었습니다. 또한 레이아웃과 일치하도록 장바구니에 추가 버튼의 색상을 변경했습니다.

이 경우 슬라이드와 이미지의 테두리를 조정하여 둥근 모서리를 만들었습니다. 나는 계속해서 이미지를 원으로 만들었습니다. 상자 그림자도 추가했습니다.

레이아웃 내에서 우수해 보입니다. 그러나 대부분의 판매 배지를 숨깁니다. CSS를 사용하는 방법이 있을 수 있습니다.

이것은 3열 레이아웃으로 오버플로를 사용합니다.

여기서는 이미지 테두리를 제거했지만 슬라이드 테두리는 그대로 두었습니다. 상자 그림자를 추가하고 강도와 위치를 조정했습니다.

또한 호버에 대한 리뷰의 별 등급을 보여줍니다. 장바구니에 추가 버튼 옆에 등급이 표시됩니다. 멋진 애니메이션과 함께 제공됩니다. 이것이 기본 설정입니다. 배경과 별의 색상을 지정할 수 있습니다.

여기에서는 레이아웃의 요소와 일치하도록 등급 스타일을 지정했습니다.

이를 위해 가격을 상단으로, 제목을 하단으로 옮겼습니다. 설명과 오버레이를 추가했습니다. 도트 내비게이션을 오른쪽으로 옮겼습니다. 상자 그림자가 측면에 표시되도록 패딩을 추가해야 했습니다. 패딩이 없으면 모듈 공간의 가장자리에 제품을 배치합니다.

Divi 제품 캐러셀 모듈 데모

현재 개발자 웹사이트에는 13개의 다운로드 가능한 데모가 있습니다. Divi 라이브러리에 업로드하고 모든 Divi 레이아웃과 함께 사용할 수 있는 레이아웃입니다. 모두 Divi Product Carousel 모듈의 스타일링을 포함하고 일부는 다른 스타일의 모듈 및 배경을 포함합니다. 이는 제품 캐러셀 디자인의 시작점을 파악하고 모듈로 수행할 수 있는 몇 가지 작업을 보여주는 데 유용합니다. 그 중 몇 가지를 살펴보겠습니다.

이것은 상단에 제목을 배치하고 일치하도록 상단과 하단에 스타일을 배치하고 이미지 외부에 원 화살표를 추가하고 점을 포함합니다. 또한 슬라이드를 돋보이게 하기 위해 하단 테두리가 있습니다. 나는 대담한 색상을 좋아합니다. 상단과 하단에 약간의 투명도가 있어 배경 패턴이 보입니다. 이 레이아웃에는 제목에 대한 스타일이 지정된 텍스트 모듈이 포함되어 있습니다.

여러 레이아웃에는 스타일 지정이 있는 다른 모듈이 포함됩니다. 이것은 2열 레이아웃을 사용하여 텍스트 및 버튼 모듈을 사용하여 클릭 유도문안을 추가합니다.

정면에서 본 모습입니다. 여기에는 테두리, 상단의 제목 및 장바구니에 추가 버튼의 두 가지 색상이 포함됩니다. 화살표는 모듈 이미지 내에 표시됩니다.

여기에는 녹색 배경과 일치하는 스타일이 지정된 슬라이드가 포함됩니다. 장바구니에 추가 버튼은 제품 위로 마우스를 가져가면 연한 녹색으로 표시되고 버튼 위로 마우스를 가져가면 짙은 녹색이 됩니다. 여기에는 제목에 대한 스타일이 지정된 텍스트 모듈이 포함됩니다.

여기에는 판매 배지의 파란색 스타일, 이미지 외부의 둥근 화살표 및 장바구니에 추가 버튼이 포함됩니다. 슬라이드에 작은 테두리를 추가합니다. 오버플로 효과가 있는 슬라이드를 표시합니다.

이것은 또한 오버플로 효과가 있는 제품을 표시합니다. 또한 화살표에 파란색을 사용하고 장바구니에 추가 버튼을 사용합니다. 제목이 맨 위로 이동됩니다. 오버레이는 불투명도가 높은 흰색이고 판매 배지는 빨간색입니다.

이것은 스타일이 지정된 배경을 포함하고 테두리, 스타일이 지정된 장바구니에 추가 버튼, 판매 배지 및 원 화살표를 추가합니다. 오버레이는 흰색입니다. 가격을 상단에 배치하고 다른 모든 데이터를 하단에 배치합니다.

Divi 제품 캐러셀 모듈 가격 및 문서

Divi 제품 캐러셀 모듈에는 두 가지 구매 옵션이 있습니다.

• 단일 사이트 – $19
• 무제한 사이트 – $39

개발자 웹 사이트와 마켓플레이스에서 사용할 수 있습니다.

설명서는 기능을 안내하는 YouTube 비디오에서 제공됩니다. 대시보드의 DiviGear 메뉴에서 해당 링크를 찾을 수 있습니다. 두 개 이상의 DiviGear 제품이 있는 경우 해당 제품의 탭을 선택한 다음 문서를 선택하십시오.

마무리 생각

Divi 제품 캐러셀은 사용하기 쉽고 제품을 돋보이게 하는 데 좋습니다. 슬라이더로 표시하고 싶지 않더라도 고려할 가치가 있는 스타일링 및 제품 프레젠테이션 옵션이 많이 있습니다. 나는 Extra와 잘 어울리지 않았다. 이미 많은 WooCommerce 기능이 있고 WooCommerce 상점을 구축하기 위한 훌륭한 플랫폼이기 때문에 Extra가 지원되기를 바랍니다.

다운로드 가능한 데모가 있다는 점이 마음에 듭니다. 여기에는 모듈의 배경과 스타일이 포함됩니다. 이것은 시작점을 제공하거나 Divi 레이아웃 내에서 WooCommerce 제품을 제시하기 위한 상상력을 불러일으키기에 좋습니다.

WooCommerce 제품을 캐러셀에 표시하거나 몇 가지 디자인 옵션이 더 있는 경우 Divi 제품 캐러셀 모듈을 살펴볼 가치가 있습니다. 개발자 웹 사이트와 Divi 마켓플레이스에서 사용할 수 있습니다.

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

추천 이미지 편지-Shmetters / shutterstock.com