Divi 5의 그룹 회전식 모듈에 대해 알아야 할 모든 것

Divi 5의 최신 모듈 중 하나 인 Group Carousel은 Divi 웹 사이트의 시각적으로 멋진 회전 목마 및 애니메이션을 쉽게 만들 수 있도록 여기에 있습니다. 이 강력한 추가 기능을 통해 웹 디자이너는 타사 플러그인이나 맞춤형 CSS없이 매력적인 웹 사이트 회전 목마를 만들 수 있습니다. 세련된 포트폴리오, 전자 상거래 상점 또는 블로그를 구축하든 그룹 캐 러셀 모듈은 새로운 수준의 창의성을 해제합니다.

이 게시물에서는 그룹 회전식 모듈에 대해 알아야 할 모든 것을 다루며 예제 및 사용 방법에 대한 단계별 안내서가 있습니다. 다이빙하자!

그룹 회전식 모듈은 무엇입니까?

Divi 5의 그룹 캐 러셀 모듈을 사용하면 웹 사이트에 약간의 움직임과 상호 작용을 추가 할 수있는 동적, 시선을 사로 잡는 회전 목마와 슬라이더를 만들 수 있습니다. 포트폴리오 조각, 팀원 또는 제품을 선보이든이 다재다능한 모듈을 사용하면 컨텐츠를 동적으로 끌어 올리는 게시물 기반 모듈을 포함하여 거의 모든 유형의 회전 목마를 구축 할 수 있습니다.

각 슬라이드는 빈 캔버스로 디바이 모듈을 추가 할 수 있으므로 창의적이고 기능적인 디자인을위한 훌륭한 도구입니다.

주요 기능

이 그룹 캐 러셀 모듈은 Divi 5의 최적화 된 기초에 구축되어 빠른로드 시간과 부드러운 전환을 보장합니다. Divi 5의 드래그 앤 드롭 인터페이스를 사용하면 데스크탑, 태블릿 및 모바일의 미세 조정 레이아웃을위한 반응 형 컨트롤을 사용하여 빠른 성능을 유지하면서 슬라이더에 모듈을 쉽게 추가 할 수 있습니다.

사용자 정의 가능한 슬라이드

그룹 캐 러셀 모듈은 슬라이더 수, 콘텐츠 및 애니메이션 설정을 완전히 제어 할 수 있습니다. 슬라이드 전환, 타이밍 및 내비게이션 옵션을 조정하여 비전과 일치하는 원활한 사용자 경험을 만들 수 있습니다.

루프 빌더가있는 동적 콘텐츠

Divi 5의 루프 빌더와 통합 된이 모듈은 게시물, 용어 또는 사용자 데이터를 기반으로 동적 회전식을 지원합니다. 예를 들어, 사용자 정의 게시물 유형 및 ACF (Advanced Custom Fields)를 사용하여 증언 회전 목마를 만들 수 있으며 수동 업데이트없이 클라이언트 리뷰 또는 사례 연구를 자동으로 당기는 것입니다.

설계 유연성

Divi 5의 디자인 설정을 활용하여 독특한 회전식 스타일을 구축 할 수 있습니다. 슬라이드에 변환, 필터, 박스 그림자 또는 호버 효과를 적용하고 그룹 내의 개별 모듈을 사용자 정의하여 방문자가 참여하도록 시각적으로 매력적인 슬라이드를 만듭니다.

그룹 회전식 모듈 사용 방법

Divi 5에서 그룹 회전 목마를 설정하는 것은 직관적이고 유연합니다. 페이지에 단일 열을 추가하여 시작하십시오. 그런 다음 Visual Builder에서 그룹 회전 목마 모듈을 선택하여 페이지에 추가하십시오.

컨텐츠 탭에서 클릭하여 회전식 설정 드롭 다운 메뉴를 확장하십시오.

자동 회전 , 중앙 모드를 활성화하고 슬라이드를 3 으로 표시하도록 설정하십시오.

요소 드롭 다운 메뉴에서 도트 내비게이션 표시를 활성화하십시오. 쇼 화살표를 활성화하거나 비활성화 할 수 있습니다.

첫 번째 그룹에 스타일링을 할당하십시오

