Divi 플러그인 하이라이트: DP 평가 슬라이더

게시 됨: 2018-12-17

평가는 비즈니스 웹사이트의 가장 중요한 요소 중 하나입니다. 평가 모듈, 광고 문구 모듈, 텍스트와 이미지의 조합 등을 포함하여 Divi로 우아한 평가를 작성하는 여러 방법이 있습니다. 또 다른 옵션은 DP Testimonials Slider와 같은 평가 관리 및 내장 레이아웃을 제공하는 타사 플러그인을 사용하는 것입니다.

DP 후기 슬라이더는 jvt_testimonials라는 새로운 사용자 정의 게시물 유형을 생성합니다. 그것은 당신이 편집기에서 당신의 평가를 생성하고 그 평가를 표시하는 세 가지 모듈을 제공합니다. 모든 평가를 표시하도록 선택하고, 표시되는 수를 제한하고, 특정 카테고리를 표시할 수 있습니다. 각 모듈에는 선택할 수 있는 여러 레이아웃이 포함되어 있으며 스타일을 지정할 수 있습니다.

플러그인을 살펴보자.

DP 추천사

Testimonials 라는 대시보드에 새 메뉴 항목이 추가되었습니다. 그것을 클릭하면 당신이 만든 평가 목록이 표시됩니다.

평가 추가를 선택 하면 평가 를 작성할 수 있는 편집기가 표시됩니다. 콘텐츠, 카테고리, 이미지, 추천 정보가 포함됩니다. 이것은 Gutenberg 또는 Classic Editor를 사용하는지 여부에 관계없이 얻을 수 있는 편집기입니다.

추천 카테고리 는 게시물 카테고리처럼 작동합니다. 여기에서 생성하고 편집할 수 있습니다.

DP 회원 평가 슬라이더 모듈

세 가지 모듈이 Divi Builder에 추가되었습니다.

DP 회원 평가 그리드 보기

DP 고객 평가 그리드 보기 에는 3가지 옵션 중에서 레이아웃을 선택하고, 견적 아이콘을 표시하고, 표시하고 스타일을 지정하고, 이미지를 표시하고, 인용 링크를 표시하고, 카테고리를 선택하고, 페이지 매김 색상, 링크를 표시하는 평가의 수를 설정하는 설정이 포함되어 있습니다. , 등.

여기에는 표준 디자인 및 고급 설정도 포함됩니다. CSS를 사용하면 이름, 회사 이름 및 설명을 타겟팅할 수 있습니다. 각 모듈에는 이러한 설정이 포함되어 있습니다.

DP 회원 평가 목록 보기

DP 평가 목록 보기 에는 2개의 레이아웃이 포함되어 있으며 평가 기준, 제목 또는 임의의 연령별로 정렬할 수 있는 정렬 기준 옵션이 추가되었습니다.

DP 평가 슬라이더

DP Testimonial Slider 는 56개의 레이아웃을 포함하고 슬라이더 컨트롤을 추가합니다. 여기에는 정렬 기준, 자동 재생, 속도, 페이지 매김, 마우스 호버 시 슬라이딩 중지 및 콘텐츠 제한 표시가 포함됩니다.

DP 사용후기 그리드 보기 예

3개의 후기를 보여주는 Layout 1입니다. 동그라미 이미지를 만들고 그림자 효과가 있는 카드에 각 평가를 표시합니다. 다른 모든 것은 기본 설정으로 두었습니다.

이 예에서는 레이아웃 2에서 작업하고 있습니다. 그라디언트가 있는 배경을 추가합니다. 이것을 기본값으로 두고 텍스트 색상, 크기, 두께, 아이콘 색상을 조정했습니다. 나는 또한 임의의 순서로 평가를 표시하도록 설정했습니다.

게시된 보기에서 이미지는 원형이며 평가가 포함된 상자와 겹칩니다. 여기에서 볼 수 있는 것처럼 이미지 위로 마우스를 가져가면 이미지가 회전합니다.

DP 추천사 목록 보기 예

List View 용 Layout 1입니다. 나는 그들의 기본 설정에 모든 것을 남겨두었습니다.

레이아웃 2는 이미지의 크기를 줄이고 두 개의 원형 모서리가 있는 우아한 상자 디자인을 추가합니다. 호버링 시 그림자 효과를 보여줍니다.

DP 회원 평가 슬라이더 예

슬라이더의 경우 Classic Divi Builder를 사용해야 했습니다. 다른 두 모듈과 달리 이 모듈은 New Divi Builder 또는 Visual Builder를 사용할 때 나타나지 않습니다. 54개의 레이아웃이 있습니다. 전체를 보는 대신 몇 가지만 살펴보겠습니다.

이것은 레이아웃 1입니다. 원 이미지를 생성하고 슬라이드에 대한 탐색을 포함하지 않습니다. 총알 색상을 조정할 수 있습니다.

이것은 Layout 2입니다. 배경과 구분되도록 상자 그림자를 추가하고 텍스트를 50자로 제한했습니다. 스타일은 기본입니다.

이것은 Layout 3입니다. 이미지를 제거합니다. 이전 예제에서 상자 그림자와 문자 제한을 포함했습니다.

기본 설정을 사용하는 레이아웃 4입니다. 스타일링으로 무엇을 할 수 있는지 알아보겠습니다.

