Divi 플러그인 하이라이트 – Owl Carousel Pro

Divi Builder를 사용하여 캐러셀 내에 게시물, 프로젝트, 사용자 정의 게시물 유형 및 이미지를 표시하고 싶었던 적이 있습니까? 게시물과 이미지는 일반적으로 한 번에 하나의 게시물 또는 이미지를 표시하는 슬라이더 내에 표시되지만 한 번에 여러 게시물을 표시하는 실제 캐러셀을 원하면 어떻게 될까요? Owl Carousel Pro라는 플러그인을 사용하면 이 작업을 쉽게 수행할 수 있습니다.

Owl Carousel Pro는 Divi Builder에 두 개의 새로운 모듈을 추가하는 타사 플러그인입니다. 첫 번째는 프로젝트, 게시물 및 사용자 정의 게시물 유형과 같은 게시물 유형을 표시합니다. 두 번째는 이미지 캐러셀이 비주얼 편집기와 경쟁하여 원하는 모든 유형의 콘텐츠를 추가하는 것입니다.

사용 가능한 플러그인의 무료 버전이 있습니다. 다음과 같은 몇 가지 새로운 기능이 추가된 프로 버전을 살펴보고 있습니다.

• 사용자 정의 포스트 유형
• 사용자 정의 필드 표시
• 사용자 정의 쿼리
• 축소판 크기 변경
• 표시된 이미지 수 변경
• 라이트박스에서 이미지 열기

예제의 이미지는 Unsplash.com에서 가져왔습니다.

올빼미 회전 목마 프로 설치

정상적으로 플러그인을 업로드하고 활성화합니다. 그러면 Divi Builder에서 DP Owl Carousel과 DP Owl Image Carousel의 두 가지 새로운 모듈을 볼 수 있습니다. 모듈은 표준 Divi 모듈과 다른 색상으로 표시되어 눈에 잘 띄도록 도와줍니다. 이것은 타사 모듈을 더 쉽게 찾을 수 있게 해주기 때문에 선호합니다.

DP 올빼미 회전 목마

DP Owl Carousel은 게시물, 프로젝트 및 캐러셀 내 사용자 정의 게시물 유형을 표시합니다. 최근 10개의 게시물 또는 선택한 카테고리 또는 태그가 표시됩니다. 콘텐츠 탭에는 콘텐츠 및 요소에 대한 설정이 포함됩니다. 디자인 탭에는 텍스트, 포스트 제목 텍스트, 포스트 메타 텍스트, 포스트 발췌 텍스트, 사용자 정의 필드 텍스트, 간격, 화살표, 컨트롤 및 썸네일이 포함됩니다.

고급 탭에는 예상되는 CSS 설정이 포함되어 있지만 클릭 동작, 애니메이션(스크롤 타이밍 결정), 배경 및 가시성이 추가됩니다. 두 모듈의 배경색은 단색이므로 사용 가능한 그라디언트나 이미지가 없습니다. CSS를 사용하지 않으려면 일반적으로 고급 탭을 보지 않을 것이므로 콘텐츠 탭에 있을 것으로 예상했던 대로 이러한 설정을 놓쳤을 것입니다.

사용자 정의 쿼리(웹사이트에 제공된 예제)를 만들거나 모듈 내의 설정을 사용하여 표시되는 항목을 제어할 수 있습니다. 여기에는 게시물 수, 오프셋 번호, 사용자 정의 게시물 유형 이름, 범주, 포함할 태그 및 제외할 태그와 같은 표시를 제어하는 ​​여러 설정이 포함됩니다. 내 사용자 정의 게시물 유형을 자동으로 추가했습니다.

사용자 정의 쿼리는 PHP 코드 내에서 하위 테마에 추가됩니다(항상 상위 테마가 아닌 하위 테마에서 PHP를 변경하므로 테마가 업데이트될 때 변경 사항이 손실되지 않습니다). 개발자의 웹 사이트에는 몇 가지 예가 포함되어 있습니다.

참고 – 라이브 사이트에 코드를 추가하기 전에 항상 테스트 사이트에서 코드를 시도하십시오.

DP 올빼미 회전 목마의 예

이것은 표준 디자인입니다(눈에 띄도록 배경을 추가했습니다). 모든 카테고리에서 내 최근 10개의 게시물을 표시합니다. 페이지 내에서 어떻게 보이는지 보여주기 위해 Divi 헤더와 포스트 메타를 포함시켰습니다. 이미지를 클릭하면 해당 게시물로 이동합니다.

이것은 제목, 범주 및 날짜를 ​​추가합니다. 설정한 경우 사용자 정의 필드를 표시할 수도 있습니다.

이것은 기본 270자를 사용하여 제목과 게시물 발췌를 보여줍니다.

이 글에서는 발췌문을 70자로 설정했습니다.

여기서는 화살표와 컨트롤을 비활성화했습니다. 애니메이션은 여전히 ​​작동하지만 사용자는 슬라이드를 섞을 수 없습니다.

여기서는 글꼴 크기와 색상을 변경하고 화살표를 빨간색으로 만들고 컨트롤의 크기를 늘리고 보라색으로 만들고 축소판의 크기를 늘리고 여백을 0으로 줄이고 3개의 이미지를 표시하도록 설정했습니다. 컨트롤의 두 번째 색상은 내가 선택한 색상의 더 어두운 버전입니다. 두 번째 색상은 플러그인에서 제공합니다.

여기서는 모듈 자체에 배경을 추가하고 게시물 사이에 배경이 표시되도록 항목 여백을 변경했습니다. 글꼴 색상도 변경했고 이번에는 줄 높이와 간격을 조정했습니다. 한 화면에 4개의 게시물이 표시되며 썸네일 크기를 줄였습니다. 화살표를 크게 설정하고 컨트롤을 작게 설정했습니다.

