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

서비스 페이지를 디자인할 때 방문자 귀하가 제공하는 모든 다양한 서비스를 확인하십시오. 많은 경우에 그들이 찾고 있는 하나의 특정 서비스일 뿐이지만 서비스 구조에서 간소화된 방식을 제공한다면 방문자 그들 모두를 처리하십시오.

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

가자.

가능한 결과

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

1, 요소의 구조를 재현

섹션 1 추가

간격

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

상단 패딩 : 80px (데스크톱 및 태블릿), 0px (전화)
하단 패딩 : 80px

새 행 추가

기둥 구조

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

크기 조정

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

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

간격

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

상단 여백 : 200px
아래쪽 여백 : 200px

1 열에 텍스트 모듈 추가

H2 콘텐츠 추가

이제 1열의 텍스트 모듈부터 시작하여 모듈을 추가할 차례입니다. 내용 당신이 선택한 H2.

H2 텍스트 설정

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

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

간격

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

하단 여백 : 50 픽셀 (태블릿 및 휴대 전화 만 해당)

2 열에 텍스트 모듈 추가

콘텐츠 추가

두 번째 열로 넘어 갑시다. 우리에게 필요한 첫 번째 모듈은 특정 내용을 포함하는 텍스트 모듈입니다. 내용 설명.

텍스트 설정

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

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

열 2에 분리 모듈 추가

시계

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

구분 기호 표시 : 예

라인

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

선 색상 : # 000000

크기 조정

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

분배기 무게 : 3px
너비 : 28 %

간격

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

상단 여백 : 10px

섹션 2 추가

간격

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

상단 패딩 : 0px

오버 플로우

오버플로도 숨 깁니다.

수평 오버플로 : 숨겨진
수직 오버플로 : 숨겨진