Divi & Slick.js로 자동 회전 목마를 만드는 방법

매주 다음 프로젝트에 사용할 수 있는 새로운 무료 Divi 레이아웃 팩을 제공합니다. 레이아웃 팩 중 하나의 경우 웹사이트를 한 단계 업그레이드하는 데 도움이 되는 사용 사례도 공유합니다.

이번 주에는 진행 중인 Divi 디자인 이니셔티브의 일환으로 Divi, Slick.js 및 Ice Cream Shop Layout Pack을 사용하여 자동 회전 목마를 만드는 방법을 보여 드리겠습니다. 웹사이트에 매끄러운 JS 라이브러리를 포함하는 것으로 시작하고 Divi Builder 내에서 작동하도록 하여 계속할 것입니다. 이것은 보여주고 싶은 모든 종류의 모듈에 대한 자동 캐러셀을 만드는 좋은 방법입니다. JSON 파일도 무료로 다운로드할 수 있습니다!

시작하겠습니다.

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.

데스크탑

이동하는

자동 회전 목마 레이아웃을 무료로 다운로드하십시오

무료 자동 회전 목마 레이아웃을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

헤드 태그에 Slick.js 파일을 포함해야 합니다! 그것 없이는 작동하지 않습니다. 아래의 첫 번째 단계를 참조하십시오.

1. Divi 테마 통합에 Slick JS 추가

Divi 테마 옵션으로 이동

이 튜토리얼의 첫 번째 부분은 매우 중요한 부분입니다. Slick.js를 웹사이트에 추가합니다. 그렇게하려면 Divi 테마 옵션으로 이동하십시오.

헤드 태그에 Slick.js 추가

통합 탭으로 이동하여 Slick.js 파일을 웹사이트의 헤드 태그에 추가합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

2. 아이스크림 가게 메뉴 레이아웃을 사용하여 새 페이지 만들기

새 페이지 추가

웹사이트에 새 페이지를 추가하여 계속하십시오. 페이지에 제목을 지정하고 페이지를 게시한 다음 Divi Builder로 전환하십시오.

아이스크림 가게 메뉴 레이아웃 업로드

이 튜토리얼에서는 Ice Cream Shop Layout Pack의 메뉴 레이아웃을 사용하고 있지만 원하는 다른 페이지/레이아웃을 자유롭게 사용할 수 있습니다.

2. 페이지에 새 섹션 추가

새 섹션 추가

자동 캐러셀을 만드는 다음 단계는 페이지에 새 섹션을 추가하는 것입니다.

배경색

섹션 설정을 열고 배경색을 변경합니다.

• 배경색: #f5f5f5

하단 디바이더

섹션에 하단 구분선도 추가합니다.

• 구분선 스타일: 목록에서 찾기
• 디바이더 색상: #ffffff
• 분배기 무게: 10vw

간격

약간의 바닥 패딩과 함께.

• 하단 패딩: 10vw

새 행 추가

열 구조

다음 열 구조를 사용하여 첫 번째 행을 계속 추가합니다.

열에 제목 텍스트 모듈 추가

H2 콘텐츠 추가

행의 열에 텍스트 모듈을 추가하고 원하는 H2 콘텐츠를 삽입하십시오.

H2 텍스트 설정

디자인 탭으로 이동하여 H2 텍스트 설정을 적절하게 변경합니다.

• 제목 2 글꼴: 프롬프트
• 제목 2 글꼴 두께: 초경량
• 제목 2 텍스트 정렬: 가운데
• 제목 2 텍스트 크기: 60px(데스크톱), 40px(태블릿), 25px(전화)
• 제목 2 줄 높이: 1.2em

사이징

모듈의 크기 설정도 수정하십시오.

• 최대 너비: 800px
• 모듈 정렬: 중앙

3. 새 1열 행을 자동 슬라이더에 전용

새 행 추가

열 구조

자동 캐러셀을 생성하려면 캐러셀 내부에 배치할 항목에 새 행을 할당해야 합니다. 열이 하나만 있는 행을 선택해야 합니다. 다음 단계에서는 이 열을 자동 캐러셀로 변환합니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 설정에서 행이 화면의 전체 너비를 차지하도록 합니다.

• 폭: 100%
• 최대 너비: 100%

간격

위쪽 여백을 추가하고 다음으로 모든 기본 위쪽 및 아래쪽 패딩을 제거합니다.

• 상단 여백: 50px
• 상단 패딩: 0px
• 하단 패딩: 0px

오버플로

또한 오버플로를 숨겨서 행 컨테이너를 능가하는 항목이 없는지 확인합니다.

• 수평 오버플로: 숨김
• 수직 오버플로: 숨김

열 설정

열 설정을 열어 계속하십시오.

CSS 클래스

열에 두 개의 다른 CSS 클래스를 추가합니다. 그들 사이에 공백을 남겨 두십시오. 이 자습서의 뒷부분에서 이러한 클래스를 사용하여 자동 회전 목마를 만듭니다.

• CSS 클래스: 아이스크림 항목 슬라이더

열에 첫 번째 슬라이더 항목 추가(행동 유도 모듈)