썸네일 크기를 변경하면 표시되는 게시물 수에 맞게 조정됩니다. 따라서 이미지를 더 크게 하려면 표시되는 게시물 수를 수동으로 줄여야 합니다.

DP 올빼미 이미지 회전 목마

DP 올빼미 이미지 캐러셀은 캐러셀 내의 이미지를 표시합니다. 이미지를 추가하고 화살표와 컨트롤을 표시할 수 있습니다. 디자인 설정에는 텍스트, 이미지 제목 텍스트, 이미지 콘텐츠 텍스트, 간격, 화살표, 컨트롤 및 축소판이 포함됩니다. 고급 탭은 DP Owl Carousel 모듈과 동일합니다.

원하는 만큼 이미지를 추가하고 라이트박스에서 열 수 있으며 이미지 또는 원본 이미지의 잘린 버전을 사용하도록 할 수 있습니다. 작동 방식을 확인하기 위해 의도적으로 다양한 크기의 이미지를 선택했습니다.

이미지가 멋지게 표시됩니다. URL에 링크하거나 라이트박스에서 열 수 있다는 점이 마음에 듭니다. 이미지에 오버레이가 추가되는 것을 보고 싶습니다. 이렇게 하면 경험이 더욱 향상될 것입니다.

DP 올빼미 이미지 캐러셀 예

다음은 기본 설정을 사용하여 페이지에서 모듈이 표시되는 방식입니다. 눈에 띄도록 섹션에 배경을 추가했습니다.

이 예에서는 이미지에 제목과 텍스트를 추가했습니다. 또한 화살표와 컨트롤을 크게 설정하고 각각에 대해 색상을 변경했습니다.

이것은 4개의 이미지를 표시합니다. 이미지 크기를 늘리고 항목 여백을 8에서 4로 줄였습니다. 다음으로 글꼴, 화살표 및 컨트롤의 크기와 색상을 조정했습니다. 제목 글꼴의 간격을 늘렸습니다.

이것은 글꼴, 컨트롤 및 화살표에 대해 새로운 색상으로 어두운 배경을 사용합니다.

라이트박스에서 이미지를 열 때 이미지가 어떻게 보이는지 보여줍니다. 스크롤 애니메이션은 여전히 ​​백그라운드에서 작동합니다.

사용자 정의 게시물 유형

Owl Carousel Pro 모듈에서 사용자 정의 쿼리가 비활성화되었는지 확인하고(목록에서 카테고리를 선택하는 대신 사용자 정의 필터를 생성하려는 경우에만 사용됨) 사용자 정의 게시물 유형 이름에서 게시물 유형을 선택합니다. WooCommerce를 설치했고 이제 자동으로 Product를 옵션으로 갖게 되었습니다.

내 제품 카테고리 각각은 카테고리 목록에 자동으로 추가됩니다. 이제 아래로 스크롤하여 캐러셀에 표시할 제품을 선택할 수 있습니다.

제품이 표시되지만 가격을 표시하려면 사용자 정의 필드를 활성화하고 표시할 필드를 선택하고 원하는 통화 기호를 표시하는 레이블을 추가해야 합니다. 아래로 스크롤하여 사용자 정의 필드 표시를 활성화하십시오. 사용자 정의 필드 이름에 _price를 추가하고 사용자 정의 필드 레이블에 $를 추가합니다.

이제 내가 선택한 WooCommerce 카테고리를 보여주는 제품 캐러셀이 있습니다. 4개의 게시물을 표시하도록 선택하고 이미지 크기를 늘리고 제목, 메타 및 사용자 정의 필드의 글꼴 색상을 변경하고 제목 및 사용자 정의 필드의 글꼴 크기를 늘렸습니다. 이 예에서는 메타에 대한 날짜만 표시하고 있지만 일반 게시물과 마찬가지로 메타 정보와 발췌 부분을 표시할 수 있습니다.

Extra 및 Divi Builder 플러그인과 함께 Owl Carousel Pro 사용

Owl Carousel Pro는 Extra에서도 잘 작동합니다. 이미지 캐러셀입니다.

Twenty Seventeen WordPress 테마에 Divi Builder 플러그인이 설치된 플러그인을 살펴보겠습니다. 이것은 내 WooCommerce 제품을 표시합니다.

특허

플러그인은 귀하와 귀하의 고객을 위해 무제한 웹사이트에서 사용할 수 있습니다. 여기에는 1년의 업데이트 및 지원이 포함됩니다.

마지막 생각들

Owl Carousel Pro는 Divi Builder에 두 개의 멋진 모듈을 추가하여 사용자 정의 가능한 회전 목마 내에서 게시물, 프로젝트, 사용자 지정 게시물 유형 및 이미지를 표시할 수 있습니다. 예상되는 대부분의 Divi 모듈 사용자 정의와 디스플레이를 제어하는 ​​몇 가지 새로운 기능이 포함되어 있습니다.

거의 모든 기능과 설정이 직관적이라는 것을 알았습니다. 일반 사용자에게 사용자 정의 필터가 혼란스럽다는 것을 알았습니다. 이 플러그인의 방대한 기능을 보여주기 위해 필터를 만드는 몇 가지 완전한 예를 보고 싶습니다. 코드를 다루고 싶지 않더라도 프로 버전은 고려할 가치가 있는 충분한 기능을 추가합니다.

여러분의 의견을 듣고 싶습니다. Own Carousel Pro를 사용해 보셨습니까? 의견에 귀하의 경험에 대해 알려주십시오.

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