Divi 플러그인 하이라이트 – 모든 슬라이더

게시 됨: 2017-06-18

표준 Divi 슬라이더 모듈은 강력한 슬라이더입니다. 기능에는 제목, 버튼, 텍스트, 미디어, 링크, 배경, 오버레이 등이 포함됩니다. Divi Builder로 레이아웃을 만들고 슬라이드 안에 배치하고 싶다면 어떻게 하시겠습니까? 이것이 바로 Everything Slider가 하는 일입니다.

모든 슬라이더는 슬라이드 내에서 Divi 레이아웃을 사용할 수 있게 해주는 CakeWP의 타사 플러그인입니다. 슬라이더보다 더 많은 작업을 수행할 수 있습니다. 여기에는 슬라이더 모듈과 함께 사용하여 다음을 생성할 수 있는 AS 메뉴 모듈도 포함됩니다.

  • 탭
  • 캐러셀
  • 대화형 섹션
  • 가격 전환
  • 필터링 가능한 갤러리
  • 양방향 CTA
  • 필터링 가능한 제품
  • 웹페이지

모든 슬라이더는 Divi, Extra 및 Divi Builder 플러그인과 함께 작동합니다. 이 플러그인 하이라이트에서 슬라이더가 무엇을 할 수 있는지 살펴보겠습니다. 이미지는 Unsplash.com에서 가져왔습니다.

  • 구매 정보는 CakeWP.com을 참조하십시오.

모든 슬라이더 설치

프리미엄 플러그인과 마찬가지로 플러그인을 업로드하고 활성화하십시오. 활성화되면 대시보드의 플러그인 메뉴 위로 마우스를 가져간 다음 모든 슬라이더 라이선스를 선택합니다. 라이선스 키를 입력하고 라이선스 활성화를 선택합니다. 다음으로 변경 사항 저장을 선택합니다.

Divi Builder에 두 개의 새로운 모듈이 추가되었습니다: Everything 슬라이더와 AS 메뉴. 그들은 함께 몇 가지 흥미로운 디자인을 만들 수 있습니다.

모든 슬라이더 모듈 설정

설정에는 새 슬라이드, 다음/이전 컨트롤, 점 컨트롤, 호버 시 컨트롤 표시, 루프 슬라이더, 애니메이션, 높이, 마우스 끌기 등이 포함됩니다. 디자인 탭에는 다음 및 이전 컨트롤에 대한 사용자 정의 스타일, 화면당 슬라이드 수, 사이의 여백이 포함됩니다. 슬라이드, 점 색상 등.

모든 것 슬라이더 슬라이드 설정

새 슬라이드 추가를 클릭합니다. 여기에서 슬라이드 레이아웃을 선택할 수 있는 슬라이드 레이아웃이라는 드롭다운이 표시됩니다. 미리 만들어진 레이아웃, 라이브러리에 빌드하여 저장한 레이아웃 또는 업로드한 레이아웃일 수 있습니다.

AS 메뉴 슬라이더 모듈 설정

설정에는 메뉴 방향, 정렬 등이 포함됩니다. 디자인 탭에는 글꼴, 간격, 배경, 색상 등이 포함됩니다. 새 메뉴 항목 추가를 클릭하여 메뉴 항목을 만듭니다. URL을 붙여넣고 아이콘을 선택하고 이미지를 선택하는 등의 작업을 수행합니다.

모든 슬라이더 스타터 키트

모든 것 Slider는 레이아웃을 사용하여 슬라이드를 만듭니다. 시작하는 데 도움이 되도록 개발자 웹 사이트에서 다운로드할 수 있는 무료 스타터 키트와 레이아웃 팩이 많이 있습니다. Divi 라이브러리로 가져와서 사용하세요.

사용자 정의 슬라이더 만들기

나만의 레이아웃을 몇 개 만들고 각 레이아웃을 슬라이드로 선택했습니다. 원하는 만큼 슬라이드를 추가할 수 있습니다. 변경하려는 경우 어떤 슬라이드가 어떤 슬라이드인지 알 수 있도록 레이블을 지정하는 것이 가장 좋습니다.

이 슬라이드에는 이미지와 바 카운터가 포함되어 있습니다. 왼쪽 모서리에서 점 탐색을 볼 수 있고 양쪽에서 슬라이더 컨트롤을 볼 수 있습니다. 이 예에서 내 마우스는 왼쪽 탐색 버튼 위에 있습니다. 모든 스타일은 사용자 정의가 가능합니다.

애니메이션

슬라이드에 애니메이션을 적용할 수 있으며 자동으로 슬라이드하거나 하지 않도록 설정할 수 있습니다. 인앤아웃에 대한 애니메이션이 포함되어 있습니다. 바운스, 고무 밴드, 젤로, 펄스, 쉐이크, 타다, 워블, 스윙, 페이드, 플립, 회전, 확대/축소 등과 같은 모든 기본 사항을 포함하여 거의 80개의 애니메이션이 있습니다. 호버에서 애니메이션이 중지되도록 할 수 있습니다.

탐색 버튼

탐색 버튼은 독립적으로 스타일을 지정할 수 있습니다. 아이콘, 테두리, 색상 등에 대해 일반 스타일과 마우스 오버 스타일을 모두 지정합니다.

이 예에서는 탐색 버튼의 스타일을 독립적으로 지정하고 점의 크기를 늘렸습니다(점에 대해 원하는 크기를 픽셀 단위로 지정할 수 있음). 호버 애니메이션은 색상과 테두리 반경을 변경합니다. 대부분의 Divi 모듈과 동일한 스타일 기능을 포함합니다.

