Divi에서 동적 스크롤 효과를 생성하기 위해 섹션 내에서 요소를 띄우는 방법

섹션 내의 플로팅 요소는 사용자가 페이지를 아래로 스크롤할 때 콘텐츠를 표시하는 효과적이고 고유한 방법을 제공할 수 있습니다. Divi를 사용하면 사용 가능한 기본 제공 위치 옵션을 사용하여 고정 위치를 지정하여 요소를 간단히 띄울 수 있습니다. 그리고 고정 요소와 정적 요소, 애니메이션, 시차를 결합하면 콘텐츠가 살아납니다!

이 튜토리얼에서는 Divi의 섹션 내에서 요소(이미지 및 블러브 모듈)를 띄워 아름답고 역동적인 스크롤 효과를 만드는 방법을 보여줍니다!

시작하자!

엿보기

다음은 우리가 만들 플로팅 요소 디자인을 간략하게 살펴보겠습니다.

YouTube 채널 구독

무료로 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 JSON 파일을 Divi Builder로 끌어다 놓기만 하면 됩니다.

참고: 시각적 모드에서 Divi Builder를 사용하여 항목을 편집하려면 와이어프레임 보기 모드를 배포하고 중간 섹션의 기본 Z 인덱스를 복원해야 합니다.

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

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다. 그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.
4. 이 튜토리얼에서 사용된 것과 동일한 이미지를 사용하려면 여기를 클릭하여 Candy Shop 레이아웃 팩에서 이미지를 다운로드할 수 있습니다.

세 개의 열이 있는 섹션 만들기

3열 행을 만들어 작업을 진행해 보겠습니다.

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

• 거터 폭: 1
• 폭: 100%
• 최대 너비: 100%

열 1에 대한 설정을 열고 다음 패딩을 추가합니다.

• 패딩: 10vw 상단, 5vw 하단

이것은 이미지의 레이아웃을 약간 비틀고 열에 약간의 높이를 추가하는 데 도움이 됩니다.

열 2의 설정을 열고 다음 Z 인덱스를 추가합니다.

• Z 인덱스: 12

이렇게 하면 중간 열에 추가할 광고 문구 모듈이 섹션의 다른 모든 콘텐츠 위에 유지됩니다.

정적 및 고정 위치가 있는 이미지 추가

다음 단계는 플로팅 이미지를 왼쪽 및 오른쪽 열에 추가하는 것입니다. 이미지 중 4개는 정적(기본값) 위치를 유지하지만 그 중 2개는 고정 위치를 지정합니다. 이것은 일부가 떠 있다는 환상을 주는 데 도움이 됩니다.

이미지 #1(정적)

열 1에 새 이미지 모듈을 추가합니다.

모듈에 이미지를 업로드합니다.

이미지에 대한 다음 디자인 설정을 업데이트합니다.

• 너비: 200px
• 모듈 정렬: 오른쪽
• 블러: 2px
• 변환 번역(Y): -58px
• 변환 번역(X): 63px

이미지 #2(고정)

열 1의 첫 번째 아래에 두 번째 이미지 모듈을 추가합니다.

모듈에 새 이미지를 업로드합니다.

다음과 같이 이미지 #2의 디자인 설정을 업데이트합니다.

• 너비: 200px
• 위치: 고정
• 위치: 왼쪽 상단
• 수직 오프셋: 7%
• 수평 오프셋: 5%

이미지 #3(정적)

열 1의 두 번째 아래에 세 번째 이미지를 추가합니다.

모듈에 새 이미지를 업로드합니다.

다음과 같이 이미지의 디자인 설정을 업데이트합니다.

• 너비: 300px
• 모듈 정렬: 오른쪽
• 변환 번역(Y): 179px
• 변환 번역(X): 128px

이미지 #4(정적)

열 3에 네 번째 이미지 모듈을 추가합니다.

모듈에 새 이미지를 업로드합니다.

다음과 같이 이미지 #4의 디자인 설정을 업데이트합니다.

• 너비: 200px
• 모듈 정렬: 왼쪽
• 블러: 4px
• 변환 번역(Y): -9px
• 변환 번역(X): -30px

흐림 효과는 이미지가 더 멀리 있는 것처럼 보이게 하는 데 도움이 됩니다.

이미지 #5(고정)

다음으로 열 3의 이미지 #4 아래에 새 이미지 모듈을 추가합니다.

다음과 같이 모듈에 새 이미지를 업로드합니다.

다음과 같이 이미지 #5의 디자인 설정을 업데이트합니다.

• 너비: 200px
• 위치: 고정
• 위치: 오른쪽 하단
• 수직 오프셋: 7%
• 수평 오프셋: 5%

이미지 #6(정적)

열 3의 이미지 #5 아래에 여섯 번째이자 마지막 이미지를 추가합니다.

