주요 내용으로 건너 뛰기

Divi에서 스크롤 효과를 사용하여 매끄러운 전환을 만드는 방법

Divi : 사용하기 가장 쉬운 WordPress 테마

Elementor로 웹 사이트를 쉽게 만들 수 있습니다

Elementor를 사용하면 전문적인 모양으로 웹 사이트 디자인을 쉽게 만들 수 있습니다. 자신이 할 수있는 일에 대해 비용을 지불하지 마십시오. [무료]

서비스 페이지를 디자인 할 때 방문자가 귀하가 제공하는 다양한 서비스를 모두인지하도록해야합니다. 대부분의 경우 이것은 그들이 찾고있는 하나의 특정 서비스 일 뿐이지 만 서비스 구조에서 간소화 된 방법을 제공하면 방문자가 모든 서비스를 다룰 가능성이 높습니다. 

이 튜토리얼에서는 Divi의 스크롤 효과로 창의력을 발휘하고 원활한 서비스 전환을 만드는 방법을 보여줍니다. JSON 파일을 무료로 다운로드 할 수도 있습니다!

가자.

가능한 결과

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

섹션 divi 간 전환

1, 요소의 구조를 재현

섹션 1 추가

간격

작업중인 페이지에 새 섹션을 추가하여 시작하십시오. 섹션 설정을 열고 다른 화면 크기에서 패딩 값을 변경하십시오.

  • 상단 패딩 : 80px (데스크톱 및 태블릿), 0px (전화)
  • 하단 패딩 : 80px
Divi 매개 변수 섹션

새 행 추가

기둥 구조

다음 열 구조를 사용하여 새 행을 계속 추가하십시오.

크기 조정

더 많은 모듈을 추가하지 않고 선 매개 변수를 열고 치수 매개 변수에 다음 변경 사항을 적용하십시오.

  • 사용자 정의 거터 너비를 사용하십시오. 예
  • 거터 폭 : 1
  • 너비 : 90 %
  • 최대 너비 : 1580px
Divi 간격 구성

간격

그런 다음 사용자 지정 위쪽 및 아래쪽 여백을 추가하십시오.

  • 상단 여백 : 200px
  • 아래쪽 여백 : 200px
Divi 줄 간격 구성

1 열에 텍스트 모듈 추가

H2 콘텐츠 추가

1 열의 텍스트 모듈부터 시작하여 모듈을 추가 할 시간입니다. 원하는 H2 콘텐츠를 입력합니다.

현재 전문가가 제공하는 서비스

H2 텍스트 설정

모듈 디자인 탭으로 이동하여 다음과 같이 H2 텍스트 설정을 변경합니다.

  • 타이틀 2 경찰 : 분기 별
  • 헤더 2 텍스트 크기 : 80px (데스크톱), 50px (태블릿), 40px (전화)
  • 헤드 라인 2의 높이 : 1.2em
수석 디비 경찰

간격

그런 다음 태블릿과 휴대폰에 여백을 추가하십시오.

  • 하단 여백 : 50 픽셀 (태블릿 및 휴대 전화 만 해당)
Divi 텍스트 간격 구성

2 열에 텍스트 모듈 추가

콘텐츠 추가

두 번째 열로 이동하겠습니다. 필요한 첫 번째 모듈은 설명 내용이있는 텍스트 모듈입니다.

콘텐츠 divi 텍스트 상자

텍스트 설정

모듈 디자인 탭으로 전환하고 그에 따라 텍스트 설정을 변경합니다.

Divi : 모든 시간의 최고의 WordPress 테마!

901.000 다운로드Divi는 세계에서 가장 인기있는 WordPress 테마입니다. 그것은 완전하고, 사용하기 쉽고 62 무료 템플릿 이상을 제공합니다. [추천]

  • 텍스트 글꼴 : 캐빈
  • 텍스트 글꼴 스타일 : 대문자
  • 텍스트 색상 : # 000000
  • 텍스트 크기 : 18px (데스크톱), 15px (태블릿), 13px (전화)
  • 텍스트 문자 간격 : 3px (데스크톱), 1px (태블릿 및 전화)
  • 텍스트 줄의 높이 : 3em
Divi 텍스트 매개 변수

열 2에 분리 모듈 추가

시계

이 칼럼에서 다음으로 필요한 마지막 모듈은 분리 모듈입니다. "분리기 표시"옵션이 활성화되어 있는지 확인하십시오.

  • 구분 기호 표시 : 예
보이는 구분선

라인

그런 다음 모듈의 선 색상을 변경하십시오.

  • 선 색상 : # 000000
구분선 색상 배경

크기 조정

그런 다음 크기 조정 매개 변수를 변경하십시오.

  • 분배기 무게 : 3px
  • 너비 : 28 %
Divi 구분자 크기

간격

우리는 또한 최고 마진을 추가합니다.

  • 상단 여백 : 10px
