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

DIVI 캐러셀 모듈은 Divi Builder에 고급 캐러셀 슬라이더를 추가하는 Divi 및 Extra용 타사 플러그인입니다. 모듈의 거의 모든 것을 제어하여 Divi 또는 Extra 웹사이트에 필요한 거의 모든 유형의 캐러셀을 만들 수 있습니다. 이 기사에서 우리는 Divi Carousel Module을 살펴보고 그것이 무엇을 할 수 있고 얼마나 사용하기 쉬운지 알아볼 것입니다.

Divi 캐러셀 모듈 설치 및 활성화

정상적으로 플러그인을 업로드하고 활성화합니다. DiviGear라는 대시보드에 새로운 메뉴 항목이 추가되었습니다. 이 메뉴로 이동하여 라이센스 키를 추가하십시오.

Divi Builder의 Divi 회전 목마 모듈

Divi Carousel이라는 새 모듈이 Divi Builder에 추가되었습니다.

모듈에는 새 항목을 추가하는 영역이 포함됩니다. 콘텐츠 탭에는 사용자가 사용 중인 장치에 따라 표시할 슬라이드 수를 선택하고, 멀티슬라이드를 활성화하고, 전환 지속 시간을 설정하는 등의 슬라이더 설정이 있습니다. 중앙 슬라이드, 루프, 자동 재생, 화살표 탐색 및 점 탐색 활성화 . 항목 간격을 설정하고 동일한 높이 및 수직 정렬을 활성화합니다. 고급 설정을 통해 슬라이더 효과를 선택할 수 있습니다.

디자인 탭에는 오버레이, 이미지(너비), 이미지 테두리, 제목 및 본문 텍스트, 색상, 간격 및 테두리에 대한 설정이 포함됩니다. 여기에는 화살표 및 점 탐색 모두에 대한 색상 사용자 정의가 포함됩니다.

고급 탭에는 예상한 모든 CSS 필드와 가시성 및 전환 설정이 있습니다. 제목, 콘텐츠, 이미지 및 버튼에 대한 CSS 필드를 추가합니다.

캐러셀 항목 설정에는 세 개의 탭도 포함되어 있습니다. 이러한 설정은 기본 모듈 설정에 설정된 모든 것을 재정의합니다. 콘텐츠 탭에는 메인 콘텐츠, 제목 및 이미지 링크, 버튼 설정, 이미지 설정, 배경 영역이 있습니다.

디자인 탭에는 제목 텍스트, 콘텐츠 스타일(본문 텍스트), 버튼, 간격 및 상자 그림자에 대한 설정이 포함됩니다. 이것은 대부분의 Divi 모듈에서 볼 수 있는 표준 디자인 설정입니다. 고급 탭은 대부분의 모듈에 있는 기본 설정입니다.

이미지 설정은 이미지나 아이콘을 사용할 수 있습니다.

원하는 만큼 슬라이드를 추가합니다. 슬라이드는 표시하도록 설정한 번호에 따라 나란히 표시됩니다. 이것은 4개를 표시하도록 설정되어 있습니다. 물론 원하는 순서대로 끌어다 놓을 수 있습니다.

이 항목에서는 항목 간격을 100으로 조정했습니다. 내 예에서 보여주는 주요 차이점은 텍스트입니다. 이제 한 줄에 더 적은 수의 단어가 표시됩니다.

이것은 화살표 탐색을 사용합니다. 슬라이드 외부에 표시되도록 설정했습니다. 항목 간격을 1로 설정했습니다. 배경색을 사용하면 더 명확합니다.

두 개의 슬라이드를 표시하도록 설정했습니다. 점 탐색을 표시하고 있습니다.

다음은 고급 설정을 살펴보겠습니다. 슬라이더 효과를 Coverflow로 설정했습니다. 회전 및 그림자 옵션이 열립니다. 이 기능은 표준 슬라이더와 모듈을 실제로 구분하는 요소를 보여줍니다. 이것이 기본 설정입니다.

이제 회전을 100으로 설정했습니다. 슬라이드는 화면에서 멀리 왼쪽으로 훨씬 더 3D로 기울어져 있습니다.