모듈에 새 이미지를 업로드합니다.

다음과 같이 이미지 #6의 디자인 설정을 업데이트합니다.

• 너비: 300px
• 모듈 정렬: 왼쪽
• 변환 번역(Y): 62px
• 변환 번역(X): -122px

고정된 위치에 Blurb 추가

섹션에 최종 콘텐츠를 추가할 준비가 되었습니다. 이것은 또한 고정된 위치에 있을 주요 특징 광고가 될 것입니다.

중간 열(2열)에 블러브 모듈을 추가합니다.

그런 다음 다음과 같이 광고문안의 내용을 업데이트합니다.

• 제목: 달콤한 거래

그런 다음 텍스트 탭 아래의 본문에 다음 HTML을 추가합니다.

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

<a href="#">Learn More</a>

광고 문구에 이미지를 추가합니다.

다음 설정을 업데이트하여 광고 문구를 디자인합니다.

• 배경색: #ffffff
• 텍스트 정렬: 가운데
• 제목 글꼴: Concert One
• 제목 텍스트 색상: #0a2d61
• 제목 텍스트 크기: 50px
• 본문 글꼴: Concert One
• 본문 텍스트 크기: 20px
• 바디 라인 높이: 1.8em
• 링크 글꼴 스타일: TT
• 링크 텍스트 색상: #ff3d97
• 링크 텍스트 크기: 20px
• 링크 문자 간격: 5px
• 너비: 400px
• 패딩: 상단 30픽셀, 하단 30픽셀, 왼쪽 30픽셀, 오른쪽 30픽셀

• 둥근 모서리: 10px
• 박스 섀도우: 스크린샷 참조
• 상자 그림자 흐림 강도: 80px

그런 다음 마지막으로 중심 위치를 사용하여 광고 문구에 고정 위치를 지정합니다.

• 위치: 고정
• 위치: 중간/중앙

모의 상단 및 하단 섹션 만들기

현재 섹션 아래에 새 일반 섹션을 추가합니다.

섹션에 배경색을 지정합니다.

• 배경색: #4DB9FF

그런 다음 부동 요소가 있는 섹션을 스크롤할 수 있는 충분한 공간을 확보할 수 있도록 높이를 지정합니다.

• 높이: 100vh

모의 섹션을 복제하고 플로팅 요소가 있는 메인 섹션이 중간 섹션이 되도록 복제본을 페이지 상단으로 이동합니다.

중간 섹션에 대한 최종 수정

디자인을 마무리하기 위해 섹션에 시차 배경을 추가하여 또 다른 움직임 레이어를 추가합니다. 그리고 오버플로도 숨겨야 합니다. 그러나 주요 문제는 고정 요소가 여전히 상단 및 하단 섹션 위에 표시된다는 것입니다. 이 문제를 해결하려면 섹션에 -1 Z 인덱스를 제공해야 합니다.

• 배경 이미지: 이미지 삽입
• 시차 효과 사용: 예
• 시차 효과: 진정한 시차
• 수평 오버플로: 숨김
• 수직 오버플로: 숨김
• Z 인덱스: -1

참고 : 섹션 Z 인덱스를 -1로 지정하면 데스크탑 보기 모드의 비주얼 빌더가 올바르게 작동하지 않을 수 있습니다. 따라서 섹션을 추가로 편집하려면 와이어프레임 보기 모드를 배포해야 할 수도 있습니다.

정적 요소에 대한 추가 애니메이션

다중 선택을 사용하여 4개의 정적 이미지를 선택한 다음 다음 애니메이션 설정으로 요소 설정을 업데이트합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 위로
• 애니메이션 시간: 4000ms
• 애니메이션 시작 불투명도: 100%

이렇게 하면 스크롤할 때 이미지가 표시될 때 이미지가 떠 있는 효과가 추가됩니다.

최종 결과

다음은 최종 결과입니다.

마지막 생각들

Divi에서 요소를 플로팅하려면 몇 번의 클릭만으로 위치를 고정한 다음 오프셋을 사용하여 브라우저 내에서 고정된 상태로 유지하려는 정확한 위치에 요소를 배치하면 됩니다. 그런 다음 Z 인덱스를 사용하여 고정 요소가 특정 섹션에서만 표시되도록 할 수 있습니다. 기본 설정이 완료되면 추가 정적 요소, 시차 배경 및 애니메이션을 추가하여 섹션에 생기를 불어넣어 스크롤 효과를 향상시킬 수 있습니다. 이것이 다음 Divi 빌드에서 창의력을 발휘하는 데 영감을 주기를 바랍니다.

이 섹션을 완전히 새로운 수준으로 끌어올리고 싶다면 이제 Divi에 내장된 새로운 스크롤 효과를 확인하십시오.

댓글로 여러분의 의견을 기다리겠습니다.

건배!