Divi의 고정 옵션으로 이미지 전환을 트리거하는 방법

Divi의 고정 옵션의 다양성은 고정 헤더에 대한 설정을 사용하는 것 이상입니다. 이를 사용하여 디자인 변경을 트리거할 수도 있습니다. 예를 들어 이 자습서에서는 Divi의 고정 옵션을 사용하여 이미지 전환을 트리거합니다. 방문자가 스크롤하여 이미지에 가까워지는 즉시 이미지 전환이 발생합니다. 두 가지 다른 예를 처음부터 다시 만들지만 일단 접근 방식을 익히면 Divi의 기본 제공 옵션만 사용하여 고유한 이미지 전환을 만들 수 있습니다. JSON 파일도 무료로 다운로드할 수 있습니다!

가자!

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

데스크탑

이동하는

무료로 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

1. 일반 단계

섹션 #1 추가

간격

튜토리얼의 첫 번째 부분에서는 디자인의 기초를 구축할 것입니다. 설정이 완료되면 이 게시물의 미리 보기에서 두 가지 예를 달성하기 위해 올바른 설정을 적용하는 데 집중할 수 있습니다. 작업 중인 페이지에 새 섹션을 추가하고 섹션의 디자인 탭으로 이동한 다음 기본 상단 및 하단 패딩을 모두 제거합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px

새 행 추가

열 구조

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

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 다음과 같이 크기 설정을 수정합니다.

• 최대 너비: 1480px
• 행 정렬: 가운데

간격

다음으로 모든 기본 상단 및 하단 패딩을 제거합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px

Z 인덱스

그리고 위치 설정에서 az index를 설정합니다. 이렇게 하면 자습서에서 나중에 추가할 다음 행 아래에 행이 남아 있는지 확인하는 데 도움이 됩니다.

• Z 인덱스: 1

열 오버플로

그런 다음 열 설정을 열고 오버플로를 숨김으로 설정합니다.

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

열에 이미지 모듈 추가

이미지 상자를 비워 둡니다.

이 행에서 필요한 유일한 모듈은 이미지 모듈입니다. 이미지 상자를 비워 둡니다.

배경 이미지

대신 원하는 배경 이미지를 사용하십시오.

• 배경 이미지 크기: 표지
• 배경 이미지 위치: 중앙

간격

이미지를 표시할 수 있도록 다양한 화면 크기에서 몇 가지 사용자 지정 패딩 값을 사용합니다.

• 탑 패딩:
  • 데스크탑: 300px
  • 태블릿 및 휴대전화: 150px
• 하단 패딩:
  • 데스크탑: 300px
  • 태블릿 및 휴대전화: 150px

섹션 #2 추가

간격

이전 섹션 바로 아래에 다른 섹션을 추가합니다. 섹션 설정을 열고 간격 설정에서 기본 상단 패딩을 제거합니다.

• 상단 패딩: 0px

새 행 추가

열 구조

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

Z 인덱스

이 행에도 az 인덱스를 추가합니다.

• Z 인덱스: 2

열에 행동 유도 모듈 ​​추가

콘텐츠 추가

이 행에서 필요한 유일한 모듈은 행동 유도 모듈입니다. 원하는 콘텐츠를 추가합니다.

버튼 링크 추가

버튼 링크와 함께.

배경색

그런 다음 흰색 배경색을 추가합니다.

• 배경색: #ffffff

텍스트 설정

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

• 텍스트 정렬: 왼쪽
• 텍스트 색상: 어두운

제목 텍스트 설정

제목 텍스트도 스타일을 지정합니다.

• 제목 글꼴: Playfair 디스플레이
• 제목 글꼴 스타일: 기울임꼴
• 제목 텍스트 크기
  • 데스크탑: 45px
  • 태블릿: 40px
  • 전화: 35px
• 제목 글자 간격: 1px

본문 설정

본문뿐만 아니라.

• 본문 글꼴: 칼라
• 바디 라인 높이: 2em

버튼 설정

그런 다음 버튼의 스타일을 지정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 18px
• 버튼 텍스트 색상: #000000
• 그라디언트 색상 1: #ffffff
• 그라디언트 색상 2: #ffdc91
• 그라디언트 유형: 선형
• 시작 위치: 50%
• 최종 위치: 50%

• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 0px
• 버튼 글꼴: Karla
• 버튼 글꼴 스타일: 대문자
• 버튼 표시: 예

• 버튼 아이콘 배치: 왼쪽
• 버튼에 대한 호버 시 아이콘만 표시: 아니오
• 상단 패딩: 10px
• 하단 패딩: 10px
• 왼쪽 패딩: 15%
• 오른쪽 패딩: 15%

사이징

다양한 화면 크기에서도 크기 설정을 수정하고 있습니다.

• 너비:
  • 데스크탑: 65%
  • 태블릿: 80%
  • 전화: 100%
• 모듈 정렬: 중앙

간격

다음으로, 간격 설정에 몇 가지 사용자 지정 여백 및 패딩 값을 추가합니다.