Divi 분리기 모듈 간격

섹션 2 추가

간격

다음 정규 섹션으로 이동하겠습니다. 섹션에서 기본 상단 패딩을 제거합니다.

  • 상단 패딩 : 0px
섹션 2 나누기 간격

오버 플로우

오버플로도 숨 깁니다.

  • 수평 오버플로 : 숨겨진
  • 수직 오버플로 : 숨겨진
divi 모듈 오버플로 숨기기

새 행 추가

기둥 구조

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

divi 레이아웃 선택

크기 조정

더 많은 모듈을 추가하지 않고 선 매개 변수를 열고 치수 매개 변수에 액세스 한 후 다음과 같이 수정하십시오.

  • 사용자 정의 거터 너비를 사용하십시오. 예
  • 거터 폭 : 1
  • 열 높이 균등화 : 예
  • 너비 : 90 %
  • 최대 너비 : 1580px
거터 구성 분할 섹션

간격

그런 다음 기본 상단 및 하단 패딩을 모두 제거하십시오.

  • 상단 패딩 : 0px
  • 하단 패딩 : 0px
Divi 1 줄 모듈 간격 설정

열 1 설정

배경색

그런 다음 열 1의 설정을 열고 배경색을 변경합니다.

  • 배경색 : # f7f7f7
Divi 라인 모듈 배경 구성

간격

다양한 화면 크기에 맞춤 패딩 값을 추가하여 열 설정을 완료합니다.

  • 상단 패딩 : 200px (데스크), 100px (태블릿 및 전화)
  • 하단 패딩 : 200px (데스크), 100px (태블릿 및 전화)
  • 왼쪽 패딩 : 8 %
  • 오른쪽 패딩 : 8 %
행 모듈 열 설정

열 2 설정

간격

2 열의 설정을 열어 계속 진행합니다. 고급 탭으로 이동하여 다양한 화면 크기에 맞춤 패딩 값을 추가합니다.

  • 상단 패딩 : 100px (데스크톱), 50px (태블릿 및 전화)
  • 하단 패딩 : 200px
  • 왼쪽 패딩 : 150 픽셀 (데스크), 0 픽셀 (태블릿 및 전화)
Divi 모듈 간격 설정

열 1에 분리 모듈 추가

시계

첫 번째 열에서 필요한 첫 번째 모듈은 분리 모듈입니다. "분리기 표시"옵션이 활성화되어 있는지 확인하십시오.

최고의 WordPress 테마 및 플러그인을 찾고 계십니까?

Envato에서 최고의 플러그인과 WordPress 테마를 다운로드하고 쉽게 웹 사이트를 만드십시오. 이미 49.720.000 다운로드 이상. [EXCLUSIVE]

  • 구분 기호 표시 : 예
divi 1 구분 기호 표시

라인

그런 다음 모듈의 선 색상을 변경하십시오.

  • 선 색상 : # 000000
Divi 구분 기호 설정

크기 조정

또한 크기 조정 매개 변수를 변경하십시오.

  • 분배기 무게 : 3px
  • 너비 : 50 %
Divi 구분자 크기

1 열에 텍스트 모듈 추가

H3 콘텐츠 추가

1 열에 필요한 다음 모듈은 H3 내용이 포함 된 텍스트 모듈입니다.

Divi 콘텐츠 섹션 설정

H3 텍스트 설정

모듈 디자인 탭으로 전환하고 H3 텍스트 설정을 변경합니다.

  • 타이틀 3 경찰 : 분기 별
  • 항목 3의 텍스트 색상 : # 000000
  • 항목 3 텍스트 크기 : 50px (데스크톱), 40px (태블릿), 35px (전화)
  • 헤드 라인 3의 높이 : 1.1em

2 열에 텍스트 모듈 추가

콘텐츠 추가

두 번째 열에서 필요한 첫 번째 모듈은 설명 내용이 포함 된 텍스트 모듈입니다.

Divi 텍스트 모듈 설정

텍스트 설정

다음과 같이 모듈의 텍스트 설정을 변경하십시오.

  • 텍스트 글꼴 : 캐빈
  • 텍스트 글꼴 스타일 : 대문자
  • 텍스트 크기 : 18px (데스크톱), 15px (태블릿), 13px (전화)
  • 텍스트 문자 간격 : 3px (데스크톱), 1px (태블릿 및 전화)
  • 텍스트 줄의 높이 : 3em
Divi 텍스트 몰드 글꼴 조정

2 열에 버튼 모듈 추가

복사본 추가

다음과 마지막으로 필요한 모듈은 버튼 모듈입니다. 원하는 사본을 입력하십시오.

텍스트 모듈 콘텐츠 설정

버튼 설정

그런 다음 버튼의 스타일을 지정하십시오.

  • 버튼에 사용자 정의 스타일 사용 : 예
  • 버튼 텍스트 크기 : 20 픽셀
  • 버튼 텍스트 색상 : #ffffff
  • 버튼 배경색 : # 000000
  • 버튼 테두리 너비 : 0px