회전 목마 설정을 마련하면 첫 번째 그룹을 추가 할 수 있습니다. 그룹 설정 아이콘을 클릭하여 설정을 나타냅니다.

컨텐츠 탭 에서 배경 드롭 다운 메뉴를 확장하십시오. 배경 이미지 탭을 클릭 한 다음 배경 이미지 +를 클릭하여 그룹에 이미지를 추가하십시오.

다음으로 디자인 탭 으로 이동하십시오. 레이아웃 드롭 다운 메뉴를 확장하고 정당화 내용을 종료 하도록 설정하십시오.

다음으로 간격 드롭 다운 메뉴를 확장하고 그룹의 왼쪽과 오른쪽에 5% 마진을 추가하십시오. 이것은 회전 목마의 그룹 사이에 호흡 공간을 추가합니다.

상단 패딩을 100%로 설정하십시오. 왼쪽과 오른쪽에 25px 패딩을 바릅니다.

첫 번째 그룹에 콘텐츠를 추가하십시오

우리는 그룹에 콘텐츠를 추가하는 데주의를 기울일 수 있습니다. Black + 아이콘을 클릭하고 분배기 모듈을 추가하십시오.

디자인 탭 으로 이동하십시오. 라인 드롭 다운 메뉴를 확장하고 색상을 #ffffff 로 변경하십시오.

다음으로 크기 탭을 확장하십시오. 분배기 중량을 4px 로, 너비를 15% 로 설정하십시오.

다음으로 그룹에 제목 모듈을 추가하십시오. 제목 에 제목을 줘.

디자인 탭 으로 전환하십시오. 제목 텍스트 아래에서 제목 레벨을 H2 (또는 원하는 다른 제목) 로 설정하고 제목 글꼴을 위해 Inter를 선택하고 글꼴 무게의 빛 , 제목 텍스트 색상 의 #ffffff 및 제목 텍스트 크기 의 경우 2em을 선택하십시오.

우리 그룹을 복제하기 전에 설계 탭으로 돌아가서 수직 간격을 10px로 조정합시다. 이렇게하면 모듈 사이의 불필요한 수직 공간이 제거됩니다.

추가 그룹 추가

첫 번째 그룹이 설계되었으므로 스타일 그룹을 복사하고 회전 목마를 위해 콘텐츠 (배경 이미지 및 제목)를 간단히 교체 할 수 있습니다. 그룹을 8 번 복제하면 총 9 개의 슬라이드가 있습니다.

그룹을 복제 한 후 그룹 회전 목마는 다음과 같아야합니다.

우리가 여기있는 동안 각 그룹에 고유 한 이름을 부여하여 쉽게 식별 할 수 있습니다. 첫 번째 그룹 설정 아이콘을 클릭하고 아래로 스크롤하여 admin 레이블 로 스크롤하십시오. 그룹 그리스 그룹의 이름을 지정하십시오.

회전 목마의 두 번째 그룹을 클릭하십시오. 배경 탭을 확장하고 이미지를 새 이미지로 바꾸십시오.

컨텐츠 탭 에있는 동안 관리자 레이블 필드에 이름을 추가하는 것을 잊지 마십시오. 다음으로 제목 모듈 제목을 메인 으로 변경하십시오.

모든 추가 그룹으로 단계를 반복하십시오. 완료되면 회전 목마가 이렇게 보일 것입니다. Visual Builder에있는 동안 탐색 도트를 사용하여 회전 목마를 스크롤하여 단계를 놓치지 않도록 할 수 있습니다.

보시다시피, 일부 슬라이드의 텍스트는 읽기가 다소 어렵습니다. 각 그룹 항목을 개별적으로 편집하지 않고도 회전식 레벨의 디자인 탭에서이를 수정할 수 있습니다.

그룹 및 활성 그룹 사용자 정의

그룹 회전식 모듈에서는 활성 및 비활성 그룹을 스타일링 할 수 있습니다. 핵심은 그룹 회전식 모듈 자체가 빈 캔버스 역할을하며 그 안의 모듈 그룹에 스타일을 적용한다는 것입니다. 이를 통해 높은 수준의 사용자 정의가 가능하여 고유 한 레이아웃과 효과를 만들 수 있습니다.