• 최고 여백:
  • 데스크탑: -150px
  • 태블릿: -50px
  • 전화: 0px
• 하단 여백: 50px
• 상단 패딩: 150px
• 하단 패딩: 150px

박스 섀도우

그리고 미묘한 상자 그림자를 추가하여 모듈 설정을 완료합니다.

• 상자 Shadwo 흐림 강도: 30px
• 그림자 색상: rgba(0,0,0,0.11)

2. 행에 고정 효과 적용

섹션 #1에서 행 열기

이제 디자인의 기초를 설정했으므로 끈적한 효과를 적용할 차례입니다. 이 고정 효과는 사람들이 요소를 스크롤할 때 스타일을 변경하는 데 도움이 됩니다. 고정 효과를 추가할 요소는 이미지가 포함된 첫 번째 섹션의 행입니다.

스티키 효과 적용

하단 고정 제한이 섹션으로 설정되어 있는지 확인하는 것이 중요합니다. 행의 시작과 끝은 섹션의 것과 동일하므로 행이 실제로 고정되지 않지만 고정 스타일이 적용됩니다. 고정 상단 오프셋은 전환이 발생하기 시작하는 지점을 결정합니다. 예를 들어 이 값이 0이면 전환을 시작하려면 브라우저 상단이 행 상단을 터치해야 합니다. 고정 상단 오프셋을 "300px"로 설정하여 해당 전환을 더 일찍 만듭니다.

• 고정 위치: 상단에 고정
• 고정 상단 오프셋: 300px
• 하단 고정 한계: 섹션
• 주변 점착 요소와의 오프셋: 예
• 전환 기본 및 고정 스타일: 예

첫 번째 섹션 위에 동일한 상단 오프셋이 있는지 확인

고정 상단 오프셋을 "300px"로 설정했기 때문에 페이지 상단에 공간이 필요합니다. 페이지 중간에 이 디자인을 사용하고 있다면 이 단계에 대해 걱정할 필요가 없습니다. 그러나 페이지 상단에서 이 접근 방식을 사용하는 경우 고정 상단 오프셋을 수정하거나 상단에 충분한 공간을 추가해야 합니다. 첫 번째 섹션에 위쪽 여백을 추가하여 해당 공간을 생성합니다.

• 상단 여백: 400px

3. 이미지 모듈에 Ken Burn 효과 적용

행이 고정으로 바뀌었으므로 행과 모든 자식 요소에 고정 스타일을 적용할 수 있습니다. 가능성은 무한하지만 두 가지 다른 예와 이를 달성하는 방법을 보여줍니다. 두 개의 다른 예제를 더 쉽게 사용할 수 있도록 두 섹션을 모두 한 번 복제하고 첫 번째 섹션 아래에 배치합니다.

예 #1

고정 행 설정

박스 섀도우

이 게시물의 미리보기에서 볼 수 있었던 예제 #1을 다시 만들려면 행 설정을 열고 다음 상자 그림자 설정을 적용하세요.

• 상자 그림자 수직 위치: 0px
• 상자 그림자 확산 강도: 0px
• 그림자 색상: rgba(0,0,0,0)

• 고정 수직 위치: 100px
• 스티키 섀도우 컬러: #ffdc91

이행

고급 탭에서도 부드러운 전환을 포함합니다.

• 전환 시간: 500ms
• 전환 속도 곡선: 이즈

고정 이미지 모듈 설정

변환 스케일

다음으로 Image Module을 열고 고정 상태에서 변형 스케일 효과를 적용합니다.

• 둘 다: 100%

• 끈적임 둘 다: 130%

이행

이에 따라 모듈의 전환 설정을 수정하여 원활한 전환을 보장합니다.

• 전환 시간: 1200ms
• 전환 속도 곡선: 이즈

예 #2

고정 행 설정

변환 번역

두 번째 예시로! 행 설정을 열고 다음 변환 변환 설정을 적용합니다.

• 오른쪽: 20%

• 고정 오른쪽: 0%

이행

행의 전환 설정도 수정합니다.

• 전환 시간: 500ms
• 전환 속도 곡선: 이즈

고정 이미지 모듈 설정

필터

그런 다음 이미지 모듈을 열고 기본 및 고정 상태의 필터를 사용합니다.

• 채도: 0%
• 밝기: 50%

• 끈적 끈적한 채도: 100%
• 끈끈한 밝기: 100%

이행

다음과 같이 전환 설정을 변경하여 모듈 설정과 이 튜토리얼을 완료하십시오.

• 전환 시간: 500ms
• 전환 속도 곡선: 이즈

시사

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

데스크탑

이동하는

마지막 생각들

이 게시물에서 우리는 Divi의 고정 옵션으로 창의력을 발휘하는 방법을 보여주었습니다. 보다 구체적으로 이미지 전환을 트리거하는 방법을 보여 주었습니다. 사람들이 이미지를 스크롤하자마자 이미지의 스타일이 변경되어 아름다운 전환이 나타납니다. 우리는 두 가지 다른 예를 다루었지만 가능성은 무한합니다. JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

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