Divi 5를 사용하여 맞춤형 풀 스크린 슬라이더를 구축하는 방법 (무료 다운로드)

Divi 5의 최신 릴리스 중 하나는 WordPress 사이트의 맞춤형 슬라이더 및 회전 목마를 만드는 기능인 Group Carousel 모듈을 소개합니다. 포트폴리오, 제품, 몰입 형 영웅 또는 전체 화면 슬라이더를 쉽게 보여줄 수 있으며 사이트 디자인을 새로운 높이로 가져갈 수 있습니다.

이 게시물에서는 그룹 캐 러셀 모듈을 사용하여 전체 화면 슬라이더를 만들기위한 단계별 안내서를 제공합니다. 다이빙하자!

그룹 회전 목마 모듈 이해

그룹 회전식 모듈은 Divi 5에 다재다능한 추가 기능으로 동적 슬라이더와 회전 목마를 만들 수 있습니다.

기존 모듈과 달리 간단한 이미지 회전 목마에서 복잡한 포스트 기반 슬라이더에 이르기까지 루프 빌더로 구동되는 광범위한 레이아웃을 지원합니다. 이러한 유연성은 포트폴리오, 평가 또는 제품 갤러리와 같은 콘텐츠를 매력적인 방식으로 선보일 수 있습니다.

그룹 회전 목마 모듈의 주요 기능

그룹 캐 러셀 모듈은 강력한 기능으로 빛납니다. 동적 컨텐츠 루프를 지원하므로 루프 빌더를 사용하여 게시물, 페이지 또는 사용자 정의 게시물 유형을 슬라이더로 직접 가져올 수 있습니다.

이 모듈을 사용하면 Divi 모듈을 사용하여 중첩 행 및 모듈 그룹을 사용하여 아름답고 매력적인 슬라이더를 구축 할 수 있습니다. 화살표 및 페이지 매김 도트로 내비게이션을 사용자 정의하고 사이트, 색상 및 기타 스타일을 사용자 정의하여 사이트와 일치 할 수 있습니다.

자동 재생 옵션, 조정 가능한 속도 및 일시 정지 대회 기능은 방문자에게 시선을 사로 잡는 경험을 제공하여 사이트에 더 오래 머무를 수 있도록합니다. 또한 모듈은 완전히 사용자 정의 할 수 있으므로 전체 화면 및 풀폭 레이아웃을 만들 수 있으므로 웹 사이트의 영웅, 서비스 또는 기능 섹션에 이상적입니다.

Divi 5의 그룹 회전식 모듈로 전체 화면 슬라이더를 구축하는 방법

이 튜토리얼에서는 Group Carousel 모듈을 사용하여 다가오는 Divi 5 웹 사이트를위한 전체 화면 슬라이더를 구축하는 방법을 보여줍니다. 결국, 당신은 방문객들이 행동하도록 장려하기 위해 매혹적인 슬라이더를 구축 할 수있는 기술을 갖게 될 것입니다.

1 단계 : 새 페이지 설정

새 페이지를 만들고 제목을 추가 한 다음 Divi Builder 사용을 클릭하여 시작하십시오.

시각적 빌더가 열리면 페이지 생성 에서 처음부터 빌드를 선택하십시오.

새 페이지의 섹션 위로 가져 가서 설정 아이콘을 공개하십시오. 섹션의 설정을 공개하려면 클릭하십시오.

디자인 탭 으로 이동하십시오. 레이아웃 드롭 다운 메뉴를 클릭하십시오. 정당화 콘텐츠 에서 센터를 선택하십시오. 정렬 항목 필드에서 센터를 선택하십시오. 이를 통해 섹션의 내용이 수평 및 수직으로 중앙에있을 수 있습니다.

다음으로 섹션의 간격 설정을 조정합니다. 간격 드롭 다운 메뉴를 확장하십시오. 마진을 0px , 상단 및 하단으로 설정하십시오. 패딩 아래에서 상단과 하단을 0px 로 설정하십시오.

섹션의 설정이 제자리에 있으면 Green + 아이콘을 클릭하여 새 행을 추가하십시오.

동일한 열 에서 단일 열 행을 선택하십시오.

다음으로 그룹 회전식 모듈을 행에 추가하십시오.

컨텐츠를 추가하기 전에 Flexbox 및 간격 컨트롤을 사용하여 행 및 그룹 회전식 모듈을 설정해야합니다.

