Divi의 새로운 기둥 구조를 사용하여 멋진 섹션 전환을 만드는 방법
게시 됨: 2018-09-26매주 다음 프로젝트에 사용할 수 있는 새로운 무료 Divi 레이아웃 팩을 제공합니다. 레이아웃 팩 중 하나의 경우 웹사이트를 한 단계 업그레이드하는 데 도움이 되는 사용 사례도 공유합니다.
이번 주에는 진행 중인 Divi 디자인 이니셔티브의 일환으로 Divi의 새로운 기둥 구조를 사용하여 멋진 섹션 전환을 만드는 방법을 보여 드리겠습니다. 다양한 열 구조를 Divi의 일부 기본 제공 옵션과 결합하여 페이지 디자인을 한 단계 끌어올릴 것입니다.
가자!
시사
Divi의 기본 제공 옵션만을 사용하여 처음부터 만들 세 가지 다른 예부터 살펴보겠습니다. 이러한 예는 더 작은 화면 크기에서도 똑같이 잘 보입니다.
Divi의 메이크업 아티스트 레이아웃 팩 랜딩 페이지 사용
Divi의 메이크업 아티스트 레이아웃 팩 랜딩 페이지를 사용하겠습니다. 레이아웃 팩을 확인하고 싶다면 다음 블로그 게시물로 이동하세요. 특정 레이아웃 팩을 사용하여 이 튜토리얼을 시연하고 있지만 다른 레이아웃에서도 이 기술을 쉽게 사용할 수 있습니다.
섹션 전환 #1
새 섹션 추가
위치하고 있다
Divi의 Visual Builder를 사용하여 메이크업 아티스트 레이아웃 팩의 랜딩 페이지를 엽니다. 그런 다음 영웅 섹션 바로 아래에 새 일반 섹션을 추가합니다.
간격
다음 섹션의 기본 간격을 모두 제거합니다.
- 상단 패딩: 0px
- 하단 패딩: 0px
새 행 추가
열 구조
다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.
사이징
행의 너비도 늘립니다.
- 이 행을 전체 너비로 만들기: 예
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 0
간격
다음 기본 상단 및 하단 패딩을 제거하십시오.
- 상단 패딩: 0px
- 하단 패딩: 0px
필터
행을 더 생동감 있게 만들려면 필터 설정에서 채도를 높이십시오.
- 채도: 200%
열 1에 디바이더 모듈 #1 추가
구분선 숨기기
디자인에서 첫 번째 사각형을 만들기 위해 열 1에 Divider Module을 추가할 것입니다. 'Show Divider' 옵션을 비활성화합니다.
그라데이션 배경
다음으로 Divider 모듈에 그라데이션 배경을 추가합니다.
- 색상 1: rgba(255,255,255,0)
- 색상 2: rgba(176,182,219,0.34)
간격
정사각형을 만들려면 간격 값을 변경합니다.
- 상단 여백: -120px
- 상단 패딩: 120px
- 하단 패딩: 120px
클론 분배기 모듈 및 열 2에 배치
DIvider 모듈 수정이 완료되면 복제하여 두 번째 열에 배치합니다.
그라데이션 배경 변경
그라디언트 배경부터 시작하여 이 복제본을 몇 가지 변경해야 합니다.
- 색상 1: rgba(228,237,234,0.58)
- 색상 2: rgba(255,255,255,0)
간격 변경
간격 설정도 변경합니다. 이렇게 하면 이 디바이더 모듈과 첫 번째 열에 있는 디바이더 모듈 사이의 거리가 늘어납니다.
- 상단 여백: 142px
- 상단 패딩: 120px
- 하단 패딩: 120px
클론 분배기 모듈 #1을 두 번 및 열 3 및 5에 배치
보라색 분할기 모듈을 두 번 복제하고 복제본을 3열과 5열에 배치합니다.
클론 분배기 모듈 #2 및 열 4에 배치
녹색 분할기 모듈도 복제하여 4열에 배치합니다.
태블릿 및 휴대폰의 3, 4, 5열에서 구분선 모듈 숨기기
열 3의 분할기 모듈 열기
물론, 우리는 이러한 섹션 전환이 더 작은 화면 크기에서도 똑같이 좋게 보이길 원합니다. 그래서 우리가 사용한 모듈 중 일부를 숨길 것입니다. 3열에서 디바이더 모듈의 설정을 열어 시작합니다.
태블릿 및 휴대전화에서 숨기기
고급 탭으로 이동하여 휴대폰 및 태블릿에서 모듈을 비활성화합니다.
가시성 스타일 복사
4열과 5열에서도 구분선을 숨겨야 합니다. 프로세스 속도를 높이려면 3열에 있는 구분선의 가시성 설정을 복사합니다.
가시성 스타일 붙여넣기
그리고 4열과 5열의 Divider Modules에 붙여넣습니다.
섹션 전환 #2
새 섹션 추가
위치하고 있다
두 번째 섹션 전환을 만들려면 여기에 새 섹션을 추가하세요.
탑 디바이더
섹션 설정을 열고 다음 상단 구분선을 추가합니다.
- 구분선 스타일: 목록에서 찾기
- 디바이더 색상: #ffffff
- 디바이더 높이: 236px
- 디바이더 플립: 수직
- 구분선 배열: 섹션 콘텐츠 상단
하단 디바이더
마찬가지로 하단 구분선도 추가합니다.
- 구분선 스타일: 목록에서 찾기
- 디바이더 색상: #ffffff
- 디바이더 높이: 236px
- 구분선 배열: 섹션 콘텐츠 상단
간격
다음으로 간격 설정을 변경합니다.
- 상단 여백: 100px
- 하단 여백: 100px
- 상단 패딩: 0px
- 하단 패딩: 0px
새 행 추가
열 구조
새 섹션에 행을 추가할 시간입니다! 다음 열 구조를 선택합니다.
사이징
모듈을 추가하지 않고 행 설정을 열고 너비를 변경합니다.
- 이 행을 전체 너비로 만들기: 예
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
간격
기본 상단 및 하단 패딩도 모두 제거합니다.
- 상단 패딩: 0px
- 하단 패딩: 0px
열 1에 디바이더 모듈 #1 추가
배경색
다음으로 첫 번째 열에 Divider 모듈을 추가합니다. 설정을 열고 배경색을 추가합니다.
- 배경색: rgba(176,182,219,0.34)
디바이더 색상
구분선 색상도 변경합니다.
- 디바이더 색상: #ffffff
디바이더 스타일
그런 다음 스타일 설정으로 이동하여 다음 구분선 스타일을 사용합니다.
- 디바이더 스타일: 더블
디바이더 무게
디바이더의 무게는 다음과 같아야 합니다.
- 디바이더 무게: 18px
간격
마지막으로 사용자 지정 패딩을 사용하여 Divider 모듈의 크기를 늘립니다.
- 상단 패딩: 50px
- 하단 패딩: 50px
클론 분배기 모듈 및 열 2에 배치
첫 번째 열의 Divider Module 작업이 완료되면 이를 복제하고 두 번째 열에 복제본을 배치합니다.
배경색 변경
이에 따라 이 복제본의 배경색을 변경합니다.
- 배경색: #e4edea
클론 분배기 모듈 #1 및 열 3 및 5에 배치
계속해서 보라색 분할기 모듈을 두 번 복제하고 3열과 5열에 복제본을 배치합니다.
클론 분배기 모듈 #2 및 열 4에 배치
녹색 Divider 모듈도 복제하고 복제본을 4열에 배치합니다.
태블릿 및 휴대폰의 3, 4, 5열에서 구분선 모듈 숨기기
태블릿 및 휴대전화에서 숨기기
첫 번째 섹션 전환 예제에서 했던 것과 동일한 작업을 수행할 것입니다. 3열에서 Divider Module의 설정을 열고 휴대폰과 태블릿에서 숨깁니다.
가시성 스타일 복사
이 가시성 스타일을 복사합니다.
가시성 스타일 붙여넣기
그리고 4열과 5열의 Divider Modules에 붙여넣습니다.
섹션 전환 #3
새 섹션 추가
위치하고 있다
페이지에 마지막 섹션 전환을 추가하려면 여기에 새 섹션을 추가하세요.
탑 디바이더
섹션 설정을 열고 상단 구분선을 추가합니다.
- 구분선 스타일: 목록에서 찾기
- 디바이더 색상: #ffffff
- 디바이더 높이: 150px
- 구분선 배열: 섹션 콘텐츠 상단
하단 디바이더
다음에 맨 아래에 추가:
- 구분선 스타일: 목록에서 찾기
- 디바이더 색상: #ffffff
- 디바이더 높이: 150px
- 디바이더 플립: 수직
- 구분선 배열: 섹션 콘텐츠 상단
간격
그런 다음 간격 설정으로 이동하여 다음과 같이 변경합니다.
- 상단 여백: 100px
- 하단 여백: 100px
- 상단 패딩: 0px
- 하단 패딩: 0px
새 행 추가
열 구조
이 섹션에서 필요한 행은 다음과 같은 열 구조를 갖습니다.
사이징
모듈을 추가하지 않고 행 설정을 열고 행 너비를 늘리십시오.
- 이 행을 전체 너비로 만들기: 예
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
간격
다음으로 모든 기본 상단 및 하단 패딩을 제거합니다.
- 상단 패딩: 0px
- 하단 패딩: 0px
열 1에 디바이더 모듈 #1 추가
구분선 숨기기
계속해서 첫 번째 열에 Divider 모듈을 추가합니다. '분할 표시' 옵션을 비활성화합니다.
배경색
대신 구분선에 배경색을 추가합니다.
- 배경색: rgba(176,182,219,0.34)
간격
상단 및 하단 패딩을 사용하여 모듈 크기를 늘립니다.
- 상단 패딩: 100px
- 하단 패딩: 100px
클론 분배기 모듈 및 열 2에 배치
배경색 변경
첫 번째 열에서 Divider 모듈을 복제하고 두 번째 열에 복제본을 배치합니다. 설정을 열고 배경색을 변경합니다.
- 배경색: rgba(228,237,234,0.58)
클론 분배기 모듈 #1 및 열 3 및 5에 배치
보라색 분할기 모듈을 두 번 복제하고 3열과 5열에 배치합니다.
클론 분배기 모듈 #2 및 열 4에 배치
녹색 Divider 모듈도 복제하고 복제본을 4열에 배치합니다.
태블릿 및 휴대폰의 3, 4, 5열에서 구분선 모듈 숨기기
태블릿 및 휴대전화에서 숨기기
태블릿 및 휴대전화의 3열에서 Divider 모듈을 숨깁니다.
가시성 스타일 복사
이 가시성 스타일을 복사합니다.
가시성 스타일 붙여넣기
그리고 4열과 5열의 Divider Module에 붙여넣으면 끝입니다!
시사
이제 모든 단계를 거쳤으므로 우리가 만든 세 가지 다른 예를 마지막으로 살펴보겠습니다.
마지막 생각들
이 사용 사례 블로그 게시물에서는 Divi의 새로운 열 구조를 사용하여 멋진 섹션 전환을 만드는 방법을 보여주었습니다. 이 튜토리얼은 진행 중인 Divi 디자인 이니셔티브의 일부로 매주 디자인 도구 상자에 무언가를 넣으려고 합니다. 질문이 있으시면 아래의 댓글 섹션에 댓글을 남겨주세요!