레이아웃을 선택하면 해당 레이아웃의 스타일 옵션이 색상 설정에 표시됩니다. 다른 레이아웃을 선택하고 설정을 조정한 다음 원하는 레이아웃으로 돌아가도 설정이 그대로 유지됩니다.

색상이 조금 더 눈에 띄도록 배경을 추가했습니다.

이것은 레이아웃 5입니다. 섹션에 약간 회색 배경을 추가하고 슬라이더가 해당 배경을 사용합니다.

이것은 Layout 6입니다. 슬라이드당 2개의 사용후기를 보여줍니다.

이것은 레이아웃 7입니다. 전체 평가 텍스트를 보여주고 있습니다. 나는 평가 상자와 겹치는 이미지를 좋아합니다.

레이아웃 8입니다. 이 디자인이 마음에 듭니다.

이것은 레이아웃 9입니다. 레이아웃이 8과 비슷하지만 고유한 디자인 대기열이 있습니다.

이것은 레이아웃 10입니다. 작성자 주위에 멋진 상자를 만들고 두 세트의 따옴표를 추가합니다.

이 세트의 경우 2열 레이아웃을 사용하여 2개의 모듈을 표시합니다. 왼쪽은 레이아웃 11이고 오른쪽은 레이아웃 12입니다. 레이아웃 11은 표준 스타일 탐색을 추가합니다.

이것은 레이아웃 14입니다. 여기에는 게시물 탐색 버튼도 포함됩니다.

다음은 왼쪽에 레이아웃 53이 있고 오른쪽에 레이아웃 54가 있는 또 다른 2열 레이아웃입니다. 레이아웃 54에는 슬라이더에 대한 흥미로운 애니메이션이 있습니다. 슬라이드가 축소되고 다른 슬라이드가 제자리에 오는 동안 빠르게 옆으로 이동하고 새 슬라이드가 공간을 채우도록 커집니다.

Layout 55입니다. 모서리 스타일을 추가하고 이름에 대한 배너를 만듭니다. 나는 색의 사용을 좋아한다. 여기에는 Layout 54와 동일한 애니메이션이 포함되어 있습니다.

이것은 Layout 56입니다. 이미지를 제거하고 이름에 대한 배너가 있는 멋진 상자를 만듭니다.

칼데라 양식 통합

게시자의 사이트에는 Caldera Forms가 평가 제출 양식을 만드는 템플릿이 포함되어 있습니다. 다운로드 가능한 설명서에 포함되어 있으며 사용 지침이 포함되어 있습니다.

이 양식을 사용하면 누구나 양식을 통해 평가를 제출할 수 있으며 검토할 수 있도록 초안으로 저장됩니다. 또한 모든 정보가 포함된 이메일을 관리자에게 보냅니다.

라이선스 및 문서

DP Testimonials Slider는 개발자 웹사이트에서 다운로드할 수 있습니다. 다음 세 가지 라이선스를 사용할 수 있습니다.

  • 1개 사이트 – $30
  • 5개 사이트 – $40
  • 무제한 사이트 – $50

설명서는 플러그인의 판매 페이지에서 다운로드 가능한 파일로 제공됩니다. 여기에는 플러그인 사용 연습, Caldera Forms와 함께 사용하기 위한 지침 및 Caldera Forms 템플릿이 포함되어 있습니다.

마무리 생각

DP 후기 슬라이더는 우아한 후기를 만듭니다. 평가를 작성하고 세 가지 모듈을 사용하는 것은 직관적입니다. 그리드 및 목록 보기 모듈은 새 백엔드 편집기에서 훌륭하게 작동했습니다. 슬라이더 모듈의 경우 클래식 빌더를 사용해야 했습니다. 세 가지 플러그인 모두 클래식 빌더에서 훌륭하게 작동하므로 액세스할 수 있는 경우 프론트엔드 기능이 슬라이더 모듈에 추가될 때까지 이 플러그인을 사용하는 것이 좋습니다.

Caldera Forms 템플릿을 사용하는 것조차 사실상 수월했습니다. 방금 JSON 파일을 가져왔고 첫 번째 시도에서 작동했습니다.

내가 가진 유일한 문제는 모듈에 표시할 배경을 얻는 것이었습니다. 문제없이 사용후기와 함께 표시되는 섹션 및 행 배경. 또한, 평가 내에서 소셜 링크가 어디에 사용될지 명확하지 않았습니다. 또한 게시자 웹사이트의 데모에는 표시되지 않습니다.

슬라이더 모듈의 레이아웃 수에 깊은 인상을 받았습니다. 나는 또한 그들의 애니메이션을 좋아합니다. 많은 슬라이드가 측면에서 있지만 위에서 아래로, 축소, 확대 등을 포함하여 다른 많은 슬라이딩 애니메이션이 있습니다. 다음 업데이트에서는 위젯과 단축 코드를 추가할 예정입니다.

평가를 관리하고 모듈로 표시하는 데 관심이 있다면 DP 평가 슬라이더를 살펴보는 것이 좋습니다.

우리는 당신의 의견을 듣고 싶습니다. DP 추천사 슬라이더를 사용해 보셨습니까? 의견에 귀하의 경험에 대해 알려주십시오.

Blan-k/Shutterstock.com을 통한 추천 이미지