[ad_1]
가자.
측량
튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 간단히 살펴보겠습니다.
국
변하기 쉬운
무료로 레이아웃 다운로드
무료 레이아웃을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 다음을 사용하여 Divi Daily 메일링 리스트에 가입해야 합니다. 형태 아래에. 신규 구독자로서 매주 월요일마다 더 많은 Divi 혜택과 무료 Divi Layout 팩을 받으실 수 있습니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하십시오. 귀하는 "재구독"되거나 추가 이메일을 받지 않을 것입니다.
재창조를 시작합시다!
2x 자리 표시자 섹션 추가
새 섹션 추가
작업 중인 페이지에 자리 표시자 섹션을 추가하여 시작합니다.
크기 조정
섹션 설정을 열고 크기 설정에서 높이를 변경합니다.
섹션 복제
섹션을 한 번 복제합니다. 이렇게 하면 페이지에 두 개의 자리 표시자 섹션이 남게 됩니다. 이 자리 표시자 섹션은 자습서를 마친 후 최종 효과를 확인하는 데 도움이 됩니다. 라이브 웹사이트에서 자리 표시자 섹션은 페이지 전체에서 사용하는 일반 섹션으로 대체됩니다.
자리 표시자 섹션 사이에 새 섹션 추가
자리 표시자 섹션이 배치되면 자리 표시자 섹션 사이에 새 섹션을 추가합니다.
배경색
섹션 설정을 열고 흰색 배경색을 사용합니다.
- 배경색: #ffffff
간격
섹션 디자인 탭으로 전환하고 그에 따라 상단 및 하단 패딩 값을 변경합니다.
- 상단 패딩: 10vh
- 하단 패딩: 10vh
라인 # 1 추가
기둥 구조
다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.
크기 조정
아직 모듈을 추가하지 않고 행 설정을 열고 크기 설정으로 이동하여 최대 너비 및 너비 값을 변경합니다.
- 폭: 100%
- 최대 너비: 100%
열에 텍스트 모듈 추가
복사본 추가
이 줄에 필요한 유일한 모듈은 텍스트 모듈입니다. 원하는 사본을 추가하십시오.
텍스트 설정
모듈 디자인 탭으로 전환하고 그에 따라 텍스트 설정을 변경합니다.
- 텍스트 글꼴: 몬세라트
- 텍스트 글꼴 두께: 매우 굵게
- 텍스트 글꼴 스타일: 대문자
- 텍스트 색상: # fff2ea
- 텍스트 크기: 11vw
- 텍스트 줄 높이: 1em
- 텍스트 정렬: 가운데
라인 # 2 추가
기둥 구조
다음 열 구조를 사용하여 섹션에 다른 행을 추가합니다.
크기 조정
아직 모듈을 추가하지 않고 행 설정을 열고 다음과 같이 크기 설정을 변경합니다.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 2
- 너비 : 90 %
- 선 정렬: 중앙
열에 이미지 모듈 추가
이미지 업로드
행 열에 이미지 모듈을 추가합니다. 원하는 이미지를 업로드하세요.
조정
모듈 디자인 탭으로 전환하고 그에 따라 이미지 정렬을 변경합니다.
크기 조정
그런 다음 크기 설정으로 이동하여 모듈에 전체 너비를 적용합니다.
열에 버튼 모듈 추가
복사본 추가
열에 추가할 다음이자 마지막 모듈은 버튼 모듈입니다. 원하는 사본을 사용하십시오.
버튼 정렬
디자인 탭으로 이동하여 버튼 정렬을 변경합니다.
버튼 설정
그런 다음 다음과 같이 버튼의 스타일을 지정합니다.
- 버튼에 사용자 정의 스타일 사용: 예
- 버튼 텍스트 크기: 16px
- 버튼 텍스트 색상: # 000000
- 버튼 배경색: #ffffff
- 버튼 테두리 너비: 0px
- 버튼 문자 간격: 2px
- 버튼 글꼴: 몬세라트
- 버튼 글꼴 두께: 굵게
- 버튼 글꼴 스타일: 대문자
간격
또한 간격 설정에서 사용자 지정 패딩 값을 사용합니다.
- 상단 패딩: 20px
- 하단 패딩: 20px
- 왼쪽 패딩: 5%
- 오른쪽 패딩: 5%
라인 1에 절대 위치 추가
두 번째 행을 완료했으면 행 #1로 돌아갑니다. 행 설정을 열고 고급 탭으로 이동하여 섹션을 절대로 만듭니다. 이렇게 하면 라인과 내부의 텍스트 모듈이 이미지 모듈이 포함된 라인 아래에 배치됩니다.
- 위치: 절대
- 위치: 센터
n ° 1 행을 복제하고 n ° 2 행 아래에 복제물 배치
텍스트 모듈이 이미지 위에 나타나도록 하려면 더 높은 z-색인 값을 가진 다른 행이 필요합니다. 첫 번째 행을 복제하고 두 번째 행 아래에 복제본을 배치합니다.
3행에 효과 적용
Z 인덱스 증가
중복 행을 열고 고급 탭에서 z 인덱스를 변경합니다.
텍스트 색상 변경
행에서 텍스트 모듈을 열고 텍스트 색상을 변경합니다.
라인에 블렌드 모드 적용
그런 다음 행 설정을 열고 필터 설정에서 혼합 모드를 변경합니다.
행 # 3의 텍스트 모듈에 스크롤 효과 사용
페이드 인 및 페이드 아웃 효과 추가
텍스트 창을 다시 열고 스크롤 효과로 이동한 다음 페이드 인 및 페이드 아웃 효과를 켜서 자습서를 완료합니다. 그게 다야!
- 페이드 인 및 페이드 아웃 활성화: 예
- 시작 불투명도: 0%
- 중간 불투명도: 0%(~26%)
- 최종 불투명도: 100%(28%에서)
- 모션 효과 트리거: 요소의 중간
측량
이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.
국
변하기 쉬운
마지막 생각
이 기사에서는 Divi의 기본 제공 스크롤 효과로 창의력을 발휘하는 방법을 보여 주었습니다. 특히 스크롤 복사를 셔플하는 방법을 보여 주었습니다. 처음에는 사본이 이미지 아래에 나타납니다. 스크롤하면 복사본이 이미지 위에 나타나고 이미지와 병합됩니다. JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래 댓글 섹션에 자유롭게 의견을 남겨주세요.
Divi에 대해 자세히 알아보고 더 많은 Divi 공짜를 얻고 싶다면 구독하십시오. 뉴스 레터 이메일과 우리에게 YouTube 채널 그래서 당신은 항상 이 무료 콘텐츠를 가장 먼저 알고 활용하는 사람들 중 하나가 될 것입니다.
[ad_2]