기본 콘텐츠

첫 번째 캐러셀 항목을 추가할 시간입니다! 클릭 유도문안 모듈을 사용하지만 원하는 다른 모듈을 자유롭게 사용할 수 있습니다. 원하는 콘텐츠를 입력하세요.

호버 콘텐츠

제목과 본문 내용을 빈 문자(예: ' ')로 교체하여 가리킨 내용을 제거합니다.

링크

버튼이 표시되도록 모듈에 대한 링크도 추가해야 합니다.

• 버튼 링크 URL: #

기본 그라데이션 배경

그런 다음 배경 설정으로 이동하여 그라데이션 배경을 추가합니다.

• 색상 1: #8300e9
• 색상 2: rgba(41,196,169,0)
• 그라디언트 유형: 방사형
• 방사형 방향: 상단
• 시작 위치: 35%
• 최종 위치: 35%

호버 그라데이션 배경 제거

호버에서 그라디언트 배경을 제거합니다.

배경 이미지

관련 배경 이미지도 업로드하세요.

제목 텍스트 설정

디자인 탭으로 이동하여 제목 텍스트 설정을 적절하게 변경합니다.

• 제목 글꼴: 프롬프트
• 제목 텍스트 크기: 2vw(데스크톱), 4vw(태블릿), 5vw(전화)
• 제목 줄 높이: 2vw(데스크톱), 3vw(태블릿), 4vw(휴대전화)

본문 설정

본문 설정도 수정합니다.

• 본문 글꼴: Open Sans
• 본문 텍스트 크기: 0.9vw(데스크톱), 2vw(태블릿), 2.5vw(전화)
• 본문 높이: 1vw(데스크탑), 2vw(태블릿), 3vw(전화)

버튼 설정

그런 다음 버튼 설정으로 이동하여 다음과 같이 버튼의 스타일을 지정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 0.9vw(데스크톱), 1.5vw(태블릿), 2vw(전화)
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #000000(기본값), #ff6f7e(호버링)
• 버튼 테두리 너비: 0px

• 버튼 테두리 반경: 0px
• 버튼 문자 간격: 2px
• 버튼 글꼴: 프롬프트
• 버튼 글꼴 두께: 일반
• 버튼 글꼴 스타일: 대문자

• 상단 마진: 19vw(데스크톱), 30vw(태블릿), 45vw(전화)
• 상단 패딩: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
• 하단 패딩: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
• 왼쪽 패딩: 2vw(데스크톱), 4vw(태블릿), 5vw(전화)
• 오른쪽 패딩: 2vw(데스크톱), 4vw(태블릿), 5vw(전화)

사이징

또한 모듈의 너비와 높이를 수정하고 있습니다.

• 폭: 23vw
• 높이: 23vw(데스크탑), 50vw(태블릿), 80vw(전화)

간격

마지막으로 간격 설정으로 이동하여 사용자 지정 여백 및 패딩 값을 추가합니다.

• 왼쪽 여백: 1vw
• 오른쪽 여백: 1vw
• 상단 패딩: 2vw(데스크톱), 4vw(태블릿), 6vw(전화)

4. 슬라이더 항목을 원하는 만큼 복제

CTA 모듈 4번 복제

첫 번째 CTA 모듈을 완료하면 원하는 만큼 복제할 수 있습니다. 이 열의 모든 모듈은 자동 캐러셀의 일부가 됩니다.

각 복제본에 대한 콘텐츠, 그라데이션 배경 및 배경 이미지 변경

각 복제물의 콘텐츠, 그라데이션 배경 및 배경 이미지를 변경하여 각 CTA 모듈을 고유하게 만드십시오.

5. 이전 행 아래에 새 행 추가

다음 열 구조를 사용하여 섹션에 다음 행과 마지막 행을 추가합니다.

jQuery 코드로 첫 번째 코드 모듈 삽입

열에 새 코드 모듈 추가

열에 첫 번째 코드 모듈을 추가합니다.

CSS 코드 삽입

그리고 다음 CSS 코드 줄을 삽입합니다.

<style>
.slick-slider
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-slide
{
float: left;
}
</style>

CSS 코드가 있는 두 번째 코드 모듈 삽입

열에 새 코드 모듈 추가

이전 모듈 바로 아래에 다른 코드 모듈을 추가합니다.

jQuery 코드 삽입

다음 jQuery 코드 줄을 삽입합니다.

<script>
jQuery(function($){
$('.icecream-items').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 700,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 1079,
settings: {
slidesToShow: 2
}
}]
});
});
</script>

CSS 및 jQuery 코드를 추가했으면 Visual Builder를 종료하여 결과를 볼 수 있습니다!

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

데스크탑

이동하는

마지막 생각들

이 게시물에서는 Divi, slick.js 및 Ice Cream Shop Layout Pack을 사용하여 자동 회전 목마를 만드는 방법을 보여주었습니다. 이것은 웹사이트에 상호작용을 추가하는 좋은 방법입니다. 표시하려는 모든 종류의 모듈에서 이 기술을 사용할 수 있습니다! 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요.

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.