다음은 동일한 회전이지만 Coverflow 그림자가 없습니다.

Divi 캐러셀 모듈 예제

캐러셀의 가장 좋아하는 용도 중 하나는 고객 또는 제품의 로고를 표시하는 것입니다. 이 예에서는 앱 개발자 랜딩 페이지의 포트폴리오 페이지에 모듈을 추가했습니다. 방문자가 탐색할 필요가 없도록 3개의 회사 로고를 표시하고 스크롤을 반복하고 자동 재생하도록 설정했습니다.

작업한 프로젝트를 보여주기도 합니다. 이를 위해 방문자가 프로젝트를 볼 수 있도록 버튼이 있는 여러 프로젝트를 추가했습니다. 버튼의 텍스트 색상을 흰색으로 변경하고 버튼에 상자 그림자를 추가했습니다. 나는 화살표를 흰색으로 만들고 배경의 불투명도를 거의 투명하게 설정했습니다.

여기에서 슬라이드에 배경을 추가하고 반투명하게 만들고 상자 그림자를 추가했습니다. 간격에는 버튼, 이미지 및 콘텐츠 패딩이 포함됩니다. 버튼과 이미지에 간격을 추가했습니다.

이것은 오버플로 슬라이더 효과를 사용합니다. 이것이 기본 설정입니다.

이를 위해 슬라이드 중앙에 설정했습니다. 오버플로 설정과 함께 사용하면 가운데 슬라이드를 중앙에 두고 양쪽 슬라이드가 서로 마주보도록 각도를 조정합니다. 4개의 슬라이드를 표시하도록 설정되어 있습니다.

이것은 3개의 슬라이드를 표시하도록 설정되어 있습니다. 저는 회전을 80으로 설정했습니다.

이것은 6개의 슬라이드를 표시하도록 설정되어 있습니다. 회전은 기본값(50)으로 설정됩니다.

이것은 중앙 슬라이드 또는 오버플로가 활성화되지 않은 6개의 슬라이드를 보여줍니다.

이것은 중앙 슬라이드가 활성화된 6을 보여줍니다.

이 예에서는 모듈을 음식 메뉴 슬라이더로 사용하고 있습니다. 이미지, 텍스트 및 버튼을 추가하여 실제로 광고 문구 슬라이더를 만듭니다. 이미지는 100 너비로 설정됩니다. 오버레이, 각 항목을 구매하는 버튼(버튼을 누르면 해당 항목의 제품 페이지로 이동) 및 점 탐색을 추가했습니다. 활성 및 비활성 슬라이드 모두에 대해 오버레이 및 오버레이 아이콘과 점의 스타일을 지정했습니다. 그것은 커피 레이아웃에 완벽하게 맞습니다.

이를 위해 화살표 탐색을 추가하고 버튼과 일치하도록 스타일을 지정했습니다. 호버에 화살표를 표시하는 기능이 있습니다. 슬라이더 내부 또는 외부에서 화살표를 설정하고 색상을 변경할 수 있습니다. 모듈 설정에서 크기를 변경할 수 없습니다.

이것은 Coverflow 효과를 사용합니다. 오버레이와 화살표를 표시하기 위해 왼쪽 슬라이드 위로 마우스를 가져갑니다.

이를 위해 슬라이드 중 하나에만 배경과 상자 그림자를 추가했습니다. 이것은 세일 중인 제품을 보여주거나 최고의 거래를 강조하는 데 사용할 수 있습니다.

여기서는 아이콘만 사용합니다. 모듈을 광고 모듈 세트 옆에 배치하고 6개의 소셜 미디어 링크를 설정했습니다. 그들은 광고 문구와 일치하도록 스타일이 지정됩니다. 아이콘을 클릭하면 소셜 네트워크가 열립니다. 1초마다 자동으로 슬라이드되도록 설정했습니다.

여러 슬라이드를 표시하면 아이콘의 일부가 잘려서 슬라이더가 움직일 때 좋은 시각적 효과를 얻을 수 있습니다.

이 예에서는 간단한 가격표 슬라이더를 만들고 싶었습니다. 골프 코스 레이아웃 팩에서 가격을 단순화했습니다.