2 단계 : 행 설정을 구성합니다

전체 화면 슬라이더를 만들려면 행과 그룹 회전식 모듈을 100% 너비 로 설정해야합니다. 섹션을 쉽게 조정하려면 레이어 아이콘을 클릭하십시오. 이는 풀폭 섹션 및 행으로 작업 할 때 특히 패딩과 마진이 0으로 설정되었을 때 중요합니다. 페이지의 레이아웃 구조를보다 쉽게 ​​볼 수 있습니다.

레이어보기에서 클릭하여 그룹 회전 모듈이있는 단일 열 행을 선택하십시오. 디자인 설정으로 이동하십시오. 레이아웃 드롭 다운 메뉴에서 수평 간격을 0 으로 조정하십시오.

또한 정렬 항목을 행 중심 으로 설정하십시오.

크기 탭의 너비와 최대 너비를 100%로 설정하십시오.

간격 탭에서 상단 및 하단 마진과 패딩을 0px 로 설정하십시오.

3 단계 : 그룹 회전식 설정을 구성합니다

다음으로 그룹 회전식 설정을 구성합니다. 콘텐츠 탭에서 회전식 설정 드롭 다운 메뉴를 확장하십시오. 자동 회전을 전환하고 2000ms 의 기본 설정에서 자동 회전 속도를 선택하고 호버에서 일시 중지 할 수 있습니다.

요소 탭 에서 표시 표시 내비게이션을 비활성화하고 Show Arrows를 활성화하십시오. 왼쪽 및 오른쪽 화살표에 대한 사용자 정의 아이콘을 선택할 수도 있습니다.

디자인 탭에서 화살표 탭을 확장하려면 클릭하십시오. #ffffff를 화살표 색상 으로 할당하고 화살표 크기를 기본 48px 에두고 화살표 위치를 내부 로 설정하십시오.

배경 탭을 확장하고 #000000을 배경색 으로 할당하십시오.

4 단계 : 스타일 첫 번째 그룹

섹션, 행 및 그룹 회전 목마 설정을 사용하여 첫 번째 슬라이드에 컨텐츠를 추가 할 수 있습니다. 그룹 회전식 모듈의 내용 탭을 클릭하고 그룹의 설정 아이콘을 클릭하십시오.

배경 드롭 다운 메뉴를 확장하고 그라디언트 탭을 선택하십시오.

첫 번째 그라디언트 슬라이더를 클릭하여 새 색상을 할당하십시오. #efb648을 컬러 필드에 입력하십시오 .

다음으로, 두 번째 그라디언트 슬라이더를 클릭하고 #f28f52를 색상으로 할당하십시오.

그라디언트 유형 필드에서 원형을 선택하십시오.

다음으로 디자인 탭 으로 이동하십시오. 간격 탭을 확장하고 그룹의 상단과 하단에 5% 패딩을 할당하십시오.

5 단계 : 첫 번째 그룹에 내용을 추가하십시오

우리 그룹의 설정이 구성되었으므로 그룹에 컨텐츠를 추가 할 수 있습니다. 블랙 + 아이콘을 클릭하여 모듈을 추가하십시오.

삽입 모듈 또는 행 대화 상자가 나타나면 새 행 탭을 클릭하십시오. 동일 열 섹션에서 단일 열 행을 선택하십시오.

제목 모듈을 추가하십시오

제목 모듈을 선택하고 삽입하십시오.

텍스트 드롭 다운 메뉴를 확장하고 제목 으로 오렌지 주스를 입력하십시오.

디자인 탭 으로 이동하십시오. 제목 텍스트 드롭 다운 메뉴를 확장하십시오. H1을 제목 레벨 로 선택하고 Bebas Neue를 제목 글꼴 로 사용하고 제목 글꼴 스타일을 대문자 로 설정, 제목 텍스트 정렬 , 제목 텍스트 색상을 #ffffff 및 제목 텍스트 크기 20 에 설정하십시오.

Divi 5의 반응 형 컨트롤을 사용하여 제목 텍스트 크기를 태블릿의 15EM 으로, 모바일에서 8EM을 조정하십시오.

새 행을 추가하십시오

다음으로 제목 모듈이 포함 된 단일 열 행 아래에 새 행을 추가합니다. Black + 아이콘을 클릭하여 새 모듈을 추가하십시오.