버튼과 점은 상단에 버튼, 하단에 점이 있는 오른쪽으로 이동되었습니다. 양쪽에 배치하거나 왼쪽, 중앙 또는 오른쪽에 위 또는 아래에 배치할 수 있습니다. 원하는 경우 각각을 끌 수도 있습니다. 버튼과 점 사이에는 레이아웃 옵션에 대한 많은 조합이 있습니다.

AS 메뉴 모듈

AS 메뉴 모듈은 더 많은 탐색 옵션을 추가하는 데 적합하며 아이콘과 이미지를 사용할 수 있습니다. 수평 및 수직 방향 옵션이 포함되어 있으며 다른 모듈과 마찬가지로 스타일을 지정할 수 있습니다.

AS 메뉴 모듈은 방문자가 슬라이드를 탐색할 수 있도록 메뉴를 만듭니다. 슬라이드 자체에는 URL 끝에(브라우저의 주소 표시줄에 있는) 탐색 태그가 포함되어 있습니다. 각 메뉴 항목에 이 태그를 사용하십시오. 이 예에서 슬라이드 1의 URL 태그는 #s_1입니다.

메뉴를 맨 아래에 배치하고, 글꼴 크기를 늘리고, 배경을 추가하여 눈에 띄도록 했습니다. 단어는 클릭할 수 있지만 이 예에서는 버튼처럼 보이지 않습니다. 변경하기 쉽습니다.

사용자 지정 패딩을 추가하고 호버 및 배경 색상을 조정했습니다.

또한 슬라이더에서 탐색 버튼을 제거하고 AS 메뉴 모듈을 상단에 배치했습니다. 메뉴가 가로 방향으로 표시됩니다. 배경색이 있는 패딩은 텍스트 주위에 상자를 만듭니다. 패딩을 사용하면 버튼을 원하는 만큼 크게 만들 수 있습니다.

레이아웃을 2열(3/4 + 1/4)로 조정하고 메뉴 방향을 세로로 배치했습니다.

측면의 메뉴는 특히 모듈의 이미지와 아이콘 기능을 고려할 때 몇 가지 흥미로운 가능성을 만듭니다. 이것으로 무엇을 할 수 있는지 봅시다.

고유한 페이지 만들기

슬라이더를 사용하여 전체 페이지를 만든 다음 버튼 및 점 탐색 또는 메뉴 모듈을 사용하여 페이지 사이를 자동으로 슬라이드할 수 있습니다. 이 예에서는 왼쪽의 1/4에 AS 메뉴 모듈이 있고 오른쪽의 3/4에 모든 슬라이더가 있는 새 전체 너비 페이지를 만들었습니다. 웹사이트를 한 눈에 시각적으로 설명할 수 있도록 오버레이가 있는 섹션에 배경 이미지를 추가했습니다.

이 예에서는 AS 메뉴 모듈의 이미지 기능을 사용하고 싶었습니다. 이 메뉴의 경우 각 메뉴 항목에 대한 이미지를 추가하고 있습니다. 이미지와 함께 사용하거나 단독으로 사용할 수 있는 아이콘도 포함되어 있습니다.

슬라이드의 경우 단일 카테고리가 선택된 단일 블로그 모듈로 레이아웃을 만들었습니다.

AS Slider 모듈은 모든 블로그 레이아웃을 개별 슬라이드로 표시합니다. 다음/이전 및 점 컨트롤을 껐습니다.

슬라이더는 각 카테고리에 대한 블로그 모듈을 표시하고 세로 방향으로 설정된 왼쪽 메뉴는 카테고리에 대한 이미지를 표시하고 슬라이드 사이의 탐색으로 작동합니다. 슬라이더는 각 카테고리의 최신 게시물을 표시하기 위해 슬라이드를 회전하도록 설정되어 있습니다. 즉, 탐색을 제외한 전체 홈페이지가 슬라이더입니다. 물론 메뉴는 위, 아래 또는 오른쪽에 배치할 수도 있습니다.

모든 슬라이더 문서

문서는 CakeWP 웹사이트에서 제공되며 시작하기 가이드 및 튜토리얼을 포함하여 이미지와 여러 비디오가 포함된 개요를 포함합니다. 또한 모듈 사용 방법에 대한 아이디어를 제공하는 데 도움이 되는 데모도 포함되어 있습니다.

라이선스, 지원 및 업데이트

플러그인은 선택한 라이선스에 따라 귀하와 귀하의 클라이언트를 위해 웹사이트에서 사용할 수 있습니다. 다음 세 가지 라이선스 중에서 선택할 수 있습니다.

  • 1개 사이트 – $30.00
  • 5개 사이트 – $50.00
  • 무제한 사이트 – $120.00

모든 라이선스에는 1년의 지원 및 업데이트가 포함됩니다.

  • 구매 정보는 CakeWP.com을 참조하십시오.

마지막 생각들

모든 슬라이더는 흥미로운 모듈입니다. Divi 레이아웃을 슬라이드로 사용하는 기능은 많은 디자인 가능성을 열어줍니다. 특히 메뉴 모듈에서 이미지를 사용하는 것을 좋아합니다. 모듈은 사용하기 쉽고 설명서는 시작하기 위한 단계별 지침을 제공합니다.

표준 Divi 슬라이더 이상으로 슬라이더를 확장하는 데 관심이 있다면 모든 슬라이더가 원하는 플러그인일 수 있습니다.

여러분의 의견을 듣고 싶습니다. 아무거나 슬라이더를 사용해 보셨습니까? 의견에 귀하의 경험에 대해 알려주십시오.

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