이제 그룹 회전 목마를 만들었으므로 기본 회전식 설정의 디자인 탭 으로 이동하십시오.

그룹 드롭 다운 메뉴를 확장하십시오. 이 탭은 그룹 회전식에 포함 된 모듈 그룹의 설계 설정을 제어합니다. 여기에 적용하는 모든 설정은 비활성 그룹 모듈에 적용됩니다.

배경 탭을 확장하십시오. 텍스트가 읽을 수 있도록 비활성 탭에 가벼운 구배를 적용합니다. 첫 번째 그라디언트 중지를 0% 불투명도 로 #000000 으로 설정하십시오. 슬라이더를 오른쪽으로 약간 조정하십시오. 배경 이미지 토글 위의 장소 구배를 활성화하십시오.

40% 불투명도 로 2 차 그라디언트 스톱을 #000000 으로 설정하십시오.

배경 이미지 토글 위의 장소 구배를 활성화하십시오.

다음으로 필터 탭을 찾으십시오. 우리는 비활성 그룹의 채도를 줄여 배경 이미지에 흑백 효과를 제공합니다. 포화 슬라이더를 찾아 0 으로 설정하십시오.

다음으로 활성 그룹 드롭 다운 메뉴를 확장하고 백그라운드 탭을 클릭하십시오. 위와 동일한 그라디언트 설정을 적용하십시오.

배경 이미지 토글 위의 장소 그라디언트를 활성화 하십시오.

활성 그룹 에서 필터 드롭 다운 메뉴를 확장하고 포화 슬라이더를 75% 로 조정하십시오. 이렇게하면 활성 회전식 항목 만 채색하여 사용자가 회전 목마의 활성 슬라이드를 식별 할 수 있습니다.

반응 형 레이아웃을 사용자 정의합니다

우리 그룹 회전 목마가 데스크톱에 준비가되었으므로 Divi 5의 사용자 정의 가능한 반응 형 중단 점을 사용하여 모바일 버전의 회전식 버전을 스타일링 할 것입니다. 기본적으로 Divi 5는 세 가지 중단 점을 활성화합니다. 다양한 장치 크기를 더 많이 제어하려면 사용 가능한 7 가지 중단 점을 모두 사용할 수 있습니다. 시각적 빌더의 상단 막대 중간에있는 Ellipsis 메뉴를 클릭하십시오.

원하는 중단 점을 활성화하고 저장을 클릭하여 계속하십시오.

태블릿 브레이크 포인트 를 클릭하여 레이아웃이 태블릿 장치에서 어떻게 보이는지보십시오. 회전 목마 설정 으로 스크롤하고 슬라이드를 조정하여 1 으로 표시하십시오 . 이것은 전화 전체 및 전화 와 같은 작은 중단 점에도 적용됩니다.

마지막으로 화면 왼쪽 상단의 미리보기 버튼을 클릭하여 새 탭에서 그룹 회전 목마를 볼 수 있습니다.

완료되면 그룹 회전 목마는 아래 비디오와 비슷해 보일 것입니다.

그게 다야! Divi 5에서 그룹 회전 목마를 구축하는 것은 간단하며 놀라운 결과를 제공합니다.

Divi 5의 루프 빌더와의 통합

Divi 5의 루프 빌더는 그룹 모듈을 동적 컨텐츠 디스플레이로 전환 할 수있는 강력한 기능입니다. 이 기능을 통해 디자이너는 WordPress에서 컨텐츠를 직접 끌어 당기는 동적 인 자동 회전 목마를 생성하여 정적 콘텐츠를 제품 디스플레이, 카테고리 아카이브 또는 몇 번의 클릭으로 팀 멤버로 변환 할 수 있습니다.

Divi 5는 루프 빌더를 그룹 회전 목마와 통합함으로써 사용자가 최소한의 수동 작업으로 정교한 컨텐츠 중심의 회전 목마를 만들 수 있도록하여 동적 웹 디자인의 눈에 띄는 기능이됩니다.

