여러 슬라이더를 사용하여 자동 애니메이션으로 서비스를 보여주는 방법

게시 됨: 2019-07-26

대부분의 회사는 웹사이트에서 방문자에게 서비스를 선보일 필요가 있습니다. 스크롤 없이 볼 수 있는 부분에 서비스를 표시하는 한 가지 방법은 슬라이더를 사용하는 것입니다. 이렇게 하면 각 서비스를 하나씩 강조 표시할 수 있지만 사용자가 필요한 서비스를 찾기 위해 앞뒤로 탐색해야 한다는 단점이 있습니다. 더 나은 사용자 경험은 이러한 서비스를 사용자가 항상 볼 수 있도록 하는 것입니다.

이 튜토리얼에서는 슬라이더를 사용하여 서비스를 표시하는 동시에 각 서비스 콘텐츠를 사용자에게 항상 표시하는 방법을 보여 드리겠습니다. 이를 위해 여러 슬라이더와 자동 애니메이션을 사용하여 각 서비스가 특정 슬라이드 디자인으로 하나씩 강조 표시되도록 할 것입니다. 그리고 우리는 Divi의 내장 디자인 옵션을 사용하여 이것을 할 것입니다.

시작하자.

엿보기

다음은 서비스를 하나씩 보여주기 위해 여러 슬라이더를 사용하는 디자인을 간략하게 살펴봅니다.

여러 슬라이더 레이아웃이 포함된 Showcase 서비스를 무료로 다운로드하십시오.

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

파일 다운로드

무료로 다운로드

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

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

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.

튜토리얼로 들어가 볼까요?

YouTube 채널 구독

시작하는 데 필요한 것

시작하려면 다음이 필요합니다.

Divi 테마가 설치되고 활성화되었습니다.
프론트 엔드에서 처음부터 빌드하기 위해 생성된 새 페이지(비주얼 빌더)
모의 콘텐츠에 사용할 이미지

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

Divi에서 여러 슬라이더 디자인으로 쇼케이스 서비스 만들기

섹션 및 행 1 생성

시작하려면 행이 하나인 일반 섹션을 만드십시오.

그런 다음 모듈을 추가하기 전에 섹션 설정을 열고 어두운 배경 이미지(또는 배경색)를 추가하십시오.

그런 다음 행 설정을 열고 다음을 업데이트합니다.

최대 너비: 80%

텍스트 모듈로 헤더 텍스트 추가

디자인에 대한 헤더 텍스트를 추가하려면 텍스트 모듈을 사용하겠습니다. 계속해서 행에 텍스트 모듈을 추가하십시오.

그런 다음 다음 HTML로 텍스트 모듈 본문 콘텐츠를 업데이트합니다.

<h1>How can we help?</h1>

그런 다음 디자인 설정을 다음과 같이 업데이트합니다.

표제 글꼴: 몬세라트
제목 텍스트 색상: #ffffff
제목 텍스트 크기: 6vw
패딩: 상단 5%, 하단 5%

두 번째 행 추가

다음으로 3열 레이아웃으로 다른 행을 추가합니다.

그런 다음 최대 너비 80%로 행 설정을 업데이트합니다.

최대 너비: 80%

열 1에 슬라이더 추가

이제 각 출력 열에 슬라이더를 추가할 준비가 되었습니다. 열 1에 슬라이더 모듈을 추가하는 것으로 시작하십시오.

하나의 슬라이드만 남도록 두 번째 기본 슬라이드를 삭제합니다.

그런 다음 다음을 업데이트합니다.

화살표 표시: 아니요
컨트롤 표시: 아니요
배경색: rgba(0,0,0,0)

텍스트 정렬: 왼쪽
제목 글꼴: Montserrat
제목 글꼴 두께: 반 굵게
버튼 배경색: #38b3cb
버튼 테두리 너비: 0px

그런 다음 자동 애니메이션 옵션을 다음과 같이 설정합니다.

자동 애니메이션: 켜짐
자동 애니메이션 속도: 3000
호버 시 자동 슬라이드 계속: 켜짐

기본적으로 Divi는 슬라이드 사이에 미묘한 페이드 애니메이션을 추가합니다. 슬라이드 간에 눈에 띄는 변화가 없도록 이 기능을 비활성화하려고 합니다. 이렇게 하려면 슬라이드 설명에 다음 사용자 지정 CSS를 추가합니다.

animation: none !important;

슬라이더 설정을 처리합니다. 이제 개별 슬라이드를 업데이트해야 합니다.

Slider 1용 슬라이드 만들기

세 개의 열 각각에 하나의 슬라이더가 있는 세 개의 슬라이더를 사용할 것입니다. 그리고 슬라이드가 각 서비스를 하나씩 강조 표시하는 타이밍을 얻으려면 각 슬라이더에 대해 3개의 슬라이드가 있어야 합니다. 그런 다음 서비스를 소개하거나 강조하기 위해 디자인할 슬라이드 중 하나를 선택할 수 있습니다.

Slider 1에 대한 세 개의 슬라이드를 만드는 것으로 시작하겠습니다.

개별 슬라이드에 대한 설정을 엽니다. 그런 다음 짧은 문장만 포함하도록 본문 내용을 조정합니다.

이제 개별 슬라이드 설정을 저장하고 슬라이드를 2번 복제하여 총 3개의 슬라이드가 되도록 합니다. 이 디자인의 경우 슬라이더/열과 동일한 수의 슬라이드가 필요하다는 것을 기억하십시오.

나머지 각 열에 슬라이더 복사 및 붙여넣기

슬라이더 1에 세 개의 슬라이드가 있는 상태에서 슬라이더 모듈을 복사하여 열 2와 열 3에 붙여넣을 수 있습니다.

이제 각 열에 동일한 슬라이더가 있어야 합니다. 그리고 각 슬라이더에는 3000ms마다 자동으로 전환되도록 설정된 3개의 동일한 슬라이드가 있습니다. 그리고 페이드 애니메이션을 비활성화했기 때문에 슬라이드 사이의 전환을 볼 수 없습니다. 그러나 슬라이드 중 하나의 디자인을 변경하면 슬라이더가 해당 슬라이드로 이동했을 때 차이점을 볼 수 있습니다. 이를 통해 자동 애니메이션으로 서비스를 선보이거나 강조 표시하기 위해 각 슬라이더에서 하나의 슬라이드 디자인을 변경할 수 있습니다.

Showcase Slide로 각 슬라이더 업데이트

이를 위해 슬라이더 1의 첫 번째 슬라이드, 슬라이더 2의 두 번째 슬라이드, 슬라이더 3의 세 번째 슬라이드 디자인을 변경합니다. 이렇게 하면 왼쪽 열에서 시작하여 다음으로 끝나는 각 서비스가 자동으로(3000ms마다) 강조 표시됩니다. 오른쪽의 세 번째 열. 그런 다음 이 자동 애니메이션을 계속 반복합니다.