새 행 탭을 클릭하십시오. 오프셋 열 에서 1/4 + 1/2 + 1/4 옵션을 선택하십시오.

설계 탭 에서 크기 조정 탭을 확장하고 너비 와 최대 너비 에 대해 70%를 입력하십시오. 정렬을 중앙 으로 설정하십시오.

제목 모듈을 추가하십시오

제목 모듈을 선택하고 첫 번째 열에 추가하십시오.

제목에 제목을 부여하고 디자인 탭 으로 이동하십시오. 제목 텍스트 드롭 다운 메뉴를 확장하십시오. 제목 레벨 에 대해 H2를 선택하고, Bebas Neue를 제목 글꼴 로, 대문자를 제목 글꼴 스타일 로, 제목 텍스트 색상 으로 #ffffff 및 제목 텍스트 크기 로 6em을 선택 하십시오.

Divi의 반응 형 컨트롤을 사용하여 제목 텍스트 크기를 4EM 으로 조정하십시오.

텍스트 모듈을 추가하십시오

첫 번째 열의 제목 아래에 텍스트 모듈을 추가하십시오. 신체 텍스트를 입력하고 디자인 탭 으로 전환하십시오. Poppins를 텍스트 글꼴 로 선택하고 텍스트 색상을 #ffffff 로 설정하고 텍스트 크기를 16px 로 설정하십시오.

버튼 모듈을 추가하십시오

첫 번째 열의 텍스트 모듈 아래에 버튼 모듈을 추가하십시오. 컨텐츠 탭에서 버튼에 텍스트를 할당하고 디자인 탭으로 바꿉니다. 버튼 드롭 다운 메뉴를 확장하고 버튼에 맞춤형 스타일을 사용 하십시오. 그런 다음 버튼 배경 메뉴를 확장하십시오. 배경색 탭에서 #528bf2를 버튼의 색상으로 추가하십시오.

Divi 5의 호버 컨트롤을 사용하여 버튼의 호버 색상으로 #6a7c9d를 할당하십시오.

데스크탑보기로 다시 전환하십시오. 버튼 테두리 드롭 다운 탭을 확장하십시오. 버튼 테두리 반경 아래에서 100px를 추가하고 버튼 테두리 너비를 0px 로 설정하십시오.

버튼 텍스트 드롭 다운 메뉴를 확장하십시오. 팝핀을 버튼 글꼴 로, #ffffff 버튼 텍스트 색상 으로, 16px를 버튼 텍스트 크기 로 지정하십시오.

버튼 아이콘 설정을 확장하고 표시 버튼 아이콘 토글을 비활성화합니다.

마지막으로 간격 드롭 다운 메뉴를 확장하십시오. 상단과 하단에 15px 패딩을 추가하고 왼쪽과 오른쪽에 35px를 추가하십시오.

이미지 모듈을 추가하십시오

두 번째 열에 이미지 모듈을 배치하십시오. 설정이 나타나면 이미지 필드 위로 마우스로 이동하여 설정을 표시하십시오. 설정 아이콘을 클릭하여 미디어 라이브러리를로드하고 이미지를 모듈에 업로드하십시오.

다음으로, 이미지에 상호 작용을 추가하여 마우스 오버 효과를 만듭니다. 고급 탭으로 이동하십시오. 상호 작용 메뉴를 확장하여 설정을 공개하십시오. 상호 작용 +추가 버튼을 클릭하십시오.

옵션이 나타날 때 마우스 입력을 선택하십시오.

관리자 라벨 필드에 이미지 틸트를 입력하고 마우스를 트리거 이벤트로 입력하고, 미러 마우스 이동 효과 동작으로 미러 마우스 움직임을 선택하고, 이미지를 대상 모듈로 선택하고, 움직임 유형으로 기울어지고, 감도를 위해 15를 선택하십시오. 마지막으로 상호 작용 저장 버튼을 클릭하여 상호 작용을 활성화하십시오.

막대 카운터 모듈을 추가하십시오

3 번째 열에 막대 카운터 모듈을 추가하려면 클릭하십시오. 내용 탭에서. 요소 탭에서 표시 비활성화를 비활성화하십시오.

다음으로 배경 탭을 확장하십시오. #ffffff를 배경색으로 추가하십시오.

디자인 탭 으로 바꾸고 막대 드롭 다운 메뉴를 확장하십시오. 막대 배경 색 필드에서 #528bf2를 색상으로 추가하십시오.