루프 빌더를 사용하면 그룹 회전 목마가 게시물, 용어 또는 사용자 데이터를 통해 동적으로 루프 할 수 있으므로 사이트의 최신 컨텐츠를 자동으로 반영하는 회전 목마를 만듭니다. 루프 빌더는 WordPress 데이터베이스에서 직접 데이터를 가져 오므로 블로그 게시물, 제품 카테고리 또는 사용자 프로필을 쉽게 표시 할 수 있습니다.

예를 들어, WooCommerce 용어를 사용하여 게시물 유형 또는 제품 카테고리 슬라이더를 사용하여 블로그 게시물 회전 목마를 만들 수있어 동적 콘텐츠 요구에 대해 모듈을 엄청나게 다재다능하게 만듭니다.

그룹 회전식 모듈의 실제 예

그룹 캐 러셀 모듈의 유연성은 다양한 사용 사례에 적합합니다. 다음은 가능한 것이 무엇인지 보여주는 몇 가지 실제 사례입니다.

맞춤형 전체 너비 / 전체 화면 슬라이더

이 예에서는 아이스크림 가게를위한 쉐이크를 특징으로하는 전폭/풀 스크린 슬라이더를 만들었습니다. 회전 목마를 한 번에 하나의 슬라이드 씩 표시하도록 설정했으며 각각 배경 이미지, 두 개의 제목 및 호출 항목 버튼이 포함되어 있습니다. 또한 3 초 지연 후 다음 슬라이드로 전진하도록 애니메이션을 설정했습니다. 그룹 회전 목마와 섹션을 100VH로 설정 하여이 모양을 달성 할 수 있습니다.

팀원 쇼케이스

웹 사이트에 팀원을 소개하려면 그룹 회전식 모듈을 사용하는 것이 좋은 방법입니다. 이 예에서는 회전 목마에 3 열 레이아웃을 구성했습니다. 각 슬라이드에는 Divi의 소셜 팔로우 모듈을 사용한 헤드 샷, 이름, 역할 및 소셜 미디어 링크가 포함됩니다. 깨끗하고 전문적인 모습을 위해 회전 목마를 한 번에 한 슬라이드 씩 스크롤하도록 설정하십시오.

카테고리 쇼케이스

Divi 5의 Group Carousel 모듈은 루프 빌더와 완벽하게 작동합니다. 이를 통해 웹 사이트의 제품 카테고리를 특징으로하는 매력적인 슬라이더를 만들 수 있습니다. 각 슬라이드는 카테고리 이름과 특집 이미지를 동적으로 끌어 올리므로 제품을 선보이는 좋은 방법입니다. 이 예에서는 필터 효과를 사용합니다

증언

그룹 캐 러셀 모듈은 또한 증언 슬라이더를 만드는 데 유용합니다. 최고의 고객 리뷰, 고객 평가 등을 쉽게 보여줄 수 있습니다. Group Carousel 모듈 덕분에 더 이상 정적 열이나 외부 플러그인으로 제한되지 않습니다.

파일을 다운로드하십시오

무료로 다운로드하십시오

Divi 뉴스 레터에 가입하면 Ultimate Divi Landing Page Layout Pack의 사본과 다른 놀라운 무료 Divi Resources, Tips 및 Tricks를 이메일로 보내 드리겠습니다. 따라 오면 당신은 곧 Divi Master가 될 것입니다. 이미 구독 한 경우 아래의 이메일 주소를 아래에 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

당신은 성공적으로 구독했습니다. 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하려면 이메일 주소를 확인하십시오!

Divi 5의 회전 목마 모듈로 창의적인 가능성을 잠금 해제하십시오

Divi 5의 Group Carousel Module은 역동적 인 Divi 웹 사이트를 만들기위한 새로운 가능성을 잠금 해제하는 강력한 추가 기능입니다. 매력적인 제품 슬라이더를 만드는 것부터 증언에 이르기 까지이 모듈은 디비 사이트에 대화식 컨텐츠를 추가 할 수 있도록합니다.

이제 Divi 5의 개조 된 재단이 더 많은 기능을위한 길을 열었으므로 다이빙하기에 완벽한 시간입니다! 그룹 회전식 모듈을 아직 사용해 보셨습니까? 아래 의견에 알려주십시오.