Divi 버튼 스타일 설정
  • 버튼 글꼴 : 분기 별
  • 버튼 글꼴 무게 : 굵게
Divi 버튼 색상 설정

간격

또한 사용자 정의 패딩을 추가하십시오.

  • 상단 패딩 : 50px
  • 하단 패딩 : 50px
  • 왼쪽 패딩 : 100px
  • 오른쪽 패딩 : 100px
Divi 모듈 버튼 간격 설정

위치

그리고 그에 따라 버튼을 재배치하십시오.

  • 위치 : 절대
  • 위치 : 왼쪽 하단
Divi 버튼 모듈 위치 조정

필요한만큼 라인을 복제하십시오

전체 라인과 모든 해당 모듈을 완료하면 전체 라인을 세 번 복제 할 수 있습니다.

Divi 모듈 복제

모든 내용 변경

모든 내용을 두 줄로 편집하십시오.

divi 섹션 내용 편집

2. 스크롤 효과 적용

첫 번째 행 스크롤 효과

수평 운동

섹션의 모든 행을 완료했으면 스크롤 효과를 추가 할 차례입니다. 섹션의 첫 번째 줄을 열고 수평 이동을 추가합니다.

  • 수평 이동 활성화 : 예
  • 시작 오프셋 : -5
  • 평균 오프셋 : 0 (26 %)
  • 끝 오프셋 : 0
  • 트리거 모션 효과 : 요소 중간
divi 스크롤 효과 적용

페이드 인 및 아웃

또한 들어오고 나가는 페이드 효과를 사용하십시오.

  • 페이드 인 및 아웃 활성화 : 예
  • 초기 불투명도 : 100 %
  • 평균 불투명도 : 100 % (50 %)
  • 최종 불투명도 : 0 % (~ 53 %)
  • 트리거 모션 효과 : 요소 중간
페이드 애니메이션 섹션 divi 구성

가운데 행 스크롤 효과

수직 운동

다음으로 섹션의 첫 번째 줄과 마지막 줄 사이의 모든 줄에 스크롤 효과를 추가합니다. 먼저 수직 이동을 사용하십시오.

온라인 상점을 쉽게 만들 수 있습니다.

무료 WooCommerce를 다운로드하십시오. 전자 상거래 플러그인은 WordPress에서 실제 제품과 디지털 제품을 판매하는 플러그인입니다. [추천]

  • 수직 이동 활성화 : 예
  • 시작 오프셋 : -4
  • 평균 오프셋 : 0 (26 %)
  • 끝 오프셋 : 0
  • 모션 트리거 효과 : 요소 중간
Divi 스크롤 애니메이션 구성

페이드 인 및 아웃

또한 입출력 페이드 효과를 활성화하십시오.

  • 페이드 인 및 아웃 활성화 : 예
  • 초기 불투명도 : 0 %
  • 평균 불투명도 : 100 % (27 %에서 50 %)
  • 끝 오프셋 : 0 (53 %에서)
  • 트리거 모션 효과 : 요소 중간
Divi 라인 페이드 애니메이션

마지막 줄 스크롤 효과

수직 운동

그런 다음 섹션의 마지막 줄을 열고 다음 수직 이동을 추가하십시오.

  • 수직 이동 활성화 : 예
  • 시작 오프셋 : -4
  • 평균 오프셋 : 0 (26 %)
  • 끝 오프셋 : 0
  • 트리거 모션 효과 : 요소 중간
Divi 라인 모듈 스크롤 애니메이션

페이드 인 및 아웃

들어오고 나가는 페이드 효과로 당신은 끝났습니다!

  • 페이드 인 및 아웃 활성화 : 예
  • 초기 불투명도 : 0 %
  • 평균 불투명도 : 100 % (27 %에서 50 %)
  • 최종 불투명도 : 100 % (~ 53 %)
  • 트리거 모션 효과 : 요소 중간
Divi 라인 모듈 모양 애니메이션 설정

최종 결과

이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.

최종 데모

마지막 생각

이 기사에서는 Divi의 스크롤 효과로 아름다운 서비스 전환을 만드는 방법을 보여주었습니다. 한 서브가 사라지기 전에 다른 서브가 나타나기 시작하여 눈을 즐겁게합니다. 이 접근 방식은 개별 수준에서 각 서비스를 강조하는 데 도움이됩니다. JSON 파일을 무료로 다운로드 할 수도 있습니다! 질문이나 제안이 있으시면 아래 댓글 섹션에 댓글을 남겨주세요.

이 문서에는 메모의 0을 포함

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드는 표시됩니다 *

이 사이트는 원하지 않는 것을 줄이기 위해 Akismet을 사용합니다. 댓글 데이터 사용 방법에 대해 자세히 알아보기.

맨 위로
0 주식
짹짹
레지스터