제목 텍스트 드롭 다운 메뉴를 확장하십시오. 제목 글꼴 필드에서 Bebas Neue를 선택하십시오. 제목 텍스트 색상 으로 #ffffff를 선택하고 제목 텍스트 크기 로 22px를 선택하십시오.

컨텐츠 탭으로 다시 교체하십시오. 이번에는 첫 번째 막대 카운터 항목의 설정 아이콘을 클릭하십시오.

제목 필드에 텍스트를 입력하고 백분율 필드를 75 로 설정하십시오.

막대 카운터 모듈의 기본 컨텐츠 탭으로 돌아 가려면 클릭하십시오.

설계 설정이 설정되었으므로 첫 번째 막대 카운터 항목을 쉽게 복사하여 설정을 보존 할 수 있습니다.

막대 카운터 항목을 복제하고 제목과 백분율을 원하는 설정으로 변경하십시오.

6 단계 : 애니메이션 추가

그룹을 몰입시키기 위해 애니메이션 효과를 추가 할 것입니다. 먼저 메인 헤딩에 줌 효과를 추가 할 것입니다. 클릭하여 그룹의 기본 제목을 선택하십시오. 디자인 탭으로 이동하여 아래로 스크롤하여 애니메이션 탭을 확장하십시오. 애니메이션의 Zoom을 선택하십시오. 모든 설정을 그대로 두십시오.

다음으로 클릭하여 2 열 (3 열 행)을 확장하십시오. 첫 번째 열 설정을 클릭하십시오.

디자인 탭을 클릭하고 아래로 스크롤하여 애니메이션 탭을 표시하십시오. 애니메이션 스타일과 애니메이션 방향의 오른쪽에 대한 슬라이드를 선택하십시오. 다른 모든 설정을 그대로 두십시오.

행의 기본 내용 탭으로 다시 클릭하십시오. 이번에는 세 번째 열을 선택하십시오. 디자인 탭으로 이동하여 애니메이션 탭을 확장 한 다음 애니메이션을 위해 Slide> Left를 선택하십시오. 다른 설정을 기본값으로 남겨 두십시오.

7 단계 : 겹치는 행

레이아웃에 약간의 여분의 감각을 추가하려면 두 번째 행의 여백을 조정하여 오버랩 효과를 만듭니다. 이렇게하면 행을 위로 올려 놓고 메인 헤딩과 겹쳐서 좋은 효과가 있습니다. 레이아웃에서 두 번째 행을 선택하고 설계 탭으로 이동하십시오. 간격 탭을 확장하여 설정을 표시하십시오. 상단 마진에서 값을 -8%로 설정하십시오.

다음으로, 우리는 z 인덱스 값을 적용하여 2 번째 줄을 1st 위에 배치합니다. 고급 탭으로 이동하여 위치 설정을 확장 한 다음 999999를 Z 인덱스 필드에 적용하십시오.

슬라이더를 미리 볼 때, 두 번째 행이 1 번째 행을 약간 겹치게하여 겹쳐서 겹치는 효과를 만듭니다.

8 단계 : 테스트 응답 성

첫 번째 그룹을 복사하기 전에 레이아웃의 응답 성을 테스트하는 것이 좋습니다. Divi 5의 사용자 정의 가능한 반응 형 중단 점을 사용하여 조정하십시오.

Divi 5에는 Divi 4의 3 대신 7 개의 중단 점이 있습니다.이 중단 점을 사용하여 화면 크기에서 레이아웃이 놀라운 것처럼 보일 수 있습니다. 중단 점을 탐색하고 첫 번째 그룹을 복사하기 전에 필요한 조정을하십시오.

Divi 5에서 가장 새로운 기능 중 하나는 모바일 장치의 열 순서를 변경하는 기능입니다. 이것은 모든 화면 크기에서 설계를 기능하고 효과적으로 유지하는 좋은 방법입니다. 모바일보기에있는 동안 레이아웃 (3 열 행)에서 두 번째 행 의 두 번째 열을 선택하십시오.

컨텐츠 탭 에서 주문 탭을 확장하십시오. 거기에서 디스플레이 순서를 -1 로 설정하십시오. 이미지가 상단에있는 열을 배치하여 이미지가 데스크탑 및 태블릿 뷰에서와 같이 헤딩을 오버레이 할 수 있습니다.

9 단계 : 복제 그룹