이제 상자 그림자를 추가했습니다. 처음에는 세로 그림자가 슬라이드 아래로 내려가도록 할 수 없었습니다. 그런 다음 슬라이드가 모듈 컨테이너의 측면에 닿고 있다는 것을 깨달았습니다. 모듈 패딩을 추가한 다음 슬라이드의 모든 면에 상자 그림자를 추가할 수 있습니다.

각 슬라이드의 버튼, 이미지 및 콘텐츠 패딩을 개별적으로 조정할 수도 있습니다. 이 예에서는 왼쪽 슬라이드의 패딩을 조정합니다.

화살표를 추가하고 레이아웃의 요소와 일치하도록 스타일을 지정했습니다.

이 예에서는 이미지를 추가하고 상자 그림자를 변경했으며 상자 그림자가 완전히 표시되도록 콘텐츠 패딩을 조금 더 추가했습니다. 또한 화살표를 슬라이드 외부로 옮겼습니다.

이제 버튼을 추가했습니다. 색상, 테두리 반경, 텍스트 크기를 포함한 버튼 스타일을 조정하고 슬라이드와 일치하는 상자 그림자를 추가했습니다.

물론 모듈에는 콘텐츠 영역이 포함되어 있으므로 미디어를 포함하여 원하는 모든 유형의 콘텐츠를 추가할 수 있습니다. 레이아웃과 일치하는 이미지를 추가했습니다. 모든 내용은 제목 아래에 배치됩니다. 이 위치에서 이미지가 멋지게 보입니다.

다음은 골프 코스 레이아웃 내에서 모듈이 어떻게 보이는지 보여줍니다. 원래 레이아웃에는 많은 가격 책정 기능이 있었습니다. Divi Carousel Module을 사용하면 모든 가격이 그대로 유지되지만 슬라이드에 표시됩니다. 이 레이아웃에 속하는 것 같습니다.

Extra와도 잘 작동합니다. 이 예에서는 사이드바를 표시하지 않도록 페이지를 설정했습니다.

다음은 사이드바와 함께 표시되는 방식입니다(사이드바에 위젯을 추가하지 않았지만 크기는 동일함). 여기에서 모듈이 응답하는 것을 볼 수 있습니다.

Divi 캐러셀 모듈 가격

Divi Carousel Module은 개발자 웹사이트에서 다운로드할 수 있습니다. 두 가지 옵션을 사용할 수 있습니다.

• 단일 사이트 – $15
• 무제한 사이트 – $29

Divi 캐러셀 모듈 문서 및 지원

문서는 DiviGear 대시보드 메뉴에서 사용할 수 있습니다. 문서 탭을 선택합니다. 이것은 DiviGear YouTube 채널에서 4분 길이의 비디오 연습에 대한 링크를 제공합니다. 티켓 지원은 Freshdesk를 통해 제공됩니다.

마무리 생각

Divi Carousel Module은 Divi Builder에 회전 목마 슬라이더를 추가하는 쉬운 방법입니다. 직관적이고 실제로 내가 예상했던 것보다 더 많은 사용자 지정 기능이 있습니다. 슬라이드를 올바르게 복제할 수 없는 경우가 몇 번 있었지만 제 입장에서는 문제였을 수 있습니다. 각 슬라이드에 관리자 레이블을 지정해야 합니다. 그렇지 않으면 모듈 내 항목 이름이 표시되므로 구분하기 어렵습니다.

이미지, 콘텐츠, 버튼이 따로 있어서 좋아요. 이를 통해 카드, 광고 문구, 이미지, 텍스트, 아이콘 표시 또는 슬라이더에 표시해야 하는 모든 것을 만들 수 있습니다. 슬라이더 상단에 이미지를 추가하고 콘텐츠 영역에 더 많은 이미지를 추가할 수 있습니다.

Divi 회전 목마 모듈은 훌륭한 회전 목마 슬라이더입니다. 개발자 웹 사이트와 Divi 마켓플레이스에서 사용할 수 있습니다.

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

Anatolir / shutterstock.com을 통한 주요 이미지