모든 것을 제곱하면 첫 번째 그룹을 쉽게 복사하고 모든 단계를 반복하지 않고 배경 구배, 텍스트 및 이미지를 변경할 수 있습니다. 메인 캐 러셀 그룹 컨텐츠 탭에서 클릭하여 첫 번째 그룹을 복제하십시오.

복사하기 전에 그룹에 관리자 레이블을 할당하여 쉽게 식별 할 수 있도록하십시오.

거기에서 제목을 변경하고 이미지를 교체하고 그룹에 새 배경 구배를 할당하십시오. 첫 번째 그라디언트 슬라이더에는 #FC6A3C를 사용하고 두 번째에는 #C52F00을 사용하십시오.

또한 버튼 및 막대 카운터 색상을 호버에서 #3DFCCA 및 #C52F00 으로 변경하려고합니다.

또한 두 번째 그룹의 애니메이션 타이밍을 조정해야합니다. 이렇게하면 슬라이더가 발전 할 때까지 애니메이션이 다른 슬라이드에 대한로드되지 않도록합니다. 기본 제목 모듈에서 디자인 탭 으로 이동하여 애니메이션 메뉴를 확장 한 다음 애니메이션 지연을 2000ms 로 설정하십시오.

3 열 행에 대해서도 똑같이하십시오. 첫 번째 및 세 번째 열 에서 애니메이션 지연을 2000ms 로 설정하십시오.

세 번째 그룹으로 변경됩니다

세 번째 그룹의 경우 백그라운드 기울기 에는 #71B953 및 #617A56을 사용하십시오.

버튼 및 막대 카운터 모듈의 경우 호버 색상에 #BA54B3 및 #654F64를 사용하십시오.

또한 제목 모듈의 애니메이션 지연 과 2 번째 행 의 첫 번째 및 세 번째 열을 4000ms 로 변경해야합니다.

네 번째 그룹으로 변경됩니다

배경 기울기 의 경우 #AD52B7 및 #AD52B7을 사용하십시오.

막대 카운터 및 버튼 모듈에는 #83B853 및 #83B853을 사용하십시오.

마지막으로, 그룹의 메인 헤딩에서 애니메이션 지연을 6000ms로 설정하고 3 열 행의 첫 번째 및 세 번째 열을 설정하십시오.

10 단계 : 슬라이더 미리보기 및 저장

마지막 단계는 레이아웃을 저장하고 미리보기를 놓치지 않도록하는 것입니다. 시각적 빌더에서 오른쪽 상단의 저장 버튼을 클릭하십시오.

미리보기 버튼을 클릭하여 새 탭에서 레이아웃을 엽니 다.

완료되면 슬라이더가 다음과 같이 보일 것입니다.

그게 다야! 이 그룹 캐 러셀 모듈은 Divi 5에 새로 추가 된 다목적입니다. 모든 프로젝트에 대한 슬라이더 및 회전 목마를 만들 수 있으며 무제한 사용자 정의 옵션을 제공합니다.

전체 화면 회전식 레이아웃을 다운로드하십시오

이 게시물에서 재현 한 레이아웃을 사용하려면 아래 양식을 통해 액세스 할 수 있습니다. 폴더를 다운로드하여 압축 해제하면 JSON 파일이 있습니다. Divi 라이브러리로 이동하여 파일을 업로드하여 작성하여 빌드 한 페이지에 사용할 수 있도록 파일을 사용할 수 있습니다.

파일을 다운로드하십시오

무료로 다운로드하십시오

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

다운로드

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

오늘 Divi 5에서 첫 번째 회전 목마를 구축하십시오

Divi 5의 Group Carousel 모듈로 맞춤형 전체 화면 슬라이더를 만들면 웹 사이트에서 매력적인 경험을 만들 수있는 가능성의 세계가 열립니다. 이 게시물의 단계에 따라 애니메이션, 반응 형 중단 점 및 대화식 효과와 같은 고급 사용자 정의 옵션에서 모듈 기능을 사용하는 방법을 배웠습니다. Group Carousel 모듈의 유연성을 사용하면 모든 화면 크기를 통해 완벽하고 전문적인 모습을 유지하면서 상상할 수있는 모든 것에 대한 슬라이드를 구축 할 수 있습니다.

최신 Divi 5 Public Alpha를 다운로드하고 Group Carousel 모듈을 실험하고 의견이나 소셜 미디어 채널에서 귀하의 생각을 알려주십시오.